/* ─────────────────────────────────────────────────────────────────────────────
   Maury — Thalor brand tokens.

   Every value below is taken from Thalor-Color_Palette.ase, not eyeballed from a
   comp. No colour is hard-coded anywhere else: every page, including the 50,028
   vessel profiles, resolves through these custom properties.

   LIGHT APPLICATION. The guidelines set their own pages this way: Signal White
   ground, Deep Void as ink rather than as chrome, hairline rules, small mono
   metadata, and colour used sparingly. The Deep Void-ground treatment in the
   guide is a campaign/product hero device, not a UI chrome system — a records
   tool a surveyor reads on a dock is the light case.

   One functional colour is added. The brand palette has no alarm state, and per
   MAURY-DQ-001 F-9 an operational control with no removal date is the single
   signal on this site that should shout. Flagged for Courbet Studio rather than
   quietly adopted.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* Thalor palette, verbatim from the .ase */
  --void:#101C2A;          /* Deep Void            */
  --void-2:#1F334A;
  --slate:#557286;
  --blue:#4889BF;
  --pale:#C3D2DA;
  --yellow:#FFEB6F;
  --white:#FFFEFE;         /* Signal White         */

  /* Derived working tones — mixes of the above, never new hues */
  --paper:color-mix(in srgb, var(--pale) 22%, var(--white));
  --line:color-mix(in srgb, var(--pale) 62%, var(--white));
  --line-2:color-mix(in srgb, var(--pale) 34%, var(--white));
  --ink:var(--void);
  --ink-2:var(--slate);
  --ink-3:color-mix(in srgb, var(--slate) 62%, var(--white));
  --blue-deep:color-mix(in srgb, var(--blue) 78%, var(--void));
  --on-void:var(--pale);
  /* Light application: the grid is a whisper on white, not a glow on navy. */
  --grid:color-mix(in srgb, var(--blue) 13%, transparent);
  --dot:color-mix(in srgb, var(--slate) 26%, transparent);
  --dot-2:color-mix(in srgb, var(--blue) 15%, transparent);
  --rule:color-mix(in srgb, var(--pale) 78%, var(--white));

  /* Functional only — not a brand colour. See note above. */
  --alert:#C0392B;
  --alert-bg:color-mix(in srgb, #C0392B 8%, var(--white));
  --alert-line:color-mix(in srgb, #C0392B 26%, var(--white));

  /* ABC Diatype is the brand grotesque. Every file supplied is a Trial build,
     which may not be served from a public site, so Archivo stands in until a
     web licence exists. Swap the first family here and nothing else changes. */
  --sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* THE RULES, as tokens (MAURY-UX-003 §3). Sans is for sentences. Mono is for what the
     record says: identifiers, dates, counts, labels and metadata. --ink-3 is a decorative
     tone (rules, dots, placeholders) and is never running text: at 2.46:1 on white it fails
     WCAG AA, so every label that was set in it is set in --ink-2 (5.04:1). No text is
     smaller than --fs-min. Dates are written out, day first ("25 January 2007"), on every
     surface. Any count of four or more digits carries a thousands separator. */
  --fs-min:12px;          /* smallest running text: footer, metadata lines           */
  --fs-label:11px;        /* mono caps labels only (letter-spaced, never a sentence)  */
  --fs-meta:12.5px;       /* mono metadata under a name                              */
  --fs-body:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--white);color:var(--ink);font:400 16px/1.55 var(--sans);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h2{font:inherit;margin:0}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ── chrome: nav, not a bar ─────────────────────────────────────────────── */
header.top{background:transparent;position:relative;z-index:2}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:78px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;color:var(--ink)}
.mark svg{display:block;width:19px;height:22px;color:var(--ink)}
.mark .wm{font:700 22px/1 var(--sans);letter-spacing:.02em;color:var(--ink)}
.mark-sub{font:400 var(--fs-label)/1 var(--mono);color:var(--ink-2);letter-spacing:.11em;text-transform:uppercase}
.nav{margin-left:auto;display:flex;gap:26px}
.nav a{font:500 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
       color:var(--ink);text-decoration:none;min-height:44px;line-height:44px}
.nav a:hover{color:var(--blue-deep)}

