/* ============================================================
   SOFRITO DESIGN SYSTEM
   Caldero identity, warm cream ground, semantic colour roles.
   ============================================================ */
:root {
  /* ============================================================
     SOFRITO BRAND SYSTEM — Concept 3 caldero identity
     Source: Sofrito_Brand_System_Spec.md v1.0 (approved)

     The ingredient-named tokens below are the ORIGINAL variable
     names, kept so the ~2,000 existing usages across nine pages
     keep working. Each now points at a Sofrito palette value.
     New work should prefer the canonical names in the next block.
     ============================================================ */

  /* ---- Canonical palette ----
     REPOINTED 2026-08-04 to the colours sampled directly out of the hero
     infographic, so the site and the artwork are one palette rather than two
     that nearly match. Every value below was read off that PNG.
     Note the artwork contains NO orange: its action colour is the coral of the
     two figures (#E15934). It is a better CTA than the achiote it replaces on
     both counts — 4.63:1 with black type (AA) and 3.31:1 against the page,
     where achiote was 5.70:1 but only 2.69:1, i.e. it stands out more. */
  --caldero-black:   #1F1B17;
  --sofrito-cream:   #FAF1E9;
  --culantro-green:  #354D2F;
  --achiote-orange:  #E15934;
  --roasted-pepper:  #D63923;
  --red-onion:       #682851;
  --garlic-gold:     #E3B374;

  /* ---- Supporting neutrals (spec 5.2) ---- */
  --onion-paper:     #F1E7D8;
  --clay-border:     #D7C4AD;
  --smoke-gray:      #6C655E;
  --ash-gray:        #AAA199;
  --deep-green:      #2A4022;

  /* Accessible text-only variants. Garlic Gold is 2.08:1 on cream and
     Achiote is 2.79:1 — both fail AA badly, which is why the spec bans
     them for body text. These are the darkened equivalents to use when
     the MEANING needs to be carried by text rather than a fill. */
  --gold-text:       #8C6722;  /* 4.62:1 on the new cream */
  --pepper-text:     #BE2A1D;  /* 5.32:1 — the artwork's node-dot red */
  --gold-large-text: #A36F2D;  /* 4.01:1 — large text only (spec: incomplete data) */

  /* ---- Legacy ingredient names, repointed ---- */
  --celery-100: #E6EBDF;
  --celery-400: #587A4A;
  --celery-500: var(--culantro-green);
  --celery-700: var(--deep-green);

  --carrot-100: #FBE6DC;
  --carrot-400: #EB8560;
  --carrot-500: var(--achiote-orange);
  --carrot-700: #A83A1C;

  --red-onion-100: #F4EAF1;  /* smoke-gray 4.89:1 */
  --red-onion-400: #AB6C9D;
  --red-onion-300: #CBAAC0;
  --red-onion-500: var(--red-onion);
  --red-onion-700: #440B34;

  --white-onion-50:  var(--sofrito-cream);
  --white-onion-100: var(--onion-paper);
  --white-onion-200: var(--clay-border);

  --yellow-onion-100: #FAF0E2;  /* gold-text 4.57:1 */
  --yellow-onion-400: var(--garlic-gold);
  --yellow-onion-700: var(--gold-text);

  /* ---- Neutral system ---- */
  --ink-950: var(--caldero-black);
  --ink-900: #2A2521;
  --stone-600: var(--smoke-gray);
  --stone-300: var(--ash-gray);
  --stone-200: var(--clay-border);
  --white: #FFFFFF;

  /* ---- Semantic product roles (spec 5.3) ---- */
  --page-bg: var(--sofrito-cream);
  --surface: #FFFDF9;
  --surface-warm: var(--onion-paper);
  --text-primary: var(--caldero-black);
  --text-secondary: var(--smoke-gray);
  --border: var(--clay-border);

  /* Achiote is the primary action colour. Its text is Caldero Black:
     black-on-achiote is 5.70:1, cream-on-achiote is 2.79:1 and fails. */
  --primary-action: var(--achiote-orange);
  --primary-action-hover: #C8482A;
  --primary-action-text: var(--caldero-black);

  --secondary-action: var(--culantro-green);
  --secondary-action-text: var(--sofrito-cream);

  /* Evidence labels. Verified/inference/unknown map onto the spec's
     verified / evidence-available / investigating roles. */
  --verified: var(--culantro-green);
  --verified-bg: var(--celery-100);
  --inference: var(--gold-text);
  --inference-bg: var(--yellow-onion-100);
  --unknown: var(--red-onion-700);
  --unknown-bg: var(--red-onion-100);

  --systemized: var(--culantro-green);
  --financial-investigation: var(--red-onion);
  --weekly-priority: var(--achiote-orange);
  --financial-risk: var(--roasted-pepper);

  --error: var(--roasted-pepper);
  --error-bg: #F9E3E0;

  /* ---- Radius (spec 9.3) ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  /* ---- Type (spec 6.1 / 6.2) ---- */
  --disp: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Shadows (spec 9.4) ---- */
  --shadow: 0 4px 18px rgba(31, 27, 23, .06);
  --shadow-elevated: 0 10px 30px rgba(31, 27, 23, .10);
  --shadow-overlay: 0 18px 60px rgba(31, 27, 23, .16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--carrot-400); color: var(--ink-950); }
