/* ============================================================================
   Welcome kit stylesheet.
   Extracted verbatim from the original single-file kit; the design tokens
   below are the whole system, so start there before touching anything else.
   ========================================================================= */

/* ============================================================================
   DESIGN TOKENS

   Two systems layered on top of each other:

   1. The ROI brand palette, copied value-for-value from the theme on
      roitechnologyinc.com, so this subdomain reads as part of the same site.
      Dark is the default there, and it is the default here.

   2. The wayfinding system this document was built around, re-expressed in
      those brand colours. Colour is semantic here, not decorative: green
      routes to us, blue routes through your own organization, amber means
      slow down, red means stop.

   Each semantic colour has two forms, and picking the wrong one is the easiest
   way to break contrast:

     --*-fill   a dark, saturated block that always carries WHITE text.
                Identical in both themes. Use for plates, badges, table cells.
     --*-line   the bright brand value, for borders, rules, icons and coloured
                text sitting ON a surface. Flips per theme, because #22C55E
                reads beautifully on navy and disappears on white.

   The brand's bright values (#22C55E, #3B82F6 …) are deliberately never used
   behind white text — at 2:1 they fail WCAG badly. That is what -fill is for.
   ========================================================================= */
:root{
  color-scheme: dark;

  /* ---- brand palette — identical to the main site ---------------------- */
  --roi-primary:       #3B82F6;
  --roi-primary-hover: #60A5FA;
  --roi-accent:        #F97316;
  --roi-accent-hover:  #FB923C;
  --roi-cyan:          #06B6D4;
  --roi-success:       #22C55E;
  --roi-warning:       #F59E0B;
  --roi-error:         #EF4444;
  --roi-navy:          #0A0E1A;

  /* ---- surfaces and text — dark, the default --------------------------- */
  --color-bg:             #0A0E1A;
  --color-surface:        #141B2D;
  --color-surface-hover:  #1A2340;
  --color-border:         rgba(255,255,255,.09);
  --color-border-hover:   rgba(255,255,255,.16);
  --color-text:           #E2E8F0;
  --color-text-bright:    #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #94A3B8;

  /* The band — masthead, hero, tab rail, ticket writer, footer.

     These follow the theme. An earlier version pinned them navy in both modes
     to echo the main site's sticky header, but that header is a 60px strip
     whereas the band here is most of the page: in light mode the top half
     stayed black and it read as a broken toggle, not a design choice.

     Kept as its own token set rather than folded into --color-* because the
     band is a distinct surface — text on it needs its own ramp, and the
     interactive chips on it (tabs, the toggle) need their own fills. */
  --band:           #0A0E1A;
  --band-rgb:       10,14,26;      /* for gradients that need band-at-zero-alpha */
  --band-2:         #111A2E;
  --band-text:      #F8FAFC;
  --band-soft:      rgba(248,250,252,.74);
  --band-faint:     rgba(248,250,252,.55);
  --band-border:    rgba(255,255,255,.12);
  --band-chip:      rgba(255,255,255,.045);
  --band-chip-hover:rgba(255,255,255,.10);
  --band-inset:     rgba(255,255,255,.07);   /* inputs, output block */
  --band-inset-2:   rgba(255,255,255,.12);
  --rail-shadow:    0 6px 24px rgba(0,0,0,.35);
  --hero-glow-1:    rgba(59,130,246,.20);
  --hero-glow-2:    rgba(249,115,22,.14);

  /* ---- depth and glow --------------------------------------------------- */
  --shadow-card:       0 4px 24px rgba(0,0,0,.3);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(59,130,246,.15);
  --glow-blue:         0 0 20px rgba(59,130,246,.3);
  --glow-orange:       0 0 20px rgba(249,115,22,.3);
  --glow-cyan:         0 0 20px rgba(6,182,212,.3);
  --glow-success:      0 0 20px rgba(34,197,94,.3);
  --glow-error:        0 0 24px rgba(239,68,68,.38);
  --gradient-bar:      linear-gradient(90deg,#3B82F6,#F97316);

  /* ---- semantic wayfinding: solid fills (constant across themes) -------- */
  --route-us-fill:  #15803D;
  --route-you-fill: #1D4ED8;
  --signal-fill:    #B45309;
  --stop-fill:      #B91C1C;
  --neutral-fill:   #334155;
  --neutral-fill-2: #475569;

  /* ---- semantic wayfinding: lines, icons, coloured text ---------------- */
  --route-us-line:  #22C55E;
  --route-you-line: #3B82F6;
  --signal-line:    #F59E0B;
  --stop-line:      #EF4444;
  --accent-line:    #F97316;

  /* ---- legacy aliases -------------------------------------------------
     The component rules below were written against these names. Keeping them
     means the restyle is a token change, not a rewrite of 500 lines. */
  --ink:        var(--color-text);
  --ink-2:      var(--color-text-bright);
  --ink-soft:   var(--color-text-secondary);
  --ink-faint:  var(--color-text-muted);
  --paper:      var(--color-bg);
  --surface:    var(--color-surface);
  --rule:       var(--color-border);
  --rule-soft:  rgba(255,255,255,.10);
  --route-us:   var(--route-us-line);
  --route-you:  var(--route-you-line);
  --signal:     var(--signal-line);
  --stop:       var(--stop-line);

  /* ---- type — the main site's stacks ----------------------------------- */
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", SFMono-Regular,
                  "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* ---- geometry and motion --------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --t-fast:     .15s ease-out;
  --t-base:     .2s ease-out;
  --focus-ring: var(--roi-accent);

  --pad:        clamp(20px, 4vw, 56px);
  --maxw:       1180px;
}

[data-theme="light"]{
  color-scheme: light;

  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-surface-hover:  #F1F5F9;
  --color-border:         rgba(0,0,0,.10);
  --color-border-hover:   rgba(0,0,0,.18);
  --color-text:           #1E293B;
  --color-text-bright:    #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #64748B;

  --shadow-card:       0 4px 24px rgba(0,0,0,.08);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,.14);
  /* The main site drops glows entirely in light mode — they read as smudges on
     white. Keep a faint tinted ring so hover still has somewhere to go. */
  --glow-blue:         0 0 0 1px rgba(59,130,246,.35);
  --glow-orange:       0 0 0 1px rgba(249,115,22,.35);
  --glow-cyan:         0 0 0 1px rgba(6,182,212,.35);
  --glow-success:      0 0 0 1px rgba(34,197,94,.35);
  --glow-error:        0 0 0 2px rgba(239,68,68,.30);

  --rule-soft:  #E2E8F0;

  /* The band, inverted. --band and --band-text swap together, which is what
     makes rules like "selected tab = band-text on band" correct in both modes
     without a single light-mode override. */
  --band:           #FFFFFF;
  --band-rgb:       255,255,255;
  --band-2:         #F1F5F9;
  --band-text:      #0F172A;
  --band-soft:      #475569;
  --band-faint:     #64748B;
  --band-border:    rgba(0,0,0,.10);
  --band-chip:      #F1F5F9;
  --band-chip-hover:#E2E8F0;
  --band-inset:     #FFFFFF;
  --band-inset-2:   #F1F5F9;
  --rail-shadow:    0 4px 16px rgba(0,0,0,.07);
  --hero-glow-1:    rgba(59,130,246,.10);
  --hero-glow-2:    rgba(249,115,22,.07);

  /* Bright-on-white fails; drop each line colour to its readable twin. */
  --route-us-line:  #15803D;
  --route-you-line: #1D4ED8;
  --signal-line:    #B45309;
  --stop-line:      #B91C1C;
  --accent-line:    #C2410C;
}