/* ── hero: halftone dot field, oversized headline, asymmetric body ──────── */
.hero{background:var(--white);color:var(--ink);padding:38px 0 74px;position:relative;overflow:hidden}
/* The light brand ground is a soft halftone wave, not a blueprint grid. Two offset
   dot fields at different scales, faded through a wide elliptical mask, read as the
   printed texture without shipping a 5 MB PNG on every page. */
.hero::before,.hero::after{content:"";position:absolute;inset:-10% -5% auto -5%;height:150%;
  pointer-events:none}
.hero::before{background-image:radial-gradient(var(--dot) 1.4px,transparent 1.5px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(ellipse 78% 58% at 62% 8%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 78% 58% at 62% 8%,#000 0%,transparent 72%)}
.hero::after{background-image:radial-gradient(var(--dot-2) 1.9px,transparent 2px);
  background-size:21px 21px;
  -webkit-mask-image:radial-gradient(ellipse 62% 44% at 30% 0%,#000 0%,transparent 68%);
          mask-image:radial-gradient(ellipse 62% 44% at 30% 0%,#000 0%,transparent 68%)}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font:600 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
         color:var(--ink);margin:0 0 22px}
.hero h1{font:700 clamp(40px,7.4vw,74px)/0.99 var(--sans);letter-spacing:-.035em;
         margin:0 0 30px;max-width:15ch;color:var(--ink)}
.herogrid{display:grid;grid-template-columns:1fr;gap:22px;align-items:end}
@media(min-width:860px){.herogrid{grid-template-columns:minmax(0,1fr) 268px;gap:48px}}
.hero .lede{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:0;max-width:34ch}
.hero .lede a{color:var(--blue-deep)}
.searchbox,.searchwrap{position:relative;max-width:640px}
.searchbox svg.mag,.searchwrap svg.mag{position:absolute;left:18px;top:50%;
  transform:translateY(-50%);pointer-events:none;color:var(--ink-3)}
#q{width:100%;min-height:62px;padding:16px 18px 16px 50px;font:500 16.5px var(--mono);
   color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-radius:2px}
#q::placeholder{color:var(--ink-3);font-weight:400}
#q:focus{outline:none;border-color:var(--blue);
         box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 24%,transparent)}
.stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:30px}
.stats div{font:400 var(--fs-label)/1.5 var(--mono);color:var(--ink-2);letter-spacing:.11em;text-transform:uppercase}
.stats b{display:block;font:700 24px/1.25 var(--sans);color:var(--ink);letter-spacing:-.02em;
         text-transform:none;margin-bottom:2px}

/* ── results ────────────────────────────────────────────────────────────── */
.results{min-height:120px}
.resbar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
        flex-wrap:wrap;padding:22px 0 12px;border-bottom:1px solid var(--line)}
.rescount{font:500 11px var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--ink-2)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 12px var(--mono);padding:8px 12px;min-height:36px;border:1px solid var(--line);
      background:var(--white);border-radius:2px;cursor:pointer;color:var(--ink-2)}
.chip:hover{border-color:var(--slate)}
.chip[aria-pressed="true"]{background:var(--void);color:var(--white);border-color:var(--void)}
a.vcard,.vcard{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line-2);padding:16px 4px;min-height:44px;cursor:pointer;
  font:inherit;color:inherit;text-decoration:none}
.vcard:hover{background:var(--paper)}
.vn{font:600 19px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.vm{font:400 12.5px/1.7 var(--mono);color:var(--ink-2);margin-top:4px}
.flag-def,.open{color:var(--alert);font-weight:500}
.flag-ctl,.badge{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;padding:5px 7px;border-radius:2px;margin-top:8px;
  background:var(--alert-bg);color:var(--alert);border:1px solid var(--alert-line)}

/* ── empty state: where the scope caveat lives ──────────────────────────── */
.empty{padding:26px 0 8px;max-width:62ch}
.empty h3{font:600 17px/1.3 var(--sans);margin:0 0 10px}
.empty p{font-size:14.5px;color:var(--ink-2);margin:0 0 12px}
.empty .mono,.scopenote{display:block;font:400 14px/1.65 var(--sans);color:var(--ink-2);
  background:var(--paper);border-left:3px solid var(--blue);padding:14px 16px;margin-top:14px}

/* ── browse: numbered items, outline arrows, no fills ──────────────────── */
.browse{padding:56px 0 8px;border-top:1px solid var(--rule);margin-top:56px}
.browse h2{font:600 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
           color:var(--ink);margin:0 0 30px}
.cards{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr);gap:36px}}
.card{display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:var(--ink);
      padding:0 0 4px;background:none;border:0;min-height:44px}
