/* ==========================================================================
   Solida Staffing — single shared stylesheet
   Color system is driven entirely by the custom properties in :root below.
   Three theme states are supported: light (:root), system-dark (media query),
   and explicit dark ([data-theme="dark"]). Never declare a color anywhere
   except through a var(--token) — see CLAUDE.md.
   ========================================================================== */

:root{
  --ground:#F7F8F6;
  --surface:#FFFFFF;
  --surface-sunk:#EDF0EE;
  --ink:#131E23;
  --ink-soft:#33474D;
  --muted:#55696E;
  --line:#D6DDD9;
  --line-strong:#B9C4BF;
  --accent:#16645A;
  --accent-deep:#0E4A43;
  --accent-wash:#E4EEEA;
  --band:#101B1E;
  --band-ink:#E9EFEB;
  --band-muted:#93A8A6;
  --band-line:#2B3B3D;
  --signal-band:#F0834F;
  --caution-band:#D8A43C;
  --focus:#2C9C7E;
  --shadow:0 10px 30px rgba(19,30,35,0.08);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* The floor for mono text that is PROSE rather than a label. 11px is fine for
     an uppercase, letterspaced tag with no sentence in it; it is not fine for
     the guarantee terms, the offer feature lists, or the risk-reversal line
     next to the primary CTA. Those are the sentences that answer objections,
     and this audience skews older. Labels stay at 0.6875rem by design. */
  --fs-fine:0.875rem;

  /* Minimum hit area for anything tappable. */
  --tap:44px;

  --wrap:min(100% - 2.5rem, 62rem);
  --col:min(100% - 2.5rem, 40rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1517;
    --surface:#141F21;
    --surface-sunk:#101A1C;
    --ink:#E9EFEB;
    --ink-soft:#C3D0CC;
    --muted:#94A6A4;
    --line:#263436;
    --line-strong:#38494B;
    --accent:#4FB89C;
    --accent-deep:#7FD3BB;
    --accent-wash:#152B29;
    --band:#08100F;
    --band-ink:#E9EFEB;
    --band-muted:#8B9F9D;
    --band-line:#22302F;
    --signal-band:#F0834F;
    --caution-band:#D8A43C;
    --focus:#7FD3BB;
    --shadow:0 10px 30px rgba(0,0,0,0.45);
  }
}

:root[data-theme="dark"]{
  --ground:#0D1517;
  --surface:#141F21;
  --surface-sunk:#101A1C;
  --ink:#E9EFEB;
  --ink-soft:#C3D0CC;
  --muted:#94A6A4;
  --line:#263436;
  --line-strong:#38494B;
  --accent:#4FB89C;
  --accent-deep:#7FD3BB;
  --accent-wash:#152B29;
  --band:#08100F;
  --band-ink:#E9EFEB;
  --band-muted:#8B9F9D;
  --band-line:#22302F;
  --signal-band:#F0834F;
  --caution-band:#D8A43C;
  --focus:#7FD3BB;
  --shadow:0 10px 30px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;scroll-padding-top:5rem;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--f-display);
  text-wrap:balance;
  letter-spacing:-0.022em;
  line-height:1.08;
  margin:0;
}

a{color:var(--accent);}
a:focus-visible,button:focus-visible{
  outline:2.5px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--accent);
  color:var(--ground);
  font-family:var(--f-display);
  font-weight:700;
  font-size:0.875rem;
  padding:0.75rem 1.25rem;
  z-index:50;
  text-decoration:none;
}
.skip-link:focus{left:0;}

.eyebrow{
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

/* ---------- hero ---------- */
.hero{
  width:var(--wrap);
  margin-inline:auto;
  padding-block:3.25rem 3.5rem;
  display:grid;
  gap:2.75rem;
  grid-template-columns:1fr;
}
@media (min-width:62rem){
  .hero{grid-template-columns:1.35fr 1fr;gap:4rem;align-items:start;}
}

.hero h1{
  font-size:clamp(2.35rem,6.2vw,3.9rem);
  font-weight:800;
}
/* On the home page the second line is the other half of the same promise, so it
   carries the same weight and ink as the first. It is a line break, not a demotion.
   The vertical pages keep the quieter treatment via `.phero h1 .quiet` below. */
.hero h1 .quiet{
  display:block;
  color:var(--ink);
  font-weight:800;
}
.hero-lede{
  font-size:1.1875rem;
  color:var(--ink-soft);
  max-width:34rem;
  margin:1.5rem 0 0;
}
.hero-lede strong{font-weight:500;color:var(--ink);}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.5rem;
  margin-top:2rem;
}

.btn{
  font-family:var(--f-display);
  font-weight:700;
  font-size:0.9375rem;
  letter-spacing:0.005em;
  text-decoration:none;
  display:inline-block;
  padding:0.9rem 1.6rem;
  border-radius:3px;
  background:var(--accent);
  color:var(--ground);
  border:1.5px solid var(--accent);
  transition:background 140ms ease,border-color 140ms ease;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);}

/* This used to carry hand-set <br> tags tuned to the desktop measure, which
   landed mid-thought once the type came up to 14px and broke badly on a phone.
   The measure is set here instead and the text wraps itself at every width. */
.btn-note{
  font-family:var(--f-mono);
  font-size:var(--fs-fine);
  line-height:1.6;
  color:var(--muted);
  letter-spacing:0.01em;
  max-width:26rem;
  text-wrap:pretty;
}