@media (prefers-reduced-motion:reduce){
  :root{ --t-fast:0ms; --t-base:0ms; }
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--t-base), color var(--t-base);
}

/* One focus style for the whole document, in the brand accent. Never removed —
   only replaced, per the accessibility policy. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  /* Was --ink-faint. At .66rem that is small text, and #64748B on navy is
     3.4:1 — under the 4.5:1 floor. Secondary clears it at 6.7:1. */
  color:var(--ink-soft);
  margin:0 0 .7em;
  display:block;
}
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:800; margin:0;
  color:var(--color-text-bright);
}
h1{ font-size:clamp(2.1rem,5.6vw,4.1rem); line-height:.96; letter-spacing:-.035em; }
h2{ font-size:clamp(1.5rem,3vw,2.35rem); line-height:1.03; letter-spacing:-.028em; }
h3{ font-size:clamp(1.06rem,1.6vw,1.32rem); line-height:1.18; letter-spacing:-.018em; }
h4{ font-size:1rem; line-height:1.25; letter-spacing:-.01em; }
p{ margin:0 0 1em; max-width:66ch; }
p:last-child{ margin-bottom:0; }
a{
  color:var(--route-you-line); text-underline-offset:.18em;
  text-decoration-thickness:1.5px; transition:color var(--t-fast);
}
a:hover{ color:var(--roi-accent); }
strong{ font-weight:700; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* ============================ MASTHEAD ============================ */
.masthead{ background:var(--band); color:var(--band-text); position:relative; overflow:hidden; }
/* Two soft light sources — brand blue from the left, accent orange from the
   right — the same trick the main site's hero uses. Sits under the content and
   is purely atmospheric, so it is hidden from assistive tech and from print. */
.masthead::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60ch 40ch at 8% -10%,  var(--hero-glow-1), transparent 60%),
    radial-gradient(50ch 34ch at 96% 6%,   var(--hero-glow-2), transparent 62%);
}
.masthead > *{ position:relative; z-index:1; }

.masthead-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:12px;
  border-bottom:1px solid var(--band-border);
  font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.masthead-bar .org{ font-weight:600; color:var(--band-text); }
.masthead-bar .bar-right{ display:flex; align-items:center; gap:14px; }
.masthead-bar .meta{ color:var(--band-faint); }

