/* ==========================================================================
   TRKHub — trkhub.app
   Showroom: show the product at full size, in daylight, on a clean floor.
   Zero JavaScript. Phone layout first. Every colour carries meaning.

   Colour roles, fixed and not shared:
     lemon      the brand — the logo tile, the primary button, the contact band
     orange     "this needs you" — the attention state, and nothing else
     green/red  ready and overdue, inside the product only
     ink        type, the arithmetic band, the footer
   No third yellow. The hero highlighter is gone so the CTA owns the only
   lemon in the first screen.
   ========================================================================== */

:root{
  /* grounds */
  --paper:#FFFFFF;
  --canvas:#F6F7FB;
  --hairline:#E4E8F0;
  --floor:#CBD6E8;
  --hatch:#7C8AA6;         /* 3.47:1 on paper — the "not counted" rule */

  /* type */
  --ink:#17223B;
  --slate:#4A5878;
  --on-ink:#FFFFFF;
  --on-ink-muted:#B7C2D6;

  /* brand */
  --lemon-top:#FFE45C;
  --lemon-bottom:#FFC91E;
  --lemon:#FFD21A;
  --lemon-edge:#E3B300;
  --lemon-tint:#FFF8D6;

  /* the status language, taken from the app */
  --ready:#137443;      --ready-bg:#E7F5EE;
  --attention:#885500;  --attention-bg:#FFF1E2;
  --alert:#BD302D;      --alert-bg:#FCEBEA;
  --info:#1E56C8;       --info-bg:#EAF1FE;  --info-ring:#2E6BE6;

  /* the tile gradients. ready/alert/neutral are theme.dart; attention is moved
     off yellow and onto orange so the warning state cannot be read as the
     brand. Ink holds 8.9:1 on its darkest stop. */
  --g-ready:linear-gradient(135deg,#D7F8E6,#69D89E);
  --g-attention:linear-gradient(135deg,#FFE3C4,#FFB25C);
  --g-alert:linear-gradient(135deg,#FFEBEE,#FF9D95);
  --g-neutral:linear-gradient(135deg,#F1F3F7,#DDE2EA);
  --g-lemon:linear-gradient(180deg,var(--lemon-top),var(--lemon-bottom));

  /* faces */
  --serif:"Source Serif 4","SS4 Georgia","SS4 Times","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","LF Franklin","LF Arial","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --arabic:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;

  /* grid */
  --gutter:20px;
  --shell:min(100% - (var(--gutter) * 2),1160px);
  --col-gap:24px;
  --head-h:96px;

  /* spacing steps, taken from the app */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:120px;

  /* radii, taken from the app */
  --r-btn:12px; --r-card:14px; --r-shell:28px; --r-pill:999px;

  /* Libre Franklin's "0" is 0.688em, so its ch is far wider than its average
     letter: a 66ch paragraph measured 78 characters per line, not 66. These two
     are set from counted characters on the rendered page -- 50ch lands prose at
     about 68 per line and 54ch lands the 13px legal text at about 72. */
  --measure:50ch;
  --measure-legal:54ch;

  --shadow:0 18px 40px rgba(23,34,59,.10);
  --section-y:var(--s8);
}
@media (max-width:359px){ :root{ --gutter:16px } }
@media (min-width:768px){ :root{ --gutter:32px; --section-y:var(--s9) } }
@media (min-width:1024px){ :root{ --head-h:68px } }
@media (min-width:1200px){ :root{ --section-y:var(--s10) } }
@media (min-width:1800px){ :root{ --shell:1320px } }
/* above 2200 the measure grows again rather than the margins. At 2560 this
   turns 48% empty gutter into 39%, and lets section 8 run four-up. */
@media (min-width:2200px){ :root{ --shell:1560px; --col-gap:32px } }

/* ---------------------------------------------- metric-matched fallbacks -- */
/* Measured on the page: "Nothing on your truck" at 100px/700 is 1048px in
   Source Serif 4, 1099px in Georgia and 915px in Times. Without an adjustment
   the h1 is sized for one face and swapped for another, which is both a layout
   shift and — at 375 — a headline that breaks to three lines while the webfont
   loads. size-adjust scales the substitute's advance to the real face, so the
   swap is invisible and the h1 can be sized for the metric it will keep. */
@font-face{ font-family:"SS4 Georgia"; src:local("Georgia"); size-adjust:95.4% }
@font-face{ font-family:"SS4 Times"; src:local("Times New Roman"); size-adjust:114.5% }
@font-face{ font-family:"LF Franklin"; src:local("Franklin Gothic Medium"); size-adjust:106.7% }
@font-face{ font-family:"LF Arial"; src:local("Arial"); size-adjust:103.4% }

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
/* There is no overflow-x:hidden here on purpose. Nothing on the page is
   allowed to overflow, so scrollWidth vs clientWidth is a real measurement
   rather than a guard reporting on itself. */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1.0625rem,1rem + 0.2vw,1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
figure{ margin:0 }
a{ color:inherit }
ul,ol,dl,dd{ margin:0; padding:0 }
li{ list-style:none }
p{ margin:0 }
table{ border-collapse:collapse; width:100% }
b,strong{ font-weight:600 }

/* ---------------------------------------------------------------- type -- */
h1,h2,h3{ margin:0; font-family:var(--serif); color:var(--ink) }
/* The mobile end of every clamp is opened: the phone carries a sixteen-screen
   page and a heading has to announce itself under a thumb. h2 is 26px against
   17px body (1.53x) where it used to be 22px (1.29x). */
/* The h1 is two authored lines and must never become three. "Nothing on your
   truck" costs 10.48px of width per px of font-size in Source Serif 4, so the
   size is the largest that clears the live measure at every width with 3% to
   spare: 26px at 320, 31px at 375, 34px at 414, 64px at 768, 68px capped. */
h1{
  font-size:clamp(1.5rem,calc(8.5vw - 0.8px),4.25rem);
  line-height:1.06; letter-spacing:-.02em; font-weight:700;
  hyphens:none; overflow-wrap:normal;
}
h1 .line{ display:block }
h2{ font-size:clamp(1.625rem,1.1rem + 1.7vw,2rem); line-height:1.16; letter-spacing:-.01em; font-weight:600 }
h3{ font-size:clamp(1.25rem,1.6vw,1.375rem); line-height:1.25; font-weight:600 }
@media (min-width:1800px){ h1{ font-size:4.75rem } }

.subhead{ font-size:clamp(1.0625rem,.85rem + .6vw,1.25rem); line-height:1.55 }
.pull{ font-size:clamp(1.1875rem,1.5vw,1.375rem); line-height:1.45; font-weight:500; letter-spacing:-.005em }
.legal{ font-size:.8125rem; line-height:1.7 }

/* --mono is reserved for what is literally an instrument reading: counts,
   dates, record values, the USDOT digits, a regulation code, the package
   name. Prose is never set in it. */
.num{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums }

.measure{ max-width:var(--measure) }

/* ------------------------------------------------------------- helpers -- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.shell{ width:var(--shell); margin-inline:auto }

:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; border-radius:4px }
/* ink grounds: the ink ring is 1.00:1 against them. White is 15.81:1. */
.site-foot :focus-visible,
.band-ink :focus-visible,
.device-android :focus-visible{ outline-color:var(--on-ink) }
.skip{
  position:absolute; left:var(--gutter); top:-120px; z-index:60;
  background:var(--ink); color:var(--on-ink); padding:12px 18px;
  border-radius:var(--r-btn); font-weight:600; text-decoration:none;
}
.skip:focus{ top:10px }

/* -------------------------------------------------------------- header -- */
/* Sticky, because the landing page is roughly sixteen phone screens and a
   reader who decides on screen twelve needs the door on screen twelve. */
.site-head{
  position:sticky; top:0; z-index:40;
  background:var(--paper); border-bottom:1px solid var(--hairline);
}
.site-head .bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s4);
  min-height:52px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:600; font-size:1.1875rem; letter-spacing:-.012em;
  min-height:44px; margin-right:auto;
}
/* No border-radius. The shipped PNG is a hard-edged square, so a CSS corner
   here would make the header mark a different silhouette from the favicon
   and from the launcher artwork it is copied from. */
.brand img{ flex:none }

.head-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s4);
  background:var(--ink); color:var(--on-ink);
  border-radius:var(--r-btn); font-size:.875rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.head-cta:hover{ background:#223154 }

.head-nav{
  flex:1 0 100%; order:3;
  display:flex; gap:0 var(--s5);
  border-top:1px solid var(--hairline);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.head-nav::-webkit-scrollbar{ display:none }
.head-nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.875rem; font-weight:500; color:var(--slate);
  text-decoration:none; white-space:nowrap;
}
.head-nav a:hover{ color:var(--ink) }
.head-nav a[aria-current="page"]{
  color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--lemon-edge);
}
@media (min-width:1024px){
  .site-head .bar{ min-height:68px; flex-wrap:nowrap }
  .brand{ font-size:1.375rem; margin-right:0 }
  .head-nav{
    flex:1 1 auto; order:2; border-top:0; overflow:visible;
    justify-content:flex-end; gap:0 var(--s5); margin-inline:var(--s5);
  }
  .head-cta{ order:3 }
}
/* anchors must clear the sticky bar */
section[id],main[id]{ scroll-margin-top:calc(var(--head-h) + 12px) }

/* --------------------------------------------------------------- bands -- */
/* Four grounds, placed for rank rather than alternated: the USDOT proof gets
   the brand tint, the arithmetic argument gets ink, the close gets lemon.
   The rest sit on paper or canvas in an order that is deliberately irregular. */
.band{ padding-block:var(--section-y) }
.band-paper{ background:var(--paper) }
.band-canvas{ background:var(--canvas) }
.band-tint{ background:var(--lemon-tint) }
.band-lemon{ background:var(--g-lemon) }
.band-ink{ background:var(--ink); color:var(--on-ink) }
.band-ink h2,.band-ink h3,.band-ink .pull{ color:var(--on-ink) }
.band-ink .lead{ color:var(--on-ink-muted) }

/* There is no .rule element any more. Nine identical hairlines stamped at the
   top of nine bands was wallpaper; four ranked grounds, never two of the same
   adjacent, do the separating on their own. */
.lead{ color:var(--slate); margin-top:var(--s4); max-width:var(--measure) }
.band-lemon .lead{ color:var(--ink) }

/* ----------------------------------------------------------------- CTA -- */
.cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 var(--s5);
  background:var(--g-lemon); border:1px solid var(--lemon-edge);
  border-radius:var(--r-btn); color:var(--ink);
  font-weight:600; font-size:1rem; text-decoration:none;
}
.cta:hover{ background:linear-gradient(180deg,#FFEE8A,var(--lemon)) }
.cta-note{ color:var(--slate); font-size:.875rem; margin-top:var(--s3) }
@media (min-width:768px){
  .cta{ display:inline-flex; min-height:56px; min-width:280px }
}
.cta-invert{ background:var(--ink); border-color:var(--ink); color:var(--on-ink) }
.cta-invert:hover{ background:#223154; border-color:#223154 }

/* ---------------------------------------------------------------- hero -- */
.hero{ position:relative; background:var(--paper); padding-top:var(--s6); padding-bottom:var(--s7) }
.hero > *{ position:relative; z-index:1 }
/* The ruled floor is full-bleed without 100vw: .hero is already a full-width
   block, so inset:0 on its own pseudo-element reaches both edges and stops at
   the scrollbar instead of running under it. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:min(560px,46%);
  background:repeating-linear-gradient(to bottom,var(--floor) 0 1px,transparent 1px 64px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 100%);
  pointer-events:none;
}
.hero .subhead{ color:var(--slate); margin-top:var(--s5); max-width:46ch }
.hero .cta{ margin-top:var(--s5) }
/* No highlighter. The clause is the strongest claim in the hero and it takes
   ink and weight; the button keeps the only lemon on the first screen. */
.subhead .key{ color:var(--ink); font-weight:600 }
.stage{ margin-top:var(--s6) }
.hero-wide{ display:none }

/* ------------------------------------------------------------- mockups -- */
.mock{
  margin:0; background:var(--paper);
  border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden;
}
.mock-bar{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s4); background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.mock-bar img{ flex:none }
.mock-word{ font-weight:600; font-size:.9375rem; letter-spacing:-.012em }
.mock-sub{ font-size:.75rem; color:var(--slate) }
.mock-bar .pill{ margin-left:auto }
.mock-body{ background:var(--canvas); padding:var(--s4); display:grid; gap:var(--s4) }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:.75rem; font-weight:600; line-height:1.5; white-space:nowrap;
}
.pill svg{ flex:none }
.p-ready{ background:var(--ready-bg); color:var(--ready) }
.p-attention{ background:var(--attention-bg); color:var(--attention) }
.p-alert{ background:var(--alert-bg); color:var(--alert) }
.p-neutral{ background:#EDF0F6; color:var(--slate) }

/* readiness ring */
.ready-block{ display:flex; align-items:center; gap:var(--s4) }
.ring{ flex:none; width:76px; height:76px }
.ring-track{ stroke:rgba(23,34,59,.12) }
.ring-arc{ stroke:var(--lemon); stroke-linecap:round }
.ring-pct{ font-family:var(--mono); font-weight:500; font-size:20px; fill:var(--ink) }
.ready-title{ font-weight:600; font-size:1rem; letter-spacing:-.01em }
.ready-sub{ color:var(--slate); font-size:.8125rem; margin-top:2px }
.ready-sub .num{ color:var(--ink) }

/* four semantic tiles.
   minmax(0,1fr) so "Company" cannot push its own column 11% wider than its
   siblings. State is carried three ways — fill, a 1.5px edge in the state's
   own dark colour, and a glyph — never by hue alone. */
.tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) }
.tile{
  border-radius:var(--r-btn); padding:10px var(--s3);
  display:grid; gap:2px; min-height:66px; align-content:center;
  border:1.5px solid transparent;
}
.tile-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2) }
.tile-n{ font-family:var(--mono); font-weight:500; font-size:1.0625rem; color:var(--ink) }
.tile-i{ flex:none }
.tile-l{ font-size:.75rem; font-weight:600; color:var(--ink) }
.t-ready{ background:var(--g-ready); border-color:var(--ready) }
.t-ready .tile-i{ color:var(--ready) }
.t-attention{ background:var(--g-attention); border-color:var(--attention) }
.t-attention .tile-i{ color:var(--attention) }
.t-alert{ background:var(--g-alert); border-color:var(--alert) }
.t-alert .tile-i{ color:var(--alert) }
.t-neutral{ background:var(--g-neutral); border-color:var(--slate) }
.t-neutral .tile-i{ color:var(--slate) }
@media (min-width:1024px){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

/* requirement rows */
.rows{ background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-btn); overflow:hidden }
.row{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3); border-top:1px solid var(--hairline) }
.row:first-child{ border-top:0 }
.row-main{ min-width:0; flex:1 1 auto }
.row-t{ display:block; font-weight:600; font-size:.875rem; letter-spacing:-.005em;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row-s{ display:block; color:var(--slate); font-size:.75rem; font-family:var(--mono); margin-top:1px;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row-side{ flex:none; display:grid; gap:5px; justify-items:end; text-align:right }
.row-days{ font-family:var(--mono); font-weight:500; font-size:.8125rem; color:var(--ink); white-space:nowrap }
.row-note{ font-size:.75rem; color:var(--slate); white-space:nowrap }

/* the one animation: 14 becomes 10, Upcoming becomes Due soon.
   It is delayed so a reader who starts scrolling at once still meets it, and
   it runs long enough to be caught rather than merely to have happened. */
.swap{ position:relative; display:inline-block }
.swap .a{ position:absolute; right:0; top:0; opacity:0; white-space:nowrap }
/* The DOM is authored in the END state and no fill-mode is used, so outside the
   animation the declared opacities hold. Frame 0 of each keyframe is also the end
   state, so a timeline that never advances -- reduced motion, a throttled
   background tab, a frozen paint -- still leaves 10 working days / Due soon on
   screen rather than a stale figure. */
@media (prefers-reduced-motion:no-preference){
  .swap .a{ animation:showFirst 4s 1.4s 1 }
  .swap .b{ animation:showThen 4s 1.4s 1 }
}
@keyframes showFirst{ 0%{opacity:0} 2%,64%{opacity:1} 70%,100%{opacity:0} }
@keyframes showThen{ 0%{opacity:1} 2%,64%{opacity:0} 70%,100%{opacity:1} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ------------------------------------------------- 1. working-day strip -- */
.strip{ margin:0 }
.strip-grid{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--s1);
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-card); padding:var(--s3);
}
.dow{
  font-family:var(--mono); font-size:.6875rem; color:var(--slate);
  text-align:center; padding-bottom:2px; letter-spacing:.04em;
}
.day{
  aspect-ratio:1/1; display:grid; place-content:center;
  border-radius:8px; font-family:var(--mono); font-size:.8125rem; font-weight:500;
  color:var(--ink); background:var(--paper); border:1px solid transparent;
}
/* Three states, each carrying lightness or an edge or a pattern as well as
   hue: an open working day has an ink edge (15.81:1 against the plain cell),
   an uncounted day is hatched, the deadline is solid ink. */
.day-off{
  color:var(--slate); border-color:var(--hairline);
  background:
    repeating-linear-gradient(-45deg,var(--hatch) 0 1px,transparent 1px 7px),
    var(--canvas);
}
.day-open{ background:var(--lemon-tint); border-color:var(--ink) }
.day-due{ background:var(--ink); color:var(--on-ink); border-color:var(--ink) }
.strip-key{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  margin-top:var(--s3); color:var(--slate);
}
.strip-key span{ display:inline-flex; align-items:center; gap:7px; font-size:.8125rem }
.swatch{ width:14px; height:14px; border-radius:4px; flex:none; border:1px solid transparent }
.sw-open{ background:var(--lemon-tint); border-color:var(--ink) }
.sw-off{
  border-color:var(--slate);
  background:
    repeating-linear-gradient(-45deg,var(--hatch) 0 1px,transparent 1px 7px),
    var(--canvas);
}
.sw-due{ background:var(--ink) }

/* the hairline inset: the site's one callout, on every page */
.inset{
  border-left:2px solid var(--ink); padding-left:var(--s5);
  margin-top:var(--s5); max-width:calc(var(--measure) + var(--s5));
}
.band-ink .inset{ border-left-color:var(--on-ink) }

/* -------------------------------------------------- 2. the USDOT lookup -- */
.field{
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-btn); padding:var(--s3) var(--s4); min-width:0;
}
.field-l{ display:block; font-size:.6875rem; font-weight:600; color:var(--slate); letter-spacing:.05em; text-transform:uppercase }
.field-v{ display:block; font-family:var(--mono); font-weight:500; font-size:1.0625rem; margin-top:3px;
          overflow:hidden; text-overflow:ellipsis }
