/*
Theme Name: Chilvy
Theme URI: https://chilvy.com
Author: Chilvy
Description: The official marketing/landing theme for Chilvy, a dish-first food journal app. Converted from the static Chilvy landing page into a fully functional WordPress theme with editable content via Secure Custom Fields.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: chilvy
*/
/* ══ CHROME A — START ══════════════════════════════════════════════════════════════
     Everything between the CHROME markers is EXTRACTED BY tools/build_landing.py
     and injected into privacy-policy and delete-account as well. It is the
     shared chrome: tokens, base type, the logotype, the floating header, the
     buttons, the footer and the social row.

     So a rule in here changes all three pages, and a rule outside them changes
     only this one. Before this existed, each of the three files carried its own
     copy of the token block and its own inline wordmark, and the two legal pages
     were still on the old system typeface a week after this page moved off it.
     ═════════════════════════════════════════════════════════════════════════ */
/* The display face. Plus Jakarta Sans, set tight — a geometric sans with a
     slightly humanist cut, which is the register the app itself is in. It
     replaced Fraunces: the serif read as a food publication, and what is wanted
     is a product page.

     It is fetched, not inlined, and it is the ONLY external request these pages
     make. Everything else is a data URI because the artifact CSP blocks external
     hosts — but that CSP allows exactly two: fonts.googleapis.com for the
     stylesheet and fonts.gstatic.com for the file it pulls.

     `display=swap` plus a real fallback stack is what makes the failure mode
     acceptable: with no network and no CSP allowance the headings render in the
     system UI face instead of disappearing. Because the fallback is a sans too,
     the layout barely shifts — which was not true of the serif. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ── tokens, lifted from the app's own theme so the two cannot drift ──────── */
:root {
  --cream: #FFF8E8;
  /* A second, warmer ground. The page was one undifferentiated cream scroll;
       alternating bands are what give it rhythm without introducing a new hue.
       Measured, not eyeballed: ink 14.8:1, ink-soft 5.8:1, brown 7.8:1. */
  --sand: #F4EAD5;
  --surface: #FFFFFF;
  --brown: #6D3A05;
  --brown-deep: #4E2903;
  --yellow: #EDAD10;
  /* The accent, for use ON brown only. Raw #EDAD10 on brown is 4.69:1 —
       it scrapes AA for body text and fails everything above it, and the
       eyebrows on the dark panels are small caps. This is the same hue lifted
       45% toward white: 6.37:1. It must never appear on cream (1.38:1). */
  --accent-dim: #F5D27C;
  --on-yellow: #1E1710;
  /* near-black. 8.93:1 on the yellow. */
  --ink: #1E1710;
  --ink-soft: #655749;
  /* 5.9:1 on cream — body copy, not decoration */
  --border: #E1DBD6;
  --border-firm: #C5BDB5;

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(20px, 5vw, 40px);
  --max: 1240px;

  /* The header is position:fixed, so it is out of flow and covers whatever is
       at the top of the document. Every page therefore has to clear it itself.
       10px of float + a 64px bar + 1px of border + a little slack.
       The landing hero does this inside its own padding; the legal pages use
       this token. Measured: without it their h1 sat exactly 0px below the bar
       at 390px, i.e. touching it. */
  --nav-h: 76px;

  /* A scale rather than one value. Everything sharing a single 20px radius is
       what made the page feel stamped out of a template — a small chip and a
       full-width panel should not curve identically, because at panel size 20px
       reads as an accident. */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --radius: var(--r-md);
  /* the old name, kept so nothing breaks */

  /* Shadows tinted with the brown rather than neutral grey. Grey shadows on a
       cream ground read as dirt; these read as depth. */
  --lift-1: 0 1px 2px rgba(60, 32, 3, 0.04), 0 6px 18px -10px rgba(60, 32, 3, 0.10);
  --lift-2: 0 2px 4px rgba(60, 32, 3, 0.05), 0 18px 40px -20px rgba(60, 32, 3, 0.18);
  --lift-3: 0 30px 70px -32px rgba(60, 32, 3, 0.32);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* {
  box-sizing: border-box;
}

/* The header is fixed now, so an anchor jump would put the target under it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  /* Inter is the app's typeface, and body copy stays on it so the page and the
       app do not drift. It is not fetched — only the display face is — so this
       falls through to the system UI stack, which on Apple platforms is San
       Francisco and reads almost identically. */
  font-family: var(--font-body);
  font-size: 17px;
  /* iOS body size; the app uses the same */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── grain ───────────────────────────────────────────────────────────────── */
/* A single generated noise tile over the whole page at 4.5% — the difference
     between "flat cream" and "paper". It is the cheapest possible version of
     this: one inline SVG, no asset, no request, painted once and composited by
     the GPU thereafter.

     Deliberately NOT mix-blend-mode. Multiply over a fixed layer forces Safari
     to re-composite the page on every scroll frame, and the visual difference
     at this opacity is invisible. pointer-events:none is load-bearing — without
     it this swallows every click on the page. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.045;
  background-image: 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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Texture is decoration. Anyone who has asked for more contrast should not
     have a grey film over their text. */
@media (prefers-contrast: more) {
  body::after {
    display: none;
  }
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* h1, h2 and h3 all carry the display face now. With a serif, h3 had to stay
     on the body sans — a serif at 20px beside sans body copy read as a mistake.
     Plus Jakarta Sans has no such problem, so the hierarchy is weight and size
     rather than two families.

     Tight tracking is the point of this face at display sizes: -0.035em on h1,
     easing off as the type gets smaller, because negative tracking that reads as
     confident at 60px reads as cramped at 20px. */
h1,
h2:not(.wp-block-heading),
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  text-wrap: balance;
}

/* -0.025em, not -0.035em. At 66px the tighter value pulled the punctuation
     into the preceding letter — "food," and "place." and "invent." all read as
     though the comma and the full stop were touching the glyph before them.
     Tight enough to be the point of this face, loose enough to still be
     typography. */
h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  letter-spacing: -0.025em;
}

