/* ============================================================================
   Dinno product site — mini design system.
   Tokens mirror PeopleCert.Dinno.Contracts.Branding.BrandTokens (the single
   source of truth): Orange-400 primary, Grapeblue-500 dark neutral, Purple-400
   (ITIL), status greens/yellows/reds, 12-step type scale, weights 500/700.
   Patterns follow the strong product-site conventions of Polaris / Primer /
   Carbon: token-driven CSS, sticky top nav, prominent changelog + roadmap.
   Self-contained on purpose (internal site): no CDN, no external fonts —
   Open Sans / Montserrat resolve locally on designer machines, else system.
   ========================================================================== */

:root{
  /* color tokens (BrandTokens.CoreColors) */
  --orange:#FF3200; --orange-600:#E02B00; --orange-100:#FFE9E3;
  --ink:#202A3B; --ink-700:#2C3850; --ink-900:#161D2B;
  --purple:#8F63E5; --purple-700:#5E23D2; --purple-100:#EAE1FA;
  --purple-300:#B497EE;   /* purple text on ink: #8F63E5 on #2C3850 is 2.84:1, this is 4.81:1 */
  --teal:#2DBFA5; --blue:#2F4C75;
  --green:#44B14E; --green-100:#E4F4E6;
  --yellow:#F6BC2F; --yellow-100:#FCF0D5;
  --red:#D20000;
  --n600:#4D4D4D; --grey:#5F6B7A; --paper:#F5F6F8; --hairline:#E2E6EC; --white:#FFFFFF;
  /* type (BrandTokens.TypeScale, px): 12 14 16 18 22 24 28 32 36 40 48 56 */
  --font-body:"Open Sans","Segoe UI",system-ui,Arial,sans-serif;
  --font-head:"Montserrat","Open Sans","Segoe UI",system-ui,Arial,sans-serif;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --radius:10px; --radius-lg:16px;
}

*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.65;font-size:16px;}
/* one keyboard focus ring for every link and button: only the menu had one; the rest fell back to the browser's
   1px ring, which half disappears on the dark heroes. Orange is 3.92:1 on ink and 3.68:1 on white. */
