/* ============================================================
   WRENCH AI — DESIGN SYSTEM · shared foundation
   Same tokens, type, buttons and motion as the EDMS page.
   ============================================================ */

/* Unique Sections */

/* ===== 01 · HERO ===== */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy); color:var(--on-dark);
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("Pictures%20for%20UI/magnific_clean-abstract-visualizat_KjhcJC6kqp-notext.png") center right / cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(52% 48% at 88% 6%, rgba(76,226,204,.16), transparent 62%),
    linear-gradient(90deg, rgba(6,22,41,.95) 0%, rgba(6,22,41,.88) 44%, rgba(6,22,41,.62) 66%, rgba(6,22,41,.42) 82%, rgba(6,22,41,.6) 100%),
    linear-gradient(180deg, rgba(6,22,41,.82) 0%, rgba(6,22,41,.2) 16%, rgba(6,22,41,.05) 40%, rgba(6,22,41,.32) 72%, rgba(6,22,41,.7) 100%);
}

.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-16);
  align-items:end; padding-block:clamp(1.75rem,3.4vw,2.75rem) clamp(2rem,4vw,3rem);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:.8125rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white); border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:var(--space-2) var(--space-4); margin-bottom:var(--space-4);
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); }
.hero h1{
  font-family:"Saira", sans-serif; font-weight:700;
  font-size:clamp(2.25rem, 4.3vw, 4rem); line-height:1.02; letter-spacing:-.025em;
  color:var(--white); margin:0 0 var(--space-4);
  text-shadow:0 2px 18px rgba(6,22,41,.5);
}
.hero h1 .accent{ color:var(--teal); display:block; }
.hero-lead{ font-size:1.125rem; line-height:1.6; color:rgba(255,255,255,.92); max-width:46ch; margin-bottom:var(--space-6); text-shadow:0 1px 10px rgba(6,22,41,.55); }
.hero-lead .em{ color:var(--teal); font-weight:600; }
.hero-cta{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:var(--space-3); }
.hero-cta .btn-ghost{ font-size:14px; padding:12px 24px; }
.hero-side{ display:flex; flex-direction:column; gap:var(--space-6); min-width:0; }
.hero-trust{ font-size:.9375rem; color:rgba(255,255,255,.82); line-height:1.5; text-shadow:0 1px 8px rgba(6,22,41,.5); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip{
  font-size:.8125rem; font-weight:600; color:var(--white);
  border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:6px 12px;
  background:rgba(255,255,255,.03); transition:border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover{ border-color:var(--teal); color:var(--teal); }

.nav-toggle{ position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.nav-burger{ display:none; }

@media (max-width:1240px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--space-9); align-items:start; }
}
@media (max-width:980px){
  .nav{ flex-wrap:wrap; row-gap:var(--space-4); }
  .brand{ order:1; }
  .nav-burger{
    order:2; margin-left:auto;
    display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:46px; height:46px; border-radius:11px; cursor:pointer;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05);
  }
  .nav-burger span{
    display:block; width:22px; height:2px; border-radius:2px; background:var(--white);
    transition:transform .3s var(--ease), opacity .2s var(--ease);
  }
  .nav-links{
    display:none; order:4; flex-basis:100%;
    flex-direction:column; align-items:stretch; gap:0; margin-top:var(--space-2);
  }
  .nav-links a{ padding:14px 2px; font-size:1.05rem; border-top:1px solid rgba(255,255,255,.12); }
  .nav-cta{ display:none; order:5; flex-basis:100%; width:100%; margin-top:var(--space-2); }

  #nav-toggle:checked ~ .nav-links{ display:flex; }
  #nav-toggle:checked ~ .nav-cta{ display:inline-flex; }
  #nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  #nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  #nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:680px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
}
@media (max-width:560px){
  .hero h1{ font-size:clamp(2rem, 8vw, 2.6rem); }
}

/* horizontal-scroll dot indicators (mobile) */
.scroll-dots{ display:none; justify-content:center; gap:8px; margin-top:16px; padding:0; }
.scroll-dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:rgba(6,22,41,.22); cursor:pointer; transition:background .25s ease, transform .25s ease; -webkit-tap-highlight-color:transparent; }
.scroll-dot.is-active{ background:var(--teal-flare,#1FC3AD); transform:scale(1.35); }
@media (prefers-reduced-motion:reduce){ .scroll-dot{ transition:none; } }
/* ===== 02 · TICKER ===== */
.tkr{ background:var(--teal-fade); overflow:hidden; }
.tkr-track{
  display:flex; flex-wrap:nowrap; width:max-content; align-items:center;
  padding-block:22px;
  animation:tkr-marquee 46s linear infinite;
}
.tkr:hover .tkr-track{ animation-play-state:paused; }
.tkr-item{
  flex:none; white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:var(--space-2);
  margin-right:var(--space-12);
}
.tkr-name{
  font-family:"Saira", sans-serif; font-weight:800;
  font-size:1rem; letter-spacing:-.005em; color:var(--navy);
}
.tkr-detail{ font-size:1rem; font-weight:600; color:var(--navy); opacity:.7; }
@keyframes tkr-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .tkr-track{
    flex-wrap:wrap; width:auto; animation:none;
    justify-content:center; gap:var(--space-3) var(--space-6);
    padding-inline:var(--space-6);
  }
  .tkr-item{ margin-right:0; }
}

/* ===== 03 · WHAT IT IS + STATS ===== */
.why-head{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-16); align-items:start;
  margin-bottom:var(--space-16);
}
.why-head .h2{ margin-bottom:0; }
/* teal wash for the what-is section */
.why--teal{ background:var(--teal-fade); }
.stats-edms{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stat{ padding:var(--space-9) var(--space-6) 0 var(--space-6); border-right:1px solid var(--line); text-align: left; }
.stat:last-child{ border-right:0; padding-right:0; }
.stat .num{
  font-family:"Saira", sans-serif; font-weight:700;
  font-size:3.75rem; line-height:1; letter-spacing:-.02em;
  color:#15A596;
}
.stat .num .suf{ color:var(--navy); }
.stat .num .unit{
  font-size:1.125rem; color:var(--navy); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-left:.22em;
}
.stat .cap{ font-size:.875rem; line-height:1.5; color:var(--concrete); margin-top:var(--space-4); max-width:26ch; }
.stat .cap strong{ color:var(--navy); font-weight:700; }

.integrates{
  margin-top:var(--space-12);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  border-top:1px solid var(--line); padding-top:var(--space-9);
}
.integrates-label{
  font-family:"Saira",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--concrete);
  margin-right:var(--space-2);
}
.integrates-pill{
  font-size:.85rem; font-weight:600; color:var(--navy);
  background:var(--white); border:1px solid var(--teal); border-radius:999px;
  padding:7px 14px; transition:background .2s var(--ease), color .2s var(--ease);
}
.integrates-pill:hover{ background:var(--teal-tint); color:var(--teal-flare); }

@media (max-width:900px){
  .why-head{ grid-template-columns:1fr; gap:var(--space-9); margin-bottom:var(--space-12); }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ border-right:0; padding-right:0; }
  .stat:nth-child(odd){ border-right:1px solid var(--line); padding-right:var(--space-6); }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0 !important; padding-right:0 !important; border-bottom:1px solid var(--line); padding:var(--space-6) 0; }
  .stat:first-child{ padding-top:var(--space-4); }
  .stat .num{ font-size:3rem; }
  .stat .num .unit{ font-size:1.25rem; }
  .stats-edms{ display:block }
  .stat .cap{max-width: 35ch;}
}