/* ---------- theme toggle ---------- */
.theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:7px 13px; cursor:pointer;
  background:var(--band-chip);
  border:1px solid var(--band-border);
  border-radius:var(--radius-full);
  color:var(--band-soft);
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background-color var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), box-shadow var(--t-fast);
}
.theme-toggle:hover{
  color:var(--band-text); background:var(--band-chip-hover);
  border-color:var(--color-border-hover); box-shadow:var(--glow-orange);
}
.theme-toggle svg{ width:15px; height:15px; flex:0 0 auto; }
/* Only the icon for the mode you would switch TO is shown. */
.theme-toggle .i-sun{ display:none; }
.theme-toggle .i-moon{ display:block; }
[data-theme="light"] .theme-toggle .i-sun{ display:block; }
[data-theme="light"] .theme-toggle .i-moon{ display:none; }
.theme-toggle .tt-label::after{ content:"Dark"; }
[data-theme="light"] .theme-toggle .tt-label::after{ content:"Light"; }

.hero{ padding-block:clamp(34px,5.5vw,68px) clamp(30px,4.5vw,54px); }
.hero h1{ color:var(--band-text); max-width:19ch; }
.hero .sub{
  margin-top:1.1em; font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--band-soft); max-width:56ch; line-height:1.5;
}
.hero .sub strong{ color:var(--band-text); }
/* Was an inline style on the element; moved here so it themes with everything else. */
.hero .eyebrow{ color:var(--band-faint); }

/* ---------- the two routing plates: the signature element ---------- */
.routes{
  display:grid; gap:14px; margin-top:clamp(26px,3.5vw,40px);
  grid-template-columns:1fr 1fr auto;
}
@media (max-width:900px){ .routes{ grid-template-columns:1fr; } }

.plate{
  position:relative; display:block; width:100%; text-align:left;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  padding:20px 22px 22px;
  color:#fff; font-family:inherit; font-size:1rem;
  cursor:pointer; overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}
.plate:hover{ filter:brightness(1.1); box-shadow:var(--shadow-card-hover); }
@media (prefers-reduced-motion:no-preference){
  .plate:hover{ transform:translateY(-2px); }
}
.plate--us:hover{  box-shadow:var(--shadow-card), var(--glow-success); }
.plate--you:hover{ box-shadow:var(--shadow-card), var(--glow-blue); }
.plate--us{ background:var(--route-us-fill); }
.plate--you{ background:var(--route-you-fill); }
.plate .plate-code{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.72); display:block;
}
.plate .plate-title{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.18rem,2.1vw,1.62rem); line-height:1.08;
  letter-spacing:-.025em; margin-top:.5em;
}
.plate .plate-dest{
  display:flex; align-items:baseline; gap:.5em; margin-top:.7em;
  font-size:.95rem; color:rgba(255,255,255,.92);
}
.plate .chev{ flex:0 0 auto; }
.plate .plate-more{
  margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.26);
  font-size:.9rem; color:rgba(255,255,255,.9);
  display:none;
}
.plate[aria-expanded="true"] .plate-more{ display:block; }
.plate .plate-more ul{ margin:0; padding-left:1.1em; }
.plate .plate-more li{ margin-bottom:.4em; }
.plate .plate-more li:last-child{ margin-bottom:0; }
.plate-hint{
  position:absolute; right:18px; bottom:16px;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.plate[aria-expanded="true"] .plate-hint{ display:none; }
.plate:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---------- QR plate ---------- */
.qr-plate{
  background:#fff; border:1px solid var(--band-border);
  border-radius:var(--radius-lg); padding:16px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  min-width:172px; align-self:start;
}
.qr-plate svg{ display:block; width:132px; height:132px; }
.qr-plate .qr-cap{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:#475569; text-align:center;
  line-height:1.5;
}
.qr-plate .qr-cap a{ display:none; }
/* On a phone you are already holding the device, so the QR stops being the
   point — it shrinks and yields space to a tappable link. */
@media (max-width:900px){
  .qr-plate{ flex-direction:row; align-items:center; gap:16px; text-align:left; }
  .qr-plate svg{ width:88px; height:88px; flex:0 0 auto; }
  .qr-plate .qr-cap{ text-align:left; }
  .qr-plate .qr-cap a{ display:block; font-size:.78rem; letter-spacing:0;
    text-transform:none; margin-top:.5em; color:var(--route-you); font-weight:600; }
  .plate{ padding-bottom:38px; }
}

/* ============================ TAB RAIL ============================
   These read as navigation now. Previously they were low-contrast text on a
   near-identical band — the selected one differed by a 4px underline and a
   shade of white, so people scrolled past the whole rail without registering
   it was a control. Fixes, in order of how much each one did:

     · every tab gets a visible chip (surface + border), so it looks pressable
       when it isn't selected, not just when it is
     · the selected tab inverts to a lit surface with a full-width accent bar
       and a glow, instead of a hairline underline
     · 44px minimum height per WCAG 2.2 target size
     · a fade on the right edge that only appears when the rail actually
       overflows, so the scroll affordance is honest
   ================================================================= */
.rail{
  position:sticky; top:0; z-index:40;
  background:var(--band);
  border-bottom:1px solid var(--band-border);
  box-shadow:var(--rail-shadow);
}
.rail-wrap{ position:relative; max-width:var(--maxw); margin:0 auto; }
/* Honest scroll hint: the fade is painted by the scroller itself, so it is
   only visible while there is somewhere left to scroll. */
.rail-wrap::after{
  content:""; position:absolute; inset-block:0; right:0; width:56px;
  pointer-events:none; z-index:1;
  background:linear-gradient(90deg,rgba(var(--band-rgb),0),var(--band) 78%);
  opacity:0; transition:opacity var(--t-base);
}
.rail-wrap[data-overflowing="true"]::after{ opacity:1; }

.rail-inner{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:10px max(8px,calc(var(--pad) - 14px));
  scroll-padding-inline:var(--pad);
}
.rail-inner::-webkit-scrollbar{ display:none; }

.tab{
  flex:0 0 auto; cursor:pointer; position:relative; overflow:hidden;
  min-height:44px;
  padding:8px 16px 9px; color:var(--band-soft);
  background:var(--band-chip);
  border:1px solid var(--band-border);
  border-radius:var(--radius-md);
  font-family:var(--font-body); text-align:left;
  display:flex; flex-direction:column; gap:2px; min-width:0;
  transition:background-color var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), box-shadow var(--t-fast);
}
.tab .t-code{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.75;
}
.tab .t-name{
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  letter-spacing:-.012em; white-space:nowrap;
}
/* The lit bar across the top of the selected tab. */
.tab::before{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:var(--accent-line); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base);
}
.tab:hover{
  color:var(--band-text);
  background:var(--band-chip-hover);
  border-color:var(--color-border-hover);
}
.tab[aria-selected="true"]{
  color:var(--band);
  background:var(--band-text);
  border-color:var(--band-text);
  box-shadow:var(--glow-orange);
}
.tab[aria-selected="true"] .t-code{ opacity:.62; }
.tab[aria-selected="true"] .t-name{ font-weight:700; }
.tab[aria-selected="true"]::before{ transform:scaleX(1); }
/* The rail keeps the section's wayfinding colour, but on the bar rather than
   as the tab's own colour — the selected chip stays white for contrast. */
