/* ==========================================================================
   Miss Markdown marketing site
   Warm Cream ground, Ink Navy structure, Grocery Red used sparingly.

   Contrast notes (measured, not assumed; every pairing the site actually
   renders, on both cream surfaces):
     Ink Navy    on Warm Cream ...... 15.5:1  AAA
     Warm Cream  on Ink Navy ........ 15.5:1  AAA
     Red deep    on Warm Cream ....... 6.0:1  AA   <- link text
     Red deep    on Cream Deep ....... 5.5:1  AA   <- link text
     White       on Grocery Red ...... 5.1:1  AA   <- button labels
     Navy muted  on Warm Cream ....... 5.3:1  AA
     Navy muted  on Cream Deep ....... 4.8:1  AA
     Grocery Red on Warm Cream ....... 4.5:1        accent use only
     Grocery Red on Cream Deep ....... 4.1:1  FAILS. Never text; the strike,
                                              dots, rules and button fills only.
     Grocery Red on Ink Navy ......... 3.3:1  FAILS. Decoration ONLY.
   ========================================================================== */

:root {
  --ink: #0f1d2d;
  --ink-soft: #22344a;
  /*
   * Darkened from #5a6a7c. It cleared 4.5:1 on Warm Cream but landed at
   * 4.48:1 on Cream Deep, where the phone captions in Product Preview sit, and
   * deeper surface and failed by two hundredths. Now 4.8:1 there and 5.3:1 on
   * cream, while staying well clear of --ink-soft so muted copy still reads
   * as muted.
   */
  --ink-muted: #566574;
  --red: #c93a21;
  --red-deep: #a92e18;
  --cream: #f7f1e6;
  --cream-deep: #efe6d6;
  --cream-edge: #e2d6c0;
  --rule: #d9cdb6;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(15, 29, 45, 0.06), 0 2px 8px rgba(15, 29, 45, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 29, 45, 0.07), 0 14px 34px rgba(15, 29, 45, 0.09);
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  /*
   * Marketing body copy: 18px on a phone rising to 19px from roughly 780px up.
   * The site's artwork is large and confident and 17px read as interface text
   * sitting inside a marketing canvas. Fluid rather than stepped so there is
   * no jump at a breakpoint.
   */
  font-size: clamp(1.125rem, 1.05rem + 0.28vw, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; }
/*
 * Deliberately NOT text-wrap: balance on headings. It was tried and rejected:
 * balance minimises the longest line, which on these headings traded a working
 * break for a short middle line ("behind better / buying decisions"). The
 * existing breaks read better, so they stay.
 */

/* Stops a lone word on the final line of supporting copy and disclosures. */
.lede, .cta-fineprint, .diagram-note, .worth-note, .preview-note,
.households-legal, .hero-support, .note-quote, .hero-para, .hero-status,
.stage p, .chip-card p, .cred-grid p, .insight-card p, .cred-note,
.memory-intro, .footer-line, .page-lead, .legal-intro { text-wrap: pretty; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

/*
 * Link text uses --red-deep, not --red. Grocery Red is 4.13:1 on Cream Deep
 * (fails) and only 4.54:1 on Warm Cream, which is passing by a hair and would
 * break on any future surface tweak. --red-deep is already in the palette and
 * gives 6.0:1 / 5.5:1 on the two cream surfaces. Grocery Red keeps its accent
 * role (button fills, the rising strike, rules, dots), where it is never
 * asked to be readable text.
 *
 * Hover differentiates by underline weight rather than colour, since the
 * resting state now occupies the darker red.
 */
a { color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.nowrap { white-space: nowrap; }

.visually-hidden-label {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--ink); color: var(--cream); padding: 0.7rem 1.2rem;
  z-index: 100; text-decoration: none; border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--cream); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.75rem 1.6rem;
  font-family: var(--serif); font-size: 1.09rem; font-weight: 700; letter-spacing: 0.01em;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--red-deep); color: #fff; transform: translateY(-1px); }
.btn-sm { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 1.03rem; }
.btn-lg { min-height: 58px; padding: 0.95rem 2.3rem; font-size: 1.19rem; }

.link-arrow {
  position: relative;
  font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
/* Expands the target to ~48px without moving the underline off the text. */
.link-arrow::before { content: ""; position: absolute; inset: -9px -6px; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { border-bottom-color: transparent; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 241, 230, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 82px; }
.header-logo { display: block; margin-right: auto; line-height: 0; }
.header-logo svg { width: clamp(148px, 20vw, 190px); }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.site-nav ul {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  color: var(--ink); text-decoration: none; font-size: 1.09rem;
  padding: 0.4rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--red); color: var(--ink); }

/*
 * The header "Coming Soon" button is an <a> inside .site-nav, so ".site-nav a"
 * (0,1,1) was beating ".btn-primary" (0,1,0) and painting its label Ink Navy
 * on Grocery Red at 3.33:1, and visibly different from the identical button in
 * the hero, which was white. Restores the intended white label at 5.11:1.
 */
.site-nav .btn-primary,
.site-nav .btn-primary:hover { color: #fff; }

.nav-toggle, .nav-button { display: none; }

/* ------------------------------------------------------------------ hero */

/*
 * 42/58 split. The left column aligns to the site's normal content width; the
 * right column runs past it to the viewport edge, so the artwork bleeds
 * rather than sitting in a card.
 *
 * The left padding is the trick: it matches whatever the centred .wrap would
 * have used, so the headline lines up with every section below it while the
 * grid itself spans the full width.
 */
.hero { position: relative; overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.75rem);
  min-height: clamp(500px, 60vh, 700px);
  padding-left: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
}

.hero-copy { padding-block: clamp(2.75rem, 6vw, 4.75rem); max-width: 36rem; }

/* Sized to the 42% column, not the viewport: the headline must break at the
   authored <br> ("The real worth" / "of what you buy.") rather than mid-phrase. */
.hero-title { font-size: clamp(2.2rem, 4.1vw, 3.7rem); line-height: 1.05; margin-bottom: 0.55rem; }
.hero-title em { font-style: italic; color: var(--red); }
.hero-support {
  font-size: clamp(1.25rem, 2.3vw, 1.55rem); font-weight: 700; line-height: 1.4;
  margin-bottom: 1.3rem;
}
.hero-para { color: var(--ink-soft); font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.24rem); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.7rem; }
.hero-status {
  margin-top: 1.7rem; font-size: 1.03rem; color: var(--ink-muted);
  display: flex; align-items: center; gap: 0.5rem;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }

/* The artwork: stretches the full height of the hero and bleeds right. */
.hero-visual { margin: 0; align-self: stretch; position: relative; min-height: 100%; }
.hero-visual picture { display: block; height: 100%; }
.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Favours the notebook, which sits slightly right of the frame's centre. */
  object-position: 55% 49%;
}

