/* ==========================================================================
   NearEats — design system
   Static CSS, no build step. Tokens first, then components, then responsive.
   ========================================================================== */

/* -- Tokens --
   Colours are the APP's colours, not invented: NearEats is built on the iOS
   system palette with AccentColor = system blue #007AFF, and its Liquid Glass
   components use a blue -> purple gradient. Surfaces come from the App Store
   screenshot frame (#FDE8D6 -> #FFFDF9, ink #1A1A1A). See DESIGN.md §2. */
:root {
  /* Brand — the APP ICON, sampled from the shipped 1024px artwork.
     The icon is an amber -> coral map pin on charcoal; it is the most-repeated
     brand asset (App Store, home screen, favicon, header, hero), so the site
     leads warm. Blue stays for links and secondary interactive, matching what
     the app does once it is open. See DESIGN.md §2. */
  --amber: #FFB025;           /* icon, pin top */
  --amber-mid: #FF8740;       /* icon, pin middle */
  --coral: #FF6750;           /* icon, pin tip */
  --charcoal: #36333E;        /* icon ground */
  --gradient: linear-gradient(135deg, var(--amber) 0%, var(--coral) 100%);
  --on-gradient: #2A1500;     /* the ONLY safe ink on --gradient (9.5:1 / 6.1:1) */

  /* Deep warm ramp — for full-bleed bands that carry WHITE copy.
     The bright icon gradient cannot: white on it is 1.8-2.9:1. */
  --brand-deep-1: #C2410C;
  --brand-deep-2: #9A2A12;
  --brand-deep: linear-gradient(135deg, var(--brand-deep-1) 0%, var(--brand-deep-2) 100%);
  --warm-ink: #A83A0C;        /* warm text on white / cream — AA everywhere */

  /* Blue — the app's in-app accent. Links and secondary interactive. */
  --blue: #007AFF;            /* .accentColor */
  --blue-strong: #0063D1;     /* links / small text on white — AA safe */
  --blue-dark: #0050A8;
  --purple: #AF52DE;          /* app: a venue found in BOTH OSM + Apple Maps */
  --purple-strong: #8E3FBE;
  --gradient-wash: linear-gradient(135deg,
                     rgba(255, 176, 37, 0.12) 0%,
                     rgba(255, 103, 80, 0.12) 100%);

  /* App semantic colours — these MEAN things, don't redecorate with them */
  --green: #34C759;           /* Open now · OpenStreetMap · vegan */
  --green-ink: #12723A;
  --orange: #FF9500;          /* Closes soon · awards · gluten-free · brunch */
  --orange-deep: #C2410C;
  --orange-ink: #8A4B00;
  --red: #FF3B30;             /* warnings: cash only, not accessible */
  --red-ink: #A81E16;
  --teal: #30B0C7;            /* halal */
  --teal-ink: #186C7D;
  --indigo: #5856D6;          /* kosher · Wi-Fi */
  --indigo-ink: #4744B8;
  --pink: #FF2D55;            /* family-friendly */
  --pink-ink: #A81243;
  --brown: #A2845E;           /* microbrewery · dog-friendly */
  --brown-ink: #6B5238;
  --cyan: #32ADE6;            /* air conditioning */
  --cyan-ink: #1A6F8F;
  --yellow: #FFCC00;          /* outdoor seating */
  --yellow-ink: #6B5500;
  --gold: #B78C26;            /* Michelin / Bib award */
  --gold-2: #D9AE38;
  --gold-ink: #7A5A10;

  /* Surfaces & text (light) — the App Store cream family */
  --bg: #FFFFFF;
  --bg-soft: #FFF7EF;         /* pale end of the store gradient */
  --bg-sunk: #FDE8D6;         /* deep end — hero backdrop */
  --surface: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.62);
  --ink: #1A1A1A;             /* the store screenshots' title colour */
  --ink-2: #55575C;
  --ink-3: #85888E;
  --line: #EADFD3;            /* warm hairline — this is a cream page */
  --on-brand: #FFFFFF;

  /* Washes for chips and icon tiles */
  --blue-wash: rgba(0, 122, 255, 0.10);
  --purple-wash: rgba(175, 82, 222, 0.10);
  --green-wash: rgba(52, 199, 89, 0.14);
  --orange-wash: rgba(255, 149, 0, 0.14);
  --red-wash: rgba(255, 59, 48, 0.12);
  --teal-wash: rgba(48, 176, 199, 0.14);
  --indigo-wash: rgba(88, 86, 214, 0.12);
  --yellow-wash: rgba(255, 204, 0, 0.20);
  --brown-wash: rgba(162, 132, 94, 0.16);
  --gold-wash: rgba(183, 140, 38, 0.14);

  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06), 0 2px 8px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.07), 0 12px 32px rgba(26, 26, 26, 0.06);
  --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.09), 0 24px 64px rgba(88, 40, 140, 0.14);
  --shadow-brand: 0 10px 30px rgba(255, 122, 60, 0.34);
  --shadow-glass: 0 2px 10px rgba(26, 26, 26, 0.06), 0 12px 40px rgba(0, 80, 168, 0.10);

  /* Shape */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Device chrome for the CSS phone frame (black titanium, as in the store frames) */
  --device: #101018;
  --device-edge: #2C2C38;

  /* Layout */
  --wrap: 1160px;
  --wrap-narrow: 720px;
  --gutter: 24px;
  --header-h: 68px;

  /* Hand-drawn marker — the BRAND amber #FFB025, not the semantic
     orange #FF9500, so the highlighter never reads as "closes soon". */
  --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath d='M2.4 9.6C34 5.2 78 3.4 121 4.1c26 .4 49 1.7 76 3.6-3 8.4-4.4 14.2-5.6 21.5-38-2.2-72-3.3-104-3-25 .2-50 1.2-84 3.1C4.6 22.6 3.4 16.2 2.4 9.6Z' fill='%23FFB025'/%3E%3C/svg%3E");
  --underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.5C46 4 108 3 196 6.5' stroke='%23FFB025' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    /* iOS dark-mode system values — the app switches these too */
    --blue: #0A84FF;
    --blue-strong: #4DA6FF;
    --purple: #BF5AF2;
    --purple-strong: #D08CF7;
    --green: #30D158;
    --green-ink: #5DE082;
    --orange: #FF9F0A;
    --orange-ink: #FFC46B;
    --red: #FF453A;
    --red-ink: #FF8A82;
    --teal: #40C8E0;
    --teal-ink: #7FDDEE;
    --indigo: #7D7BEA;
    --indigo-ink: #A9A7F5;
    --pink: #FF375F;
    --pink-ink: #FF8FA6;
    --brown: #AC8E68;
    --brown-ink: #D2BB9C;
    --cyan: #64D2FF;
    --cyan-ink: #9BE3FF;
    --yellow: #FFD60A;
    --yellow-ink: #FFE45C;
    --gold: #E0B84A;
    --gold-2: #F0D078;
    --gold-ink: #EFD188;

    --bg: #0F0D0B;            /* warm-black — keeps the cream family */
    --bg-soft: #17140F;
    --bg-sunk: #1F1A14;
    --surface: #1A1611;
    --glass: rgba(35, 30, 24, 0.58);
    --ink: #F7F2EC;
    --ink-2: #B5AEA4;
    --ink-3: #8C8578;
    --line: #2E271F;

    --blue-wash: rgba(10, 132, 255, 0.16);
    --purple-wash: rgba(191, 90, 242, 0.16);
    --green-wash: rgba(48, 209, 88, 0.16);
    --orange-wash: rgba(255, 159, 10, 0.16);
    --red-wash: rgba(255, 69, 58, 0.16);
    --teal-wash: rgba(64, 200, 224, 0.16);
    --indigo-wash: rgba(125, 123, 234, 0.18);
    --yellow-wash: rgba(255, 214, 10, 0.18);
    --brown-wash: rgba(172, 142, 104, 0.20);
    --gold-wash: rgba(224, 184, 74, 0.16);
    --gradient-wash: linear-gradient(135deg,
                       rgba(255, 176, 37, 0.16) 0%,
                       rgba(255, 103, 80, 0.16) 100%);
    --gradient: linear-gradient(135deg, #FFB025 0%, #FF6750 100%);
    --brand-deep-1: #D4551C;
    --brand-deep-2: #A83318;
    --warm-ink: #FFA870;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.4);
    --shadow-brand: 0 10px 30px rgba(255, 122, 60, 0.40);
    --shadow-glass: 0 2px 10px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.32);
  }
}