/* ---------- generic section ---------- */
.section{
  width:var(--wrap);
  margin-inline:auto;
  padding-block:3.75rem;
  border-top:1px solid var(--line);
}
.section-head{margin-bottom:2.25rem;}
/* A section that butts straight onto the page hero, with no rule and no gap.
   Replaces a `style="border-top:0;padding-top:0;"` inline override. */
.section.flush{border-top:0;padding-top:0;}
.section-head h2{
  font-size:clamp(1.5rem,3.4vw,2rem);
  font-weight:700;
  margin-top:0.6rem;
  max-width:30rem;
}

/* ---------- duties ---------- */
.duties{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.duties li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.25rem;
  align-items:start;
  padding-block:1.15rem;
  border-bottom:1px solid var(--line);
}
.duties .tick{
  font-family:var(--f-mono);
  font-size:0.75rem;
  font-weight:600;
  color:var(--accent);
  padding-top:0.3rem;
  font-variant-numeric:tabular-nums;
}
.duties b{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1rem;
  display:block;
  margin-bottom:0.15rem;
}
.duties .detail{color:var(--ink-soft);font-size:0.9688rem;}

.fence{
  font-family:var(--f-mono);
  font-size:var(--fs-fine);
  line-height:1.7;
  color:var(--muted);
  background:var(--surface-sunk);
  border-left:2px solid var(--line-strong);
  padding:1rem 1.15rem;
  margin-top:1.75rem;
  border-radius:0 3px 3px 0;
}

/* ---------- triage band ---------- */
.band{
  background:var(--band);
  color:var(--band-ink);
  padding-block:3.75rem;
}
.band-inner{width:var(--wrap);margin-inline:auto;}
.band .eyebrow{color:var(--band-muted);}
.band h2{
  font-size:clamp(1.5rem,3.4vw,2rem);
  font-weight:700;
  margin-top:0.6rem;
  max-width:32rem;
}
.band-lede{
  color:var(--band-muted);
  max-width:38rem;
  margin:1rem 0 2.5rem;
  font-size:1.0313rem;
}
.triage{
  display:grid;
  gap:1px;
  background:var(--band-line);
  border:1px solid var(--band-line);
  border-radius:3px;
  overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:52rem){.triage{grid-template-columns:repeat(3,1fr);}}
.tier{background:var(--band);padding:1.5rem 1.4rem;}
.tier-tag{
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin:0 0 0.9rem;
}
.tier-tag::before{
  content:"";
  width:0.5rem;
  height:0.5rem;
  border-radius:50%;
  background:currentColor;
}
.tier-1 .tier-tag{color:var(--signal-band);}
.tier-2 .tier-tag{color:var(--caution-band);}
.tier-3 .tier-tag{color:var(--band-muted);}
.tier-sla{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.0625rem;
  margin:0 0 0.5rem;
  color:var(--band-ink);
  line-height:1.25;
}
.tier-list{
  margin:0;
  font-family:var(--f-mono);
  font-size:var(--fs-fine);
  line-height:1.7;
  color:var(--band-muted);
}
.band-foot{
  margin:2.25rem 0 0;
  font-size:1.0313rem;
  color:var(--band-ink);
  max-width:40rem;
}
.band-foot em{color:var(--band-muted);}

/* A .band is dark in ALL three theme states, so a link inside one cannot use
   --accent: in light mode that token is #16645A, which lands at 2.51:1 against
   the band and fails WCAG AA. --band-ink is the only token that is light in all
   three blocks, so band links take it and earn their affordance from the
   underline instead of from hue. Added 2026-09-21 after an automated contrast
   pass caught two failing links. */
.band a{
  color:var(--band-ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--band-muted);
  transition:text-decoration-color 140ms ease;
}
.band a:hover{text-decoration-color:var(--band-ink);}

/* ---------- steps ---------- */
.steps{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:step;
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.5rem;
  padding-block:1.5rem;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.step:first-child{border-top:1px solid var(--line);}
.step::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  font-family:var(--f-mono);
  font-size:0.8125rem;
  font-weight:600;
  color:var(--accent);
  padding-top:0.35rem;
  font-variant-numeric:tabular-nums;
}
.step h3{
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:0.35rem;
}
.step p{margin:0;color:var(--ink-soft);font-size:0.9688rem;max-width:38rem;}
.step .when{
  font-family:var(--f-mono);
  font-size:0.7188rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-top:0.55rem;
}

/* ---------- close ---------- */
.close{
  background:var(--accent-wash);
  border-top:1px solid var(--line);
  padding-block:4rem;
}
.close-inner{
  width:var(--col);
  margin-inline:auto;
  text-align:center;
}
.close h2{
  font-size:clamp(1.7rem,4.2vw,2.5rem);
  font-weight:800;
}
.close p{
  color:var(--ink-soft);
  margin:1.15rem auto 2rem;
  max-width:34rem;
}
.close .btn{padding:1rem 2rem;font-size:1rem;}
.contact{
  font-family:var(--f-mono);
  font-size:var(--fs-fine);
  color:var(--muted);
  margin-top:1.75rem;
  line-height:1.9;
}
.contact a{color:var(--accent);text-underline-offset:2px;}

footer{
  width:var(--wrap);
  margin-inline:auto;
  padding-block:2rem 3rem;
  font-family:var(--f-mono);
  font-size:0.7188rem;
  line-height:1.8;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem 1.5rem;
  justify-content:space-between;
}