/*
 * A soft cream wash along the left edge so the photograph dissolves into the
 * page instead of butting up against the copy with a hard vertical seam.
 */
.hero-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to right,
    var(--cream) 0%,
    rgba(247, 241, 230, 0.7) 4%,
    rgba(247, 241, 230, 0) 18%
  );
}

/* Shown only until the artwork is installed. */
.hero-visual-pending {
  display: grid; place-items: center; min-height: 340px;
  background: repeating-linear-gradient(
    45deg, var(--cream-deep), var(--cream-deep) 12px, var(--cream) 12px, var(--cream) 24px
  );
  border-left: 1px solid var(--rule);
  color: var(--ink-muted); text-align: center; font-size: 0.95rem;
}
.hero-visual-pending code { font-family: var(--mono); font-size: 0.85rem; color: var(--ink); }

/* --------------------------------------------------------------- sections */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
/*
 * Pinned in rem, not em. These containers used to size off the body font, so
 * growing the body would have silently rewrapped every section heading, which is the
 * one thing this pass must not do. 36rem is the width they had at the old
 * 17px body, so approved heading line breaks are unchanged.
 */
.section-heading { max-width: 36rem; margin-bottom: 2.2rem; }
.section-heading.is-center { margin-inline: auto; text-align: center; }
.section-heading h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
/* A section introduction, not a card description: clearly above body copy. */
.section-heading .lede {
  color: var(--ink-soft); margin-top: 0.7rem; line-height: 1.55;
  font-size: clamp(1.15rem, 1.05rem + 0.42vw, 1.28rem);
}
.section-heading.is-light h2 { color: var(--cream); }
.section-heading.is-light .lede { color: var(--cream-deep); }
.section-heading.is-light .eyebrow { color: var(--cream-deep); }