:where(a[href],button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;}
a{color:var(--purple-700);}
code{background:#EDF0F4;border-radius:5px;padding:2px 7px;font-family:Consolas,monospace;font-size:.86em;color:var(--ink);}

/* ---- top nav ------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--white);
     border-bottom:3px solid var(--orange);}
.nav .wrap{display:flex;align-items:center;gap:16px;min-height:58px;}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white);
            font-family:var(--font-head);font-weight:700;font-size:19px;margin-right:6px;}
.nav .brand img{height:30px;width:auto;display:block;}
.nav .brand b{color:var(--orange);}
.nav .links{display:flex;gap:2px;flex:1;flex-wrap:wrap;}
/* DIRECT children only. The nowrap belongs to the top-level items -- a nav item that breaks across two lines
   ("Get / started") makes the bar 4px taller and reads as a mistake. Written first as `.nav .links a` it also
   caught every .mega-item inside the panels, so their blurbs stopped wrapping: each column's min-content went
   to ~379px against a 304px column, and "Is it running" hung off the panel. Same bug, two causes -- the grid
   used a bare 1fr AND the text could not wrap. */
.nav .links > a{color:#C7CEDA;text-decoration:none;font-size:14px;font-weight:500;
                padding:8px 7px;border-radius:8px;white-space:nowrap;}
/* Direct children here too: `.nav .links a:hover` was painting the ink-700 slab behind a hovered MEGA ITEM
   as well, fighting the paper hover .mega-item:hover sets for itself. */
.nav .links > a:hover{color:var(--white);background:var(--ink-700);}
.nav .links > a.on{color:var(--white);background:var(--ink-700);box-shadow:inset 0 -2px 0 var(--orange);}
.nav .status{display:flex;align-items:center;gap:8px;font-size:12px;color:#9AA5B5;white-space:nowrap;}
.nav .dot{width:9px;height:9px;border-radius:50%;background:#5F6B7A;}
.nav .dot.ok{background:var(--green);}
.nav .ver{background:var(--ink-700);border:1px solid #3A4763;color:#DDE3EE;border-radius:999px;
          padding:2px 11px;font-size:12px;font-weight:700;}
.nav .dl{background:var(--orange);color:var(--white);text-decoration:none;font-weight:700;font-size:13px;
         padding:8px 15px;border-radius:8px;white-space:nowrap;}
.nav .dl:hover{background:var(--orange-600);}
/* Who you are, filled in by site-nav.js from /pair/me. Hidden until it has an answer. */
.nav .who{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.nav .who[hidden]{display:none;}   /* display:flex above beat [hidden]: an empty slot took 16px */
.nav .who-name{font-size:12.5px;color:#C7CEDA;max-width:14ch;overflow:hidden;text-overflow:ellipsis;}
.nav .who-btn{color:#DDE3EE;text-decoration:none;font-size:12.5px;font-weight:700;
              border:1px solid #3A4763;border-radius:8px;padding:6px 12px;}
.nav .who-btn:hover{border-color:#8fa0c0;color:var(--white);}
.nav .who-btn.primary{background:var(--ink-700);border-color:#4A5878;color:var(--white);}
.nav .who-btn.primary:hover{border-color:var(--orange);}

/* ---- release banner ------------------------------------------------------
   The version used to be stated in three places per page and agreed in none of
   them: a pill reading v0.5.0, a footer reading v0.5.6, an engine serving
   0.7.0. One strip, stamped from PANEL_VER and corrected live from /healthz. */
.topbar{background:var(--ink-900);color:#AEB8C8;font-size:12.5px;}
.topbar .wrap{display:flex;align-items:center;gap:12px;min-height:34px;flex-wrap:wrap;}
.tb-badge{background:var(--orange);color:var(--white);font-weight:700;border-radius:999px;
          padding:1px 10px;font-size:11.5px;letter-spacing:.02em;}
.tb-txt{flex:1 1 auto;min-width:0;}
.tb-txt b{color:#DDE3EE;font-weight:700;}
.tb-link{color:#C7CEDA;text-decoration:none;font-weight:700;white-space:nowrap;}
.tb-link:hover{color:var(--white);text-decoration:underline;}

/* ---- mega menu -----------------------------------------------------------
   Two panels, opened by a real <button> with aria-expanded, closed by Escape
   and by a click outside. Hover opens it too on a pointer device, but hover is
   never the ONLY way in: a keyboard and a touch screen both have to work, and
   a menu that only answers a mouse is a menu half the people cannot use. */
.nav .wrap{position:relative;}
.nav .links{flex-wrap:nowrap;align-items:center;}
.mega-host{position:static;}
.mega-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
          color:#C7CEDA;font:500 14px/1 var(--font-body);padding:8px 7px;border-radius:8px;
          white-space:nowrap;}
.mega-btn:hover,.mega-btn[aria-expanded="true"]{color:var(--white);background:var(--ink-700);}
.mega-btn.on{color:var(--white);background:var(--ink-700);box-shadow:inset 0 -2px 0 var(--orange);}
.mega-btn .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
                 border-top:5px solid currentColor;opacity:.8;transition:transform .12s ease;}
.mega-btn[aria-expanded="true"] .caret{transform:rotate(180deg);}
.mega{position:absolute;left:0;right:0;top:100%;padding-top:8px;z-index:60;}
.mega-inner{background:var(--white);color:var(--ink);border-radius:var(--radius-lg);
            border-top:3px solid var(--orange);box-shadow:0 18px 44px rgba(22,29,43,.22);
            /* minmax(0,1fr), NOT 1fr. A bare 1fr is minmax(AUTO,1fr), and an auto minimum cannot shrink below
               the column's min-content width -- so the longest blurb in each column sets a floor, the three
               floors add up past the panel, and the grid overflows to the RIGHT. Measured before the fix: the
               three columns came out 377 / 385 / 258 px inside a 992 px panel, and "Is it running" hung 52 px
               off the edge at every width from 1440 down, taking the page into a sideways scroll below 1180. */
            padding:var(--s5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);}
.mega-col h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);
             margin-bottom:var(--s3);}
.mega-item{display:block;text-decoration:none;color:inherit;border-radius:var(--radius);
           padding:9px 11px;margin:0 -11px;}
.mega-item b{display:block;font-family:var(--font-head);font-size:14.5px;color:var(--ink);}
.mega-item span{display:block;font-size:13px;color:var(--grey);line-height:1.45;margin-top:2px;}
.mega-item:hover{background:var(--paper);}
.mega-item:hover b{color:var(--purple-700);}
.mega-item:focus-visible,.mega-btn:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--orange);
           outline-offset:2px;}
.nav-toggle{display:none;align-items:center;gap:8px;background:var(--ink-700);border:1px solid #3A4763;
            color:var(--white);font:700 13px/1 var(--font-body);padding:8px 13px;border-radius:8px;
            cursor:pointer;margin-left:auto;}
.nav-toggle span{width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;}

/* THE BAND BETWEEN THE FULL NAV AND THE STACKED ONE. Adding the sign-in control put roughly 180px more into a
   row that had ~137px of slack at 1280, so between the 900px breakpoint and about 1160px the page scrolled
   SIDEWAYS -- measured at 83px of overflow at 1024 and 147px at 960, and only while signed in, which is exactly
   the state nobody tests. Two labels go before anything moves: the engine word (the dot still says it, and the
   text stays readable to a screen reader) and the person's name (the Sign out button is the control). */
/* "What's next" made the row one item longer (2026-10-13): 960px overflowed by the Download button, and signed in
   the row overflowed by 114px at every desktop width. Measured fixes, in order: the Dinno mark already links home,
   so the Home item shows only in the phone menu; the items close up from 10 to 7px; and while someone is signed in
   the engine word goes the way it already goes below 1180px (the dot still says it, a screen reader still reads it). */
.nav .links > a[href="/"]{display:none;}
.nav .wrap:has(#navWho:not([hidden])) #engineTxt{position:absolute;width:1px;height:1px;overflow:hidden;
                                                 white-space:nowrap;clip-path:inset(50%);}
@media (max-width:1000px){ .nav .wrap{gap:12px;} }   /* signed in at 961px Download ran 4px past the edge */
@media (max-width:1180px){
  .nav .status #engineTxt{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
                          clip-path:inset(50%);}
  .nav .who-name{display:none;}
}

/* 960, not 900: with "What's next" in the row a signed-in nav overflowed by up to 40px between 901 and 940px */
@media (max-width:960px){
  .nav .wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;}
  .nav-toggle{display:inline-flex;}
  .nav .links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;}
  .nav .links.open{display:flex;}
  .nav .links > a[href="/"]{display:block;}
  .nav .status{order:3;}
  /* Stacked, not floating: a 900px-wide panel hanging off a 360px screen is how a mega menu becomes
     unusable on the device most people read release notes on. */
  .mega{position:static;padding-top:0;}
  .mega-inner{grid-template-columns:1fr;box-shadow:none;border-top:0;border-left:3px solid var(--orange);
              border-radius:0 var(--radius) var(--radius) 0;padding:var(--s3) var(--s4);gap:var(--s4);
              margin:2px 0 8px;}
}

/* ---- hero ---------------------------------------------------------------- */
.hero{background:linear-gradient(160deg,var(--ink) 0%,var(--ink-900) 100%);color:var(--white);
      padding:56px 0 64px;position:relative;overflow:hidden;}
.hero .wrap{display:flex;align-items:center;gap:44px;flex-wrap:wrap;position:relative;}
.hero .copy{flex:1 1 400px;}
.hero h1{font-size:clamp(32px,5vw,56px);letter-spacing:-.01em;}
.hero h1 b{color:var(--orange);}
.hero .kicker{display:inline-block;background:var(--ink-700);border:1px solid #3A4763;color:var(--purple-300);
              border-radius:999px;padding:3px 14px;font-size:12px;font-weight:700;letter-spacing:.08em;
              text-transform:uppercase;margin-bottom:14px;}
.hero p{margin-top:14px;color:#C7CEDA;font-size:18px;max-width:34em;}
.hero .mascot{flex:0 1 340px;min-width:240px;}
.hero .mascot img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));}
.hero .spark{position:absolute;color:var(--purple);opacity:.9;font-size:22px;}
.btn{display:inline-block;background:var(--orange);color:var(--white);text-decoration:none;
     font-weight:700;padding:13px 26px;border-radius:9px;font-size:16px;}