/* The hard break in the headline is worth having where the first half fits on
     one line and harmful where it does not: under 560px "Remember the food,"
     is wider than the column, so the forced break left "food," alone on a line
     of its own. Below that width the text wraps on its own instead. */
.br-wide {
  display: none;
}

@media (min-width: 560px) {
  .br-wide {
    display: inline;
  }
}

h2 {
  font-size: clamp(29px, 4.2vw, 46px);
  letter-spacing: -0.022em;
}

h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.25;
}

p {
  margin: 0;
}

.lede {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-soft);
  max-width: 38ch;
  line-height: 1.55;
}

.body-soft {
  color: var(--ink-soft);
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brown);
 
}

.section-intro .eyebrow, .legal-hero .eyebrow{
  display: block;
  width: fit-content;
  background: rgba(237, 173, 16, 0.08);
  border-radius: 50px;
  padding: 2px 12px;
  border: 1px solid rgba(237, 173, 16, 0.08);
  margin-bottom: 8px;
}

.section-intro .eyebrow{
  margin-inline: auto;
}

/* ── the logotype ────────────────────────────────────────────────────────── */
/* The mark is hand-lettered artwork, never type. The SVG carries its own two
     colours, so nothing here tints it — a filter would flatten the yellow dot
     into the letterform colour and destroy the only distinguishing element. */
.mark {
  display: block;
  height: 38px;
  width: auto;
}

.mark-l {
  height: clamp(46px, 7vw, 74px);
}

.mark-f {
  height: 34px;
}

/* ── header: a floating pill that contracts on scroll ────────────────────── */
/* This was a full-width sticky bar with a bottom border. It now floats with a
     margin on every side and, past 50px of scroll, contracts to a narrower
     rounded pill with a translucent blurred ground — so the chrome gets out of
     the way of the page instead of ruling a line across it.

     `header` itself is pointer-events:none so the transparent margin around the
     pill does not intercept clicks meant for the page behind it; .nav-shell puts
     them back. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 10px var(--gutter) 0;
  pointer-events: none;
}

.nav-shell {
  pointer-events: auto;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(14px, 2.4vw, 26px);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  /* max-width is the one that carries the effect; the rest just dress it. */
  transition: max-width 420ms var(--ease), background 300ms var(--ease),
    border-color 300ms var(--ease), box-shadow 300ms var(--ease),
    backdrop-filter 300ms var(--ease);
}

header.is-scrolled .nav-shell {
  max-width: 940px;
  background: color-mix(in srgb, var(--cream) 74%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: color-mix(in srgb, var(--brown) 15%, transparent);
  box-shadow: var(--lift-2);
}

@media (prefers-reduced-motion: reduce) {
  .nav-shell {
    transition: none;
  }
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
}

/* Centred on the shell, not laid out in the flex row — so the links stay put
     while the pill contracts around them rather than sliding sideways. */
.nav-links {
  display: none;
  gap: 28px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 200ms var(--ease);
}

.nav-links a:hover {
  color: var(--brown);
}

/* The legal pages mark their own nav entry. Weight as well as colour, so it
     survives greyscale — the same rule the app follows for selection state. */
body:not(.home) .nav-links a[aria-current="page"],
body:not(.home) .nav-sheet a[aria-current="page"] {
  color: var(--brown);
  font-weight: 650;
}

.nav-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1000px) {
  .nav-links {
    display: flex;
  }
}

/* The hamburger. 44x44 target, paints at 22. */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--brown);
  cursor: pointer;
  position: relative;
}

@media (min-width: 1000px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle svg {
  position: absolute;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.nav-toggle .ico-x {
  opacity: 0;
  transform: rotate(-180deg) scale(0.4);
}

header.is-open .nav-toggle .ico-menu {
  opacity: 0;
  transform: rotate(180deg) scale(0.4);
}

header.is-open .nav-toggle .ico-x {
  opacity: 1;
  transform: none;
}

/* The mobile sheet. Not display:none when closed — visibility keeps it out of
     the tab order while still allowing a transition. */
.nav-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  padding: 18px;
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease),
    visibility 240ms;
}