.card .num{font:700 30px/0.86 var(--sans);letter-spacing:-.04em;color:var(--ink);flex:none}
.card .num::after{content:".";color:var(--blue)}
.card .body{flex:1}
.card .t{font:600 14px/1.32 var(--sans);margin:0 0 3px;letter-spacing:-.005em}
.card .d{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.card .arrow{flex:none;width:30px;height:30px;border:1.3px solid var(--ink-3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:2px;color:var(--ink)}
.card:hover .arrow{border-color:var(--blue);color:var(--blue)}
.card:hover .t{color:var(--blue-deep)}

/* ── vessel + browse page furniture (inherited, not redesigned) ─────────── */
.view{padding-bottom:8px}
.back{display:inline-block;font:500 12px var(--mono);color:var(--ink-2);
      text-decoration:none;margin:26px 0 14px;min-height:44px;line-height:44px}
.back:hover{color:var(--ink)}
.vname{font:600 clamp(24px,3.6vw,32px)/1.15 var(--sans);letter-spacing:-.02em;margin:0}
/* The rule under a page title. It also carries the one-line answer on the finding, cohort
   and operator pages, so it is a text block with a rule on top, not a 3px box that text
   spills out of and over the first section heading (which is what it was, visibly on phones). */
.loadline{border-top:3px solid var(--void);margin:12px 0 10px;max-width:100%;
          font:400 16px/1.5 var(--sans);color:var(--ink)}
.loadline:not(:empty){padding-top:10px}
.vsub{font:400 12.5px/1.7 var(--mono);color:var(--ink-2)}
section{margin-top:34px}
.sechead{font:600 var(--fs-label)/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;
         color:var(--ink-2);padding-bottom:10px;border-bottom:1px solid var(--line);margin:0 0 14px}
.sechead a.gl{color:inherit}
.rrow.sub .k{padding-left:14px}
.overdue{color:var(--alert);font-weight:600}
.towlink.muted{color:var(--ink-2)}
.empty p{font:400 14px/1.6 var(--sans);color:var(--ink-2);margin:0}
.idgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){.idgrid{grid-template-columns:repeat(3,1fr)}}
.idcell .k{font:500 var(--fs-label)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.idcell .k a.gl{color:inherit}
.idcell .v{font:500 15px/1.45 var(--mono);margin-top:6px}
.idcell .v.none{color:var(--ink-2)}
.record{border:1px solid var(--line);border-radius:3px}
.rrow{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;
      border-bottom:1px solid var(--line-2);font-size:14.5px}
.rrow:last-child{border-bottom:0}
.rrow .k{color:var(--ink-2)}
.rrow .v{font-family:var(--mono);font-weight:500;text-align:right}
.rrow .v.warn{color:var(--alert)}
.rrow .v.ok{color:var(--ink-2)}
.vintage{font-size:13.5px;line-height:1.7;color:var(--ink-2);background:var(--paper);
         border-left:3px solid var(--blue);padding:14px 16px;margin-top:16px}
.vintage b{color:var(--ink)}
.item{padding:14px 4px;border-bottom:1px solid var(--line-2)}
.item .top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.item .date{font:500 13px var(--mono)}
.item .kind,.item .unit{font:400 12px/1.6 var(--mono);color:var(--ink-2)}
.item .sys{font:600 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.item .desc{font-size:14px;line-height:1.65;margin-top:8px}
.item .meta{font:400 12px/1.7 var(--mono);color:var(--ink-2);margin-top:8px}
.pill{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
      padding:5px 7px;border-radius:2px;border:1px solid var(--line)}
.pill.open{background:var(--alert-bg);color:var(--alert);border-color:var(--alert-line)}
.pill.done{background:var(--paper);color:var(--ink-2)}
.tow p{font-size:14px;color:var(--ink-2);margin:0 0 12px}
.towlink{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:12px 14px;margin-bottom:8px;font:500 14px var(--sans);
  color:var(--ink);text-decoration:none;cursor:pointer;min-height:44px}
.towlink:hover{border-color:var(--slate)}
.copylink{display:inline-block;width:auto;margin-left:6px}
.towlink span{display:block;font:400 11.5px/1.6 var(--mono);color:var(--ink-2);margin-top:3px}
.banner{background:var(--alert-bg);border-top:3px solid var(--alert);border-bottom:1px solid var(--alert-line)}
.banner .wrap{padding:16px 24px}
.banner .lab{font:600 10px/1 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--alert)}
.banner .msg{font:600 16px/1.35 var(--sans);margin-top:7px;color:var(--ink)}
.banner .det{font:400 12px/1.7 var(--mono);color:var(--ink-2);margin-top:6px}
.rescount{display:block}

/* ── footer: hairline, mono, and the Thalor mark used quietly ───────────── */
footer{background:var(--white);color:var(--ink-2);padding:26px 0 40px;
       font:400 var(--fs-min)/1.8 var(--mono);margin-top:48px;border-top:1px solid var(--rule)}
footer p{margin:0 0 9px;max-width:76ch}
footer a{color:var(--blue-deep)}
footer b{color:var(--ink);font-weight:600}
.byline{display:flex;align-items:center;gap:7px;margin-top:14px;color:var(--ink-2)}
.byline svg{display:block;width:11px;height:13px;color:var(--ink-2);opacity:.85}

@media(prefers-reduced-motion:no-preference){
  .vcard,.chip,.card,.towlink{transition:background .12s ease,border-color .12s ease}
}

/* ── the report offer (MAURY-BIZ-002 Stage 2) ───────────────────────────── */
.offer{border:1px solid var(--ink);border-radius:3px;padding:20px 22px;margin-top:34px}
.offer-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.offer-kicker{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.offer-title{font:600 17px/1.3 var(--sans);margin-top:7px;letter-spacing:-.01em}
.offer-btn{font:500 13px var(--sans);background:var(--ink);color:var(--white);border:0;
  border-radius:2px;padding:13px 18px;min-height:44px;cursor:pointer;white-space:nowrap}
.offer-btn:hover{background:var(--blue-deep)}
.offer-panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.offer-panel p{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:0 0 12px;max-width:62ch}
.offer-panel b{color:var(--ink)}
.offer-panel ul{margin:0 0 16px;padding-left:18px;max-width:62ch}
.offer-panel li{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.offer-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.offer-form input{flex:1 1 240px;min-height:46px;padding:12px 14px;font:400 14px var(--mono);
  color:var(--ink);background:var(--white);border:1px solid var(--ink-3);border-radius:2px}
.offer-form input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.offer-form button{font:500 13px var(--sans);background:var(--ink);color:var(--white);border:0;
  border-radius:2px;padding:12px 20px;min-height:46px;cursor:pointer}
.offer-fine{font:400 var(--fs-min)/1.6 var(--mono)!important;color:var(--ink-2)!important}
.offer-none{border-style:dashed;border-color:var(--line)}
.offer-none p{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:9px 0 0;max-width:64ch}

/* --- findings table (signal.html). Numbers are the content, so they get the mono face,
   tabular figures and enough room to be read as a column rather than a sentence. --- */
.tblwrap{overflow-x:auto;margin:14px 0 4px;border:1px solid var(--line);border-radius:3px}
.dtable{border-collapse:collapse;width:100%;min-width:520px;background:var(--white)}
.dtable th{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--paper)}
.dtable td{font:400 13.5px/1.5 var(--mono);color:var(--ink);padding:11px 16px;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.dtable tr:last-child td{border-bottom:0}
.dtable th.n,.dtable td.n{text-align:right}
.dtable td b{font-weight:600}
.cite .citeblock{font:400 12.5px/1.75 var(--mono);color:var(--ink-2);background:var(--paper);
  border-left:2px solid var(--line);padding:14px 18px;margin:4px 0 14px;border-radius:0 3px 3px 0}

.offer-what{font:400 13.5px/1.65 var(--sans);color:var(--ink-2);margin:14px 0 10px;max-width:66ch}
.offer-samples{font:400 13.5px/1.7 var(--sans);color:var(--ink-2);margin:0 0 10px;max-width:66ch}
.offer-none p a,.offer-what a{color:var(--blue-deep)}
.offer-samples a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

.cell-n{font:400 var(--fs-label)/1 var(--mono);color:var(--ink-2)}

/* ── the first screen of a vessel page (UX-003 §4) ──────────────────────── */
/* Eight facts inside 812px at 375 wide: built, last inspected, inspections, deficiencies
   and unresolved, controls, tow units, former names. Labels mono, values sans. */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px;margin:16px 0 0;
       padding:16px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{margin:0;min-width:0}
.fact dt{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.fact dt a.gl{color:inherit}
.fact dd{margin:5px 0 0;font:500 15px/1.4 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.fact dd .none{color:var(--ink-2);font-weight:400}
.fact dd .warn,.fact dd.warn{color:var(--alert)}
.fact dd .ok{color:var(--ink-2);font-weight:400}
.fact dd .ok a.gl{color:inherit}
.fact.wide{grid-column:1/-1}
.fact.wide dd{font-weight:400}
.vintage-line{font:400 var(--fs-meta)/1.65 var(--mono);color:var(--ink-2);margin:12px 0 0;max-width:80ch}
.vintage-line b{color:var(--ink)}
.vintage.tight{margin:10px 0 0}
.tools{margin:12px 0 0}
.vsub a{color:var(--ink-2)}

/* a term linked to the glossary: a dotted underline, the colour of the text around it */
a.gl{color:inherit;text-decoration:underline dotted;text-decoration-color:var(--slate);
     text-underline-offset:3px;text-decoration-thickness:1px}
a.gl:hover{text-decoration-style:solid;color:var(--blue-deep)}

/* the glossary page */
.glossary{margin:0}
.gterm{padding:14px 0;border-bottom:1px solid var(--line-2);scroll-margin-top:16px}
.gterm dt{font:600 15px/1.3 var(--sans);color:var(--ink)}
.gterm dd{margin:6px 0 0;font:400 14px/1.62 var(--sans);color:var(--ink-2);max-width:68ch}
.gterm:target{background:var(--paper);margin:0 -14px;padding:14px 14px;border-left:3px solid var(--blue)}

/* findings: the link to the full method */
.more{font:400 14px/1.9 var(--sans);margin:28px 0 0}
.more a{color:var(--blue-deep)}

/* ── print: a vessel page on paper (UX-003 §8) ──────────────────────────── */
@media print{
  @page{margin:14mm}
  body{font-size:12px;color:#000;background:#fff}
  .nav,.mark-sub,.copylink,.tools,.offer,.back,#wf,.offer-form,button,.hero::before,.hero::after{display:none!important}
  .wrap{max-width:none;padding:0}
  a{color:inherit;text-decoration:none}
  a.gl{text-decoration:none}
  .banner{border:2px solid #000;background:#fff}
  .banner .lab,.banner .msg{color:#000}
  .record,.item,.fact,.idcell,.vintage{break-inside:avoid}
  .facts,.record,.sechead{border-color:#000}
  .vintage{background:#fff;border-left:2px solid #000}
  footer{border-top:1px solid #000;margin-top:20px}
  footer::after{content:"Printed from Maury. The live page carries any record added since.";
    display:block;margin-top:8px}
}

/* ── Professional (BUILD-007): the panel a non-subscriber sees, and the pricing page ── */
.pro-panel .tools{margin-top:10px}
/* UX-004 §3: the lead sentence (counts and dates only), the span line, the tier line, the panel */
.lead{font:400 16px/1.55 var(--sans);color:var(--ink);margin:14px 0 0;max-width:70ch}
.lead b{font-weight:600}
.lead-span{font:500 var(--fs-label)/1.6 var(--mono);color:var(--ink-2);margin:6px 0 0;letter-spacing:.02em}
.tierline{font:400 12.5px/1.6 var(--mono);color:var(--ink-2);margin:0 0 4px;padding:8px 0 10px;border-bottom:1px solid var(--rule)}
.tierline a{color:var(--blue-deep)}
.pro-panel .offer-what{margin-top:10px}
.offer-price{font:400 14px/1.7 var(--sans);color:var(--ink);margin:8px 0 6px;max-width:66ch}
.offer-price b{font-weight:600}
.offer-price .towlink{margin:6px 8px 0 0;display:inline-block}
.offer-price .towlink.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
/* the Worker's pages inside the site shell (account, sign-in) */
.acct h1{font:600 26px/1.2 var(--sans);letter-spacing:-.01em;margin:8px 0 14px}
.acct h2{font:600 var(--fs-label)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.acct p,.acct li,.acct label{font:400 14.5px/1.65 var(--sans);color:var(--ink)}
.acct .fine{font:400 12.5px/1.6 var(--mono);color:var(--ink-2);max-width:66ch}
.acct .ok{color:#1d6b3a}.acct .warn{color:#8a3b12}
.acct input,.acct textarea{font:inherit;padding:.55em .7em;border:1px solid var(--line);background:var(--white);max-width:100%;box-sizing:border-box}
.acct input[type=email]{width:min(100%,26em)}
.acct textarea{width:min(100%,32em);min-height:6em}
.acct button{font:500 13px var(--sans);background:var(--ink);color:var(--white);border:0;border-radius:2px;padding:11px 16px;min-height:40px;cursor:pointer}
.acct button.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.acct form{margin:.6em 0}.acct .row{display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
.acct ul{padding-left:1.2em}.acct code{font-family:var(--mono)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.plan{border:1px solid var(--ink);border-radius:3px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;margin:0}
.plan .price{font:600 26px/1.1 var(--sans);letter-spacing:-.02em}
.plan .price span{font:400 13px var(--mono);color:var(--ink-2);margin-left:6px}
.plan p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0;flex:1}
.plan .offer-btn{align-self:flex-start}
.plan button[disabled]{opacity:.5;cursor:default}
.tiers{width:100%;border-collapse:collapse;margin-top:14px}
/* UX-004 §3.12: the tiers are a definition list in the reader's words, not a feature matrix */
dl.tiers{margin:4px 0 0;display:grid;gap:14px}
dl.tiers>div{border-top:1px solid var(--line);padding-top:12px}
dl.tiers dt{font:600 var(--fs-label)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
dl.tiers dd{margin:6px 0 0;font:400 14px/1.65 var(--sans);color:var(--ink-2);max-width:70ch}
.tiers th,.tiers td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.55;vertical-align:top}
.tiers th{font:600 var(--fs-label)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* ── phones (kept last: same specificity as the rules above, so order decides) ──
   The nav drops onto its own row under the mark instead of disappearing. Six links at
   11.5px caps do not fit beside the wordmark at 375px, and a site whose Findings, Watch
   and Coverage pages are unreachable from a phone is not published there. */
@media(max-width:640px){
  .top .wrap{flex-wrap:wrap;gap:0 14px;padding-bottom:6px}
  /* UX-004 §4.1: five items at 11.5px/.13em did not fit 327px and "About" wrapped alone on
     every page. Tighter tracking and gap keep the five on one line down to 360px; the
     subtitle stays beside the wordmark on every width (typed once, carries no number). */
  .mark-sub{font-size:10px;letter-spacing:.09em}
  .nav{flex-basis:100%;margin-left:0;flex-wrap:wrap;gap:0 15px}
  .nav a{font-size:11px;letter-spacing:.08em;min-height:40px;line-height:40px}
  .hero{padding-bottom:44px}
  .browse{margin-top:28px;padding-top:40px}
  .vsub .copylink{display:block;margin:10px 0 0}
  /* finding and cohort tables: let the columns wrap rather than scroll off the edge */
  .dtable{min-width:0}
  .tblwrap{margin-left:-10px;margin-right:-10px}
  .dtable th{white-space:normal;padding:9px 7px}
  .dtable td{padding:9px 7px;font-size:12px}
  /* the empty search-results well holds 120px open for desktop; on a phone it is a void */
  .results{min-height:24px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:14px 0 12px}
  .fact dd{font-size:14px}
  .gterm:target{margin:0}
  .plans{grid-template-columns:1fr}
}

#wf{margin:.4rem 0 0}
#wf label{display:block;margin:.9rem 0 .3rem;font-size:.92rem}
#wf textarea,#wf input{width:100%;max-width:46rem;font:inherit;font-size:.95rem;padding:.55rem .6rem;
  border:1px solid var(--ink-3);background:var(--white);color:inherit;border-radius:2px}
#wf textarea{font-family:var(--mono,ui-monospace,Menlo,monospace);resize:vertical}
#wf button{margin-top:.9rem;font:inherit;font-size:.95rem;padding:.6rem 1.1rem;border:1px solid var(--ink);
  background:var(--ink);color:var(--white);cursor:pointer;border-radius:2px}
#wf button:disabled{opacity:.55;cursor:default}
.wmsg{margin-top:.7rem;font-size:.92rem}
.wmsg.ok{color:var(--ink)}.wmsg.err{color:var(--alert)}
.fineprint{margin-top:.8rem;font-size:.86rem;color:var(--ink-2)}
button.linky{font:inherit;font-size:inherit;background:none;border:0;padding:0;color:inherit;
  text-decoration:underline;cursor:pointer}