.btn:hover{background:var(--orange-600);}
.btn.ghost{background:transparent;border:1.5px solid #56617A;color:#DDE3EE;}
.btn.ghost:hover{border-color:#8fa0c0;background:transparent;}
/* .btn.ghost is drawn for the dark hero and the dark band. On an ordinary light section it reads as
   near-invisible, which is why /pair/ re-declared it locally; `light` is that override, shared. */
.btn.ghost.light{border-color:var(--hairline);color:var(--ink);}
.btn.ghost.light:hover{border-color:var(--ink);background:transparent;}
.btn-row{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;}

/* ---- sections / cards ---------------------------------------------------- */
section{padding:56px 0;}
section.alt{background:var(--paper);}
.sec-h{margin-bottom:20px;}
.sec-h h2{font-size:28px;display:inline-block;border-bottom:3px solid var(--orange);padding-bottom:8px;}
.sec-h .sub{color:var(--grey);margin-top:10px;max-width:46em;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px;}
.card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);padding:22px;}
section.alt .card{border:none;box-shadow:0 1px 3px rgba(32,42,59,.06);}
.card h3{font-size:16px;margin-bottom:7px;}
.card p{font-size:14px;color:var(--grey);}
.step-n{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
        align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-bottom:10px;
        font-family:var(--font-head);}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-top:26px;text-align:center;}