header.is-open .nav-sheet {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (min-width: 1000px) {
  .nav-sheet {
    display: none;
  }
}

.nav-sheet a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.nav-sheet a:hover {
  background: rgba(109, 58, 5, 0.06);
  color: var(--brown);
}

/* Under 420 the wordmark, a hamburger and a full pill do not fit together. */
@media (max-width: 419px) {
  .nav-end .btn {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 15px;
  }
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms var(--ease), color 200ms var(--ease),
    border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

/* The yellow is a FILL. What sits on it is near-black at 8.93:1 — brown on
     yellow is 4.69:1 and white on yellow 1.98:1, and both fail. */
.btn-accent {
  background: var(--yellow);
  color: var(--on-yellow);
}

.btn-accent:hover {
  background: #D69A0C;
}

.btn-primary {
  background: var(--brown);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brown-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--brown);
  border: 1px solid var(--border-firm);
}

.btn-ghost:hover {
  border-color: var(--brown);
  background: rgba(109, 58, 5, 0.04);
}

:where(a, button):focus-visible {
  outline: 3px solid var(--brown);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ══ CHROME A — END ═══════════════════════════════════════════════════════ */

/* ── hero: centred, with the device on a lit stage ───────────────────────── */
/* Was a two-column grid, headline left and device right. Centred instead: the
     headline is the widest thing on the page and the device sits under it on a
     stage of its own, which is what gives the fold a single focal point rather
     than two competing halves.

     The top padding clears the fixed header AND leaves the deliberate air the
     reference layout depends on. */
.hero {
  padding: clamp(116px, 15vw, 200px) 0 64px;
}

.hero-centre {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

/* Version 2 hero: copy beside a tilted phone screenshot instead of the
     centred stage above. */
.hero-grid {
  display: grid;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero-centre h1 {
  margin-bottom: 22px;
}

/* The one emphasised phrase in the headline (wrapped in <strong> from the
     field). --yellow is documented as unsafe directly on cream (1.38:1), so
     the highlight borrows --brown instead — same warm hue as the wordmark,
     and it clears AA at 7.8:1. */
.hero h1 strong {
  color: var(--brown);
}

.hero-centre .lede {
  margin-inline: auto;
  max-width: 48ch;
}

.hero-centre .stores {
  justify-content: center;
  margin-top: 34px;
}

.hero-centre .note {
  justify-content: center;
}

.hero .cta-row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  justify-content: center;
}

/* Version 2 hero: left-aligned copy column, not the centred v1 stack. */
.hero-grid h1 {
  margin-bottom: 20px;
}

.hero-grid .cta-row {
  justify-content: flex-start;
}

/* The stage. Two painted layers sit behind the device: a warm radial glow and
     a dot grid masked to an ellipse, so both fade out rather than ending on a
     visible edge. isolation:isolate keeps the negative z-indexes contained —
     without it they escape to the nearest stacking context and paint behind the
     page background, which is how they disappear entirely. */
.hero-stage {
  position: relative;
  margin-top: clamp(44px, 7vw, 88px);
  isolation: isolate;
}

/* Sized to the stage, not past it. This was min(128%, 1180px) centred with a
     translate, which overhung ~49px each side at 390px — and because a
     pseudo-element is invisible to querySelectorAll('*'), the element-by-element
     hunt for what was widening the document found nothing at all. Only the
     document-level NO_OVERFLOW check saw it. The bloom is in the gradient's
     stops, so it costs nothing to keep the box inside its parent. */
.hero-stage::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  top: -8%;
  aspect-ratio: 1 / 0.72;
  background: radial-gradient(ellipse at 50% 42%,
      color-mix(in srgb, var(--yellow) 42%, transparent) 0%,
      color-mix(in srgb, var(--yellow) 14%, transparent) 36%,
      transparent 58%);
}

.hero-stage::after {
  content: '';
  position: absolute;
  inset: -4% 0 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--brown) 24%, transparent) 1px, transparent 1px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(ellipse 54% 52% at 50% 44%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 52% at 50% 44%, #000 58%, transparent 100%);
}

/* The device fades out into the page at the bottom instead of stopping on a
     hard edge. Held back to 74% so the welcome screen's own button is still
     legible — the reference cuts at 50%, which here would erase it. */
/* The fanned trio, whole. There is no bottom fade: the mask that used to sit
     here cut the welcome screen's own button off, and the point of showing three
     devices is that all three are legible. */
.hero-device {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 1000px;
  margin-inline: auto;
}

.note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-soft);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}

/* ── phone ───────────────────────────────────────────────────────────────── */
.phone {
  position: relative;
  width: 100%;
  margin-inline: auto;
  border-radius: 42px;
  padding: 9px;
}

.phone img {
  width: 100%;
  object-fit: cover;
  display: block;
}

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

/* ── sections ────────────────────────────────────────────────────────────── */
/* Every section used to carry `style="padding-top:0"` inline, which collapsed
     the whole page into one continuous cream column — nothing told you where one
     idea ended and the next began. Sections now own their own vertical rhythm
     and alternate ground, and the inline overrides are gone. */
section {
  padding: clamp(64px, 9vw, 64px) 0;
}

section.feature-lists {
    padding-bottom: 0;
}

.section-head {
  max-width: 46ch;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section-head h2 {
  margin-bottom: 16px;
}

/* Full-bleed grounds. The band is on the <section>, the measure stays on the
     .wrap inside it, so the colour runs edge to edge and the text does not. */
.band-sand {
  background: var(--sand);
}

.band-dark {
  background: var(--brown-deep);
  color: #fff;
}

.band-dark h2 {
  color: #fff;
}

.band-dark .lede,
.band-dark .body-soft {
  color: rgba(255, 255, 255, 0.80);
}

/* Not var(--brown) — that is a 1.6:1 whisper on this ground. */
.band-dark .eyebrow {
  color: var(--accent-dim);
}

/* These two belong to the BAND, not to any one section that happens to use it.
     Written on .closing they applied to a rounded panel; the moment that panel
     became a full-bleed band under a different class name, the badges reverted
     to a near-black fill on dark brown — 1.39:1 against the ground, effectively
     invisible — and the caption under them to 1.83:1, unreadable. White is
     12.79:1 here and the caption 5.86:1, both measured. */
.band-dark .store {
  background: #fff;
  color: var(--ink);
}

.band-dark .store:not([aria-disabled="true"]):hover {
  background: #F2ECE4;
}

.band-dark .stores-note {
  color: rgba(255, 255, 255, 0.72);
}

/* ── one feature per section, alternating ────────────────────────────────── */
/* The three features used to share one row, which meant each screenshot got a
     third of the page and none of them could be read. Each is a section now:
     device on one side, copy on the other, sides alternating.

     The device is capped at 300px because the exports are 543px wide natively —
     rendering them larger would be upscaling, which adds no detail and only
     softens what is there. */
.feature-row {
  display: grid;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

@media (min-width: 900px) {
  .feature-row {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 6vw, 88px);
  }

  /* order, not direction: reversing the flex/grid flow would also reverse the
       tab and reading order, and the copy should always be read after the image
       it belongs to. */
  .feature-row.flip .feature-media {
    order: 2;
  }
}

.feature-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 300px;
  margin-inline: auto;
}

.feature-copy {
  max-width: 46ch;
}

.feature-copy h2 {
  margin: 12px 0 16px;
}

.feature-copy p {
  font-size: 17px;
  line-height: 1.62;
}

@media (min-width: 900px) {
  .feature-row:not(.flip) .feature-copy {
    margin-left: 0;
  }
}

/* The premise sits above the first feature, so it needs air under it. */
#how .section-head {
  margin-bottom: clamp(44px, 6vw, 76px);
}

