/* ==========================================================================
   Skyscape / Buzz page design system — preview-system.css
   Created 2026-10-14. Canonical rules: AI-Bridge
   /shared/patterns/skyscape-page-design-system.md

   THIS FILE IS THE MECHANICAL TRUTH. Hex values, class names and metrics
   live here and are not duplicated in prose anywhere, because a hex value
   copied into a document goes stale silently. The AI-Bridge file holds the
   decisions and prohibitions that CSS cannot express, and points here.

   Extracted from three pages that had drifted apart:
   /preview/ (home), /preview/buzz-voice/, /preview/buzz-brain/.
   Five conflicts resolved by Sandeep, 2026-10-14:

     1. Buttons    6px radius + 2px border (product pages won).
                   The home page pill with a drop shadow is retired.
     2. Tokens     Product-page vocabulary: --action, --text, --muted,
                   --card, --sky-ink. The home names --red, --slate,
                   --mist, --light are gone. Do not reintroduce them.
     3. Scale      17px base, rem throughout. Survives browser zoom, and
                   reads better for a director on a laptop.
     4. Container  1100px, one value, --wrap.
     5. Dark mode  Full BuzzBrain treatment on every page. Partial dark
                   mode is worse than none.

   CHANGE LOG
   2026-10-14  Created.
   2026-10-14  Added --display / --body font shorthands (all three pages
               already used them), --night-line, and text-wrap:balance on
               headings. Set p{margin:0}: these are gap-driven layouts, so
               a default bottom margin fights every flex container. Prose
               uses .prose here, or the separate .ss-article stylesheet.
   2026-10-14  Night bands rebuilt to RE-SCOPE TOKENS rather than restate
               rules. Two bugs on the BuzzVoice render showed why: a solid
               CTA used --action, which flips to a light pink in dark mode
               on a band that stays dark either way; and bold text used
               --ink, which is navy, so it vanished on navy. Both were the
               same leak — light-surface token values reaching a dark
               surface. Enumerating .night strong, .night .lede, .night
               .faq summary and the rest would have kept finding gaps, so
               .night now redefines the tokens themselves and everything
               inside inherits correct values. See section 9.
   2026-10-14  From the BuzzBrain migration:
               - .btn.ghost is now a NEUTRAL secondary (ink label, hairline
                 border) rather than an action-colored outline. A red
                 outline beside a red fill reads as two primaries, and
                 BuzzBrain had already settled on neutral. The night
                 override (white label) is unchanged.
               - .col promoted from a page-local helper to the system.
                 BuzzVoice still carries an identical local copy; remove it
                 next time that file is touched.
               - html{scroll-behavior:smooth}, since every page in the
                 cluster uses in-page anchors. The reduced-motion block
                 already overrides it.
   2026-10-14  --r-chip, the SPINE RADIUS, promoted to the system and
               locked at 6px 12px 12px 6px. Chips, filter pills and inline
               tags are tight on the left and open on the right, echoing a
               ring binder: rings on the spine side, pages on the open
               side. It came out of BuzzBrain's binder diagram but it is a
               house trait, not that page's flourish — full 999px pills
               are retired for labels and chips.
               BuzzVoice has NOT been converted yet; its .nav-cta, .sev
               and .callchip are still pills. The callchip may deserve an
               exemption, since a phone-call pill is doing semantic work.
   2026-10-14  MOBILE NAV DISCLOSURE (section 8a). The 900px breakpoint
               used to do `.navmid{display:none}` and stop there, so below
               900px the nav links simply vanished and nothing replaced
               them — no menu anywhere in the cluster. On the home page it
               read as a missing nav bar entirely, because that page also
               hides its CTA on mobile, leaving a bare logo and Log in chip
               floating over the hero photograph.

               Built CSS-ONLY, as a visually-hidden checkbox plus a label.
               NOT <details>, deliberately: Chrome now puts closed-details
               content behind ::details-content with
               content-visibility:hidden, which author CSS cannot reliably
               force open, so the usual "details on mobile, inline row on
               desktop" technique breaks in current Chrome. The checkbox
               works everywhere, needs no JS, and keeps ONE copy of the
               link list rather than duplicating it for each breakpoint.

               The closed bar stays exactly one row tall. That is a
               requirement, not a preference: the home page nav is
               absolutely positioned over the hero photograph, so a nav
               that grew to two rows would eat the headline.

   2026-10-16  THE CANVAS (section 5), plus the four tokens it composes:
               --grid-major, --grid-minor, --canvas-a and --canvas-b,
               declared in all three theme blocks. Promoted from a one-off
               on the Knowledge page, where the identical drafting grid was
               scoped to .uni-empty and existed only as an empty state that
               was destroyed on the first interaction. It is the standing
               treatment for demo surfaces now: before a visitor presses
               anything, a plain white panel reads as a page that failed to
               load. The grid blue is held CONSTANT rather than following
               the section accent, so every demo on the site reads as the
               same kind of surface.
               First applied to the escalation demo on /preview/buzz/chat/,
               whose .ladbox had to drop its own flat background to let
               .canvas paint. A page that does that MUST bump the
               ?v= token on its preview-system.css link in the same
               commit: a browser holding an older cached copy of this file
               would otherwise find no .canvas rule and render that panel
               with no background at all.
               knowledge-page.css still carries its own copy of the grid;
               collapse it onto .canvas next time that file is touched.
               KNOWN GAP: .night does not remap the canvas tokens. The
               note on the rule itself says what to do about it.

   2026-10-17  SECTION WASHES (section 3a), plus --cream in all three theme
               blocks, which is the warm stop the washes end on. Promoted
               from knowledge-page.css, where four blue-and-gold gradients
               sat behind body[data-wash="N"] and one was dealt at random
               per session — a rotation no page could design against. The
               rotation is now four NAMED variants a page chooses on
               purpose, and the gradient values are carried over unchanged,
               because those are the ones that were reviewed.
               Why promote them at all: the system offered .sec.band and
               .sec.paper, two flat tints the pages barely used, so a Buzz
               page read white on white from the hero to the footer. These
               carry the brand's blue and gold instead of a grey step.
               The !important on the Knowledge page's dark rule is NOT
               carried over — it was there to beat body[data-wash="N"]
               specificity and nothing in the system needs it.
               First applied to /preview/buzz/ as a visual test, before the
               rest of the cluster follows.

   2026-10-17  3a amended after the first application: HEIGHT and OPAQUE
               CHILDREN notes added. Both came out of /preview/buzz/,
               where washes 2 and 4 on tall sections faded to white below
               the fold, and a card grid let the wash through only in the
               gutters.

   2026-10-17  NAV BRAND LOCKUP and BAR / MENU TWINS (sections 8 and 8a).
               A page may now put an inline glyph and a wordmark in the
               brand slot instead of the company logotype, which is what
               the product pages were already doing locally. And a nav
               whose right-hand items do not fit one row at phone width
               can carry each of them twice: .bar-only on the bar copy in
               .navr, .m-only on its twin at the end of .navmid. Below
               900px the bar copies are hidden and the twins appear inside
               the open menu, so exactly one copy of an item is rendered
               at any width and the closed bar stays one row tall.
               Promoted from the home page, which already paired a bar
               button with a menu item and still carries its own copy of
               those rules; that copy can go when the file is next
               touched. The open menu's row rule now excludes a button, so
               a CTA twin keeps its own padding and border rather than the
               menu-row treatment, and the separator rule skips it too.

   HOW TO USE IT
   Link this file first, then the page's own <style> for page-specific
   work only. If you find yourself redefining .btn, .card, .eyebrow,
   .rule, .faq, .nav or .foot in a page, stop — change it here instead.

   Fonts are NOT @import-ed. @import blocks rendering and must be the
   first rule, which breaks the moment anything is prepended. Each page
   puts this in <head> above this stylesheet:

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">

   And this viewport, with NO maximum-scale and NO user-scalable=0 —
   the live Buzz site blocks pinch zoom, which fails accessibility on a
   product sold to field clinicians:

     <meta name="viewport" content="width=device-width, initial-scale=1">

   DARK SURFACES: a dark hero or CTA band carries class="night". If the
   page also styles that wrapper with its own photo or gradient, give it
   BOTH classes. A deliberately light element inside a night band — a
   product UI mock, a screenshot frame — carries class="surface-light"
   to opt back out.

   PER-PAGE SURFACE TINT: a page may override --band, --line and --paper
   locally to carry its own identity (BuzzBrain's warm reading room against
   BuzzVoice's cool). That is theming, not drift, as long as it is only
   those surface tokens and it is commented. Everything else comes from
   here.

   PROHIBITIONS, all learned the hard way
   - No backdrop-filter. Diagnosed as the flicker cause.
   - No thick colored border on a rounded box. The border bends around
     the corner and reads as a generic AI-built layout. Use .acc-top or
     .acc-left below.
   - No full 999px pills on chips, tags or filter labels. Use --r-chip.
     A circle is reserved for things that are actually round: avatars,
     status dots, icon wells.
   - Never paste this file into the WordPress Additional CSS editor. Its
     linter cannot parse custom properties and reports "Expected RBRACE"
     on every one. Serve it as a file, or enqueue it from the child
     theme's functions.php. The separate .ss-article stylesheet avoids
     custom properties for exactly this reason and stays that way.
   - No dot bullets, no icon tiles, no yellow highlight boxes.
   - Do not hardcode a text color on a night band. Use the tokens; the
     band has already remapped them.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root{
  /* type */
  --display:'Rajdhani','Avenir Next Condensed','Arial Narrow',
    -apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* brand */
  --sky:#009ad1;
  --sky-ink:#0078a6;
  --sky-soft:#e3f3fa;
  --ink:#2A3D50;
  --gold:#FFD166;
  --gold-soft:#fff6db;
  --gold-ink:#9a7414;
  --action:#d91e43;
  --action-hover:#c01839;
  --action-soft:#fbe7eb;

  /* surfaces — a page may retint --band / --line / --paper locally */
  --ground:#ffffff;
  --card:#ffffff;
  --band:#f2f7fa;
  --paper:#fbf8f1;
  /* --cream is the warm end-stop of the section washes in 3a. Warmer than
     --paper; it is a gradient stop, not a section surface on its own. */
  --cream:#FDF6E9;

  /* canvas — the drafting surface in section 5. Two rule weights and the
     two stops of the base wash. The grid blue is the brand sky, written
     out here rather than derived from --sky, because .canvas must NOT
     follow a page or section accent. See the note on the rule itself. */
  --grid-major:rgba(0,154,209,.16);
  --grid-minor:rgba(0,154,209,.075);
  --canvas-a:#F7FBFD;
  --canvas-b:#EDF6FA;

  /* text */
  --text:#33475b;
  --muted:#5d6f80;

  /* lines */
  --cline:rgba(42,61,80,.16);
  --line:#d8e3ea;

  /* night — CTA bands and dark hero sections. These stay dark in BOTH
     themes, so a dark band looks deliberate rather than disappearing.
     --action-fixed is the button color for those bands and is NEVER
     redefined in the dark blocks below: --action flips to a light pink
     in dark mode, which would leave white button text unreadable on a
     band that did not flip with it. */
  --night:#11202d;
  --night-2:#183041;
  --night-text:#c9d8e4;
  --night-muted:#93a9bb;
  --night-line:rgba(255,255,255,.16);
  --night-sky:#8fd3ee;
  --action-fixed:#d91e43;
  --action-fixed-hover:#ef2a52;

  /* metrics */
  --wrap:1100px;
  --sec-pad:72px;
  --r-card:16px;
  --r-btn:6px;
  --r-soft:12px;
  /* The spine radius. Tight left, open right, like a ring binder.
     Chips, filter pills and inline tags only — not buttons, not cards. */
  --r-chip:6px 12px 12px 6px;
}