/* ===== 03b · CHAOS → CONTROL INFOGRAPHIC ===== */
.fic-block{ margin-bottom:var(--space-16); }
.fic{
  position:relative;
  display:grid; grid-template-columns:1.06fr 78px .8fr 78px 1.16fr;
  gap:0; align-items:stretch;
  background:
    radial-gradient(58% 90% at 50% 50%, rgba(76,226,204,.09), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(150deg, #061629 0%, #0c2a49 100%);
  background-size:auto, 34px 34px, 34px 34px, auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:56px 38px 34px;
  min-height:380px;
}
.fic-hint{
  position:absolute; top:16px; right:18px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Saira",sans-serif; font-weight:700; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 12px;
}
.fic-hint .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:ficHintPulse 2.2s ease-in-out infinite; }
.fic-hint-tap{ display:none; }
@media (hover:none){ .fic-hint-hover{ display:none; } .fic-hint-tap{ display:inline; } }
@keyframes ficHintPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; box-shadow:0 0 8px rgba(76,226,204,.8); } }

.fic-zone{ position:relative; min-width:0; display:flex; flex-direction:column; }
.fic-zlab{
  display:flex; align-items:center; gap:8px;
  font-family:"Saira",sans-serif; font-weight:700; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
  margin-bottom:14px; flex:none;
}
.fic-zlab .zdot{ width:7px; height:7px; border-radius:50%; flex:none; }
.zdot-coral{ background:var(--coral); box-shadow:0 0 8px rgba(224,81,76,.7); }
.zdot-teal{ background:var(--teal); box-shadow:0 0 8px rgba(76,226,204,.7); }

/* --- hoverable spots + tooltips --- */
.fic-spot{ cursor:default; }
.fic-spot:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.fic-tip{
  position:absolute; bottom:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(6px);
  width:236px; z-index:30; pointer-events:none;
  background:var(--white); color:var(--concrete);
  border-radius:12px; padding:11px 14px;
  font-size:12.5px; line-height:1.5; font-weight:500; text-align:left;
  box-shadow:0 4px 12px rgba(6,22,41,.3), 0 24px 50px -12px rgba(6,22,41,.55);
  opacity:0; transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.fic-tip b{ display:block; color:var(--navy); font-weight:700; margin-bottom:2px; }
.fic-tip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--white);
}
.fic-tip--left{ left:0; transform:translateX(0) translateY(6px); }
.fic-tip--left::after{ left:26px; }
.fic-tip--right{ left:auto; right:0; transform:translateX(0) translateY(6px); }
.fic-tip--right::after{ left:auto; right:26px; transform:none; }
.fic-spot:hover .fic-tip, .fic-spot:focus .fic-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.fic-spot:hover .fic-tip--left, .fic-spot:focus .fic-tip--left,
.fic-spot:hover .fic-tip--right, .fic-spot:focus .fic-tip--right{ transform:translateX(0) translateY(0); }

/* --- zone 1 · chaos --- */
.fic-cloud{ position:relative; flex:1; min-height:250px; }
.fic-card{
  position:absolute; max-width:210px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:11px; padding:10px 13px;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.fic-card:hover, .fic-card:focus-visible{ border-color:rgba(224,81,76,.55); background:rgba(255,255,255,.08); }
.fic-fname{
  display:flex; align-items:center; gap:7px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:11px; color:rgba(255,255,255,.85); white-space:nowrap;
}
.fic-fname svg{ width:13px; height:13px; flex:none; color:rgba(255,255,255,.45); }
.fic-ftag{
  display:inline-flex; margin-top:7px; padding:2.5px 8px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.04em;
  background:rgba(224,81,76,.18); color:#FF9B93;
}
.fic-ftag--grey{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); }
.fic-card--dead .fic-fname{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,.35); color:rgba(255,255,255,.55); }
.fic-doc1{ top:2%;  left:0;   transform:rotate(-4deg); animation:ficDrift1 6.5s ease-in-out infinite alternate; }
.fic-doc2{ top:26%; right:0;  transform:rotate(3deg);  animation:ficDrift2 7.5s ease-in-out infinite alternate; }
.fic-doc3{ top:52%; left:4%;  transform:rotate(-2deg); animation:ficDrift3 5.8s ease-in-out infinite alternate; }
.fic-doc4{ top:70%; left:22%; transform:rotate(4deg);  animation:ficDrift4 7s   ease-in-out infinite alternate; }
@keyframes ficDrift1{ to{ transform:rotate(-2deg) translate(5px,7px); } }
@keyframes ficDrift2{ to{ transform:rotate(5deg)  translate(-7px,5px); } }
@keyframes ficDrift3{ to{ transform:rotate(-4.5deg) translate(6px,-6px); } }
@keyframes ficDrift4{ to{ transform:rotate(1.5deg)  translate(-5px,-7px); } }

/* --- flow gutters --- */
.fic-flow{ width:100%; height:100%; min-height:250px; overflow:visible; }
.fic-flow path{ fill:none; }
.fp{ stroke-width:1.5; stroke-dasharray:5 8; }
.fp-w1{ stroke:rgba(255,255,255,.22); animation:ficDash 3.2s linear infinite; }
.fp-w2{ stroke:rgba(255,255,255,.13); animation:ficDash 4.1s linear infinite; }
.fp-c{  stroke:rgba(224,81,76,.5);   animation:ficDash 2.5s linear infinite; }
.fo{ stroke:rgba(76,226,204,.75); stroke-width:1.6; stroke-dasharray:2 8; stroke-linecap:round; animation:ficDashO 2.2s linear infinite; }
.fo-glow{ stroke:rgba(76,226,204,.12); stroke-width:6; stroke-linecap:round; animation:none; }
@keyframes ficDash{ from{ stroke-dashoffset:26; } to{ stroke-dashoffset:0; } }
@keyframes ficDashO{ from{ stroke-dashoffset:20; } to{ stroke-dashoffset:0; } }

/* --- zone 2 · engine --- */
.fic-core-zone{ align-items:center; justify-content:center; gap:18px; }
.fic-core{
  position:relative; width:98px; height:98px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:radial-gradient(circle at 32% 30%, #14405e, #061629 72%);
  border:1.5px solid rgba(76,226,204,.65);
  box-shadow:0 0 34px rgba(76,226,204,.28), inset 0 0 22px rgba(76,226,204,.12);
}
.fic-core .mk{ font-family:"Saira",sans-serif; font-weight:800; font-size:30px; line-height:1; color:var(--teal); }
.fic-core .mklab{ font-family:"Saira",sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.2em; color:rgba(255,255,255,.65); }
.fic-core::before, .fic-core::after{
  content:""; position:absolute; inset:-1.5px; border-radius:50%;
  border:1.5px solid rgba(76,226,204,.5); pointer-events:none;
  animation:ficRing 3.4s var(--ease) infinite;
}
.fic-core::after{ animation-delay:1.7s; }
@keyframes ficRing{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(1.65); opacity:0; } }
.fic-corelab{
  font-family:"Saira",sans-serif; font-weight:700; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--teal);
  text-align:center; margin-top:-6px;
}
.fic-chips{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:196px; }
.fic-chip{
  position:relative; display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:7.5px 11px;
  transition:border-color .25s var(--ease);
}
.fic-chip .cdot{ width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; }
.fic-chip:hover, .fic-chip:focus-visible{ border-color:rgba(76,226,204,.6); }
.fic-chip:nth-child(1){ animation:ficChipGlow 6.9s ease-in-out infinite; }
.fic-chip:nth-child(2){ animation:ficChipGlow 6.9s ease-in-out 2.3s infinite; }
.fic-chip:nth-child(3){ animation:ficChipGlow 6.9s ease-in-out 4.6s infinite; }
@keyframes ficChipGlow{
  0%,26%,100%{ box-shadow:none; }
  10%{ box-shadow:0 0 0 1px rgba(76,226,204,.5), 0 0 16px rgba(76,226,204,.25); }
}