.stat .n{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--font-head);}
.stat .n.orange{color:var(--orange);}
.stat .l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:4px;}
.note{background:var(--purple-100);border-radius:var(--radius);padding:16px 20px;margin-top:22px;
      font-size:14px;color:#4A4560;max-width:46em;}
.note b{color:var(--purple-700);}

/* ---- badges -------------------------------------------------------------- */
.badge{display:inline-block;border-radius:999px;padding:2px 12px;font-size:12px;font-weight:700;
       font-family:var(--font-head);letter-spacing:.02em;}
.badge.current{background:var(--orange);color:#fff;}
.badge.added{background:var(--green-100);color:#23703B;}
.badge.improved{background:var(--purple-100);color:var(--purple-700);}
.badge.fixed{background:var(--yellow-100);color:#8A6410;}
.badge.now{background:var(--green-100);color:#23703B;}
.badge.next{background:var(--purple-100);color:var(--purple-700);}
.badge.later{background:#E8EBF0;color:var(--grey);}
/* still works, going in a named release (Convert: deprecated in 0.8.0, removed in 1.1) */
.badge.deprecated{background:var(--orange-100);color:#B32400;}

/* ---- release-notes timeline ---------------------------------------------- */
.timeline{position:relative;margin-top:26px;padding-left:34px;}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;
                  background:var(--hairline);border-radius:2px;}
.release{position:relative;padding-bottom:44px;}
.release:last-child{padding-bottom:0;}
.release::before{content:"";position:absolute;left:-31px;top:7px;width:15px;height:15px;border-radius:50%;
                 background:var(--white);border:4px solid var(--orange);}
.release.past::before{border-color:#B9C2CF;}
.release .rh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.release .rh h3{font-size:24px;}
.release .date{color:var(--grey);font-size:14px;}
.release .tagline{color:var(--grey);margin-top:4px;font-size:15px;font-style:italic;}
.release .body{margin-top:14px;display:flex;flex-direction:column;gap:14px;}
.rgroup{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 20px;}
.rgroup ul{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:7px;color:var(--n600);font-size:14.5px;}
.rgroup li b{color:var(--ink);}

/* ---- next planned version (/next.html) ------------------------------------------------------------------
   Looked at before it is read: an area per row (icon, name, count, one line), then one short card per item in a
   grid of equal-height tiles. The first version was bulleted paragraphs in two flowing columns; it read as a
   document, ran to ~6,000 px on a phone, and its groups ended at ragged heights. */
/* Research: a direction we are working on with no promised result (owner, 2026-10-13: scenario pages) */
.badge.research{background:var(--yellow-100);color:#8A6410;}
.np-hero h1 .line2{display:block;font-size:clamp(18px,2.2vw,22px);font-weight:600;color:#DDE3EE;margin-top:12px;
                   letter-spacing:0;line-height:1.3;}
.np-stats{display:flex;gap:12px 40px;flex-wrap:wrap;margin-top:26px;}
.np-stats div{display:flex;flex-direction:column;}
.np-stats b{font-family:var(--font-head);font-size:30px;line-height:1;color:var(--white);
            font-variant-numeric:tabular-nums;}
.np-stats span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#9AA6BA;margin-top:7px;}
.np-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;font-size:13.5px;color:var(--grey);}
.np-legend > span{display:inline-flex;align-items:center;gap:8px;}
/* Groundwork is the most-built label, so it gets the strongest purple, not the grey the roadmap uses for "Exploring" */
.badge.groundwork{background:var(--purple-700);color:var(--white);}
.np-group{padding-top:44px;scroll-margin-top:84px;}
.np-group + .np-group{margin-top:44px;border-top:1px solid var(--hairline);}
.np-gh{display:flex;align-items:center;gap:14px;}
.np-ic{width:44px;height:44px;border-radius:12px;flex:0 0 auto;display:inline-flex;align-items:center;
       justify-content:center;background:var(--purple-100);color:var(--purple-700);}
.np-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
           stroke-linejoin:round;}
.np-gh h3{font-size:22px;letter-spacing:-.005em;}
.np-gh h3 .n{display:inline-block;vertical-align:middle;margin-left:6px;font-family:var(--font-body);font-size:12px;
             font-weight:700;color:var(--purple-700);background:var(--purple-100);border-radius:999px;padding:2px 10px;
             letter-spacing:0;line-height:1.5;}
.np-gs{color:var(--grey);font-size:15px;margin:6px 0 0 58px;max-width:46em;}
.np-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:22px;}
.np-tile{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hairline);
         border-radius:var(--radius-lg);padding:20px 22px;box-shadow:0 1px 2px rgba(32,42,59,.04);}
/* the label sits at the FOOT of the card: above the title it pushed badged titles 36px below their neighbours */
.np-tile .badge{align-self:flex-start;margin-top:auto;}
.np-tile p:has(+ .badge){margin-bottom:14px;}
.np-tile h4{font-size:16px;line-height:1.3;font-weight:700;}
.np-tile p{font-size:14px;line-height:1.55;color:var(--grey);margin-top:7px;}
.np-tile a{color:var(--purple-700);}
section.alt .np-tile{border-color:transparent;box-shadow:0 1px 3px rgba(32,42,59,.07);}
#v11{scroll-margin-top:68px;}
@media (max-width:640px){
  .np-gs{margin-left:0;}
  .np-stats{gap:12px 28px;}
  .np-stats b{font-size:26px;}
  /* one row of chips that scrolls sideways, not four rows of them above the fold; it runs to both screen edges
     and fades there, with room above and below for the focus ring */
  .phero.np-hero .jump{flex-wrap:nowrap;overflow-x:auto;margin:22px -24px -4px;padding:4px 24px;
    scroll-padding-inline:24px;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);}
  .phero.np-hero .jump::-webkit-scrollbar{display:none;}
  .phero.np-hero .jump a{flex:0 0 auto;scroll-snap-align:start;}
  .np-legend{display:grid;grid-template-columns:max-content 1fr;gap:8px 12px;align-items:baseline;}
  .np-legend > span{display:contents;}
  .np-legend .badge{justify-self:start;}
  .np-legend > span.lead{display:block;grid-column:1 / -1;}   /* display:contents above would drop it into column 1 */
  /* on a phone a group is ONE rounded list with hairlines between its rows (an inset grouped list), not a stack
     of separate cards: the first card version ran to 6,400 px */
  .np-group{padding-top:30px;}
  .np-group + .np-group{margin-top:30px;}
  .np-tiles{grid-template-columns:1fr;gap:0;margin-top:16px;background:var(--white);border:1px solid var(--hairline);
            border-radius:var(--radius-lg);overflow:hidden;}
  .np-tile{border:0;border-radius:0;box-shadow:none;padding:14px 16px;}
  .np-tile + .np-tile{border-top:1px solid var(--hairline);}
  section.alt .np-tiles{border-color:transparent;box-shadow:0 1px 3px rgba(32,42,59,.07);}
  section.alt .np-tile{box-shadow:none;}
  section.alt .np-tile + .np-tile{border-top-color:var(--hairline);}   /* 0,2,1 above made it transparent */
  .np-tile p{margin-top:4px;}
  #v11 .btn-row .btn{flex:1 1 100%;text-align:center;}
}
/* the roadmap's 1.0 lane: one row per area, with its count, each a link into /next.html */
.road-areas{list-style:none;margin:10px 0 0;padding:0;font-size:12.5px;}
.road-areas li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--hairline);}
.road-areas a{color:var(--ink);text-decoration:none;}
.road-areas a:hover{color:var(--purple-700);text-decoration:underline;}
.road-areas span{color:var(--grey);font-variant-numeric:tabular-nums;}
/* the roadmap's pointer to /next.html, above the timeline */
.next-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;padding:18px 22px;text-decoration:none;
          background:var(--purple-100);border:1px solid #D6C8F4;border-left:5px solid var(--purple);
          border-radius:var(--radius);color:var(--ink);}