/* Dark mode. Two blocks, deliberately: the media query respects the OS
   unless the page has opted out with data-theme="light", and the explicit
   selector lets a page or a toggle force dark. BuzzVoice was missing the
   second one, which is why its toggle did nothing. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sky:#3fb8e8;
    --sky-ink:#7fd0f0;
    --sky-soft:#13303f;
    --ink:#e8f1f7;
    --gold-soft:#2e2615;
    --gold-ink:#f0c860;
    --action:#ff5c7a;
    --action-hover:#ff7d94;
    --action-soft:#331821;

    --ground:#0f1a24;
    --card:#182836;
    --band:#13222e;
    --paper:#1a2630;
    --cream:#241f14;

    --grid-major:rgba(143,211,238,.14);
    --grid-minor:rgba(143,211,238,.07);
    --canvas-a:#14222e;
    --canvas-b:#101c26;

    --text:#c9d8e4;
    --muted:#93a9bb;

    --cline:#2c4256;
    --line:#2c4256;

    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --sky:#3fb8e8;
  --sky-ink:#7fd0f0;
  --sky-soft:#13303f;
  --ink:#e8f1f7;
  --gold-soft:#2e2615;
  --gold-ink:#f0c860;
  --action:#ff5c7a;
  --action-hover:#ff7d94;
  --action-soft:#331821;

  --ground:#0f1a24;
  --card:#182836;
  --band:#13222e;
  --paper:#1a2630;
  --cream:#241f14;

  --grid-major:rgba(143,211,238,.14);
  --grid-minor:rgba(143,211,238,.07);
  --canvas-a:#14222e;
  --canvas-b:#101c26;

  --text:#c9d8e4;
  --muted:#93a9bb;

  --cline:#2c4256;
  --line:#2c4256;

  color-scheme:dark;
}


/* --------------------------------------------------------------------------
   2. BASE AND TYPOGRAPHY
   -------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{font-size:17px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--body);
  font-size:1rem;
  line-height:1.62;
  color:var(--text);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
}

/* Rajdhani is a condensed sans. Falling back to a serif was a mistake on
   the older pages — the page changed character entirely when the font
   failed to load. The --display stack keeps the shape. */