/* --- zone 3 · order --- */
.fic-order{ justify-content:center; gap:16px; }
.fic-master{
  position:relative; background:var(--white); border-radius:13px; padding:14px 17px;
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 44px rgba(76,226,204,.18);
  max-width:280px;
}
.fic-mrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fic-mname{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:13px; font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:7px;
}
.fic-mname svg{ width:15px; height:15px; color:var(--teal-flare); flex:none; }
.fic-mpill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:800; letter-spacing:.07em;
  color:#0E8578; background:rgba(31,195,173,.14);
  border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.fic-mpill::before{ content:""; width:5px; height:5px; border-radius:50%; background:#15A596; }
.fic-msub{ font-size:11px; color:var(--concrete); margin-top:5px; }
.fic-rcv{ position:relative; display:flex; gap:8px; flex-wrap:wrap; max-width:300px; }
.fic-rchip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:rgba(255,255,255,.88);
  background:rgba(76,226,204,.09); border:1px solid rgba(76,226,204,.35);
  border-radius:999px; padding:6px 12px;
}
.fic-rchip svg{ width:11px; height:11px; color:var(--teal); flex:none; }
.fic-prog{ max-width:280px; }
.fic-prow{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:rgba(255,255,255,.6); margin-bottom:6px; }
.fic-prow .pv{ font-family:"Saira",sans-serif; font-weight:700; font-size:13px; color:var(--teal); }
.fic-bar{ height:6px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; }
.fic-bar-fill{
  height:100%; width:6%; border-radius:4px;
  background:linear-gradient(90deg, #1FC3AD, #4CE2CC);
  transition:width 1.3s var(--ease) .5s;
}
.fic-block.in .fic-bar-fill{ width:76%; }

/* --- mobile vertical connectors --- */
.fic-vconn{ display:none; }

.fic-cap{ margin:16px 6px 0; font-size:.9375rem; line-height:1.55; color:var(--concrete); text-wrap:pretty; }
.fic-cap strong{ color:var(--navy); font-weight:700; }

@media (max-width:1080px){
  .fic{ grid-template-columns:1.06fr 52px .84fr 52px 1.16fr; padding:56px 26px 30px; }
}
@media (max-width:880px){
  .fic{ grid-template-columns:1fr; padding:60px 22px 28px; min-height:0; gap:0; }
  .fic-flow{ display:none; }
  .fic-vconn{
    display:flex; align-items:center; justify-content:center;
    height:48px; position:relative;
  }
  .fic-vconn::before{
    content:""; width:2px; height:100%;
    background:repeating-linear-gradient(180deg, rgba(76,226,204,.55) 0 5px, transparent 5px 11px);
    animation:ficVDrop 1.1s linear infinite;
  }
  .fic-vconn--in::before{ background:repeating-linear-gradient(180deg, rgba(255,255,255,.3) 0 5px, transparent 5px 11px); }
  @keyframes ficVDrop{ from{ background-position-y:0; } to{ background-position-y:11px; } }
  .fic-cloud{ min-height:300px; }
  .fic-core-zone{ gap:14px; }
  .fic-order{ align-items:flex-start; }
  .fic-tip{ width:min(228px, 74vw); }
}
@media (max-width:560px){
  .fic{ padding:58px 16px 24px; }
  .fic-card{ max-width:180px; }
  .fic-fname{ font-size:10px; }
  .fic-doc4{ left:8%; }
}
@media (prefers-reduced-motion:reduce){
  .fic-card, .fic-chip, .fic-core::before, .fic-core::after,
  .fic-flow path, .fic-hint .dot, .fic-vconn::before{ animation:none !important; }
  .fic-mote{ display:none; }
  .fic-bar-fill{ transition:none; width:76%; }
}

/* ===== 04 · KEY CAPABILITIES (Pixeto-style hover-reveal) ===== */
/* teal fade to match .cap-sec on the sibling product pages */
.cts-sec{ background:var(--teal-fade); color:var(--concrete); line-height:1.6; }
.cts-head{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12);
  align-items:end; margin-bottom:var(--space-16);
}
.cts-h2{ margin-bottom:0; }
.cts-intro{ text-wrap:pretty; }
.cts-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:54px; align-items:start; }

.cts-stage{ position:sticky; top:90px; height:452px; }
.cts-card{
  position:absolute; inset:0; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(6,22,41,.04), 0 22px 50px rgba(6,22,41,.10);
  overflow:hidden; display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px) scale(.985); pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.cts-img{
  position:relative; height:168px; flex:0 0 auto; overflow:hidden;
  background-color:var(--navy);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.cts-img::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }
.cts-card[data-i="0"] .cts-img{ background-image:url("../img/products/edms-card-engineering.jpg"); }
.cts-card[data-i="1"] .cts-img{ background-image:url("../img/products/magnific_clean-abstract-visualizat_KjhcJC6kqp.png"); }
.cts-card[data-i="2"] .cts-img{ background-image:url("../img/products/edms-card-bid-review.jpg"); }
.cts-card[data-i="3"] .cts-img{ background-image:url("../img/products/magnific_minimalist-abstract-scene_Pixvflw42C.png"); }
.cts-card[data-i="4"] .cts-img{ background-image:url("../img/products/magnific_abstract-isometric-scene-_hEVN58CvqL.png"); }
.cts-card[data-i="5"] .cts-img{ background-image:url("../img/products/edms-card-control-tower.jpg"); }
.cts-ic{
  position:absolute; top:18px; left:24px;
  width:46px; height:46px; border-radius:13px;
  background:rgba(6,22,41,.10); border:1px solid rgba(6,22,41,.22);
  display:flex; align-items:center; justify-content:center;
  font-family:"Saira", sans-serif; font-weight:700; font-size:16px; color:var(--navy);
}
.cts-big{
  position:absolute; top:-6px; right:18px;
  font-family:"Saira", sans-serif; font-weight:700; font-size:110px;
  line-height:1; color:rgba(6,22,41,.16); letter-spacing:-.04em;
}
.cts-body{ padding:22px 26px 26px; display:flex; flex-direction:column; gap:0; }
.cts-card-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cts-name{
  font-family:"Inter Tight", sans-serif; font-weight:600; font-size:24px;
  line-height:1.18; color:var(--black); margin:0;
}
.cts-badge{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--teal-flare); background:var(--teal-tint);
  border-radius:999px; padding:4px 11px; white-space:nowrap;
}
.cts-sub{ font-size:15px; color:var(--concrete); margin-top:6px; }
.cts-bullets{
  display:flex; flex-direction:column; gap:10px;
  font-size:14px; line-height:1.55; color:var(--concrete); margin-top:18px;
}
.cts-bullet{ display:flex; gap:10px; }
.cts-dash{ color:var(--teal-flare); font-weight:700; flex:0 0 auto; }
.cts-card .cts-ic,
.cts-card .cts-big,
.cts-card .cts-name,
.cts-card .cts-badge,
.cts-card .cts-sub,
.cts-card .cts-bullets{
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
}

