/* Givvy main stylesheet — Territory C, "The Quiet Bank"
   (Elysia, Design Direction v1, 2026-11-11).
   Two colors: ink on warm paper; every tint is ink at opacity (a token).
   Rust appears only on value figures, under the §1.2 budget, via .rust.
   Radius 0 everywhere. No elevation. No motion: state changes are instant,
   and the only transition/animation words in this file live inside the
   prefers-reduced-motion guard at the end. Tokens come from
   assets/tokens.css (generated from design/tokens.json) — this file
   consumes custom properties only. */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-ink); color: var(--color-paper); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-h1); line-height: 1.1; }
h2 { font-size: var(--text-h2); line-height: 1.2; }
h3 { font-size: 1.0625rem; line-height: 1.3; }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-ink); text-underline-offset: 3px; }
img { max-width: 100%; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--color-ink-80); }
.small { font-size: 0.875rem; }
.container { max-width: var(--layout-container); margin: 0 auto; padding: 0 var(--layout-gutter); }
.section { padding: var(--space-section) 0; }
.section-head { max-width: 44rem; margin-bottom: var(--space-7); }
.section-head p { color: var(--color-ink-80); font-size: var(--text-lede); line-height: 1.55; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-paper); border: 1px solid var(--color-ink); padding: 10px 16px; z-index: 60; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-80);
  margin: 0 0 var(--space-4);
}
.lede { font-size: var(--text-lede); line-height: 1.55; color: var(--color-ink-80); max-width: 38rem; }
.statement {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-statement);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-ink);
  font-optical-sizing: auto;
}
.hero-statement {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-hero);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  font-optical-sizing: auto;
  margin: 0 0 var(--space-6);
  max-width: 16em;
}
/* The rust class is the ONLY rust in the system: a value figure at
   display size (Direction §1.2). Acceptance counts elements with it. */
.rust { color: var(--color-rust); }
.worked-figure {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-worked-figure); line-height: 1.1;
}
.verify {
  font-family: var(--font-mono);
  font-size: var(--text-mono-note);
  line-height: 1.4;
  color: var(--color-ink-80);
}

/* Stage treatment — ink at opacity + a dashed hairline + the Mono stage
   line. Never a hue (Direction §0/§7). */
.stage-label {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4;
  color: var(--color-ink-80);
  border: 1px dashed var(--color-ink-40);
  padding: 5px 10px; background: transparent;
}
.stage-note {
  border: 1px dashed var(--color-ink-40);
  padding: var(--space-4) var(--space-5);
  font-size: 0.875rem; margin-bottom: var(--space-6);
  background: transparent; color: var(--color-ink);
}
.stage-note strong {
  font-family: var(--font-mono); font-size: var(--text-mono-note); font-weight: 500;
  color: var(--color-ink); margin-right: var(--space-3);
}
.stage-line {
  font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4;
  color: var(--color-ink-80);
  border-top: 1px dashed var(--color-ink-40);
  padding-top: var(--space-4); margin-top: var(--space-6);
}

/* ---------- Actions: one filled block; everything else is a text link ---------- */
.filled-block {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--layout-touch); padding: 0 24px;
  background: var(--color-ink); color: var(--color-paper);
  border: 1px solid var(--color-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
}
.filled-block:hover { background: var(--color-ink); color: var(--color-paper); text-decoration: underline; text-underline-offset: 4px; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-ink-40); text-underline-offset: 4px;
}
.text-link:hover { text-decoration-color: var(--color-ink); }
.mono-link {
  font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink);
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.mono-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Header / footer ---------- */
.site-header { border-bottom: 1px solid var(--color-ink-20); }
.header-inner { display: flex; align-items: center; gap: var(--space-6); min-height: 72px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; min-height: 44px; }
.logo img.wordmark { height: 30px; width: auto; display: block; }
.main-nav { display: flex; gap: var(--space-5); margin-right: auto; }
.main-nav a, .header-actions a {
  color: var(--color-ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.main-nav a:hover, .header-actions a:hover { text-decoration: underline; text-underline-offset: 4px; }
.main-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.header-actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.main-nav + .header-actions { margin-left: 0; }

.site-footer { background: var(--color-ink); color: var(--color-paper); }
/* Footer top padding is a deliberate 5rem step off the token scale (no
   --space-9 exists): the dark band opens generously, per Jason 2026-11-12.
   Scoped under .site-footer on purpose: the later .container rule in the
   min-width:900px block sets padding: 0 … at equal specificity and was
   silently zeroing this padding on desktop. Do not unscope. */
.site-footer .footer-inner { padding: 5rem var(--layout-gutter) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.site-footer .logo img.wordmark { height: 34px; }
.footer-brand p { font-size: 0.875rem; color: var(--color-paper-70); max-width: 19rem; margin-top: var(--space-4); }
.footer-col h4 {
  color: var(--color-paper-70); font-family: var(--font-display);
  font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 6px; }
.footer-col a { color: var(--color-paper); text-decoration: none; font-size: 0.875rem; display: inline-flex; align-items: center; min-height: 32px; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal {
  border-top: 1px solid var(--color-ink-60);
  margin-top: var(--space-7); padding-top: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.6;
  color: var(--color-paper-70); display: flex; gap: var(--space-5); flex-wrap: wrap;
}

/* ---------- Home ---------- */
.hero { padding: var(--space-section) 0 var(--space-7); }
.figure-block {
  border-top: 1px solid var(--color-ink-20);
  padding-top: var(--space-5);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-7);
  align-items: start; max-width: 52rem;
}
.figure-block .worked-figure {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-worked-figure); line-height: 1.1;
}
.figure-block .fig-note { max-width: 30rem; padding-top: var(--space-2); }
.figure-block .fig-note .fig-title { font-weight: 500; margin: 0 0 var(--space-2); }
.figure-block .fig-note p { color: var(--color-ink-80); margin: 0; }
.figure-block .verify { grid-column: 1 / -1; }
.hero-action { margin-top: var(--space-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

.worked { border-top: 2px solid var(--color-ink); padding-top: var(--space-5); }
.worked-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.switcher { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.switcher-btn {
  background: none; border: 0; padding: 0 2px; min-height: 44px; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--color-ink-80);
}
.switcher-btn:hover { color: var(--color-ink); }
.switcher-btn[aria-pressed="true"] { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.worked-rows { margin-top: var(--space-4); }
.worked-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-2) var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--color-ink-20); }
.worked-row .wr-label { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); padding-top: 3px; }
.worked-row .wr-figure { font-family: var(--font-mono); font-weight: 500; font-size: 1.375rem; line-height: 1.2; display: block; margin-bottom: var(--space-2); }
.worked-row p { margin: 0 0 var(--space-2); }
.worked-row p:last-child { margin-bottom: 0; }
.member-label {
  display: inline-block; border: 1px solid var(--color-ink-40);
  font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4;
  padding: 9px 13px; color: var(--color-ink);
}
.worked-foot { margin-top: var(--space-4); font-size: 0.875rem; }

.num-list { border-top: 1px solid var(--color-ink-20); }
.num-row { display: grid; grid-template-columns: 4rem 13rem 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-ink-20); align-items: baseline; }
.num-row .n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ink-80); }
.num-row h3 { margin: 0; font-size: 1.0625rem; }
.num-row p { color: var(--color-ink-80); margin: 0; max-width: 38rem; }
.num-row .scope { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); display: block; margin-top: var(--space-2); }
.scope-line { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); line-height: 1.5; }
.num-row .scope-line { grid-column: 3; margin-top: calc(-1 * var(--space-3)); }