/*
 * Section labels. At 0.76rem in a mono face with wide tracking these read as
 * decoration you have to squint at, which is the wrong job. They are the
 * editorial label that tells you what the section is. Bigger, bolder, and a
 * shade darker, with the tracking eased slightly because letter-spacing that
 * wide fights legibility at small sizes. Still clearly secondary to the h2.
 */
.eyebrow {
  font-family: var(--mono); font-size: 0.905rem; font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.85rem;
}
.strike-rule { display: block; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
.grid-2 .section-heading { margin-bottom: 0; }

/* smarter memory */
.section-memory { border-top: 1px solid var(--rule); }
.memory-intro { font-weight: 700; font-size: 1.12rem; margin-bottom: 0.9rem; }
.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  position: relative; padding: 0.68rem 0 0.68rem 1.75rem;
  border-bottom: 1px dashed var(--rule); color: var(--ink-soft);
}
/*
 * The list tick is the same editorial stroke, not a rotated rectangle. It was
 * literally a 10x2 box turned 14 degrees, which is why it read as a dash. The
 * shape now comes from the shared strike silhouette, inlined so it costs no
 * request, and stays decorative: no element, no alt, nothing focusable.
 */
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 15px; height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2,11.6C3,11.39 5.67,10.65 8,10.32C10.33,10 13,10 16,9.65C19,9.3 22.33,8.57 26,8.23C29.67,7.89 34,7.92 38,7.61C42,7.31 46,6.65 50,6.4C54,6.15 58,6.28 62,6.09C66,5.9 70.33,5.39 74,5.24C77.67,5.09 81.17,5.25 84,5.2C86.83,5.15 89,4.97 91,4.94C93,4.92 94.73,5.01 96,5.05C97.27,5.09 98.17,5.15 98.6,5.18C99.05,5.22 99.35,5.28 99.5,5.34C99.3,5.4 99,5.44 98.6,5.43C98.17,5.5 97.27,5.64 96,5.85C94.73,6.06 93,6.4 91,6.66C89,6.92 86.83,7.05 84,7.4C81.17,7.75 77.67,8.36 74,8.74C70.33,9.12 66,9.26 62,9.67C58,10.08 54,10.81 50,11.2C46,11.59 42,11.61 38,12.01C34,12.41 29.67,13.17 26,13.57C22.33,13.97 19,14 16,14.39C13,14.78 10.33,15.57 8,15.9C5.67,16.24 3,16.32 2,16.4C1.0,16.55 0.15,15.4 0.2,14.0C0.25,12.8 0.9,11.85 2,11.6Z' fill='%23c93a21'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* how it works */
.section-how { background: var(--cream-deep); border-block: 1px solid var(--rule); }
.stages {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem);
}
.stage {
  position: relative; background: var(--cream); border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg); padding: 1.9rem 1.6rem 1.7rem;
  box-shadow: var(--shadow-sm);
}
.stage-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--cream); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 0.9rem;
}
/* Left at 22.4px: already the right size, and the reference the other card
   titles were raised toward rather than a target to chase. */
