/* ==========================================================================
   myPOS ONE — www.mypos.lk
   Design system. Every colour and type decision lives in :root.
   Brand accent note: the myPOS logo hex is not published anywhere verifiable,
   so --accent uses the disciplined enterprise blue agreed in the brief.
   To match the real logo, change --accent / --accent-ink ONLY.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* graphite — derived from the logo's neutral greys, not a generic navy */
  --ink-900:#0E1013;
  --ink-800:#181B1F;
  --ink-700:#24282D;
  --ink-600:#3A3F45;
  --slate-600:#55595E;
  --slate-500:#6D6E71;   /* brand grey, dark  — logo tagline */
  --slate-400:#A7A9AC;   /* brand grey, light — logo wordmark */
  --line:#DEDEE0;
  --line-soft:#EBEBED;
  --n-50:#F7F7F8;
  --n-100:#EFEFF1;
  --white:#FFFFFF;

  /* brand — sampled from Logo.png */
  --accent:#D70E52;
  --accent-ink:#A80B40;
  --accent-wash:#FCE9EF;
  --accent-line:#F3BFD1;

  /* the brand colour is the call to action. There is no second CTA colour. */
  --warm:#D70E52;
  --warm-ink:#A80B40;

  /* status — product mocks only, tuned not to compete with the brand crimson */
  --pos:#15764A;
  --pos-wash:#E3F1EA;
  --neg:#B10F31;
  --neg-wash:#FBE9ED;
  --warn:#8A6100;
  --warn-wash:#FAF1DE;

  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:3px;
  --r-md:4px;
  --wrap:1240px;
  /* categorical data palette — used in product screens and charts only */
  --d1:#D70E52; --d2:#0E6F76; --d3:#B87407; --d4:#3F4E91; --d5:#157A4B; --d6:#8A8C90;
  --d1w:#FCE9EF; --d2w:#E4F1F2; --d3w:#FBF0DF; --d4w:#EAEDF7; --d5w:#E4F1EA;

  /* richer flat tints — no gradients anywhere */
  --tint-rose:#FBEDF2; --tint-rose-2:#F7E1EA;
  --tint-cool:#EEF1F9; --tint-teal:#E9F3F3; --tint-amber:#FBF2E2;

  --sh-1:0 1px 2px rgba(14,16,19,.05),0 1px 3px rgba(14,16,19,.04);
  --sh-2:0 2px 6px rgba(14,16,19,.06),0 8px 20px rgba(14,16,19,.06);
  --sh-3:0 12px 28px rgba(14,16,19,.10),0 32px 64px rgba(14,16,19,.09);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--ink-800);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.16;color:var(--ink-900)}
h1{font-size:clamp(1.85rem,1.4rem + 1.4vw,2.6rem);letter-spacing:-.026em;line-height:1.14}
h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem);letter-spacing:-.024em}
h3{font-size:clamp(1.1rem,1rem + .4vw,1.3rem)}
h4{font-size:1rem}
p{margin:0 0 1em}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.sprite{display:none}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink-800);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:16px;height:16px;stroke-width:1.8}
.ic-xs{width:13px;height:13px;stroke-width:1.9}
.ic-lg{width:26px;height:26px;stroke-width:1.45}

/* ---------------------------------------------------------------- eyebrow */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-500);margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow .num{
  color:var(--accent);font-weight:600;
  padding-right:10px;border-right:1px solid var(--line);
}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.mid .eyebrow{justify-content:center}
.sec-sub{margin:16px 0 0;font-size:1.075rem;color:var(--slate-600);max-width:62ch}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:var(--r);font-weight:550;font-size:.94rem;
  border:1px solid transparent;transition:background .16s,border-color .16s,color .16s,transform .16s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-accent{background:var(--warm);color:#fff;border-color:var(--warm)}
.btn-accent:hover{background:var(--warm-ink);border-color:var(--warm-ink);color:#fff}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink-800);background:var(--white)}
.btn-ghost:hover{border-color:var(--ink-600);background:var(--n-50)}
.btn-onDark{border-color:rgba(255,255,255,.3);color:#fff}
.btn-onDark:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn-sm{padding:9px 15px;font-size:.875rem}
.btn-lg{padding:15px 26px;font-size:1rem}
.btn-block{width:100%}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);
     backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line-soft);
     transition:box-shadow .2s,border-color .2s}
.hdr.stuck{box-shadow:var(--sh-1);border-color:var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 28px;height:70px;
        display:flex;align-items:center;gap:26px;transition:height .2s}
.hdr.stuck .hdr-in{height:60px}

.brand{display:flex;align-items:center;gap:10px;color:var(--ink-900)}
.brand:hover{text-decoration:none}
.brand img{height:38px;width:auto;display:block}
.hdr.stuck .brand img{height:33px}
.brand-lg img{height:44px}
.ftr .brand-lg img{height:48px}

.nav{display:flex;align-items:center;gap:2px;margin-right:auto}
.nav > a,.nav-btn{
  display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:var(--r);
  font-size:.925rem;font-weight:450;color:var(--ink-700);
}
.nav > a:hover,.nav-btn:hover{background:var(--n-100);text-decoration:none}
.nav > a.on{color:var(--accent-ink);font-weight:550}
.nav-item{position:static}
.nav-btn .ic{transition:transform .18s}
.nav-item.open .nav-btn{background:var(--n-100)}
.nav-item.open .nav-btn .ic{transform:rotate(180deg)}

.hdr-cta{display:flex;align-items:center;gap:12px}
.hdr-tel{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:500;
         color:var(--ink-700);font-family:var(--mono);letter-spacing:-.02em}
.hdr-tel:hover{color:var(--accent-ink);text-decoration:none}
.burger{display:none;padding:8px;border-radius:var(--r);color:var(--ink-800)}

/* mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--white);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .17s,transform .17s,visibility .17s;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:34px 28px 38px;
         display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px}
.mega-lead .mega-hero{display:block;color:var(--ink-900)}
.mega-lead .mega-hero:hover{text-decoration:none}
.mega-hero strong{display:block;font-size:1.25rem;letter-spacing:-.028em;margin-bottom:8px}
.mega-hero span{display:block;font-size:.9rem;color:var(--slate-600);line-height:1.55;margin-bottom:14px}
.mega-hero em{display:inline-flex;align-items:center;gap:7px;font-style:normal;
              font-size:.85rem;font-weight:550;color:var(--accent-ink)}
.mega-hero:hover em .ic{transform:translateX(3px)}
.mega-hero em .ic{transition:transform .16s}
.mega-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px}
.mega-h{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
        color:var(--slate-400);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.mega-cols a,.mega-grid a{
  display:flex;gap:12px;padding:10px;margin:0 -10px;border-radius:var(--r);color:var(--ink-800);
}
.mega-cols a:hover,.mega-grid a:hover{background:var(--n-50);text-decoration:none}
.mega-cols a .ic,.mega-grid a .ic{color:var(--accent);margin-top:2px}
.mega-cols a span,.mega-grid a span{font-size:.82rem;color:var(--slate-500);line-height:1.45}
.mega-cols a strong,.mega-grid a strong{display:block;font-size:.925rem;font-weight:550;
                                        color:var(--ink-900);margin-bottom:2px}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 20px}

/* mobile nav */
.mnav{position:fixed;inset:70px 0 0;z-index:88;background:var(--white);overflow-y:auto;padding:14px 22px 90px}
.mnav nav{display:flex;flex-direction:column}
.mnav a{padding:15px 4px;border-bottom:1px solid var(--line-soft);font-size:1.05rem;
        font-weight:450;color:var(--ink-800)}
.mnav .btn{margin-top:22px;border-bottom:0}

/* ---------------------------------------------------------------- sections */
.sec{padding:88px 0}
.sec-tight{padding:64px 0}
.sec-n{background:var(--n-50)}
.sec-line{border-top:1px solid var(--line-soft)}
.sec-dark{background:var(--ink-800);color:#C8CACD}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .eyebrow{color:var(--slate-400)}
.sec-dark .eyebrow .num{color:var(--accent);border-right-color:rgba(255,255,255,.16)}
.sec-dark .sec-sub{color:#A7A9AC}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--white);
      border-bottom:1px solid var(--line-soft)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);
         gap:64px;align-items:center;padding-top:78px;padding-bottom:84px}
/* hero eyebrow rail */
.hero-kicker{
  display:inline-flex;align-items:center;gap:0;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);
  border:1px solid var(--line);border-radius:100px;padding:6px 4px 6px 14px;margin-bottom:26px;background:var(--white);
}
.hero-kicker span{padding:0 14px 0 0}
.hero-kicker span + span{border-left:1px solid var(--line);padding-left:14px}
.hero-kicker b{color:var(--ink-800);font-weight:600}
.hero h1{margin-bottom:20px;max-width:22ch}
.hero h1 em{font-style:normal;color:var(--accent);display:block}
.hero-lede{font-size:1.13rem;color:var(--slate-600);max-width:52ch;margin-bottom:30px}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.hero-facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);padding-top:22px}
.hero-facts div{padding-right:30px;margin-right:30px;border-right:1px solid var(--line)}
.hero-facts div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-facts b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:600;
              color:var(--ink-900);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hero-facts span{font-size:.78rem;color:var(--slate-500);letter-spacing:.01em}