h1, h2, h3, .display { letter-spacing: -0.02em; }
.eyebrow, .col-t { letter-spacing: 0.14em; }
a { color: var(--carrot-700); }
img, svg { max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; }
section { padding: 88px 0; }
section.tight { padding: 56px 0; }
.alt { background: var(--surface-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---- Dark bands (spec 5.4 usage ratio, 9.2 surface style) ---------------- */
.section-dark {
  background: var(--deep-green);
  color: #E8E2D6;
  border-top: 0; border-bottom: 0;
  position: relative; overflow: hidden;
}
/* The caldero band pattern, used as interior texture at low opacity — spec 7.2
   caps it at 5-20% and forbids dense pattern behind small copy, so it is
   masked to a soft corner crop rather than tiled across the whole band. */
.section-dark::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("/assets/brand/pattern-foundation.png");
  background-size: 260px; background-repeat: repeat;
  opacity: .06; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 62%);
}
.section-dark > * { position: relative; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--sofrito-cream); }
.section-dark .lede { color: #D8D2C6; }
.section-dark p { color: #D8D2C6; }
.section-dark .ledger .cell p, .section-dark .delegate-card p, .section-dark .card p { color: inherit; }
/* Must beat .eyebrow.on / .eyebrow.ce, which carry accent colours that go
   invisible on a dark band — .eyebrow.ce is deep green on a deep-green
   background. Equal specificity meant source order decided it, and the accent
   rules come later in the file. */
.section-dark .eyebrow, .section-dark .eyebrow.on, .section-dark .eyebrow.ce,
.section-green .eyebrow, .section-green .eyebrow.on, .section-green .eyebrow.ce { color: var(--garlic-gold); }
.section-dark .card {
  background: rgba(251, 246, 238, .06);
  border-color: rgba(251, 246, 238, .18);
  box-shadow: none; color: #E8E2D6;
}
.section-dark .card h3, .section-dark .card h4 { color: var(--sofrito-cream); }
.section-dark .card.warm { background: rgba(251, 246, 238, .10); }
.section-dark a:not(.btn) { color: var(--garlic-gold); }
.section-dark .btn-ghost { color: var(--sofrito-cream); border-color: rgba(251, 246, 238, .38); }
.section-dark .btn-ghost:hover { border-color: var(--sofrito-cream); }
.section-dark .btn-secondary {
  background: var(--sofrito-cream); color: var(--deep-green); border-color: var(--sofrito-cream);
}
.section-dark .btn-secondary:hover { background: #FFFFFF; border-color: #FFFFFF; }
.section-dark .micro, .section-dark .exc li { color: #C9C2B4; }
.section-dark strong { color: var(--sofrito-cream); }

/* Any component that carries its OWN light fill keeps its own dark text. The
   band sets a light body colour for text sitting directly on the green, and
   without this reset that colour is inherited into cream cards and the copy
   disappears — which is exactly what happened to the delegate card on first
   render. */
.section-dark .ledger .cell,
.section-dark .metric,
.section-dark .delegate-card,
.section-dark .action-card,
.section-dark .loop-box {
  color: var(--text-primary);
}
.section-dark .ledger .cap { color: var(--text-secondary); }
.section-dark .delegate-card { background: #E4EFE7; border-left-color: var(--culantro-green); }
.section-dark .delegate-card .lbl { color: var(--deep-green); }

/* Culantro Green as a surface, not just a tag colour. The spec asks it to carry
   10-15% of the composition and a census of the rendered page had it at roughly
   zero — Achiote was doing all the accent work and green only appeared inside
   small labels. One full-width band is the cheapest honest fix. */
.section-green {
  background: var(--culantro-green);
  color: var(--sofrito-cream);
  border-top: 0; border-bottom: 0;
}
.section-green strong, .section-green h2 { color: var(--sofrito-cream); }
.section-green a:not(.btn) { color: var(--garlic-gold); }

/* Culantro Green earns its 10-15% here rather than only in tags. */
.rule-accent { border-left: 4px solid var(--culantro-green); padding-left: 16px; }

h1, h2, h3 { font-family: var(--disp); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); margin-bottom: 18px; }
h3 { font-size: 1.3rem; margin-bottom: 8px; }
p { color: var(--text-secondary); max-width: 68ch; }
strong { color: var(--text-primary); font-weight: 600; }

.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; color: var(--carrot-700); }
.eyebrow.on { color: var(--red-onion-500); }
.eyebrow.ce { color: var(--celery-700); }
.lede { font-size: 1.15rem; }

/* Buttons */
.btn {
  display: inline-block; font-weight: 600; font-size: 1rem; text-decoration: none;
  border-radius: var(--radius-sm); padding: 15px 26px; cursor: pointer; border: 0; font-family: var(--sans);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--carrot-500); outline-offset: 2px;
}
.btn-primary { background: var(--primary-action); color: var(--primary-action-text); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--primary-action-hover); }
.btn-secondary { background: var(--secondary-action); color: var(--secondary-action-text); border: 1px solid var(--secondary-action); }
.btn-secondary:hover { background: var(--deep-green); border-color: var(--deep-green); }
.btn-outline { background: transparent; color: var(--culantro-green); border: 1px solid var(--culantro-green); }
.btn-outline:hover { background: var(--celery-100); }
.btn-danger { background: var(--roasted-pepper); color: var(--sofrito-cream); border: 1px solid var(--roasted-pepper); }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--stone-300); }
.btn-ghost:hover { border-color: var(--stone-600); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.micro { font-size: .85rem; color: var(--text-secondary); margin-top: 12px; }

/* Tags — never color-only */
.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.tag.verified   { color: var(--verified);  background: var(--verified-bg);  border: 1px solid var(--celery-500); }
.tag.inference  { color: var(--inference); background: var(--inference-bg); border: 1px solid var(--yellow-onion-400); }
.tag.unknown    { color: var(--unknown);   background: var(--unknown-bg);   border: 1px solid var(--red-onion-400); }
.tag.missing    { color: var(--unknown);   background: var(--unknown-bg);   border: 1px dashed var(--red-onion-400); }
.tag.action     { color: var(--carrot-700); background: var(--carrot-100);  border: 1px solid var(--carrot-400); }
.tag.system     { color: var(--celery-700); background: var(--celery-100);  border: 1px solid var(--celery-400); }
.tag.demo-note  { color: var(--stone-600); background: var(--surface-warm); border: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card.warm { background: var(--surface-warm); box-shadow: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 840px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Nav */
nav.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 253, 247, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 24px; max-width: 1160px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .word { font-family: var(--disp); font-size: 1.6rem; font-weight: 500; line-height: 1; color: var(--ink-900); }
/* The tagline is mandatory on every commercial surface. Sofrito carries founder
   meaning, not problem meaning — it tells an operator nothing about what is
   broken — and this line is what answers that. A no-tagline cut exists only for
   placements too narrow to hold it, which is why it drops below 900px where the
   nav collapses to a hamburger. */
.page-tagline {
  font-family: var(--disp); font-style: italic; font-size: 1.15rem;
  color: var(--culantro-green); margin-top: 4px;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-tagline {
  font-family: var(--sans); font-size: .66rem; font-weight: 600;
  letter-spacing: .05em; line-height: 1; color: var(--text-secondary);
}
@media (max-width: 900px) { .brand-tagline { display: none; } }
/* The caldero mark. Raster masters (no vector was supplied), so the rendered
   box is always smaller than the source file and the browser downsamples —
   which is why height is set explicitly rather than left to the intrinsic size. */
.mark { display: block; width: 44px; height: 44px; object-fit: contain; }
.mark-lg { width: 64px; height: 64px; margin: 0 auto; }
/* Reverse cut on dark grounds — the full-colour mark's body is near-black and
   disappears into Deep Green. */
.section-dark .mark, .section-green .mark, footer.site .mark {
  content: url("/assets/brand/sofrito-symbol-cream.png");
}
@media (max-width: 640px) { .mark-lg { width: 52px; height: 52px; } }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { color: var(--text-primary); text-decoration: none; font-size: .93rem; font-weight: 500; }
.nav-links a:hover { color: var(--carrot-700); }
.nav-links a.signin { color: var(--text-secondary); }
/* PRE-EXISTING: Ash Gray here was 2.50:1. It is hidden above 900px, so the
   failure only ever showed on mobile, which is where most operators open the
   site. Smoke Gray is 5.65:1. */
.nav-links a.signin .signin-note { color: var(--text-secondary); font-size: .82em; }
@media (min-width: 901px) { .nav-links a.signin .signin-note { display: none; } }
.nav-cta { background: var(--primary-action); color: var(--ink-950) !important; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600 !important; }
.nav-cta:hover { background: var(--primary-action-hover); color: var(--ink-950) !important; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 1.1rem; cursor: pointer; color: var(--ink-900); }
@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white-onion-50); border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; padding: 18px 24px; gap: 16px; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
}

/* Footer */
footer.site { background: var(--ink-950); color: #cfd8cf; padding: 56px 0 40px; margin-top: 40px; }
footer.site .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { footer.site .wrap { grid-template-columns: 1fr; } }
footer.site .word { font-family: var(--disp); font-size: 1.3rem; color: var(--white-onion-50); }
footer.site p, footer.site a { color: #a9b8aa; font-size: .9rem; }
footer.site a { display: block; text-decoration: none; margin-top: 8px; }
footer.site a:hover { color: var(--white-onion-50); }
/* Category descriptor (spec 4.6): uppercase sans, wide tracking, as a
   counterweight to the serif wordmark. Reads "Food Business Operating
   Intelligence" rather than the delivered artwork's "Restaurant Operating
   Intelligence" — the application form accepts food trucks, catering, ghost
   kitchens and pop-ups, and a restaurant-only line tells four of the seven
   business types they are in the wrong place. */
footer.site .descriptor {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--achiote-orange);
  margin-top: 6px;
}

footer.site .footer-tagline {
  font-family: var(--disp); font-style: italic; font-size: 1.05rem;
  color: var(--garlic-gold); margin-top: 10px;
}

footer.site .col-t { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7d8f7e; margin-bottom: 6px; }
footer.site .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: .8rem; color: #7d8f7e; }

/* Hero */
.hero { padding: 76px 0 84px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.proofline { display: flex; gap: 10px 18px; flex-wrap: wrap; margin-top: 22px; font-size: .88rem; color: var(--text-secondary); }
.proofline span::before { content: "✓ "; color: var(--celery-700); font-weight: 700; }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 840px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.metric, .num, td, .money { font-variant-numeric: tabular-nums lining-nums; }
.metric .k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.metric .v { font-family: var(--disp); font-size: 1.5rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.metric .s { font-size: .8rem; color: var(--text-secondary); }
.metric.warn { border-color: var(--red-onion-400); background: var(--red-onion-100); }
.metric.warn .v { color: var(--red-onion-700); }

/* Evidence rows */
.ev-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--border); font-size: .95rem; }
.ev-row .tag { flex-shrink: 0; margin-top: 2px; }

/* Timeline */
.tl-item { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: 6px; } }
.tl-when .n { font-family: var(--disp); font-size: 1.5rem; color: var(--celery-700); }
.tl-when .d { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin-top: 2px; }

/* Product window (weekly review preview) */
.pwin { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.pwin-head { padding: 18px 24px; background: var(--surface-warm); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.pwin-head .t { font-weight: 600; }
.pwin-head .m { font-size: .8rem; color: var(--text-secondary); }
.ptabs { display: flex; gap: 2px; background: var(--surface-warm); border-bottom: 1px solid var(--border); padding: 0 14px; overflow-x: auto; }
.ptab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px; font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.ptab[aria-selected="true"] { color: var(--ink-900); border-bottom-color: var(--carrot-500); }
.ppanel { padding: 26px; }
.ppanel[hidden] { display: none; }
.psec { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin: 22px 0 8px; }
.psec:first-child { margin-top: 0; }

/* Action + delegation cards */
.action-card { border: 1px solid var(--carrot-400); border-radius: var(--radius); padding: 22px; background: var(--carrot-100); }
.action-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0; font-size: .87rem; color: var(--text-secondary); }
.action-meta b { color: var(--ink-900); }
.delegate-card { border-left: 4px solid var(--celery-500); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; background: var(--celery-100); font-size: .95rem; }
.delegate-card .lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--celery-700); margin-bottom: 6px; }

/* Owner independence ledger */
.ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 840px) { .ledger { grid-template-columns: repeat(2, 1fr); } }
.ledger .cell { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 18px; }
.ledger .num { font-family: var(--disp); font-size: 2.2rem; }
.ledger .cap { font-size: .84rem; color: var(--text-secondary); }
.ledger .cell.c1 .num { color: var(--red-onion-500); }
.ledger .cell.c2 .num { color: var(--yellow-onion-700); }
.ledger .cell.c3 .num { color: var(--celery-500); }
.ledger .cell.c4 .num { color: var(--celery-700); }