.statement-block { max-width: 44rem; }
.statement-block .statement { margin-bottom: var(--space-4); }
.statement-block p { color: var(--color-ink-80); }

/* ---------- Explore — the directory as a hairline list ---------- */
.catalog-search { margin: var(--space-5) 0 var(--space-4); }
.catalog-search input {
  width: 100%; min-height: var(--layout-touch); padding: 0 var(--space-4);
  border: 1px solid var(--color-ink-40); border-radius: var(--radius-none);
  background: var(--color-paper); font: inherit; font-size: var(--text-body); color: var(--color-ink);
}
.catalog-search input:focus { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.filter-row {
  display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--color-ink-40); border-bottom: 1px solid var(--color-ink-40);
  padding: var(--space-2) 0;
}
.filter-link {
  background: none; border: 0; cursor: pointer; padding: 0 2px; min-height: 44px;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--color-ink-80);
  display: inline-flex; align-items: center;
}
.filter-link:hover { color: var(--color-ink); }
.filter-link[aria-pressed="true"] { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.dir-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-2); }
.dir-count { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); }
.sort-control {
  background: none; border: 0; cursor: pointer; min-height: 44px; padding: 0 2px;
  font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-ink-40); text-underline-offset: 4px;
}
.dir-list { border-top: 1px solid var(--color-ink-20); }
.dir-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-6);
  padding: var(--space-row) 0; border-bottom: 1px solid var(--color-ink-20); align-items: baseline;
}
.dir-row .dir-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; }
.dir-row .dir-name a { color: var(--color-ink); text-decoration: none; }
.dir-row .dir-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dir-row .dir-desc { color: var(--color-ink-80); font-size: 0.875rem; margin: var(--space-1) 0 0; max-width: 40rem; }
.dir-row .dir-cat { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); white-space: nowrap; padding-top: 4px; }
.dir-row .dir-fig { font-family: var(--font-mono); font-size: var(--text-figure); font-weight: 500; }
.dir-row .dir-meta { grid-column: 1 / -1; display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.dir-more { margin-top: var(--space-5); }
.dir-empty { padding: var(--space-7) 0; color: var(--color-ink-80); }

.sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--color-paper); border-top: 1px solid var(--color-ink-40);
  padding: var(--space-2) var(--layout-gutter);
  align-items: center; justify-content: space-between; gap: var(--space-3);
}
.sticky-bar .sb-count { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); }
.sticky-bar a { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Store pages ---------- */
.crumbs { font-size: 0.875rem; color: var(--color-ink-80); padding-top: var(--space-5); margin: 0 0 var(--space-2); }
.crumbs a { color: var(--color-ink-80); }
.store-head { padding: var(--space-6) 0 var(--space-5); }
.store-head h1 { margin-bottom: var(--space-2); }
.store-block { padding: var(--space-7) 0; border-top: 1px solid var(--color-ink-40); }
.store-head + .store-block { border-top: 0; padding-top: var(--space-2); }
.store-block h2 { margin-bottom: var(--space-5); }

.offer-row { border-top: 1px solid var(--color-ink-20); padding: var(--space-row) 0; display: grid; grid-template-columns: 190px 1fr auto; gap: var(--space-2) var(--space-6); align-items: start; }
.offer-row.is-saved { border-left: 2px solid var(--color-ink); padding-left: var(--space-4); }
.offer-row .of-figure { font-family: var(--font-mono); font-size: var(--text-figure); font-weight: 500; line-height: 1.5; }
.offer-row .of-figure .member-prefix { display: block; font-size: var(--text-mono-note); font-weight: 400; color: var(--color-ink-80); }
.offer-row .of-title { font-weight: 500; margin: 0 0 var(--space-1); }
.offer-row .of-title a { color: var(--color-ink); text-decoration: none; }
.offer-row .of-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.offer-row .of-body { color: var(--color-ink-80); font-size: 0.875rem; margin: 0; }
.offer-row .of-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.offer-row .of-verify, .offer-row .of-ends { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4; color: var(--color-ink-80); white-space: nowrap; }
.save-link {
  font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink);
  background: none; border: 0; cursor: pointer; padding: 0; min-height: 44px;
  display: inline-flex; align-items: center; text-decoration: none;
}
.save-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.week-line { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); margin-bottom: var(--space-3); }
.lead-figure-block { margin-bottom: var(--space-5); }

.membership-area { max-width: 44rem; }
.membership-area .member-labels { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; }
.rewards-line { font-size: var(--text-lede); line-height: 1.55; max-width: 44rem; }
.rewards-line .rl-terms { display: block; font-size: 0.875rem; color: var(--color-ink-80); margin-top: var(--space-2); }
.rail-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.rail-step { border-top: 1px solid var(--color-ink-20); padding-top: var(--space-4); }
.rail-step .rs-num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ink-80); display: block; margin-bottom: var(--space-2); }
.rail-step h3 { margin-bottom: var(--space-2); }
.rail-step p { font-size: 0.875rem; color: var(--color-ink-80); margin: 0 0 var(--space-2); }
.sweeps-block { border: 1px solid var(--color-ink-40); padding: var(--space-5); }
.sweeps-block .sweep-row { border-top: 1px solid var(--color-ink-20); padding: var(--space-4) 0; }
.sweeps-block .sweep-row:first-of-type { border-top: 0; }
.restrictions { max-width: 44rem; }
.restrictions p { font-size: 0.875rem; margin: 0; }