/* ---------------------------------------------------------------- product UI mocks */
.mockstack{position:relative;padding-bottom:116px}
.frame{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);overflow:hidden;
}
.frame-bar{
  display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--n-100);
  border-bottom:1px solid var(--line);
}
.frame-dot{width:9px;height:9px;border-radius:50%;background:#CBD5E0}
.frame-url{
  margin-left:8px;flex:1;background:var(--white);border:1px solid var(--line);border-radius:3px;
  font-family:var(--mono);font-size:.66rem;color:var(--slate-500);padding:3px 9px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.ui{padding:16px;font-size:.75rem}

/* mock: dashboard */
.ui-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.ui-title{font-size:.9rem;font-weight:600;letter-spacing:-.02em}
.ui-meta{font-family:var(--mono);font-size:.63rem;color:var(--slate-400);letter-spacing:.02em}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:14px}
.kpi{border:1px solid var(--line-soft);border-radius:var(--r);padding:10px 11px;background:var(--n-50)}
.kpi-l{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
       color:var(--slate-400);margin-bottom:5px}
.kpi-v{font-family:var(--mono);font-size:1rem;font-weight:600;letter-spacing:-.035em;
       color:var(--ink-900);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-d{font-size:.62rem;font-weight:550;margin-top:4px;display:flex;align-items:center;gap:3px}
.up{color:var(--pos)}.down{color:var(--neg)}
.kpi-d .ic{width:11px;height:11px;stroke-width:2.2}

.panel{border:1px solid var(--line-soft);border-radius:var(--r);padding:12px}
.panel + .panel{margin-top:9px}
.panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.panel-h b{font-size:.72rem;font-weight:600}
.panel-h span{font-family:var(--mono);font-size:.58rem;color:var(--slate-400);letter-spacing:.06em;text-transform:uppercase}

.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:74px minmax(0,1fr) 62px;align-items:center;gap:9px}
.bar-row i{font-style:normal;font-size:.68rem;color:var(--slate-600);white-space:nowrap;
           overflow:hidden;text-overflow:ellipsis}
.bar-track{height:7px;background:var(--n-100);border-radius:2px;overflow:hidden}
.bar-fill{height:100%;background:var(--ink-600);border-radius:2px;
          transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal .bar-fill,.mock-live .bar-fill,.stage.mock-live .bar-fill{transform:scaleX(1)}
.bar-fill.alt{background:var(--slate-400)}
.bar-row u{text-decoration:none;font-family:var(--mono);font-size:.66rem;text-align:right;
           color:var(--ink-800);font-variant-numeric:tabular-nums}

.rows{display:flex;flex-direction:column;gap:1px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
     padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:.7rem}
.row:last-child{border-bottom:0}
.row-a{display:flex;align-items:center;gap:7px;min-width:0}
.row-a .ic{width:13px;height:13px}
.row-a b{font-weight:500;color:var(--ink-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-a em{font-style:normal;font-family:var(--mono);font-size:.6rem;color:var(--slate-400);display:block}
.chip{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;
      padding:2px 6px;border-radius:2px;font-weight:500;white-space:nowrap}
.chip-neg{background:var(--neg-wash);color:var(--neg)}
.chip-warn{background:var(--warn-wash);color:var(--warn)}
.chip-pos{background:var(--pos-wash);color:var(--pos)}
.chip-acc{background:var(--accent-wash);color:var(--accent-ink)}
.row u{text-decoration:none;font-family:var(--mono);font-size:.66rem;color:var(--ink-800);
       font-variant-numeric:tabular-nums}

/* mock: floating AI card */
.mock-float{
  position:absolute;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-3);padding:13px;width:232px;z-index:3;
}
.mock-ai{right:-48px;bottom:-14px}
.ai-h{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.ai-h .ic{color:var(--accent);width:15px;height:15px}
.ai-h b{font-size:.72rem;font-weight:600}
.ai-h span{margin-left:auto;font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;
           text-transform:uppercase;color:var(--accent-ink);background:var(--accent-wash);
           padding:2px 5px;border-radius:2px}
.ai-body{font-size:.7rem;color:var(--slate-600);line-height:1.5;margin:0 0 10px}
.ai-body b{color:var(--ink-900);font-weight:600}
.spark{display:flex;align-items:flex-end;gap:3px;height:38px;margin-bottom:10px}
.spark i{flex:1;background:var(--n-100);border-radius:1px;display:block;
         transform-origin:bottom;transform:scaleY(.15);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal .spark i,.mock-live .spark i{transform:scaleY(1)}
.spark i.f{background:var(--accent)}
.spark i.g{background:var(--line-soft)}
.ai-act{display:flex;gap:6px}
.ai-act b{flex:1;text-align:center;font-size:.65rem;font-weight:550;padding:6px;
          border-radius:3px;background:var(--accent);color:#fff}
.ai-act span{flex:1;text-align:center;font-size:.65rem;font-weight:500;padding:6px;
             border-radius:3px;border:1px solid var(--line);color:var(--slate-600)}

/* mock: POS terminal */
.pos-grid{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:12px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.tile{border:1px solid var(--line-soft);border-radius:var(--r);padding:9px 8px;background:var(--n-50);
      font-size:.65rem;line-height:1.3}
.tile b{display:block;font-weight:550;color:var(--ink-800);margin-bottom:3px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile u{text-decoration:none;font-family:var(--mono);font-size:.62rem;color:var(--slate-500)}
.tile.on{background:var(--accent-wash);border-color:var(--accent-line)}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px 0;
           border-bottom:1px dashed var(--line-soft);font-size:.68rem}
.cart-line em{font-style:normal;font-family:var(--mono);font-size:.58rem;color:var(--slate-400);display:block}
.cart-line u{text-decoration:none;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-800)}
.cart-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;
          padding-top:10px;border-top:1px solid var(--ink-800)}
.cart-tot span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
.cart-tot b{font-family:var(--mono);font-size:1.15rem;font-weight:600;letter-spacing:-.04em;
            color:var(--ink-900);font-variant-numeric:tabular-nums}
.pos-pay{display:flex;gap:6px;margin-top:10px}
.pos-pay b{flex:1;text-align:center;font-size:.66rem;padding:8px;border-radius:3px;
           background:var(--pos);color:#fff;font-weight:550}
.pos-pay span{flex:1;text-align:center;font-size:.66rem;padding:8px;border-radius:3px;
              border:1px solid var(--line);color:var(--slate-600)}
.offline{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:.62rem;
         color:var(--warn);background:var(--warn-wash);padding:6px 8px;border-radius:3px}
.offline .ic{width:12px;height:12px}

/* ---------------------------------------------------------------- architecture */
.arch{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.arch-row{display:grid;grid-template-columns:224px minmax(0,1fr);border-top:1px solid var(--line-soft)}
.arch-row:first-child{border-top:0}
.arch-lbl{background:var(--n-50);padding:18px 20px;border-right:1px solid var(--line-soft)}
.arch-lbl b{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.018em;margin-bottom:5px}
.arch-lbl span{display:block;font-size:.78rem;color:var(--slate-500);line-height:1.45}
.arch-body{padding:18px 20px;display:flex;flex-wrap:wrap;gap:6px;align-content:center}
.arch-node{border:1px solid var(--line);border-radius:2px;padding:7px 12px;font-size:.815rem;
           color:var(--ink-700);background:var(--white);white-space:nowrap}
.arch-node em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--slate-400);
              margin-left:7px;padding-left:7px;border-left:1px solid var(--line)}
.arch-core .arch-node em{color:var(--slate-400);border-left-color:rgba(255,255,255,.2)}
.arch-core{background:var(--ink-800)}
.arch-core .arch-lbl{background:var(--ink-900);border-right-color:rgba(255,255,255,.1)}
.arch-core .arch-lbl b{color:#fff}
.arch-core .arch-lbl span{color:var(--slate-400)}
.arch-core .arch-node{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#E4E5E7}
.arch-fin .arch-lbl{background:var(--accent-wash);border-right-color:var(--accent-line)}
.arch-fin .arch-lbl b{color:var(--accent-ink)}
.arch-fin .arch-node{border-color:var(--accent-line);color:var(--accent-ink)}

/* ---------------------------------------------------------------- spec table */
.spec{width:100%;border-collapse:collapse;border:1px solid var(--line);
      border-radius:var(--r-md);overflow:hidden;font-size:.875rem;table-layout:fixed}
.spec tr{border-bottom:1px solid var(--line-soft)}
.spec tr:last-child{border-bottom:0}
.spec tr:nth-child(odd){background:var(--n-50)}
.spec th{text-align:left;font-weight:500;color:var(--slate-500);padding:11px 16px;
         width:43%;vertical-align:top;font-size:.83rem}
.spec td{padding:11px 16px;color:var(--ink-800);vertical-align:top}

/* hero product label */
.hero-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
          color:var(--accent);margin:0 0 12px;font-weight:500}

/* card variant on the dark band */
.card-dk{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.card-dk p{color:var(--slate-400)}
.card-dk:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.sec-dark .card-dk .ic-lg{color:#F06B96}

/* ---------------------------------------------------------------- product tour */
.sec-tour{background:var(--n-50);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tour{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.tour-tabs{display:flex;flex-direction:column;gap:2px;position:sticky;top:92px}
.tour-tab{
  display:flex;gap:13px;text-align:left;padding:15px 16px;border-radius:var(--r-md);
  border:1px solid transparent;color:var(--slate-600);transition:background .16s,border-color .16s,color .16s;
}
.tour-tab .ic{color:var(--slate-400);margin-top:2px;transition:color .16s}
.tour-tab strong{display:block;font-size:.96rem;font-weight:550;color:var(--ink-800);
                 letter-spacing:-.018em;margin-bottom:3px}
.tour-tab em{display:block;font-style:normal;font-size:.8rem;line-height:1.45;color:var(--slate-500)}
.tour-tab:hover{background:var(--white);border-color:var(--line)}
.tour-tab[aria-selected="true"]{background:var(--white);border-color:var(--line);box-shadow:var(--sh-1)}
.tour-tab[aria-selected="true"]::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--accent);border-radius:0 2px 2px 0;
}
.tour-tab{position:relative}
.tour-tab[aria-selected="true"] .ic{color:var(--accent)}
.tour-tab[aria-selected="true"] em{color:var(--slate-600)}
.tour-stage{min-height:460px}
.tour-pane{animation:tourIn .34s cubic-bezier(.2,.7,.3,1)}
.tour-pane[hidden]{display:none}
@keyframes tourIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tour-pane .frame{box-shadow:var(--sh-3)}
.tour-pane .mock-live .bar-fill,.tour-pane .bar-fill{transform:scaleX(1)}
.tour-pane .spark i{transform:scaleY(1)}

/* hero: a second screen sits behind for depth */
.mock-behind{
  position:absolute;right:-46px;top:-42px;width:80%;opacity:.6;z-index:0;
  transform:scale(.95);transform-origin:top right;pointer-events:none;filter:saturate(.2);
}
.mock-behind .frame{box-shadow:var(--sh-2)}
.mockstack > .frame{position:relative;z-index:1}

/* ---------------------------------------------------------------- trust bar */
.trust{border-bottom:1px solid var(--line-soft);background:var(--white);padding:26px 0}
.trust-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.trust p{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
         text-transform:uppercase;color:var(--slate-400);flex:none;max-width:170px;line-height:1.5}
.trust ul{display:flex;flex-wrap:wrap;gap:8px 30px;flex:1}
.trust li{font-size:.98rem;font-weight:600;letter-spacing:-.02em;color:var(--slate-400);
          transition:color .18s}
.trust li:hover{color:var(--ink-700)}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
      padding:24px;transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--accent-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
a.card:hover{text-decoration:none}
.card .ic-lg{color:var(--accent);margin-bottom:16px}
.card h3{margin-bottom:8px;letter-spacing:-.024em}
.card p{margin:0;font-size:.92rem;color:var(--slate-600);line-height:1.55}
.card-proof{margin-top:14px !important;padding-top:13px;border-top:1px solid var(--line-soft);
            font-size:.8rem !important;color:var(--accent-ink) !important;font-weight:500}

/* module chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.mod-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);
  border-radius:100px;font-size:.87rem;font-weight:450;color:var(--ink-700);background:var(--white);
  transition:border-color .16s,color .16s,background .16s;
}
.mod-chip .ic{width:15px;height:15px;color:var(--accent)}
.mod-chip:hover{border-color:var(--accent);color:var(--accent-ink);text-decoration:none;background:var(--accent-wash)}
.sec-dark .mod-chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:#D9E2EC}
.sec-dark .mod-chip .ic{color:#F06B96}
.sec-dark .mod-chip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px;padding-bottom:22px;
         border-bottom:1px solid var(--line-soft)}
.filters button{
  padding:8px 15px;border:1px solid var(--line);border-radius:100px;font-size:.855rem;
  color:var(--slate-600);background:var(--white);transition:all .16s;
}
.filters button:hover{border-color:var(--ink-600);color:var(--ink-800)}
.filters button[aria-pressed="true"]{background:var(--ink-800);border-color:var(--ink-800);color:#fff}
.filter-count{margin-left:auto;align-self:center;font-family:var(--mono);font-size:.72rem;
              color:var(--slate-400);letter-spacing:.04em}

/* module detail list */
.mod-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mod{border:1px solid var(--line);border-radius:var(--r-md);padding:22px;background:var(--white);
     transition:border-color .18s,box-shadow .18s}
.mod:hover{border-color:var(--accent-line);box-shadow:var(--sh-1)}
.mod-top{display:flex;align-items:flex-start;gap:13px;margin-bottom:12px}
.mod-top .ic-lg{color:var(--accent);margin:1px 0 0}
.mod-top h3{font-size:1.06rem;margin-bottom:4px}
.mod-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
         color:var(--slate-400)}
.mod-val{font-size:.92rem;color:var(--slate-600);margin:0 0 14px}
.mod ul{display:grid;gap:7px;padding-top:14px;border-top:1px solid var(--line-soft)}
.mod li{display:flex;gap:9px;font-size:.85rem;color:var(--slate-600);line-height:1.5}
.mod li .ic{width:14px;height:14px;color:var(--accent);margin-top:4px;stroke-width:2.2}

/* capability columns */
.cap{border-top:2px solid var(--ink-800);padding-top:18px}
.cap-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cap-h .ic{color:var(--accent)}
.cap-h h3{font-size:1rem;letter-spacing:-.02em}
.cap ul{display:grid;gap:9px}
.cap li{font-size:.865rem;color:var(--slate-600);padding-left:16px;position:relative;line-height:1.5}
.cap li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
                border-radius:50%;background:var(--accent-line)}

/* ---------------------------------------------------------------- numbers band */
.band-num{background:var(--ink-800);color:#fff;padding:56px 0}
.band-num .wrap{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
.stat{padding:0 18px;border-left:1px solid rgba(255,255,255,.13)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--mono);font-size:clamp(1.6rem,1.1rem + 1.5vw,2.3rem);
        font-weight:600;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.stat span{display:block;margin-top:9px;font-size:.76rem;color:#A7A9AC;line-height:1.4}

/* ---------------------------------------------------------------- ledger split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.led-flow{display:flex;flex-direction:column;gap:0}
.led-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;padding-bottom:26px;position:relative}
.led-step:last-child{padding-bottom:0}
.led-step::before{content:"";position:absolute;left:18px;top:38px;bottom:0;width:1px;background:var(--line)}
.led-step:last-child::before{display:none}
.led-n{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--white);
       display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;font-weight:600;
       color:var(--accent);position:relative;z-index:1}
.led-step h3{font-size:1.02rem;margin-bottom:5px}
.led-step p{margin:0;font-size:.9rem;color:var(--slate-600)}

/* ---------------------------------------------------------------- testimonials */
.quotes{position:relative}
.quote-feat{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);
            border-radius:var(--r-md);padding:38px 40px;margin-bottom:16px}
.quote-feat blockquote{margin:0;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.42;
                       letter-spacing:-.024em;color:var(--ink-900);font-weight:450}
.quote-feat blockquote::before{content:"\201C"}
.quote-feat blockquote::after{content:"\201D"}
.quote-by{margin:22px 0 0;display:flex;align-items:center;gap:12px}
.quote-by b{font-size:.92rem;font-weight:600}
.quote-by span{font-size:.85rem;color:var(--slate-500)}
.quote-by i{width:1px;height:16px;background:var(--line);display:block}
.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.q{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.q blockquote{margin:0 0 16px;font-size:.98rem;line-height:1.55;color:var(--ink-700)}
.q blockquote::before{content:"\201C"}
.q blockquote::after{content:"\201D"}
.q .quote-by{margin:0;padding-top:14px;border-top:1px solid var(--line-soft)}

/* ---------------------------------------------------------------- clients */
.cl-group{margin-bottom:34px}
.cl-h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;
      padding-bottom:11px;border-bottom:1px solid var(--line)}
.cl-h h3{font-size:1.05rem}
.cl-h span{font-family:var(--mono);font-size:.7rem;color:var(--slate-400);letter-spacing:.05em}
.cl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);
         border:1px solid var(--line-soft);border-radius:var(--r)}
.cl{background:var(--white);padding:15px 16px;font-size:.87rem;color:var(--ink-700);
    display:flex;align-items:center;min-height:60px;line-height:1.35;transition:background .16s}
.cl:hover{background:var(--n-50)}

/* ---------------------------------------------------------------- news */
.news-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.na{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
    padding:26px;color:var(--ink-800);transition:border-color .18s,box-shadow .18s,transform .18s}
.na:hover{border-color:var(--accent-line);box-shadow:var(--sh-2);transform:translateY(-2px);text-decoration:none}
.na-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.na-cat{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
        color:var(--accent-ink);background:var(--accent-wash);padding:3px 7px;border-radius:2px;font-weight:500}
.na-date{font-family:var(--mono);font-size:.68rem;color:var(--slate-400)}
.na h3{font-size:1.12rem;margin-bottom:9px;letter-spacing:-.026em}
.na p{margin:0;font-size:.9rem;color:var(--slate-600);line-height:1.55}
.na-more{margin-top:16px !important;display:inline-flex;align-items:center;gap:7px;
         font-size:.82rem !important;font-weight:550;color:var(--accent-ink) !important}
.news-list{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r)}
.nl{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:20px;align-items:center;
    background:var(--white);padding:20px 22px;color:var(--ink-800);transition:background .16s}
.nl:hover{background:var(--n-50);text-decoration:none}
.nl h3{font-size:1rem;margin-bottom:4px}
.nl p{margin:0;font-size:.86rem;color:var(--slate-500)}
.nl .ic{color:var(--slate-400)}

/* ---------------------------------------------------------------- pillars */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.pillar{padding:0 26px;border-left:1px solid var(--line)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar h3{font-size:1rem;margin-bottom:10px}
.pillar p{margin:0;font-size:.89rem;color:var(--slate-600);line-height:1.55}
.pillar .ic{color:var(--accent);margin-bottom:14px}

.flags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.flag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
      border-radius:100px;padding:7px 15px;font-size:.85rem;color:var(--slate-600);background:var(--white)}
.flag .ic{width:14px;height:14px;color:var(--accent)}

/* product family strip */
.fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);
     border:1px solid var(--line-soft);border-radius:var(--r)}
.fam div{background:var(--white);padding:18px 20px}
.fam b{display:block;font-size:.94rem;font-weight:600;margin-bottom:4px;letter-spacing:-.02em}
.fam span{font-size:.82rem;color:var(--slate-500)}

/* integrations */
.int{display:flex;flex-wrap:wrap;gap:8px}
.int span{border:1px solid var(--line);border-radius:var(--r);padding:8px 15px;
          font-size:.87rem;color:var(--slate-600);background:var(--white)}

/* ---------------------------------------------------------------- CTA band */
.band-cta{background:var(--ink-900);color:#fff;padding:64px 0}
.band-cta-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center}
.band-cta h2{color:#fff;margin-bottom:12px}
.band-cta p{margin:0;color:#A7A9AC;font-size:1.02rem;max-width:56ch}
.band-cta-act{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.band-cta-alt{display:flex;flex-direction:column;gap:9px}
.band-cta-alt a{display:flex;align-items:center;gap:9px;color:#C8CACD;font-size:.9rem;
                font-family:var(--mono);letter-spacing:-.01em}
.band-cta-alt a:hover{color:#fff}

/* ---------------------------------------------------------------- form */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:30px}
.f-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.f{margin-bottom:16px}
.f label{display:block;font-size:.85rem;font-weight:500;margin-bottom:7px;color:var(--ink-700)}
.f label span{color:var(--warm)}
.f input,.f textarea,.f select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:.94rem;color:var(--ink-800);background:var(--white);
  transition:border-color .16s,box-shadow .16s;
}
.f textarea{resize:vertical;min-height:96px}
.f input:focus,.f textarea:focus,.f select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--neg)}
.sel{position:relative}
.sel .ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);
         color:var(--slate-400);pointer-events:none}
.sel select{appearance:none;padding-right:38px}
.err{margin:6px 0 0;font-size:.79rem;color:var(--neg)}
.count{margin:6px 0 0;font-family:var(--mono);font-size:.7rem;color:var(--slate-400);text-align:right}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:14px 0 0;font-size:.79rem;color:var(--slate-500);display:flex;
           align-items:center;gap:7px;justify-content:center}