.cts-list{ display:flex; flex-direction:column; }
.cts-item{
  appearance:none; -webkit-appearance:none; text-align:left;
  font-family:inherit; cursor:pointer; width:100%;
  display:flex; align-items:center; gap:18px;
  padding:22px 8px 22px 4px; background:transparent; border:0;
  border-top:1px solid var(--line); transition:padding .35s ease;
}
.cts-item:last-child{ border-bottom:1px solid var(--line); }
.cts-num{
  font-family:ui-monospace, monospace; font-size:13px; font-weight:700;
  color:var(--concrete); width:26px; flex:0 0 auto; transition:color .3s ease;
}
.cts-tt{
  font-family:"Inter Tight", sans-serif; font-weight:600; font-size:22px;
  line-height:1.2; color:var(--black); flex:1;
  transition:color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.cts-arrow{
  flex:0 0 auto; width:24px; height:24px; color:var(--concrete);
  opacity:0; transform:translateX(-8px);
  transition:opacity .3s ease, transform .35s ease;
}
.cts-arrow svg{ width:24px; height:24px; display:block; }
.cts-item:focus-visible{ outline:2px solid var(--teal-flare); outline-offset:3px; border-radius:8px; }

/* --- default active card (first capability) --- */
.cts-card[data-i="0"]{opacity:1; transform:none; pointer-events:auto}
.cts-card[data-i="0"] .cts-ic{opacity:1; transform:none; transition-delay:.06s}
.cts-card[data-i="0"] .cts-big{opacity:1; transform:none; transition-delay:.02s}
.cts-card[data-i="0"] .cts-name{opacity:1; transform:none; transition-delay:.14s}
.cts-card[data-i="0"] .cts-badge{opacity:1; transform:none; transition-delay:.16s}
.cts-card[data-i="0"] .cts-sub{opacity:1; transform:none; transition-delay:.18s}
.cts-card[data-i="0"] .cts-bullets{opacity:1; transform:none; transition-delay:.2s}

/* --- any item hovered/focused -> deactivate every card first --- */
.cts-grid:has(.cts-item:hover) .cts-card,
.cts-grid:has(.cts-item:focus-visible) .cts-card{ opacity:0; transform:translateY(14px) scale(.985); pointer-events:none; }
.cts-grid:has(.cts-item:hover) .cts-card .cts-ic,
.cts-grid:has(.cts-item:focus-visible) .cts-card .cts-ic,
.cts-grid:has(.cts-item:hover) .cts-card .cts-big,
.cts-grid:has(.cts-item:focus-visible) .cts-card .cts-big,
.cts-grid:has(.cts-item:hover) .cts-card .cts-name,
.cts-grid:has(.cts-item:focus-visible) .cts-card .cts-name,
.cts-grid:has(.cts-item:hover) .cts-card .cts-badge,
.cts-grid:has(.cts-item:focus-visible) .cts-card .cts-badge,
.cts-grid:has(.cts-item:hover) .cts-card .cts-sub,
.cts-grid:has(.cts-item:focus-visible) .cts-card .cts-sub,
.cts-grid:has(.cts-item:hover) .cts-card .cts-bullets,
.cts-grid:has(.cts-item:focus-visible) .cts-card .cts-bullets{ opacity:0; transform:translateY(8px); }

/* --- N = 0 --- */
.cts-grid:has(.cts-item[data-i="0"]:hover) .cts-card[data-i="0"],
.cts-grid:has(.cts-item[data-i="0"]:focus-visible) .cts-card[data-i="0"]{ opacity:1; transform:none; pointer-events:auto; }
.cts-grid:has(.cts-item[data-i="0"]:hover) .cts-card[data-i="0"] .cts-ic,
.cts-grid:has(.cts-item[data-i="0"]:focus-visible) .cts-card[data-i="0"] .cts-ic{opacity:1; transform:none; transition-delay:.06s}
.cts-grid:has(.cts-item[data-i="0"]:hover) .cts-card[data-i="0"] .cts-big,
.cts-grid:has(.cts-item[data-i="0"]:focus-visible) .cts-card[data-i="0"] .cts-big{opacity:1; transform:none; transition-delay:.02s}
.cts-grid:has(.cts-item[data-i="0"]:hover) .cts-card[data-i="0"] .cts-name,
.cts-grid:has(.cts-item[data-i="0"]:focus-visible) .cts-card[data-i="0"] .cts-name{opacity:1; transform:none; transition-delay:.14s}
.cts-grid:has(.cts-item[data-i="0"]:hover) .cts-card[data-i="0"] .cts-badge,
.cts-grid:has(.cts-item[data-i="0"]:focus-visible) .cts-card[data-i="0"] .cts-badge{opacity:1; transform:none; transition-delay:.16s}
.cts-grid:has(.cts-item[data-i="0"]:hover) .cts-card[data-i="0"] .cts-sub,
.cts-grid:has(.cts-item[data-i="0"]:focus-visible) .cts-card[data-i="0"] .cts-sub{opacity:1; transform:none; transition-delay:.18s}
.cts-grid:has(.cts-item[data-i="0"]:hover) .cts-card[data-i="0"] .cts-bullets,
.cts-grid:has(.cts-item[data-i="0"]:focus-visible) .cts-card[data-i="0"] .cts-bullets{opacity:1; transform:none; transition-delay:.2s}

/* --- N = 1 --- */
.cts-grid:has(.cts-item[data-i="1"]:hover) .cts-card[data-i="1"],
.cts-grid:has(.cts-item[data-i="1"]:focus-visible) .cts-card[data-i="1"]{ opacity:1; transform:none; pointer-events:auto; }
.cts-grid:has(.cts-item[data-i="1"]:hover) .cts-card[data-i="1"] .cts-ic,
.cts-grid:has(.cts-item[data-i="1"]:focus-visible) .cts-card[data-i="1"] .cts-ic{opacity:1; transform:none; transition-delay:.06s}
.cts-grid:has(.cts-item[data-i="1"]:hover) .cts-card[data-i="1"] .cts-big,
.cts-grid:has(.cts-item[data-i="1"]:focus-visible) .cts-card[data-i="1"] .cts-big{opacity:1; transform:none; transition-delay:.02s}
.cts-grid:has(.cts-item[data-i="1"]:hover) .cts-card[data-i="1"] .cts-name,
.cts-grid:has(.cts-item[data-i="1"]:focus-visible) .cts-card[data-i="1"] .cts-name{opacity:1; transform:none; transition-delay:.14s}
.cts-grid:has(.cts-item[data-i="1"]:hover) .cts-card[data-i="1"] .cts-badge,
.cts-grid:has(.cts-item[data-i="1"]:focus-visible) .cts-card[data-i="1"] .cts-badge{opacity:1; transform:none; transition-delay:.16s}
.cts-grid:has(.cts-item[data-i="1"]:hover) .cts-card[data-i="1"] .cts-sub,
.cts-grid:has(.cts-item[data-i="1"]:focus-visible) .cts-card[data-i="1"] .cts-sub{opacity:1; transform:none; transition-delay:.18s}
.cts-grid:has(.cts-item[data-i="1"]:hover) .cts-card[data-i="1"] .cts-bullets,
.cts-grid:has(.cts-item[data-i="1"]:focus-visible) .cts-card[data-i="1"] .cts-bullets{opacity:1; transform:none; transition-delay:.2s}

/* --- N = 2 --- */
.cts-grid:has(.cts-item[data-i="2"]:hover) .cts-card[data-i="2"],
.cts-grid:has(.cts-item[data-i="2"]:focus-visible) .cts-card[data-i="2"]{ opacity:1; transform:none; pointer-events:auto; }
.cts-grid:has(.cts-item[data-i="2"]:hover) .cts-card[data-i="2"] .cts-ic,
.cts-grid:has(.cts-item[data-i="2"]:focus-visible) .cts-card[data-i="2"] .cts-ic{opacity:1; transform:none; transition-delay:.06s}
.cts-grid:has(.cts-item[data-i="2"]:hover) .cts-card[data-i="2"] .cts-big,
.cts-grid:has(.cts-item[data-i="2"]:focus-visible) .cts-card[data-i="2"] .cts-big{opacity:1; transform:none; transition-delay:.02s}
.cts-grid:has(.cts-item[data-i="2"]:hover) .cts-card[data-i="2"] .cts-name,
.cts-grid:has(.cts-item[data-i="2"]:focus-visible) .cts-card[data-i="2"] .cts-name{opacity:1; transform:none; transition-delay:.14s}
.cts-grid:has(.cts-item[data-i="2"]:hover) .cts-card[data-i="2"] .cts-badge,
.cts-grid:has(.cts-item[data-i="2"]:focus-visible) .cts-card[data-i="2"] .cts-badge{opacity:1; transform:none; transition-delay:.16s}
.cts-grid:has(.cts-item[data-i="2"]:hover) .cts-card[data-i="2"] .cts-sub,
.cts-grid:has(.cts-item[data-i="2"]:focus-visible) .cts-card[data-i="2"] .cts-sub{opacity:1; transform:none; transition-delay:.18s}
.cts-grid:has(.cts-item[data-i="2"]:hover) .cts-card[data-i="2"] .cts-bullets,
.cts-grid:has(.cts-item[data-i="2"]:focus-visible) .cts-card[data-i="2"] .cts-bullets{opacity:1; transform:none; transition-delay:.2s}

/* --- N = 3 --- */
.cts-grid:has(.cts-item[data-i="3"]:hover) .cts-card[data-i="3"],
.cts-grid:has(.cts-item[data-i="3"]:focus-visible) .cts-card[data-i="3"]{ opacity:1; transform:none; pointer-events:auto; }
.cts-grid:has(.cts-item[data-i="3"]:hover) .cts-card[data-i="3"] .cts-ic,
.cts-grid:has(.cts-item[data-i="3"]:focus-visible) .cts-card[data-i="3"] .cts-ic{opacity:1; transform:none; transition-delay:.06s}
.cts-grid:has(.cts-item[data-i="3"]:hover) .cts-card[data-i="3"] .cts-big,
.cts-grid:has(.cts-item[data-i="3"]:focus-visible) .cts-card[data-i="3"] .cts-big{opacity:1; transform:none; transition-delay:.02s}
.cts-grid:has(.cts-item[data-i="3"]:hover) .cts-card[data-i="3"] .cts-name,
.cts-grid:has(.cts-item[data-i="3"]:focus-visible) .cts-card[data-i="3"] .cts-name{opacity:1; transform:none; transition-delay:.14s}
.cts-grid:has(.cts-item[data-i="3"]:hover) .cts-card[data-i="3"] .cts-badge,
.cts-grid:has(.cts-item[data-i="3"]:focus-visible) .cts-card[data-i="3"] .cts-badge{opacity:1; transform:none; transition-delay:.16s}
.cts-grid:has(.cts-item[data-i="3"]:hover) .cts-card[data-i="3"] .cts-sub,
.cts-grid:has(.cts-item[data-i="3"]:focus-visible) .cts-card[data-i="3"] .cts-sub{opacity:1; transform:none; transition-delay:.18s}
.cts-grid:has(.cts-item[data-i="3"]:hover) .cts-card[data-i="3"] .cts-bullets,
.cts-grid:has(.cts-item[data-i="3"]:focus-visible) .cts-card[data-i="3"] .cts-bullets{opacity:1; transform:none; transition-delay:.2s}

/* --- N = 4 --- */
.cts-grid:has(.cts-item[data-i="4"]:hover) .cts-card[data-i="4"],
.cts-grid:has(.cts-item[data-i="4"]:focus-visible) .cts-card[data-i="4"]{ opacity:1; transform:none; pointer-events:auto; }
.cts-grid:has(.cts-item[data-i="4"]:hover) .cts-card[data-i="4"] .cts-ic,
.cts-grid:has(.cts-item[data-i="4"]:focus-visible) .cts-card[data-i="4"] .cts-ic{opacity:1; transform:none; transition-delay:.06s}
.cts-grid:has(.cts-item[data-i="4"]:hover) .cts-card[data-i="4"] .cts-big,
.cts-grid:has(.cts-item[data-i="4"]:focus-visible) .cts-card[data-i="4"] .cts-big{opacity:1; transform:none; transition-delay:.02s}
.cts-grid:has(.cts-item[data-i="4"]:hover) .cts-card[data-i="4"] .cts-name,
.cts-grid:has(.cts-item[data-i="4"]:focus-visible) .cts-card[data-i="4"] .cts-name{opacity:1; transform:none; transition-delay:.14s}
.cts-grid:has(.cts-item[data-i="4"]:hover) .cts-card[data-i="4"] .cts-badge,
.cts-grid:has(.cts-item[data-i="4"]:focus-visible) .cts-card[data-i="4"] .cts-badge{opacity:1; transform:none; transition-delay:.16s}
.cts-grid:has(.cts-item[data-i="4"]:hover) .cts-card[data-i="4"] .cts-sub,
.cts-grid:has(.cts-item[data-i="4"]:focus-visible) .cts-card[data-i="4"] .cts-sub{opacity:1; transform:none; transition-delay:.18s}
.cts-grid:has(.cts-item[data-i="4"]:hover) .cts-card[data-i="4"] .cts-bullets,
.cts-grid:has(.cts-item[data-i="4"]:focus-visible) .cts-card[data-i="4"] .cts-bullets{opacity:1; transform:none; transition-delay:.2s}

/* --- N = 5 --- */
.cts-grid:has(.cts-item[data-i="5"]:hover) .cts-card[data-i="5"],
.cts-grid:has(.cts-item[data-i="5"]:focus-visible) .cts-card[data-i="5"]{ opacity:1; transform:none; pointer-events:auto; }
.cts-grid:has(.cts-item[data-i="5"]:hover) .cts-card[data-i="5"] .cts-ic,
.cts-grid:has(.cts-item[data-i="5"]:focus-visible) .cts-card[data-i="5"] .cts-ic{opacity:1; transform:none; transition-delay:.06s}
.cts-grid:has(.cts-item[data-i="5"]:hover) .cts-card[data-i="5"] .cts-big,
.cts-grid:has(.cts-item[data-i="5"]:focus-visible) .cts-card[data-i="5"] .cts-big{opacity:1; transform:none; transition-delay:.02s}
.cts-grid:has(.cts-item[data-i="5"]:hover) .cts-card[data-i="5"] .cts-name,
.cts-grid:has(.cts-item[data-i="5"]:focus-visible) .cts-card[data-i="5"] .cts-name{opacity:1; transform:none; transition-delay:.14s}
.cts-grid:has(.cts-item[data-i="5"]:hover) .cts-card[data-i="5"] .cts-badge,
.cts-grid:has(.cts-item[data-i="5"]:focus-visible) .cts-card[data-i="5"] .cts-badge{opacity:1; transform:none; transition-delay:.16s}
.cts-grid:has(.cts-item[data-i="5"]:hover) .cts-card[data-i="5"] .cts-sub,
.cts-grid:has(.cts-item[data-i="5"]:focus-visible) .cts-card[data-i="5"] .cts-sub{opacity:1; transform:none; transition-delay:.18s}
.cts-grid:has(.cts-item[data-i="5"]:hover) .cts-card[data-i="5"] .cts-bullets,
.cts-grid:has(.cts-item[data-i="5"]:focus-visible) .cts-card[data-i="5"] .cts-bullets{opacity:1; transform:none; transition-delay:.2s}

/* list item active/hover styling */
.cts-item[data-i="0"]{ padding-left:16px; }
.cts-item[data-i="0"] .cts-num{ color:var(--teal); }
.cts-item[data-i="0"] .cts-tt{ color:var(--teal-flare); transform:translateX(2px); }
.cts-item[data-i="0"] .cts-arrow{ opacity:1; transform:none; color:var(--teal-flare); }
.cts-list:has(.cts-item:hover) .cts-item[data-i="0"]:not(:hover),
.cts-list:has(.cts-item:focus-visible) .cts-item[data-i="0"]:not(:focus-visible){ padding-left:4px; }
.cts-list:has(.cts-item:hover) .cts-item[data-i="0"]:not(:hover) .cts-num,
.cts-list:has(.cts-item:focus-visible) .cts-item[data-i="0"]:not(:focus-visible) .cts-num{ color:var(--concrete); }
.cts-list:has(.cts-item:hover) .cts-item[data-i="0"]:not(:hover) .cts-tt,
.cts-list:has(.cts-item:focus-visible) .cts-item[data-i="0"]:not(:focus-visible) .cts-tt{ color:var(--concrete); transform:none; }
.cts-list:has(.cts-item:hover) .cts-item[data-i="0"]:not(:hover) .cts-arrow,
.cts-list:has(.cts-item:focus-visible) .cts-item[data-i="0"]:not(:focus-visible) .cts-arrow{ opacity:0; transform:translateX(-8px); color:var(--concrete); }
.cts-item:hover,
.cts-item:focus-within{ padding-left:16px; }
.cts-item:hover .cts-num,
.cts-item:focus-within .cts-num{ color:var(--teal); }
.cts-item:hover .cts-tt,
.cts-item:focus-within .cts-tt{ color:var(--teal-flare); transform:translateX(2px); }
.cts-item:hover .cts-arrow,
.cts-item:focus-within .cts-arrow{ opacity:1; transform:none; color:var(--teal-flare); }
.cts-list:has(.cts-item:hover) .cts-item:not(:hover) .cts-tt{ color:var(--concrete); }
.cts-list:has(.cts-item:focus-visible) .cts-item:not(:focus-visible) .cts-tt{ color:var(--concrete); }

@media (max-width:880px){
  .cts-head{ grid-template-columns:1fr; gap:16px; margin-bottom:28px; }
  .cts-grid{ grid-template-columns:1fr; gap:18px; }
  .cts-list{ display:none; }
  .cts-stage{
    position:static; height:auto; min-width:0;
    display:flex; flex-direction:row; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:6px;
  }
  .cts-stage::-webkit-scrollbar{ display:none; }
  .cts-card{ position:static; opacity:1; transform:none; pointer-events:auto; flex:0 0 100%; scroll-snap-align:start; }
  .cts-card .cts-ic,
  .cts-card .cts-big,
  .cts-card .cts-name,
  .cts-card .cts-badge,
  .cts-card .cts-sub,
  .cts-card .cts-bullets{ opacity:1; transform:none; }
}
@media (max-width:560px){
  .cts-img{ height:150px; }
  .cts-name{ font-size:21px; }
}
@media (prefers-reduced-motion:reduce){
  .cts-card, .cts-card *,
  .cts-item, .cts-num, .cts-tt, .cts-arrow{ transition:none !important; }
  .cts-card{ transform:none; }
}

/* ===== 05 · COMPARISON TABLE ===== */
.cmp-head{ margin-bottom:var(--space-12); }
.cmp-head-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:end; }
.cmp-head-grid .h2{ margin-bottom:0; }
.cmp-wrap{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 2px rgba(6,22,41,.04), 0 22px 50px -30px rgba(6,22,41,.28);
  background:var(--white);
}
.cmp{ width:100%; border-collapse:collapse; }
.cmp thead th{
  background:var(--navy); color:var(--white);
  font-family:"Saira", sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.02em; text-align:center; padding:18px 20px;
}
.cmp thead th:first-child{ text-align:left; }
.cmp thead th.cmp-col-edms{ color:var(--teal); }
.cmp tbody td{
  padding:16px 20px; border-top:1px solid var(--line);
  text-align:center; font-size:1rem; color:var(--concrete);
}
.cmp tbody td:first-child{
  text-align:left; font-family:"Inter Tight",sans-serif; font-weight:700; color:var(--navy);
}
.cmp tbody tr:nth-child(even){ background:rgba(6,22,41,.015); }
.cmp .cmp-col-edms{ background:var(--teal-tint); font-weight:700; color:var(--navy); }
.cmp tbody tr:nth-child(even) .cmp-col-edms{ background:rgba(76,226,204,.22); }
.cmp-muted{ color:var(--concrete); opacity:.75; }
.cmp-mark{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; }
.cmp-mark svg{ width:22px; height:22px; }
.cmp-yes{ color:var(--teal-flare); }
.cmp-no{ color:var(--coral); }
.cmp-note{ margin-top:var(--space-9); font-size:1.0625rem; color:var(--concrete); text-wrap:pretty; }
.cmp-note strong{ color:var(--navy); font-weight:700; }
@media (max-width:900px){
  .cmp-head-grid{ grid-template-columns:1fr; gap:var(--space-4); }
}
/* narrow screens: each row becomes a stacked mini-card with its own labels (same format as EPC / PMIS) */
@media (max-width:860px){
  .cmp thead{ display:none; }
  .cmp, .cmp tbody{ display:block; }
  .cmp tbody tr{
    display:flex; flex-direction:column; align-items:stretch;
    padding:18px; border-top:1px solid var(--line);
  }
  .cmp tbody tr:first-child{ border-top:0; }
  .cmp tbody tr:nth-child(even){ background:transparent; }
  .cmp tbody td{ display:block; border-top:0; text-align:left; padding:0; }
  .cmp tbody td:first-child{ order:0; font-size:1rem; padding-bottom:2px; }
  .cmp tbody td.cmp-col-edms{ order:1; }
  .cmp tbody td:not(:first-child):not(.cmp-col-edms){ order:2; }
  .cmp tbody td:not(:first-child){ margin-top:8px; padding:10px 14px; border-radius:10px; }
  .cmp tbody tr:nth-child(even) .cmp-col-edms{ background:var(--teal-tint); }
  .cmp tbody td:not(:first-child)::before{
    content:attr(data-th);
    display:block; font-family:"Saira",sans-serif; font-weight:700; font-size:.6rem;
    letter-spacing:.14em; text-transform:uppercase; margin-bottom:3px;
  }
  .cmp tbody td.cmp-col-edms::before{ color:var(--teal-flare); }
  .cmp tbody td:not(:first-child):not(.cmp-col-edms)::before{ color:#9AA6A3; }
}

/* ===== 07 · BENEFITS (image cards — graphic on top, data below) ===== */
/* :not(.section--stone) — on the sibling product pages #benefits carries both classes and
   this rule painted flat white over the teal fade. Scoped here too so the 5 pages match. */
.ben-sec:not(.section--stone){ background:var(--white); }
.ben-head{ margin-bottom:var(--space-12); }
.ben-head__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; }
.ben-title{ margin:0; }
.ben-intro{ margin:0; text-wrap:pretty; }
.ben-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ben-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:1px solid rgba(6,22,41,.06); border-radius:20px;
  box-shadow:0 2px 4px rgba(6,22,41,.03), 0 22px 46px -30px rgba(6,22,41,.22);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* the photo fills the top band edge-to-edge */