/* FAQ */
.faq-item { border-top: 1px solid var(--border); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; font-weight: 600; font-size: 1.02rem; }
.faq-item summary::-webkit-details-marker { display: none; }
/* The coral fill is 3.02:1 on the warm band — it clears the 3:1 bar for a UI
   affordance but not the 4.5:1 bar for a glyph read as text. Use the darker
   artwork red, 4.85:1, and the distinction stops mattering. */
.faq-item summary .ind { color: var(--pepper-text); font-family: var(--disp); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq-item[open] summary .ind { transform: rotate(45deg); }
.faq-item .a { padding: 0 0 22px; max-width: 66ch; }
.faq-item .a p { font-size: .96rem; margin-bottom: 10px; }

/* Stepper (demo + apply) */
.step-label { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 26px 0 -14px; }
.step-label .of { color: var(--stone-300); font-weight: 600; }
.stepper { display: flex; gap: 6px; margin: 26px 0 30px; }
.stepper .seg { height: 6px; flex: 1; border-radius: var(--radius-pill); background: var(--white-onion-200); }
.stepper .seg.on-1 { background: var(--red-onion-500); }
.stepper .seg.on-2 { background: var(--celery-500); }
.stepper .seg.on-3 { background: var(--carrot-500); }
.step-panel[hidden] { display: none; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice {
  border: 1.5px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 18px 16px;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--ink-900); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--carrot-400); }