/* -- Reset & base -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; text-decoration: none; }

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

/* -- Layout helpers -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }
.section--sunk { background: var(--bg-sunk); }

.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
  background: var(--orange-wash);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}

h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; }

h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.2rem; line-height: 1.3; }

.section-head h2 { margin-bottom: 14px; }
.lede { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--ink-2); }

/* Hand-drawn highlighter on a single word */
.mark {
  background-image: var(--marker);
  background-repeat: no-repeat;
  background-size: 100% 0.52em;
  background-position: 0 88%;
  padding: 0 0.08em;
  color: #2A1500; /* dark text over the orange swash */
}
/* On dark backgrounds a filled highlight kills legibility — use the marker
   as an underline stroke instead and keep the text light. */
@media (prefers-color-scheme: dark) {
  .mark {
    background-image: var(--underline);
    background-size: 100% 0.2em;
    background-position: 0 100%;
    padding: 0 0 0.1em;
    color: inherit;
  }
}
.underline-doodle {
  background-image: var(--underline);
  background-repeat: no-repeat;
  background-size: 100% 0.22em;
  background-position: 0 100%;
  padding-bottom: 0.12em;
}

/* -- Buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 650;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s, background 0.18s, color 0.18s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gradient); color: var(--on-gradient); box-shadow: var(--shadow-brand); }
.btn--primary:hover { box-shadow: 0 14px 36px rgba(255, 122, 60, 0.46); }

/* Secondary CTA — the app's blue, so blue keeps its in-app role. Uses
   --blue-strong, not --blue: white on #007AFF is only 4.02:1. */