.ben-media{ aspect-ratio:3/2; overflow:hidden; flex:none; }
.ben-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s var(--ease);
}
.ben-body{ padding:22px 26px 28px; }
.ben-card__title{
  font-family:"Inter Tight", sans-serif; font-weight:700; font-size:1.2rem;
  line-height:1.25; color:var(--black); margin:0 0 10px;
}
.ben-card__desc{ font-size:.9375rem; line-height:1.6; color:var(--concrete); margin:0; }
.ben-card:hover{
  transform:translateY(-4px);
  border-color:rgba(76,226,204,.55);
  box-shadow:0 6px 14px rgba(6,22,41,.05), 0 32px 60px -32px rgba(6,22,41,.3);
}
.ben-card:hover .ben-media img{ transform:scale(1.03); }
@media (max-width:1080px){ .ben-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .ben-head__grid{ grid-template-columns:1fr; gap:22px; align-items:start; }
}
@media (max-width:640px){
  .ben-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ben-grid::-webkit-scrollbar{ display:none; }
  .ben-grid>*{ flex:0 0 100%; min-width:0; scroll-snap-align:start; }
}
@media (prefers-reduced-motion:reduce){
  .ben-card, .ben-media img{ transition:none; }
  .ben-card:hover{ transform:none; }
  .ben-card:hover .ben-media img{ transform:none; }
}