/* ---------- 404 ---------- */
.notfound{
  width:var(--col);
  margin-inline:auto;
  padding-block:6rem 5rem;
  text-align:center;
}
.notfound .code,.thanks .code{
  font-family:var(--f-mono);
  font-size:0.75rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:1rem;
}
.notfound h1{
  font-size:clamp(1.8rem,4.5vw,2.6rem);
  font-weight:800;
}
.notfound p{
  color:var(--ink-soft);
  margin:1.15rem auto 2rem;
  max-width:32rem;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important;}
}

/* ==========================================================================
   MULTI-PAGE EXTENSIONS - added 2026-09-19 for the statewide relaunch.
   Same rule as above: every color is a token declared in all three theme
   blocks. Nothing below introduces a literal color.
   ========================================================================== */

/* ---------- sticky nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .nav{
    background:color-mix(in srgb, var(--ground) 86%, transparent);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
  }
}
/* Padding came down from 0.9rem when `.nav-cta` gained its 44px minimum, so the
   bar is the same ~60px tall as before while the button is finally tappable. */
.nav-inner{
  width:var(--wrap);
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:1rem;
  padding-block:0.5rem;
}
.nav-links{
  display:none;
  gap:1.4rem;
  margin-left:auto;
  align-items:center;
}
@media (min-width:64rem){.nav-links{display:flex;}}
.nav-links a{
  font-family:var(--f-mono);
  font-size:0.75rem;
  letter-spacing:0.055em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  padding-block:0.55rem;
  border-bottom:1.5px solid transparent;
  transition:color 140ms ease,border-color 140ms ease;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);}
.nav-cta{
  font-family:var(--f-display);
  font-weight:700;
  font-size:0.8125rem;
  text-decoration:none;
  background:var(--accent);
  color:var(--ground);
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding-inline:1.15rem;
  border-radius:3px;
  white-space:nowrap;
  transition:background 140ms ease;
}
.nav-cta:hover{background:var(--accent-deep);}
/* The wordmark is the "go home" tap target on a phone, so it takes the same 44px
   floor as the other controls. The bar does not grow: `.nav-cta` already sets it. */
.nav .wordmark{
  margin-right:0.5rem;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
}
@media (max-width:63.99rem){.nav-cta{margin-left:auto;}}

/* ---------- mobile section strip ----------
   This sits OUTSIDE `.nav` in the markup and scrolls away with the page. It used
   to live inside the sticky bar, which cost roughly 100px of a 375x667 phone —
   about 15% of the viewport, permanently. What has to stay pinned is the way out
   (the wordmark) and the way forward (Book a call); the section list does not,
   because every link in it also sits in `.footnav` at the foot of every page. */
.subnav{
  display:flex;
  gap:0.4rem;
  overflow-x:auto;
  scrollbar-width:none;
  width:var(--wrap);
  margin-inline:auto;
  padding-block:0.75rem 0.85rem;
}
.subnav::-webkit-scrollbar{display:none;}
@media (min-width:64rem){.subnav{display:none;}}
.subnav a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  font-family:var(--f-mono);
  font-size:0.6875rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:100px;
  padding-inline:0.95rem;
  background:var(--surface);
}
.subnav a[aria-current="page"]{color:var(--accent);border-color:var(--accent);}

/* ---------- interior page hero ---------- */
.phero{
  width:var(--wrap);
  margin-inline:auto;
  padding-block:3.5rem 3rem;
}
.phero h1{
  font-size:clamp(2.1rem,5.4vw,3.4rem);
  font-weight:800;
  max-width:20ch;
}
.phero h1 .quiet{display:block;color:var(--muted);font-weight:600;}
.phero-lede{
  font-size:1.1563rem;
  color:var(--ink-soft);
  max-width:40rem;
  margin:1.4rem 0 0;
}
.phero-lede strong{font-weight:500;color:var(--ink);}
.phero .hero-actions{margin-top:1.9rem;}

/* ---------- offer cards ---------- */
.offers{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
}
@media (min-width:52rem){.offers{grid-template-columns:repeat(3,1fr);}}
.offer{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--line-strong);
  border-radius:3px;
  padding:1.6rem 1.5rem;
  display:flex;
  flex-direction:column;
  transition:transform 160ms ease,border-color 160ms ease;
}
.offer:hover{transform:translateY(-3px);border-color:var(--line-strong);}
.offer.featured{border-top-color:var(--accent);}
.offer-tag{
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 0.9rem;
}
.offer.featured .offer-tag{color:var(--accent);}
.offer h3{font-size:1.1875rem;font-weight:700;margin-bottom:0.5rem;}
.offer-price{
  font-family:var(--f-display);
  font-weight:800;
  font-size:2.1rem;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  display:block;
  margin:0.9rem 0 0.15rem;
}
.offer.featured .offer-price{color:var(--accent);}
.offer-unit{
  font-family:var(--f-mono);
  font-size:0.7188rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:1.1rem;
}
/* `:not([class])` matters here. As a bare `.offer p` this rule outranked
   `.offer-tag` on specificity (0-1-1 beats 0-1-0) and silently rendered the
   "Most common" label at 15.5px instead of its declared 11px. Scoping it to
   unclassed paragraphs restores the label and leaves the body copy alone.
   Found 2026-09-20 during verification; the bug predates that pass. */