.btn--blue { background: var(--blue-strong); color: #FFFFFF; box-shadow: 0 10px 26px rgba(0, 99, 209, 0.28); }
.btn--blue:hover { box-shadow: 0 14px 34px rgba(0, 99, 209, 0.36); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--amber); color: var(--warm-ink); }

.btn--sm { padding: 9px 18px; font-size: 0.92rem; }

.app-badge { display: inline-block; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.app-badge:hover { transform: translateY(-2px) scale(1.02); }
.app-badge img { height: 54px; width: auto; }

.cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* -- Liquid Glass --
   The web translation of the app's design language (see DESIGN.md §3 and the
   app's LIQUID_GLASS_UI_ENHANCEMENTS.md): .ultraThinMaterial surface, a white
   50% -> 10% gradient hairline border, a top shine, and a soft coloured glow.
   Only use it OVER something — a cream wash, a gradient band, a screenshot.
   Over flat --bg there is nothing to blur and it just looks muddy. */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-glass);
}

/* gradient hairline border */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* top shine — the app's white gradient over the first 40px */
.glass::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 40px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
}

@media (prefers-color-scheme: dark) {
  .glass::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
  }
  .glass::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent);
  }
}

/* Browsers without backdrop-filter get an honest solid surface. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); border: 1px solid var(--line); }
  .glass::after { display: none; }
}

/* Selected / active state — the app's accent overlay (12% -> 4%) plus a glow. */
.glass.is-active {
  background:
    linear-gradient(135deg, rgba(0, 122, 255, 0.12), rgba(0, 122, 255, 0.04)),
    var(--glass);
  box-shadow: var(--shadow-glass), 0 0 0 1px var(--blue-wash), 0 8px 26px rgba(0, 122, 255, 0.18);
}

/* -- Fade-in on scroll --
   Only hide content when scripting is available, so a failed/blocked main.js
   can never leave the page blank. */