.tab[aria-selected="true"].c-us::before{     background:var(--roi-success); }
.tab[aria-selected="true"].c-you::before{    background:var(--roi-primary); }
.tab[aria-selected="true"].c-signal::before{ background:var(--roi-warning); }
.tab[aria-selected="true"].c-stop::before{   background:var(--roi-error); }
.tab:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px;
  box-shadow:var(--glow-orange);
}

/* ============================ PANELS ============================ */
.panel{ padding-block:clamp(30px,4.5vw,58px) clamp(44px,6vw,84px); }
.panel[hidden]{ display:none; }
.panel-head{ max-width:62ch; margin-bottom:clamp(26px,3.5vw,40px); }
.panel-head h2{ margin-bottom:.5em; }
.panel-head .lede{ font-size:clamp(1rem,1.35vw,1.14rem); color:var(--ink-soft); }

/* ---------- generic card ---------- */
.card{
  background:var(--surface); border-radius:var(--radius-lg); padding:22px 24px;
  border:1px solid var(--color-border);
  border-top:4px solid var(--rule);
  box-shadow:var(--shadow-card);
  transition:border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.card:hover{ border-color:var(--color-border-hover); box-shadow:var(--shadow-card-hover); }
@media (prefers-reduced-motion:no-preference){
  .card:hover{ transform:translateY(-2px); }
}
.card--us:hover{     box-shadow:var(--shadow-card), var(--glow-success); }
.card--you:hover{    box-shadow:var(--shadow-card), var(--glow-blue); }
.card--signal:hover{ box-shadow:var(--shadow-card), var(--glow-orange); }
.card--stop:hover{   box-shadow:var(--shadow-card), var(--glow-error); }
.card > h3{ margin-bottom:.55em; }
.card p{ color:var(--ink-soft); }
.card--us{ border-top-color:var(--route-us); }
.card--you{ border-top-color:var(--route-you); }
.card--signal{ border-top-color:var(--signal); }
.card--stop{ border-top-color:var(--stop); }

.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:940px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.section{ margin-top:clamp(34px,4.5vw,54px); }
.section > .eyebrow{ padding-bottom:.7em; border-bottom:2px solid var(--rule); margin-bottom:1.4em; }

/* ---------- channel blocks ---------- */
.channel{
  background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-border); box-shadow:var(--shadow-card);
  display:grid; grid-template-columns:76px 1fr;
}
@media (max-width:520px){ .channel{ grid-template-columns:58px 1fr; } }
.channel-mark{
  display:flex; align-items:center; justify-content:center;
  /* -fill, not the bright line colour: these carry a white icon, and white on
     #22C55E is 2.1:1 — under even the 3:1 bar for graphical objects. */
  background:var(--route-us-fill); color:#fff;
}
.channel--phone .channel-mark{ background:var(--stop-fill); }
.channel-body{ padding:20px 22px; }
.channel-body h3{ margin-bottom:.3em; }
.channel-rank{
  display:inline-block; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.17em; text-transform:uppercase; font-weight:700;
  color:var(--route-us); margin-bottom:.55em;
}
.channel-rank--stop{ color:var(--stop); }