/* ===== 08 · CTA band A ===== */
.ctaa-band{ padding-block:30px; }
.ctaa-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ctaa-headline{ font-family:"Inter Tight", sans-serif; font-weight:600; font-size:22px; line-height:1.3; color:var(--white); margin:0; text-wrap:balance; }
.ctaa-btn{ flex:none; }
@media (max-width:900px){
  .ctaa-inner{ flex-direction:column; align-items:flex-start; gap:var(--space-4); }
  .ctaa-btn{ align-self:stretch; }
}
@media (max-width:560px){ .ctaa-headline{ font-size:1.25rem; } }

/* ===== 09 · FAQ (accordion) ===== */
/* two-column layout: sticky rail (heading + team card) on the left, accordion right */
.faq-grid{ display:grid; grid-template-columns:.72fr 1.28fr; gap:var(--space-16); align-items:start; }
.faq-rail{ position:sticky; top:90px; }
.faq-head{ margin-bottom:0; text-align:left; }
.faq-rail-note{ margin-top:var(--space-4); font-size:1rem; }
.faq-card{
  margin-top:var(--space-9);
  background:linear-gradient(160deg, rgba(76,226,204,.14) 0%, #ffffff 60%);
  border:1px solid var(--line); border-radius:20px; padding:26px;
  box-shadow:0 2px 4px rgba(6,22,41,.03), 0 22px 46px -30px rgba(6,22,41,.18);
}
.faq-avatars{ display:flex; align-items:center; margin-bottom:16px; }
.faq-av{
  width:38px; height:38px; border-radius:50%; border:2px solid #fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Saira",sans-serif; font-weight:700; font-size:.78rem;
  margin-left:-10px; flex:none;
}
.faq-av:first-child{ margin-left:0; }
.faq-av--navy{ background:var(--navy); color:var(--white); }
.faq-av--teal{ background:var(--teal); color:var(--navy); }
.faq-av--flare{ background:var(--teal-flare); color:var(--white); }
.faq-av-plus{ margin:0 8px; font-weight:700; color:var(--concrete); }
.faq-av--you{ background:var(--teal); color:var(--navy); margin-left:0; }
.faq-card-title{ font-family:"Inter Tight",sans-serif; font-weight:700; font-size:1.15rem; color:var(--black); margin:0 0 6px; }
.faq-card-text{ font-size:.9rem; line-height:1.55; color:var(--concrete); margin:0 0 18px; }
.faq-team-btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--navy); color:var(--white);
  font-family:"Inter Tight",sans-serif; font-weight:600; font-size:.95rem;
  border-radius:999px; padding:9px 9px 9px 20px;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.faq-team-btn:hover{ background:#0a2a44; transform:translateY(-2px); }
.faq-team-btn .arr{
  width:30px; height:30px; border-radius:50%; background:var(--teal); color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700;
  transition:transform .25s var(--ease);
}
.faq-team-btn:hover .arr{ transform:translateX(3px); }
.faq-list{ border-top:1px solid var(--line); min-width:0; }
@media (max-width:900px){
  .faq-grid{ grid-template-columns:1fr; gap:var(--space-9); }
  .faq-rail{ position:static; }
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  padding:var(--space-6) var(--space-2);
  font-family:"Inter Tight", sans-serif; font-weight:600; font-size:1.125rem; color:var(--black);
  transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--teal-flare); }