.finds { max-width: 52rem; }
.finds-lede { font-size: var(--text-lede); color: var(--color-ink); line-height: 1.55; }
.finds-quote { margin: var(--space-6) 0; padding-left: var(--space-5); border-left: 2px solid var(--color-ink); }
.finds-quote p { font-family: var(--font-serif); font-weight: 600; font-size: 1.3125rem; line-height: 1.4; color: var(--color-ink); margin: 0 0 var(--space-3); font-optical-sizing: auto; }
.finds-quote cite { font-style: normal; font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); }
.finds-rows { border-top: 1px solid var(--color-ink-20); margin-bottom: var(--space-5); }
.finds-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-ink-20); }
.finds-row h3 { margin: 0; }
.finds-row p { color: var(--color-ink-80); font-size: 0.875rem; margin: 0; }

/* ---------- Offer page — the receipt (hairline definition list) ---------- */
.facts { margin: 0 0 var(--space-5); max-width: 58rem; }
.facts dl { margin: 0; }
.facts .row { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-2) var(--space-6); padding: var(--space-3) 0; border-top: 1px solid var(--color-ink-20); align-items: baseline; }
.facts dt { font-weight: 500; color: var(--color-ink-80); font-size: 0.9375rem; }
.facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.55; color: var(--color-ink); }
.facts dd a { color: var(--color-ink); }
.facts dd.prose-val { font-family: var(--font-sans); font-size: 0.9375rem; }

/* ---------- Business ---------- */
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.path-area { border: 1px solid var(--color-ink-20); padding: var(--space-6); }
.path-area h3 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.path-area p { color: var(--color-ink-80); margin: 0 0 var(--space-3); }
.path-area p:last-child { margin-bottom: 0; }
.track-block { border-top: 1px solid var(--color-ink-40); padding: var(--space-7) 0; }
.track-block h3 { font-size: 1.25rem; }
.track-lede { color: var(--color-ink-80); font-size: var(--text-lede); line-height: 1.55; max-width: 52rem; margin: 0 0 var(--space-5); }
.track-lines { max-width: 52rem; }
.track-lines p { border-top: 1px solid var(--color-ink-20); padding: var(--space-4) 0; margin: 0; }
.track-note { color: var(--color-ink-80); max-width: 52rem; margin: var(--space-5) 0 0; }
.format-rows { border-top: 1px solid var(--color-ink-20); margin-bottom: var(--space-5); max-width: 58rem; }
.format-row { display: flex; gap: var(--space-5); align-items: flex-start; justify-content: space-between; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-ink-20); }
.format-row h4 { font-size: 1.0625rem; margin: 0 0 var(--space-1); }
.format-row p { color: var(--color-ink-80); font-size: 0.875rem; margin: 0; max-width: 42rem; }
.format-row .stage-label { flex: none; }
.def-rows { max-width: 52rem; }
.def-row { border-top: 1px solid var(--color-ink-20); padding: var(--space-5) 0; }
.def-row h3 { margin-bottom: var(--space-2); }
.def-row p { color: var(--color-ink-80); margin: 0; }
.numbers-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); border-top: 1px solid var(--color-ink-20); padding-top: var(--space-6); margin-top: var(--space-5); }
.num-cell { display: flex; flex-direction: column; gap: var(--space-2); }
.num-figure { font-family: var(--font-mono); font-weight: 500; font-size: 2.25rem; line-height: 1.1; color: var(--color-ink); }
.num-caption { font-size: 0.8125rem; color: var(--color-ink-80); line-height: 1.5; }

.calc { border: 1px solid var(--color-ink-20); padding: var(--space-6); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.calc-field { margin-bottom: var(--space-5); }
.calc-field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--space-2); }
.calc-field input {
  width: 100%; min-height: var(--layout-touch); padding: 0 var(--space-4);
  border: 1px solid var(--color-ink-40); border-radius: var(--radius-none);
  background: var(--color-paper); font-family: var(--font-mono); font-size: 1rem; color: var(--color-ink);
}
.calc-field input:focus { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.calc-field .calc-hint { font-size: 0.8125rem; color: var(--color-ink-80); margin-top: var(--space-2); }
.calc-out dl { margin: 0; }
.calc-out .row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-ink-20); align-items: baseline; }
.calc-out .row dt { font-size: 0.875rem; color: var(--color-ink-80); }
.calc-out .row dd { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 1.125rem; }
.calc-math { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.6; color: var(--color-ink-80); margin-top: var(--space-4); }
.calc-note { margin-top: var(--space-5); font-size: 0.875rem; color: var(--color-ink-80); }

/* ---------- Agents ---------- */
.cap-table { border-top: 1px solid var(--color-ink-20); }
.cap-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-ink-20); align-items: baseline; }
.cap-row h3 { margin: 0 0 var(--space-1); }
.cap-row p { color: var(--color-ink-80); font-size: 0.875rem; margin: 0; max-width: 40rem; }
.cap-row .cap-stage { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink); white-space: nowrap; }
.machine-lines { border: 1px solid var(--color-ink-20); padding: var(--space-5); }
.machine-lines p { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.7; color: var(--color-ink); margin: 0 0 var(--space-2); word-break: break-all; }
.machine-lines p:last-child { margin-bottom: 0; }
.prose { max-width: var(--layout-prose); }
.prose h2 { margin-top: var(--space-7); }
.prose p { color: var(--color-ink); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: var(--space-2); }

/* ---------- Sweepstakes ---------- */
.sweep-list { border-top: 1px solid var(--color-ink-20); }
.sweep-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-ink-20); }
.sweep-item h3 { font-size: 1.1875rem; margin-bottom: var(--space-2); }
.sweep-item h3 a { color: var(--color-ink); text-decoration: none; }
.sweep-item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sweep-item .sw-facts { font-size: 0.875rem; color: var(--color-ink-80); margin: 0 0 var(--space-2); max-width: 52rem; }
.sweep-item .sw-facts .mono { color: var(--color-ink); }