@media (scripting: enabled) {
  .fade-in {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 28px; }
.nav a {
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 550;
  transition: color 0.18s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: none; }

.nav-cta { flex-shrink: 0; }
.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 11px 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 72px) 0 0;
  overflow: hidden;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 58% at 50% 0%, rgba(255, 176, 37, 0.20) 0%, transparent 70%),
    radial-gradient(52% 42% at 86% 18%, rgba(255, 103, 80, 0.16) 0%, transparent 70%),
    radial-gradient(46% 40% at 8% 30%, rgba(255, 176, 37, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.hero-copy { max-width: 900px; margin: 0 auto; }
.hero h1 { margin-bottom: 20px; font-size: clamp(2.35rem, 5.4vw, 4rem); }

.hero-sub {
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  color: var(--ink-2);
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 26px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.hero-trust li { display: flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--green-ink); flex-shrink: 0; }

/* Phone trio */
.hero-shots {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-top: 64px;
  padding-bottom: 8px;
}
.hero-shots .phone { width: 236px; flex: 0 0 auto; }
.hero-shots .phone--left { transform: rotate(-7deg) translate(34px, 18px); z-index: 1; }
.hero-shots .phone--right { transform: rotate(7deg) translate(-34px, 18px); z-index: 1; }
.hero-shots .phone--center { width: 268px; z-index: 2; }

/* -- CSS phone frame -- */
.phone {
  position: relative;
  background: var(--device);
  border-radius: 42px;
  padding: 9px;
  box-shadow: 0 0 0 2px var(--device-edge), var(--shadow-lg);
}
.phone img { width: 100%; border-radius: 34px; }
.phone::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 20px;
  background: var(--device);
  border-radius: var(--r-pill);
  z-index: 2;
}

/* ==========================================================================
   Marquee strip (stats / proof)
   ========================================================================== */
.strip {
  background: var(--brand-deep);
  color: var(--on-brand);
  padding: 28px 0;
}
.strip ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.strip .strip-num { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.strip .strip-label { font-size: 0.85rem; opacity: 0.82; }

/* ==========================================================================
   Features
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s, border-color 0.22s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }

/* Glass variant — only valid inside a .section--soft / --sunk band, where
   there is a cream wash for the backdrop-filter to actually pick up. */
.feature.glass {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--glass);
}
.feature.glass::before { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.feature.glass:hover { box-shadow: var(--shadow-glass), 0 10px 30px rgba(255, 122, 60, 0.16); }

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--blue-wash);
  color: var(--blue-strong);
}
/* Each feature icon takes the colour the APP uses for that concept, so the
   grid reads as the same language as the screenshots below it. */
.feature-icon--green  { background: var(--green-wash);  color: var(--green-ink); }   /* open now */
.feature-icon--orange { background: var(--orange-wash); color: var(--orange-ink); }  /* awards, closing soon */
.feature-icon--purple { background: var(--purple-wash); color: var(--purple-strong); } /* merged sources */
.feature-icon--teal   { background: var(--teal-wash);   color: var(--teal-ink); }    /* halal / diet */
.feature-icon--red    { background: var(--red-wash);    color: var(--red-ink); }     /* warnings */
.feature-icon--blue   { background: var(--blue-wash);   color: var(--blue-strong); } /* interactive */

.feature h3 { margin-bottom: 8px; }
.feature p { font-size: 0.95rem; color: var(--ink-2); }

.more-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 26px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.more-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.94rem;
  color: var(--ink-2);
}
.more-features .emoji { font-size: 1.1rem; line-height: 1.45; }
.more-features strong { color: var(--ink); font-weight: 650; }

/* ==========================================================================
   How it works
   ========================================================================== */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.step { text-align: center; }
.step .phone { max-width: 232px; margin: 0 auto 26px; }
.step-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.step-badge span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-deep);
  color: var(--on-brand);
  font-size: 0.85rem;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.95rem; color: var(--ink-2); max-width: 320px; margin: 0 auto; }