.lookup-row{ display:flex; gap:var(--s2); align-items:stretch }
.lookup-row .field{ flex:1 1 auto; min-width:0 }
.btn-lemon{
  flex:none; display:inline-flex; align-items:center; padding:0 var(--s4);
  background:var(--lemon); border:1px solid var(--lemon-edge); border-radius:var(--r-btn);
  font-weight:600; font-size:.875rem; color:var(--ink);
}
.filled{ background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-btn); overflow:hidden }
.filled div{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:10px var(--s4); border-top:1px solid var(--hairline) }
.filled div:first-child{ border-top:0 }
.filled dt{ font-size:.75rem; color:var(--slate); font-weight:500 }
.filled dd{ font-family:var(--mono); font-size:.8125rem; font-weight:500; text-align:right; word-break:break-word }

/* the MCS-150 annotation */
.mcs{
  margin:var(--s5) 0 0; background:var(--paper);
  border:1px solid var(--hairline); border-radius:var(--r-card); padding:var(--s5) var(--s4);
}
.mcs-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s3) }
.mcs-k{ color:var(--slate); font-size:.8125rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
.mcs-v{ font-family:var(--serif); font-weight:700; font-size:1.375rem; letter-spacing:-.01em }
.dotnum-wrap{ --dsz:clamp(1.5rem,6.2vw,1.875rem); position:relative; margin-top:var(--s4); font-size:var(--dsz) }
.dotnum{ font-family:var(--mono); font-weight:500; line-height:1.3; white-space:nowrap }
.dotnum .d{ display:inline-block; width:1.15em; text-align:center }
.dotnum .ring-d{ position:relative }
.dotnum .ring-d::before{
  content:""; position:absolute; left:50%; top:50%;
  width:1.3em; height:1.3em; margin:-.65em 0 0 -.65em;
  border-radius:var(--r-pill); box-shadow:inset 0 0 0 2px var(--lemon);
}
.leader,.leader-word{ display:none }
.dkeys{ margin-top:var(--s4); border-top:1px solid var(--hairline) }
.dkey{ display:flex; gap:var(--s3); padding:10px 0; border-bottom:1px solid var(--hairline); position:relative }
.dkey dt{
  display:flex; align-items:center; gap:7px; flex:none; width:6.6em;
  font-size:.8125rem; font-weight:600; color:var(--slate);
}
.dkey dd{ font-size:.875rem; line-height:1.5 }
.ring-sm{
  display:inline-grid; place-content:center; width:1.9em; height:1.9em; flex:none;
  border-radius:var(--r-pill); box-shadow:inset 0 0 0 2px var(--lemon);
  font-family:var(--mono); font-weight:500; color:var(--ink);
}
.mcs-cite{ color:var(--slate); margin-top:var(--s4); display:block; font-size:.875rem }
.mcs-cite code{ font-family:var(--mono); font-size:.9em; color:var(--ink) }

/* At 480 and up the two digits are tied to the words month and year by leader
   elbows. Every offset is expressed in --dsz, the number's own size, because the
   words are set smaller and their own em would land them somewhere else. */
@media (min-width:480px){
  .leader{ display:block; position:absolute; top:calc(var(--dsz) * 1.25); pointer-events:none }
  .leader-m{
    left:calc(var(--dsz) * 7.475); width:26px; height:34px;
    border-left:1px solid var(--ink); border-bottom:1px solid var(--ink);
  }
  .leader-y{
    right:calc(100% - var(--dsz) * 6.325); width:26px; height:14px;
    border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  }
  .leader-word{
    display:block; position:absolute; line-height:1;
    font-size:.75rem; font-weight:600; color:var(--ink);
  }
  .lw-m{ left:calc(var(--dsz) * 7.475 + 32px); top:calc(var(--dsz) * 1.25 + 28px) }
  .lw-y{ right:calc(100% - var(--dsz) * 6.325 + 32px); top:calc(var(--dsz) * 1.25 + 8px) }
  .dkeys{ margin-top:calc(var(--dsz) * 1.6) }
}

/* --------------------------------------------- 3. the list-tailoring diff -- */
.diff{ display:grid; gap:var(--s6); margin-top:var(--s6) }
.diff-col h3{
  font-family:var(--sans); font-size:.8125rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate); padding-bottom:var(--s2);
  border-bottom:1px solid var(--ink);
}
.diff-col ul{ margin-top:var(--s1) }
.diff-col li{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:11px 0; border-bottom:1px solid var(--hairline); font-size:.9375rem;
}
.diff-col li.off > span:first-child{ text-decoration:line-through; text-decoration-thickness:1px; color:var(--slate) }
.off-tag{ font-size:.75rem; font-weight:500; color:var(--slate); white-space:nowrap; flex:none }
@media (min-width:768px){ .diff{ grid-template-columns:1fr 1fr; gap:var(--s7) } }