.next-cta:hover{border-color:var(--purple);}
.next-cta .eb{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--purple-700);}
.next-cta .v{font-family:var(--font-head);font-weight:700;font-size:28px;line-height:1;}
.next-cta .txt{flex:1 1 320px;font-size:14.5px;color:#4A4560;}
.next-cta .go{font-weight:700;color:var(--purple-700);white-space:nowrap;}

/* ---- roadmap: a horizontal, right-scrolling timeline of release phases ----- */
.road-hint{margin-top:18px;font-size:13px;color:var(--grey);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.road-nav{display:flex;gap:8px;flex:0 0 auto;}
.rnav{width:36px;height:36px;border-radius:9px;border:1px solid var(--hairline);background:var(--white);
      color:var(--ink);font-size:22px;line-height:1;cursor:pointer;font-family:var(--font-head);
      display:inline-flex;align-items:center;justify-content:center;}
.rnav:hover:not(:disabled){background:var(--paper);border-color:var(--purple);color:var(--purple-700);}
.rnav:disabled{opacity:.35;cursor:default;}
.road-scroll{position:relative;margin-top:12px;}
/* fade cue on the right edge to signal more phases off-screen */
.road-scroll::after{content:"";position:absolute;top:0;right:0;bottom:16px;width:46px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--white));}
.road{display:flex;overflow-x:auto;padding:2px 0 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
      cursor:grab;scrollbar-width:thin;scrollbar-color:var(--hairline) transparent;overscroll-behavior-x:contain;}