/* ── the closing call to action ──────────────────────────────────────────── */
.cta {
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -30%;
  transform: translateX(-50%);
  width: min(100%, 900px);
  aspect-ratio: 1 / 0.7;
  background: radial-gradient(ellipse at 50% 50%,
      color-mix(in srgb, var(--yellow) 26%, transparent) 0%,
      transparent 62%);
  pointer-events: none;
}

.cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  align-items: end;
}

@media (min-width: 920px) {
  .cta-grid {
    grid-template-columns: 1.08fr 0.92fr;
  }
}

.cta-copy {
  padding-bottom: 0;
}

.cta-copy h2 {
  margin: 12px 0 16px;
}

.cta-copy .lede {
  color: rgba(255, 255, 255, 0.82);
  max-width: 40ch;
}

.cta-copy .stores {
  margin-top: 30px;
}

/* No longer bleeding off the bottom. It was sitting flush on the band's own
     edge, which on a phone read as the image having been cut off by the footer
     rather than as a flourish. The band keeps its full padding and the device
     sits inside it. */
.cta-media {
  align-self: end;
}

.cta-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 440px;
  margin-inline: auto;
  /* The source is a crop, so its top edge is a hard horizontal cut through a
       photograph. Fading it lets the device emerge from the band rather than
       being pasted onto it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
}

/* Under 920 the device sits under the copy rather than beside it, centred and
     smaller, with the band's padding below it. */
@media (max-width: 919px) {
  .cta-grid {
    align-items: start;
  }

  .cta-media img {
    max-width: 340px;
  }
}

/* Heading alignment is editor-controlled per section (ACF "Heading alignment"
     field), not tied to any one section's id. Centred is wide: at 40ch the
     heading broke across three lines and the lede was a narrow ribbon in the
     middle of the page. 56ch is about 12 words a line, which is where this
     size stops looking cramped. */
.section-head.align-center {
  max-width: 1024px;
  margin-inline: auto;
  text-align: center;
}

.section-head.align-center .lede {
  margin-inline: auto;
  max-width: 62ch;
}

.section-head.align-right {
  margin-left: auto;
  text-align: right;
}

.section-head.align-right .lede {
  margin-left: auto;
}

/* ── feature cards ("how it works") ──────────────────────────────────────── */
.cards {
  display: grid;
  gap: 20px;
}

@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.work-cards .card{
 background: rgba(255, 246, 227, 1);
 border: 1px solid rgba(109, 58, 5, 0.12);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.card:hover {
  border-color: var(--border-firm);
  box-shadow: 0 10px 28px -18px rgba(60, 32, 3, 0.28);
}

.card h3 {
  margin: 18px 0 8px;
}

.icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(237, 173, 16, 0.16);
  display: grid;
  place-items: center;
}

.icon svg {
  width: 23px;
  height: 23px;
  stroke: var(--brown);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── the ranking explainer, on the photograph ────────────────────────────── */
.showpiece {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #2A1704;
  box-shadow: var(--lift-3);
  isolation: isolate;
}

/* DIRECT child only. As a descendant selector this also matched the phone
     screenshot added inside the panel: that img inherited position:absolute,
     inset:0 and z-index:-2, so it was yanked out of the phone frame, stretched
     over the whole panel and painted BEHIND the panel's own background. The
     frame rendered as an empty black rectangle and nothing errored. */
.showpiece>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.showpiece::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(42, 23, 4, 0.94) 0%, rgba(42, 23, 4, 0.82) 46%, rgba(42, 23, 4, 0.36) 100%);
}

/* Two columns past 940: the steps on the left, the screen they produce on the
     right. The dish page is where the derived score actually appears, so it
     belongs next to the explanation of how the score is derived — not stranded
     in a screenshot strip further down. */
.showpiece-inner {
  padding: clamp(32px, 5vw, 64px);
  color: #fff;
  display: grid;
  gap: clamp(32px, 4vw, 52px);
  align-items: center;
}