/* The tray icon is the one thing here a person has to recognise visually,
   so it gets a real screenshot slot rather than a description. */
/* A tray-icon screenshot is a handful of pixels blown up by whatever tool took
   it. Cap it hard: a system tray rendered 400px wide reads as a diagram of a
   taskbar, not as the thing you are looking for down by your clock. */
.tray-shot img{
  display:block; width:auto; height:auto;
  max-width:min(100%, 260px); max-height:72px;
  object-fit:contain; object-position:left center;
  border:1px solid var(--color-border-hover); border-radius:var(--radius-sm);
  background:var(--color-bg); padding:6px 8px;
}
.tray-shot .tray-placeholder{
  border:2px dashed var(--color-border-hover); border-radius:var(--radius-md); padding:20px 18px;
  background:var(--color-bg); text-align:center;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint); line-height:1.8;
}
.tray-shot .tray-placeholder b{ display:block; color:var(--ink-soft); font-size:.66rem; }
.channel-val{
  font-family:var(--font-mono); font-size:1.02rem; font-weight:600;
  color:var(--ink); word-break:break-word; display:block; margin-bottom:.6em;
}
.channel-when{
  font-size:.92rem; color:var(--ink-soft); margin:0;
}
.channel-when b{ color:var(--ink); font-weight:700; }

/* ---------- priority table ---------- */
.ptable{ background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-border); box-shadow:var(--shadow-card); }
.prow{
  display:grid; grid-template-columns:88px 1fr 150px 118px;
  gap:0; border-top:1px solid var(--rule-soft);
}
.prow:first-child{ border-top:0; }
.prow > div{ padding:15px 16px; }
.pcode{
  font-family:var(--font-mono); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; color:#fff; display:flex; align-items:flex-start;
}
.prow--1 .pcode{ background:var(--stop-fill); }
.prow--2 .pcode{ background:var(--signal-fill); }
.prow--3 .pcode{ background:var(--route-you-fill); }
.prow--4 .pcode{ background:var(--neutral-fill-2); }
.prow--5 .pcode,.prow--6 .pcode{ background:var(--neutral-fill); }
.pname{ font-family:var(--font-display); font-weight:800; letter-spacing:-.015em; }
.pname span{ display:block; font-family:var(--font-body); font-weight:400;
  font-size:.9rem; color:var(--ink-soft); letter-spacing:0; margin-top:.25em; }
.presp{ font-family:var(--font-mono); font-size:.85rem; color:var(--ink); }
.pwho{ font-size:.85rem; color:var(--ink-soft); }
.ptable-head{
  display:grid; grid-template-columns:88px 1fr 150px 118px;
  background:var(--band-2); color:var(--band-soft);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.ptable-head > div{ padding:11px 16px; }
@media (max-width:780px){
  .ptable-head{ display:none; }
  .prow{ grid-template-columns:64px 1fr; }
  .prow .presp,.prow .pwho{ grid-column:2; padding-top:0; }
  .prow .pcode{ align-items:center; justify-content:center; }
  .presp::before{ content:"Response: "; color:var(--ink-soft); }
  .pwho::before{ content:"Best via: "; }
}

/* ---------- steps / numbered flow ---------- */
.flow{ counter-reset:step; display:grid; gap:1px; background:var(--rule-soft); border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--color-border); box-shadow:var(--shadow-card); }
.flow li{
  counter-increment:step; list-style:none; background:var(--surface);
  padding:16px 20px 16px 62px; position:relative; font-size:.96rem;
}
.flow li::before{
  content:counter(step); position:absolute; left:20px; top:16px;
  font-family:var(--font-mono); font-weight:700; font-size:.82rem;
  color:var(--route-you-line);
}
.flow{ margin:0; padding:0; }

/* ---------- compare: bad vs good ---------- */
.compare{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .compare{ grid-template-columns:1fr; } }
.spec{ background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-border); box-shadow:var(--shadow-card); }
.spec-head{
  padding:12px 18px; color:#fff; display:flex; align-items:center; gap:10px;
  position:relative;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.spec--bad .spec-head{ background:var(--stop-fill); }
.spec--good .spec-head{ background:var(--route-us-fill); }
.spec-body{ padding:18px; }
.spec-body .quote{
  font-family:var(--font-mono); font-size:.9rem; line-height:1.6;
  background:var(--color-bg); padding:14px 16px; border-radius:var(--radius-sm);
  color:var(--ink); white-space:pre-wrap; margin:0 0 14px; max-width:none;
}
.spec-body .why{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* ---------- numbered checklist ---------- */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--rule-soft); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-border); box-shadow:var(--shadow-card);
  counter-reset:cl; }
