/* ─────────────────────────────────────────────────────────────────────────
   Your Grocery App — marketing site
   ─────────────────────────────────────────────────────────────────────────

   THE AESTHETIC, AND WHY

   Daylight at the mandi. Warm paper, produce colour used at full strength, and
   numerals treated as the hero — because numerals ARE the language of this
   trade, and a wholesaler recognises a rate card instantly where he recognises
   a SaaS dashboard not at all.

   THIS WAS DARK UNTIL 2026-08-08, and the reason for the change is worth
   keeping. The storefront this product generates for a vendor is bright
   orange — warm, loud, high-colour. The page selling it was near-black green.
   So the shop window looked nothing like the shop, and the first thing a
   prospect saw set an expectation the product then contradicted. Matching the
   product is a better argument for colour than taste is.

   Deliberately NOT: purple gradients, glassmorphism, a laptop mockup, or any
   of the visual grammar of software sold to software people. The audience is a
   vegetable wholesaler in Hyderabad who has run a real business for twenty
   years. Looking like a startup would be a reason not to trust it.

   Built mobile-first and tested narrow-first: most of these people will see
   this on a phone, on a cheap phone, on mobile data.

   TWO FAMILIES OF PRODUCE COLOUR, AND THE RULE FOR PICKING ONE.
   The saturated tokens (--turmeric, --chilli, --leaf) are FILLS: backgrounds,
   borders, large display numerals. Their -ink partners are the only ones
   allowed to set body-sized text, because #f59e0b on warm paper is about
   2:1 and unreadable. Reach for -ink whenever the property is `color` on
   anything smaller than a headline.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Paper. Warm, not clinical — this is daylight and butcher paper, not an
     operating theatre. Names kept from the dark scheme so every rule that
     already reads them flips in one place. */
  --board:      #fffaf2;   /* page      */
  --board-2:    #ffffff;   /* cards     */
  --board-3:    #fff1dc;   /* tint band */

  /* Ink. Warm near-black rather than grey — grey on cream reads as a mistake. */
  --chalk:      #241606;   /* headings and body   ~15:1 on paper */
  --chalk-2:    #5f4a37;   /* secondary            ~7:1          */
  --chalk-3:    #7d6146;   /* tertiary             ~5.3:1        */

  /* Produce, at full strength. Fills only — see the note above. */
  --turmeric:   #f59e0b;
  --chilli:     #e0402c;
  --leaf:       #16a34a;
  --brinjal:    #7c3aed;

  /* The same produce, dark enough to be read as text on paper. */
  --turmeric-ink: #b45309;  /* ~5.0:1 */
  --chilli-ink:   #b91c1c;  /* ~5.9:1 */
  --leaf-ink:     #15803d;  /* ~4.9:1 */

  --rule:       rgba(36, 22, 6, 0.18);
  --rule-soft:  rgba(36, 22, 6, 0.09);

  --shadow:     0 22px 50px -24px rgba(120, 68, 12, 0.32);

  --measure:    68ch;
  --pad:        clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--board);
  color: var(--chalk);
  font-family: Karla, ui-sans-serif, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* Produce washes plus grain. Three colours bled into the paper at low alpha
     so the page reads as warm and alive rather than as a white document with
     coloured bits on it. Kept under .12 — past that the text starts fighting
     its own background, which is exactly the failure "make it vibrant" tends
     to produce. */
  background-image:
    radial-gradient(1100px 640px at 82% -6%, rgba(245,158,11,.16), transparent 62%),
    radial-gradient(820px 560px at 2% 10%, rgba(22,163,74,.10), transparent 58%),
    radial-gradient(760px 520px at 50% 108%, rgba(224,64,44,.08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed, fixed;
}

h1, h2, h3 {
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 28, "WONK" 1;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

.skip {
  position: absolute; left: -9999px;
  background: var(--turmeric); color: var(--chalk);
  padding: .75rem 1rem; border-radius: 4px; font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 99; }

:where(a, button, input, select):focus-visible {
  outline: 3px solid var(--turmeric);
  outline-offset: 3px;
}

/* ── Bar ─────────────────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .85rem var(--pad);
  background: rgba(255, 250, 242, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.mark {
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.mark-y { color: var(--turmeric-ink); }
.mark-rest { color: var(--chalk); }

.bar-cta {
  font-size: .875rem; font-weight: 700; text-decoration: none;
  padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--rule);
  transition: background .18s ease, border-color .18s ease;
  /*
    Never let the only call to action break across lines. On a phone this
    wrapped to three — "Start / your / store" — inside a pill sized for one,
    which reads as a broken button rather than a deliberate one. It is the
    page's sole CTA, so that is the worst element on it to look broken.
  */
  white-space: nowrap;
}

/*
  On the narrowest phones a nowrap label would instead widen the header and push
  the page into sideways scrolling — trading one bug for a worse one. Below this
  breakpoint the label shortens instead.

  The markup keeps the full "Start your store" for screen readers and for every
  wider viewport; only the rendered text changes. font-size:0 on the parent hides
  the original without display:none, which would take it from the a11y tree too.

  20rem, MEASURED — not guessed, and not guessed twice. Sweeping the header's
  width a pixel at a time puts the full label's true floor at 318px, so every
  mainstream phone — 320, 360, 375 (iPhone SE), 390 (iPhone 13–16), 393 (Pixel),
  412/414 (Android) — has room for "Start your store" and should be shown it.
  Only genuinely sub-320px viewports get the short form. This started at 26rem
  and was shortening the page's only CTA on virtually every device in service.

  The breakpoint sits at 320 rather than 318 on purpose: two pixels is inside
  cross-platform font-rendering variance, so the narrowest standard viewport
  takes the guaranteed-safe path instead of the one that just barely fits.

  Measuring this needs one trick. Forcing font-size past the media query to
  "reveal" the real label leaves ::after in the box too, so you measure BOTH
  strings and get ~197px instead of 135 — a phantom that put the floor at 381px
  on the first attempt. Measure at a viewport where the query is already off and
  shrink the ELEMENT: a viewport media query does not re-trigger on element
  width, so nothing has to be forced and there is no pseudo to contaminate it.
*/
@media (max-width: 20rem) {
  .bar-cta { font-size: 0; padding: .5rem .8rem; }
  .bar-cta::after { content: "Start free"; font-size: .875rem; }
  /*
    Shortening the label alone still left the header 5px wider than a 270px
    viewport, because --pad bottoms out at 1.25rem and the flex gap is a full
    1rem: 20 + wordmark + 16 + pill + 20 exceeds the space before the pill has
    any say. The wordmark is nowrap and is the brand, so the padding gives way
    instead.

    Below 320px is outside WCAG 1.4.10, which asks for reflow at 320 — already
    clean. This is for desktop zoom, where the layout viewport really does go
    this narrow (a 1280px window at 500% is 256px), and a sticky header that
    scrolls sideways is the most visible possible way to fail it.

    The wordmark drops a notch too, because padding alone was not enough: at
    256px it still spilled a pixel, and a pixel is a scrollbar. Measured, not
    estimated — .95rem brings the header to ~251px and leaves margin.
  */
  .bar { padding-inline: .625rem; gap: .5rem; }
  .mark { font-size: .95rem; }
}
.bar-cta:hover { background: var(--board-3); border-color: var(--turmeric-ink); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(2.75rem, 8vw, 6rem) var(--pad) clamp(2rem, 6vw, 4rem);
  max-width: 1220px; margin-inline: auto;
}
@media (min-width: 62rem) {
  /* Asymmetric on purpose: the board gets the smaller column and hangs lower,
     so the composition reads as two overlapping objects rather than a split. */
  .hero { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  .board { margin-top: 3.25rem; }
}

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--turmeric-ink);
  margin-bottom: 1.1rem;
}