@media (min-width: 940px) {
  .showpiece-inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.showpiece-copy {
  max-width: 54ch;
}

.showpiece h2 {
  color: #fff;
}

.showpiece p {
  color: rgba(255, 255, 255, 0.88);
}

/* The whole device, not the crop that used to sit here — that one was taller
     than the panel's content box and .showpiece clips, so its bottom third was
     simply cut off. Capped at 240 so the full phone fits the panel at every
     width where the panel is two columns. */
.showpiece-shot {
  display: block;
  width: 100%;
  height: auto;
  max-width: 240px;
  margin-inline: auto;
}

/* Under 940 the phone sits below a full-width column of text, and a 256px
     frame centred in 900px of nothing looks abandoned. */
@media (max-width: 939px) {
  .showpiece-phone {
    display: none;
  }
}

.steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.steps li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.step-n {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step-n {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.steps strong {
  display: block;
  color: #fff;
  font-weight: 650;
}

.steps span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
}

.page-template-template-delete-account .steps span,
.page-template-template-delete-account .steps strong {
  color: #000;
}

/* ── the app section ─────────────────────────────────────────────────────── */
/* This used to be three separate phone frames built in CSS, each wrapping a
     screenshot. It is now one supplied mockup — the arc composition, where the
     centre phone is upright and fully legible — with the three screens named
     beneath it. The frames, the shadows and the perspective are baked into the
     artwork, which is both better looking and less code.

     The image is transparent, which is the whole reason it can sit on the dark
     band at all. */
.arc {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1000px;
  margin: 0 auto;
}

.shot-labels {
  display: grid;
  gap: 14px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 960px;
}

@media (min-width: 720px) {
  .shot-labels {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.shot-label {
  text-align: center;
}

.shot-label strong {
  display: block;
  font-size: 16px;
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.01em;
}

.shot-label span {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
}

/* ── screenshot strip ─────────────────────────────────────────────────────── */
.shots {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.shots>figure {
  scroll-snap-align: center;
  margin: 0;
}

.shots .phone {
  max-width: 100%;
  box-shadow: 0 26px 54px -26px rgba(60, 32, 3, 0.38);
}

.shots figcaption {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

/* ── privacy ─────────────────────────────────────────────────────────────── */
.privacy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-1);
  padding: clamp(32px, 5vw, 60px);
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 860px) {
  .privacy {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
}

.checks svg {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  stroke: var(--brown);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── store badges ────────────────────────────────────────────────────────── */
/* Both reference sites put these directly under the hero subhead and again
     near the footer, so they appear twice here too. Built rather than using
     Apple's and Google's supplied artwork: the page inlines everything (the
     published version cannot reach an external host), and the official badges
     are raster assets with licence terms attached. The platform glyphs are the
     real marks, from Simple Icons, so the shapes are correct. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-centre .stores {
  justify-content: center;
}

/* Below 480 the two badges cannot sit side by side, so they wrap — and wrapped
     flex items keep their intrinsic widths, which left "App Store" 19px wider
     than "Google Play" in a ragged stack. A single-column grid makes them match. */
@media (max-width: 479px) {
  .stores {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}

/* Scoped to enabled badges. Previously this was a bare .store:hover and a
     second rule tried to cancel it for disabled ones by re-stating a
     background — but .store[aria-disabled]:hover (0,3,0) also outranked
     .closing .store (0,2,0), so the white footer badges turned near-black on
     hover while their text stayed near-black. The label vanished. Excluding
     the disabled state here means nothing has to be undone anywhere. */
.store:not([aria-disabled="true"]):hover {
  background: #000;
}

.store svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex: none;
}

.store-txt {
  display: grid;
  line-height: 1.15;
  text-align: left;
}

.store-txt .small {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}

.store-txt .big {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Full strength, deliberately. These were held at 0.62 opacity because Chilvy
     is on neither store yet, and the result read as washed-out rather than as
     "not yet" — the reference site's badges are the loudest thing under its
     headline and ours were the quietest.
     aria-disabled stays, so assistive tech still announces them as unavailable,
     and the line underneath says so in words. What changes is only how they
     look. Give them real store URLs and they become plain links. */
.store[aria-disabled="true"] {
  cursor: default;
}

.stores-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 12px;
}


/* ── team ────────────────────────────────────────────────────────────────── */
.team-section:not(section + .team-section) {
    padding: clamp(116px, 15vw, 200px) 0 120px;
}

.team-section .member{
  background: rgba(255, 246, 227, 1);
  border: 1px solid rgba(109, 58, 5, 0.12);
}

.team-section .eyebrow{
  margin-bottom: 15px;
}

.team-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    /* max-width: 820px; */
  }
}

/* Past 1000 the two cards stack into a narrow left column and the founding
     story takes the right. Left as one stacked column of left-aligned blocks,
     this section used about two thirds of the container and the empty third
     read as a mistake rather than as space — every other section on the page
     runs the full width. */
.team-layout {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
}

.team-layout .story {
    margin-top: 0;
    max-width: 100%;
  }

@media (min-width: 1000px) {
  /* .team-layout {
    grid-template-columns: 0.82fr 1.18fr;
    align-items: start;
  } */

  .team-layout .team-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  .team-layout .story {
    margin-top: 0;
    max-width: 100%;
  }
}

.member {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lift-1);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease),
    transform 220ms var(--ease);
    flex-wrap: wrap;
}

.member:hover {
  border-color: var(--border-firm);
  box-shadow: var(--lift-2);
  transform: translateY(-3px);
}

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

/* Real photographs of both founders, from their public WordCamp Nepal organiser
     profiles. object-fit matters: neither source image was framed as a portrait,
     so the crop is baked into the asset and this must not re-crop it. */
.member-photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--surfaceAlt, #F7F4F0);
  border: 2.5px solid transparent;
  transition: border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}

.member:hover .member-photo {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(237, 173, 16, 0.15);
}

/* Block, because these are spans inside a span — inline by default, which ran
     the name and the role together on one line as "Uttkrista Chhetri Co-founder". */
.member-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.member-role {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* The founding story, one column so the measure stays readable. */
.story {
  max-width: 62ch;
  display: grid;
  gap: 18px;
  margin-top: clamp(36px, 5vw, 52px);
}

.story p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.story p strong {
  color: var(--ink);
  font-weight: 650;
}

.story em {
  font-style: italic;
}

.member-li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brown);
}

.member-li svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ══ CHROME B — START ══════════════════════════════════════════════════════════════
     Everything between the CHROME markers is EXTRACTED BY tools/build_landing.py
     and injected into privacy-policy and delete-account as well. It is the
     shared chrome: tokens, base type, the logotype, the floating header, the
     buttons, the footer and the social row.

     So a rule in here changes all three pages, and a rule outside them changes
     only this one. Before this existed, each of the three files carried its own
     copy of the token block and its own inline wordmark, and the two legal pages
     were still on the old system typeface a week after this page moved off it.
     ═════════════════════════════════════════════════════════════════════════ */
/* ── social ──────────────────────────────────────────────────────────────── */
/* Real marks from Simple Icons, at a single 24x24 viewBox so they optically
     match. LinkedIn is the exception: Simple Icons withdrew it over LinkedIn's
     trademark policy, so that one path is the release that was already on this
     page rather than a fresh fetch or a guess.

     The 40px box paints the circle; the 44px minimum target comes from padding
     OUTSIDE it, the same trick the app's small buttons use. */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink-soft);
  border-radius: 50%;
  text-decoration: none;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}

.social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.social-link:not([aria-disabled="true"]):hover {
  color: var(--brown);
  background: rgba(109, 58, 5, 0.07);
}

/* Chilvy has no Instagram, Facebook, X or TikTok account yet. Dimming them and
     saying so is the same honest treatment the store badges get — a live-looking
     icon that goes nowhere makes a visitor think the product is broken, and an
     invented handle is worse than an absent one. */
/* No dim state any more: every mark in the row is a live link. */