/* ---------- Blog & legal ---------- */
.post-row { border-top: 1px solid var(--color-ink-20); padding: var(--space-5) 0; }
.post-row .post-date { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); display: block; margin-bottom: var(--space-2); }
.post-row h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--space-2); font-optical-sizing: auto; }
.post-row h3 a { color: var(--color-ink); text-decoration: none; }
.post-row h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-row p { color: var(--color-ink-80); margin: 0; max-width: 44rem; }
.post-headline { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-blog-headline); line-height: 1.1; font-optical-sizing: auto; }
.post-meta { font-family: var(--font-mono); font-size: var(--text-mono-note); color: var(--color-ink-80); }
.pull-quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: 1.375rem; line-height: 1.4; color: var(--color-ink);
  border-left: 2px solid var(--color-ink); padding-left: var(--space-5);
  margin: var(--space-6) 0; max-width: 36rem; font-optical-sizing: auto;
}
.subscribe-row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--color-ink-20); padding-top: var(--space-5); margin-top: var(--space-6); }
.subscribe-row input {
  flex: 1; min-width: 220px; min-height: var(--layout-touch); padding: 0 var(--space-4);
  border: 1px solid var(--color-ink-40); border-radius: var(--radius-none);
  background: var(--color-paper); font: inherit; color: var(--color-ink);
}
.subscribe-row input:focus { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.draft-note { border: 1px dashed var(--color-ink-40); padding: var(--space-4) var(--space-5); font-size: 0.875rem; margin-bottom: var(--space-6); }
.draft-note strong { font-family: var(--font-mono); font-size: var(--text-mono-note); font-weight: 500; margin-right: var(--space-3); }
.legal-doc h2 { margin-top: var(--space-7); }
.legal-doc .mono { font-size: 0.875rem; }

/* ---------- Responsive: 390px is the lead canvas ---------- */
@media (min-width: 900px) {
  .container { padding: 0 var(--layout-gutter-lg); }
  .section { padding: var(--space-section-lg) 0; }
  h1 { font-size: var(--text-h1-lg); line-height: 1.15; }
  h2 { font-size: var(--text-h2-lg); }
  .hero-statement { font-size: var(--text-hero-lg); }
  .statement { font-size: var(--text-statement-lg); }
  .figure-block .worked-figure { font-size: var(--text-worked-figure-lg); }
  .worked-figure { font-size: var(--text-worked-figure-lg); }
  .post-headline { font-size: var(--text-blog-headline-lg); }
  .dir-row { padding: var(--space-row-lg) 0; }
  .offer-row { padding: var(--space-row-lg) 0; }
}
@media (max-width: 900px) {
  .sticky-bar { display: flex; }
  body.has-sticky-bar { padding-bottom: 76px; }
  .numbers-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .header-inner { gap: var(--space-4); min-height: 64px; }
  .logo img.wordmark { height: 24px; }
  .main-nav { display: none; }
  .search-link { display: none; }
  .hero .filled-block { width: 100%; }
  .hero-action { align-items: stretch; }
  .hero-action .text-link { justify-content: center; }
  .figure-block { grid-template-columns: 1fr; }
  .worked-row { grid-template-columns: 1fr; }
  .num-row { grid-template-columns: 3rem 1fr; }
  .num-row p { grid-column: 2; }
  .num-row .scope-line { grid-column: 2; }
  .path-grid, .calc-grid, .rail-3 { grid-template-columns: 1fr; }
  .site-footer .footer-inner { padding-top: 3.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .facts .row { grid-template-columns: 1fr; }
  .offer-row { grid-template-columns: minmax(0, 1fr); }
  .offer-row .of-side { text-align: left; align-items: flex-start; }
  .offer-row .of-verify, .offer-row .of-ends { white-space: normal; }
  .finds-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .format-row { flex-direction: column; gap: var(--space-3); }
  .cap-row { grid-template-columns: 1fr; }
}

/* ---------- Reduced-motion guard (Direction §0: stillness is the brand;
   this guard is declared so no later motion can slip in unreviewed) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Homepage — the approved blend composition (2026-11-12) ----------
   Ported rule-for-rule from mockups/hero-blend/hero-blend.css. Every
   selector is scoped under .hp, a class carried ONLY by the homepage's
   <main>, so nothing here can alter another page (the other pages' HTML
   is byte-identical and none of them contains .hp). Where a blend rule
   restates a shared class (.hero, .figure-block, .filled-block,
   .stage-label, ...), the .hp prefix wins on the homepage only.
   Tokens are the site's own (tokens.css) — same values as the mockup's.
   Radius 0, no shadows, no motion on page elements; the only radius and
   shadow live inside the phone imagery, as in the approved mockup. */

.hp img { display: block; }
.hp .section { padding: 64px 0; }

/* Hero — the supplied shopper photograph leads, full-bleed. */
.hp .hero { padding: 0 0 64px; }
.hp .hero-media { margin: 0; }
.hp .hero-media img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%;
}
.hp .hero-body { padding-top: 28px; }
.hp .eyebrow { margin: 0 0 14px; }
.hp .hero-statement { margin: 0 0 20px; max-width: 12em; }
.hp .lede { color: var(--color-ink); margin: 0 0 28px; max-width: 34em; }
.hp .figure-block {
  display: block; max-width: none;
  border-top: 1px solid var(--color-ink-40); padding-top: 20px;
}
.hp .figure-block .worked-figure {
  font-size: 32px; line-height: 1.2; display: block; margin-bottom: 10px;
}
.hp .figure-block .fig-note { max-width: none; padding-top: 0; }
.hp .figure-block .fig-note .fig-title { font-weight: 500; margin: 0 0 6px; }
.hp .figure-block .fig-note p { color: var(--color-ink); margin: 0 0 6px; }
.hp .verify { margin: 10px 0 0; }
.hp .hero-action { display: block; margin-top: 28px; }
.hp .filled-block { display: flex; min-height: 56px; padding: 14px 24px; font-size: 16px; border: 0; }
.hp .text-link {
  display: inline-block; padding: 12px 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px;
}
.hp .hero-action .text-link { margin-top: 6px; }

/* Features — "What Givvy Does": the four features as a sticky-
   stacking deck (Jason, 2026-11-12 evening — the homepage's one
   motion system, superseding the direction's no-motion law for
   this page). CSS only, no JS: each card is position:sticky on a
   staircase (10px steps mobile, 14px desktop; the site header is
   not sticky, so the staircase's offset base is 0) and the next
   card slides over the stuck one as the reader scrolls, the deck
   accumulating under a soft top shadow. Paper ground, hairline
   border, radius 0. Under prefers-reduced-motion the deck
   renders static at natural height. Each card carries a pair of
   the flat food illustrations as its art (the old unlabeled icon
   row under feature 4 is retired into the cards). The signature
   in DM Sans 700 (the hero spends the page's one serif
   statement). No rust in this section. */
.hp .features-section { border-top: 1px solid var(--color-ink-20); }
.hp .fs-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-80); margin: 0 0 12px;
}
.hp .fs-heading {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  line-height: 1.15; margin: 0;
}
.hp .feature-cards {
  --stack-step: 10px;
  list-style: none; margin: 36px 0 0; padding: 0;
}
/* Sticky runway: with content-height cards on mobile the tallest
   card would start rolling off before the last card pins (its
   height beats the last card's height + the 3-step staircase by
   ~25px). A short runway extends the deck's sticky range so the
   full-stack instant — all four cards at their staircase offsets
   at once — actually exists. */