.form-ok{background:var(--pos-wash);border:1px solid #B9E0CB;border-radius:var(--r);padding:24px;text-align:center}
.form-ok-h{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:600;
           color:var(--pos);margin-bottom:8px;font-size:1.05rem}
.form-ok p{margin:0;font-size:.92rem;color:var(--ink-700)}

/* contact cards */
.ct-list{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
         border-radius:var(--r);overflow:hidden}
.ct{display:flex;gap:14px;padding:20px;background:var(--white)}
.ct .ic{color:var(--accent);margin-top:3px}
.ct b{display:block;font-size:.85rem;font-weight:600;margin-bottom:3px}
.ct p{margin:0;font-size:.9rem;color:var(--slate-600);line-height:1.5}
.ct p a{display:inline-flex;align-items:center;gap:5px}
.ct a{color:var(--accent-ink)}

/* ---------------------------------------------------------------- page hero */
.phero{background:var(--n-50);border-bottom:1px solid var(--line-soft);padding:62px 0 58px}
.phero h1{margin-bottom:18px;max-width:20ch}
.phero p{font-size:1.1rem;color:var(--slate-600);max-width:62ch;margin:0}
.phero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
       color:var(--slate-400);margin-bottom:16px}
.crumb a{color:var(--slate-400)}

/* prose (legal pages) */
.prose{max-width:70ch}
.prose h2{font-size:1.35rem;margin:38px 0 14px}
.prose h3{font-size:1.05rem;margin:26px 0 10px}
.prose p,.prose li{color:var(--slate-600);font-size:.97rem}
.prose ul{list-style:disc;padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:7px}