/* --------------------------------------------- 4. the marker, and Arabic -- */
.marker{
  flex:none; width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--info-bg); box-shadow:inset 0 0 0 1px var(--info-ring);
  display:grid; place-content:center;
  font-family:var(--serif); font-weight:700; font-size:.875rem; color:var(--info);
}
.explain{ background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-btn); overflow:hidden }
.explain summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--s3);
  min-height:44px; padding:var(--s2) var(--s3);
}
.explain summary::-webkit-details-marker{ display:none }
.explain summary:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px }
.explain[open] summary{ border-bottom:1px solid var(--hairline) }
.sheet{ padding:var(--s4) var(--s3) var(--s3); background:var(--canvas) }
.sheet dt{ font-size:.75rem; font-weight:600; color:var(--slate) }
.sheet dd{ font-size:.8125rem; line-height:1.55; margin-top:2px; padding-bottom:var(--s3) }
.sheet dd:last-child{ padding-bottom:0 }
.sheet-ar{
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--hairline);
  font-family:var(--arabic); font-size:.75rem; line-height:1.9;
}
.sheet-ar dt{ font-family:var(--arabic); font-size:.6875rem }
.sheet-ar dd{ font-size:.75rem; line-height:1.9 }

/* ----------------------------------------------------- 5. document pack -- */
.ticks{ background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-btn); overflow:hidden }
.ticks li{ display:flex; align-items:center; gap:var(--s3); padding:11px var(--s3); border-top:1px solid var(--hairline); font-size:.875rem }
.ticks li:first-child{ border-top:0 }
.box{
  flex:none; width:18px; height:18px; border-radius:5px;
  background:var(--lemon); border:1px solid var(--lemon-edge);
  display:grid; place-content:center;
}
.box svg{ color:var(--ink) }
.pack-btns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) }
.btn-sm{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; border-radius:var(--r-btn); font-size:.8125rem; font-weight:600;
  text-align:center; padding-inline:var(--s2);
}
.btn-sm-lemon{ background:var(--lemon); border:1px solid var(--lemon-edge); color:var(--ink) }
.btn-sm-plain{ background:var(--paper); border:1px solid var(--hairline); color:var(--ink) }
.foot-note{ font-size:.75rem; color:var(--slate); line-height:1.6 }