/* ==========================================================================
   Split feature block (copy + phones)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-copy h2 { margin-bottom: 16px; }
.split-copy .lede { margin-bottom: 26px; }
.split-list { display: grid; gap: 16px; }
.split-list li { display: flex; align-items: flex-start; gap: 13px; }
.split-list .bullet {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: var(--orange-wash);
}
.split-list strong { display: block; color: var(--ink); }
.split-list span.txt { font-size: 0.95rem; color: var(--ink-2); }

.split-shots {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.split-shots .phone { width: 218px; }
.split-shots .phone:first-child { transform: rotate(-4deg) translateX(24px); z-index: 2; }
.split-shots .phone:last-child { transform: rotate(4deg) translateX(-24px); margin-top: 40px; }

/* single phone in a split */
.split-shots--single { justify-content: center; }
.split-shots--single .phone { width: 250px; transform: rotate(-2deg); }

/* ==========================================================================
   Direct-answer block — the definition and the "near me" questions
   --------------------------------------------------------------------------
   Deliberately plain: a question-phrased h2/h3 immediately followed by a
   40-60 word answer is the shape featured snippets and voice assistants
   extract. Do not decorate it into something a parser has to dig through.
   ========================================================================== */
.answer-block {
  max-width: var(--wrap-narrow);
  margin: 0 auto 44px;
  text-align: center;
}
.answer-block h2 { margin-bottom: 16px; }
.answer-lede {
  font-size: clamp(1rem, 2vw, 1.12rem);
  color: var(--ink-2);
}
.answer-lede strong { color: var(--ink); }

.answer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.answer-item h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.answer-item p { font-size: 0.95rem; color: var(--ink-2); }

/* Byline + the AI-drafting disclosure on posts. Deliberately plain and
   unhidden — the point of the note is that a reader sees it. */
.post-meta .byline { color: inherit; font-weight: 650; text-decoration: underline;
  text-underline-offset: 2px; }
.post-meta .byline:hover { color: var(--warm-ink); }