.choice.sel { border-color: var(--carrot-500); background: var(--carrot-100); }
.choice .sub { display: block; font-size: .8rem; font-weight: 400; color: var(--text-secondary); margin-top: 4px; }
.demo-note-bar { font-size: .82rem; color: var(--text-secondary); background: var(--surface-warm); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; }

/* Onion peel (evidence) */
.peel-layer { border: 1px solid var(--red-onion-400); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); overflow: hidden; }
.peel-layer > button {
  width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 14px; align-items: center;
  background: var(--red-onion-100); border: 0; padding: 14px 18px; font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--red-onion-700); cursor: pointer;
}
.peel-layer .inner { padding: 16px 18px; display: none; font-size: .92rem; }
.peel-layer.open .inner { display: block; }
.peel-layer .inner dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; }
@media (max-width: 600px) { .peel-layer .inner dl { grid-template-columns: 1fr; } }
.peel-layer .inner dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.peel-layer .inner dd { color: var(--text-primary); }

/* Action options in demo */
.opt-card { display: block; width: 100%; text-align: left; font-family: var(--sans); font-size: 1rem; color: var(--text-primary); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px; background: var(--surface); cursor: pointer; transition: border-color .15s; }
.opt-card h3 { color: var(--text-primary); }
.opt-card:hover { border-color: var(--carrot-400); }
.opt-card.rec { border-color: var(--carrot-500); }
.opt-card.sel { background: var(--carrot-100); border-color: var(--carrot-500); }
.opt-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 12px; font-size: .82rem; color: var(--text-secondary); }
.opt-scores b { color: var(--ink-900); font-weight: 600; }

/* Forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: .8rem; color: var(--text-secondary); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--stone-300); border-radius: 10px; padding: 12px 14px;
  font-family: var(--sans); font-size: 1rem; background: var(--white); color: var(--ink-900);
}
.field textarea { min-height: 96px; resize: vertical; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); background: var(--error-bg); }
.field .err { display: none; font-size: .82rem; color: var(--error); margin-top: 4px; font-weight: 600; }
.field.invalid .err { display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: .93rem; color: var(--text-secondary); }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--carrot-500); flex-shrink: 0; }
.check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.consent-error { color: var(--error); font-weight: 600; font-size: .85rem; }
.form-error-summary { display: none; border: 1px solid var(--error); background: var(--error-bg); color: var(--error); border-radius: 10px; padding: 12px 16px; font-size: .9rem; font-weight: 600; margin-bottom: 18px; }
.form-error-summary.show { display: block; }
.application-page { padding-top: 56px; }
#turnstile { min-height: 65px; }

@media (max-width: 520px) {
  .application-page { padding: 36px 0 56px; }
  .application-page .wrap { padding-inline: 16px; }
  .application-page .card { padding: 20px 16px; }
  .application-page .grid-2 { gap: 0; }
  .application-page .form-actions { display: grid; grid-template-columns: 1fr; }
  .application-page .form-actions .btn { width: 100%; }
}

/* Price card */
.price-card { border: 1.5px solid var(--carrot-400); border-radius: 18px; background: var(--surface); padding: 36px; box-shadow: var(--shadow); }
.price-line { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 2px; }
.price-line .p { font-family: var(--disp); font-size: 3.2rem; }
.inc { list-style: none; display: grid; gap: 9px; margin: 20px 0; border-top: 1px solid var(--border); padding-top: 20px; }
.inc li { padding-left: 26px; position: relative; font-size: .95rem; color: var(--text-secondary); }
.inc li::before { content: "✓"; position: absolute; left: 0; color: var(--celery-500); font-weight: 700; }
.exc { list-style: none; display: grid; gap: 7px; }
.exc li { padding-left: 26px; position: relative; font-size: .9rem; color: var(--text-secondary); }
.exc li::before { content: "—"; position: absolute; left: 0; color: var(--red-onion-400); font-weight: 700; }