.offer p:not([class]){margin:0 0 1rem;font-size:0.9688rem;color:var(--ink-soft);line-height:1.6;}
.offer ul{
  list-style:none;
  margin:0 0 1.35rem;
  padding:0;
  font-family:var(--f-mono);
  font-size:var(--fs-fine);
  line-height:1.55;
  color:var(--muted);
}
.offer li{padding-left:1.1rem;position:relative;margin-bottom:0.55rem;}
.offer li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.5em;
  width:0.375rem;
  height:0.375rem;
  border-radius:50%;
  background:var(--accent);
}
.offer .btn{margin-top:auto;text-align:center;}
.btn.ghost{
  background:transparent;
  color:var(--accent);
  border-color:var(--line-strong);
}
.btn.ghost:hover{background:var(--accent-wash);border-color:var(--accent);}

/* ---------- statutory obligation rows ---------- */
.obligations{list-style:none;margin:0;padding:0;border-top:1px solid var(--band-line);}
.obligations li{
  display:grid;
  grid-template-columns:1fr;
  gap:0.3rem;
  padding-block:1.1rem;
  border-bottom:1px solid var(--band-line);
}
@media (min-width:44rem){
  .obligations li{grid-template-columns:10rem 1fr;gap:1.5rem;align-items:baseline;}
}
.obligations .cite{
  font-family:var(--f-mono);
  font-size:0.6875rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--caution-band);
}
.obligations .what{color:var(--band-ink);font-size:0.9688rem;}
.obligations .what b{font-family:var(--f-display);font-weight:700;}

/* ---------- cascade ---------- */
.cascade{list-style:none;margin:0;padding:0;}
.cascade li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.25rem;
  padding-block:1.15rem;
  border-bottom:1px solid var(--band-line);
  align-items:start;
}
.cascade li:first-child{border-top:1px solid var(--band-line);}
.cascade .at{
  font-family:var(--f-mono);
  font-size:0.75rem;
  font-weight:600;
  color:var(--caution-band);
  font-variant-numeric:tabular-nums;
  padding-top:0.25rem;
  white-space:nowrap;
}
.cascade li.fail .at{color:var(--signal-band);}
.cascade .beat b{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1rem;
  display:block;
  margin-bottom:0.2rem;
  color:var(--band-ink);
}
.cascade .beat span{color:var(--band-muted);font-size:0.9375rem;}

/* ---------- comparison table ---------- */
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare{width:100%;min-width:34rem;border-collapse:collapse;font-size:0.9375rem;}
/* Narrow tables (the three-column vetting scorecard) fit a phone without sideways scrolling inside the band. 2026-09-29. */
.compare.fit{min-width:0;}
.compare.fit th,.compare.fit td{padding:0.85rem 0.6rem;}
.compare caption{
  font-family:var(--f-mono);
  font-size:0.7188rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding-bottom:0.9rem;
}
.compare th,.compare td{
  text-align:left;
  padding:0.85rem 1rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.compare thead th{
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line-strong);
}
.compare tbody th{font-family:var(--f-body);font-weight:400;color:var(--ink-soft);}
.compare .num{
  font-family:var(--f-display);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.compare .ours{background:var(--accent-wash);}
.compare .ours .num{color:var(--accent);}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0;}

/* A .compare table sitting inside a .band inherits light-mode text and rule
   colors, which renders the row labels almost unreadable on the dark ground.
   Re-point them at the band tokens, which are declared in all three theme
   blocks. Added 2026-09-21 with vetting.html's scorecard. */
.band .compare caption,
.band .compare thead th{color:var(--band-muted);}
.band .compare tbody th{color:var(--band-ink);}
.band .compare th,
.band .compare td{border-bottom-color:var(--band-line);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.0313rem;
  padding-block:1.15rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";
  font-family:var(--f-mono);
  font-weight:400;
  font-size:1.25rem;
  color:var(--accent);
  flex:0 0 auto;
  line-height:1;
}
.faq details[open] summary::after{content:"\2013";}
.faq details p{margin:0 0 1.15rem;color:var(--ink-soft);font-size:0.9688rem;max-width:44rem;}

/* ---------- two column prose ---------- */
.duo{display:grid;gap:2rem;grid-template-columns:1fr;}
@media (min-width:52rem){.duo{grid-template-columns:repeat(2,1fr);gap:3rem;}}
.duo h3{font-size:1.0625rem;font-weight:700;margin-bottom:0.5rem;}
.duo p{margin:0 0 1rem;color:var(--ink-soft);font-size:0.9688rem;}
.duo p:last-child{margin-bottom:0;}

/* ---------- note ---------- */
.note{
  font-family:var(--f-mono);
  font-size:var(--fs-fine);
  line-height:1.7;
  color:var(--muted);
  border:1px dashed var(--line-strong);
  border-radius:3px;
  padding:1rem 1.15rem;
  margin-top:1.75rem;
}
.note b{color:var(--ink-soft);font-weight:600;}

/* ---------- scroll reveal ----------
   Hidden state is scoped to .js, which an inline head script adds and a
   window-load fallback removes if site.js never ran. A JS failure therefore
   degrades to fully visible content rather than a blank page. */
.js .reveal{opacity:0;transform:translateY(14px);}
.js .reveal.in{
  opacity:1;
  transform:none;
  transition:opacity 420ms ease,transform 420ms ease;
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;}
}