/* ---------------------------------------------------- 6. the negatives --- */
.negatives{
  display:grid; grid-template-columns:1fr; gap:var(--s3);
  margin-top:var(--s6); padding-bottom:var(--s5); border-bottom:1px solid var(--hairline);
  max-width:46ch;
}
.negatives li{ font-size:1.0625rem; font-weight:600; letter-spacing:-.005em; color:var(--ink) }
.band-ink .negatives{ border-bottom-color:rgba(255,255,255,.2) }
.band-ink .negatives li{ color:var(--on-ink) }
@media (min-width:560px){ .negatives{ grid-template-columns:1fr 1fr } }

/* --------------------------------------------------- 7. the two devices -- */
.devices{ display:flex; align-items:flex-start; gap:var(--s6); margin-top:var(--s5) }
.device{ text-align:left }
.device-body{
  width:88px; height:172px; border-radius:18px; display:grid; place-content:center;
}
.device-android{ background:var(--ink) }
.device-ios{ background:var(--paper); border:1px solid var(--hairline) }
.device-ios span{ font-size:.75rem; font-weight:600; color:var(--slate) }
.device-l{ margin-top:var(--s3); font-size:.875rem; font-weight:600; color:var(--ink) }
.device-l em{ display:block; margin-top:2px; font-style:normal; font-weight:400; color:var(--slate) }