.faq-plus{ position:relative; width:18px; height:18px; flex:0 0 auto; transition:transform .3s var(--ease); }
.faq-plus::before, .faq-plus::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--teal-flare); border-radius:2px; }
.faq-plus::before{ width:18px; height:2px; }
.faq-plus::after{ width:2px; height:18px; }
.faq-item[open] .faq-plus{ transform:rotate(135deg); }
.faq-body{ padding:0 var(--space-2) var(--space-6); color:var(--concrete); font-size:1rem; line-height:1.65; max-width:72ch; }
.faq-item[open] .faq-body{ animation:faqIn .4s var(--ease) both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.faq-body p{ margin:0 0 .5rem; }
.faq-body ul{ margin:.5rem 0 0; padding-left:1.15rem; }
.faq-body li{ margin:.3rem 0; }
.faq-body strong{ color:var(--navy); }
@media (prefers-reduced-motion:reduce){ .faq-item[open] .faq-body{ animation:none; } .faq-plus{ transition:none; } }
@media (max-width:560px){ .faq-item summary{ font-size:1rem; } }

/* ===== 10 · FINAL CTA ===== */
.fcta{ background:var(--navy); color:var(--on-dark); position:relative; overflow:hidden; isolation:isolate; }
.fcta::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(45% 90% at 78% 50%, rgba(76,226,204,.16), transparent 60%),
    radial-gradient(40% 80% at 5% 110%, rgba(76,226,204,.10), transparent 55%); }
.fcta-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-16); align-items:center; }
.fcta .eyebrow{ color:var(--teal); }
.fcta h2{ font-family:"Saira",sans-serif; font-weight:700; font-size:clamp(2rem,4.2vw,3.25rem);
  line-height:1.05; letter-spacing:-.02em; color:var(--white); margin:0 0 var(--space-6); }
.fcta h2 .accent{ color:var(--teal); }
.fcta-lead{ font-size:1.125rem; line-height:1.6; color:var(--on-dark); max-width:52ch; }
.fcta-lead .em{ color:var(--teal); font-weight:600; }
.fcta-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.fcta-note{ font-size:.875rem; color:var(--on-dark-soft); }
.fcta-list{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; }
.fcta-list li{ display:flex; align-items:center; gap:10px; font-size:.98rem; color:var(--on-dark); }
.fcta-list .tk{ flex:none; width:20px; height:20px; border-radius:50%; background:rgba(76,226,204,.16); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; font-size:.66rem; font-weight:800; }
/* the primary and the ghost button render at different intrinsic heights (50 vs 46);
   pin both to the canonical 48px so the CTA pair lines up */
.fcta-actions .btn{ min-width:210px; height:48px; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:900px){ .fcta-grid{ grid-template-columns:1fr; gap:var(--space-9); } .fcta-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fcta-list{ grid-template-columns:1fr; } }
@media (max-width:560px){ .fcta-actions{ align-items:stretch; } .fcta-lead{ max-width:none; } }

/* ===== 11 · FOOTER ===== */
.ft{ background:var(--navy); color:var(--on-dark); font-size:.875rem; padding-block:var(--space-16) 0; }
.ft-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-12); }
.ft-logo{ display:flex; align-items:center; gap:var(--space-2); font-family:"Saira", sans-serif; font-weight:700; font-size:1.375rem; color:var(--white); letter-spacing:-.01em; }
.ft-mk{ width:26px; height:26px; border-radius:7px; background:var(--teal); color:var(--navy); display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; flex:none; }
.ft-ai{ color:var(--teal); }
.ft-tagline{ line-height:1.6; color:var(--on-dark); margin:var(--space-4) 0 var(--space-2); max-width:34ch; }
.ft-hashtag{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.75rem; color:var(--teal); margin:0; }
.ft-heading{ font-family:"Inter Tight", sans-serif; font-weight:600; font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--white); margin-bottom:var(--space-4); }
.ft-links{ display:flex; flex-direction:column; gap:var(--space-2); }
.ft-links a{ color:var(--on-dark); font-size:.9375rem; transition:color .2s var(--ease); }
.ft-links a:hover{ color:var(--teal); }
.ft-links a.ft-active{ color:var(--white); font-weight:600; }
.ft-links a.ft-active:hover{ color:var(--teal); }
.ft-bottom{ margin-top:var(--space-12); padding-block:var(--space-6); border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); font-size:.875rem; color:var(--on-dark-soft); }
.ft-legal{ display:flex; gap:var(--space-6); }
.ft-legal a{ color:var(--on-dark-soft); transition:color .2s var(--ease); }
.ft-legal a:hover{ color:var(--teal); }
@media (max-width:900px){ .ft-grid{ grid-template-columns:1fr 1fr; gap:var(--space-9); } }
@media (max-width:560px){
  .ft-grid{ grid-template-columns:1fr; gap:var(--space-9); }
  .ft-bottom{ flex-direction:column; align-items:flex-start; gap:var(--space-4); }
  .ft-legal{ flex-wrap:wrap; }
}