/* Loop diagram */
.loop-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.loop-title { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red-onion-500); margin-bottom: 16px; }
.loop-steps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.loop-steps .step { background: var(--red-onion-100); border: 1px solid var(--red-onion-400); border-radius: 9px; padding: 8px 13px; font-size: .88rem; color: var(--red-onion-700); }
/* Onion-400 is a tint meant for fills; at 3.85:1 it is too light for a glyph.
   #8C5A7E is the same hue two steps down, 5.33:1. */
.loop-steps .arrow { color: #8C5A7E; font-weight: 700; }

/* Stats */
.stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: var(--surface); box-shadow: var(--shadow); }
.stat .num { font-family: var(--disp); font-size: 3rem; line-height: 1; }
.stat .lbl { margin-top: 10px; font-size: .93rem; color: var(--text-secondary); }
.source-note { font-size: .8rem; color: var(--text-secondary); border-left: 3px solid var(--yellow-onion-400); background: var(--yellow-onion-100); padding: 12px 16px; border-radius: 0 10px 10px 0; }
.source-note a { color: var(--yellow-onion-700); }

/* Ingredient cards */
/* The three-job cards. Named for the jobs -- see / systemize / solve -- not
   for vegetables. The old .ing-card.onion/.celery/.carrot names were the last
   structural trace of the retired ingredient allegory: the labels on the page
   had already been rewritten, but the markup underneath still assigned a
   vegetable to each pillar, which is how a retired idea quietly comes back.
   The COLOURS are unchanged and are semantically correct under the Sofrito
   palette -- Red Onion reads as investigation, Culantro as systems and
   verification, Achiote as action and priority.
   Old class names kept as aliases so nothing outside this file breaks. */