/* ── footer ──────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 56px;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.foot-social {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-bottom: 26px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.foot-social .social {
  margin-left: -10px;
}

.foot-social .stores {
  margin-left: auto;
}

/* optical: the circles have air */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: auto;
}

.foot-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}

.foot-links a:hover {
  color: var(--brown);
  text-decoration: underline;
}

.foot-fine {
  width: 100%;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* ── entrance, opt-out respected ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Below the fold: revealed by an IntersectionObserver. */
  .rise {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  }

  .rise.in {
    opacity: 1;
    transform: none;
  }

  /* Above the fold: a staggered blur-and-lift, in CSS with no observer, because
       the hero is on screen at load and waiting for a callback to reveal it is
       how a page flashes empty. Pure animation also means it still plays with
       JavaScript disabled. */
  .stagger>* {
    opacity: 0;
    animation: settle 900ms var(--ease) forwards;
  }

  .stagger>*:nth-child(1) {
    animation-delay: 60ms;
  }

  .stagger>*:nth-child(2) {
    animation-delay: 130ms;
  }

  .stagger>*:nth-child(3) {
    animation-delay: 200ms;
  }

  .stagger>*:nth-child(4) {
    animation-delay: 270ms;
  }

  .stagger>*:nth-child(5) {
    animation-delay: 340ms;
  }

  .stagger>*:nth-child(6) {
    animation-delay: 410ms;
  }
}

/* The blur is deliberately absent from the `to` frame. A filter — even
     blur(0px) — makes an element a stacking context and a containing block for
     good, and .hero-stage relies on negative z-indexes escaping neither. Ending
     at no filter at all costs nothing and avoids the trap. */
@keyframes settle {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(14px);
  }

  70% {
    filter: blur(0px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ══ CHROME B — END ═══════════════════════════════════════════════════════ */
.legal-hero {
  /* --nav-h clears the fixed header; the clamp is the air on top of that. */
  padding: calc(var(--nav-h) + clamp(34px, 5vw, 68px)) 0 clamp(30px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
}

.legal-hero h1 {
  margin-top: 14px;
}

.legal-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 14px;
  color: var(--ink-soft);
}

.legal-layout {
  display: grid;
  gap: clamp(30px, 4vw, 60px);
  padding: clamp(36px, 5vw, 60px) var(--gutter) clamp(64px, 9vw, 104px);
  align-items: start;
}

/* Grid items default to min-width:auto, so one long unbroken string inside the
     document could otherwise push the whole page wider than the phone. */
.legal-layout>* {
  min-width: 0;
}

@media (min-width: 1000px) {
  .legal-layout {
    grid-template-columns: 246px minmax(0, 1fr);
  }
}

/* ── contents ────────────────────────────────────────────────────────────── */
/* Hidden rather than stacked on narrow screens — eighteen entries above the
     first paragraph would bury the document. The <details> list inside the
     column covers that case instead. */
.toc {
  display: none;
}

@media (min-width: 1000px) {
  .toc {
    display: block;
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    /* Room for the scrollbar so the active pill is never clipped by it. */
    padding-right: 6px;
  }
}

.toc ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.toc a {
  display: block;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}

.toc a:hover {
  color: var(--brown);
  background: rgba(109, 58, 5, 0.05);
}

.toc a.active {
  color: var(--brown);
  font-weight: 600;
  background: rgba(237, 173, 16, 0.16);
}

.toc-mobile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 6px;
  margin-bottom: 34px;
}

@media (min-width: 1000px) {
  .toc-mobile {
    display: none;
  }
}

.toc-mobile summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brown);
}

.toc-mobile summary::-webkit-details-marker {
  display: none;
}

.toc-mobile summary::after {
  content: ' ↓';
  opacity: 0.6;
}

.toc-mobile[open] summary::after {
  content: ' ↑';
}

.toc-mobile ol {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 1px;
}

.toc-mobile a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}

.toc-mobile a:hover {
  color: var(--brown);
  background: rgba(109, 58, 5, 0.05);
}

/* ── the document itself ─────────────────────────────────────────────────── */
.legal {
  max-width: 74ch;
}

/* section carries the landing page's tall vertical rhythm; a legal document
     needs the sections closer together than that. */
.legal section {
  padding: 0;
  margin-bottom: clamp(44px, 6vw, 64px);
  scroll-margin-top: 92px;
}

.legal section:last-of-type {
  margin-bottom: 0;
}

.legal-intro {
  margin-bottom: clamp(40px, 5vw, 56px);
}

.legal-intro p {
  font-size: 18px;
}

.legal h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.25;
  margin-bottom: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.legal-intro+section h2 {
  padding-top: 0;
  border-top: 0;
}

/* Same disc as the ranking steps on the landing page. */
.sec-n {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.legal h3 {
  margin: 30px 0 12px;
  font-size: 19px;
}

.legal h4 {
  margin: 24px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brown);
}

.legal p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 15px;
}

.legal p:last-child {
  margin-bottom: 0;
}

.legal strong {
  color: var(--ink);
  font-weight: 650;
}

.legal a {
  color: var(--brown);
  font-weight: 600;
}

.legal ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.legal ul li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.legal ul li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

.legal ul.rights {
  gap: 12px;
}

/* One statement in the document is a commitment rather than a description,
     and it is the one people scan for. Scoped to `.legal` (the Privacy
     Policy's document body) — Delete Account's plain `.panel` content gets
     its own, tighter version further down. Two unscoped `.callout`/
     `.contact-card` rule sets used to sit in this file; the second one
     (further down) always won the cascade, so Privacy Policy silently
     inherited Delete Account's cramped spacing instead of its own. */
.legal .callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--yellow);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 22px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink) !important;
}

.legal .contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}

.legal .contact-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
}

.legal .contact-rows {
  margin: 0;
  display: grid;
  gap: 14px;
}

.legal .contact-rows>div {
  display: grid;
  gap: 3px;
}

.legal .contact-rows dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.legal .contact-rows dd {
  margin: 0;
  font-size: 17px;
}