/* ---------------------------------------------------------------- floating + mobile bar */
/* brand crimson is the only CTA colour */
.pill{
  position:fixed;right:22px;bottom:22px;z-index:80;display:inline-flex;align-items:center;gap:9px;
  background:var(--warm);color:#fff;padding:13px 20px;border-radius:100px;font-weight:550;
  font-size:.9rem;box-shadow:0 8px 24px rgba(215,14,82,.30);
  animation:pop .3s cubic-bezier(.2,1.1,.4,1);
}
.pill:hover{background:var(--warm-ink);color:#fff;text-decoration:none}
.pill[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.mbar{display:none}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--ink-900);color:#A7A9AC;padding:64px 0 0;font-size:.9rem}
.ftr a{color:#A7A9AC}
.ftr a:hover{color:#fff}
.ftr-top{display:grid;grid-template-columns:315px minmax(0,1fr);gap:56px;padding-bottom:44px}
.ftr .brand{color:#fff;margin-bottom:18px}
.ftr-blurb{color:#8E9195;line-height:1.6;margin-bottom:20px;font-size:.88rem}
.ftr-contact{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.ftr-contact a{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.84rem;letter-spacing:-.01em}
.ftr-social{display:flex;gap:16px;font-size:.84rem}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.ftr-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
       color:#71747A;margin:0 0 14px}
.ftr-cols ul{display:grid;gap:9px}
.ftr-cols li{font-size:.86rem;line-height:1.4}
.ftr-cols em{font-style:normal;color:#F06B96}
.ftr-addr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
          padding:34px 28px;border-top:1px solid rgba(255,255,255,.09)}
.ftr-addr p{margin:0;font-size:.84rem;color:#8E9195;line-height:1.55}
.ftr-addr a{display:inline-flex;align-items:center;gap:6px}
.ftr-btm{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
         padding:22px 28px 26px;border-top:1px solid rgba(255,255,255,.09)}
.ftr-btm p{margin:0;font-size:.8rem;color:#71747A}
.ftr-btm nav{display:flex;gap:20px;font-size:.8rem}

/* ---------------------------------------------------------------- reveal */
[data-rv]{opacity:0;transform:translateY(14px);
          transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
[data-rv].reveal{opacity:1;transform:none}
.is-hidden{display:none !important}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:48px;padding:56px 0 64px}
  .mockstack{max-width:640px}
  .mega-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band-num .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 0}
  .stat{border-left:1px solid rgba(255,255,255,.13)}
  .stat:nth-child(4n+1){border-left:0;padding-left:0}
  .ftr-top{grid-template-columns:minmax(0,1fr);gap:40px}
  .ftr-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0}
  .pillar:nth-child(odd){border-left:0;padding-left:0}
  .fam{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tour{grid-template-columns:minmax(0,1fr);gap:18px}
  .tour-tabs{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .tour-tab{flex:0 0 auto;padding:11px 15px;border-color:var(--line);background:var(--white)}
  .tour-tab .ic,.tour-tab em{display:none}
  .tour-tab strong{margin:0;white-space:nowrap;font-size:.88rem}
  .tour-tab[aria-selected="true"]{background:var(--ink-800);border-color:var(--ink-800)}
  .tour-tab[aria-selected="true"] strong{color:#fff}
  .tour-tab[aria-selected="true"]::before{display:none}
  .tour-stage{min-height:0}
  .mock-behind{display:none}
  .arch-row{grid-template-columns:minmax(0,1fr)}
  .arch-lbl{border-right:0;border-bottom:1px solid var(--line-soft);padding:14px 16px}
  .arch-core .arch-lbl{border-bottom-color:rgba(255,255,255,.1)}
  .arch-body{padding:14px 16px}
  .nav,.hdr-tel{display:none}
  .burger{display:grid;place-items:center}
  .split,.split-wide{grid-template-columns:minmax(0,1fr);gap:38px}
  .band-cta-in{grid-template-columns:minmax(0,1fr);gap:30px}
  .g3,.mod-list,.q-grid,.news-feat{grid-template-columns:minmax(0,1fr)}
  .sec{padding:64px 0}
  .nl{grid-template-columns:minmax(0,1fr);gap:8px}
  .nl .ic{display:none}
  .ftr-addr{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:720px){
  .arch-node{white-space:normal;font-size:.78rem}
  .spec th,.spec td{padding:9px 12px;font-size:.8rem}
  .spec th{width:46%}
  .wrap{padding:0 20px}
  .hdr-in{padding:0 20px;gap:14px}
  .mnav{padding:14px 20px 90px}
  body{padding-bottom:60px}
  .mbar{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:85;
    background:var(--white);border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(11,28,46,.09);
  }
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
          padding:9px 4px;font-size:.7rem;font-weight:500;color:var(--ink-700);
          border-left:1px solid var(--line-soft)}
  .mbar a:first-child{border-left:0}
  .mbar a:hover{text-decoration:none}
  .mbar-cta{background:var(--warm);color:#fff !important}
  /* brand crimson is the only CTA colour */
.pill{display:none}
  .g2,.f-row{grid-template-columns:minmax(0,1fr)}
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band-num .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0}
  .stat{padding:0 14px}
  .stat:nth-child(2n+1){border-left:0;padding-left:0}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .mega-grid{grid-template-columns:minmax(0,1fr)}
  .hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .hero-facts div{padding:0 12px;margin:0;border-right:1px solid var(--line)}
  .hero-facts div:first-child{padding-left:0}
  .hero-facts b{font-size:1.25rem}
  .quote-feat{padding:26px 24px}
  .form{padding:22px}
  .pos-grid{grid-template-columns:minmax(0,1fr)}
  .mock-float{position:static;width:auto;margin-top:12px}
  .mockstack{padding-bottom:0}
  .trust-in{gap:16px}
  .trust p{max-width:none;flex:1 1 100%}
  .trust ul{gap:8px 20px}
  .trust li{font-size:.88rem}
  .filters{gap:6px}
  .filters button{padding:7px 12px;font-size:.8rem}
  .filter-count{width:100%;margin-left:0;text-align:left}
}
@media (max-width:440px){
  /* alert rows were clipping their value column inside the frame */
  .ui{padding:11px}
  .row{gap:6px}
  .row-a b{font-size:.68rem}
  .row .chip{font-size:.53rem;padding:2px 4px}
  .row u{font-size:.62rem}
  .panel-h span{font-size:.53rem}
}
@media (max-width:420px){
  .wrap,.hdr-in{padding-left:16px;padding-right:16px}
  .cl-grid,.fam{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kpis .kpi:last-child{grid-column:span 2}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* hero eyebrow rail */
.hero-kicker{display:flex;flex-wrap:wrap;width:100%;border-radius:var(--r);
    padding:10px 12px;gap:4px 0;font-size:.64rem}
  .hero-kicker span{padding-right:10px}
  .hero-kicker span + span{border-left:1px solid var(--line);padding-left:10px}
  .hero-kicker span + span{border-left:0;padding-left:0}
}

/* ---------------------------------------------------------------- a11y */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-rv]{opacity:1;transform:none}
  .bar-fill{transform:scaleX(1)}
  .spark i{transform:scaleY(1)}
}
@media print{
  .hdr,.mbar,.pill,.mnav,.band-cta{display:none}
  body{color:#000}
}


/* ==========================================================================
   Colour, gradient and motion layer
   Gradients are all derived from the logo crimson or the graphite ramp.
   Every animation below is disabled under prefers-reduced-motion.
   ========================================================================== */

/* --- gradient surfaces --------------------------------------------------- */
.btn-accent{background:var(--accent);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.pill{background:var(--accent)}

.sec-dark{background:var(--ink-800)}
.band-num{background:var(--ink-900)}
.band-num .wrap{position:relative}
.band-cta{background:var(--accent)}
.band-cta-in{position:relative}
.phero{background:var(--tint-rose)}
.sec-tour{background:var(--tint-cool)}

/* gradient hairline under section headings */
.sec-head h2::after{
  content:"";display:block;width:44px;height:3px;margin-top:18px;
  background:var(--accent);border-radius:2px;
}
.sec-head.mid h2::after{margin-left:auto;margin-right:auto}

/* --- categorical colour in product screens ------------------------------- */
.bar-row:nth-child(1) .bar-fill{background:var(--d1)}
.bar-row:nth-child(2) .bar-fill{background:var(--d4)}
.bar-row:nth-child(3) .bar-fill{background:var(--d2)}
.bar-row:nth-child(4) .bar-fill{background:var(--d3)}
.bar-row:nth-child(5) .bar-fill{background:var(--d6)}
.card .ic-lg{color:var(--accent)}
.grid .card:nth-child(3n+2) .ic-lg{color:var(--d4)}
.grid .card:nth-child(3n) .ic-lg{color:var(--d2)}
.cap:nth-child(3n+2) .cap-h .ic{color:var(--d4)}
.cap:nth-child(3n) .cap-h .ic{color:var(--d2)}
.cap:nth-child(3n+2){border-top-color:var(--d4)}
.cap:nth-child(3n){border-top-color:var(--d2)}
.cap:nth-child(3n+2) li::before{background:var(--d4)}
.cap:nth-child(3n) li::before{background:var(--d2)}

/* --- the AI band --------------------------------------------------------- */
.band-ai{position:relative;padding:88px 0;background:var(--ink-900);color:#C8CACD}
.band-ai-in{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
            gap:56px;align-items:center}
.band-ai h2{color:#fff;margin-bottom:16px}
.band-ai .eyebrow{color:var(--slate-400)}
.band-ai .eyebrow .num{
  color:#fff;background:var(--g-brand);padding:3px 8px;border-radius:3px;
  border-right:0;margin-right:2px;font-weight:600;letter-spacing:.1em;
}
.band-ai .sec-sub{color:#A7A9AC;margin:0 0 26px}
.band-ai h2::after{display:none}
.ai-facts{display:grid;gap:16px;margin-bottom:30px}
.ai-facts li{display:flex;gap:14px}
.ai-facts .ic{color:#F06B96;margin-top:2px}
.ai-facts b{display:block;font-size:.94rem;font-weight:550;color:#fff;margin-bottom:3px}
.ai-facts span{font-size:.85rem;color:#A7A9AC;line-height:1.5}

.band-ai-panel{position:relative;display:grid;gap:12px}
.aip{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
     border-radius:var(--r-md);padding:18px;backdrop-filter:blur(2px)}
.aip-h{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.aip-h b{font-size:.86rem;font-weight:550;color:#fff}
.live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6rem;
      letter-spacing:.12em;text-transform:uppercase;color:#F79CBA}
.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);
        box-shadow:0 0 0 0 rgba(215,14,82,.7);animation:livePulse 2.2s infinite}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(215,14,82,.65)}
  70%{box-shadow:0 0 0 7px rgba(215,14,82,0)}
  100%{box-shadow:0 0 0 0 rgba(215,14,82,0)}
}
.aip-key{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);
         font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-400)}
.aip-key em{width:14px;height:2px;border-radius:2px;display:block}
.k-a{background:var(--accent)}
.k-f{background:repeating-linear-gradient(90deg,#F79CBA 0 4px,transparent 4px 7px)}

.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .cg{stroke:rgba(255,255,255,.10);stroke-width:1}
.chart .cx{fill:var(--slate-400);font-family:var(--mono);font-size:9px;text-anchor:middle}
.chart .carea{opacity:0;transition:opacity .8s ease .35s}
.chart .cband{fill:rgba(247,156,186,.10);opacity:0;transition:opacity .8s ease .55s}
.chart .cline{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;
              stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;
              transition:stroke-dashoffset 1.5s cubic-bezier(.3,.8,.3,1)}
.chart .cfc{fill:none;stroke:#F79CBA;stroke-width:2;stroke-linecap:round;stroke-dasharray:5 5;
            opacity:0;transition:opacity .7s ease .9s}
.chart .cpk{fill:#fff;stroke:var(--accent);stroke-width:2.5;opacity:0;
            transition:opacity .5s ease 1.5s}
.reveal .carea,.reveal .cband,.reveal .cfc,.reveal .cpk{opacity:1}
.reveal .cline{stroke-dashoffset:0}

.aip-mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;
          padding-top:14px;border-top:1px solid rgba(255,255,255,.11)}
.aip-mets span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;
               text-transform:uppercase;color:var(--slate-400);margin-bottom:4px}
.aip-mets b{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:#fff;
            letter-spacing:-.03em;font-variant-numeric:tabular-nums}

.ai-feed{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
         border-radius:var(--r-md);padding:14px 16px 16px;position:relative;overflow:hidden}
.ai-feed-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ai-feed-h .ic{color:#F06B96}
.ai-feed-h b{font-size:.8rem;font-weight:550;color:#fff}
.ai-dots{margin-left:auto;display:flex;gap:5px}
.ai-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.24);padding:0;
        transition:background .2s,transform .2s}
.ai-dot.on{background:var(--accent);transform:scale(1.35)}
.ai-items{position:relative;min-height:82px}
.ai-item{position:absolute;inset:0;opacity:0;transform:translateY(8px);pointer-events:none;
         transition:opacity .45s ease,transform .45s ease}
.ai-item.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.ai-item-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.ai-item-h b{font-size:.85rem;font-weight:550;color:#fff}
.ai-item p{margin:0;font-size:.85rem;color:#A7A9AC;line-height:1.55}
.ai-item p b{color:#fff;font-weight:600}
.band-ai .chip-acc{background:rgba(215,14,82,.18);color:#F79CBA}
.band-ai .chip-warn{background:rgba(184,116,7,.22);color:#E8BC72}
.band-ai .chip-neg{background:rgba(215,14,82,.2);color:#F79CBA}
.band-ai .chip-pos{background:rgba(21,122,75,.24);color:#7FCFA5}

/* --- micro-motion -------------------------------------------------------- */
.trust li{transition:color .18s,transform .18s}
.trust li:hover{transform:translateY(-1px)}
.mod-chip{transition:border-color .16s,color .16s,background .16s,transform .16s}
.mod-chip:hover{transform:translateY(-1px)}
.arch-node{transition:border-color .16s,color .16s,transform .16s}
.arch-node:hover{border-color:var(--accent-line);color:var(--accent-ink);transform:translateY(-1px)}
.arch-core .arch-node:hover{border-color:rgba(247,156,186,.6);color:#fff}
.btn{position:relative}
.btn-accent .ic,.btn-primary .ic{transition:transform .18s}
.btn-accent:hover .ic,.btn-primary:hover .ic{transform:translateX(3px)}

@media (max-width:1080px){
  .band-ai-in{grid-template-columns:minmax(0,1fr);gap:38px}
}
@media (max-width:900px){
  .band-ai{padding:64px 0}
  .aip-mets{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .live i{animation:none}
  .ai-feed::before{animation:none;display:none}
  .chart .cline{stroke-dashoffset:0}
  .chart .carea,.chart .cband,.chart .cfc,.chart .cpk{opacity:1}
}



/* ==========================================================================
   Neutral surface system
   Reference: Dynamics 365 Business Central. White and light grey carry the
   page; crimson appears only on buttons, links and small accents. No tinted
   section backgrounds.
   ========================================================================== */
.hero{background:var(--white);border-bottom:1px solid var(--line-soft)}
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.sec{background:var(--white)}
.sec-alt{background:var(--n-50);border-top:1px solid var(--line-soft);
         border-bottom:1px solid var(--line-soft)}
.sec-tour{background:var(--white);border-top:1px solid var(--line-soft);
          border-bottom:1px solid var(--line-soft)}
.phero{background:var(--n-50);border-bottom:1px solid var(--line)}
.card{background:var(--white)}

/* the two remaining dark fields, both high-contrast */
.band-num{background:var(--ink-900)}
.band-ai{background:var(--ink-900);padding:88px 0;position:relative}
.band-cta{background:var(--ink-900);color:#fff}
.band-cta p{color:#C8CACD}
.band-cta .btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.band-cta .btn-accent:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.band-cta-alt a{color:#C8CACD}
.band-cta-alt a:hover{color:#fff}

/* readability on dark: body copy was too low-contrast against the panel */
.band-ai .sec-sub,.ai-facts span,.ai-item p{color:#C8CACD}
.aip-mets span,.aip-key,.chart .cx{fill:#9A9DA2;color:#9A9DA2}
.band-ai .aip,.band-ai .ai-feed{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.stat span{color:#B9BBBE}

/* --------------------------------------------------------------------------
   Typography: lighter, larger, calmer — closer to the reference
   -------------------------------------------------------------------------- */
h1{font-weight:600}
h2{font-weight:500;letter-spacing:-.022em}
.sec-head{max-width:760px;margin:0 auto 48px;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head .sec-sub{margin-left:auto;margin-right:auto}
.sec-head h2::after{margin-left:auto;margin-right:auto}
.split .sec-head,.split-wide .sec-head{margin-left:0;text-align:left}
.split .sec-head .eyebrow,.split-wide .sec-head .eyebrow{justify-content:flex-start}
.split .sec-head h2::after,.split-wide .sec-head h2::after{margin-left:0}
.split .sec-head .sec-sub,.split-wide .sec-head .sec-sub{margin-left:0}
.eyebrow{color:var(--slate-500)}
.eyebrow .num{color:var(--accent)}

/* --------------------------------------------------------------------------
   Cards: light, bordered, with a chevron affordance
   -------------------------------------------------------------------------- */
.card{border:1px solid var(--line);border-top:1px solid var(--line);
      border-radius:8px;padding:26px}
.card:hover{border-color:var(--slate-400);box-shadow:var(--sh-2)}
.grid .card,.grid .card:nth-child(3n),.grid .card:nth-child(3n+2){border-top:1px solid var(--line)}
.card .ic-lg,.mod-top .ic-lg{background:var(--accent-wash);color:var(--accent);
   border:0;padding:10px;border-radius:6px;box-sizing:content-box;width:24px;height:24px}
.grid .card:nth-child(3n+2) .ic-lg{background:var(--d4w);color:var(--d4)}
.grid .card:nth-child(3n) .ic-lg{background:var(--d2w);color:var(--d2)}
.mod-list .mod:nth-child(3n+2) .ic-lg{background:var(--d4w);color:var(--d4)}
.mod-list .mod:nth-child(3n) .ic-lg{background:var(--d2w);color:var(--d2)}
.card-proof{color:var(--slate-600) !important;font-weight:400}
a.card::after{content:"";display:block;margin-top:16px;width:20px;height:20px;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D70E52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  border-radius:50%;background-color:var(--accent-wash);transition:transform .16s}
a.card:hover::after{transform:translateX(4px)}

.cap{background:var(--white);border:1px solid var(--line);border-top:1px solid var(--line);
     border-radius:8px}
.cap:hover{border-color:var(--slate-400)}
.cap-h .ic{background:var(--accent-wash);color:var(--accent);box-sizing:content-box;padding:8px;border-radius:6px;width:20px;height:20px}
.cap:nth-child(3n+2) .cap-h .ic{background:var(--d4w);color:var(--d4)}
.cap:nth-child(3n) .cap-h .ic{background:var(--d2w);color:var(--d2)}
.cap li::before{background:var(--slate-400)}
.cap:nth-child(3n+2) li::before,.cap:nth-child(3n) li::before{background:var(--slate-400)}

.mod{border-radius:8px}
.quote-feat{border-left:1px solid var(--line);border-top:3px solid var(--accent);border-radius:8px}
.q,.na,.form,.arch,.spec,.frame,.aip,.ai-feed{border-radius:8px}
.led-n{background:var(--white);color:var(--accent);border:1px solid var(--line)}
.arch-fin .arch-lbl{background:var(--n-100);border-right-color:var(--line-soft)}
.arch-fin .arch-lbl b{color:var(--accent-ink)}
.arch-fin .arch-lbl span{color:var(--slate-500)}
.arch-fin .arch-node{background:var(--white);border-color:var(--accent-line);color:var(--accent-ink)}
.arch-core{background:var(--ink-800)}
.spec tr:nth-child(odd){background:var(--n-50)}

/* module chips return to a light treatment now the band is light */
.mod-chip{background:var(--white);border-color:var(--line);color:var(--ink-700)}
.mod-chip .ic{color:var(--accent)}
.mod-chip:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-ink)}

/* status chips, softened back */
.chip-neg{background:#FBEAEE;color:#A80B40}
.chip-warn{background:#FAF2E3;color:#8A6100}
.chip-pos{background:#E6F2EC;color:#15764A}
.chip-acc{background:#FCEAF0;color:#A80B40}

@media (max-width:900px){
  .sec-head{text-align:left;margin-left:0}
  .sec-head .eyebrow{justify-content:flex-start}
  .sec-head h2::after,.sec-head .sec-sub{margin-left:0}
}

/* ==========================================================================
   Immersive hero
   Reference: Acumatica / SAP. A deep field, a two-weight headline, and a
   tilted composition of real application screens that breaks out of the band.
   ========================================================================== */
.hero-dark{background:var(--ink-900);color:#C8CACD;border-bottom:0;padding-bottom:0;
           position:relative;overflow:visible}
.hero-dark .hero-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:40px;
                    padding-top:72px;padding-bottom:96px;align-items:center}
.hero-dark .hero-tag{color:#F79CBA;margin-bottom:16px}
.hero-dark h1{color:#fff;max-width:13ch;font-weight:700;letter-spacing:-.028em;
              line-height:1.08;font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem);margin-bottom:20px}
.hero-dark h1 .thin{font-weight:300;color:#9A9DA2}
.hero-dark .hero-lede{color:#B9BBBE;max-width:46ch;margin-bottom:28px}
.hero-dark .hero-facts{border-top:1px solid rgba(255,255,255,.14);
                       grid-template-columns:repeat(4,minmax(0,1fr));display:grid;gap:0}
.hero-dark .hero-facts div{border-right:1px solid rgba(255,255,255,.14);padding:0 16px;margin:0}
.hero-dark .hero-facts div:first-child{padding-left:0}
.hero-dark .hero-facts div:last-child{border-right:0}
.hero-dark .hero-facts b{color:#fff;font-size:1.35rem}
.hero-dark .hero-facts span{color:#8E9195}
.hero-dark .btn-onDark{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
.hero-dark .btn-onDark:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* the tilted stage */
.stage{position:relative;perspective:2000px}
.stage-main{transform:rotateY(-10deg) rotateX(2.5deg) rotateZ(.5deg);position:relative;z-index:1;
            box-shadow:0 40px 80px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.4);
            border-radius:8px;overflow:hidden}
.stage-float{position:absolute;transform:rotateY(-11deg) rotateX(3deg) rotateZ(.6deg);
             box-shadow:0 30px 60px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.35);border-radius:8px}
.sf-kpi{right:0;top:20%;width:min(368px,100%);z-index:3}
.sf-doc{left:0;bottom:-46px;width:min(296px,86%);z-index:4}

/* application chrome */
.app{display:grid;grid-template-columns:62px minmax(0,1fr);background:var(--white);
     font-size:.75rem;min-height:430px}
.app-rail{background:var(--ink-800);padding:9px 0;display:flex;flex-direction:column;gap:1px}
.rail-logo{width:26px;height:26px;margin:0 auto 12px;border-radius:5px;background:var(--accent);
           color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.rail-i{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;
        color:#8E9195}
.rail-i .ic{width:15px;height:15px}
.rail-i em{font-style:normal;font-size:.5rem;letter-spacing:.02em}
.rail-i.on{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 2px 0 0 var(--accent)}
.app-body{display:flex;flex-direction:column;min-width:0}
.app-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--n-100);
         border-bottom:1px solid var(--line)}
.crumbs{font-size:.68rem;color:var(--slate-500)}
.crumbs em{font-style:normal;color:var(--slate-400);margin:0 4px}
.app-acts{margin-left:auto;display:flex;gap:6px}
.app-acts b,.app-acts i{font-style:normal;font-size:.64rem;font-weight:500;padding:4px 9px;
                        border-radius:3px;border:1px solid var(--line);background:var(--white);
                        color:var(--slate-600)}
.app-acts b{background:var(--accent);border-color:var(--accent);color:#fff}
.app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
          padding:12px 14px 10px}
.app-head h4{font-size:.92rem;margin:0 0 2px}
.app-id{font-family:var(--mono);font-size:.6rem;color:var(--slate-400);letter-spacing:.04em}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 14px}
.fld label{display:block;font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;
           color:var(--slate-400);font-family:var(--mono)}
.fld span{font-size:.68rem;color:var(--ink-800)}
.app-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line)}
.app-tabs b,.app-tabs i{font-style:normal;font-size:.68rem;font-weight:450;padding:7px 11px;
                        color:var(--slate-500)}
.app-tabs b{color:var(--ink-900);font-weight:550;box-shadow:inset 0 -2px 0 var(--accent)}
.app-content{padding:12px 14px;display:grid;gap:8px}

/* floating cards */
.kpi-card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.kpi-t{border:1px solid var(--line-soft);border-top:2px solid var(--slate-400);border-radius:3px;
       padding:8px 6px;background:var(--white);text-align:center}
.kpi-t b{display:block;font-family:var(--mono);font-size:.72rem;font-weight:600;
         letter-spacing:-.03em;color:var(--ink-900);font-variant-numeric:tabular-nums;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-t span{display:block;font-size:.48rem;color:var(--slate-500);line-height:1.25;margin-top:3px}
.kpi-t.d1{border-top-color:var(--d1)} .kpi-t.d2{border-top-color:var(--d2)}
.kpi-t.d3{border-top-color:var(--d3)} .kpi-t.d4{border-top-color:var(--d4)}
.kpi-t.d5{border-top-color:var(--d5)} .kpi-t.d6{border-top-color:var(--d6)}
.bar-fill.d1{background:var(--d1)} .bar-fill.d2{background:var(--d2)}
.bar-fill.d3{background:var(--d3)} .bar-fill.d4{background:var(--d4)}
.bar-fill.d6{background:var(--d6)}
.doc-card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:12px;
          font-size:.75rem}
.doc-h{display:flex;align-items:center;gap:7px;margin-bottom:8px;padding-bottom:8px;
       border-bottom:1px solid var(--line-soft)}
.doc-h .ic{color:var(--accent);width:15px;height:15px}
.doc-h b{font-size:.78rem}
.doc-h span{margin-left:auto;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;
            text-transform:uppercase;color:var(--accent)}

/* the trust strip sits directly under the dark hero */

/* Floats sit inside the stage column by default and only hang past it on wide
   viewports, where the page margin can absorb them. This is what was slicing
   the exception card at intermediate widths. */
.hero-dark{overflow-x:clip}
@media (min-width:1400px){
  .sf-kpi{right:-52px}
  .sf-doc{left:-48px}
}
@media (max-width:1199px){
  /* the rotated projection is wider than the element box, so below the width
     where there is room for a tilt, the composition sits flat */
  .stage-main,.stage-float{transform:none}
  .sf-kpi{top:22%;width:min(330px,100%)}
  .sf-doc{bottom:-38px;width:min(256px,86%)}
}
@media (max-width:1080px){
  .hero-dark .hero-in{grid-template-columns:minmax(0,1fr);gap:56px;padding-top:56px;padding-bottom:80px}
  .hero-dark h1{max-width:20ch}
  .stage{margin-right:0}
  .sf-kpi{right:0;top:auto;bottom:-30px;width:min(320px,100%)}
  .sf-doc{display:none}
}
@media (max-width:760px){
  .stage-main,.stage-float{transform:none;box-shadow:var(--sh-3)}
  .sf-kpi{position:static;width:auto;margin-top:12px}
  .app{grid-template-columns:48px minmax(0,1fr)}
  .rail-i em{display:none}
  .fields{display:none}
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-dark .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
  .hero-dark .hero-facts div:nth-child(2n){border-right:0}
  .hero-dark .hero-facts div:nth-child(2n+1){padding-left:0}
}

/* ==========================================================================
   Density and colour without photography
   No images available, so weight is carried by solid colour panels, a larger
   type scale and oversized figures.
   ========================================================================== */

/* --- hero: dark field, browser-window composition ------------------------ */
.hero-dark .mockstack{padding-bottom:96px}
.hero-dark .frame{border-color:rgba(255,255,255,.14)}
.hero-dark .mock-behind{opacity:.34;filter:saturate(.25);right:-40px;top:-38px;width:78%}
.hero-dark .mock-float{border-color:var(--line)}

/* --- larger type ---------------------------------------------------------- */
h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);font-weight:600;letter-spacing:-.026em}
.sec-head{margin-bottom:44px}
.sec-sub{font-size:1.1rem}
.eyebrow{font-size:.74rem;margin-bottom:16px}
.eyebrow .num{font-size:1.05rem;font-weight:600;padding-right:12px}
.sec{padding:80px 0}

/* --- industry cards: solid colour panels --------------------------------- */
.icard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
       border-radius:8px;overflow:hidden;color:var(--ink-800);
       transition:box-shadow .18s,transform .18s,border-color .18s}
.icard:hover{text-decoration:none;box-shadow:var(--sh-2);transform:translateY(-3px);
             border-color:var(--slate-400)}
.icard-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
           background:var(--c);color:#fff}
.icard-top .ic-lg{color:#fff;width:26px;height:26px}
.icard-top::after{content:"";width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.18) no-repeat center/13px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  transition:transform .18s}
.icard:hover .icard-top::after{transform:translateX(4px)}
.icard-body{padding:20px 22px 22px;display:block}
.icard-body h3{font-size:1.08rem;margin-bottom:8px;letter-spacing:-.022em}
.icard-body p{margin:0;font-size:.92rem;color:var(--slate-600);line-height:1.55}
.icard-proof{display:block;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);
             font-size:.83rem;color:var(--ink-800);font-weight:500}
.icard.c1{--c:var(--d1)} .icard.c2{--c:var(--d4)} .icard.c3{--c:var(--d2)}
.icard.c4{--c:var(--d3)} .icard.c5{--c:var(--d5)}

/* --- customer story: typography instead of a photograph ------------------ */
.band-story{background:var(--ink-900);color:#C8CACD;padding:76px 0}
.band-story-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;
               align-items:center}
.band-story .eyebrow{color:var(--slate-400)}
.band-story .eyebrow .num{color:#fff;background:var(--accent);padding:3px 9px;border-radius:3px;
                          border-right:0;font-size:.72rem;letter-spacing:.1em}
.band-story blockquote{margin:0 0 22px;color:#fff;font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.5rem);line-height:1.22;letter-spacing:-.028em}
.band-story blockquote::before{content:"\201C"}
.band-story blockquote::after{content:"\201D"}
.story-by{display:flex;align-items:center;gap:12px;margin:0 0 28px}
.story-by b{color:#fff;font-size:.98rem;font-weight:550}
.story-by i{width:1px;height:16px;background:rgba(255,255,255,.28);display:block}
.story-by span{font-size:.9rem;color:#9A9DA2}
.story-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
            background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:8px}
.story-figs div{background:var(--ink-900);padding:22px 20px}
.story-figs b{display:block;font-family:var(--mono);font-size:2.1rem;font-weight:600;color:#fff;
              letter-spacing:-.05em;line-height:1;margin-bottom:9px;font-variant-numeric:tabular-nums}
.story-figs div:nth-child(1) b{color:#F79CBA}
.story-figs div:nth-child(2) b{color:#8FA3E8}
.story-figs div:nth-child(3) b{color:#6FC5C0}
.story-figs div:nth-child(4) b{color:#E8B667}
.story-figs span{font-size:.82rem;color:#9A9DA2;line-height:1.5}

/* --- client names read as a wall, not a sentence -------------------------- */
.trust{padding:0}
.trust-in{gap:0;align-items:stretch}
.trust p{align-self:center;padding:20px 26px 20px 0;max-width:150px}
.trust ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
          background:var(--line-soft);border-left:1px solid var(--line-soft)}
.trust li{background:var(--white);display:flex;align-items:center;justify-content:center;
          padding:18px 10px;font-size:.92rem;font-weight:600;letter-spacing:-.02em;
          color:var(--slate-500);text-align:center;transition:color .18s,background .18s}
.trust li:hover{color:var(--ink-900);background:var(--n-50);transform:none}

/* --- stats band, larger ---------------------------------------------------- */
.band-num{padding:64px 0}
.stat b{font-size:clamp(1.8rem,1.2rem + 1.9vw,2.7rem)}

@media (max-width:1080px){
  .band-story-in{grid-template-columns:minmax(0,1fr);gap:36px}
  .trust ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .trust p{max-width:none;flex:1 1 100%;padding:16px 0 12px}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;
            border-top:1px solid var(--line-soft)}
  .story-figs{grid-template-columns:minmax(0,1fr)}
  .band-story{padding:56px 0}
}

/* server-side failure message on the demo form */
.form-err{margin:14px 0 0;padding:12px 14px;border-radius:var(--r);background:#FBEAEE;
          border:1px solid #F3BFD1;color:#A80B40;font-size:.88rem}

/* review build marker — delete this rule and the span in template.py at go-live */
.build{margin-left:10px;padding:2px 7px;border-radius:3px;background:rgba(255,255,255,.08);
       font-family:var(--mono);font-size:.68rem;color:#8E9195;letter-spacing:.04em}

/* ---------------------------------------------------------------------------
   Sector cards: the coloured bar now carries the sector name, so it reads as a
   header rather than an empty band with an icon floating in it.
   --------------------------------------------------------------------------- */
.icard-top{align-items:center;gap:12px;padding:16px 20px}
.icard-top h3{margin:0;color:#fff;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;
              flex:1;min-width:0}
.icard-top .ic-lg{flex:none;width:22px;height:22px}
.icard-top::after{flex:none;width:24px;height:24px;background-size:11px}
.icard-body{padding:20px}
.icard-body p{margin:0}

/* ---------------------------------------------------------------------------
   Functional coverage: the bullets sat hard against the card edge and the dot
   was not on the same optical line as the first row of text.
   --------------------------------------------------------------------------- */
.cap{padding:22px 24px 24px}
.cap ul{gap:10px}
.cap li{padding-left:20px;line-height:1.55}
.cap li::before{top:.62em;width:5px;height:5px;left:2px}
.cap-h{align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;
       border-bottom:1px solid var(--line-soft)}
.cap-h h3{font-size:1.02rem;line-height:1.25}

/* testimonial byline with an avatar, or initials when none is uploaded */
.tm-by{display:flex;align-items:center;gap:12px}
.tm-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:block}
.tm-av-i{display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-ink);
         font-weight:700;font-size:.95rem;letter-spacing:.02em;font-family:var(--sans)}
.tm-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.tm-who b{font-size:.95rem;font-weight:600;color:var(--ink-900)}
.tm-who span{font-size:.85rem;color:var(--slate-500)}
.quote-feat .tm-av{width:52px;height:52px}
.cl em{font-style:normal;color:var(--slate-500);font-size:.86em}

/* Byline spacing: the name and the role were running together when the flex
   column was not applied. Belt and braces so it reads correctly regardless. */
.quote-by.tm-by{align-items:center;gap:14px}
.tm-by .tm-who{display:flex;flex-direction:column;gap:2px;line-height:1.35;min-width:0}
.tm-by .tm-who b{display:block;font-size:.95rem;font-weight:600;color:var(--ink-900)}
.tm-by .tm-who > span{display:block;font-size:.85rem;color:var(--slate-500)}

/* A flex container wraps loose text in an anonymous item and trims the trailing
   whitespace, so a literal space in the markup disappears. Space these with the
   box model instead of relying on a character that will not survive. */
.cl{gap:0}
.cl em{margin-left:6px}

/* legal pages: the effective date, set apart from the body text */
.legal-date{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--slate-500);
            padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--line)}

/* legal pages: tables and denser prose */
.prose{max-width:76ch}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.92rem;
             border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.legal-table th{text-align:left;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
                color:var(--slate-500);background:var(--n-50);padding:10px 14px;font-weight:600;
                border-bottom:1px solid var(--line)}
.legal-table td{padding:10px 14px;border-bottom:1px solid var(--line-soft);
                color:var(--slate-600);vertical-align:top}
.legal-table tr:last-child td{border-bottom:0}
.legal-table td[colspan]{background:var(--n-50);color:var(--ink-800);font-size:.86rem}
.prose code{background:var(--n-100);padding:2px 6px;border-radius:3px;font-family:var(--mono);
            font-size:.86em;color:var(--ink-800)}
.prose h2{padding-top:8px;border-top:1px solid var(--line-soft);margin-top:42px}
.prose h2:first-of-type{border-top:0;padding-top:0}
.prose ul{margin-bottom:18px}
@media(max-width:640px){
  .legal-table,.legal-table thead,.legal-table tbody,.legal-table tr,.legal-table th,
  .legal-table td{display:block;width:100%}
  .legal-table thead{display:none}
  .legal-table tr{border-bottom:1px solid var(--line);padding:4px 0}
  .legal-table td{border-bottom:0;padding:5px 12px}
}

/* ---------------------------------------------------------------------------
   Long enquiry form: broken into numbered sections so thirteen fields plus a
   module grid does not read as a wall.
   --------------------------------------------------------------------------- */
.form-lg{padding:0}
.fs{border:0;border-top:1px solid var(--line-soft);margin:0;padding:24px 26px 6px}
.fs:first-of-type{border-top:0;padding-top:26px}
.fs legend{display:flex;align-items:center;gap:10px;padding:0;margin-bottom:18px;
           font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--ink-900)}
.fs-n{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
      display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;font-weight:600}
.fs-note{margin:-8px 0 16px;font-size:.86rem;color:var(--slate-500)}
.form-lg .form-err,.form-lg .form-note,.form-lg .form-ok{margin-left:26px;margin-right:26px}
.form-lg .btn-block{width:calc(100% - 52px);margin:14px 26px 0}
.form-lg .form-note{margin-bottom:26px}

/* module checkboxes, grouped */
.modwrap{margin-bottom:4px}
.modgroup + .modgroup{margin-top:22px}
.modgroup-h{margin:0 0 10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
            text-transform:uppercase;color:var(--slate-500);padding-bottom:8px;
            border-bottom:1px solid var(--line-soft)}
.modgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.modchk{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border:1px solid transparent;
        border-radius:var(--r);cursor:pointer;transition:background .12s,border-color .12s}
.modchk:hover{background:var(--n-50);border-color:var(--line)}
.modchk input{margin:1px 0 0;accent-color:var(--accent);width:16px;height:16px;flex:none}
.modchk span{font-size:.87rem;line-height:1.4;color:var(--slate-600)}
.modchk:has(input:checked){background:var(--accent-wash);border-color:var(--accent-line)}
.modchk:has(input:checked) span{color:var(--accent-ink);font-weight:500}
.modchk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modcount{margin:16px 0 0;font-size:.82rem;color:var(--accent-ink);font-weight:500}

}
@media(max-width:720px){
  .fs{padding:20px 18px 4px}
  .form-lg .form-err,.form-lg .form-note,.form-lg .form-ok{margin-left:18px;margin-right:18px}
  .form-lg .btn-block{width:calc(100% - 36px);margin-left:18px;margin-right:18px}
}

/* Turnstile widget, only present when it is configured */
.ts-wrap{margin:4px 26px 0}
.ts-note{margin:8px 0 0;font-size:.76rem;color:var(--slate-500);line-height:1.5}
.ts-note a{color:var(--accent-ink)}
@media(max-width:720px){.ts-wrap{margin-left:18px;margin-right:18px}}

/* ---------------------------------------------------------------------------
   Enquiry layout: the form is the job, so it gets the room. The contact column
   sticks rather than leaving a tall empty gutter beside a long form.
   --------------------------------------------------------------------------- */
#demo .split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px}
#demo .split > div:first-child{position:sticky;top:96px;align-self:start}
#demo .ct-list{margin-top:4px}
#demo .ct{padding:14px 16px}
#demo .ct p{font-size:.86rem}
#demo .ct b{font-size:.8rem}

/* form sections: rules rather than boxes, so four sections do not read as four cards */
.form-lg{padding:0;border-radius:10px}
.fs{border:0;border-top:1px solid var(--line-soft);margin:0;padding:26px 28px 8px}
.fs:first-of-type{border-top:0}
.fs legend{display:flex;align-items:center;gap:10px;padding:0;margin-bottom:4px;
           font-size:1rem;font-weight:600;letter-spacing:-.018em;color:var(--ink-900);width:100%}
.fs-n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;flex:none;
      display:grid;place-items:center;font-family:var(--mono);font-size:.68rem;font-weight:600}
.fs > .f-row:first-of-type,.fs > .f:first-of-type{margin-top:16px}
.fs-note{margin:8px 0 18px;font-size:.85rem;color:var(--slate-500);line-height:1.5}
.f-row{gap:14px 18px}
.f{margin-bottom:14px}
.form-lg .form-err,.form-lg .form-note,.form-lg .form-ok{margin-left:28px;margin-right:28px}
.form-lg .btn-block{width:calc(100% - 56px);margin:18px 28px 0}
.form-lg .form-note{margin-bottom:28px}
.ts-wrap{margin:14px 28px 0}

@media(max-width:1080px){
  #demo .split{grid-template-columns:minmax(0,1fr);gap:32px}
  #demo .split > div:first-child{position:static}
}
@media(max-width:760px){
  .modgrid{grid-template-columns:minmax(0,1fr)}
  .fs{padding:20px 18px 4px}
  .form-lg .form-err,.form-lg .form-note,.form-lg .form-ok{margin-left:18px;margin-right:18px}
  .form-lg .btn-block{width:calc(100% - 36px);margin-left:18px;margin-right:18px}
  .ts-wrap{margin-left:18px;margin-right:18px}
}

/* ---------------------------------------------------------------------------
   The column beside the enquiry form. It exists to answer "what am I signing
   up for" before someone commits to thirteen fields.
   --------------------------------------------------------------------------- */
.daside{display:grid;gap:14px}
.dcard{border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:var(--white)}
.dcard-h{margin:0 0 16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
         text-transform:uppercase;color:var(--slate-500)}
.dcard-steps{background:var(--n-50)}

.dsteps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.dsteps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;position:relative;
           padding-bottom:20px}
.dsteps li::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:1px;
                   background:var(--line)}
.dsteps li:last-child{padding-bottom:0}
.dsteps li:last-child::before{display:none}
.dstep-n{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;
         display:grid;place-items:center;font-family:var(--mono);font-size:.76rem;font-weight:600;
         z-index:1}
.dsteps li > div > b{display:block;font-size:.93rem;font-weight:600;color:var(--ink-900);
          margin-bottom:3px;line-height:1.35}
.dsteps li > div > span{display:block;font-size:.85rem;color:var(--slate-600);line-height:1.5}
.dnote{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);display:flex;
       align-items:center;gap:7px;font-size:.79rem;color:var(--slate-500)}

.dcontact{display:grid;gap:2px}
.dcontact a{display:flex;align-items:center;gap:13px;padding:11px 12px;margin:0 -12px;
            border-radius:var(--r-md);color:var(--ink-800)}
.dcontact a:hover{background:var(--n-50);text-decoration:none}
.dcontact .ic{color:var(--accent);flex:none}
.dcontact b{display:block;font-size:.92rem;font-weight:600}
.dcontact em{display:block;font-style:normal;font-size:.79rem;color:var(--slate-500)}

.dstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:18px}
.dstats div{padding-right:12px;border-right:1px solid var(--line)}
.dstats div:last-child{border-right:0;padding-right:0}
.dstats b{display:block;font-family:var(--mono);font-size:1.35rem;font-weight:600;
          letter-spacing:-.04em;color:var(--ink-900);line-height:1}
.dstats span{display:block;margin-top:5px;font-size:.75rem;color:var(--slate-500);line-height:1.35}

.dquote{margin:0;padding-top:18px;border-top:1px solid var(--line)}
.dquote blockquote{margin:0 0 14px;font-size:.92rem;line-height:1.55;color:var(--ink-700)}
.dquote blockquote::before{content:"\201C"}
.dquote blockquote::after{content:"\201D"}
.dquote figcaption{display:flex;align-items:center;gap:11px}
.dquote .tm-av{width:38px;height:38px}
.dquote b{display:block;font-size:.87rem;font-weight:600}
.dquote em{display:block;font-style:normal;font-size:.79rem;color:var(--slate-500)}

.dloc{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.dloc:last-child{border-bottom:0;padding-bottom:0}
.dloc:first-of-type{padding-top:0}
.dloc .ic{color:var(--accent);flex:none;margin-top:2px}
.dloc b{display:block;font-size:.85rem;font-weight:600;margin-bottom:2px}
.dloc span{font-size:.85rem;color:var(--slate-600);line-height:1.5}
.dloc a{display:inline-block;margin-top:4px;font-size:.82rem}

/* the column is now tall enough to stand on its own — no sticky needed */
#demo .split > div:first-child{position:static}
#demo .ct-list{display:none}

@media(max-width:1080px){
  .dstats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* the priority-ordered mobile list beside the enquiry form */
.dwa{display:flex;align-items:flex-start;gap:13px;padding:11px 12px;margin:0 -12px}
.dwa > .ic{color:var(--accent);flex:none;margin-top:2px}
.dwa > span{display:block;min-width:0;flex:1}
.dwa b{display:block;font-size:.92rem;font-weight:600;color:var(--ink-800)}
.dwa em{display:block;font-style:normal;font-size:.79rem;color:var(--slate-500);margin-bottom:8px}
.walist{display:grid;gap:1px}
.walist a{display:flex;align-items:center;gap:8px;padding:7px 9px;margin:0 -9px;
          border-radius:var(--r-md);font-size:.9rem;font-weight:500;color:var(--ink-800);
          font-family:var(--mono);letter-spacing:-.01em}
.walist a:hover{background:var(--accent-wash);color:var(--accent-ink);text-decoration:none}
.walist .ic{color:var(--accent);flex:none}