.hp .feature-cards::after { content: ""; display: block; height: 40px; }
.hp .feature-card {
  position: sticky;
  background: var(--color-paper);
  border: 1px solid var(--color-ink-20); border-radius: 0;
  box-shadow: 0 -16px 28px -16px rgba(26, 67, 49, 0.25);
  display: grid; grid-template-columns: 44px 1fr;
  column-gap: 16px;
  min-height: 30vh;
  padding: 24px 20px;
  /* No margins between cards: a sticky card's margin box counts
     against its sticky range, and a 20px margin would start the
     deck sliding before the last card pins. The deck butts
     together — the top shadow carries the separation. */
  margin-bottom: 0;
}
.hp .feature-card:nth-child(1) { top: 0; }
.hp .feature-card:nth-child(2) { top: var(--stack-step); }
.hp .feature-card:nth-child(3) { top: calc(var(--stack-step) + var(--stack-step)); }
.hp .feature-card:nth-child(4) { top: calc(var(--stack-step) + var(--stack-step) + var(--stack-step)); }
.hp .fr-num {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  line-height: 1.4; color: var(--color-ink); padding-top: 3px;
}
.hp .fr-name {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  line-height: 1.2; margin: 0 0 6px;
}
.hp .fr-body { font-size: 16px; line-height: 1.55; margin: 0; max-width: 38em; }
.hp .fs-signature {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  line-height: 1.25; margin: 32px 0 0;
}

/* Phones — "Inside Givvy": the two app screens as product imagery.
   Ported rule-for-rule from the blend stylesheet, scoped under
   .blend-phones exactly as the mockup scopes them (plus the .hp page
   scope). In-app rust rides .fig-rust, never .rust, so the page-level
   rust count stays at the budget of 2. */
.hp .phones-section { border-top: 1px solid var(--color-ink-20); }
.hp .ps-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-80); margin: 0 0 12px;
}
.hp .ps-heading {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  line-height: 1.15; margin: 0 0 10px;
}
.hp .ps-lede { font-size: 16px; line-height: 1.55; margin: 0; max-width: 38em; }
.hp .blend-phones {
  --color-device: #10140F;
  display: flex; flex-direction: column; align-items: center;
  gap: 36px; margin-top: 36px;
}
.hp .blend-phones *,
.hp .blend-phones *::before,
.hp .blend-phones *::after { margin: 0; padding: 0; box-sizing: border-box; }
.hp .blend-phones .fig-rust { color: var(--color-rust); }
.hp .blend-phones .bp-phone {
  width: min(300px, calc(100vw - 32px));
  flex: none; margin: 0;
  background: var(--color-device);
  border-radius: 48px; padding: 11px;
  box-shadow: 0 30px 60px rgba(26, 67, 49, 0.22), 0 4px 14px rgba(26, 67, 49, 0.14);
}
.hp .blend-phones .bp-screen {
  position: relative; height: 600px; overflow: hidden;
  background: var(--color-paper); border-radius: 37px; padding: 0 16px 76px;
}
.hp .blend-phones .statusbar {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; height: 40px; padding: 6px 6px 0 12px;
}
.hp .blend-phones .sb-time { font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; }
.hp .blend-phones .island {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 76px; height: 22px; border-radius: 11px; background: var(--color-device);
}
.hp .blend-phones .sb-marks { display: flex; align-items: center; gap: 5px; color: var(--color-ink); }
.hp .blend-phones .sb-marks svg { fill: currentColor; }
.hp .blend-phones .app-header {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 10px;
}
.hp .blend-phones .app-ico { width: 23px; height: 23px; color: var(--color-ink-80); }
.hp .blend-phones .app-wordmark { height: 23px; width: auto; }
.hp .blend-phones .app-tabs {
  display: flex; gap: 18px; border-bottom: 1px solid var(--color-ink-20);
  font-size: 13.5px; color: var(--color-ink-60); white-space: nowrap;
}
.hp .blend-phones .app-tabs span { padding: 8px 0 9px; }
.hp .blend-phones .app-tabs .on {
  color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-ink);
}
.hp .blend-phones .app-stage {
  font-family: var(--font-mono); font-size: 10px; line-height: 1.5;
  color: var(--color-ink-80); padding: 10px 0 2px;
}
.hp .blend-phones .store-card { padding: 14px 0 4px; }
.hp .blend-phones .store-card + .store-card { border-top: 1px solid var(--color-ink-20); }
.hp .blend-phones .sc-head { display: flex; align-items: center; gap: 11px; }
.hp .blend-phones .tile {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.hp .blend-phones .sc-id { display: flex; flex-direction: column; min-width: 0; }
.hp .blend-phones .sc-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.2;
}
.hp .blend-phones .sc-status {
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-80); margin-top: 2px;
}
.hp .blend-phones .heart { width: 21px; height: 21px; color: var(--color-ink-60); margin-left: auto; flex: none; }
.hp .blend-phones .sc-row { display: flex; gap: 12px; padding: 9px 0 9px 51px; }
.hp .blend-phones .sc-row + .sc-row { border-top: 1px solid var(--color-ink-20); }
.hp .blend-phones .sc-fig {
  flex: none; width: 86px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  line-height: 1.45; padding-top: 1px;
}
.hp .blend-phones .sc-main { display: flex; flex-direction: column; min-width: 0; }
.hp .blend-phones .sc-title { font-size: 13px; font-weight: 500; line-height: 1.35; }
.hp .blend-phones .sc-meta {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-80); margin-top: 2px;
}
.hp .blend-phones .search-field {
  display: flex; align-items: center; gap: 9px; margin-top: 10px;
  padding: 11px 13px; border: 1px solid var(--color-ink-20);
  border-radius: 12px; background: #fff;
}
.hp .blend-phones .search-field svg { width: 19px; height: 19px; color: var(--color-ink-60); flex: none; }
.hp .blend-phones .sf-q { font-size: 15px; font-weight: 500; flex: 1; }
.hp .blend-phones .sf-x { width: 20px !important; height: 20px !important; color: var(--color-ink-60); }
.hp .blend-phones .sr-head {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-top: 18px;
}
.hp .blend-phones .sr-sub {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-80); padding-top: 2px;
}
.hp .blend-phones .sr-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; }
.hp .blend-phones .sr-row + .sr-row { border-top: 1px solid var(--color-ink-20); }
.hp .blend-phones .sr-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hp .blend-phones .sr-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.hp .blend-phones .sr-fig {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; margin-top: 3px;
}
.hp .blend-phones .sr-meta {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-80); margin-top: 2px;
}
.hp .blend-phones .chip {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.hp .blend-phones .chev { width: 17px; height: 17px; color: var(--color-ink-40); flex: none; }
.hp .blend-phones .app-nav {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; border-top: 1px solid var(--color-ink-20);
  background: var(--color-paper); padding: 9px 6px 20px;
}
.hp .blend-phones .nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; font-size: 9.5px; font-weight: 500; color: var(--color-ink-60);
}
.hp .blend-phones .nav-item svg { width: 22px; height: 22px; }
.hp .blend-phones .nav-item.on { color: var(--color-ink); }
.hp .blend-phones .home-bar {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 120px; height: 4.5px; border-radius: 3px; background: var(--color-ink); opacity: 0.85;
}