/* ------------------------------------------------- 8. comparison blocks -- */
.compare{ display:grid; gap:var(--s6); margin-top:var(--s6) }
.compare > div{ border-top:1px solid var(--hairline); padding-top:var(--s4) }
.compare p{ margin-top:var(--s3); color:var(--slate); max-width:var(--measure) }
@media (min-width:768px){ .compare{ grid-template-columns:1fr 1fr; gap:var(--s7) } }
/* the extra width above 2200 goes into a fourth and a third column rather
   than into the gutters */
@media (min-width:2200px){ .compare{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6) } }
.sits{
  background:var(--lemon-tint); border-radius:var(--r-card);
  padding:var(--s5); margin-top:var(--s7);
  max-width:calc(var(--measure) + (var(--s5) * 2));
}
.sits p{ margin-top:var(--s3) }
.band-canvas .sits{ border:1px solid var(--lemon-edge) }

/* ------------------------------------------------------------- contact -- */
.mailto-big{
  display:inline-block; font-family:var(--serif); font-weight:700;
  font-size:clamp(1.625rem,7vw,2.5rem); line-height:1.15; letter-spacing:-.02em;
  color:var(--ink); text-decoration:underline;
  text-decoration-thickness:3px; text-underline-offset:6px;
  padding-block:8px; word-break:break-word;
}
.mailto-big:hover,.mailto-big:focus-visible{ text-decoration-thickness:5px }
.band-ink .mailto-big{ color:var(--on-ink) }
.cando{ display:grid; gap:var(--s5); margin-top:var(--s5) }
.cando h3{
  font-family:var(--sans); font-size:.8125rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding-bottom:var(--s2); border-bottom:1px solid var(--hairline);
}
.cando p{ margin-top:var(--s3); max-width:var(--measure) }
.band-lemon .cando h3{ border-bottom-color:rgba(23,34,59,.22) }
@media (min-width:1024px){ .cando{ grid-template-columns:1fr 1fr; gap:var(--s7) } }
.onward{ margin-top:var(--s6) }
.onward a{ font-weight:600; text-underline-offset:4px }