h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.35rem);
  font-weight: 800;
  margin-bottom: 1.35rem;
}
h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--turmeric-ink);
}

.lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--chalk-2);
  max-width: 46ch;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 2rem;
}
.hero-note { margin-top: 1rem; font-size: .875rem; color: var(--chalk-3); }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 52px min: this is a phone-first audience, often with a thumb and a crate. */
  min-height: 52px;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .16s ease, background .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--turmeric); color: #241704;
  /* Neutral warm shadow, not an amber glow. A button that emits its own colour
     is the most reliable visual tell of a crypto or dropshipping template, and
     it read as muddy anyway once the ground went from near-black to cream —
     amber light on amber paper has nothing to lift off. */
  box-shadow: 0 10px 22px -12px rgba(120, 68, 12, .45);
}
.btn-primary:hover { background: #ffb020; }

/* `background: transparent` is load-bearing, not tidiness. Without it a
   <button class="btn btn-ghost"> keeps the user agent's `buttonface` grey
   (measured: rgb(240,240,240)) while `color` is chalk (rgb(245,240,227)) —
   near-white text on near-white, i.e. an invisible label. Only the :hover rule
   below set a background, so the button READ CORRECTLY the instant a mouse
   touched it, which is why this survived on the live vendor console at
   /account/ and on the marketing page. Anchors styled .btn-ghost were never
   affected, since only <button> gets a UA background — so it looked fine
   wherever it happened to be a link. */
.btn-ghost { background: transparent; border-color: var(--rule); color: var(--chalk); }
.btn-ghost:hover { background: var(--board-2); border-color: var(--chalk-3); }

.btn-wide { width: 100%; margin-top: .5rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── The board ───────────────────────────────────────────────────────── */

.board {
  margin: 0;
  background: var(--board-2);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  /* A slight tilt so it sits on the page like an object, not a panel. */
  transform: rotate(-0.6deg);
}
@media (max-width: 62rem) { .board { transform: none; } }

/*
  The header carries the storefront's own gradient. That is the whole reason
  this page went light: the shop this product builds for a vendor is warm
  orange, so the rate card on the page selling it should be recognisably the
  same object, not a monochrome cousin.
*/
.board-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem .95rem;
  background: linear-gradient(150deg, #f59e0b 0%, #ea7c0b 55%, #d2600a 100%);
  color: #fff;
}
.board-title {
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-weight: 800; font-size: 1.3rem;
}
/* White on the gradient's darkest stop is ~4.7:1; the leaf ink underneath it
   would have been ~1.4:1 and invisible. */
.board-date { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.92); }

.board-table { width: 100%; border-collapse: collapse; }
.board-table th {
  text-align: left;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--chalk-3);
  padding: .7rem 1.25rem .5rem;
}
.board-table td {
  padding: .58rem 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .95rem;
}
.board-table tbody tr:hover { background: #fff8ec; }

/*
  Produce thumbnails. Emoji in a tinted disc rather than photographs, for one
  hard reason and one soft one: the CSP is img-src 'self' data:, so a remote
  photo simply will not load, and six product photos would outweigh the entire
  rest of the page on the mobile data this audience is actually browsing on.

  Each disc is tinted toward its own vegetable, so the column reads as colour
  even before the emoji resolve — and it still reads if a device has no glyph
  for one of them. 🫚 (ginger) is Unicode 15 and the most likely to be missing;
  the disc carries the colour on its own if so.

  Swapping in real photographs later: put them in site/ and replace the span
  with <img class="pic" src="/shots/tomato.webp" alt="" width="34" height="34">.
  Keep alt="" — the item name is right beside it, so the image is decorative
  and a screen reader announcing "tomato tomato" is worse than silence.
*/
.pic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex: none;
  margin-right: .6rem;
  border-radius: 9px;
  font-size: 1.15rem; line-height: 1;
  background: #fff1dc;
  box-shadow: inset 0 0 0 1px rgba(36,22,6,.06);
}
.p-tomato { background: #fee2e2; }
.p-onion  { background: #f3e8ff; }
.p-potato { background: #fef3c7; }
.p-chilli { background: #dcfce7; }
.p-herb   { background: #d1fae5; }
.p-ginger { background: #ffedd5; }

/* Aligned with inline-block rather than by making the cell a flex container.
   `display: flex` on a <td> takes it out of the table layout algorithm, and
   the four columns stop agreeing on their widths — the fix would have broken
   the alignment that makes this read as a rate card. */
.pic { vertical-align: middle; }
.item { display: inline-block; vertical-align: middle; }

.vern {
  display: block;
  font-size: .8rem; color: var(--chalk-3);
  /* The real product carries Telugu and Hindi names. Showing them is not
     decoration — it is the detail that tells a Hyderabad trader this was built
     for their market and not translated into it.

     Named system faces first, because NO Telugu webfont is loadable here — the
     CSP allows fonts only from fonts.gstatic.com and the linked URL requests
     Fraunces and Karla, neither of which has Telugu coverage. So this text is
     rendered by whatever the device has, and naming the good ones beats
     whatever the generic fallback picks.

     The line-height floor is not cosmetic: Telugu stacks vowel signs above and
     below the base glyph, so it needs materially more vertical room than Latin
     at the same size. At the page's tighter leading the marks collide with the
     row above. Never put this text in a fixed-height box. */
  font-family: "Noto Sans Telugu", Gautami, "Telugu Sangam MN", "Nirmala UI", sans-serif;
  line-height: 1.75;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.02rem;
}
th.num { text-align: right; }
.rate-2 { color: var(--turmeric-ink); }

/* At phone widths the four columns plus 1.25rem gutters overflowed the board by
   21px, and the board clips — so the Hotel rate, one of the two numbers the
   whole page is about, was cut off. Measured at 375px, which is the width most
   of this audience will actually use. Tighten the gutters and let the item
   column take the squeeze; the numerals stay full size, because they are the
   content. */
@media (max-width: 26rem) {
  .board-head, .board-foot { padding-inline: .85rem; }
  .board-table th, .board-table td { padding-inline: .85rem; }
  .board-table td:first-child { padding-right: .35rem; }
  .board-table th:first-child { padding-right: .35rem; }
  .board-table td { font-size: .9rem; }
  .vern { font-size: .74rem; }
}

.board-foot {
  padding: .85rem 1.25rem 1.05rem;
  border-top: 1px dashed var(--rule);
  font-size: .82rem; color: var(--chalk-3);
  display: flex; align-items: center; gap: .5rem;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 0 rgba(22,163,74,.55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/*
  The rates board scrolls inside its own card, so the PAGE never scrolls
  sideways.

  Confirmed on a 302px viewport: the HOTEL column sat past the right edge and
  the whole document scrolled horizontally — which on a phone reads as an
  unfinished page. `.board-table` is `width: 100%`, but a table cannot shrink
  below its intrinsic minimum content width; four columns, an ITEM cell carrying
  both English and Telugu, and 2.5rem of horizontal padding per cell exceed the
  viewport, so it overflows instead. The existing padding-tightening media query
  above was treating that symptom.

  Contained here rather than fixed by dropping a column: SHOP and HOTEL side by
  side is the point of the card — it shows the tier pricing that the product
  exists to manage. Losing HOTEL to save width would remove the demonstration.

  overscroll-behavior-inline stops a swipe that reaches the table's end from
  chaining into a page-level gesture, which on iOS otherwise triggers back-nav.
*/
.board {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* ── Sections ────────────────────────────────────────────────────────── */

section { padding-inline: var(--pad); }

.section-kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--leaf-ink);
  margin-bottom: .9rem;
}

h2 {
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.85rem);
  font-weight: 800;
  margin-bottom: 2.25rem;
  max-width: 22ch;
}

.pitch, .features, .apps, .price, .signup {
  max-width: 1120px; margin-inline: auto;
  padding-block: clamp(3.25rem, 8vw, 6rem);
  border-top: 1px solid var(--rule-soft);
}

/*
  `min(Xrem, 100%)` rather than a bare `Xrem` in every auto-fit minmax below.

  A bare minimum is a FLOOR the track cannot go under, so on a viewport
  narrower than it the track keeps its width and punches straight out of its
  container — the grid stops being responsive at exactly the width where that
  matters most. Measured here: at a 280px viewport `.feat-list` held a 272px
  track inside a 240px container and pushed the whole document 12px sideways.
  `min(…, 100%)` makes the floor yield to the container instead.

  This was the last page-level horizontal scroll. The rates board needed the
  opposite treatment (contained with overflow-x, because its columns carry
  meaning and must not be squeezed); these cards are just text and should
  reflow. Same symptom, two different correct answers.
*/
.pitch-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.pitch-step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .45rem; }
.pitch-step p { color: var(--chalk-2); font-size: .96rem; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: .9rem;
  border-radius: 50%;
  border: 1px solid var(--turmeric); color: var(--turmeric-ink);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── Showcase: the admin, rebuilt in markup ──────────────────────────────
   These panels imitate the REAL admin console, so they carry their own
   palette and do not inherit the marketing page's. That is deliberate: the
   whole job of this section is to look like the product rather than like the
   page selling it, and a screenshot recoloured to match its brochure is a
   screenshot nobody believes.

   Every panel scrolls INSIDE ITSELF on a narrow screen (see .ui) rather than
   widening the document. Learned the hard way — twice — in Phase 1.
   ─────────────────────────────────────────────────────────────────────── */

.showcase { padding-block: clamp(3.5rem, 9vw, 6rem); max-width: 1120px; margin-inline: auto; }
.showcase-lede {
  max-width: 46ch; margin-top: .9rem;
  color: var(--chalk-2); font-size: 1.02rem;
}
.showcase-foot {
  margin-top: 2.25rem; max-width: 60ch;
  color: var(--chalk-3); font-size: .93rem;
}

.panel { margin: 2.5rem 0 0; }
.panel figcaption {
  margin-top: .9rem; max-width: 62ch;
  color: var(--chalk-2); font-size: .93rem; line-height: 1.55;
}
.panel figcaption b { color: var(--chalk); font-weight: 700; }

/* The console frame. Scoped custom properties keep the product's colours from
   leaking into the page and vice versa. */
.ui {
  --ink:      #0f1620;   /* sidebar / console chrome            */
  --ink-2:    #1c2736;
  --paper:    #f7f8fa;   /* content background                  */
  --paper-2:  #ffffff;
  --line:     #e3e7ee;
  --text:     #1d2939;
  --text-2:   #667085;
  --brand:    #f59e0b;
  --good:     #10b981;
  --info:     #3b82f6;
  --violet:   #8b5cf6;

  display: grid;
  grid-template-columns: 12.5rem 1fr;
  min-width: 44rem;              /* below this the console stops being legible */
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  color: var(--text);
  font-family: Karla, system-ui, sans-serif;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
}
.ui-flat { grid-template-columns: 1fr; }

/* The scroll container is the FIGURE, not the console — so a narrow phone
   swipes the panel sideways while the page itself stays put. */
.panel {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: .35rem;
}

/*
  DROP-IN POINT FOR REAL SCREENSHOTS.

  The .ui blocks above are stand-ins. To replace one with an actual capture,
  delete that panel's <div class="ui">…</div> and put an image in its place:

      <img src="/shots/command-center.png" alt="…" width="1383" height="868">

  Nothing else changes — this rule sizes, rounds and shadows it to match, and
  the figure's overflow-x already keeps a wide image from widening the page.
  Give width/height so the page does not jump while it loads, and keep the alt
  text describing what the screen SHOWS rather than naming it.

  The CSP allows img-src 'self', so files under site/ load fine; a remote URL
  will not. Anything captured from a live console must be checked for customer
  names, addresses and phone numbers first — the real activity feed carries all
  three.
*/
/*
  Real screenshots now, not the HTML stand-ins.

  No `min-width` on these. The stand-ins needed one because a rebuilt console
  stops being legible below about 44rem, but a screenshot just gets smaller and
  stays readable enough to convey the shape of the screen — and forcing a
  min-width would make every panel scroll sideways on a phone, which is worse
  than a slightly small picture.

  `height: auto` with width/height attributes on the tag so the browser
  reserves the right box before the image arrives; without that the page jumps
  as each one loads, and there are fourteen of them.
*/
.panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow);
  background: var(--board-2);
}
/*
  A floor on width so the screenshots stay READABLE on a phone.

  Measured at a 270px viewport: without this, a 1200px-wide console capture
  renders at 230x119 — a postage stamp of a dense screen, which proves
  nothing and is worse than the HTML stand-in it replaced, because a stand-in
  reflowed and an image cannot. 34rem keeps the type large enough to make out,
  and `.panel`'s overflow-x means the picture pans inside its own card while
  the page itself stays put. Same contract as the rates board.

  Do not "fix" the sideways scroll on these by removing the min-width; that
  trades a readable picture for an unreadable one.
*/
.panel img { min-width: 34rem; }

/* The phone capture is phone-shaped: it is already legible at life size, and a
   min-width would blow it up to five times that. */
.panel-buyer img, .panel img[src*="mobile"] {
  min-width: 0;
  max-width: 20rem;
  margin-inline: auto;
}
/* Two side-by-side storefronts would need 68rem to pan through. They are here
   to be COMPARED, not read — the point is that they look different — so they
   stay whole on screen. */
.two-up img { min-width: 0; }

/* The two storefronts. Side by side on desktop where the comparison lands in
   one glance, stacked on a phone rather than shrunk to thumbnails. */
.two-up {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.two-up img { width: 100%; }
.panel-two figcaption { max-width: 68ch; }

.ui-side { background: var(--ink); padding: 1rem .75rem; }
.ui-brand {
  display: flex; align-items: center; gap: .5rem;
  color: #fff; font-size: .82rem; font-weight: 700;
  padding: 0 .35rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ui-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand), #ea580c);
  color: #1a1200; font-size: .78rem; font-weight: 800;
}
.ui-nav { list-style: none; margin: .8rem 0 0; padding: 0; }
.ui-nav li {
  padding: .42rem .55rem; border-radius: 7px;
  color: rgba(255,255,255,.62); font-size: .8rem; font-weight: 600;
}
.ui-nav li.on {
  background: linear-gradient(100deg, rgba(245,158,11,.22), rgba(245,158,11,.04));
  color: #fbbf24;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.28);
}

.ui-main { padding: 1rem 1.1rem 1.2rem; }

.ui-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ui-tile {
  background: var(--paper-2); border: 1px solid var(--line);
  border-top: 3px solid var(--good);
  border-radius: 10px; padding: .6rem .7rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.ui-tile.t-amber { border-top-color: var(--brand); }
.ui-tile.t-teal  { border-top-color: #14b8a6; }
.ui-tile-k { font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.ui-tile-v { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.ui-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .8rem; }
.ui-pipe-col {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 10px; padding: .5rem; min-height: 5.4rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.ui-pipe-h {
  font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.ui-pipe-h b { font-variant-numeric: tabular-nums; }
.p-pend { color: #b45309; } .p-acc { color: var(--info); }
.p-ship { color: var(--violet); } .p-done { color: #047857; }
.ui-chip {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: .28rem .4rem; font-size: .68rem; color: var(--text);
}

.ui-feed { margin-top: .8rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; }
.ui-feed p { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--text-2); padding: .22rem 0; }
.ui-feed b { color: var(--text); font-weight: 700; }
.ui-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--good); flex: none; }
.ui-time { margin-left: auto; font-variant-numeric: tabular-nums; font-size: .68rem; }

.ui-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem .9rem; background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.ui-h { font-size: .95rem; font-weight: 800; }
.ui-h i { font-style: normal; font-weight: 500; color: var(--text-2); font-size: .76rem; margin-left: .45rem; }
.ui-pill { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-radius: 999px; padding: .25rem .6rem; font-size: .72rem; font-weight: 600; }
.ui-tabs { display: flex; gap: .3rem; }
.ui-tabs b {
  font-size: .74rem; font-weight: 700; color: var(--text-2);
  padding: .3rem .6rem; border-radius: 7px; border: 1px solid transparent;
}
.ui-tabs b.on { background: var(--paper-2); color: var(--text); border-color: var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.ui-tabs i { font-style: normal; opacity: .65; margin-left: .3rem; }

.ui-tbl { width: 100%; border-collapse: collapse; background: var(--paper-2); }
.ui-tbl th {
  text-align: left; font-size: .62rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-2);
  padding: .55rem .9rem; border-bottom: 1px solid var(--line);
}
.ui-tbl td { padding: .5rem .9rem; border-bottom: 1px solid var(--line); font-size: .82rem; }
.ui-tbl tr:last-child td { border-bottom: 0; }
.ui-tbl .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.ui-tbl .r i { font-style: normal; font-weight: 500; color: var(--text-2); font-size: .72rem; }
.ui-em { margin-right: .4rem; }
.ui-vern { display: block; font-size: .68rem; color: var(--text-2); }
.ui-slab { display: block; font-size: .64rem; font-weight: 600; color: #047857; }

.ui-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .9rem; }
.ui-stats div { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; }
.ui-stats b { display: block; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ui-stats span { font-size: .66rem; color: var(--text-2); }

.ui-stores { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0 .9rem .9rem; }
.ui-store { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: .65rem .75rem; }
.ui-store-n { font-size: .85rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; }
.ui-live { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; border-radius: 999px; padding: .1rem .45rem; font-size: .62rem; font-weight: 700; }
.ui-store-m { margin-top: .3rem; font-size: .73rem; color: var(--text-2); }
.ui-store-m b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Stories ─────────────────────────────────────────────────────────── */

.stories { padding-block: clamp(3.5rem, 9vw, 6rem); max-width: 900px; margin-inline: auto; }
.story { margin-top: 2.25rem; }
.story-lead {
  border-left: 3px solid var(--turmeric);
  padding-left: clamp(1rem, 3vw, 1.6rem);
}
.story-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--leaf-ink);
}
.story h3 { font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 700; margin: .3rem 0 .55rem; }
.story-body { color: var(--chalk-2); max-width: 62ch; }
.story-facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.story-facts li {
  position: relative; padding-left: 1.35rem;
  color: var(--chalk-2); font-size: .95rem; max-width: 62ch;
}
.story-facts li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--leaf-ink); font-weight: 800;
}
.story-facts b { color: var(--chalk); font-weight: 700; }
.story-see { margin-top: 1.1rem; }
.story-link {
  color: var(--turmeric-ink); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(230,168,73,.4); padding-bottom: 1px;
}
.story-link:hover { border-bottom-color: var(--turmeric-ink); }
.stories-honest {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--chalk-3); font-size: .95rem; max-width: 64ch;
}

@media (max-width: 40rem) {
  .ui-stats, .ui-stores { grid-template-columns: 1fr 1fr; }
}

/* ── Buyer side: the storefront on a phone ───────────────────────────────
   The one place on this page allowed to shout. The real generated storefront
   is saturated orange, so a tasteful desaturated mock of it would misrepresent
   the product to the person deciding whether to buy it.

   No min-width and no internal scroll here: a phone is already phone-width,
   so it fits everywhere and simply centres.
   ─────────────────────────────────────────────────────────────────────── */

/* Column, not row. `display: flex` alone made the figcaption a sibling of the
   phone and stood it up alongside — the caption belongs under its figure. */
.panel-buyer {
  display: flex; flex-direction: column; align-items: center;
  overflow: visible;
}
.panel-buyer figcaption { text-align: center; max-width: 52ch; }

/* Two phones, wrapping to one column on a narrow screen rather than shrinking
   — a phone mock scaled below phone size stops reading as a phone. */
.phone-pair {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  justify-content: center; align-items: flex-start;
}

/* The second tenant's palette. Only the header gradient, the active chips and
   the price colour change — everything else is shared, which is exactly the
   point being demonstrated. */
.phone-green .sf-top { background: linear-gradient(150deg, #10b981 0%, #0d9668 55%, #066b47 100%); }
.phone-green .phone-screen { background: #f4fbf7; }
.phone-green .sf-tiers b.on { color: #066b47; }
.phone-green .sf-search { border-color: #cdeadb; color: #4f8d70; }
.phone-green .sf-cats span { border-color: #cdeadb; color: #3f7a60; }
.phone-green .sf-cats span.on { background: #10b981; border-color: #10b981; color: #fff; }
.phone-green .sf-card { border-color: #cdeadb; box-shadow: 0 2px 5px rgba(16,120,80,.07); }
.phone-green .sf-v { color: #4f8d70; }
.phone-green .sf-price { color: #066b47; }
.phone-green .sf-price i { color: #4f8d70; }
.phone-green .sf-bar { background: #92400e; color: #fde9c8; }

/* The admin console on a phone. Same chrome as the storefront mocks so the
   three read as one family, but the screen inside is the dark-navy console
   palette rather than a storefront. */
.phone-admin .phone-screen { background: #f7f8fa; color: #1d2939; }
.ad-top { background: #0f1620; color: #fff; padding: .85rem .8rem .7rem; }
.ad-back { font-size: .78rem; font-weight: 700; opacity: .75; }
.ad-who { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .82rem; font-weight: 700; }
.ad-nav { display: flex; gap: .35rem; margin-top: .7rem; overflow: hidden; }
.ad-nav b {
  font-size: .68rem; font-weight: 700; white-space: nowrap;
  padding: .3rem .55rem; border-radius: 7px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.6);
}
.ad-nav b.on { background: #1c2736; color: #fff; }

.ad-body { padding: .8rem .75rem .9rem; }
.ad-h { font-size: .92rem; font-weight: 800; }
.ad-h i { font-style: normal; font-weight: 500; color: #667085; font-size: .78rem; }
.ad-chips { display: flex; gap: .28rem; margin-top: .6rem; overflow: hidden; }
.ad-chips span {
  font-size: .66rem; font-weight: 700; white-space: nowrap;
  padding: .25rem .5rem; border-radius: 999px;
  background: #fff; border: 1px solid #e3e7ee; color: #667085;
}
.ad-chips span.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.ad-chips span.dark { background: #1d2939; border-color: #1d2939; color: #fff; }
.ad-chips-2 { margin-top: .35rem; }

.ad-order {
  margin-top: .55rem; padding: .55rem .6rem;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 10px;
}
.ad-ord-top { display: flex; align-items: center; gap: .4rem; }
.ad-id { font-size: .6rem; font-weight: 700; color: #3b82f6; background: #eff6ff; border-radius: 5px; padding: .1rem .3rem; }
.ad-pill { font-size: .6rem; font-weight: 700; color: #1d2939; background: #f2f4f7; border-radius: 999px; padding: .1rem .4rem; }
.ad-ord-who { margin-top: .28rem; font-size: .78rem; font-weight: 700; }
.ad-ord-amt { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-ord-amt i { font-style: normal; font-size: .68rem; font-weight: 500; color: #667085; }

.phone {
  width: 19rem; max-width: 100%;
  padding: .55rem;
  border-radius: 30px;
  background: linear-gradient(160deg, #2c241a, #16110c);
  box-shadow:
    0 30px 70px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-screen {
  border-radius: 24px; overflow: hidden;
  background: #fff8f0;
  font-family: Karla, system-ui, sans-serif;
  color: #2b1a0d;
}

.sf-top {
  /* The storefront's own gradient, not this page's palette. */
  background: linear-gradient(150deg, #f59e0b 0%, #ea7c0b 55%, #d2600a 100%);
  padding: 1rem .9rem .85rem;
  color: #fff;
}
.sf-name { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 1.22rem; letter-spacing: -.01em; }
.sf-sub { font-size: .66rem; opacity: .9; margin-top: .1rem; letter-spacing: .04em; text-transform: uppercase; }
.sf-tiers { display: flex; gap: .3rem; margin-top: .7rem; }
.sf-tiers b {
  font-size: .68rem; font-weight: 700; padding: .28rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff5e6;
}
.sf-tiers b.on { background: #fff; color: #b45309; }

.sf-body { padding: .8rem .75rem .9rem; }
.sf-search {
  background: #fff; border: 1px solid #f3dcc0; border-radius: 9px;
  padding: .48rem .6rem; font-size: .72rem; color: #a97e4e;
}
.sf-cats { display: flex; gap: .28rem; margin-top: .6rem; overflow: hidden; }
.sf-cats span {
  font-size: .66rem; font-weight: 700; padding: .24rem .55rem; border-radius: 999px;
  background: #fff; border: 1px solid #f3dcc0; color: #8a6234; white-space: nowrap;
}
.sf-cats span.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }

.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .65rem; }
.sf-card {
  background: #fff; border: 1px solid #f3dcc0; border-radius: 11px;
  padding: .55rem .5rem; display: flex; flex-direction: column; gap: .08rem;
  box-shadow: 0 2px 5px rgba(180,120,40,.07);
}
.sf-emoji { font-size: 1.35rem; line-height: 1.1; }
.sf-card b { font-size: .8rem; font-weight: 700; }
.sf-v { font-size: .64rem; color: #a97e4e; }
.sf-price {
  margin-top: .25rem; font-size: .95rem; font-weight: 800; color: #c2410c;
  font-variant-numeric: tabular-nums;
}
.sf-price i { font-style: normal; font-size: .64rem; font-weight: 600; color: #a97e4e; }

.sf-bar {
  margin-top: .7rem; text-align: center;
  background: #065f46; color: #d1fae5;
  border-radius: 8px; padding: .38rem; font-size: .68rem; font-weight: 700;
}

.feat-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
/*
  The cards rotate through the produce palette instead of all wearing the same
  green stripe. This is where "vibrant" is actually earned: six identical cards
  in one accent read as a list, six in different accents read as a market
  stall. The cycle is nth-child(6n) so it keeps working when apps.json grows —
  the features are data-driven and their count is not fixed here.
*/
.feat-list li {
  padding: 1.4rem 1.35rem;
  background: var(--board-2);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  border-left: 4px solid var(--leaf);
  box-shadow: 0 10px 26px -20px rgba(120, 68, 12, .5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feat-list li:nth-child(6n + 2) { border-left-color: var(--turmeric); }
.feat-list li:nth-child(6n + 3) { border-left-color: var(--chilli); }
.feat-list li:nth-child(6n + 4) { border-left-color: var(--brinjal); }
.feat-list li:nth-child(6n + 5) { border-left-color: #0284c7; }
.feat-list li:nth-child(6n)     { border-left-color: #db2777; }
.feat-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -20px rgba(120, 68, 12, .6);
}
.feat-list h3 { font-size: 1.06rem; font-weight: 700; margin-bottom: .4rem; }
.feat-list p { color: var(--chalk-2); font-size: .93rem; }

/* ── Apps grid (hidden until there are 2+) ───────────────────────────── */

.app-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.app-card {
  padding: 1.4rem; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--board-2);
}
.app-card h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.app-card p { color: var(--chalk-2); font-size: .92rem; }
.app-status {
  display: inline-block; margin-top: .8rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: .2rem .55rem; border-radius: 999px;
  background: #dcfce7; color: var(--leaf-ink);
}

/* ── Price ───────────────────────────────────────────────────────────── */

.price { max-width: 60rem; margin-inline: auto; }
.price-lede { max-width: 52ch; margin-top: .9rem; color: var(--chalk-2); }

/* Two options, not a tier ladder. The competitor this was benchmarked against
   runs four tiers plus an enterprise tier plus seventeen paid add-ons; the
   whole point here is that there is nothing to compare and nothing to unlock,
   so the layout must not look like a comparison table. */
.price-grid {
  display: grid; gap: 1rem; margin-top: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  align-items: start;
}
.plan {
  position: relative;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--board-2);
  box-shadow: 0 10px 26px -20px rgba(120, 68, 12, .5);
}
.plan-best {
  border-color: var(--turmeric);
  border-width: 2px;
  background: linear-gradient(165deg, #ffffff, #fff4e2);
  box-shadow: var(--shadow);
}
.plan-flag {
  position: absolute; top: -.72rem; left: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--leaf); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px;
}
.plan-name {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chalk-3);
}
.plan-amount {
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 900;
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: .35rem 0 .5rem;
}
.plan-amount .per { font-size: .85rem; font-weight: 500; color: var(--chalk-3); font-family: Karla, sans-serif; }
/* The setup fee sits directly under the headline number, in the reading path,
   not in a footnote. A trader who meets it first on the phone has learned
   something about us that no feature list recovers from. */
.plan-setup { color: var(--turmeric-ink); font-size: .92rem; font-weight: 600; }
.plan-year {
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px dashed var(--rule);
  font-size: .9rem; color: var(--chalk-2);
}
.plan-year b { color: var(--chalk); font-variant-numeric: tabular-nums; }
.plan .btn { margin-top: 1rem; }
/* Sits exactly where .plan-setup sits on the monthly card, so both cards read
   the same way: the number, then immediately the truth about the number. */
.plan-billed { color: var(--chalk-2); font-size: .92rem; }
.plan-billed b { color: var(--chalk); font-weight: 700; font-variant-numeric: tabular-nums; }

.payback {
  margin-top: 1.75rem; padding: 1.25rem 1.35rem;
  border-left: 3px solid var(--leaf);
  background: var(--board-3);
  border-radius: 0 12px 12px 0;
}
.payback h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .5rem; }
.payback p { color: var(--chalk-2); font-size: .96rem; max-width: 60ch; }
.payback p + p { margin-top: .7rem; }
.payback b { color: var(--chalk); font-weight: 700; font-variant-numeric: tabular-nums; }

.buildlist { list-style: none; margin: 0 0 .7rem; padding: 0 1.1rem; display: grid; gap: .45rem; }
.buildlist li { position: relative; padding-left: 1.5rem; color: var(--chalk-2); font-size: .94rem; }
.buildlist li::before {
  content: "+"; position: absolute; left: 0; top: -.05em;
  color: var(--leaf-ink); font-weight: 800; font-size: 1.05rem;
}
.buildlist b { color: var(--chalk); font-weight: 700; }

.price-nofee {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--chalk-2); font-size: .95rem; font-weight: 600;
}

/* ── The problem ─────────────────────────────────────────────────────── */

.problem { max-width: 56rem; margin-inline: auto; }
.prob-list {
  list-style: none; margin: 1.9rem 0 0; padding: 0;
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.prob-list li {
  position: relative;
  padding: 1.1rem 1.15rem 1.1rem 3.4rem;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--board-2);
  color: var(--chalk-2);
  font-size: .95rem;
}
.prob-list b { display: block; color: var(--chalk); font-weight: 700; margin-bottom: .18rem; }
.prob-i {
  position: absolute; left: 1.05rem; top: 1.05rem;
  font-size: 1.25rem; line-height: 1;
}
/* The marketplace card is the one that costs money, so it is the one that is
   marked. Chilli rather than the neutral rule — this is the objection the
   whole product answers. */
.prob-list li:last-child {
  border-color: rgba(224,64,44,.35);
  background: #fff5f3;
}

/* ── Talk to a person ────────────────────────────────────────────────────
   WhatsApp green is used verbatim (#25D366) rather than recoloured to the
   page palette. It is the one place on this page where matching the brand
   would be the wrong call: the button is recognised as WhatsApp before it is
   read, and that recognition is the entire reason it converts for an audience
   that would not fill in a form.
   ─────────────────────────────────────────────────────────────────────── */

.contact-slot { margin: 0 0 1.9rem; }
.contact-or { color: var(--chalk-2); font-size: .95rem; margin-bottom: .6rem; }
.contact-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-wa {
  background: #25D366; color: #062d14;
  box-shadow: 0 10px 22px -14px rgba(37, 211, 102, .9);
}
.btn-wa:hover { background: #1fbe5b; }

/*
  The floating button. `position: fixed` with `right`, never a negative offset
  or a transform that could push past the viewport — a fixed element that
  overflows is the one kind this page's overflow sweep would NOT catch, since
  fixed elements are measured against the viewport rather than the document.

  Bottom-left is deliberate. Bottom-right is where a phone's own back gesture
  and most browsers' UI live, and it is also where the page's own primary CTA
  scrolls past; sitting left keeps both usable.
*/
.fab {
  position: fixed;
  left: 1rem; bottom: 1rem;
  z-index: 40;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: #25D366; color: #062d14;
  font-weight: 800; font-size: .9rem; text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(6, 45, 20, .5), 0 0 0 1px rgba(6, 45, 20, .08);
  transition: transform .16s ease, box-shadow .18s ease;
}
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: translateY(0); }

/* On the narrowest phones the label is dropped and the mark carries it, so the
   button never grows wide enough to sit over the content it floats above.
   Same reasoning as the header CTA, and the same measured 20rem threshold. */
@media (max-width: 20rem) {
  .fab span { display: none; }
  .fab { padding: .7rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fab:hover { transform: none; }
}

/* ── Everything included ─────────────────────────────────────────────────
   Deliberately dense. This section IS the counter-argument to a competitor's
   add-on price sheet, so it has to look like an inventory rather than like a
   marketing grid of six friendly cards.
   ─────────────────────────────────────────────────────────────────────── */

.included { max-width: 72rem; margin-inline: auto; }
.included-lede { max-width: 54ch; margin-top: .9rem; color: var(--chalk-2); }

.inc-grid {
  display: grid; gap: .85rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  align-items: start;
}
.inc-card {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--board-2);
  box-shadow: 0 8px 22px -20px rgba(120, 68, 12, .5);
}
.inc-card h3 {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--turmeric-ink);
  margin-bottom: .7rem;
}
.inc-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.inc-card li {
  position: relative; padding-left: 1.25rem;
  color: var(--chalk-2); font-size: .9rem; line-height: 1.5;
}
/* A tick, drawn rather than a glyph, so it keeps its weight at this size and
   does not depend on an emoji font being present. */
.inc-card li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: .5rem; height: .28rem;
  border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf);
  transform: rotate(-45deg);
}
.inc-card b { color: var(--chalk); font-weight: 700; }

/* The isolation card is the one nobody else in this market can copy cheaply,
   so it is the one that is marked. */
.inc-card-key {
  border-color: var(--turmeric);
  background: linear-gradient(165deg, #ffffff, #fff4e2);
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { max-width: 48rem; margin-inline: auto; }
.qa {
  margin-top: .6rem;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--board-2);
  overflow: hidden;
}
.qa summary {
  padding: .95rem 3rem .95rem 1.1rem;
  font-weight: 700; font-size: 1rem;
  cursor: pointer; position: relative;
  list-style: none;              /* Firefox */
}
.qa summary::-webkit-details-marker { display: none; }
/* A drawn chevron rather than the UA triangle, so it can be positioned and can
   rotate. ::after on the summary, not a separate element, so the whole row
   stays one hit target. */
.qa summary::after {
  content: "";
  position: absolute; right: 1.15rem; top: 50%;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--turmeric-ink);
  border-bottom: 2px solid var(--turmeric-ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa summary:hover { background: #fff8ec; }
.qa[open] summary { background: #fff8ec; }
.qa p {
  padding: 0 1.1rem 1.05rem;
  color: var(--chalk-2); font-size: .96rem; max-width: 62ch;
}
.price-includes { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: .6rem; }
.price-includes li { position: relative; padding-left: 1.6rem; color: var(--chalk-2); font-size: .95rem; }
.price-includes li::before {
  content: "";
  position: absolute; left: 0; top: .52em;
  width: .62rem; height: .34rem;
  border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf);
  transform: rotate(-45deg);
}

/* ── Signup ──────────────────────────────────────────────────────────── */

.signup-inner { max-width: 34rem; }
.signup-lede { color: var(--chalk-2); margin-bottom: 2rem; }

.field { margin-bottom: 1.15rem; }
label {
  display: block; font-size: .9rem; font-weight: 700;
  margin-bottom: .4rem;
}
.hint { font-weight: 400; color: var(--chalk-3); font-size: .82rem; }

input, select {
  width: 100%;
  min-height: 52px;
  padding: .75rem .9rem;
  font: inherit;
  color: var(--chalk);
  background: var(--board-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: border-color .16s ease, background .16s ease;
}
input::placeholder { color: var(--chalk-3); }
input:hover, select:hover { border-color: var(--chalk-3); }
input[aria-invalid="true"] { border-color: var(--chilli-ink); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--chalk-3) 50%),
                    linear-gradient(135deg, var(--chalk-3) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.err { color: var(--chilli-ink); font-size: .84rem; margin-top: .35rem; min-height: 0; }
.err:empty { display: none; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   display:none fields specifically. aria-hidden + tabindex keeps it away from
   assistive tech and keyboard users. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 1rem; font-weight: 500; }
.form-status.ok  { color: var(--leaf-ink); }
.form-status.bad { color: var(--chilli-ink); }

.fineprint { margin-top: 1.25rem; font-size: .84rem; color: var(--chalk-3); }

.done {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--leaf);
  border-radius: 14px;
  background: rgba(22,163,74,.07);
}
.done h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.done p { color: var(--chalk-2); }

/* ── Foot ────────────────────────────────────────────────────────────── */

.foot {
  padding: 2.5rem var(--pad) 3.5rem;
  border-top: 1px solid var(--rule-soft);
  max-width: 1120px; margin-inline: auto;
}
.foot-mark {
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 800; font-size: 1.05rem;
}
.foot-line { color: var(--chalk-3); font-size: .9rem; margin-top: .25rem; }

/* ── Entrance. One orchestrated load, not scattered micro-interactions. ─ */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .board {
    animation: rise .75s cubic-bezier(.2,.7,.3,1) backwards;
  }
  .hero-copy > :nth-child(1) { animation-delay: .04s; }
  .hero-copy > :nth-child(2) { animation-delay: .10s; }
  .hero-copy > :nth-child(3) { animation-delay: .17s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-copy > :nth-child(5) { animation-delay: .30s; }
  .board { animation-delay: .22s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .board { animation-name: rise-board; }
  @keyframes rise-board {
    from { opacity: 0; transform: translateY(20px) rotate(-0.6deg); }
    to   { opacity: 1; transform: translateY(0) rotate(-0.6deg); }
  }
}