.editorial-note {
  max-width: var(--wrap-narrow);
  margin: 40px auto 0;
  padding: 16px 20px;
  border-left: 3px solid var(--amber);
  background: var(--bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.88rem;
  color: var(--ink-2);
}
.editorial-note a { font-weight: 650; }

/* ==========================================================================
   Badge row — the app's amenity badges, rebuilt in HTML
   --------------------------------------------------------------------------
   Every chip uses the colour the app gives that concept in
   AmenityBadges.swift, so the row and the screenshots beside it agree. Note
   "Wheelchair accessible" is BLUE in the app, not green — don't "fix" it.

   These are always FLAT, bordered and icon-bearing. Brand warmth on this page
   is always a gradient; that contrast is what stops the orange chips reading
   as brand (DESIGN.md §2.3).
   ========================================================================== */
.badge-showcase {
  margin-top: 56px;
  padding: 30px 32px 32px;
  border-radius: var(--r-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.badge-showcase-head {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 18px;
}
.badge-showcase-note {
  font-size: 0.86rem;
  color: var(--ink-3);
  margin-top: 18px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.2;
  border: 1px solid transparent;
}
.badge svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Warnings first and loudest — the app puts the decision-critical negatives
   ahead of the positives, and so does this row. */
.badge--warn   { background: var(--red-wash);    color: var(--red-ink);    border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.badge--open   { background: var(--green-wash);  color: var(--green-ink);  border-color: color-mix(in srgb, var(--green) 32%, transparent); }
.badge--diet   { background: var(--green-wash);  color: var(--green-ink);  border-color: color-mix(in srgb, var(--green) 32%, transparent); }
.badge--soon   { background: var(--orange-wash); color: var(--orange-ink); border-color: color-mix(in srgb, var(--orange) 32%, transparent); }
.badge--halal  { background: var(--teal-wash);   color: var(--teal-ink);   border-color: color-mix(in srgb, var(--teal) 32%, transparent); }
.badge--kosher { background: var(--indigo-wash); color: var(--indigo-ink); border-color: color-mix(in srgb, var(--indigo) 32%, transparent); }
.badge--sun    { background: var(--yellow-wash); color: var(--yellow-ink); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.badge--paw    { background: var(--brown-wash);  color: var(--brown-ink);  border-color: color-mix(in srgb, var(--brown) 32%, transparent); }
.badge--wifi   { background: var(--indigo-wash); color: var(--indigo-ink); border-color: color-mix(in srgb, var(--indigo) 32%, transparent); }
.badge--access { background: var(--blue-wash);   color: var(--blue-strong); border-color: color-mix(in srgb, var(--blue) 32%, transparent); }
.badge--award  { background: var(--gold-wash);   color: var(--gold-ink);   border-color: color-mix(in srgb, var(--gold) 42%, transparent); }

/* Alternating split direction, so consecutive split sections don't stack
   their phones down the same edge of the page. */
.split--reverse .split-copy { order: 2; }
.split--reverse .split-shots { order: 1; }

/* ==========================================================================
   Comparison table
   ========================================================================== */
.vs-wrap {
  max-width: 860px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.vs {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.vs th, .vs td { padding: 17px 22px; font-size: 0.96rem; }
.vs thead th {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.vs thead .col-us { color: var(--warm-ink); }
.vs tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 40%;
}
.vs tbody tr + tr th, .vs tbody tr + tr td { border-top: 1px solid var(--line); }
.vs td { color: var(--ink-2); }
.vs .col-us, .vs td.col-us { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Personas
   ========================================================================== */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.persona {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.persona-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: var(--orange-wash);
  margin-bottom: 16px;
}
.persona h3 { margin-bottom: 10px; }
.persona p { color: var(--ink-2); font-size: 0.96rem; }
.persona-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--warm-ink);
  background: var(--orange-wash);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
  align-items: start;
}
/* NearEats has ONE price, not the sisters' free/premium pair — so the grid
   collapses to a single, narrower card that can carry the whole pitch. */
.plans--single { grid-template-columns: minmax(0, 1fr); max-width: 540px; }

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-sm);
}
.plan--premium {
  background: var(--brand-deep);
  color: var(--on-brand);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.plan-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-price { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; margin: 10px 0 4px; }
.plan-note { font-size: 0.92rem; color: var(--ink-2); margin-bottom: 24px; }
.plan--premium .plan-note { color: rgba(255, 255, 255, 0.82); }
.plan ul { display: grid; gap: 12px; margin-bottom: 26px; }
.plan li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.96rem; }
.plan .tick {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-wash);
  color: var(--green-ink);
  font-size: 0.68rem;
  font-weight: 700;
}
.plan--premium .tick { background: rgba(255, 255, 255, 0.24); color: #fff; }
.plan-flag {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--orange);
  color: #2A1500;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.plan .app-badge { display: inline-block; margin-top: 4px; }
.plan-footnote { text-align: center; color: var(--ink-3); font-size: 0.88rem; margin-top: 24px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 22px;
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  font-weight: 650;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--ink-3);
  border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.22s;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-item[open] summary { color: var(--warm-ink); }
.faq-answer { padding: 0 0 20px; color: var(--ink-2); font-size: 0.97rem; max-width: 62ch; }
.faq-answer a { font-weight: 600; }

/* ==========================================================================
   Closing CTA + footer
   ========================================================================== */
.closing-cta {
  position: relative;
  background: var(--brand-deep);
  color: var(--on-brand);
  border-radius: var(--r-lg);
  padding: 64px 40px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.closing-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 60% at 15% 10%, rgba(255, 255, 255, 0.16) 0%, transparent 70%),
    radial-gradient(40% 55% at 88% 85%, rgba(255, 176, 37, 0.28) 0%, transparent 70%);
  pointer-events: none;
}
.closing-cta > * { position: relative; }
.closing-cta h2 { margin-bottom: 14px; }
.closing-cta p { color: rgba(255, 255, 255, 0.90); max-width: 520px; margin: 0 auto 30px; }
.closing-cta .requirement { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); margin: 20px auto 0; }

.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-about p { color: var(--ink-2); font-size: 0.94rem; max-width: 40ch; margin-top: 16px; }
.footer-col h3 {
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--ink-2); font-size: 0.94rem; }
.footer-col a:hover { color: var(--ink); text-decoration: none; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
  font-size: 0.86rem;
  color: var(--ink-3);
}
.footer-bottom a { color: var(--ink-3); }
.footer-bottom a:hover { color: var(--ink); }

/* ==========================================================================
   Static pages (privacy) + 404
   ========================================================================== */
.page-head {
  padding: calc(var(--header-h) + 72px) 0 40px;
  text-align: center;
  position: relative;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255, 176, 37, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.page-head .wrap { position: relative; }
.page-head p { max-width: 560px; margin: 16px auto 0; color: var(--ink-2); font-size: 1.08rem; }

/* A page-head already carries generous bottom padding; a full 96px section on
   top of it leaves a dead band before the first line of copy. */
.page-head + .section { padding-top: 52px; }

.legal {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: 24px var(--gutter) 96px;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.75;
}
.legal > * + * { margin-top: 1.1em; }
.legal h2 { font-size: 1.5rem; color: var(--ink); margin-top: 2em; margin-bottom: 0.2em; }
.legal h3 { font-size: 1.15rem; color: var(--ink); margin-top: 1.4em; margin-bottom: 0.2em; }
.legal strong { color: var(--ink); font-weight: 650; }
.legal ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 0.5em; }
.legal li::marker { color: var(--amber); }
.legal a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal .muted { color: var(--ink-3); font-size: 0.92rem; }

.notfound {
  min-height: calc(100vh - 220px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 60px) 0 80px;
}
.notfound .code {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  background: var(--brand-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.notfound p { color: var(--ink-2); margin: 14px auto 30px; max-width: 44ch; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .more-features { grid-template-columns: repeat(2, 1fr); }
  .hero-shots .phone { width: 200px; }
  .hero-shots .phone--center { width: 228px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 56px; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split-shots { order: -1; }
  .split-shots .phone { width: 45%; max-width: 200px; }
  .split-shots .phone:first-child { transform: rotate(-4deg) translateX(12px); }
  .split-shots .phone:last-child { transform: rotate(4deg) translateX(-12px); margin-top: 28px; }
  .answer-grid { grid-template-columns: 1fr; gap: 28px; }
  .persona-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .section { padding: 68px 0; }
  .section-head { margin-bottom: 40px; }

  .nav, .nav-cta { display: none; }
  .nav-toggle { display: block; }

  .nav.is-open {
    display: block;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 18px var(--gutter) 24px;
  }
  .nav.is-open ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav.is-open a {
    display: block;
    padding: 12px 4px;
    font-size: 1.02rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav-cta-mobile { display: block; margin-top: 18px; }
  .nav.is-open .nav-cta-mobile a { border: 0; text-align: center; color: var(--on-brand); }

  .hero { padding-top: calc(var(--header-h) + 48px); }
  .hero-shots {
    margin-top: 48px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 var(--gutter) 8px;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    justify-content: flex-start;
  }
  .hero-shots::-webkit-scrollbar { display: none; }
  .hero-shots .phone,
  .hero-shots .phone--center {
    width: 216px;
    transform: none;
    scroll-snap-align: center;
    flex: 0 0 auto;
  }

  .strip ul { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }

  .feature-grid { grid-template-columns: 1fr; }
  .more-features { grid-template-columns: 1fr; }

  .closing-cta { padding: 48px 26px; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { justify-content: center; text-align: center; }

  /* Comparison table → stacked cards */
  .vs-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: 100%; }
  .vs thead { display: none; }
  .vs tbody tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 6px 18px 12px;
  }
  .vs tbody tr + tr { margin-top: 12px; }
  .vs tbody th {
    width: auto;
    padding: 14px 0 10px;
    font-size: 0.98rem;
  }
  .vs tbody tr + tr th, .vs tbody tr + tr td { border-top: 0; }
  .vs td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    background: transparent !important;
  }
  .vs td::before {
    content: attr(data-col);
    font-size: 0.82rem;
    color: var(--ink-3);
    font-weight: 600;
  }
  .vs td.col-us::before { color: var(--warm-ink); }
}

@media (max-width: 400px) {
  .app-badge img { height: 48px; }
  .plan { padding: 28px 22px; }
  .feature { padding: 26px 22px; }
  .hero-trust { gap: 6px 16px; font-size: 0.85rem; }
}

/* ==========================================================================
   Motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .btn:hover, .app-badge:hover, .feature:hover { transform: none; }
}

@media print {
  .site-header, .closing-cta, .article-cta, .site-footer { display: none; }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   Blog — cards (teaser + index) and article pages
   ========================================================================== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card:hover .post-card-title { color: var(--warm-ink); }

.post-card-media { aspect-ratio: 1200 / 630; background: var(--bg-sunk); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }

.post-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--orange-ink);
  background: var(--orange-wash);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}
a.tag:hover { text-decoration: none; filter: brightness(0.97); }

.post-card-title { font-size: 1.18rem; margin-bottom: 10px; transition: color 0.18s; }
.post-card-title a { color: inherit; }
.post-card-title a:hover { text-decoration: none; }
.post-card-title a::after { content: ''; position: absolute; inset: 0; }

.post-card-excerpt { font-size: 0.94rem; color: var(--ink-2); margin-bottom: 18px; }
.post-card-more { margin-top: auto; font-weight: 650; font-size: 0.92rem; color: var(--warm-ink); }

.blog-teaser-foot { text-align: center; margin-top: 44px; }

/* Blog index + article */
.crumbs { font-size: 0.86rem; color: var(--ink-3); margin-bottom: 22px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { padding: 0 7px; }

.article { padding: calc(var(--header-h) + 56px) 0 96px; }
.article-head { max-width: var(--wrap-narrow); margin: 0 auto; text-align: center; }
.article-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 20px; }
.article-head .post-meta { justify-content: center; margin-bottom: 20px; }
.article-head .lede { max-width: 60ch; margin: 0 auto; }

.article-hero { max-width: 940px; margin: 44px auto 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.article-hero img,
.prose .post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.prose {
  max-width: 65ch;
  margin: 56px auto 0;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.prose > * + * { margin-top: 1.35em; }
.prose h2 { font-size: 1.72rem; color: var(--ink); margin-top: 2.4em; margin-bottom: -0.35em; }
.prose h3 { font-size: 1.22rem; color: var(--ink); margin-top: 2em; margin-bottom: -0.5em; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.7em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--amber); }
.prose blockquote {
  border-left: 4px solid var(--orange);
  background: var(--orange-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 22px;
  color: var(--ink);
  font-size: 1.05rem;
}
.prose blockquote p + p { margin-top: 0.8em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.prose .post-figure { margin: 2.6em min(0px, calc((100% - 860px) / 2)); }
.prose .post-figure figcaption { margin-top: 0.8em; font-size: 0.9rem; line-height: 1.55; color: var(--ink-3); text-align: center; }

.post-faq { max-width: 65ch; margin: 64px auto 0; }
.post-faq > h2 { font-size: 1.5rem; color: var(--ink); margin-bottom: 20px; }
.post-faq-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.post-faq-item summary {
  cursor: pointer;
  font-weight: 620;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.post-faq-item summary::-webkit-details-marker { display: none; }
.post-faq-item summary::after { content: "+"; color: var(--amber); font-size: 1.3rem; line-height: 1; }
.post-faq-item[open] summary::after { content: "−"; }
.post-faq-item p { margin-top: 12px; color: var(--ink-2); line-height: 1.7; }

.article-foot {
  max-width: 65ch;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.94rem;
}

.article-cta {
  max-width: 780px;
  margin: 56px auto 0;
  background: var(--brand-deep);
  color: var(--on-brand);
  border-radius: var(--r-lg);
  padding: 40px 34px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.article-cta h2 { font-size: 1.7rem; margin-bottom: 10px; }
.article-cta p { color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin: 0 auto 24px; }

.more-posts { margin-top: 96px; }

@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .post-grid { grid-template-columns: 1fr; }
  .prose { font-size: 1.02rem; }
  .article-foot { flex-direction: column; align-items: flex-start; }
  .article-cta { padding: 34px 24px; }
}