.checklist li{
  background:var(--surface); padding:15px 20px 15px 58px; position:relative;
  font-size:.96rem; counter-increment:cl;
}
.checklist li::before{
  content:counter(cl); position:absolute; left:18px; top:14px;
  width:26px; height:26px; border-radius:50%;
  background:var(--route-you-fill); color:#fff;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.checklist li b{ display:block; }
.checklist li span{ color:var(--ink-soft); font-size:.9rem; }
.checklist li .applinks{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.checklist li .applinks a{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; font-weight:600;
  padding:8px 12px; border-radius:var(--radius-sm); background:var(--route-you-fill); color:#fff;
}
.checklist li .applinks a:hover{ background:var(--route-us-fill); box-shadow:var(--glow-success); }

/* ---------- key/value strips ---------- */
.strip{ background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-border); box-shadow:var(--shadow-card); }
.strip-row{
  display:grid; grid-template-columns:210px 1fr; gap:0;
  border-top:1px solid var(--rule-soft);
}
.strip-row:first-child{ border-top:0; }
.strip-row > div{ padding:15px 18px; }
.strip-k{ font-weight:700; }
.strip-k span{ display:block; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
  font-weight:400; margin-top:.3em; }
.strip-v{ color:var(--ink-soft); font-size:.95rem; }
@media (max-width:700px){
  .strip-row{ grid-template-columns:1fr; }
  .strip-v{ padding-top:0; }
}

/* ---------- callout ---------- */
.callout{
  border-radius:var(--radius-lg); padding:20px 22px; background:var(--surface);
  border:1px solid var(--color-border); box-shadow:var(--shadow-card);
  border-left:5px solid var(--signal);
}
.callout--stop{ border-left-color:var(--stop); }
.callout--signal{ border-left-color:var(--signal); }
.callout--us{ border-left-color:var(--route-us); }
.callout h3{ margin-bottom:.45em; }
.callout p{ color:var(--ink-soft); }
.callout p:last-child{ margin-bottom:0; }

/* ============================ TICKET BUILDER ============================ */
.builder{ background:var(--band-2); border-radius:var(--radius-lg); padding:clamp(20px,3vw,32px); color:#fff; }
.builder h3{ color:var(--band-text); }
.builder > p{ color:var(--band-soft); }

/* ---------- "this is not a ticket form" ----------
   Deliberately the loudest thing in the document. Everywhere else colour is
   used sparingly as wayfinding; here it is used to interrupt. A person who
   fills in a form and walks away believing they've reported something is the
   single worst outcome this page can produce. */
.not-sent{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  background:var(--stop-fill); color:#fff; border-radius:var(--radius-md);
  padding:18px 20px; margin:18px 0 0; box-shadow:var(--glow-error);
}
.not-sent-mark svg{ width:30px; height:30px; display:block; }
.not-sent-lead{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.08rem,1.9vw,1.4rem); line-height:1.14; letter-spacing:-.02em;
  margin:0 0 .45em; max-width:none; color:#fff;
}
.not-sent-lead u{ text-decoration-thickness:3px; text-underline-offset:.14em; }
.not-sent-sub{ font-size:.92rem; line-height:1.55; margin:0; color:rgba(255,255,255,.94); max-width:62ch; }
.not-sent-sub strong{ color:#fff; }
.not-sent a{ color:#fff; font-weight:700; }

/* The second one sits directly above the output, where the mistake gets made. */
.not-sent--loud{ margin:0 0 16px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.35); }
.not-sent--loud .not-sent-mark svg{ width:38px; height:38px; }

.send-steps{
  counter-reset:ss; list-style:none; margin:.9em 0 0; padding:0;
  display:grid; gap:7px;
}
.send-steps li{
  counter-increment:ss; position:relative; padding-left:32px;
  font-size:.95rem; line-height:1.45;
}
.send-steps li::before{
  content:counter(ss); position:absolute; left:0; top:1px;
  width:21px; height:21px; border-radius:50%;
  /* On a permanently white chip, so it needs the dark twin: #EF4444 on white
     is 3.8:1 and this text is bold-but-small, which is not "large text". */
  background:#fff; color:var(--stop-fill);
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.send-steps b{ font-weight:700; }

/* Appears only after Copy or Open-a-draft, i.e. exactly at the moment someone
   is most likely to think they are finished. */
.send-status{
  margin:14px 0 0; padding:12px 16px; border-radius:var(--radius-md);
  /* On a permanently white chip, so it needs the dark twin: #EF4444 on white
     is 3.8:1 and this text is bold-but-small, which is not "large text". */
  background:#fff; color:var(--stop-fill);
  font-family:var(--font-display); font-weight:800; font-size:.98rem;
  line-height:1.4; letter-spacing:-.012em; max-width:none;
}
.send-status[hidden]{ display:none; }
.send-status span{
  display:block; font-family:var(--font-body); font-weight:400;
  font-size:.88rem; color:var(--ink-soft); letter-spacing:0; margin-top:.35em;
}

.send-footnote{
  margin:14px 0 0; font-size:.86rem; line-height:1.55;
  color:var(--band-soft); max-width:70ch;
}
.send-footnote b{ color:var(--band-text); }
.send-footnote a{ color:var(--band-text); }

/* ---------- field hints ---------- */
.fld-hint{
  margin:2px 0 0; font-size:.83rem; line-height:1.5;
  color:var(--band-soft); max-width:52ch;
}
.fld-hint b{ color:var(--band-text); }
.fld-hint strong{ color:var(--band-text); }
.fld-hint-alt{ display:block; margin-top:.4em; color:var(--band-faint); }
.fld-hint kbd{
  font-family:var(--font-mono); font-size:.76rem; padding:1px 6px;
  border-radius:2px; background:var(--band-inset-2); color:var(--band-text);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);
}
.fld-hint code{
  font-family:var(--font-mono); font-size:.8rem; padding:1px 5px;
  border-radius:2px; background:var(--band-inset-2); color:var(--band-text);
}
.builder-grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-top:22px; }
@media (max-width:820px){ .builder-grid{ grid-template-columns:1fr; } }
.fld{ display:flex; flex-direction:column; gap:6px; }
.fld--full{ grid-column:1 / -1; }
.fld label{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--band-soft);
}
.fld label .opt{ text-transform:none; letter-spacing:.02em; color:var(--band-faint); }
/* Inputs sit inside the navy band, so they are raised panels rather than white
   holes punched in it — white boxes here glared badly against the dark block. */