.stage h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.stage p { color: var(--ink-soft); margin: 0; font-size: 1.09rem; line-height: 1.55; }
.stage-seal { margin-top: 1.4rem; display: flex; justify-content: flex-start; }

/* worth knowing */
.section-worth { background: var(--ink); color: var(--cream); }
/*
 * The live head. It presents the section below 861px and is taken out of view
 * above it (see the swap rules further down). Centred either way, on the same
 * axis the artwork is composed on.
 *
 * The standalone seal that used to sit beside this heading is gone: the
 * approved artwork carries the seal inside it, so keeping both put the
 * identical mark on screen twice, a few hundred pixels apart. The seal
 * component and its How It Works usage are untouched.
 */
.worth-head { margin-bottom: 0; }

/*
 * The production seal is a square raster with a transparent exterior. Size is
 * driven by the width attribute the component emits; height stays auto so the
 * mark can never be squashed into an ellipse if a container constrains it.
 */
.worth-seal-img { height: auto; max-width: 100%; }

/*
 * The insights artwork. It arrives with its own designed boundary: a cream
 * card panel, its own seal and headline, its own navy ground. So it gets no
 * frame, no border, no shadow and no surrounding card. Any of those would be a
 * second boundary competing with the one already drawn into the image. Its
 * navy edge is a little deeper than --ink, so it reads as a soft panel on the
 * section rather than a hard-edged card.
 *
 * It runs wider than .wrap on purpose. The artwork is 1536px across and its
 * card copy is around 20px at that size, so at text-column width the copy
 * lands near 14px: legible, but small for the one element whose entire job is
 * showing what the product actually says. 1360px is the widest it goes, which
 * is still a downscale from the native file and so never softens.
 */
.worth-figure {
  width: 100%; max-width: 1360px;
  margin: clamp(2.5rem, 5vw, 3.75rem) auto clamp(1rem, 2.5vw, 1.75rem);
  padding-inline: var(--pad);
}
/*
 * No radius, and no shadow. The artwork's own cards are already rounded, so
 * rounding its outer edge as well produces the nested-rounded-card look this
 * section is meant to avoid, because the graphic starts reading as something sitting
 * in a container rather than as the section's own surface.
 */
.worth-insights { width: 100%; height: auto; }

.insight-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
.insight-card {
  background: rgba(247, 241, 230, 0.06);
  border: 1px solid rgba(247, 241, 230, 0.18);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-lg); padding: 1.65rem 1.75rem;
  transition: transform 140ms ease, background-color 140ms ease;
}
.insight-card:hover { transform: translateY(-2px); background: rgba(247, 241, 230, 0.1); }
.insight-card h3 { font-size: 1.3rem; color: var(--cream); margin-bottom: 0.4rem; }
.insight-card p { color: var(--cream-deep); margin: 0; font-size: 1.09rem; line-height: 1.55; }

/*
 * ONE presentation of this section's content at any given width, never two.
 *
 * The approved artwork is not a supporting illustration: it carries the seal,
 * the "Worth Knowing." heading, the introductory line and all four insights.
 * Showing it alongside the live versions of those same things printed the same
 * header twice on one screen. So the two presentations swap rather than stack.
 *
 * >= 861px  the artwork presents the section. The live head and cards stay in
 *           the DOM but are taken out of view, so the heading outline and the
 *           four insights remain available to assistive technology at full
 *           fidelity while sighted users read them from the artwork.
 *
 * <  861px  the live HTML presents the section and the artwork is not rendered.
 *           Below this width the artwork's own card copy falls under ~10px
 *           (see the measurement below), and nobody should have to zoom an
 *           infographic to find out what the product does.
 *
 *           Note this does NOT save the download: Chrome fetches a lazy image
 *           inside a display:none subtree anyway (measured, not assumed,
 *           naturalWidth is non-zero at 390px). Phones still pay for the file
 *           without seeing it, which is the strongest argument for the WebP
 *           derivative rather than something to fix with more CSS.
 *
 * 861 is measured, not guessed. The artwork is 1536px wide and sets its card
 * copy at ~20px, so displayed width w renders it at w/76.8 px: readable at
 * 1024 (12.1px), marginal at 861 (10.3px), too small by 768 (9.0px).
 */