h1,h2,h3,h4,.display{
  font-family:var(--display);
  color:var(--ink);
  font-weight:600;
  margin:0 0 .45em;
  text-wrap:balance;
}

h1{font-size:clamp(2.4rem,6vw,3.7rem);line-height:1.04;letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.8vw,2.5rem);line-height:1.12}
h3{font-size:1.2rem;line-height:1.3}
h4{font-size:1rem;line-height:1.35}

/* Gap-driven layout. Every page in this cluster spaces blocks with flex or
   grid gap, so a default paragraph margin fights the layout everywhere.
   Prose that needs margins uses .prose, or the .ss-article stylesheet. */
p{margin:0}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}

a{color:var(--sky-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

strong,b{color:var(--ink);font-weight:800}

img{max-width:100%;height:auto}

.lede{font-size:1.1rem;color:var(--muted)}
.small{font-size:.88rem}

/* Visible focus ring. Several of the older pages removed outlines without
   replacing them, which makes the page unusable by keyboard. */
:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:3px}


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.sec{padding:var(--sec-pad) 0}
.sec.band{background:var(--band)}
.sec.paper{background:var(--paper)}
.sec.tight{padding:calc(var(--sec-pad) * .6) 0}


/* --------------------------------------------------------------------------
   3a. SECTION WASHES

   Four named gradient surfaces, for section backgrounds and for anything
   else that wants a ground rather than a flat tint. Promoted from
   /preview/knowledge/, where they lived in knowledge-page.css behind
   body[data-wash="N"] and one was dealt at random per session. The four
   gradient values below are COPIED UNCHANGED from that file — they are
   the ones that were reviewed, so do not re-tune them here. The Knowledge
   page keeps its own copy for now: its class is .wash, under a
   body[data-wash="N"] selector at higher specificity, so the two sets
   coexist. That copy goes when the page is next touched.

   Standalone classes, like .canvas, not .sec modifiers — a hero figure or
   a panel can take one too.

   WEIGHT, and this is the thing to get right. 1, 2 and 3 are
   HERO-WEIGHT: 1 casts blue and gold, 2 casts blue alone, 3 casts both
   and casts them hard. One of those belongs on a page once, maybe twice,
   where the content earns a lift. 4 is near-neutral, and 4 is the one for
   ordinary section alternation. A page that puts wash 3 on every other
   section will look seasick.

   HEIGHT, which is not visible in the values. 1 and 3 carry color at
   BOTH ends of their linear stop list, so they hold at any section
   height. 2 ends on #FAFCFD and 4 on #FCFAF6 — both white to the eye —
   so on a tall section the lower two thirds fade out and the section
   reads as plain white with a tinted strip across the top. It is not a
   fault in the gradient; those two were tuned for a short band. 3 is the
   only variant with a color event low down (its gold radial sits at
   92% 100%) and is the one that survives the tallest sections. This
   pulls against the weight note above, and the way out is to pick ONE
   tall section per page to carry a hero-weight wash rather than washing
   every tall section. A tall section with wash 2 or 4 on it is better
   off flat.

   OPAQUE CHILDREN. A wash behind a grid of .card boxes shows only in the
   gaps, because .card sets background:var(--card), which is white in
   light mode. A seventeen-card grid on a wash reads as a rendering fault
   rather than a treatment. Either give the cards a translucent
   background on that section, or leave the section unwashed.

   A wash is a BACKGROUND ONLY, exactly like .canvas. The border, radius
   and padding stay with whatever box it is applied to, and a section that
   sets its own flat background must drop it or the wash has nothing to
   paint. That includes .band and .paper: those are two-class selectors,
   so .sec.band outweighs a bare .wash4 whatever the source order. A
   section taking a wash drops .band / .paper rather than stacking them.

   NEVER ON .night. A night band sets its own dark surface, in both
   themes, and a wash would paint straight over it.

   CACHE BUSTING, not optional: a page that starts using a wash MUST bump
   the ?v= token on its preview-system.css link in the same commit. A
   browser holding an older copy of this file finds no .wash rule and
   renders that section with no background at all. The header records the
   same failure for .canvas — it has already happened once.
   -------------------------------------------------------------------------- */

.wash1{background:
  radial-gradient(110% 90% at 82% 10%,rgba(255,209,102,.26) 0%,rgba(255,209,102,0) 55%),
  radial-gradient(95% 80% at 10% 18%,rgba(0,154,209,.20) 0%,rgba(0,154,209,0) 60%),
  linear-gradient(168deg,#EAF4F9 0%,#F4F9FC 40%,var(--cream) 100%)}
.wash2{background:
  radial-gradient(120% 95% at 88% 6%,rgba(0,154,209,.16) 0%,rgba(0,154,209,0) 58%),
  linear-gradient(170deg,#E6F1F7 0%,#F2F8FB 46%,#FAFCFD 100%)}
.wash3{background:
  radial-gradient(100% 70% at 20% 0%,rgba(0,154,209,.28) 0%,rgba(0,154,209,0) 62%),
  radial-gradient(90% 80% at 92% 100%,rgba(255,209,102,.32) 0%,rgba(255,209,102,0) 60%),
  linear-gradient(165deg,#DCEDF6 0%,#EFF6FA 44%,#FDF6E9 100%)}
.wash4{background:
  linear-gradient(172deg,#F4F7F9 0%,#FAFBFC 55%,#FCFAF6 100%)}

/* Dark mode, in both blocks, same as every other theme-aware rule here.
   One shared treatment for 1-3: what separates them in light mode is how
   much blue and gold each carries, and that distinction does not survive
   at dark-surface opacities. 4 keeps a quieter gradient of its own so it
   stays the quiet one in both themes. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wash1,
  :root:not([data-theme="light"]) .wash2,
  :root:not([data-theme="light"]) .wash3{
    background:
      radial-gradient(110% 90% at 82% 10%,rgba(255,209,102,.10) 0%,rgba(255,209,102,0) 55%),
      radial-gradient(95% 80% at 10% 18%,rgba(0,154,209,.14) 0%,rgba(0,154,209,0) 60%),
      linear-gradient(168deg,#12212c 0%,#152632 40%,var(--cream) 100%);
  }
  :root:not([data-theme="light"]) .wash4{
    background:linear-gradient(172deg,#13212d 0%,#101c26 55%,#191f25 100%);
  }
}

:root[data-theme="dark"] .wash1,
:root[data-theme="dark"] .wash2,
:root[data-theme="dark"] .wash3{
  background:
    radial-gradient(110% 90% at 82% 10%,rgba(255,209,102,.10) 0%,rgba(255,209,102,0) 55%),
    radial-gradient(95% 80% at 10% 18%,rgba(0,154,209,.14) 0%,rgba(0,154,209,0) 60%),
    linear-gradient(168deg,#12212c 0%,#152632 40%,var(--cream) 100%);
}
:root[data-theme="dark"] .wash4{
  background:linear-gradient(172deg,#13212d 0%,#101c26 55%,#191f25 100%);
}


.sec-head{display:flex;flex-direction:column;gap:10px;max-width:720px;margin:0 0 36px}
.sec-head p{font-size:1.06rem;color:var(--muted)}

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sky);
}

/* Vertical stack. Used for card bodies and copy columns throughout. */
.col{display:flex;flex-direction:column;gap:10px;min-width:0}

.grid{display:grid;gap:20px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}


/* --------------------------------------------------------------------------
   4. BUTTONS AND CHIPS
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--body);
  font-weight:800;
  font-size:.95rem;
  line-height:1.2;
  padding:.72em 1.5em;
  border:2px solid var(--action);
  border-radius:var(--r-btn);
  background:var(--action);
  color:#fff;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--action-hover);border-color:var(--action-hover);
  color:#fff;text-decoration:none}

/* Neutral secondary. A red outline next to a red fill reads as two
   primaries, so the ghost drops the action color entirely. */
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:transparent;color:var(--ink);border-color:var(--sky)}

.btn.sky{background:var(--sky);border-color:var(--sky);color:#fff}
.btn.sky:hover{background:var(--sky-ink);border-color:var(--sky-ink)}

.btn.sm{font-size:.85rem;padding:.55em 1.1em}

.btn-row,.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* A chip is a label or a selectable filter, not a button. Spine radius. */
.chip{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--body);font-weight:700;font-size:.86rem;line-height:1.2;
  padding:7px 15px;
  border:1px solid var(--line);
  border-radius:var(--r-chip);
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.chip:hover{border-color:var(--sky);text-decoration:none}
.chip[aria-pressed="true"],.chip.on{
  background:var(--sky-soft);border-color:var(--sky);color:var(--sky-ink);
}
.chip.sm{font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 13px;color:var(--muted)}


/* --------------------------------------------------------------------------
   5. CARDS AND ACCENTS

   The accent rule is the single most distinctive thing in this system.
   An inset 2px line that stops short of the corners, never a thick border
   that bends around a radius.

   Usage:  <div class="card acc-top" style="--c:var(--gold)">
   Default accent is sky if --c is not set.
   -------------------------------------------------------------------------- */

.card{
  background:var(--card);
  border:1px solid var(--cline);
  border-radius:var(--r-card);
  padding:26px;
}
.card.flat{background:transparent;border:none;padding:0}

.acc-top,.acc-left{position:relative}

.acc-top::before{
  content:"";position:absolute;
  top:0;left:26px;right:26px;height:2px;
  background:var(--c,var(--sky));opacity:.7;border-radius:2px;
}

.acc-left::before{
  content:"";position:absolute;
  left:0;top:22px;bottom:22px;width:2px;
  background:var(--c,var(--sky));opacity:.7;border-radius:2px;
}

/* If ::before is already in use on a box, these do the same job on ::after. */
.acc-top-a::after{
  content:"";position:absolute;
  top:0;left:26px;right:26px;height:2px;
  background:var(--c,var(--sky));opacity:.7;border-radius:2px;
}
.acc-left-a::after{
  content:"";position:absolute;
  left:0;top:22px;bottom:22px;width:2px;
  background:var(--c,var(--sky));opacity:.7;border-radius:2px;
}

/* Square-edged elements may keep a plain border — no radius to bend.
   .stat is a number plus label; .sidebar is a heading plus paragraph. */
.stat{border-left:3px solid var(--c,var(--sky));padding:2px 0 2px 16px}
.stat .n{
  display:block;
  font-family:var(--display);
  font-weight:600;font-size:2.2rem;line-height:1;color:var(--ink);
}
.stat .l{display:block;font-size:.9rem;color:var(--muted);margin-top:5px}

.sidebar{
  border-left:3px solid var(--c,var(--sky));
  padding:4px 0 4px 16px;
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.sidebar h3{font-size:1.1rem;margin:0}
.sidebar p{font-size:.9rem;color:var(--muted)}

/* THE CANVAS. A surface that something gets drawn on: a faint drafting
   grid over a shallow wash, built from gradients only, so it costs no
   image request. Put it on demo and animation panels — anything a visitor
   presses — so the panel reads as a working surface before they press it
   rather than as a page that failed to load. It is a background only; the
   border, radius and padding stay with whatever box it is applied to, and
   a box that sets its own flat background must drop it or .canvas has
   nothing to paint.

   THE GRID BLUE IS HELD CONSTANT. It does not follow the section accent,
   so a demo in an Answer-colored or Bridge-colored section still draws a
   blue grid. The grid is saying "this is a drawing surface", not "this is
   the topic of this section", and letting it track the accent would give
   the site five different-looking canvases doing one job. Values taken
   from the Knowledge page's .uni-empty so the two match exactly; that
   page's copy is an empty state destroyed on first interaction, while
   this one is the standing surface and stays for the whole interaction.

   KNOWN GAP, recorded rather than fixed: .night (section 9) re-scopes the
   surface tokens but NOT these four, so a .canvas inside a night band
   paints the light grid over the light wash, which in light mode is a
   pale panel sitting on navy. Nothing on the site does that yet, which is
   why the override is not already written: four untested lines in a
   shared stylesheet get copied before they get checked. If you are the
   first to put a demo on a CTA band, add --grid-major, --grid-minor,
   --canvas-a and --canvas-b to the .night block with night values, the
   way .night already handles --card through --night-2, and look at it in
   both themes before you ship it. */
.canvas{
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 8px 100%,
    linear-gradient(165deg, var(--canvas-a) 0%, var(--canvas-b) 100%);
}


/* --------------------------------------------------------------------------
   6. LISTS AND CALLOUTS
   -------------------------------------------------------------------------- */

/* Hairline list with a short dash marker. Replaces dot bullets everywhere. */
.rule{list-style:none;margin:0;padding:0}
.rule li{
  position:relative;
  padding:11px 0 11px 20px;
  border-top:1px solid var(--cline);
  color:var(--muted);
}
.rule li:first-child{border-top:none;padding-top:0}
.rule li:first-child::before{top:.52em}
.rule li::before{
  content:"";position:absolute;left:0;top:1.28em;
  width:9px;height:1px;background:var(--sky);
}
.rule li strong{color:var(--ink)}

/* Compact variant for cards with several short items. */
.rule.tight li{padding:8px 0 8px 18px;font-size:.9rem}
.rule.tight li::before{top:1.05em;width:7px}
.rule.tight li:first-child::before{top:.42em}

/* Same hairline-and-dash treatment as a standalone block, for a principle
   or a short point that carries its own heading. NOT a list item. */
.tenet{position:relative;border-top:1px solid var(--cline);padding:16px 0 0 18px}
.tenet::before{content:"";position:absolute;left:0;top:29px;width:9px;height:1px;background:var(--sky)}
.tenet h3{font-size:1.15rem;margin:0 0 4px}
.tenet p{font-size:.92rem;color:var(--muted)}

/* .note is the gold callout. The home page's old yellow annotation box,
   also called .note, is retired — it was already marked deprecated. */
.note{
  background:var(--gold-soft);
  border-radius:var(--r-soft);
  padding:16px 20px;
  color:var(--gold-ink);
  font-size:.95rem;
}
.none{
  background:var(--action-soft);
  border-radius:var(--r-soft);
  padding:16px 20px;
  color:var(--ink);
  font-size:.95rem;
}
.note.inline,.none.inline{
  padding:7px 10px;border-radius:6px;font-size:.84rem;font-weight:700;color:var(--ink);
}

/* Closing line inside a card, separated by a hairline rather than a box. */
.close-line{
  margin-top:auto;padding-top:12px;
  border-top:1px solid var(--cline);
  font-size:.88rem;font-weight:700;color:var(--ink);
}

.quote{
  background:var(--card);
  border:1px solid var(--cline);
  border-radius:var(--r-card);
  padding:26px;
  position:relative;
}
.quote blockquote{
  margin:0 0 14px;
  font-family:var(--display);
  font-weight:500;font-size:1.25rem;line-height:1.38;color:var(--ink);
}
.quote cite{
  display:block;font-style:normal;font-size:.85rem;
  color:var(--muted);font-weight:700;
}


/* --------------------------------------------------------------------------
   7. FAQ ACCORDION

   No disclosure triangles. A thin sky plus that rotates into an x.
   Markup: .faq > details > summary + content. First item gets [open].
   -------------------------------------------------------------------------- */

.faq{display:flex;flex-direction:column;border-top:1px solid var(--cline);max-width:800px}

.faq details{border-bottom:1px solid var(--cline);padding:14px 0}

.faq summary{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  cursor:pointer;
  font-family:var(--body);
  font-weight:800;font-size:1.02rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sky-ink)}

.faq summary::after{
  content:"";flex:none;width:13px;height:13px;margin-right:4px;opacity:.85;
  background:
    linear-gradient(var(--sky),var(--sky)) center/100% 1.5px no-repeat,
    linear-gradient(var(--sky),var(--sky)) center/1.5px 100% no-repeat;
  transition:transform .25s ease;
}
.faq details[open] > summary::after{transform:rotate(45deg)}

.faq details > *:not(summary){margin-top:8px;font-size:.97rem;color:var(--muted)}


/* --------------------------------------------------------------------------
   8. NAV AND FOOTER — shared chrome
   -------------------------------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--cline);
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:64px;
}
.nav .brand{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);
  font-weight:600;font-size:1.3rem;color:var(--ink);
}
.nav .brand:hover{text-decoration:none}
.nav .brand img{height:26px;width:auto;display:block}

/* PRODUCT BRAND MARK. A page whose brand slot carries a product logo rather
   than the company logotype puts TWO images in the anchor, one for light
   surfaces and one for dark, and the rules below render exactly one of them.
   The class selector is deliberate: a bare .nav .brand img ties on
   specificity with .nav .logo img in nav-mono.css, which the same anchor
   also matches, so the height would be settled by stylesheet order rather
   than here. Both modifiers are scoped under .nav .brand so they cannot
   reach anything else.
   Each image carries its own width and height attributes, which give the
   box an aspect ratio before the file arrives, so the bar does not reflow as
   it loads. The two files share one ratio, so the reserved width is the same
   either way: 73.125px at this height.
   Both copies carry the same alt text, and the one that is not showing is
   hidden with display:none rather than visually, for the same reason as the
   bar and menu twins below - it leaves the tab order and the accessibility
   tree along with the layout, so the link has exactly one accessible name in
   either theme.
   This replaces an inline glyph-and-wordmark lockup, and no brand anchor in
   the cluster carries an inline SVG now. */
.nav .brand .brandmark{height:26px;width:auto;display:block;flex:none}
.nav .brand .dark-only{display:none}

/* The swap, written into BOTH dark mechanisms, the way every other
   theme-aware rule in this file is. The media query follows the operating
   system unless the page has opted out with data-theme="light"; the explicit
   selector lets a page or a toggle force dark. A picture element with a dark
   media query would honor only the first of the two, so the logo would stay
   wrong wherever a page drives its own theme toggle. That is why the swap is
   CSS and not markup. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav .brand .light-only{display:none}
  :root:not([data-theme="light"]) .nav .brand .dark-only{display:block}
}
:root[data-theme="dark"] .nav .brand .light-only{display:none}
:root[data-theme="dark"] .nav .brand .dark-only{display:block}

.navmid{display:flex;gap:26px;font-size:.92rem}
.navmid a{color:var(--text)}
.navmid a:hover{color:var(--sky-ink);text-decoration:none}

.navr{display:flex;align-items:center;gap:14px}
.navr .login{font-size:.92rem;color:var(--text)}

/* BAR AND MENU TWINS. A nav that cannot fit its right-hand items on one
   row at phone width carries each of them twice: the bar copy in .navr
   takes .bar-only, and its twin, as a last child of .navmid, takes
   .m-only. Section 8a hides one set and shows the other at the disclosure
   breakpoint, so exactly one copy of an item is ever rendered. Both are
   hidden with display:none rather than visually, so the hidden copy leaves
   the tab order and the accessibility tree along with the layout. A nav
   whose items already fit the bar needs neither class. The link list
   itself is never duplicated; only these two items are. */
.navmid .m-only{display:none}

/* A menu twin of a bar button stays a button. It keeps the button's own
   type and label color rather than the menu link treatment, and fills the
   menu width so it is a comfortable target. The type properties are
   restated because a page may put its own font on .navmid a. */
.navmid .m-only.btn{
  justify-content:center;
  width:100%;
  margin:14px 0 2px;
  font-family:var(--body);
  font-size:.95rem;
  font-weight:800;
  letter-spacing:normal;
  text-transform:none;
}
.navmid .m-only.btn,
.navmid .m-only.btn:hover{color:#fff}

.foot{
  background:var(--band);
  border-top:1px solid var(--cline);
  padding:44px 0 26px;
  font-size:.92rem;
}
.foot h4{
  font-family:var(--body);
  font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sky);margin:0 0 12px;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 8px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--sky-ink)}
.foot .r{
  border-top:1px solid var(--cline);
  margin-top:28px;padding-top:18px;
  color:var(--muted);font-size:.85rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
}

/* Thin footer for product pages that do not carry the full column set.
   NOTE: .foot.thin makes .wrap a flex row, so it does NOT take a .r block
   inside it — the .r would collapse to content width and its top rule
   would span only part of the footer. A footer using .r wants plain
   .foot. */
.foot.thin{padding:26px 0;background:transparent}
.foot.thin .wrap{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  font-size:.85rem;color:var(--muted);
}


/* --------------------------------------------------------------------------
   8a. MOBILE NAV DISCLOSURE — CSS only, no JavaScript

   Markup, inside .nav .wrap, with the checkbox BEFORE .navmid so the
   sibling combinator can reach it:

     <a class="logo brand" ...>…</a>
     <input class="navtoggle" type="checkbox" id="navtoggle" aria-label="Menu">
     <label class="navburger" for="navtoggle"><span></span></label>
     <div class="navmid">…links, then any .m-only twins…</div>
     <div class="navr">…login / CTA, each .bar-only if it has a twin…</div>

   A page with no .navmid (a product page whose nav is just a logo and a
   CTA) needs none of this — leave its nav alone.

   Why a checkbox and not <details>: current Chrome puts closed-details
   content behind ::details-content with content-visibility:hidden, which
   author CSS cannot reliably force open, so "details on mobile, inline
   row on desktop" breaks there. The checkbox works in every engine, needs
   no JS, and keeps one copy of the links instead of a duplicate list per
   breakpoint.

   The checkbox is visually hidden but still focusable and still in the
   tab order, so the menu is keyboard-operable (tab to it, space to
   toggle). Do not replace that with display:none, which removes it from
   the tab order and from the accessibility tree.

   Above 900px the checkbox and burger are hidden and .navmid is the
   ordinary inline row, so the checked state is simply ignored.

   An item that does not fit the bar at phone width is TWINNED rather than
   moved. CSS cannot reparent an element, so the bar copy and the menu copy
   are two anchors and this breakpoint hides one of them; section 8 defines
   .bar-only and .m-only and says which. That is still one copy of the link
   list - only the right-hand items are twinned - so the reason this is a
   checkbox rather than a duplicated list per breakpoint is unchanged.
   -------------------------------------------------------------------------- */

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

@media (max-width:900px){
  /* The wrap gains a second row, but ONLY when the menu is open — the
     closed bar stays one row tall, which the home page's hero depends on. */
  .nav .wrap{flex-wrap:wrap;gap:12px}

  .logo,.brand{order:1}
  .navr{order:2;margin-left:auto}
  .navburger{order:3}
  .navmid{order:4;flex-basis:100%;display:none}

  /* The bar drops the items that have menu twins. A Log in chip and a
     solid CTA sitting beside the burger need more width than a 320px
     viewport gives, and the row wraps; the closed bar staying exactly one
     row tall is what the home page's hero depends on. The twins below
     carry both items inside the open menu instead. */
  .navr .bar-only{display:none}

  .navburger{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;cursor:pointer;
    border:1.5px solid var(--line);border-radius:var(--r-chip);
    background:var(--card);
  }
  .navburger span{
    display:block;position:relative;
    width:17px;height:1.5px;background:var(--ink);
    transition:background .2s ease;
  }
  .navburger span::before,
  .navburger span::after{
    content:"";position:absolute;left:0;
    width:17px;height:1.5px;background:var(--ink);
    transition:transform .2s ease;
  }
  .navburger span::before{top:-5.5px}
  .navburger span::after{top:5.5px}

  /* Lines collapse into an x — the same gesture as the .faq plus-to-x. */
  .navtoggle:checked ~ .navburger span{background:transparent}
  .navtoggle:checked ~ .navburger span::before{transform:translateY(5.5px) rotate(45deg)}
  .navtoggle:checked ~ .navburger span::after{transform:translateY(-5.5px) rotate(-45deg)}

  .navtoggle:focus-visible ~ .navburger{outline:2px solid var(--sky);outline-offset:2px}

  /* The open list. It carries its own background because on the home page
     the nav is transparent over a photograph. */
  .navtoggle:checked ~ .navmid{
    display:flex;flex-direction:column;gap:0;
    margin:0 -24px -4px;padding:4px 24px 8px;
    background:var(--ground);
    border-top:1px solid var(--cline);
  }
  /* Menu rows. A twin that is a button is excluded from both rules: it
     keeps the padding and the border the button itself sets. */
  .navtoggle:checked ~ .navmid a:not(.btn){
    padding:13px 0;
    border-bottom:1px solid var(--cline);
  }
  .navtoggle:checked ~ .navmid a:not(.btn):last-child{border-bottom:none}

  /* The twins, shown only while the menu is open. */
  .navtoggle:checked ~ .navmid .m-only{display:flex}
}


/* --------------------------------------------------------------------------
   9. NIGHT BANDS — dark heroes and CTA sections, same in both themes

   A night band REDEFINES THE TOKENS rather than restating every rule.
   Everything inside — headings, bold runs, ledes, rules, cards, buttons,
   links, the FAQ — then resolves to night-appropriate values on its own.
   This is why there is no long list of .night .foo overrides: the earlier
   version had one, and it kept springing leaks (navy bold text on navy,
   a CTA that flipped to pink in dark mode).

   Consequence worth knowing: --action resolves to --action-fixed inside a
   band, so a primary CTA keeps the same red in both themes. The band does
   not flip, so neither should the button on it.
   -------------------------------------------------------------------------- */

.night{
  --ink:#ffffff;
  --text:var(--night-text);
  --muted:var(--night-muted);
  --cline:var(--night-line);
  --line:var(--night-line);
  --sky:var(--night-sky);
  --sky-ink:var(--night-sky);
  --sky-soft:rgba(255,255,255,.08);
  --action:var(--action-fixed);
  --action-hover:var(--action-fixed-hover);
  --action-soft:rgba(255,255,255,.10);

  background:var(--night);
  color:var(--night-text);
}

.night .card{background:var(--night-2)}
.night .chip{background:transparent;color:#fff;border-color:var(--night-line)}

/* A primary CTA on navy. The glow does the vibrance; brightening the red
   itself would only drop the contrast of the white label on top of it. */
.night .btn{
  box-shadow:0 0 0 1px rgba(255,255,255,.10),
             0 12px 28px -10px rgba(217,30,67,.85);
}
.night .btn:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.18),
             0 14px 34px -10px rgba(239,42,82,1);
}

/* Secondary action on navy: white label, visible border, no glow. */
.night .btn.ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
  box-shadow:none;
}
.night .btn.ghost:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:#fff;
  box-shadow:none;
}

/* A deliberately light element inside a night band: a product UI mock, a
   screenshot frame, anything depicting the app rather than the page. It
   opts back out of the band's tokens. Literal values, because the point
   is that it does NOT follow the surface it sits on. */
.surface-light{
  --ink:#2A3D50;
  --text:#33475b;
  --muted:#5d6f80;
  --card:#ffffff;
  --band:#f2f7fa;
  --line:#d8e3ea;
  --cline:rgba(42,61,80,.16);
  --sky:#009ad1;
  --sky-ink:#0078a6;
  --sky-soft:#e3f3fa;
  --action:#d91e43;
  --action-soft:#fbe7eb;
  color:var(--text);
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE — one set of breakpoints, 900 and 520
   -------------------------------------------------------------------------- */

@media (max-width:900px){
  :root{--sec-pad:52px}
  .grid.c3,.grid.c4,.grid.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:22px}
  .acc-top::before,.acc-top-a::after{left:22px;right:22px}
}

@media (max-width:520px){
  html{font-size:16px}
  .grid.c2,.grid.c3,.grid.c4,.grid.c5{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  /* The open menu's negative margin must track .wrap's padding. */
  .navtoggle:checked ~ .navmid{margin-left:-16px;margin-right:-16px;
    padding-left:16px;padding-right:16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media print{
  .nav,.foot,.btn{display:none}
  body{background:#fff;color:#000}
}