.fld input,.fld select,.fld textarea{
  font-family:var(--font-body); font-size:.95rem;
  color:var(--band-text);
  background:var(--band-inset);
  border:1px solid var(--band-border);
  border-radius:var(--radius-md); padding:11px 12px; width:100%;
  min-height:44px;
  transition:background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.fld input::placeholder,.fld textarea::placeholder{ color:var(--band-faint); }
.fld select option{ background:var(--band-2); color:var(--band-text); }
.fld input:hover,.fld select:hover,.fld textarea:hover{
  background:var(--band-inset-2); border-color:var(--color-border-hover);
}
.fld textarea{ resize:vertical; min-height:74px; line-height:1.5; }
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px;
  background:var(--band-inset-2);
  box-shadow:var(--glow-orange);
}
.builder-out{ margin-top:20px; }
.builder-out .out-label{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--band-faint);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-bottom:8px;
}
#ticketOut{
  font-family:var(--font-mono); font-size:.86rem; line-height:1.62;
  background:var(--band-inset); border-radius:var(--radius-md); padding:16px 18px;
  border:1px solid var(--band-border);
  white-space:pre-wrap; color:var(--band-text); min-height:120px; margin:0; max-width:none;
}
.builder-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.btn{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; font-weight:600;
  border:0; border-radius:var(--radius-md); padding:13px 20px; cursor:pointer; min-height:44px;
  background:var(--band-text); color:var(--band); text-decoration:none; display:inline-block;
}
.btn--ghost{ background:transparent; color:var(--band-text);
  box-shadow:inset 0 0 0 2px var(--band-border); }
/* Navy on the bright accent, not white: white on #F97316 is 2.9:1 and these
   labels are 11px. Dark-on-orange is 6.9:1 and reads hotter anyway. */
.btn:hover{ background:var(--roi-accent); color:var(--roi-navy); box-shadow:var(--glow-orange); }
.btn--ghost:hover{ background:var(--band-chip-hover); color:var(--band-text);
  box-shadow:inset 0 0 0 2px var(--band-text); }