/* ---------- footer nav ---------- */
.footnav{
  width:var(--wrap);
  margin-inline:auto;
  padding-top:2.5rem;
  display:grid;
  gap:1.75rem;
  grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
@media (min-width:48rem){.footnav{grid-template-columns:repeat(3,1fr);}}
.footnav h4{
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 0.8rem;
}
.footnav ul{list-style:none;margin:0;padding:0;}
.footnav li{margin-bottom:0;}
/* On mobile this is the only full navigation on the page, since the section
   strip scrolls away — so these get a real hit area rather than a 22px line box. */
.footnav a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  font-size:0.9375rem;
  color:var(--ink-soft);
  text-decoration:none;
}
.footnav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.footnav p{margin:0;font-size:0.9375rem;color:var(--ink-soft);}

/* ==========================================================================
   SECTION-OPENER VARIANTS — added 2026-09-20.

   The site had 42 `.eyebrow` labels across 7 pages, and the home page ran five
   consecutive `eyebrow + h2 + paragraph` stacks. Identical openers in a row read
   as templated no matter how good the words are. These two variants exist so a
   page can change its rhythm without inventing one-off markup each time.

   Informative eyebrows ("Tuesday, 5:52am", "One seat, monthly") still earn their
   place and keep the default treatment. These replace the vacuous ones.
   ========================================================================== */

/* Opener 1: no label. The headline carries the section on its own and takes the
   size the eyebrow was borrowing. */
.section-head.bare{margin-bottom:1.4rem;}
.section-head.bare h2{
  margin-top:0;
  font-size:clamp(1.65rem,3.9vw,2.3rem);
  max-width:24ch;
}

/* The deck that can follow either opener. Replaces an inline margin override on
   `.hero-lede`, which was the only inline style left in the markup. */
.section-lede{
  font-size:1.1875rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:38rem;
  margin:0 0 2.25rem;
  text-wrap:pretty;
}

/* Opener 2: a single sentence in display type, set against a short accent rule.
   No label, no headline-over-paragraph stack — a different shape entirely, used
   at most once per page. */
.statement{
  margin:0 0 2.25rem;
  padding-top:1.5rem;
  border-top:2px solid var(--accent);
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.3rem,2.9vw,1.75rem);
  line-height:1.3;
  letter-spacing:-0.018em;
  color:var(--ink);
  max-width:30ch;
  text-wrap:pretty;
}
.statement b{font-weight:800;}
.band .statement{border-top-color:var(--signal-band);color:var(--band-ink);}

/* ==========================================================================
   ASK FORM — added 2026-09-20.

   Second conversion path. Every CTA on this site used to leave for Google
   Calendar; anyone not ready to pick a slot cold had only a mailto. This sits
   under the booking button in the same closing band, deliberately shorter than
   the calendar commitment it sits beside.
   ========================================================================== */
.ask-inner{
  width:var(--col);
  margin-inline:auto;
  margin-top:2.75rem;
}

/* "or" rule. A centered label with a hairline running out to both edges. */
.ask-split{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:0 0 1.75rem;
  font-family:var(--f-mono);
  font-size:0.6875rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.ask-split::before,.ask-split::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--line-strong);
}

.ask{display:grid;gap:1.15rem;text-align:left;}
.ask .field{display:grid;gap:0.4rem;}

/* Two short fields share a row once there is width for it. */
@media (min-width:34rem){
  .ask .pair{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;}
}