.legal-stamp {
  margin-top: clamp(44px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-soft);
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  padding: clamp(36px, 5vw, 60px) var(--gutter) clamp(64px, 9vw, 104px);
  align-items: start;
}

.layout>* {
  min-width: 0;
}

@media (min-width: 960px) {
  .layout {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.panel h2 {
  margin-bottom: 16px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
}

.panel p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 15px;
  max-width: 52ch;
}

.panel p:last-child {
  margin-bottom: 0;
}

.panel a {
  color: var(--brown);
  font-weight: 600;
}

.checks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--ink-soft);
}

.checks svg {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  stroke: var(--brown);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── form card ───────────────────────────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px);
}

.form-card h2 {
  margin-bottom: 6px;
  font-size: clamp(24px, 3vw, 32px);
}

.form-card .card-sub {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 26px;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 20px;
}

.field label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.field .hint {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
}

.field input[type="text"],
.field input[type="email"],
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border-firm);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--brown);
  background: var(--surface);
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(237, 173, 16, 0.10);
  border: 1px solid rgba(237, 173, 16, 0.35);
  border-radius: 14px;
  padding: 15px 16px;
  margin: 4px 0 24px;
}

.consent input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--brown);
}

.consent label {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.form-card .btn-primary {
  width: 100%;
}

.form-fine {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 16px;
  line-height: 1.55;
}

.form-fine a {
  color: var(--brown);
  font-weight: 600;
}

/* honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── banners ─────────────────────────────────────────────────────────────── */
.banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.55;
}

.banner svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.banner-ok {
  background: rgba(46, 125, 50, 0.10);
  border: 1px solid rgba(46, 125, 50, 0.35);
  color: #1f5023;
}

.banner-ok svg {
  stroke: #2e7d32;
}

.banner-err {
  background: rgba(155, 44, 27, 0.10);
  border: 1px solid rgba(155, 44, 27, 0.35);
  color: var(--danger);
}

.banner-err svg {
  stroke: var(--danger);
}

.banner a {
  color: inherit;
}

/* Delete Account's plain `.panel` content — not `.legal`, see the scoped
     version above for the Privacy Policy document body. */
.panel .callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--yellow);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.panel .contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 22px;
}

.panel .contact-card .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.panel .contact-card a {
  color: var(--brown);
  font-weight: 600;
}


[hidden] {
  display: none !important;
}

.nav-links li,
.foot-links li,
.nav-sheet li {
  list-style: none;
}

/* ── Contact Form 7, styled to match the .form-card fields it replaced ───── */
.wpcf7 form p {
  margin: 0 0 20px;
}

.wpcf7 form label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}

.wpcf7 form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  margin-bottom: 0;
}

.wpcf7 form label span.wpcf7-list-item-label {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.wpcf7-form-control:not([type="checkbox"]):not([type="submit"]) {
  width: 100%;
  /* font: inherit; */
  /* font-size: 16px; */
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border-firm);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

textarea.wpcf7-form-control {
  resize: vertical;
  min-height: 96px;
}

.wpcf7-form-control:focus {
  border-color: var(--brown);
  background: var(--surface);
  outline: none;
}

.wpcf7-acceptance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(237, 173, 16, 0.10);
  border: 1px solid rgba(237, 173, 16, 0.35);
  border-radius: 14px;
  padding: 15px 16px;
  margin: 4px 0 24px;
}

.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.wpcf7-acceptance input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--brown);
}