.road.drag{cursor:grabbing;scroll-snap-type:none;}
.road.drag a{pointer-events:none;}
.road::-webkit-scrollbar{height:9px;}
.road::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:5px;}
.road::-webkit-scrollbar-thumb:hover{background:#C3CCD8;}
.road::-webkit-scrollbar-track{background:transparent;}
.phase{flex:0 0 300px;scroll-snap-align:start;padding-right:22px;}
.phase-marker{display:flex;align-items:center;height:18px;}
.phase-marker .node{width:16px;height:16px;border-radius:50%;background:var(--white);border:4px solid var(--hairline);flex:0 0 auto;}
.phase-marker .line{flex:1;height:3px;background:var(--hairline);}
.phase.ship .node{border-color:var(--green);} .phase.now .node{border-color:var(--orange);}
.phase.plan .node{border-color:var(--purple);} .phase.explore .node{border-color:#C3CCD8;}
.phase-cap{margin:12px 0 14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.phase-cap .pv{font-family:var(--font-head);font-weight:700;font-size:20px;}
.phase-cap .pd{font-size:12px;color:var(--grey);width:100%;margin-top:-2px;min-height:40px;}
.phase-lane{background:var(--paper);border-radius:var(--radius-lg);padding:14px;}
/* a card title that is a link reads as a title, not as underlined body text; the underline comes on hover */
.road-item h4 a{color:inherit;text-decoration:none;}
.road-item h4 a:hover{text-decoration:underline;}
.phase-lane .sub{font-size:12px;color:var(--grey);margin:-2px 4px 12px;line-height:1.5;}
.road-item{background:var(--white);border-radius:var(--radius);padding:14px 16px;margin-bottom:11px;
           box-shadow:0 1px 3px rgba(32,42,59,.07);}
.road-item:last-child{margin-bottom:0;}
.road-item h4{font-size:14px;margin-bottom:4px;}
.road-item p{font-size:12.5px;color:var(--grey);}
.road-item .mini{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;
                 text-transform:uppercase;color:var(--purple-700);margin-bottom:5px;}

/* ---- help ------------------------------------------------------------------ */
ol.install{margin:20px 0 0 20px;display:flex;flex-direction:column;gap:12px;max-width:50em;}
ol.install li{color:var(--grey);}
ol.install li b{color:var(--ink);}
details{margin-top:18px;max-width:50em;}
summary{cursor:pointer;font-weight:700;color:var(--ink);}
details ol,details ul{margin:12px 0 0 20px;color:var(--grey);display:flex;flex-direction:column;gap:8px;}
.faq{margin-top:8px;max-width:50em;}
.faq details{border:1px solid var(--hairline);border-radius:var(--radius);padding:14px 18px;margin-top:10px;background:var(--white);}
.faq p{margin-top:10px;color:var(--grey);font-size:14.5px;}
table.tt{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px;}
table.tt th{text-align:left;font-family:var(--font-head);font-size:13px;letter-spacing:.04em;
            text-transform:uppercase;color:var(--grey);padding:10px 14px;border-bottom:2px solid var(--hairline);}
table.tt td{padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--n600);}
table.tt td:first-child{font-weight:700;color:var(--ink);width:34%;}
/* A measured comparison: several columns of numbers, read across. On a phone the TABLE scrolls inside its own
   box, never the page -- a four-column table squeezed to 360px either wraps every number onto three lines or
   pushes the whole page sideways, and both read as broken. The latest column is the one in ink. */
.tscroll{overflow-x:auto;margin-top:18px;-webkit-overflow-scrolling:touch;}
table.tt.cmp{margin-top:0;min-width:680px;font-size:14px;}
table.tt.cmp td:first-child{width:26%;}
table.tt.cmp th.now{color:var(--purple-700);}
table.tt.cmp td.now{color:var(--ink);font-weight:700;}
table.tt.cmp td.open{color:#8A6410;font-weight:700;}
.tnote{font-size:13px;color:var(--grey);margin-top:12px;max-width:60em;}
.tnote b{color:var(--ink);}

/* ---- feedback band + footer ------------------------------------------------ */
.band{background:var(--ink);color:var(--white);border-radius:var(--radius-lg);padding:36px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.band .mascot-s{width:110px;height:auto;flex:0 0 auto;}
.band h3{font-size:22px;}
.band p{color:#C7CEDA;max-width:34em;font-size:15px;margin-top:6px;}
footer{border-top:1px solid var(--hairline);padding:26px 0;font-size:13.5px;color:var(--grey);margin-top:24px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
footer a{color:inherit;}

/* ==========================================================================
   PRODUCT PAGES -- the vocabulary the feature / account / security pages are
   built from.
   ==========================================================================
   WHY THIS BLOCK EXISTS. The first version of those three pages was written as
   prose: correct, sourced, and an unbroken wall of paragraphs with not one of
   this product's 46 real screenshots on it. A product page is looked at before
   it is read, so the parts below are the ones that carry a PICTURE -- a framed
   capture, a before/after, a recording, a stat strip -- and the words are sized
   to fit around them rather than the other way round.

   Everything here reuses the tokens above. No new colour is introduced. */

/* A wider measure for showcase rows: 1040px is right for reading and too narrow
   for a 1176px capture shown at its own size. */
.wrap.wide{max-width:1240px;}

/* ---- page hero (every product page opens with one) ----------------------- */
.phero{background:linear-gradient(160deg,var(--ink) 0%,var(--ink-900) 100%);color:var(--white);
       padding:44px 0 48px;}
.phero .eyebrow{display:inline-block;background:var(--ink-700);border:1px solid #3A4763;color:var(--purple-300);
                border-radius:999px;padding:3px 14px;font-size:12px;font-weight:700;letter-spacing:.08em;
                text-transform:uppercase;margin-bottom:14px;}
.phero h1{font-size:clamp(28px,4.2vw,42px);letter-spacing:-.01em;max-width:18em;text-wrap:balance;}
.phero .lede{margin-top:14px;color:#C7CEDA;font-size:17px;max-width:42em;}
.phero .btn-row{margin-top:22px;}
.phero .jump{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;}
.phero .jump a{color:#DDE3EE;text-decoration:none;font-size:13px;font-weight:700;border:1px solid #3A4763;
               border-radius:999px;padding:6px 14px;}
.phero .jump a:hover{border-color:var(--orange);color:var(--white);}

/* ---- a framed capture, with its caption underneath -----------------------
   NEVER UPSCALE. width:100% was the first version and it blew a 806px-wide
   before/after up to 1192 in the wide row -- the body text inside the page in
   the picture went soft, on the page's most important figure. A capture is a
   fixed grid of pixels; shown above 1:1 it is a blurred capture, and the reader
   reads that as a cheap product rather than as a big picture. */
.shot{margin:0;}
.shot img,.shot video{display:block;max-width:100%;width:auto;height:auto;margin:0 auto;
                      border:1px solid var(--hairline);border-radius:var(--radius);background:var(--white);
                      box-shadow:0 10px 30px rgba(32,42,59,.10);}
/* Captions are NOT body copy. 13px grey beside 15px grey body scanned as a
   paragraph; smaller, tracked and lighter makes the difference readable. */
.shot figcaption{font-size:12.5px;line-height:1.55;color:#6E7A8A;margin-top:10px;letter-spacing:.005em;}
.shot figcaption b{color:var(--ink);letter-spacing:0;}
.shot.tight img,.shot.tight video{max-width:min(640px,100%);}
.shot.plain img{border:none;box-shadow:none;}

/* Rows of captures line their captions up. Without this each figure is as tall
   as its own image, so a row of three lands its captions on three baselines and
   reads as three accidents rather than one set. */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:26px;
       align-items:stretch;}
/* min(340px,100%): on a 360px phone the column is ~312px, and a bare 340px floor pushed every two-up row 28px
   past the screen edge, so the whole features page scrolled sideways. */
.shots.two{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));}
.shots .shot img{align-self:start;}

/* ---- text one side, picture the other ------------------------------------
   align-items:start, not center. Centring a ~200px block of copy against a
   ~490px portrait capture opened a 120-170px void above the copy, so two
   sections began in mid-air. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:28px;}
.split + .split{margin-top:56px;}
.split.flip > .split-copy{order:2;}
.split h3{font-size:21px;margin-bottom:10px;}
.split p{color:var(--grey);font-size:15px;}
.split p + p{margin-top:12px;}
.split .shot img,.split .shot video{box-shadow:0 14px 40px rgba(32,42,59,.13);}
/* A tall portrait capture (a task pane is 571x820) must not set the row height.
   The cap goes on the FIGURE, not the image: capping only the image centred the
   picture and left its caption spanning the full column, so every portrait
   caption floated ~68px clear of the thing it captions. */
.split .shot.portrait{max-width:470px;margin:0 auto;}

/* ---- the before/after strip: Word on the left, what Dinno made on the right
   Same rule as .shot: shown at its own size or smaller, never larger. */
.showcase{margin-top:28px;}
.showcase img{display:block;max-width:100%;width:auto;height:auto;margin:0 auto;
              border:1px solid var(--hairline);border-radius:var(--radius);
              box-shadow:0 14px 40px rgba(32,42,59,.13);}
.showcase figcaption{font-size:13.5px;color:var(--grey);margin-top:14px;max-width:60em;}
.showcase figcaption b{color:var(--ink);}
/* A figure a little wider than the reading column, WITHOUT moving the heading with it. Putting the whole
   section in .wrap.wide instead jogged the H2 ~98px further left than every other heading on the page, so the
   page's left edge stepped out and back. The picture breaks out; the type stays on its line. */
.showcase.bleed{margin-left:calc((1192px - 100%) / -2);margin-right:calc((1192px - 100%) / -2);}
@media (max-width:1290px){ .showcase.bleed{margin-left:0;margin-right:0;} }

/* ---- a fact list that is read, not skimmed ------------------------------- */
.speclist{margin-top:22px;border-top:1px solid var(--hairline);}
.speclist div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:13px 0;
              border-bottom:1px solid var(--hairline);font-size:14.5px;}
.speclist dt,.speclist b:first-child{font-weight:700;}
.speclist span:first-child{font-weight:700;color:var(--ink);}
.speclist span:last-child{color:var(--grey);}

/* ---- small labels -------------------------------------------------------- */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.tag{border:1px solid var(--hairline);border-radius:999px;padding:4px 13px;font-size:12.5px;
     font-weight:700;color:var(--ink);background:var(--white);}
.tag.on{border-color:var(--green);color:#23703B;background:var(--green-100);}
.tag.off{border-color:var(--hairline);color:var(--grey);background:var(--paper);}

/* ---- "what is not built": the section every product page here ends with --- */
.gaps{border:1px solid var(--hairline);border-left:4px solid var(--yellow);border-radius:var(--radius);
      padding:22px 26px;margin-top:26px;background:var(--white);}
.gaps h3{font-size:17px;margin-bottom:6px;}
.gaps > p{font-size:14px;color:var(--grey);}
.gaps ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
/* The pattern -- every section ends by naming what it cannot do -- is the point and stays. What was wrong was
   that four of them in a row were the same tall single column, so the last screenful of every section looked
   identical. A long list runs two columns instead. */
.gaps.two ul{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 32px;}
.gaps li{font-size:14px;color:var(--grey);padding-left:22px;position:relative;}
.gaps li::before{content:"—";position:absolute;left:0;color:var(--yellow);font-weight:700;}
.gaps li b{color:var(--ink);}

/* ---- a real exchange, shown as one -------------------------------------- */
/* The assistant rail has no screenshot to show -- it is a protocol. What it
   actually answers is the honest picture, so it is printed as a transcript. */
.term{background:var(--ink-900);color:#DDE3EE;border-radius:var(--radius);padding:18px 20px;margin-top:22px;
      font-family:Consolas,monospace;font-size:13px;line-height:1.7;overflow-x:auto;}
.term .c{color:#8FA0C0;}
.term .k{color:var(--orange);}
.term .v{color:#7FD1B9;}
.term code{background:none;padding:0;color:inherit;font-size:inherit;}

/* ---- inline diagrams ----------------------------------------------------- */
.diagram{margin-top:26px;}
.diagram svg{display:block;width:100%;height:auto;max-width:900px;margin:0 auto;}
.diagram figcaption{font-size:13px;color:var(--grey);margin-top:12px;text-align:center;}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:26px;}
  .split.flip > .split-copy{order:0;}
  .speclist div{grid-template-columns:1fr;gap:4px;}
}