/* --------------------------------------------- disclaimer + site footer -- */
.site-foot{ background:var(--ink); color:var(--on-ink); padding-block:var(--s7) }
.site-foot .disclaimer{ color:var(--on-ink-muted); max-width:var(--measure-legal) }
.foot-rule{ height:1px; background:rgba(255,255,255,.14); margin:var(--s6) 0; border:0 }
.foot-row{ display:grid; gap:var(--s5) }
.site-foot .brand{ color:var(--on-ink) }
.pkg{ display:block; font-family:var(--mono); font-size:.75rem; color:var(--on-ink-muted); margin-top:var(--s2) }
.foot-links{ display:flex; flex-wrap:wrap; gap:0 var(--s5) }
.foot-links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.9375rem; text-decoration:none;
}
.foot-links a:hover{ text-decoration:underline; text-underline-offset:5px }
.copy{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s4);
  font-size:.8125rem; color:var(--on-ink-muted);
}
/* the address at the foot of a sixteen-screen page is a real target */
.copy a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.9375rem; color:var(--on-ink);
  text-decoration:underline; text-underline-offset:4px;
}
@media (min-width:768px){
  .foot-row{ grid-template-columns:1fr auto; align-items:start; gap:var(--s7) }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:var(--s5); margin-top:var(--s5) }
}