/* Logo strip — "Stores and cards": the merchants' own marks, full
   color, unboxed on the paper. Sizing is OPTICAL, by lettering
   (Jason's ruling, 2026-11-12): every wordmark's dominant lettering
   renders at one cap height — 25px desktop, 20px mobile. Cap-height
   share of each file's height: Publix ascenders .936, Kroger K .377,
   Erewhon caps .986, Whole Foods main line .314. The roundels
   (Starbucks, Trader Joe's) carry no external lettering; at 1.84x
   the cap height they read too small beside the Whole Foods block,
   so per Jason's correction (2026-11-12) their diameter is 68px
   desktop / 54px mobile — presence matched to the block, not the
   lettering line. Fallback names are page type
   (DM Sans, cap ratio .70) sized so their cap height matches the
   wordmarks' — they read as lettering, never louder.
   Added 2026-11-12 evening (Jason: brand breadth beyond grocery),
   measured the same way (canvas alpha bounds on the staged files):
   Nike's swoosh is a symbol — glyph .349 of its square file,
   full width — sized by presence at 62px wide desktop / 50px
   mobile. AMC is a two-line lockup: glyph .946 of file height,
   its dominant "amc" line .636 (the THEATRES line .236) — sized
   by the dominant line, like Whole Foods: 39px desktop / 31px
   mobile file height. Banana Republic is a wide serif wordmark
   (13.4:1, caps .97 of file height) — parity height would run
   ~346px wide, so its width is capped at 300px desktop / 250px
   mobile and the lettering lands just under the line (~22px /
   ~18px) to keep the strip balanced. */
