/* Self-hosted fonts: variable-weight woff2, latin subset, downloaded from the
     Google Fonts CDN once and served from our own origin. One file per family
     covers every weight the site uses, the CSP needs no external origin, and
     no visitor IP reaches Google. The unicode-range means any glyph outside
     latin (e.g. the → arrows in .loop) falls back to the system stack, which
     is fine. Preloaded in inc/header.php — keep these URLs in sync with it. */
  @font-face{
    font-family:'Plus Jakarta Sans';
    font-style:normal;
    font-weight:500 800;
    font-display:swap;
    src:url('/assets/fonts/plus-jakarta-sans-var-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'IBM Plex Sans';
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url('/assets/fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* MobiLearn v2 brand palette, sampled from mobilearn.io: red #DB102A, ink #171717, white ground.
     Deliberately single-theme: this is a website template and must render identically for every viewer. */
  :root{
    --paper:#FFFFFF; --paper-2:#F7F6F4; --paper-3:#F1EFEC;
    --ink:#171717; --ink-soft:#2E2E2E; --muted:#5B5B5B; --faint:#6E6B69;
    --red:#DB102A; --red-deep:#B60D23; --red-tint:#FDECEE;
    --rule:#E6E4E0; --rule-2:#D8D5D0;
    --ok:#1E7A4D; --warn:#B8860B; --bad:#C0442A;
    --display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
    --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
    --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    --plus-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='5' y='0' width='2' height='12'/%3E%3Crect x='0' y='5' width='12' height='2'/%3E%3C/svg%3E");
    --minus-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='0' y='5' width='12' height='2'/%3E%3C/svg%3E");
    --shadow:0 18px 50px rgba(23,23,23,.10);
    --shadow-sm:0 6px 18px rgba(23,23,23,.07);
  }
  *{box-sizing:border-box}
  /* Grid children default to min-width:auto, which makes them refuse to shrink and
     pushes the page wider than the viewport. Force them to be shrinkable. */
  .proof-grid > *, .stats > *, .probs > *, .svcs > *, .prices > *, .f-grid > *,
  .hero-grid > *, .cap > *, .stats, .row > *{min-width:0}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.62; -webkit-font-smoothing:antialiased}
  img,svg{max-width:100%}
  h1,h2,h3,h4{font-family:var(--display); line-height:1.1; margin:0; letter-spacing:-.02em; text-wrap:balance}
  p{margin:0 0 1rem; text-wrap:pretty}
  a{color:inherit}
  .wrap{max-width:1220px; margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem)}

  /* Buttons */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--display); font-weight:700; font-size:.95rem; text-decoration:none; padding:.85rem 1.6rem; border-radius:6px; border:2px solid transparent; cursor:pointer; transition:background .18s,color .18s,border-color .18s}
  .btn-red{background:var(--red); color:#fff; border-color:var(--red)}
  .btn-red:hover{background:var(--red-deep); border-color:var(--red-deep)}
  .btn-line{background:transparent; color:var(--ink); border-color:var(--rule-2)}
  .btn-line:hover{border-color:var(--ink)}
  .btn-white{background:#fff; color:var(--red-deep); border-color:#fff}
  .btn-white:hover{background:transparent; color:#fff; border-color:#fff}
  .btn-ghost-w{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
  .btn-ghost-w:hover{border-color:#fff; background:rgba(255,255,255,.1)}
  /* A row of buttons. The gap is the point: it survives the wrap. These used
     to be inline-flex buttons in a paragraph held apart by margin-right
     alone, so on a phone — where the row becomes a column — the two sat edge
     to edge with nothing between them. .8rem matches .hero-ctas and .cta-row,
     which were already flex, so every button row on the site now measures the
     same in both directions. */
  .btn-row{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem}
  :focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:3px}
  /* The CTA band is brand red, so a red ring is invisible on it (1.00:1).
     White ring plus a dark halo keeps it visible on any of the band's tones. */
  .cta :focus-visible{outline-color:#fff; box-shadow:0 0 0 6px rgba(23,23,23,.45)}

  /* Header */
  .hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
  .hdr-in{display:flex; align-items:center; gap:1.5rem; max-width:1300px; margin:0 auto; padding:.75rem clamp(1rem,4vw,2.5rem)}
  .logo{font-family:var(--display); font-weight:800; font-size:1.4rem; text-decoration:none; letter-spacing:-.03em; color:var(--ink);
        display:inline-flex; align-items:flex-start; gap:.1em}
  .logo b{color:var(--red); font-weight:800}
  /* Trademark mark. Sized and lifted relative to the logo rather than in
     absolute units, so it stays optically right beside both the image logo in
     the header and the text wordmark in the footer. At .84em it is twice the
     size it started at; the lift shrinks to match, because a larger mark needs
     less of a raise to read as a superscript rather than as floating away. */
  .logo .tm{font-size:.84em; font-weight:700; line-height:1; letter-spacing:0;
        margin-top:.06em; flex:none}
  .nav{display:flex; gap:1.4rem; margin-left:auto}
  .nav a{text-decoration:none; font-size:.93rem; font-weight:500; color:var(--ink-soft); padding:.35rem 0; border-bottom:2px solid transparent}
  .nav a:hover{color:var(--red-deep); border-bottom-color:var(--red)}
  .hdr-cta{display:flex; align-items:center; gap:.9rem; margin-left:1.1rem}
  .hdr-cta .login{text-decoration:none; font-size:.93rem; color:var(--muted)}
  .hdr-cta .login:hover{color:var(--ink)}
  .hdr-cta .btn{padding:.58rem 1.15rem; font-size:.88rem}
  .menu-btn{display:none; margin-left:auto; background:none; border:2px solid var(--rule-2); border-radius:5px; color:var(--ink); font-family:var(--display); font-weight:700; padding:.45rem .85rem; cursor:pointer}
  @media (max-width:1080px){
    .nav,.hdr-cta{display:none}
    .menu-btn{display:block}
    /* The open menu is one absolutely positioned panel containing both the nav
       and the CTAs, laid out in normal flow inside it. The previous version
       positioned them separately and pushed the CTA block down by a hardcoded
       17.2rem, which encoded a guess at the number of nav links: with the seven
       the config actually ships, the panel covered the last item entirely. */
    .hdr.open{padding-bottom:0}
    .hdr.open .hdr-in{flex-wrap:wrap}
    .hdr.open .nav,
    .hdr.open .hdr-cta{position:static; width:100%; background:#fff; margin:0}
    .hdr.open .nav{display:flex; flex-direction:column; gap:0; order:3;
        padding:.6rem 0 .2rem; border-top:1px solid var(--rule)}
    .hdr.open .nav a{padding:.7rem 0; font-size:1.02rem; border-bottom:1px solid var(--rule)}
    .hdr.open .hdr-cta{display:flex; order:4; gap:1rem; align-items:center;
        padding:.9rem 0 1rem; margin-left:0}
    .hdr.open .hdr-cta .btn{flex:1 1 auto; text-align:center}
  }

  /* Hero */
  .hero{background:linear-gradient(180deg,#fff 0%, var(--paper-2) 100%); border-bottom:1px solid var(--rule); overflow:hidden}
  /* The top padding is the fold's biggest single lever, and it is capped
     rather than left to scale with the viewport: on a laptop the sticky header
     plus a generous lead-in used to push the note under the fold, and the note
     is the line that says what the demo actually is. Reviewed at 1280x720,
     1366x768, 1440x900, 1536x864 and 1920x1080; the bottom padding is below
     the note and does not count against it, so it keeps its original value. */
  .hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding:clamp(2rem,4.4vw,2.8rem) 0 clamp(2rem,4vw,3rem)}
  @media (max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:2rem} }
  /* The lead line IS the headline and is set at full size; the rotating
     promise sits slightly below it. It used to be the other way round, which
     made the fixed half of the sentence look like a caption on the moving
     half. */
  .hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem); font-weight:800}
  .hero h1 .lead-line{display:block; font-size:1em; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.1; margin-bottom:.5rem; max-width:22ch}
  .promise-slot{display:block; font-size:.78em; font-weight:700; line-height:1.18; color:var(--red); min-height:2.5em}
  .promise-slot span{display:none}
  .promise-slot span.on{display:inline}
  .hero-sub{font-size:1.06rem; color:var(--muted); max-width:46ch; margin:.95rem 0 1.3rem}
  .hero-ctas{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}
  .hero-note{font-size:.83rem; color:var(--faint); margin:.75rem 0 0}
  /* Short laptop folds. A 768-tall screen minus the OS bar and the browser's
     own toolbars leaves the page under 600px, and at the h1's full display
     scale the hero note lands below that fold (measured 668px to its bottom
     at 1366 wide against a 578px viewport). Height-gated so the approved
     full-size hero is untouched wherever the note already fits; width-gated
     so the stacked phone layout keeps its own scale. Reviewed at 1366x578. */
  @media (min-width:941px) and (max-height:700px){
    .hdr-in{padding-top:.55rem; padding-bottom:.55rem}
    .hero h1{font-size:clamp(1.9rem,3.1vw,2.45rem)}
    .hero h1 .lead-line{margin-bottom:.35rem}
    .hero-grid{padding-top:.9rem}
    .hero-sub{margin:.7rem 0 .9rem}
    .hero-note{margin-top:.5rem}
  }
  .hero-langs{padding:clamp(1.6rem,3vw,2.2rem) 0 clamp(2rem,4vw,2.8rem);
        border-top:1px solid var(--rule)}
  .trust{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:1.7rem; padding-top:1.3rem; border-top:1px solid var(--rule)}
  .trust-item{display:flex; align-items:center; gap:.55rem; font-size:.83rem; color:var(--muted)}
  .trust-item b{font-family:var(--display); font-size:1.02rem; color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums}
  .tick{color:var(--red); flex:none}

  /* Product carousel */
  /* A soft panel behind the screens, so the illustrative UI reads as one
     object sitting on a surface rather than as white cards floating on the
     hero's white-to-grey gradient. */
  .stage{position:relative; padding:clamp(1.1rem,2.4vw,1.9rem);
        padding-bottom:clamp(1.9rem,3vw,2.6rem);
        background:var(--paper-3); border:1px solid var(--rule);
        border-radius:16px}
  .app{background:#fff; border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
  .app-bar{display:flex; align-items:center; gap:.4rem; padding:.6rem .9rem; border-bottom:1px solid var(--rule); background:var(--paper-2)}
  .app-bar i{width:.55rem; height:.55rem; border-radius:50%; background:var(--rule-2); display:block}
  .app-bar .url{font-family:var(--mono); font-size:.66rem; color:var(--faint); margin-left:.45rem}
  .slides{position:relative; min-height:320px}
  .slide{position:absolute; inset:0; padding:1.1rem 1.2rem; opacity:0; transition:opacity .9s ease; pointer-events:none}
  .slide.on{position:relative; opacity:1; pointer-events:auto}
  .s-head{display:flex; justify-content:space-between; align-items:center; gap:.8rem; margin-bottom:.9rem}
  .s-head h3{font-size:.98rem; font-weight:700}
  .pill{font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--red-deep); background:var(--red-tint); padding:.2rem .55rem; border-radius:3px; white-space:normal; display:inline-block}
  .row{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.6rem .75rem; border:1px solid var(--rule); border-radius:7px; margin-bottom:.5rem; font-size:.83rem; background:#fff}
  .row small{display:block; color:var(--faint); font-size:.72rem; margin-top:.1rem}
  .row .val{font-family:var(--display); font-weight:700; color:var(--red-deep); font-variant-numeric:tabular-nums; white-space:nowrap}
  .row .val.plain{color:var(--ink)}
  .bar{height:.42rem; background:var(--paper-3); border-radius:3px; overflow:hidden; flex:1; max-width:150px}
  .bar i{display:block; height:100%; background:var(--red); border-radius:3px}
  .bar.mid i{background:var(--warn)} .bar.low i{background:var(--bad)} .bar.ok i{background:var(--ok)}
  .illus{font-size:.68rem; color:var(--faint); border-top:1px solid var(--rule); padding:.55rem 1.2rem .75rem; background:var(--paper-2)}

  /* Phone overlay with presenter placeholder */
  .phone{position:absolute; right:.6rem; bottom:-2.2rem; width:124px; border-radius:16px; border:5px solid var(--ink); background:var(--ink); box-shadow:0 16px 34px rgba(23,23,23,.24); overflow:hidden; z-index:3}
  @media (max-width:940px){ .phone{width:104px; right:.2rem; bottom:-1.2rem} }
  .phone .scr{background:#fff; border-radius:10px; overflow:hidden}
  .vid{position:relative; aspect-ratio:9/13; background:linear-gradient(160deg,#F1EFEC,#DDD9D4); display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
  .vid svg{position:absolute; bottom:0; width:100%; height:auto; display:block}
  .vid .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 3px 10px rgba(0,0,0,.25)}
  .vid .play::after{content:""; border-left:7px solid #fff; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; margin-left:2px}
  .vid .ph-tag{position:absolute; top:5px; left:5px; right:5px; font-family:var(--display); font-size:.42rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(23,23,23,.62); padding:.14rem .3rem; border-radius:2px; text-align:center; z-index:2; line-height:1.25}
  .phone .cap{padding:.4rem .45rem .5rem; font-size:.52rem; line-height:1.35; color:var(--ink)}
  .phone .cap b{display:block; font-family:var(--display); font-size:.55rem; font-weight:700}
  .phone .cap span{color:var(--faint)}

  /* Promise chips (the shifting buttons) */
  /* The chips are plain buttons with aria-pressed (index.php explains why the
     tab pattern was dropped). aria-selected here was a leftover from that
     pattern and never matched, so no chip highlighted and the progress bar
     below never ran. */

  /* Client logo belt, under the hero.
     Replaces a placeholder strip of dashed chips that no page ever rendered.
     The markup is built by client_logos() in inc/components.php, which also
     documents the loop: two identical sets side by side, travelling exactly
     one set width, so the restart lands on the same frame and the seam never
     shows. Everything here is written per-set rather than per-item, so the
     rules hold whether the belt carries four logos or forty.

     White rather than the hero's closing grey: a logo wall is the one place
     on the page where the background should get out of the way, and most
     brand marks are drawn to sit on white. */
  .clients{background:var(--paper); border-bottom:1px solid var(--rule);
        padding:clamp(1.5rem,3vw,2.1rem) 0}
  .clients-h{margin:0 0 clamp(1rem,2vw,1.3rem); font-family:var(--display); font-weight:700;
        font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
  /* The mask fades both ends so logos enter and leave instead of being
     guillotined at the edge. Two properties, because Safari still wants the
     prefix. */
  .clients-belt{overflow:hidden;
        -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
        mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  /* --clients-secs is set per belt by main.js from the tile count, so the
     logos travel at one speed however many there are. The value here is the
     fallback that runs when JavaScript does not: correct for a belt of eight
     tiles, which is what four logos produce today. It cannot be an inline
     style — the site sends style-src 'self'. */
  .clients-track{display:flex; width:max-content;
        animation:clients-belt var(--clients-secs,36s) linear infinite}
  /* Pause on hover and on keyboard focus (the belt is a tab stop — see
     client_logos()). Neither covers a touch user, which is the known WCAG
     2.2.2 gap this shares with the hero carousel. */
  .clients-belt:hover .clients-track,
  .clients-belt:focus-within .clients-track{animation-play-state:paused}
  /* The mask would fade the global focus ring away at exactly the edges it is
     drawn on, so it comes off while the belt holds focus. The belt is paused
     by then anyway, and the end logos are worth seeing whole. */
  .clients-belt:focus-visible{-webkit-mask-image:none; mask-image:none}
  /* The trailing padding is one gap wide, so the space across the seam
     between the two sets matches the space inside them. */
  .clients-set{--clients-gap:clamp(2.2rem,5vw,4rem);
        list-style:none; margin:0; padding:0 var(--clients-gap) 0 0;
        display:flex; align-items:center; gap:var(--clients-gap)}
  .clients-set li{flex:none; display:flex; align-items:center}
  /* Height-normalised, width capped: the source files are trimmed to their
     ink and exported at a common height, so one rule sizes every brand.
     Slightly held back in weight — these are the customer's marks on
     MobiLearn's page, not four competing headlines. */
  .clients-set img{display:block; height:clamp(1.75rem,3.2vw,2.5rem); width:auto;
        max-width:clamp(7rem,18vw,11rem); object-fit:contain;
        opacity:.72; filter:saturate(.85); transition:opacity .2s,filter .2s}
  .clients-set img:hover{opacity:1; filter:none}
  @keyframes clients-belt{from{transform:translateX(0)} to{transform:translateX(-50%)}}

  /* Sections */
  section{padding:clamp(3rem,6.5vw,5rem) 0}
  .tinted{background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
  .sec-head{max-width:64ch; margin-bottom:2rem}
  .sec-head h2{font-size:clamp(1.65rem,3.4vw,2.45rem); font-weight:800}
  .sec-head p{font-size:1.08rem; color:var(--muted); margin-top:.9rem}
  /* A second lede paragraph carries its own bottom margin already, so the
     top margin would double the gap between the two. */
  .sec-head p + p{margin-top:0}

  /* Problems */
  .probs{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
  @media (max-width:980px){ .probs{grid-template-columns:1fr 1fr} }
  @media (max-width:600px){ .probs{grid-template-columns:1fr} }
  .prob{background:#fff; border:1px solid var(--rule); border-top:3px solid var(--red); border-radius:9px; padding:1.3rem 1.25rem}
  .prob h3{font-size:1.05rem; font-weight:700; margin:0 0 .55rem}
  .prob p{font-size:.9rem; color:var(--muted); margin:0}

  /* Loop.
     Two chains run on this site and they are not the same thing. The plain
     .loop is the seven-step operating loop (platform mechanics). The
     .loop--outcome variant is the five-step buyer journey, so its labels are
     longer and it gets the red left edge to mark it as the outcome chain. */
  .loop{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-top:.4rem}
  .loop b{font-family:var(--display); font-weight:700; font-size:.8rem; background:#fff; border:1px solid var(--rule); border-radius:5px; padding:.4rem .8rem}
  .loop i{color:var(--red); font-style:normal; font-weight:800}
  .loop--outcome{gap:.45rem}
  .loop--outcome b{border-left:3px solid var(--red); color:var(--ink)}

  /* Capability blocks */
  .cap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; padding:clamp(1.8rem,3.6vw,2.7rem) 0; border-top:1px solid var(--rule)}
  .cap:first-of-type{border-top:none}
  .cap:nth-child(even) .cap-vis{order:-1}
  @media (max-width:900px){ .cap{grid-template-columns:1fr} .cap:nth-child(even) .cap-vis{order:0} }
  .cap h3{font-size:1.42rem; font-weight:800; margin:0 0 .7rem}
  .cap ul{margin:0 0 1.1rem; padding-left:1.15rem; color:var(--muted); font-size:.94rem}
  .cap li{margin-bottom:.42rem}
  .cap li::marker{color:var(--red)}
  .cap-link{font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--red-deep); text-decoration:none; border-bottom:2px solid var(--red)}
  .cap-vis{background:#fff; border:1px solid var(--rule); border-radius:10px; padding:1.05rem 1.15rem; box-shadow:var(--shadow-sm)}
  .cap-vis .cv-t{display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:.75rem}

  /* Proof */
  .proof-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:start}
  @media (max-width:880px){ .proof-grid{grid-template-columns:1fr} }
  .stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:9px; overflow:hidden}
  @media (max-width:560px){ .stats{grid-template-columns:minmax(0,1fr)} }
  .stat{background:#fff; padding:1.25rem 1.3rem}
  .stat b{display:block; font-family:var(--display); font-weight:800; font-size:1.95rem; color:var(--red); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
  .stat span{font-size:.83rem; color:var(--muted)}
  .stat-note{grid-column:1/-1; background:var(--paper-2); padding:.6rem 1.3rem; font-size:.72rem; color:var(--faint)}
  .story{background:#fff; border:1px solid var(--rule); border-left:3px solid var(--red); border-radius:9px; padding:1.5rem 1.6rem}
  .story blockquote{margin:.7rem 0 1rem; font-size:1.08rem; line-height:1.55; font-family:var(--display); font-weight:600}
  .story figcaption{font-size:.83rem; color:var(--faint)}

  /* Services */
  .svcs{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:9px; overflow:hidden; margin-top:2rem}
  @media (max-width:1000px){ .svcs{grid-template-columns:1fr 1fr} }
  @media (max-width:580px){ .svcs{grid-template-columns:1fr} }
  .svc{background:#fff; padding:1.25rem 1.15rem}
  .svc .sn{font-family:var(--display); font-weight:800; font-size:.75rem; color:var(--red)}
  .svc h3{font-size:1rem; font-weight:700; margin:.35rem 0 .45rem}
  .svc p{font-size:.85rem; color:var(--muted); margin:0}
  .svc .inc{display:inline-block; margin-top:.6rem; font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--red-deep); background:var(--red-tint); padding:.16rem .45rem; border-radius:3px}

  /* Pricing */
  .prices{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem}
  @media (max-width:780px){ .prices{grid-template-columns:1fr} }
  .price{background:#fff; border:1px solid var(--rule); border-radius:10px; padding:1.6rem 1.7rem; box-shadow:var(--shadow-sm)}
  .price h3{font-size:1.15rem; font-weight:800}
  .price .for{font-size:.86rem; color:var(--faint); margin:.3rem 0 1rem}
  .price .amt{font-family:var(--display); font-weight:800; font-size:2rem; letter-spacing:-.03em}
  .price .amt small{font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:0}
  .price p:last-child{font-size:.9rem; color:var(--muted); margin:.8rem 0 0}

  /* Plan cards on /pricing/: three side by side, the deployment one inverted
     so the enterprise path is the visual anchor. The homepage teaser keeps the
     two-column .prices grid, so only the --3 variant changes shape. */
  .prices--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:1000px){ .prices--3{grid-template-columns:minmax(0,1fr)} }
  .prices--3 .price{display:flex; flex-direction:column; padding:1.5rem 1.5rem 1.6rem}
  .plan-chip{display:inline-block; align-self:flex-start; font-family:var(--display); font-size:.68rem;
        font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
        background:var(--paper-3); border:1px solid var(--rule); border-radius:999px;
        padding:.22rem .7rem; margin:.55rem 0 1rem}
  /* Qualified with .price because the base rule is ".price .amt": an
     unqualified .amt--text would lose the cascade and print at 2rem. */
  .price .amt--text{font-size:1.3rem; line-height:1.25}
  .plan-blurb{border-left:3px solid var(--red); padding-left:.9rem; margin:.9rem 0 .2rem;
        font-size:.93rem; color:var(--muted)}
  .price .plan-cta{margin-top:auto; padding-top:1rem}
  .price .plan-cta .btn{width:100%}

  /* The inverted card. Every value below is checked against #171717:
     #FFFFFF text 17.4:1, #D8D5D0 12.2:1, the chip's lightened panel 11.9:1,
     white on the red button 5.1:1. The focus ring goes white for the same
     reason it does on the CTA band. */
  .price--dark{background:var(--ink); border-color:var(--ink); color:#fff}
  .price--dark h3{color:#fff}
  .price--dark .amt{color:#fff}
  .price--dark .amt small{color:#D8D5D0}
  .price--dark .plan-chip{background:rgba(255,255,255,.14); border-color:transparent; color:#fff}
  .price--dark .plan-blurb{color:#D8D5D0}
  .price--dark ul.ticks li{color:#D8D5D0}
  .price--dark ul.ticks li::before{border-left-color:#fff; border-bottom-color:#fff}
  .price--dark :focus-visible{outline-color:#fff; box-shadow:0 0 0 6px rgba(23,23,23,.45)}

  /* Feature matrix: the rail label sits beside the table on desktop. */
  .matrix-grid{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
        gap:clamp(1.5rem,4vw,3rem); align-items:start}
  @media (max-width:900px){ .matrix-grid{grid-template-columns:minmax(0,1fr)} }
  /* Without this the wide table refuses to shrink and pushes the page sideways
     instead of scrolling inside its own .tw wrapper. */
  .matrix-grid > *{min-width:0}
  .matrix-rail .rail-label{font-family:var(--display); font-weight:800; font-size:1.15rem;
        color:var(--ink); margin-bottom:.7rem}
  .matrix-rail p{font-size:.92rem; color:var(--muted)}
  .tw .feature-matrix{min-width:46rem}
  .tw .feature-matrix thead th + th{text-align:center; width:7.5rem}
  /* A row header is a label, not a column title, so it keeps body type rather
     than the small-caps treatment .tw th applies to the header row. Used by
     the inclusion matrix here and by the mapping table on every use-case page. */
  .tw th[scope="row"]{font-family:var(--sans); font-weight:400; font-size:.94rem;
        letter-spacing:0; text-transform:none; text-align:left; color:var(--ink-soft);
        border-bottom:1px solid var(--rule); padding:.7rem .9rem; vertical-align:top}
  .tw .map-table{min-width:44rem}
  .tw .map-table th[scope="row"]{color:var(--ink); font-family:var(--display); font-weight:700}
  .tw .map-table td:last-child{color:var(--ink-soft)}
  .tw .feature-matrix th.fm-group{font-family:var(--display); font-size:.7rem; letter-spacing:.11em;
        text-transform:uppercase; color:var(--red-deep); text-align:left;
        border-bottom:1px solid var(--rule-2); padding:1.4rem .9rem .5rem}
  .tw .feature-matrix tbody:first-of-type th.fm-group{padding-top:.9rem}
  .tw .feature-matrix td{text-align:center; padding:.7rem .9rem; position:relative}
  /* The tick is drawn, not typed, so no stray glyph joins the cell's
     accessible name. The visually hidden "Included" carries the meaning. */
  .fm-yes::before{content:""; position:absolute; left:50%; top:50%; width:.55rem; height:.3rem;
        margin:-.3rem 0 0 -.28rem; border-left:2px solid var(--red); border-bottom:2px solid var(--red);
        transform:rotate(-45deg)}
  .promise-note{margin-top:1.4rem; background:#fff; border:1px solid var(--rule); border-left:3px solid var(--red); border-radius:8px; padding:1.05rem 1.3rem; font-size:.95rem; max-width:76ch}
  .promise-note b{font-family:var(--display)}

  /* CTA */
  .cta{background:var(--red); color:#fff; padding:clamp(3rem,6vw,4.5rem) 0}
  .cta h2{font-size:clamp(1.8rem,3.7vw,2.7rem); font-weight:800; max-width:20ch; color:#fff}
  .cta p{color:#fff; max-width:56ch; margin:1.1rem 0 1.7rem; font-size:1.06rem}
  .cta-row{display:flex; gap:.8rem; flex-wrap:wrap}

  /* Footer */
  footer{background:var(--ink); color:#B9B6B3; padding:3.2rem 0 2rem; font-size:.89rem}
  .f-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:2rem}
  @media (max-width:920px){ .f-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .f-grid{grid-template-columns:1fr} }
  footer .f-head{font-family:var(--display); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; font-weight:700; margin-bottom:.85rem}
  footer ul{list-style:none; margin:0; padding:0}
  footer li{margin-bottom:.45rem}
  footer a{color:#B9B6B3; text-decoration:none}
  footer a:hover{color:#fff}
  footer .logo{color:#fff}
  .f-brand p{max-width:34ch; font-size:.86rem; margin-top:.9rem}
  .f-contact{margin-top:1.1rem; font-size:.84rem}
  .f-contact a{text-decoration:underline; text-underline-offset:2px}
  /* Social links read as a row, not as a third address block. */
  .f-social{display:flex; gap:1.1rem; margin-top:.9rem; font-size:.84rem}
  footer .f-social li{margin-bottom:0}
  .f-bottom{border-top:1px solid #2E2E2E; margin-top:2.6rem; padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.81rem}
  /* Footer links are the densest tap targets on the site — a 19px line .45rem
     from the next one. That clears the WCAG 2.2 spacing floor, but only just,
     and below 560px the whole footer collapses into a single column of them
     with nothing either side to absorb a missed tap. Give them room where
     that column forms; the desktop rhythm is untouched. */
  @media (max-width:560px){
    footer li{margin-bottom:.75rem}
    .f-social{gap:1.5rem}
  }

  /* Reserve room so the phone overlay never sits on top of screen content.
     Declared last so it beats the shorthand padding on .slide and .illus.
     The reservation has to track the phone at every width, because the phone
     renders at every width. It used to be scoped to min-width:941px while the
     overlay was merely made narrower below 940px and never moved out of the
     way, so on a phone it sat squarely on the last row — hiding that row's
     value completely — and clipped the caption underneath it. The narrow
     figure matches the 104px overlay the same breakpoint sets. */
  .slide{padding-right:7.6rem}
  .illus{padding-right:7.6rem}
  @media (max-width:940px){
    .slide{padding-right:6.4rem}
    .illus{padding-right:6.4rem}
  }

  /* ======================= INNER PAGE COMPONENTS ======================= */

  /* Page hero */
  .phero{background:linear-gradient(180deg,#fff 0%, var(--paper-2) 100%); border-bottom:1px solid var(--rule);
         padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(2.2rem,5vw,3.4rem)}
  .phero h1{font-size:clamp(2rem,4.4vw,3.15rem); font-weight:800; max-width:20ch}
  .phero-lede{font-size:1.12rem; color:var(--muted); max-width:62ch; margin-top:1.1rem}

  /* Prose */
  .prose-p{max-width:70ch; font-size:1.03rem; color:var(--ink-soft)}
  .illus-note{font-size:.8rem; color:var(--faint); margin-top:1.2rem; max-width:70ch}
  .cap-lede{color:var(--muted); max-width:60ch; margin-bottom:.9rem}

  /* Card grid */
  .cards{display:grid; gap:1.1rem; margin-top:.5rem}
  .cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:980px){ .cards.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:640px){ .cards.cols-2,.cards.cols-3{grid-template-columns:minmax(0,1fr)} }
  .cards > *{min-width:0}
  .card{background:#fff; border:1px solid var(--rule); border-top:3px solid var(--red); border-radius:9px;
        padding:1.35rem 1.3rem; display:flex; flex-direction:column; gap:.15rem}
  /* A short label above a heading — "Learner", "Manager". It used to carry
     "01", "02" as well, which implied a running order the cards never had. */
  .card-n{font-family:var(--display); font-weight:800; font-size:.78rem; color:var(--red); letter-spacing:.05em}
  .card h3{font-size:1.06rem; font-weight:700; margin:0 0 .45rem}
  /* The top margin belongs to the label, not to every heading: most cards no
     longer have anything above the heading at all. */
  .card-n + h3{margin-top:.35rem}
  .card p{font-size:.92rem; color:var(--muted); margin:0 0 .7rem}
  .card .pill{align-self:flex-start; margin-top:auto}
  .card .cap-link{align-self:flex-start; margin-top:.7rem}
  .card ul.ticks{margin-top:.2rem}
  /* A card that leads to more than one page stacks its links. */
  .card-links{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin-top:auto; padding-top:.7rem}
  .card-links .cap-link{margin-top:0}
  /* Small label above a paragraph inside a card ("Why it happens here").
     Qualified with .card because ".card p" would otherwise win on the font
     size and colour. */
  .card p.card-lbl{font-family:var(--display); font-weight:700; font-size:.68rem; letter-spacing:.09em;
        text-transform:uppercase; color:var(--red-deep); margin:.35rem 0 .25rem}

  /* The workflow as one line of steps.
     Flex with equal-width children, so any number of steps fits one row and
     the component does not have to know how many there are. Below 760px it
     becomes a column and every connector turns to point down.
     Connectors hang off .has-next, never off .flow-step itself: the base rule
     used to sit on the step, and the last step — having no direction — drew a
     3px black square at its origin from the browser's default border-width
     and currentColor. A step with no next step can no longer draw one. */
  .flow{list-style:none; padding:0; margin:1.6rem 0 0; display:flex;
        align-items:stretch; gap:2.4rem}
  .flow-step{position:relative; flex:1 1 0; min-width:0;
        background:var(--paper); border:1px solid var(--rule-2);
        border-left:3px solid var(--red); border-radius:8px; padding:1rem 1.05rem;
        display:flex; flex-direction:column; justify-content:center;
        box-shadow:var(--shadow-sm)}
  /* overflow-wrap is the safety net, not the plan. The plan is that .flow is
     never nested inside a max-width block. But a long single word in a narrow
     box would otherwise spill past its own border rather than break, and that
     is the one failure mode worth making impossible. */
  .flow-t{font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.25;
        color:var(--ink); text-wrap:balance; overflow-wrap:break-word; hyphens:auto}
  .flow-step.has-next::after{content:""; position:absolute; width:0; height:0;
        border-style:solid; right:-1.65rem; top:50%; margin-top:-.4rem;
        border-width:.4rem 0 .4rem .6rem;
        border-color:transparent transparent transparent var(--red)}
  @media (max-width:1080px){ .flow{gap:1.9rem} .flow-step.has-next::after{right:-1.35rem} }
  @media (max-width:760px){
    .flow{flex-direction:column; gap:1.9rem; max-width:26rem}
    .flow-step.has-next::after{right:auto; left:50%; top:auto; bottom:-1.35rem;
      margin:0 0 0 -.4rem; border-width:.6rem .4rem 0 .4rem;
      border-color:var(--red) transparent transparent transparent}
  }

  /* The same workflow as a closed ring, homepage platform section only.
     Client decision, 29 Aug 2026: the fifth arc closes back into the first, so
     every arc is drawn identically and the five steps read as one cycle.

     The section head and the diagram share one grid, which is what puts the
     ring to the right of the heading. .sec-head keeps its 64ch cap, so the
     ring sits beside that block and never inside it. */
  .plat-band{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
        gap:clamp(1.6rem,4vw,3.2rem); align-items:center; margin-bottom:.4rem}
  .plat-band .sec-head{margin-bottom:0}
  @media (max-width:940px){ .plat-band{grid-template-columns:1fr; gap:1.9rem} }

  /* Wrapping the head and the diagram in .plat-band puts one more element
     before the capability blocks inside .wrap, and two rules above count
     position rather than class. .cap:first-of-type now matches .plat-band, so
     the first capability block would draw a rule it does not have today; and
     the even/odd alternation of .cap-vis shifts by one, mirroring the whole
     left-and-right rhythm of the blocks below. Both are corrected here rather
     than by loosening the rules above, because only the homepage has a band. */
  .plat-band + .cap{border-top:none}
  .plat-band ~ .cap:nth-child(even) .cap-vis{order:0}
  .plat-band ~ .cap:nth-child(odd) .cap-vis{order:-1}
  @media (max-width:900px){ .plat-band ~ .cap:nth-child(odd) .cap-vis{order:0} }

  .flow-cap{font-family:var(--display); font-weight:700; font-size:.7rem;
        letter-spacing:.13em; text-transform:uppercase; color:var(--red-deep);
        margin:0 0 .6rem}

  /* A square stage. The svg paints the arcs, the ordered list sits on top of
     it positioned in percentages, so the whole diagram scales with its column
     and the labels stay real text at a real font size. */
  .ring{position:relative; width:100%; max-width:30rem; margin:0 auto; aspect-ratio:1 / 1}
	.ring-circle {
	position: absolute;
	top: 21px;
	left: 8px;
	}
  .ring-svg{position:absolute; inset:0; width:100%; height:100%; color:var(--red)}
  .ring-base{fill:none; stroke:var(--rule); stroke-width:1}
  .ring-arc{fill:none; stroke:var(--red); stroke-width:3; stroke-linecap:round}
  .flow--ring{list-style:none; margin:0; padding:0; display:block;
        position:absolute; inset:0}
  /* 27 per cent, not a third: the two nodes at the foot of the ring sit 40.9
     per cent apart, so anything wider closes the gap between them and the arc
     running behind it. */
  .flow--ring .flow-step{position:absolute; width:27%; min-width:0;
        transform:translate(-50%,-50%);
        display:flex; flex-direction:column; align-items:center; gap:.35rem;
        text-align:center; background:var(--paper);
        border:1px solid var(--rule-2); border-top:3px solid var(--red);
        border-radius:10px; padding:.7rem .55rem .75rem;
        box-shadow:var(--shadow-sm); transition:box-shadow .18s}
  .flow--ring .flow-step:hover{box-shadow:var(--shadow)}
  .flow--ring .flow-n{display:flex; align-items:center; justify-content:center;
        width:24px; height:24px; flex:none; border-radius:50%;
        background:var(--red-tint); color:var(--red-deep);
        font-family:var(--display); font-weight:800; font-size:.76rem;
        font-variant-numeric:tabular-nums; line-height:1}
  .flow--ring .flow-t{font-size:.86rem}
  /* Five nodes on a circle of radius 160 in a 460 unit square, the first at
     the top and the rest clockwise every 72 degrees. Percentages, so the
     geometry holds at any column width. */
  .ring-p1{left:50%;     top:15.22%}
  .ring-p2{left:83.08%;  top:39.25%}
  .ring-p3{left:70.45%;  top:78.14%}
  .ring-p4{left:29.55%;  top:78.14%}
  .ring-p5{left:16.92%;  top:39.25%}
  /* Below 720px a ring puts three words on five lines. Drop the circle and
     stack the steps as a plain numbered column instead. */
 @media (max-width:767px){	
 .ring-circle {
		position: static;
	}
	.flow--ring .flow-step{
		  position:static; width:auto; transform:none;
          flex-direction:row; align-items:center; justify-content:flex-start;
          gap:.75rem; text-align:left;
          border-top:1px solid var(--rule-2); border-left:3px solid var(--red);
          padding:.75rem .95rem;
		}
}
 @media (max-width:720px){
    .ring{aspect-ratio:auto; max-width:26rem}
    .ring-svg{display:none}
    .flow--ring{position:static; display:flex; flex-direction:column; gap:.7rem}
    /* justify-content:center comes from the base .flow-step, where it centres
       the label vertically in a column. Turned to a row it would centre it
       horizontally instead, pushing the number away from the edge. */

    .flow--ring .flow-n{width:28px; height:28px; font-size:.82rem}
    .flow--ring .flow-t{font-size:.98rem}
  }

  /* Languages in their own script. No boxes and no English gloss: the words
     themselves are the demonstration, and framing each one turned it into a
     glossary. Generous line-height because Devanagari and Bengali carry marks
     above and below the baseline that tight leading clips. */
  .langs{margin-top:1.3rem}
  .langs-h{font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.14em;
        text-transform:uppercase; color:var(--red-deep); margin:0 0 1rem}
  .langs-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap;
        align-items:baseline; gap:.7rem 2.1rem}
  .langs-native{font-size:1.6rem; line-height:1.65; color:var(--ink); font-weight:600}
  .langs-note{font-size:.9rem; color:var(--muted); margin:1.1rem 0 0; max-width:64ch}

  /* People: leadership and advisers on /company/. Portrait beside the bio,
     stacking under 560px where a 96px portrait plus text no longer fits a
     readable measure side by side. */
  .people{list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:1.5rem 2.2rem;
        grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:860px){ .people{grid-template-columns:minmax(0,1fr)} }
  .person{display:grid; grid-template-columns:5rem minmax(0,1fr); gap:1.1rem; align-items:start;
        padding-top:1.2rem; border-top:1px solid var(--rule)}
  @media (max-width:560px){ .person{grid-template-columns:minmax(0,1fr); gap:.75rem} }
  .person-ph{width:5rem; height:5rem; border-radius:50%; object-fit:cover; display:block;
        background:var(--paper-3); border:1px solid var(--rule)}
  .person-ini{display:flex; align-items:center; justify-content:center; font-family:var(--display);
        font-weight:800; font-size:1.3rem; letter-spacing:.02em; color:var(--red-deep);
        background:var(--red-tint); border-color:var(--rule-2)}
  .person-b{min-width:0}
  .person h3{font-size:1.02rem; font-weight:700; margin:0}
  .person-role{font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.09em;
        text-transform:uppercase; color:var(--red-deep); margin:.2rem 0 .5rem}
  .person-bio{font-size:.9rem; color:var(--muted); margin:0 0 .55rem}

  /* Office addresses. Semantic <address> so the browser's own italic default
     has to be overridden explicitly rather than by accident. */
  .offices{list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:1.1rem;
        grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:820px){ .offices{grid-template-columns:minmax(0,1fr)} }
  .office{background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--red);
        border-radius:9px; padding:1.2rem 1.25rem}
  .office h3{font-size:1rem; font-weight:700; margin:0}
  .office .card-lbl{font-family:var(--display); font-weight:700; font-size:.68rem; letter-spacing:.09em;
        text-transform:uppercase; color:var(--red-deep); margin:0 0 .3rem}
  .office address{font-style:normal; font-size:.9rem; color:var(--muted); margin-top:.45rem; line-height:1.6}

  /* Events on /events/. Picture on the left, the detail beside it, stacking
     under 760px where a 17rem image column stops leaving a readable measure.
     .event--noimg drops that column rather than reserving an empty one, so an
     event listed before there is a picture for it still fills its card.
     The image is cropped by object-fit instead of by the file's own
     proportions, so a landscape photograph of any shape drops in without the
     row changing height. Every rule inside .event-b that styles a <p> is
     qualified with .event-b, for the same reason .card p.card-lbl is: the
     bare class would lose to ".event-b p" on specificity whatever the order. */
  .events{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:1.3rem}
  .events > *{min-width:0}
  .event{background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--red);
        border-radius:9px; overflow:hidden;
        display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
  .event--noimg{grid-template-columns:minmax(0,1fr)}
  @media (max-width:760px){ .event{grid-template-columns:minmax(0,1fr)} }
  .event-img{display:block; width:100%; height:100%; min-height:12rem;
        object-fit:cover; background:var(--paper-3)}
  /* Stacked, the picture is its own row, so it gets one fixed shape rather
     than a height borrowed from the text beside it. */
  @media (max-width:760px){ .event-img{height:auto; min-height:0; aspect-ratio:3 / 2} }
  .event-b{padding:1.35rem 1.4rem; min-width:0}
  .event-b p{font-size:.93rem; color:var(--muted); margin:0 0 .9rem}
  .event-b p.event-when{font-family:var(--display); font-weight:700; font-size:.7rem;
        letter-spacing:.11em; text-transform:uppercase; color:var(--red-deep); margin:0 0 .35rem}
  .event h3{font-size:1.18rem; font-weight:800; margin:0 0 .3rem}
  .event-b p.event-where{font-size:.86rem; color:var(--faint); margin:0 0 .65rem}
  .event-b p.event-tag{font-family:var(--display); font-weight:700; font-size:.95rem;
        color:var(--ink); margin:0 0 .65rem}

  /* Who was there. Portraits reuse .person-ph from the company page, at the
     size a row of two or three names wants rather than the 5rem the leadership
     grid uses, and fall back to initials through the same helper. */
  .event-team{margin-top:1.05rem; padding-top:.95rem; border-top:1px solid var(--rule)}
  .event-b p.event-lbl{font-family:var(--display); font-weight:700; font-size:.68rem;
        letter-spacing:.09em; text-transform:uppercase; color:var(--red-deep); margin:0 0 .65rem}
  .event-team ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.85rem 1.8rem}
  .event-team li{display:flex; align-items:center; gap:.65rem; min-width:0}
  .event-team .person-ph{width:2.6rem; height:2.6rem}
  .event-team .person-ini{font-size:.8rem}
  .event-person{display:flex; flex-direction:column; min-width:0}
  .event-person b{font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--ink); line-height:1.3}
  .event-person small{font-size:.76rem; color:var(--faint); line-height:1.35}

  /* The consequence line under each problem. Set apart from the scene above
     it, because it is the part a reader should take away if they skim. */
  .prob-cost{font-family:var(--display); font-weight:700; font-size:.9rem;
        color:var(--red-deep); margin:.75rem 0 0; padding-top:.75rem;
        border-top:1px solid var(--rule)}

  /* Fact rows */
  .facts{margin:1.2rem 0 0; padding:0; border-top:1px solid var(--rule); max-width:76ch}
  .fact{display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:1.2rem;
        padding:.85rem 0; border-bottom:1px solid var(--rule)}
  @media (max-width:640px){ .fact{grid-template-columns:minmax(0,1fr); gap:.2rem} }
  .fact dt{font-family:var(--display); font-weight:700; font-size:.93rem; color:var(--ink)}
  .fact dd{margin:0; font-size:.94rem; color:var(--muted)}

  /* Tick lists */
  ul.ticks{list-style:none; padding-left:0; margin:.6rem 0 1rem; max-width:70ch}
  ul.ticks li{position:relative; padding-left:1.5rem; margin-bottom:.45rem; font-size:.94rem; color:var(--muted)}
  ul.ticks li::before{content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.28rem;
        border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg)}
  ul.ticks.two-col{columns:2; column-gap:2.5rem}
  @media (max-width:720px){ ul.ticks.two-col{columns:1} }

  /* Numbered steps */
  ol.steps{counter-reset:s; list-style:none; padding-left:0; max-width:70ch; margin:1rem 0}
  ol.steps li{counter-increment:s; position:relative; padding-left:2.4rem; margin-bottom:.85rem; color:var(--muted); font-size:.97rem}
  ol.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:0;
        font-family:var(--display); font-weight:800; font-size:.82rem; color:var(--red)}
  ol.steps li b{color:var(--ink); font-family:var(--display)}

  /* Panel note */
  .panel-note{background:#fff; border:1px solid var(--rule); border-left:3px solid var(--red);
        border-radius:8px; padding:1.3rem 1.5rem; margin-top:1.6rem; max-width:76ch}
  .panel-note h3{font-size:1.05rem; font-weight:700; margin-bottom:.5rem}
  .panel-note p{margin:0; color:var(--muted); font-size:.95rem}

  /* Tables on inner pages */
  .tw{overflow-x:auto; margin:1.2rem 0}
  .tw:focus-visible{outline:3px solid var(--red); outline-offset:2px}
  .tw table{border-collapse:collapse; width:100%; font-size:.94rem; background:#fff}
  .tw th{font-family:var(--display); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
        text-align:left; color:var(--faint); border-bottom:2px solid var(--ink); padding:.6rem .9rem .5rem}
  /* Even left padding rather than a flush first column. The table sits on its
     own white panel, so content hard against the panel edge read as a
     rendering fault rather than as alignment with the body text. */
  .tw td{border-bottom:1px solid var(--rule); padding:.7rem .9rem; vertical-align:top; color:var(--muted)}
  .tw td b{color:var(--ink); font-family:var(--display); font-weight:700}
  .tw td.num{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); font-family:var(--display); font-weight:700}
  .status-cell{font-style:italic}
  .sr-cap{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

  /* FAQ */
  .faqs{max-width:80ch; border-top:1px solid var(--rule)}
  .faq{border-bottom:1px solid var(--rule)}
  .faq summary{cursor:pointer; padding:1rem 2rem 1rem 0; font-family:var(--display); font-weight:700;
        font-size:1.02rem; position:relative; list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  /* Drawn, not typed. A text glyph in ::after is folded into the summary's
     accessible name, so screen readers read "+" after every question. */
  .faq summary::after{content:""; position:absolute; right:.45rem; top:50%; width:.72rem; height:.72rem;
        margin-top:-.36rem; background:var(--red);
        -webkit-mask:var(--plus-mask) center/contain no-repeat; mask:var(--plus-mask) center/contain no-repeat}
  .faq[open] summary::after{-webkit-mask-image:var(--minus-mask); mask-image:var(--minus-mask)}
  .faq summary:hover{color:var(--red-deep)}
  .faq p{margin:0 0 1.1rem; color:var(--muted); max-width:72ch; font-size:.96rem}

  /* Forms */
  .form-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
  @media (max-width:900px){ .form-grid{grid-template-columns:minmax(0,1fr)} }
  .lead{background:#fff; border:1px solid var(--rule); border-radius:10px; padding:1.6rem 1.7rem; box-shadow:var(--shadow-sm)}
  .fields{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; margin-bottom:1.2rem}
  @media (max-width:600px){ .fields{grid-template-columns:1fr} }
  .fields > *{min-width:0}
  .field{margin:0; display:flex; flex-direction:column; gap:.35rem}
  .field-wide{grid-column:1/-1}
  .field label{font-family:var(--display); font-weight:700; font-size:.85rem}
  .req{color:var(--red)}
  .field input,.field select,.field textarea{font-family:var(--sans); font-size:.95rem; color:var(--ink);
        background:#fff; border:1px solid var(--rule-2); border-radius:6px; padding:.65rem .75rem; width:100%}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red); outline:2px solid var(--red); outline-offset:1px}
  .field input[aria-invalid="true"]{border-color:var(--bad)}
  .field textarea{resize:vertical; min-height:5.5rem}
  .ferr{font-size:.82rem; color:var(--bad)}
  .form-note{display:block; font-size:.82rem; color:var(--faint); margin-top:.8rem}
  .form-err{background:#FDECEE; border:1px solid var(--red); border-radius:6px; padding:.8rem 1rem;
        color:var(--red-deep); font-size:.93rem; margin-bottom:1.2rem; max-width:70ch}
  .form-ok{background:#fff; border:1px solid var(--rule); border-left:3px solid var(--ok);
        border-radius:9px; padding:1.6rem 1.7rem; max-width:60ch}
  .form-ok h3{font-size:1.2rem; font-weight:800; margin-bottom:.5rem}
  .form-ok p{margin:0; color:var(--muted)}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .form-side{background:var(--paper-2); border:1px solid var(--rule); border-radius:10px; padding:1.5rem 1.6rem}
  .form-side h2{font-size:1.1rem; font-weight:800; margin-bottom:.7rem}
  .form-side .facts{margin-top:1rem}
  .form-side-note{font-size:.88rem; color:var(--muted); margin:1.1rem 0 0}

  /* Active nav item. Matches both values: "page" on the page itself and "true"
     on the hub above a child page. */
  .nav a[aria-current]{color:var(--red-deep); border-bottom-color:var(--red)}

  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
        overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

  /* Empty-evidence panel, used where fabricated proof used to sit */
  .evidence-pending{background:var(--paper-2); border:1px solid var(--rule);
        border-left:3px solid var(--red); border-radius:9px; padding:1.6rem 1.7rem; max-width:70ch}
  .evidence-pending h3{font-size:1.15rem; font-weight:800; margin-bottom:.6rem}
  .evidence-pending p{color:var(--muted); font-size:.96rem; margin-bottom:.7rem}
  .evidence-pending p:last-child{margin-bottom:0}

  /* Skip link: visible only when focused by keyboard */
  .skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#fff;
        font-family:var(--display); font-weight:700; padding:.75rem 1.2rem; border-radius:0 0 6px 0; text-decoration:none}
  .skip:focus{left:0}

  /* Error pages */
  .errpage{padding:clamp(4rem,10vw,7rem) 0; text-align:left}
  .errpage h1{font-size:clamp(2rem,4.5vw,3rem); font-weight:800; margin-top:.2rem}
  .errlede{font-size:1.1rem; color:var(--muted); max-width:56ch; margin-top:1rem}

  /* Bar widths as classes, so the Content-Security-Policy can forbid inline styles. */
  /* Anchor targets (footer links land on these): keep them clear of the
     sticky header when the browser scrolls to them. */
  .cap[id],.card[id]{scroll-margin-top:5rem}

  /* Breadcrumb trail on pages that sit below a hub. The bar shares the top of
     the hero gradient, so the two read as one block. */
  .crumb-bar{background:#fff}
  .crumbs{padding:.85rem 0 0}
  .crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0;
        font-size:.82rem; color:var(--faint)}
  .crumbs li{display:flex; align-items:center; gap:.5rem}
  .crumbs li + li::before{content:"/"; color:var(--rule-2)}
  .crumbs a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule-2)}
  .crumbs a:hover{color:var(--red-deep); border-bottom-color:var(--red)}
  .crumbs [aria-current="page"]{color:var(--ink)}

  /* A hairline where two untinted sections meet. */
  .sec-line{border-top:1px solid var(--rule)}

  /* Two illustrative product panels side by side (use-case pages, section 8). */
  .vis-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem}
  @media (max-width:820px){ .vis-grid{grid-template-columns:minmax(0,1fr)} }

  .w52{width:52%} .w64{width:64%} .w71{width:71%} .w87{width:87%}
  .w88{width:88%} .w91{width:91%} .w94{width:94%}
  .mt-lg{margin-top:1.5rem}
  .f-fine{font-size:.8rem}

  /* Short laptop folds, part two: the rest of the display type scale.
     The homepage hero steps down inside the same query further up this file,
     which on its own left the inner pages larger than the page they came
     from (page hero 50px against a 39px homepage hero at 1366 wide) and
     flattened the homepage itself, where a section h2 matched the hero.
     Every display heading is therefore stepped down by the same ratio the
     hero uses at its clamp maximum, about 0.70, so the ordering the full
     size design sets keeps holding: homepage hero, page hero, error hero,
     CTA band, section head. The clamp minimums are eased rather than scaled
     flat, exactly as the hero's are, so the floor stays readable at the
     941px edge of the query. Body copy, ledes and h3 level card headings
     are all near 1rem already and are deliberately untouched, as are the
     fixed size numerals (.price .amt, .stat b) that are figures rather than
     headings. This block sits at the end of the sheet because each selector
     it overrides is declared later than the hero query. Reviewed at
     1366x578 against 1440x900. */
  @media (min-width:941px) and (max-height:700px){
    .phero h1{font-size:clamp(1.75rem,2.95vw,2.2rem)}
    .errpage h1{font-size:clamp(1.75rem,3.05vw,2.1rem)}
    .cta h2{font-size:clamp(1.55rem,2.5vw,1.9rem)}
    .sec-head h2{font-size:clamp(1.45rem,2.3vw,1.7rem)}
  }

  @media (prefers-reduced-motion: reduce){
    .slide{transition:none}
    html{scroll-behavior:auto}
    /* The belt stops and becomes an ordinary scrollable row: the logos are
       still all reachable, they just wait to be pushed. Everything that only
       existed to make the loop seamless goes with the motion — the duplicate
       set, and the padding repeats inside the first one — so a reader who
       chose stillness gets each customer once rather than a wall of the same
       four marks. */
    .clients-track{animation:none; width:auto}
    .clients-belt{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
    /* li.clients-dup, not .clients-dup: '.clients-set li' above sets display
       and would otherwise win on specificity from inside this query. */
    .clients-set[aria-hidden="true"], .clients-set li.clients-dup{display:none}
    .clients-set{padding-right:0}
  }