/* ------------------------------------------------------- the sub-pages -- */
.doc{ padding-block:var(--s7) var(--s9) }
.doc h1{ font-size:clamp(1.875rem,5.4vw,3rem) }
.doc .stamp{ font-size:.9375rem; color:var(--slate); margin-top:var(--s3); max-width:52ch }
.doc .stamp code{ font-family:var(--mono); font-size:.9em; color:var(--ink) }
/* no border-top: nine identical hairlines across three legal pages is
   wallpaper. Space does the separating. */
.doc h2{ font-size:clamp(1.25rem,2.4vw,1.5rem); margin-top:var(--s8) }
.doc h3{ margin-top:var(--s5) }
.doc p,.doc ul{ margin-top:var(--s3); max-width:var(--measure) }
.doc li{ margin-top:var(--s3); padding-left:var(--s5); position:relative;
         max-width:calc(var(--measure) + var(--s5)) }
.doc li::before{ content:""; position:absolute; left:6px; top:.72em; width:6px; height:1px; background:var(--slate) }
.doc code{ font-family:var(--mono); font-size:.9em }
.doc a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.doc a:hover{ text-decoration-thickness:2px }
.doc .inset p{ margin-top:0; font-size:clamp(1.0625rem,.85rem + .6vw,1.25rem); line-height:1.55; max-width:var(--measure) }
.doc .cando h3{ margin-top:0 }
.doc .mailto-line{ margin-top:var(--s6) }

/* the contents list, which is what the masthead column is for */
.doc-toc{ margin-top:var(--s6); border-top:1px solid var(--hairline); padding-top:var(--s4) }
.doc-toc-h{
  font-size:.75rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate);
}
.doc-toc ol{ margin-top:var(--s1) }
.doc-toc li{ margin:0; padding-left:0; max-width:none }
.doc-toc li::before{ display:none }
.doc-toc a{
  display:flex; align-items:center; min-height:44px;
  font-size:.9375rem; color:var(--slate); text-decoration:none;
  border-bottom:1px solid var(--hairline);
}
.doc-toc a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px }

/* Above 1024 the title, the stamp and the contents become a masthead column
   travelling beside the document, instead of a band sitting above a page that
   is 65% empty margin. */
@media (min-width:1024px){
  .doc-in{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap) }
  .doc-head{
    grid-column:1/span 4; align-self:start;
    position:sticky; top:calc(var(--head-h) + var(--s5));
    max-height:calc(100vh - var(--head-h) - var(--s7)); overflow:auto;
  }
  .doc-body{ grid-column:5/span 8; max-width:calc(var(--measure) + var(--s7)) }
}

/* ------------------------------------------------- the phone tab bar ---- */
.mock-tabs{
  display:flex; background:var(--paper); border-top:1px solid var(--hairline);
  padding:10px var(--s2) 12px;
}
.tab{
  flex:1; text-align:center; font-size:.6875rem; font-weight:600; color:var(--slate);
}
.tab.is-on{ color:var(--ink); position:relative }
.tab.is-on::after{
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:22px; height:3px; border-radius:2px; background:var(--lemon);
}

/* ============================================================ LAYOUT ==== */
/* phones and tablets: one column, flush left, nothing side by side        */
.split > * + *{ margin-top:var(--s6) }
.split > .head + *{ margin-top:var(--s5) }