.btn:focus-visible{ outline:3px solid #7ab0ea; outline-offset:3px; }

/* ============================ FOOTER ============================ */
.footer{ background:var(--band); color:var(--band-soft); padding-block:34px 42px;
  border-top:1px solid var(--band-border); }
.footer-grid{ display:flex; flex-wrap:wrap; gap:26px 48px; align-items:flex-start;
  justify-content:space-between; }
.footer .f-title{ font-family:var(--font-display); font-weight:800; color:var(--band-text);
  font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.4em; }
.footer a{ color:var(--band-text); }
.footer .f-meta{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; }
.footer .f-contact{ font-family:var(--font-mono); font-size:.92rem; color:var(--band-text); line-height:1.9; }

/* ---------- pictograms ---------- */
.pic{ width:30px; height:30px; display:block; }
.pic--sm{ width:20px; height:20px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(14px); animation:rise .62s cubic-bezier(.2,.7,.3,1) forwards; }
  .reveal:nth-child(1){ animation-delay:.05s; }
  .reveal:nth-child(2){ animation-delay:.13s; }
  .reveal:nth-child(3){ animation-delay:.21s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
  .plate,.tab,.btn{ transition:background-color .18s ease, color .18s ease; }
}

/* ============================ PRINT ============================ */
@media print{
  @page{ size:Letter; margin:14mm 13mm; }

  /* Paper is always light, whatever the reader had on screen. Forcing the
     light token set is one declaration; restyling 60 rules is not. Glows and
     card shadows come off entirely — they print as grey mud. */
  :root,[data-theme="light"],[data-theme="dark"]{
    --color-bg:#fff;
    --color-surface:#fff;
    --color-border:rgba(0,0,0,.16);
    --color-border-hover:rgba(0,0,0,.16);
    --color-text:#1E293B;
    --color-text-bright:#0F172A;
    --color-text-secondary:#475569;
    --color-text-muted:#64748B;
    --rule-soft:#CBD5E1;
    --route-us-line:#15803D;
    --route-you-line:#1D4ED8;
    --signal-line:#B45309;
    --stop-line:#B91C1C;
    --accent-line:#C2410C;
    --shadow-card:none;
    --shadow-card-hover:none;
    --glow-blue:none; --glow-orange:none; --glow-cyan:none;
    --glow-success:none; --glow-error:none;

    /* The band stays dark on paper regardless of the reader's theme: the hero
       is designed as a cover sheet and the panels page-break after it. But the
       inputs go white — a printed form you cannot write on is not a form. */
    --band:#0A0E1A;
    --band-rgb:10,14,26;
    --band-2:#0A0E1A;
    --band-text:#FFFFFF;
    --band-soft:rgba(255,255,255,.82);
    --band-faint:rgba(255,255,255,.62);
    --band-border:rgba(255,255,255,.3);
    --band-chip:transparent;
    --band-chip-hover:transparent;
    --band-inset:#FFFFFF;
    --band-inset-2:#FFFFFF;
    --rail-shadow:none;
    --hero-glow-1:transparent;
    --hero-glow-2:transparent;
  }
  .fld input,.fld select,.fld textarea{
    background:#fff !important; color:#000 !important;
    border:1px solid #94A3B8 !important;
  }
  body{ background:#fff; font-size:9.6pt; line-height:1.38; }
  .masthead::before{ display:none !important; }
  .theme-toggle{ display:none !important; }
  .rail-wrap::after{ display:none !important; }
  .card,.channel,.strip,.ptable,.spec,.flow,.checklist,.callout,.plate,.qr-plate{
    box-shadow:none !important;
  }

  /* A sheet of paper is roughly 816 CSS px wide, which means every phone
     breakpoint above fires during printing. Undo them — paper is not a phone. */
  .routes{ grid-template-columns:1fr 1fr auto !important; break-inside:avoid; }
  .qr-plate{ flex-direction:column !important; text-align:center !important; }
  .qr-plate .qr-cap{ text-align:center !important; }
  .qr-plate .qr-cap a{ display:none !important; }
  .qr-plate svg{ width:104px !important; height:104px !important; }
  .plate{ padding-bottom:20px !important; }
  .compare{ grid-template-columns:1fr 1fr !important; }
  .builder-grid{ grid-template-columns:1fr 1fr !important; }
  .ptable-head{ display:grid !important; }
  .prow,.ptable-head{ grid-template-columns:66px 1fr 122px 92px !important; }
  .prow .presp,.prow .pwho{ grid-column:auto !important; padding-top:15px !important; }
  .prow .pcode{ align-items:flex-start !important; justify-content:flex-start !important; }
  .presp::before,.pwho::before{ content:"" !important; }
  .rail{ display:none !important; }
  .plate-hint{ display:none !important; }
  .panel[hidden]{ display:block !important; }
  /* The hero becomes a cover sheet; every section then starts on a clean page. */
  .panel{ break-before:page; padding-block:0 0; }
  .qr-plate{ min-width:0 !important; }
  .masthead{ background:var(--ink) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .plate .plate-more{ display:block !important; }
  .hero{ padding-block:22px 26px; }
  /* Keep small, self-contained blocks intact... */
  .card,.channel,.spec,.callout,.qr-plate,.plate{ break-inside:avoid; }
  /* ...but let long tables and lists flow across pages, breaking only between
     rows. Moving a full-page table wholesale is what strands half-empty pages. */
  .strip-row,.prow,.ptable-head,.flow li,.checklist li,.fld{ break-inside:avoid; }
  .ptable,.strip,.flow,.checklist{ break-inside:auto; }
  .builder{ break-inside:avoid; }
  .not-sent{ break-inside:avoid; }
  .panel-head{ margin-bottom:16px; break-after:avoid; }
  h2,h3,.section > .eyebrow{ break-after:avoid; }
  .section{ margin-top:22px; }
  .routes{ grid-template-columns:1fr 1fr 128px !important; }
  .grid{ gap:9px; }
  .builder .builder-out,.builder-actions{ display:none; }
  .fld input,.fld select,.fld textarea{ border:1px solid var(--rule); min-height:30px; }
  .fld textarea{ min-height:52px; }
  a{ color:var(--ink); }
  .print-only{ display:block !important; }
  .screen-only{ display:none !important; }
  .checklist li .applinks{ display:none !important; }
  .tray-shot .tray-placeholder{ padding:12px !important; }
}
.print-only{ display:none; }