.wpcf7-acceptance label {
  display: inline;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

.wpcf7-form-control.wpcf7-submit,
input.wpcf7-form-control[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  background: var(--brown);
  color: #fff;
  cursor: pointer;
  transition: background 200ms var(--ease);
}

.wpcf7-form-control.wpcf7-submit:hover {
  background: var(--brown-deep);
}

.wpcf7-spinner {
  margin: 0 0 0 10px;
}

.wpcf7-not-valid-tip {
  display: block;
  font-size: 13px;
  color: var(--danger, #9b2c1b);
  margin-top: 6px;
  font-weight: 400;
}

.wpcf7-response-output {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 20px !important;
  font-size: 15px;
  line-height: 1.55;
  border-width: 1px;
  border-style: solid;
}

.wpcf7-mail-sent-ok {
  background: rgba(46, 125, 50, 0.10);
  border-color: rgba(46, 125, 50, 0.35);
  color: #1f5023;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-aborted {
  background: rgba(155, 44, 27, 0.10);
  border-color: rgba(155, 44, 27, 0.35);
  color: var(--danger, #9b2c1b);
}

.wpcf7-form.sent form {
  opacity: 0.6;
}


/* ==========================================================================
   CONTACT CARDS SECTION (Scoped CSS)
   ========================================================================== */

/* Main Section Wrapper */
.contact-cards-section {
    padding: clamp(116px, 15vw, 200px) 0 120px;
    box-sizing: border-box;
}

/* Ensure inner box sizing for all child elements */
.contact-cards-section *, 
.contact-cards-section *::before, 
.contact-cards-section *::after {
    box-sizing: border-box;
}

/* Container */
.contact-cards-section .contact-container {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

/* Heading */
.contact-cards-section .contact-main-heading {
    text-align: center;
    font-size: clamp(29px, 4.2vw, 46px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 32px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Grid Layout */
.contact-cards-section .contact-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Single Card Box */
.contact-cards-section .contact-card {
    display: flex;
    align-items: center;
    background-color: rgba(255, 246, 227, 1);
    border-radius: 16px;
    padding: 22px 28px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover & Active States */
.contact-cards-section .contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
    border-color: rgba(109, 58, 5, 0.12);
}

.contact-cards-section .contact-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Icon Wrap & Image */
.contact-cards-section .card-icon-wrap {
    flex-shrink: 0;
    margin-right: 20px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-cards-section .card-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Card Text Content */
.contact-cards-section .card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Title */
.contact-cards-section .card-title {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 4px 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

/* WYSIWYG Description Fixes */
.contact-cards-section .card-description {
    font-size: 14px;
    color: #666666;
    line-height: 1.45;
}

.contact-cards-section .card-description p {
    margin: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet & Smaller Screens */
@media screen and (max-width: 768px) {
    .contact-cards-section {
        padding-inline: 16px;
    }

    .contact-cards-section .contact-main-heading {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .contact-cards-section .contact-card {
        padding: 18px 20px;
    }
}

/* Mobile Screens */
@media screen and (max-width: 480px) {
    /* .contact-cards-section {
        padding: 40px 12px;
    } */

    .contact-cards-section .contact-main-heading {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .contact-cards-section .contact-card {
        padding: 16px 16px;
        border-radius: 12px;
    }

    .contact-cards-section .card-icon-wrap {
        margin-right: 14px;
        width: 24px;
        height: 24px;
    }

    .contact-cards-section .card-title {
        font-size: 15px;
    }

    .contact-cards-section .card-description {
        font-size: 13px;
    }
}
/* ==========================================================================
   FORM VIEW & CF7 UI OVERRIDES (Form ID: 07fd702)
   ========================================================================== */

/* Form Container Layout */
.contact-cards-section #contact-form-view {
    max-width: 600px;
    margin: 0 auto;
}

/* Back Button */
.contact-cards-section #contact-form-view .back-btn {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #666666;
    cursor: pointer;
    margin-bottom: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.contact-cards-section #contact-form-view .back-btn:hover {
    color: #000000;
}

/* Dynamic Header inside Form */
.contact-cards-section .dynamic-form-header {
    text-align: center;
    margin-bottom: 32px;
}

.contact-cards-section .dynamic-header-icon-wrap {
    margin-bottom: 12px;
}

.contact-cards-section #dynamic-form-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin: 0 auto;
}

.contact-cards-section #dynamic-form-title {
    font-size: 26px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 8px 0;
}

.contact-cards-section #dynamic-form-description {
    font-size: 15px;
    color: #666666;
    margin: 0;
    line-height: 1.4;
}

/* Prevent CF7 <p> tags from adding unintended vertical gaps */
.contact-cards-section form.wpcf7-form-id-07fd702 p {
    margin: 0 0 20px 0;
}

.contact-cards-section form.wpcf7-form-id-07fd702 label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 8px;
}

/* Base Styles for Text Inputs & Textarea */
.contact-cards-section form.wpcf7-form-id-07fd702 input[type="text"],
.contact-cards-section form.wpcf7-form-id-07fd702 input[type="email"],
.contact-cards-section form.wpcf7-form-id-07fd702 textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background-color: #fafafa;
    color: #111111;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}

/* Placeholder Styling */
.contact-cards-section form.wpcf7-form-id-07fd702 input::placeholder,
.contact-cards-section form.wpcf7-form-id-07fd702 textarea::placeholder {
    color: #999999;
    font-size: 14px;
}

/* Textarea Customization */
.contact-cards-section form.wpcf7-form-id-07fd702 textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}

/* Active & Focus States */
.contact-cards-section form.wpcf7-form-id-07fd702 input:focus,
.contact-cards-section form.wpcf7-form-id-07fd702 textarea:focus {
    border-color: #111111;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Submit Button */
.contact-cards-section form.wpcf7-form-id-07fd702 input[type="submit"] {
    width: 100%;
    background-color: #1c1c1c;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.contact-cards-section form.wpcf7-form-id-07fd702 input[type="submit"]:hover {
    background-color: #000000;
}

.contact-cards-section form.wpcf7-form-id-07fd702 input[type="submit"]:active {
    transform: scale(0.99);
}

/* ==========================================================================
   CF7 VALIDATION & ERROR STYLES (Clean & Non-Intrusive)
   ========================================================================== */

/* Error Highlight on Input Fields */
.contact-cards-section form.wpcf7-form-id-07fd702 .wpcf7-not-valid {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
}

/* Inline Field Error Messages */
.contact-cards-section form.wpcf7-form-id-07fd702 .wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    display: block;
}

/* Main Response Output Message Box (Success / Error) */
.contact-cards-section form.wpcf7-form-id-07fd702 .wpcf7-response-output {
    margin: 24px 0 0 0;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border: none;
}

/* Validation Error Box */
.contact-cards-section form.wpcf7-form-id-07fd702.invalid .wpcf7-response-output,
.contact-cards-section form.wpcf7-form-id-07fd702.unaccepted .wpcf7-response-output {
    background-color: #fde8e8;
    color: #9b1c1c;
}

/* Success Output Box */
.contact-cards-section form.wpcf7-form-id-07fd702.sent .wpcf7-response-output {
    background-color: #ef3f6;
    color: #03543f;
    background: #e6f4ea;
}

/* Loading Spinner Positioning */
.contact-cards-section form.wpcf7-form-id-07fd702 .wpcf7-spinner {
    display: block;
    margin: 12px auto 0 auto;
}

/* ==========================================================================
   FORM FIELD LAYOUT CLASSES (Scoped to contact-cards-section)
   ========================================================================== */

/* Form Row Container */
.contact-cards-section .form-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

/* Two Column Row */
/* .contact-cards-section .form-row-2col {
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .contact-cards-section .form-row-2col {
        grid-template-columns: 1fr 1fr;
    }
} */

/* Individual Form Field */
.contact-cards-section .form-field {
    margin-bottom: 20px;
}

.contact-cards-section .form-field:last-child {
    margin-bottom: 0;
}

/* Name Fields Row (First & Last Name side by side) */
.contact-cards-section .name-fields {
    display: grid;
    gap: 12px;
}

@media (min-width: 480px) {
    .contact-cards-section .name-fields {
        grid-template-columns: 1fr 1fr;
    }
}

.contact-cards-section .name-fields span {
    display: block;
}

/* Submit Button Wrapper */
.contact-cards-section .form-submit-wrap {
    margin-top: 28px;
}