/*GLOBAL NAVIGATION wnav-css-start*/
/* ══════════ Wrench global nav — canonical, all pages ══════════ */
.wnav,.wnav-drawer{--wn-navy:#0A2036;--wn-navy-deep:#061629;--wn-teal:#4CE2CC;--wn-teal-btn:#22ABAD;
  --wn-teal-btn-hover:#1F9A9C;--wn-teal-text:#38CFC0;--wn-ease:cubic-bezier(.22,1,.36,1)}
.wnav{position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between;
  gap:40px;padding:18px 56px;background:var(--wn-navy);border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px -18px rgba(2,8,20,.6);box-sizing:border-box;width:100%;font-family:"Inter Tight",ui-sans-serif,system-ui,-apple-system,sans-serif}
.wnav *,.wnav-drawer *{box-sizing:border-box}
.wnav-brand{font-family:"Saira",ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:34px;
  letter-spacing:-.045em;line-height:1;background:linear-gradient(90deg,#4CE2CC 0%,#38CFC0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;flex:none}
.wnav-brand--sm{font-size:26px}
.wnav-links{display:flex;align-items:center;gap:40px;margin:0 auto}
.wnav-links a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;
  line-height:1.2;letter-spacing:.10em;text-transform:uppercase;color:#fff;text-decoration:none;
  padding:8px 0;transition:color .2s var(--wn-ease);white-space:nowrap}
.wnav-links a:hover{color:var(--wn-teal)}
.wnav-links a[aria-current="page"]{color:var(--wn-teal)}
.wnav-links .wnav-chev{opacity:.75;transition:transform .2s var(--wn-ease)}
.wnav-links a:hover .wnav-chev{transform:translateY(2px)}
.wnav-actions{display:flex;align-items:center;gap:14px;flex:none}

/* buttons — one definition, shared by bar and drawer */
.wnav-support,.wnav-demo{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Manrope",ui-sans-serif,sans-serif;font-weight:700;font-size:15px;line-height:1.2;
  letter-spacing:0;text-transform:none;text-decoration:none;border-radius:12px;padding:11px 22px;
  height:48px;min-height:48px;
  white-space:nowrap;cursor:pointer;transition:transform .18s var(--wn-ease),box-shadow .18s var(--wn-ease),
  background .18s var(--wn-ease),color .18s var(--wn-ease),border-color .18s var(--wn-ease)}
.wnav-support{border:2px solid var(--wn-teal-btn);color:var(--wn-teal-text);background:transparent}
.wnav-support:hover{color:var(--wn-teal);box-shadow:inset 0 0 10px rgba(34,171,173,.5),0 0 9px 3px rgba(34,171,173,.18)}
.wnav-demo{border:2px solid var(--wn-teal-btn);background:var(--wn-teal-btn);color:#fff;
  box-shadow:0 6px 18px rgba(34,171,173,.4)}
.wnav-demo:hover{background:var(--wn-teal-btn-hover);border-color:var(--wn-teal-btn-hover);color:#fff;
  box-shadow:0 10px 28px rgba(34,171,173,.55);transform:translateY(-2px)}
.wnav-arr{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;
  display:grid;place-items:center;flex:none;transition:transform .25s var(--wn-ease)}
.wnav-demo:hover .wnav-arr{transform:translateX(2px)}

/* burger */
.wnav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:46px;height:46px;flex:none;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);padding:0}
.wnav-burger span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;
  transition:transform .3s var(--wn-ease),opacity .2s var(--wn-ease)}
.wnav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.wnav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.wnav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer */
.wnav-scrim{position:fixed;inset:0;z-index:998;background:rgba(4,16,30,.62);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .28s var(--wn-ease)}
.wnav-scrim.is-open{opacity:1}
.wnav-drawer{position:fixed;top:0;right:0;z-index:999;width:min(360px,86vw);height:100dvh;
  display:flex;flex-direction:column;gap:8px;padding:18px 20px calc(20px + env(safe-area-inset-bottom));
  background:var(--wn-navy-deep);border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.8);transform:translateX(100%);
  transition:transform .32s var(--wn-ease);overflow-y:auto;overscroll-behavior:contain;
  font-family:"Inter Tight",ui-sans-serif,system-ui,-apple-system,sans-serif}
.wnav-drawer.is-open{transform:translateX(0)}
/* the drawer's own display:flex would otherwise beat [hidden], leaving its
   links in the tab order while closed */
.wnav-drawer[hidden],.wnav-scrim[hidden]{display:none}
.wnav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px}
.wnav-close{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;padding:0}
.wnav-close:hover{background:rgba(255,255,255,.1)}
.wnav-drawer-links{display:flex;flex-direction:column;margin-top:4px}
.wnav-drawer-links a{display:flex;align-items:center;min-height:52px;padding:12px 2px;
  border-top:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:color .2s var(--wn-ease)}
.wnav-drawer-links a:hover,.wnav-drawer-links a[aria-current="page"]{color:var(--wn-teal)}
.wnav-drawer-label{margin:22px 0 2px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.wnav-drawer-links a.wnav-sub{min-height:46px;font-size:14px;font-weight:600;letter-spacing:.04em;
  text-transform:none;color:rgba(255,255,255,.78)}
.wnav-drawer-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:20px}
.wnav-drawer-actions .wnav-support,.wnav-drawer-actions .wnav-demo{width:100%;height:52px;min-height:52px}
body.wnav-locked{overflow:hidden}

/* ── responsive ── */
@media (max-width:1280px){
  .wnav{padding:16px 32px;gap:24px}
  .wnav-links{gap:26px}
  .wnav-brand{font-size:30px}
}
@media (max-width:1180px){
  .wnav{gap:14px;padding:14px 24px}
  .wnav-links{display:none}
  .wnav-burger{display:inline-flex}
  .wnav-actions{margin-left:auto}
  .wnav-actions .wnav-support{display:none}
}
@media (max-width:767px){
  .wnav{padding:12px 16px;gap:10px}
  .wnav-brand{font-size:26px}
  .wnav-demo{padding:0 16px;height:46px;min-height:46px;font-size:14px;gap:8px}
  .wnav-arr{display:none}
}
@media (max-width:400px){
  .wnav{padding:10px 12px;gap:8px}
  .wnav-brand{font-size:23px}
  .wnav-demo{padding:0 13px;font-size:13.5px}
  .wnav-burger{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .wnav-drawer,.wnav-scrim,.wnav-burger span,.wnav-arr{transition:none}
}
/*wnav-css-end*/

  /* ============ NAV — Procore-style morph + page dim ============ */
  /* One shared chrome card carries the glass panel look and morphs its size when
     switching menus; the per-item .nav-drop layers become transparent content. */
  .nav-morph-card{
    position:absolute; top:100%; left:0; z-index:119;
    background:linear-gradient(180deg, rgba(16,40,66,.97) 0%, rgba(9,26,47,.98) 100%);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border:1px solid rgba(76,226,204,.16); border-top:none;
    border-radius:0 0 18px 18px;
    box-shadow:0 42px 80px -30px rgba(2,8,20,.85), inset 0 1px 0 rgba(255,255,255,.05);
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:width .28s cubic-bezier(.22,1,.36,1), height .28s cubic-bezier(.22,1,.36,1),
      left .28s cubic-bezier(.22,1,.36,1), opacity .2s ease, transform .25s ease;
  }
  .nav-morph-card.show{ opacity:1; transform:translateY(0); }
  .nav.morph-on .nav-drop{
    background:none; border:none; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav-dim{
    position:fixed; inset:0; z-index:99;
    background:rgba(2,8,20,.45);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  body.navmenu-open .nav-dim{ opacity:1; }
  @media (prefers-reduced-motion:reduce){
    .nav-morph-card, .nav-dim{ transition:none; }
  }