.hp .logos-section { border-top: 1px solid var(--color-ink-20); }
.hp .ls-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-80); margin: 0 0 12px;
}
.hp .ls-lede { font-size: 16px; line-height: 1.55; margin: 0; max-width: 38em; }
.hp .logo-strip {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 26px 32px;
}
.hp .logo-strip li { display: flex; align-items: center; }
.hp .ls-logo { height: 24px; width: auto; }
/* Per-mark optical sizes — mobile (cap height 20px). */
.hp .ls-publix { height: 22px; }
.hp .ls-kroger { height: 53px; }
.hp .ls-starbucks { height: 54px; }
.hp .ls-whole-foods { height: 64px; }
.hp .ls-erewhon { height: 20px; }
.hp .ls-trader-joes { height: 54px; }
.hp .ls-nike { width: 50px; height: auto; }
.hp .ls-amc { height: 31px; }
.hp .ls-banana-republic { width: 250px; height: auto; }
.hp .ls-fallback { gap: 9px; }
.hp .ls-tile {
  flex: none; width: 32px; height: 32px;
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.hp .ls-name {
  font-family: var(--font-display); font-weight: 700; font-size: 29px;
  line-height: 1.2; color: var(--color-ink); white-space: nowrap;
}

/* Stores split + browser mockup — the section's wide form: a ~50/50
   row, text + marks left, a live-DOM browser mockup right, vertically
   centered (Flipp section composition). Mobile: stacked — text +
   logos first, mockup second, full width. Mockup v2 (Jason
   2026-11-12): a realistic macOS browser window — rounded corners,
   window shadow, tab strip with traffic lights and one active tab,
   toolbar with nav glyphs and an address pill — holding a designed
   explore page: header (wordmark, search, sign-in, app pill),
   honesty stage line, category chips, and flyer-style cards. The
   window and its page furniture are depictions, so they carry the
   small radii real windows and apps have; the site proper stays
   radius 0. Color doctrine: Givvy's chrome stays paper/ink and all
   figures stay ink — the color is the merchants': their logos on
   brand-tinted art tiles with the flat food illustrations composed
   as product art. The grid's bottom row bleeds a few px past the
   window's lower edge, as in the reference. */
.hp .stores-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.hp .ls-action { margin: 28px 0 0; }
.hp .browser-mock {
  border-radius: 10px; overflow: hidden; background: #fff;
  border: 1px solid rgba(31, 38, 34, 0.10);
  box-shadow: 0 30px 60px -18px rgba(31, 38, 34, 0.28),
    0 12px 24px -12px rgba(31, 38, 34, 0.16);
}
/* Window chrome — tab strip */
.hp .bm-tabstrip {
  display: flex; align-items: flex-end; gap: 10px;
  background: #dee1e5; padding: 6px 10px 0;
}
.hp .bm-lights { display: inline-flex; gap: 7px; flex: none; align-self: center; margin-bottom: 3px; }
.hp .bm-light {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 0 0 1.5px rgba(0, 0, 0, 0.25);
}
.hp .bm-light-r { background: #ff5f57; }
.hp .bm-light-y { background: #febc2e; }
.hp .bm-light-g { background: #28c840; }
.hp .bm-tab {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 1 1 auto; min-width: 0; max-width: 232px; height: 30px;
  background: #fff; border-radius: 8px 8px 0 0; padding: 0 8px 0 10px;
}
.hp .bm-tab-mark { height: 15px; width: auto; flex: none; }
.hp .bm-tab-title {
  font-size: 11.5px; line-height: 1.2; color: #3c4043;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp .bm-tab-x { width: 9px; height: 9px; color: #5f6368; flex: none; margin-left: auto; }
.hp .bm-tab-plus { display: inline-flex; flex: none; align-self: center; margin-bottom: 3px; padding: 3px; color: #5f6368; }
.hp .bm-tab-plus svg { width: 12px; height: 12px; display: block; }
/* Window chrome — toolbar */
.hp .bm-toolbar {
  display: flex; align-items: center; gap: 12px;
  background: #fff; padding: 7px 12px; border-bottom: 1px solid #e3e6e3;
}
.hp .bm-navs { display: inline-flex; gap: 13px; flex: none; color: #4d5156; }
.hp .bm-navs svg { width: 15px; height: 15px; display: block; }
.hp .bm-navs .bm-nav-off { color: #bcc0bc; }
.hp .bm-addr {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  background: #f1f3f1; border-radius: 999px; padding: 5px 12px;
  font-size: 12px; line-height: 1.35; color: #3c4043; white-space: nowrap; overflow: hidden;
}
.hp .bm-addr svg { width: 10px; height: 10px; flex: none; color: #5f6368; }
/* The explore page inside */
.hp .bm-view { background: var(--color-paper); padding: 14px 14px 0; overflow: hidden; }
.hp .bm-top { display: flex; align-items: center; gap: 10px; }
.hp .bm-wordmark { height: 20px; width: auto; flex: none; }
.hp .bm-search {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--color-ink-20); border-radius: 999px; background: #fff;
  padding: 7px 12px; font-size: 12.5px; color: var(--color-ink-60);
  white-space: nowrap; overflow: hidden;
}
.hp .bm-search svg { width: 14px; height: 14px; flex: none; }
.hp .bm-signin { font-size: 12.5px; font-weight: 500; color: var(--color-ink); flex: none; }
.hp .bm-appbtn {
  flex: none; background: var(--color-ink); color: var(--color-paper);
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 12px;
}
.hp .bm-stage {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4;
  color: var(--color-ink-80); margin: 10px 0 0;
}
.hp .bm-chips { display: flex; gap: 6px; margin-top: 10px; overflow: hidden; }
.hp .bm-chip {
  flex: none; border: 1px solid var(--color-ink-20); background: #fff;
  border-radius: 999px; padding: 4px 10px;
  font-size: 11.5px; line-height: 1.3; color: var(--color-ink-80);
}
.hp .bm-chip-on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); font-weight: 600; }
.hp .bm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 12px; margin-bottom: -16px;
}
.hp .bm-card {
  background: #fff; border: 1px solid #e6e2d6; border-radius: 8px; overflow: hidden;
}
.hp .bm-art {
  position: relative; height: 92px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hp .bm-art-publix { background: #e9f4ea; }
.hp .bm-art-nike { background: #f1f0ea; }
.hp .bm-art-amc { background: #fdecea; }
.hp .bm-art-sbux { background: #e8f1eb; }
.hp .bm-art-logo { position: relative; z-index: 1; width: auto; }
.hp .bm-art-publix .bm-art-logo { height: 30px; }
.hp .bm-art-nike .bm-art-logo { height: auto; width: 72px; }
.hp .bm-art-amc .bm-art-logo { height: 40px; }
.hp .bm-art-sbux .bm-art-logo { height: 60px; }
.hp .bm-art-ic { position: absolute; height: auto; }
.hp .bm-art-publix .bm-ic-a { width: 46px; top: -8px; left: -4px; transform: rotate(-8deg); }
.hp .bm-art-publix .bm-ic-b { width: 60px; bottom: -14px; right: -10px; transform: rotate(6deg); }
.hp .bm-card-body { padding: 10px 12px 12px; }
.hp .bm-store-row { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; }
.hp .bm-mark { height: 16px; width: auto; flex: none; }
.hp .bm-mark-sbux { height: 17px; }
.hp .bm-store {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  line-height: 1.2; margin: 0; color: var(--color-ink);
}
.hp .bm-offer { font-size: 12.5px; line-height: 1.45; margin: 0; }
.hp .bm-meta {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-ink-80); margin: 7px 0 0;
}
@media (max-width: 560px) {
  .hp .bm-signin { display: none; }
  .hp .bm-wordmark { height: 17px; }
  .hp .bm-art { height: 74px; }
  .hp .bm-art-publix .bm-art-logo { height: 24px; }
  .hp .bm-art-nike .bm-art-logo { width: 58px; }
  .hp .bm-art-amc .bm-art-logo { height: 32px; }
  .hp .bm-art-sbux .bm-art-logo { height: 48px; }
}

/* Worked example — one store, in full (receipt pattern). The page's
   stage label here is the blend's dashed-hairline line, not the boxed
   .stage-label used elsewhere on the site. */
.hp .worked-section { border-top: 1px solid var(--color-ink-20); padding-top: 48px; }
.hp .worked-head { display: block; }
.hp .worked-head h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  line-height: 1.15; margin: 0 0 8px;
}
.hp .stage-label {
  display: inline-block; border: 0; border-top: 1px dashed var(--color-ink-40);
  padding: 8px 0 0; background: transparent;
}
.hp .worked-media { margin: 28px 0 0; }
.hp .worked-media img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 15%;
}
.hp .worked-rows { margin-top: 8px; }
.hp .wr-row {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  border-top: 1px solid var(--color-ink-20); padding: 16px 0;
}
.hp .wr-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-80);
}
.hp .wr-figure {
  font-family: var(--font-mono); font-size: 20px; font-weight: 500;
  line-height: 1.3; display: block; margin-bottom: 4px;
}
.hp .wr-main p { margin: 0 0 6px; }
.hp .member-label { padding: 4px 8px; }
.hp .worked-foot { margin: 4px 0 0; }

/* Explanation — "what Givvy is": the category statement as a
   structural heading (DM Sans 700 — the hero holds the page's one
   serif statement), hairline-led like every section after the hero.
   No rust, no filled block. Split layout (2026-11-12): text left,
   photograph right in a fixed 4:3 panel, mirroring the stores
   split's grid language; stacked on mobile, photo after text. */
.hp .explain-section { border-top: 1px solid var(--color-ink-20); }
.hp .explain-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.hp .ex-heading, .hp .ls-heading {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  line-height: 1.15; margin: 0 0 16px;
}
.hp .ex-body { font-size: 16px; line-height: 1.55; margin: 0; max-width: 38em; }
.hp .ex-visual { margin: 0; aspect-ratio: 4 / 3; }
.hp .ex-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Contests — the destination row: half text, half visual on
   desktop, stacked on mobile. The visual is the direction's
   designed fallback — a filled ink panel carrying the paper
   wordmark, no text claims, no invented imagery — at a fixed 4:3
   so Jason's photograph drops in file-for-file. The panel is
   imagery, not an action block. Eyebrow in the Mono style of the
   other section eyebrows. */
.hp .contests-section { border-top: 1px solid var(--color-ink-20); }
.hp .contests-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.hp .ct-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-80); margin: 0 0 12px;
}
.hp .ct-heading {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  line-height: 1.15; margin: 0 0 16px;
}
.hp .ct-body { font-size: 16px; line-height: 1.55; margin: 0; max-width: 38em; }
.hp .ct-action { margin: 8px 0 0; }
.hp .ct-visual { margin: 0; aspect-ratio: 4 / 3; }
.hp .ct-visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}

@media (min-width: 900px) {
  .hp .hero-media img { aspect-ratio: 21 / 9; object-position: 50% 5%; }
  .hp .hero-body { padding-top: 40px; }
  .hp .hero-statement { max-width: 13em; }
  .hp .figure-block {
    display: grid; grid-template-columns: 200px 1fr; column-gap: 32px; row-gap: 0; align-items: start;
  }
  .hp .figure-block .worked-figure { font-size: 40px; margin-bottom: 0; }
  .hp .figure-block .verify { grid-column: 2; }
  .hp .filled-block { display: inline-flex; min-height: 48px; }
  .hp .hero-action .text-link { display: block; width: fit-content; }

  .hp .fs-heading { font-size: 32px; }
  .hp .feature-cards { --stack-step: 14px; }
  .hp .feature-card {
    grid-template-columns: 56px 1fr; column-gap: 24px;
    min-height: 34vh; padding: 36px 36px 28px;
  }
  .hp .fr-name { font-size: 21px; }
  .hp .fs-signature { font-size: 24px; margin-top: 40px; }

  .hp .ps-heading { font-size: 32px; }
  .hp .blend-phones {
    flex-direction: row; justify-content: center; align-items: flex-start;
    gap: 24px; margin-top: 44px;
  }

  .hp .logo-strip { margin-top: 40px; gap: 30px 54px; }
  .hp .ls-logo { height: 30px; }
  /* Per-mark optical sizes — desktop (cap height 25px). */
  .hp .ls-publix { height: 27px; }
  .hp .ls-kroger { height: 66px; }
  .hp .ls-starbucks { height: 68px; }
  .hp .ls-whole-foods { height: 80px; }
  .hp .ls-erewhon { height: 25px; }
  .hp .ls-trader-joes { height: 68px; }
  .hp .ls-nike { width: 62px; height: auto; }
  .hp .ls-amc { height: 39px; }
  .hp .ls-banana-republic { width: 300px; height: auto; }
  .hp .ls-tile { width: 40px; height: 40px; font-size: 22px; }
  .hp .ls-name { font-size: 36px; }

  /* Stores split at desktop: two even columns, generous gap,
     vertically centered; the strip left-aligns and wraps inside
     the narrower column, as in the reference's logo grid. */
  .hp .stores-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .hp .stores-grid .logo-strip { justify-content: flex-start; }
  .hp .ls-action { margin-top: 32px; }
  .hp .bm-view { padding: 18px 18px 0; }
  .hp .bm-tab { max-width: 252px; }
  .hp .bm-grid { gap: 14px; margin-bottom: -18px; }
  .hp .bm-art { height: 104px; }
  .hp .bm-art-publix .bm-art-logo { height: 34px; }
  .hp .bm-art-nike .bm-art-logo { width: 84px; }
  .hp .bm-art-amc .bm-art-logo { height: 46px; }
  .hp .bm-art-sbux .bm-art-logo { height: 68px; }
  .hp .bm-card-body { padding: 12px 14px 14px; }

  .hp .worked-head h2 { font-size: 24px; }
  .hp .worked-media img { aspect-ratio: 21 / 9; object-position: 50% 18%; }

  .hp .ex-heading, .hp .ls-heading { font-size: 32px; }

  /* Explanation split at desktop: two even columns, generous gap,
     vertically centered — the stores split's language. */
  .hp .explain-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

  .hp .contests-grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .hp .ct-heading { font-size: 32px; }
  .hp .wr-row { grid-template-columns: 200px 1fr; gap: 32px; padding: 20px 0; }
}

/* ---------- Header dropdowns (nav restructure 2026-11-12) ----------
   Two dropdowns: Explore Savings, Win & Bid. Desktop: hover AND
   click open (never hover-only — phones and keyboards must work).
   Mobile: the Menu button reveals the nav as a stacked panel and
   each dropdown opens as an accordion. Direction v1: hairlines
   only — no radius, no shadow, no motion. */
.nav-drop { position: relative; }
.nav-drop-toggle {
  color: var(--color-ink); background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
}
.nav-drop-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-drop-toggle[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; }
.nav-caret { width: 14px; height: 14px; flex: none; }
.nav-menu {
  list-style: none; margin: 0; padding: 8px 0; min-width: 272px;
  background: var(--color-paper); border: 1px solid var(--color-ink-20);
  position: absolute; top: 100%; left: 0; z-index: 50; display: none;
}
.nav-drop.open .nav-menu { display: block; }
@media (min-width: 721px) {
  .nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: block; }
}
.nav-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 16px; min-height: 44px; color: var(--color-ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; white-space: nowrap;
}
.nav-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
/* .nav-note retired 2026-11-12 evening: the last dropdown cue
   ("Bid to win" on Auctions) was removed on Jason's direction —
   the menus carry no cues at all now. */
.nav-menu-toggle { display: none; }
/* The inline nav wraps below ~1024px (measured: items wrap at
   1000px, single-line at 1050px), so the Menu panel takes over
   there — not just at phone widths. */
@media (max-width: 1024px) {
  .site-header { position: relative; }
  .nav-menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
    background: none; border: 0; cursor: pointer;
    color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
  }
  .main-nav {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--color-paper); border-bottom: 1px solid var(--color-ink-20);
    padding: 8px var(--layout-gutter) 16px; margin-right: 0;
  }
  .site-header.nav-open .main-nav { display: flex; }
  .main-nav > a { min-height: 44px; border-bottom: 1px solid var(--color-ink-20); }
  .nav-drop { border-bottom: 1px solid var(--color-ink-20); }
  .nav-drop-toggle { width: 100%; justify-content: space-between; min-height: 48px; }
  .nav-menu { position: static; display: none; border: 0; border-top: 1px solid var(--color-ink-20); padding: 4px 0 8px; min-width: 0; }
  .nav-drop.open .nav-menu { display: block; }
  .nav-menu a { padding: 0 0 0 16px; }
}
@media (max-width: 720px) {
  /* The older .search-link rule loses on specificity to
     .header-actions a (inline-flex); restate it here so Search
     stays hidden on phones, and keep the remaining actions and
     the Menu button on one line. */
  .header-actions a.search-link { display: none; }
  .header-actions a, .nav-menu-toggle { white-space: nowrap; }
}

/* Homepage Win & Bid section — the preserved composite statement,
   moved out of the heading (2026-11-12 claims correction; wording
   routes through the Copy Gate). Set as the section's signature line. */
.hp .ct-signature {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  line-height: 1.25; margin: 24px 0 0;
}
@media (min-width: 900px) {
  .hp .ct-signature { font-size: 24px; }
}

/* Reduced motion — the stacking deck renders static at natural
   height. Placed last so it outranks the desktop block's card
   sizing at equal specificity (features round, 2026-11-12). */
@media (prefers-reduced-motion: reduce) {
  .hp .feature-card { position: static; min-height: 0; margin-bottom: 20px; }
  .hp .feature-card:nth-child(4) { margin-bottom: 0; }
}