@media (min-width:1024px){
  .split{
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--col-gap); align-items:start;
  }
  .split > * + *{ margin-top:0 }

  .s-5-7 > .col-a{ grid-column:1/span 5; grid-row:2 }
  .s-5-7 > .col-b{ grid-column:7/span 6; grid-row:2 }

  /* reversed: the heading sits over its own screen on the left, the argument
     runs down the right. The short copy is the spanning item, so nothing inflates. */
  .s-7-5 > .head{ grid-column:1/span 7; grid-row:2 }
  .s-7-5 > .col-a{ grid-column:1/span 7; grid-row:3; margin-top:var(--s5) }
  .s-7-5 > .col-b{ grid-column:8/span 5; grid-row:2/span 2; align-self:start }
  .s-7-5 > .col-a > .mock{ max-width:620px }
  .s-7-5 > .col-a > .mcs{ max-width:620px }
}

/* ------------------------------------------------ the hero composition -- */
@media (min-width:1024px){
  .hero{ padding-top:var(--s7) }
  .hero-in{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap) }
  .hero-in > h1{ grid-column:1/-1; grid-row:1 }
  .hero-copy{ grid-column:1/span 5; grid-row:2; margin-top:var(--s6) }
  .hero .subhead{ max-width:40ch; margin-top:0 }

  /* The staging is a real two-up inside the grid: the phone card straight on,
     the requirement panel overlapping it from behind and dropped down the
     floor. It is sized by the column it lives in, so what the reader sees is
     the same composition at 1024 and at 2560 -- nothing is cut by a
     subtraction against the viewport edge, and nothing overflows. */
  .stage{
    grid-column:6/span 7; grid-row:2; margin-top:var(--s6);
    display:flex; align-items:flex-start; justify-content:flex-end;
  }
  .dash{
    position:relative; z-index:2; flex:none;
    width:340px; max-width:none; height:700px;
    border-radius:var(--r-shell); display:flex; flex-direction:column;
  }
  .dash .mock-body{ flex:1 1 auto; align-content:start }
}

/* Below 1280 the stage cannot give the panel a width at which its own rows are
   legible, so it does not render at all rather than render as a stub. The
   phone card then sits against the shell edge and the ruled floor carries the
   room to its left. From 1280 up the panel is a grid citizen: it takes what is
   left of the stage, overlaps the card from behind, and is never cut. */
@media (min-width:1280px){
  .stage{ justify-content:flex-start }
  .hero-wide{
    display:block; position:relative; z-index:1;
    flex:1 1 auto; min-width:0;
    margin-left:-28px; margin-top:var(--s7);
    border-radius:0 var(--r-card) var(--r-card) 0;
  }
  .hero-wide .mock-bar{ padding-left:calc(var(--s4) + 28px) }
  .hero-wide .mock-body{ padding:var(--s3) var(--s3) var(--s3) calc(var(--s3) + 28px) }
}

/* wide enough for the panel's rows to run name-left / status-right */
@media (min-width:1600px){
  .hero-wide .row{ padding:13px var(--s4) }
  .hero-wide .row-t{ font-size:.9375rem }
  .hero-wide .row-side{ justify-items:end; text-align:right }
}

/* ------------------------------------------ the strip and the devices --- */
@media (min-width:1024px){
  .strip-grid{ padding:var(--s4) }
  .day{ font-size:.9375rem }
  .devices{ gap:var(--s7) }
  .device-body{ width:104px; height:200px }
}

/* --------------------------------- narrow phones: tighten the mock rows -- */
@media (max-width:479px){
  .mock-body{ padding:var(--s3) }
  .row{ padding:var(--s3) var(--s2); gap:var(--s2) }
  .row-t{ font-size:.8125rem }
  .row-s{ font-size:.6875rem }
  .row-days{ font-size:.75rem }
  .pill{ font-size:.6875rem; padding:3px 8px }
  .ring{ width:68px; height:68px }
  .field-v{ font-size:1rem }
  .filled dd{ font-size:.75rem }
  .filled dt{ font-size:.6875rem }
  .filled div{ padding:9px var(--s3) }
  .ticks li{ font-size:.8125rem; padding:11px var(--s2) }
}

@media (max-width:559px){
  .diff-col li{ display:block }
  .diff-col li.off > span:first-child{ display:inline }
  .off-tag{ display:block; margin-top:3px }
}

/* the dashboard card is 335-340px at every width, so its rows stay compact */
.dash .mock-body{ padding:var(--s3) }
.dash .row{ padding:var(--s3) var(--s2); gap:var(--s2) }
.dash .row-t{ font-size:.8125rem }
.dash .row-s{ font-size:.6875rem }
.dash .row-days{ font-size:.75rem }
.dash .pill{ font-size:.6875rem; padding:3px 8px }
.dash .ring{ width:68px; height:68px }

/* The requirement panel is the same compact card until it has real room. Its
   names and notes wrap rather than truncate: a panel that ends in an ellipsis
   is the amputation this composition exists to stop. */
.hero-wide .row{ padding:var(--s3) var(--s2) }
.hero-wide .row-t{ white-space:normal; overflow:visible }
.hero-wide .row-note{ white-space:normal }
.hero-wide .row-t{ font-size:.8125rem }
.hero-wide .row-s{ font-size:.6875rem }
.hero-wide .row-days{ font-size:.75rem }
.hero-wide .pill{ font-size:.6875rem; padding:3px 8px }