@media (min-width: 861px) {
  .worth-head, .insight-grid {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* The head is out of flow, so the section's own padding is the top spacing. */
  .worth-figure { margin-top: 0; }
}

@media (max-width: 860px) {
  .worth-figure { display: none; }
}


/* Shares the centre axis the rest of the section is built on. */
.worth-note {
  margin: 2.4rem auto 0; font-size: 1rem; line-height: 1.6; color: var(--cream-deep);
  font-style: italic; max-width: 42em; text-align: center;
}

/* more than deals */
.chip-grid {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.chip-card {
  background: #fffdf8; border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem;
}
/* A card title one notch above its own body copy is not a hierarchy. */
.chip-card h3 { font-size: 1.31rem; margin-bottom: 0.4rem; }
.chip-card p { margin: 0; color: var(--ink-soft); font-size: 1.09rem; line-height: 1.55; }

/* product preview */
.section-preview { background: var(--cream-deep); border-block: 1px solid var(--rule); }
.phones {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2.8rem; align-items: start;
}
.phone { margin: 0; }
.phone-frame {
  background: var(--ink); border-radius: 26px; padding: 10px;
  box-shadow: var(--shadow-md); max-width: 310px; margin-inline: auto;
}
.phone-screen {
  background: var(--cream); border-radius: 18px; padding: 1rem 0.95rem 1.3rem;
  min-height: 460px; font-size: 0.86rem;
}
.phone figcaption {
  margin-top: 0.9rem; text-align: center; font-size: 0.92rem;
  color: var(--ink-muted); font-style: italic;
}
.preview-note {
  margin-top: 2.4rem; text-align: center; font-size: 1rem; line-height: 1.6;
  color: var(--ink-soft); font-style: italic; max-width: 44em; margin-inline: auto;
}

.ui-topbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.7rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--rule);
}
.ui-brand { font-weight: 700; font-size: 0.95rem; }
.ui-back { color: var(--ink-muted); }
.ui-eyebrow {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 1rem 0 0.5rem;
}
.ui-card {
  background: #fffdf8; border: 1px solid var(--cream-edge);
  border-left: 3px solid var(--ink); border-radius: 6px;
  padding: 0.7rem 0.8rem; margin-bottom: 0.55rem;
}
.ui-card-accent { border-left-color: var(--red); }
.ui-card-title { font-weight: 700; margin: 0 0 0.15rem; font-size: 0.9rem; }
.ui-card-sub { margin: 0; color: var(--ink-muted); font-size: 0.8rem; }
.ui-row {
  display: flex; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0; border-bottom: 1px dashed var(--rule);
}
.ui-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-item-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.1rem; }
.ui-item-meta { color: var(--ink-muted); font-size: 0.8rem; margin: 0 0 0.9rem; }
.ui-pricebox {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
  background: #fffdf8; border: 1px solid var(--cream-edge);
  border-radius: 6px; padding: 0.8rem;
}
.ui-label { display: block; font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.ui-big { display: block; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-big-quiet { color: var(--ink-muted); }
.ui-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-bottom: 0.9rem; }
.ui-spark span { flex: 1; background: var(--ink-soft); border-radius: 2px 2px 0 0; opacity: 0.55; }
.ui-spark span:nth-child(6) { background: var(--red); opacity: 1; }
.ui-compare { background: #fffdf8; border: 1px solid var(--cream-edge); border-radius: 6px; padding: 0.3rem 0.8rem; margin-bottom: 0.7rem; }
.ui-compare-row { display: flex; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px dashed var(--rule); }
.ui-compare-row:last-child { border-bottom: 0; }
.ui-store { color: var(--ink-soft); }

/* households */

/*
 * 45/55: the copy column stays the narrower of the two because this section is
 * still primarily read, while the artwork needs enough width for the drawer's
 * contents to be recognisable at a glance.
 */
.households-grid {
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(1.8rem, 4.5vw, 3.5rem); align-items: center;
}
.households-grid .section-heading { margin-bottom: 1.6rem; }

/*
 * No border, no shadow, no frame. The photograph carries its own edges: the
 * marble counter above and the drawer front below. Boxing it would add a
 * second one. The radius is the site's existing --radius-lg, matching the
 * note-card beside it, and clips nothing but out-of-focus cabinetry.
 *
 * Natural 3:2 throughout, no object-fit anywhere: at 390px the full frame is
 * only ~260px tall, so there is nothing to gain by cropping and a crop would
 * cost the grocery list on the left or the calculator on the right.
 */
.drawer-figure { margin: 0; }
.drawer-image { width: 100%; height: auto; border-radius: var(--radius-lg); }

.households-legal {
  margin-top: 1.5rem; font-size: 1rem; line-height: 1.6;
  color: var(--ink-soft); font-style: italic; max-width: 40em;
}

.note-card {
  background: #fffdf8; border: 1px solid var(--cream-edge); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem); box-shadow: var(--shadow-sm);
}
.note-quote { font-size: clamp(1.25rem, 2.3vw, 1.55rem); line-height: 1.45; margin-bottom: 1.2rem; }

/* credibility */
.section-credibility { background: var(--cream-deep); border-block: 1px solid var(--rule); }
/* Centred introduction over a centred diagram, giving one axis for the section.
   Scoped to .has-diagram: the About page renders this section without the
   artwork and must keep its original left-aligned heading. */
.section-credibility.has-diagram .section-heading { margin-bottom: 0; }

/*
 * The diagram. Untreated: no border, no shadow, no radius, no panel. The
 * artwork already draws its own framed columns, its own centre badge and its
 * own ground, and anything added around it becomes a second frame around a
 * composition that is already finished.
 *
 * Its cream ground (#faeed9) is a little lighter than this section's
 * --cream-deep, which is enough to read as a deliberate plate on the page
 * without a border doing the work. That is why the section background is left
 * alone rather than matched to the artwork.
 *
 * Wider than the text measure on purpose, because this is the densest artwork on the
 * site and its supporting copy is about 22px on a 1536 canvas, so displayed
 * width w renders it at roughly w/70 px. 1440 is the cap, still below the
 * native 1536, so it is never upscaled.
 */
.diagram-figure {
  width: 100%; max-width: 1440px;
  margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
  padding-inline: var(--pad);
}
.diagram-image { width: 100%; height: auto; }

/*
 * Caption, not a loose paragraph: it belongs to the artwork, so it appears and
 * disappears with it. A note describing the prices in the illustration must not
 * outlive the illustration showing them.
 */
/*
 * Disclosures. Secondary, never furtive: an illustrative-data disclosure set
 * as fine print reads as something you were meant to skip. 0.92rem is the
 * floor these sit at across the site.
 */
.diagram-note {
  margin: 1.5rem auto 0; max-width: 48em; text-align: center;
  font-size: 1rem; line-height: 1.6; font-style: italic; color: var(--ink-soft);
}

.cred-grid {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.8rem;
}
/*
 * Below 861px this list replaces the diagram entirely, so it is the section's
 * only presentation on a phone. Sized as a first-class treatment, not a
 * fallback squeezed under a heading.
 */
.cred-grid h3 { font-size: 1.31rem; margin-bottom: 0.35rem; }
.cred-grid p { margin: 0; color: var(--ink-soft); font-size: 1.09rem; line-height: 1.55; }
.cred-note { margin-top: 2.4rem; color: var(--ink-soft); max-width: 42em; font-size: 1.09rem; line-height: 1.65; }

/*
 * Swap, do not stack. Above 861px the diagram names the same four inputs this
 * list does, so the list is taken out of view rather than shown alongside it;
 * it stays in the DOM for assistive technology at every width. Below 861px the
 * list explains the section and the diagram is not rendered, because its
 * internal copy is unreadable at phone widths.
 *
 * NOTE: display:none hides the artwork but does NOT prevent the download. That
 * was measured on the Worth Knowing artwork, where a lazy image inside a
 * display:none subtree still decoded. Responsive delivery is a separate job.
 */
@media (min-width: 861px) {
  .has-diagram .cred-grid {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* The list is out of flow, so the note spaces itself off the diagram. */
  .has-diagram .cred-note { margin-top: 2.6rem; }
}

@media (max-width: 860px) {
  .diagram-figure { display: none; }
  .section-credibility.has-diagram .section-heading { margin-bottom: 2rem; }
}

/* prelaunch CTA */
.section-cta { background: var(--ink); color: var(--cream); text-align: center; }
.cta-inner .section-heading { margin-inline: auto; }
.cta-actions { margin: 2rem 0 1.2rem; }
/* Was running the full 1180px container at 15px, far too long a measure. */
.cta-fineprint {
  color: var(--cream-deep); font-size: 1.125rem; line-height: 1.6;
  max-width: 38em; margin-inline: auto;
}
.cta-fineprint a { color: var(--cream); }

/* ---------------------------------------------------------- inner pages */

.page { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.page-head { margin-bottom: 2.2rem; }
.page-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 0.7rem; }
.page-head h1 em { font-style: italic; color: var(--red); }
.page-lead { font-size: 1.28rem; line-height: 1.55; color: var(--ink-soft); margin-top: 1.3rem; max-width: 34em; }

/*
 * About and the legal pages are reading pages, not app UI. Body copy a notch
 * above the site default with a looser leading, and the measure held at 38em
 * (~68 characters at this size) so the eye finds the next line without effort.
 */
/* Reading pages: 18px, a notch under the 19px marketing scale, with the
   ~38em measure from the previous pass preserved. */
.prose { max-width: 38em; font-size: 1.125rem; line-height: 1.7; }
.prose h2 { font-size: clamp(1.5rem, 2.7vw, 1.95rem); margin-top: 2.8rem; margin-bottom: 0.65rem; }
.prose p { color: var(--ink-soft); }
.prose li { margin-bottom: 0.45rem; }
.prose-lead { font-size: 1.28rem; line-height: 1.6; color: var(--ink) !important; }
.prose-signoff { margin-top: 2.6rem; font-size: 1.25rem; }

.contact-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 2rem;
}
.contact-card {
  background: #fffdf8; border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem;
}
.contact-card h2 { font-size: 1.34rem; margin-bottom: 0.5rem; }
.contact-card p { color: var(--ink-soft); margin: 0; }
.contact-card-primary { grid-column: 1 / -1; border-left: 3px solid var(--red); }
.contact-email { margin-top: 1.1rem !important; }
.contact-company { color: var(--ink-soft); font-size: 1.03rem; font-style: italic; }

/* legal */
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.legal-head { margin-bottom: 2.4rem; }
.legal-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.legal-updated { font-size: 1.03rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.legal-intro { margin-top: 1.3rem; font-size: 1.22rem; line-height: 1.65; color: var(--ink-soft); }
/*
 * Privacy and Terms are sustained-reading pages, so they sit one notch below
 * the 19px marketing scale and hold a tighter measure than the 760px
 * .wrap-narrow they live in. 38rem is ~67 characters at this size, matching
 * the treatment About already gets from .prose. Headings keep the full width.
 */
.legal-section { margin-bottom: 2.2rem; }
.legal-section h2 { font-size: 1.5rem; margin-top: 2.7rem; margin-bottom: 0.55rem; }
.legal-section p,
.legal-list { font-size: 1.125rem; line-height: 1.7; max-width: 38rem; }
.legal-section p { color: var(--ink-soft); }
.legal-list { margin: 0 0 1em; padding-left: 1.3em; color: var(--ink-soft); }
.legal-list li { margin-bottom: 0.5em; }
.legal-intro { max-width: 36rem; }
.legal-foot p { font-size: 1.125rem; max-width: 38rem; }
.legal-foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.legal-disclaimer { font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); font-style: italic; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--ink); color: var(--cream); padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.8rem; }
.footer-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(247, 241, 230, 0.16);
}
.footer-brand svg { width: clamp(190px, 26vw, 232px); }
.footer-line { margin-top: 1.1rem; color: var(--cream-deep); font-size: 1.09rem; max-width: 26em; }
.footer-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 1.2rem;
}
/*
 * Padded to a real target rather than a 20px sliver of text. Inline-block so
 * the padding actually counts, and the row gap above is reduced by the same
 * amount so the footer's rhythm is unchanged.
 */