.ask label{
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.ask .optional{
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:none;
  color:var(--muted);
}

/* 1rem is a hard floor, not a preference: iOS Safari auto-zooms the whole page
   when a focused input is under 16px, which throws the layout sideways mid-form. */
.ask input,
.ask select,
.ask textarea{
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  border-radius:3px;
  padding:0.7rem 0.85rem;
  min-height:var(--tap);
  width:100%;
  transition:border-color 140ms ease,background 140ms ease;
}
.ask textarea{min-height:7rem;resize:vertical;}
.ask select{
  font-family:var(--f-body);
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.35rem,calc(100% - 0.8rem) 1.35rem;
  background-size:0.35rem 0.35rem,0.35rem 0.35rem;
  background-repeat:no-repeat;
  padding-right:2.5rem;
}
.ask input::placeholder,.ask textarea::placeholder{color:var(--muted);opacity:1;}

.ask input:hover,.ask select:hover,.ask textarea:hover{border-color:var(--muted);}
.ask input:focus-visible,
.ask select:focus-visible,
.ask textarea:focus-visible{
  outline:2.5px solid var(--focus);
  outline-offset:2px;
  border-color:var(--accent);
}

/* :user-invalid, not :invalid — :invalid paints every required field red before
   the visitor has typed a character. Browsers without it simply show no error
   tint and fall back to native validation, which is the safe direction. */
.ask input:user-invalid,
.ask select:user-invalid,
.ask textarea:user-invalid{
  border-color:var(--signal-band);
  background:var(--surface);
}
.ask input:disabled,.ask select:disabled,.ask textarea:disabled{
  background:var(--surface-sunk);
  color:var(--muted);
  border-color:var(--line);
  cursor:not-allowed;
}

.ask button{
  justify-self:start;
  cursor:pointer;
  min-height:var(--tap);
  font-family:var(--f-display);
  font-weight:700;
  font-size:0.9375rem;
  padding:0.9rem 1.6rem;
  border-radius:3px;
  background:var(--accent);
  color:var(--ground);
  border:1.5px solid var(--accent);
  transition:background 140ms ease,border-color 140ms ease;
}
.ask button:hover{background:var(--accent-deep);border-color:var(--accent-deep);}

.ask-foot{
  margin:0;
  font-family:var(--f-mono);
  font-size:var(--fs-fine);
  line-height:1.65;
  color:var(--muted);
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs,
   and screen readers are told to ignore it by aria-hidden plus tabindex="-1". */
.ask .hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- thank-you ---------- */
.thanks{
  width:var(--col);
  margin-inline:auto;
  padding-block:5rem 4rem;
}
.thanks h1{font-size:clamp(1.8rem,4.5vw,2.6rem);font-weight:800;margin-top:0.85rem;}
.thanks p{color:var(--ink-soft);margin:1.15rem 0 0;}
.thanks .next{
  margin-top:3rem;
  padding-top:2.25rem;
  border-top:1px solid var(--line);
}
.thanks-cta{margin-top:1.75rem;}

/* ==========================================================================
   Home: form-first hero (2026-09-26, prototype A chosen by Israel).
   Modelled on a booking-form-in-the-hero layout: headline, three plain facts,
   then the enquiry form as a short three-step card. The steps are progressive
   enhancement: site.js adds .is-stepped to the form. Without it, every field
   shows as one plain form and the Send button is always visible.
   ========================================================================== */
.fhero{
  width:var(--wrap);
  margin-inline:auto;
  padding-block:3rem 3.5rem;
  text-align:center;
}
.fhero h1{
  font-size:clamp(2rem,5.5vw,3.4rem);
  font-weight:800;
  max-width:44rem;
  margin:0 auto;
}
.fhero-lede{
  max-width:36rem;
  margin:1.1rem auto 0;
  color:var(--ink-soft);
  font-size:1.125rem;
}

.facts{
  list-style:none;
  padding:0;
  margin:2.25rem auto 2.5rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  max-width:42rem;
}
.facts li{display:grid;justify-items:center;gap:0.5rem;}
.facts svg{
  width:2.25rem;height:2.25rem;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.facts span{font-family:var(--f-display);font-weight:600;font-size:0.95rem;line-height:1.3;}

.form-card{
  max-width:40rem;
  margin:0 auto;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.75rem 1.5rem;
  box-shadow:var(--shadow);
  scroll-margin-top:5.5rem;
}
.form-card-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  border-bottom:1px solid var(--line);
  padding-bottom:0.9rem;
}
.form-card-head h2{font-size:1.35rem;font-weight:700;margin:0;}
.form-progress{margin:0;font-family:var(--f-mono);font-size:0.75rem;color:var(--muted);white-space:nowrap;}
.form-progress{display:none;}
.is-stepped .form-progress{display:block;}

.ask fieldset{border:0;margin:0;padding:0;display:grid;gap:1.15rem;min-width:0;}
.ask legend{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.125rem;
  color:var(--ink);
  padding:0;
  margin-bottom:0.9rem;
}
.is-stepped .form-step:not(.is-current){display:none;}

/* Role choices: big tappable options, one radio group */
.role-chips{display:grid;grid-template-columns:1fr;gap:0.6rem;}
@media (min-width:34rem){.role-chips{grid-template-columns:1fr 1fr;}}
.ask .role-chip{
  position:relative;
  display:block;
  cursor:pointer;
  font-family:var(--f-display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}
.ask .role-chip input{
  position:absolute;
  left:0;top:0;
  width:1px;height:1px;
  min-height:0;
  padding:0;
  opacity:0;
}
.role-chip span{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.75rem;
  min-height:var(--tap);
  padding:0.75rem 1rem;
  border:1.5px solid var(--line-strong);
  border-radius:6px;
  background:var(--surface);
  transition:border-color 140ms ease,background 140ms ease;
}
.role-chip small{font-family:var(--f-mono);font-weight:400;font-size:0.8125rem;color:var(--muted);}
.role-chip:hover span{border-color:var(--accent);}
.role-chip input:checked + span{border-color:var(--accent);background:var(--accent-wash);}
.role-chip input:focus-visible + span{outline:2.5px solid var(--focus);outline-offset:2px;}
.role-chip input:user-invalid + span{border-color:var(--signal-band);}

.form-nav{display:flex;gap:0.75rem;}
.form-back,.form-next{display:none;}
.is-stepped .form-next.is-shown{display:inline-block;}
.is-stepped .form-back.is-shown{display:inline-block;}
.is-stepped .form-send{display:none;}
.is-stepped .form-send.is-shown{display:inline-block;}
.ask button.form-back{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.ask button.form-back:hover{background:var(--surface-sunk);}
.ask-foot a{color:var(--accent);text-underline-offset:2px;}

/* Pinned "Tell us what you need" button, phones only. site.js hides it while
   the form itself is on screen. */
.sticky-cta{display:none;}
@media (max-width:40rem){
  .facts{grid-template-columns:1fr;justify-items:start;max-width:18rem;}
  .facts li{grid-auto-flow:column;justify-content:start;align-items:center;}
  .form-card{padding:1.25rem 1rem;}
  .sticky-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    left:1rem;right:1rem;
    bottom:1rem;
    z-index:40;
    min-height:var(--tap);
    background:var(--accent);
    color:var(--ground);
    font-family:var(--f-display);
    font-weight:700;
    text-decoration:none;
    border-radius:6px;
    box-shadow:var(--shadow);
    transition:opacity 160ms ease,transform 160ms ease;
  }
  .sticky-cta.is-hidden{opacity:0;transform:translateY(1rem);pointer-events:none;}
  .has-sticky-cta footer{padding-bottom:5rem;}
}

/* The home form's Hours question is a radio group, so its label is a <p>
   styled to match the form's <label> elements. */
.ask .field-label{
  margin:0;
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.hours-note{margin:0;font-family:var(--f-mono);font-size:var(--fs-fine);color:var(--muted);}
.hours-note[hidden]{display:none;}
.role-chip input:disabled + span{opacity:0.45;cursor:not-allowed;border-style:dashed;}
.role-chip input:disabled + span:hover{border-color:var(--line-strong);}

/* ==========================================================================
   Roles page, rebuilt buyer-first (2026-09-27).
   A picker of the six roles sits right under the hero so a buyer finds their
   problem in one screen. Each role then leads with "You need this if", shows
   its own price, and carries its own "Ask about this role" button, so there
   is a way to act within a screen of every role.
   ========================================================================== */
.phero-link{margin:1.25rem 0 0;font-family:var(--f-display);font-weight:600;}
.phero-link a{color:var(--accent);text-underline-offset:3px;}

.role-picker{
  width:var(--wrap);
  margin-inline:auto;
  padding-bottom:3rem;
  display:grid;
  gap:0.75rem;
  grid-template-columns:1fr;
}
@media (min-width:40rem){.role-picker{grid-template-columns:repeat(2,1fr);}}
@media (min-width:60rem){.role-picker{grid-template-columns:repeat(3,1fr);}}
.role-tile{
  display:grid;
  gap:0.35rem;
  align-content:start;
  min-height:var(--tap);
  padding:1rem 1.1rem;
  background:var(--surface);
  color:var(--ink);
  border:1.5px solid var(--line);
  border-radius:8px;
  text-decoration:none;
  transition:border-color 140ms ease,transform 140ms ease;
}
.role-tile:hover{border-color:var(--accent);transform:translateY(-2px);}
.role-tile:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.role-tile:hover{transform:none;}}
.rt-name{font-family:var(--f-display);font-weight:700;font-size:1.125rem;}
.rt-need{color:var(--ink-soft);font-size:0.9688rem;line-height:1.45;}
.rt-price{font-family:var(--f-mono);font-size:0.8125rem;color:var(--accent);margin-top:0.25rem;}
.role-tile.rt-unsure{border-style:dashed;background:transparent;grid-column:1/-1;}

/* One role: the decision (price, problem, button) on the left, the detail on
   the right from tablet width up. Stacks on phones. */
.section.role{padding-block:3rem;display:grid;gap:1.5rem;}
@media (min-width:52rem){
  .section.role{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:3rem;align-items:start;}
}
.role-meta{
  margin:0;
  font-family:var(--f-mono);
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--accent);
}
.role-head h2{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:700;margin:0.5rem 0 0.75rem;}
.role-need{margin:0 0 1.25rem;font-size:1.0938rem;color:var(--ink-soft);max-width:30rem;}
.role-need b{color:var(--ink);font-weight:600;}
.role-duties{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.role-duties li{padding-block:0.8rem;border-bottom:1px solid var(--line);}
.role-duties b{display:block;font-family:var(--f-display);font-weight:700;font-size:1rem;}
.role-duties span{color:var(--ink-soft);font-size:0.9688rem;}
.role-body .fence{margin-top:1.25rem;}
.role-body .fence + .fence{margin-top:0.75rem;}
.fence b{color:var(--ink-soft);}

.plain-list{margin:0;padding-left:1.1rem;color:var(--ink-soft);font-size:0.9688rem;}
.plain-list li{margin-bottom:0.5rem;}
/* Phones: the six roles are the whole page, so spacing is tightened there
   rather than cutting content. */
@media (max-width:39.99rem){
  .phero{padding-block:2.5rem 2rem;}
  .role-picker{gap:0.6rem;padding-bottom:2rem;}
  .role-tile{padding:0.8rem 0.95rem;gap:0.2rem;}
  .section.role{padding-block:2.25rem;gap:1.1rem;}
  .role-need{margin-bottom:1rem;}
  .role-duties li{padding-block:0.6rem;}
  .role-body .fence{margin-top:1rem;padding:0.8rem 0.95rem;}
}

/* ==========================================================================
   Pricing page, rebuilt 2026-09-27. One price table answers "what will my role
   cost, full-time or part-time" at a glance; what every coordinator includes
   is listed once; "When you pay" shows when money moves. Tables here are two
   columns, so they drop the 34rem minimum and fit a phone without scrolling.
   ========================================================================== */
.compare.price-table,.compare.fits{min-width:0;}
.price-table{font-size:1rem;}
.price-table thead th{font-size:0.75rem;}
.price-table tbody th b{display:block;font-family:var(--f-display);font-weight:700;color:var(--ink);}
.price-table .num{font-size:1.5rem;letter-spacing:-0.02em;}
.col-note,.row-note{
  display:block;
  font-family:var(--f-mono);
  font-size:0.75rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  white-space:normal;
  margin-top:0.2rem;
}
.row-note a{color:var(--ink-soft);text-underline-offset:2px;}
.row-note a:hover{color:var(--accent);}

.fit-hints{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:0.5rem;max-width:40rem;}
.fit-hints li{color:var(--ink-soft);padding-left:1.1rem;position:relative;}
.fit-hints li::before{
  content:"";
  position:absolute;
  left:0;top:0.65em;
  width:0.375rem;height:0.375rem;
  border-radius:50%;
  background:var(--accent);
}
.fit-hints b{color:var(--ink);font-weight:600;}
.fit-hints a{color:var(--accent);text-underline-offset:2px;}

.includes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0.6rem 2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:48rem){.includes{grid-template-columns:1fr 1fr;}}
/* A lede that follows a list needs the same breathing room a lede gets below it (vetting "What you receive", 2026-09-29). */
.includes + .section-lede{margin-top:2.25rem;}
.includes li{padding-left:1.75rem;position:relative;color:var(--ink);}
.includes li::before{
  content:"";
  position:absolute;
  left:0.1rem;top:0.45em;
  width:0.9rem;height:0.5rem;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.text-link{color:var(--accent);font-family:var(--f-display);font-weight:600;text-underline-offset:3px;}

.pay-steps{
  list-style:none;
  counter-reset:pay;
  margin:0;
  padding:0;
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
}
@media (min-width:48rem){.pay-steps{grid-template-columns:repeat(3,1fr);gap:2rem;}}
.pay-steps li{counter-increment:pay;border-top:2px solid var(--accent);padding-top:0.9rem;}
.pay-steps li::before{
  content:"0" counter(pay);
  display:block;
  font-family:var(--f-mono);
  font-size:0.75rem;
  color:var(--muted);
  margin-bottom:0.35rem;
}
.pay-steps b{display:block;font-family:var(--f-display);font-weight:700;margin-bottom:0.25rem;}
.pay-steps span{color:var(--ink-soft);font-size:0.9688rem;}

.offer.placement{max-width:34rem;}
.offer.placement:hover{transform:none;}
.offer.placement p:last-child{margin-bottom:0;font-family:var(--f-mono);font-size:var(--fs-fine);color:var(--muted);}
@media (max-width:39.99rem){
  .price-table th,.price-table td,.compare.fits th,.compare.fits td{padding:0.75rem 0.55rem;}
  .price-table .num{font-size:1.3rem;}
  .compare.fits{font-size:0.875rem;}
}

/* ==========================================================================
   How it works, rebuilt 2026-09-27. The fourteen-day table became a two-part
   timeline that reads top to bottom on a phone. It sits inside .band, which is
   dark in every theme, so every colour here is a --band-* token: never a
   light-page token (see the contrast rules in CLAUDE.md).
   ========================================================================== */
.sprint{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:0.5rem;}
@media (min-width:52rem){.sprint{grid-template-columns:1fr 1fr;gap:3rem;}}
.sprint-week h3{
  font-family:var(--f-mono);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--band-muted);
  margin:0 0 0.75rem;
}
.sprint-week ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--band-line);}
.sprint-item{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:0.9rem;
  padding-block:0.9rem;
  border-bottom:1px solid var(--band-line);
}
.sprint-item .day{font-family:var(--f-mono);font-size:0.8125rem;color:var(--band-muted);padding-top:0.15rem;}
.sprint-item b{display:block;font-family:var(--f-display);font-weight:700;color:var(--band-ink);}
.sprint-item span:not(.day):not(.who){display:block;color:var(--band-ink);opacity:0.85;font-size:0.9688rem;line-height:1.5;}
.who{
  display:inline-block;
  margin-top:0.45rem;
  font-family:var(--f-mono);
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--band-ink);
  border:1px solid var(--band-line);
  border-radius:999px;
  padding:0.15rem 0.6rem;
}
.sprint-daily{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0.6rem;max-width:44rem;}
.sprint-daily li{color:var(--band-ink);font-size:0.9688rem;padding-left:1rem;border-left:2px solid var(--band-line);}
.sprint-daily b{font-weight:600;}
.includes.team-ask{grid-template-columns:1fr;max-width:40rem;}
/* The who-tag sits beside the step title rather than on its own line. */
.sprint-item b{display:inline;margin-right:0.5rem;}
.sprint-item .who{margin-top:0;vertical-align:0.1em;}
.sprint-item span:not(.day):not(.who){margin-top:0.3rem;}
@media (max-width:39.99rem){
  .sprint-item{grid-template-columns:4.5rem 1fr;gap:0.7rem;padding-block:0.75rem;}
  .sprint{gap:1.5rem;}
}

/* ---------- founder sign-off (2026-09-27) ----------
   Israel asked for the site to focus on what Solida does, not on him. He now
   appears only as this small sign-off on About and home: photo, name, title.
   The PNG carries its own circle and transparent corners. */
.signoff{display:flex;align-items:center;gap:0.75rem;margin:1.5rem 0 0;font-family:var(--f-mono);font-size:var(--fs-fine);color:var(--muted);}
.signoff img{width:3.5rem;height:3.5rem;flex:0 0 3.5rem;border-radius:50%;object-fit:cover;}
.signoff a{color:var(--accent);text-underline-offset:2px;}

/* ---------- search wording (2026-09-27) ----------
   Plain synonyms buyers type into Google, shown as a quiet line rather than
   stuffed into headings. */
.fhero .eyebrow{margin-bottom:0.9rem;}
.role-aka{margin:-0.35rem 0 0.75rem;font-family:var(--f-mono);font-size:var(--fs-fine);color:var(--muted);}