.job-card, .ing-card { position: relative; overflow: hidden; }
.job-card::before, .ing-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; }
/* Stripe colours follow the hero infographic, so the cards and the artwork
   name the same three ingredients in the same three colours: the onion is
   purple, the pepper is RED (green is only its stem), and the garlic is gold.
   They were green and orange while the artwork said otherwise. */
.job-card.see::before,       .ing-card.onion::before  { background: var(--red-onion-500); }
.job-card.systemize::before, .ing-card.celery::before { background: var(--roasted-pepper); }
.job-card.solve::before,     .ing-card.carrot::before { background: var(--garlic-gold); }
.job-label, .ing-label { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
/* Label text is a step darker than the stripe where the stripe itself would
   not clear AA as type: Roasted Pepper is 4.89:1 and passes, but #B02F20 is
   6.31:1; Garlic Gold is only 2.21:1 so type uses --gold-text at 5.07:1. */
.job-card.see .job-label,       .ing-card.onion .ing-label  { color: var(--red-onion-500); }
.job-card.systemize .job-label, .ing-card.celery .ing-label { color: var(--pepper-text); }
.job-card.solve .job-label,     .ing-card.carrot .ing-label { color: var(--gold-text); }
.job-q, .ing-q { font-family: var(--disp); font-size: 1.1rem; margin: 10px 0 8px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; animation: none !important; }
}

.center { text-align: center; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 56px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Hero infographic ---------------------------------------------------
   Sid's three-panel artwork replaced the generated SVG on 2026-08-04. It is
   informative rather than decorative — it names the three questions the weekly
   review answers — so it carries alt text and a visible caption rather than
   aria-hidden. The PNG's baked-in cream was keyed out against the border only,
   so it sits on the page background rather than on a slightly-off rectangle. */
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; height: auto; display: block; }
.hero-cap {
  margin-top: 14px; text-align: center;
  font-family: var(--disp); font-style: italic;
  font-size: 1.02rem; color: var(--gold-text);
}
/* The ingredient line inside each job card — the metaphor, kept quieter than
   the operational sentence it follows, so it reads as an aside and never as
   the claim. */
.ing-note { display: block; margin-top: 8px; font-style: italic; color: var(--text-secondary); }

@media (max-width: 900px) {
  .hero-figure { max-width: 520px; margin: 8px auto 0; }
}