.footer-nav a {
  color: var(--cream); text-decoration: none; font-size: 1.09rem;
  display: inline-block; padding: 0.45rem 0;
}
.footer-nav a:hover { color: var(--cream); text-decoration: underline; }
.footer-base {
  padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  justify-content: space-between; font-size: 1rem; color: var(--cream-deep);
}
.footer-base p { margin: 0; }
.site-footer .sign-off { color: var(--cream-edge); }

/* ------------------------------------------------------------- motion */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .stages, .chip-grid, .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .phones { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

@media (max-width: 860px) {
  .grid-2, .footer-inner, .households-grid { grid-template-columns: 1fr; }
  /* Copy first, artwork beneath it at full width. */
  .households-copy { order: 1; }
  .drawer-figure { order: 2; }

  /* Stack: live copy first, artwork second. */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .hero-copy { order: 1; padding-block: 2.5rem 1.75rem; max-width: none; }
  .hero-visual {
    order: 2;
    /* Full-bleed on mobile too, escaping the grid's own padding. */
    margin-inline: calc(var(--pad) * -1);
    /* Crop INTO the frame rather than shrinking it: a taller box keeps the
       notebook and its handwriting legible on a narrow screen. */
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
  .hero-visual img { object-position: 55% 48%; }
  /* The left-edge wash is a desktop device; stacked, it would just grey the top. */
  .hero-visual::after { display: none; }
  .insight-grid, .contact-grid { grid-template-columns: 1fr; }
  .contact-card-primary { grid-column: auto; }

  /* Mobile navigation: a checkbox toggle, so it works with zero JavaScript. */
  .nav-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; cursor: pointer;
    border: 1px solid var(--rule); border-radius: var(--radius); background: #fffdf8;
  }
  .nav-button-bars, .nav-button-bars::before, .nav-button-bars::after {
    display: block; width: 20px; height: 2px; background: var(--ink); content: "";
  }
  .nav-button-bars { position: relative; }
  .nav-button-bars::before { position: absolute; top: -6px; }
  .nav-button-bars::after { position: absolute; top: 6px; }
  .nav-toggle:focus-visible + .nav-button { outline: 3px solid var(--red); outline-offset: 3px; }

  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--pad) 1.2rem; box-shadow: var(--shadow-md);
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav ul a {
    display: block; padding: 0.95rem 0; border-bottom: 1px solid var(--rule);
    border-left: 0; font-size: 1.06rem;
  }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--red); }
  .header-cta { margin-top: 1rem; align-self: flex-start; }
  .header-inner { position: relative; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .stages, .chip-grid, .cred-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(2.2rem, 9.5vw, 2.9rem); }
  .hero-visual { aspect-ratio: 1 / 1; }
  .hero-visual img { object-position: 56% 50%; }
  .footer-nav ul { grid-template-columns: 1fr; gap: 0; }
  .footer-nav a { padding: 0.75rem 0; }
  .footer-base { flex-direction: column; }
  .ui-pricebox { grid-template-columns: 1fr; }
}