/*
 * The website standard (docs/design/site-system.html), shared by every page.
 * This is the start of the one stylesheet (website plan, decision 2): today it
 * holds the app's tokens and the core site pieces every page shares, the
 * header and footer (step 2). Sections move here as they're rebuilt.
 *
 * Values are the app's (src/design/tokens.ts, light theme, Rhubarb). The site
 * is light only (decision W2). `.gf-ink` is the app's dark theme applied to
 * one region, used by the footer (decision W1).
 */

/*
 * Fraunces SemiBold (600, with its optical-size axis), the headings' face,
 * served from this site rather than Google Fonts so a visit doesn't hand a
 * visitor's address to anyone else (legal review 2026-10, fix 3). These are
 * Google Fonts' v38 files and unicode ranges, latin and latin-ext; the page
 * shells preload the latin one. Copyright 2020 The Fraunces Project Authors
 * (github.com/undercasetype/Fraunces), SIL Open Font License 1.1, which ships
 * beside them as assets/fonts/OFL.txt. /assets/fonts/ is cached for a year, so
 * a new version needs a new file name. The url()s stay relative: Studio's
 * editor imports this file, and Vite bundles the fonts into Studio from them.
 */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/fraunces-v38-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/fraunces-v38-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --gf-bg: #F7F6F3;
  --gf-surface: #FFFFFF;
  --gf-sunk: #EEEDE9;
  --gf-border: #E2E0DA;
  --gf-divider: #EDEBE6;
  --gf-t1: #1A1917;
  --gf-t2: #5C594F;
  --gf-t3: #8A867A;
  --gf-accent: #B02A5B;
  --gf-accent-subtle: #F9E4EC;
  --gf-accent-on: #FFFFFF;
  --gf-danger: #B3261E;
  --gf-scrim: rgba(20, 19, 18, 0.22);
  --gf-overlay-shadow: 0 18px 40px rgba(20, 19, 18, 0.14);
  --gf-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gf-display: "Fraunces", Georgia, "Times New Roman", serif;
}

.gf-ink {
  --gf-bg: #141312;
  --gf-surface: #1E1C1A;
  --gf-sunk: #282521;
  --gf-border: #35322E;
  --gf-divider: #2B2825;
  --gf-t1: #F5F3EF;
  --gf-t2: #B0AAA0;
  --gf-t3: #7D776D;
  --gf-accent: #F58FB4;
  --gf-accent-subtle: #3A1E2A;
  --gf-accent-on: #141312;
}

[hidden] { display: none !important; }

/* Widths: the app's compact (<500), regular (500-899) and wide (900+). */
.gf-wrap { width: min(100% - 64px, 1200px); margin-inline: auto; }
/* 24px a side on tablets and phones alike (owner, 2026-10-23, with the shared meal planning page). */
@media (max-width: 899px) { .gf-wrap { width: calc(100% - 48px); } }

/* Focus and skip link (w-focus) */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 2px; }
.gf-skip {
  position: fixed; z-index: 100; top: 8px; left: 8px;
  display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
  border: 1px solid var(--gf-border); border-radius: 10px; background: var(--gf-surface);
  color: var(--gf-t1); font: 600 16px/20px var(--gf-font); text-decoration: none;
  transform: translateY(-200%);
}
.gf-skip:focus { transform: none; }

/* Button (w-button: the app's c-button) */
.gf-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--gf-accent); color: var(--gf-accent-on);
  font: 600 17px/24px var(--gf-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.gf-button:hover { filter: brightness(0.96); }
.gf-button:active { opacity: 0.85; }
.gf-button--secondary { background: var(--gf-accent-subtle); color: var(--gf-accent); }
/* Loading (w-button): the spinner and the word. Still when motion is reduced. */
.gf-button[data-busy]::before { content: ""; flex: none; width: 18px; height: 18px; border: 2.2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gf-spin 0.8s linear infinite; }
@keyframes gf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gf-button[data-busy]::before { animation: none; } }
.gf-button--compact { height: 44px; padding: 0 16px; font-size: 16px; }
.gf-button--block { width: 100%; }

/* Header (w-header) */
.gf-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--gf-bg); border-bottom: 1px solid var(--gf-divider);
  font-family: var(--gf-font);
}
.gf-header__inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.gf-header__brand { flex: none; }
.gf-header__brand img { display: block; width: auto; height: 36px; }
.gf-header__nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.gf-header__nav a { color: var(--gf-t2); font-size: 15px; line-height: 20px; font-weight: 500; text-decoration: none; }
.gf-header__nav a:hover { color: var(--gf-t1); }
.gf-header__nav a[aria-current="page"] { color: var(--gf-t1); font-weight: 600; }
.gf-header__menu {
  display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--gf-t1); cursor: pointer;
}
.gf-header__menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gf-header__menu .gf-icon-close { display: none; }
.gf-menu-cta { display: none; }
/* The Features menu (w-header): the language menu's panel, opened on a click. No tint on hover (owner, 2026-10-23). */
.h-feat { position: relative; }
.h-feat__button { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--gf-t2); font: 500 15px/20px var(--gf-font); cursor: pointer; }
.h-feat__button:hover, .h-feat__button[aria-expanded="true"] { color: var(--gf-t1); }
.h-feat__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.h-feat__button[aria-expanded="true"] .h-feat__chev { transform: rotate(180deg); }
.h-feat__menu { position: absolute; z-index: 50; top: calc(100% + 6px); left: -12px; min-width: 240px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); box-shadow: var(--gf-overlay-shadow); }
.h-feat__menu[hidden], .gf-menu-sub[hidden] { display: none; }
.gf-header__nav .h-feat__menu a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--gf-t1); font: 400 16px/22px var(--gf-font); }
.gf-header__nav .h-feat__menu a:hover { background: var(--gf-bg); }
.gf-header__nav .h-feat__menu a[aria-current="page"], .gf-header__nav .gf-menu-sub a[aria-current] { color: var(--gf-accent); font-weight: 600; }
.gf-header__nav .h-feat__menu a[aria-current="page"]::after { content: "✓"; }
@media (prefers-reduced-motion: reduce) { .h-feat__chev { transition: none; } }
.gf-scrim { position: fixed; inset: 0; z-index: 30; background: var(--gf-scrim); }

@media (max-width: 899px) {
  .gf-header__inner { gap: 8px; height: 56px; }
  .gf-header__brand img { height: 30px; }
  .gf-header__cta { margin-left: auto; }
  .gf-header__menu { display: grid; }
  .gf-header__nav {
    position: absolute; top: 100%; right: 0; left: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--gf-surface); border-bottom: 1px solid var(--gf-border); box-shadow: var(--gf-overlay-shadow);
    /* With Features and Language both open, the menu can outgrow the screen: it scrolls. */
    max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
  }
  .gf-header__nav a {
    display: flex; align-items: center; min-height: 52px; padding: 0 16px;
    border-top: 1px solid var(--gf-divider); color: var(--gf-t1); font-size: 17px; line-height: 24px;
  }
  .gf-header__nav a:first-child { border-top: 0; }
  .gf-header__nav .gf-menu-cta { display: block; padding: 16px; }
  .gf-header__nav .gf-menu-cta a { min-height: 0; padding: 0 20px; border-top: 0; color: var(--gf-accent-on); font-size: 17px; }
  .gf-header.is-menu-open { background: var(--gf-surface); }
  .gf-header.is-menu-open .gf-header__nav { display: flex; }
  .gf-header.is-menu-open .gf-header__cta { display: none; }
  .gf-header.is-menu-open .gf-header__menu { margin-left: auto; }
  .gf-header.is-menu-open .gf-icon-menu { display: none; }
  .gf-header.is-menu-open .gf-icon-close { display: block; }
}

/* The language menu (h-lang): only on a page that can be read in more than one language. */
.h-lang { position: relative; flex: none; }
.h-lang__button { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--gf-t2); font: 500 15px/20px var(--gf-font); cursor: pointer; }
.h-lang__button:hover, .h-lang__button[aria-expanded="true"] { color: var(--gf-t1); background: var(--gf-sunk); }
.h-lang__button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.h-lang__button .h-lang__chev { width: 14px; height: 14px; }
.h-lang__menu { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; min-width: 200px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); box-shadow: var(--gf-overlay-shadow); }
.h-lang__menu[hidden] { display: none; }
.h-lang__menu a, .gf-menu-langs a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--gf-t1); font: 400 16px/22px var(--gf-font); text-decoration: none; }
.h-lang__menu a:hover { background: var(--gf-bg); }
.h-lang__menu a[aria-current="true"], .gf-menu-langs a[aria-current="true"] { color: var(--gf-accent); font-weight: 600; }
.h-lang__menu a[aria-current="true"]::after, .gf-menu-langs a[aria-current="true"]::after { content: "✓"; }
.gf-menu-langs { display: none; }

/* The offer line (h-lang-offer): the page in the visitor's language, never a redirect. */
.h-lang-offer { border-bottom: 1px solid var(--gf-divider); background: var(--gf-surface); font-family: var(--gf-font); }
.h-lang-offer__inner { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; line-height: 20px; }
.h-lang-offer__text { flex: 1; min-width: 0; color: var(--gf-t2); }
.h-lang-offer__go { color: var(--gf-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.h-lang-offer__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -12px; border: 0; background: transparent; color: var(--gf-t2); font-size: 18px; cursor: pointer; }

@media (max-width: 899px) {
  .gf-header .h-lang { display: none; }
  /* In the open menu, Features and Language are rows that open in place. */
  .gf-header__nav .gf-menu-langs { display: block; }
  .gf-header__nav .h-feat__button, .gf-menu-row { display: flex; align-items: center; gap: 0; width: 100%; height: auto; min-height: 52px; margin: 0; padding: 0 16px; border: 0; border-top: 1px solid var(--gf-divider); border-radius: 0; background: transparent; color: var(--gf-t1); font: 400 17px/24px var(--gf-font); text-align: left; cursor: pointer; }
  .gf-header__nav .h-feat:first-child .h-feat__button { border-top: 0; }
  .gf-header__nav .h-feat__chev, .gf-menu-row__chev { flex: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--gf-t2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
  .gf-menu-row[aria-expanded="true"] .gf-menu-row__chev { transform: rotate(180deg); }
  .gf-menu-row__value { margin-left: auto; margin-right: 8px; color: var(--gf-t2); }
  .gf-menu-row__value + .gf-menu-row__chev { margin-left: 0; }
  .gf-header__nav .h-feat__menu { position: static; min-width: 0; padding: 0 0 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .gf-menu-sub { margin: 0; padding: 0 0 6px; list-style: none; }
  .gf-header__nav .h-feat__menu a, .gf-header__nav .gf-menu-sub a { min-height: 48px; padding: 0 16px 0 32px; border-top: 0; border-radius: 0; color: var(--gf-t1); font-size: 17px; line-height: 24px; }
  .gf-header__nav .h-feat__menu a:hover { background: transparent; }
  .gf-header__nav .gf-menu-sub a[aria-current="true"]::after, .gf-header__nav .h-feat__menu a[aria-current="page"]::after { content: "✓"; margin-left: auto; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .gf-menu-row__chev { transition: none; } }
@media (max-width: 599px) {
  .h-lang-offer__inner { flex-wrap: wrap; gap: 0 12px; padding-block: 6px; }
}

/* Footer (w-footer), Ink */
.gf-footer { padding: 40px 0 32px; background: var(--gf-bg); color: var(--gf-t2); font: 14px/20px var(--gf-font); }
.gf-footer__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.gf-footer__brand img { display: block; width: auto; height: 32px; }
.gf-footer__line { max-width: 340px; margin: 12px 0 0; color: var(--gf-t2); }
.gf-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.gf-footer__nav a { color: var(--gf-t1); font-weight: 500; text-decoration: none; }
.gf-footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Cookie settings (w-footer-legal): a button that looks like the links beside it. */
.gf-footer__button { padding: 0; border: 0; background: none; color: var(--gf-t1); font: 500 14px/20px var(--gf-font); text-align: left; cursor: pointer; }
.gf-footer__button:hover { text-decoration: underline; text-underline-offset: 3px; }
.gf-footer__bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--gf-border); }
@media (max-width: 499px) {
  .gf-footer { padding: 32px 0 24px; }
  .gf-footer__top { flex-direction: column; }
  .gf-footer__nav { flex-direction: column; gap: 0; }
  .gf-footer__nav a, .gf-footer__button { display: flex; align-items: center; min-height: 44px; }
}

/*
 * The cookie notice and Cookie settings (w-consent). Klaro keeps the answer;
 * these are the site's own pieces. The notice is a labelled region over the
 * page, never a wall: a card at the bottom left, a bar across the bottom
 * below 600. The page keeps room for it at its end (lib/consent.js measures).
 */
.gf-consent {
  position: fixed; z-index: 35; bottom: 24px; left: 24px;
  width: 360px; max-width: calc(100% - 48px); padding: 16px;
  border: 1px solid var(--gf-border); border-radius: 14px;
  background: var(--gf-surface); box-shadow: var(--gf-overlay-shadow);
  color: var(--gf-t1); font: 15px/22px var(--gf-font);
}
.gf-consent p { margin: 0; }
.gf-consent a { color: var(--gf-accent); font-weight: 500; }
/* Accept and Decline: the same size and strength (Decision 5). */
.gf-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.gf-consent-open body { padding-bottom: var(--gf-consent-room, 0px); }
@media (max-width: 599px) {
  .gf-consent { right: 0; bottom: 0; left: 0; width: auto; max-width: none; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
}

.gf-consent-dialog {
  width: 400px; max-width: calc(100% - 32px); padding: 20px;
  border: 1px solid var(--gf-border); border-radius: 14px;
  background: var(--gf-surface); box-shadow: var(--gf-overlay-shadow);
  color: var(--gf-t1); font: 15px/22px var(--gf-font);
}
.gf-consent-dialog::backdrop { background: var(--gf-scrim, rgba(20, 19, 18, 0.22)); }
.gf-consent-dialog__title { margin: 0; font: 600 20px/26px var(--gf-font); }
.gf-consent-dialog__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--gf-divider); }
.gf-consent-dialog__title + .gf-consent-dialog__row { margin-top: 12px; }
label.gf-consent-dialog__row { cursor: pointer; }
.gf-consent-dialog__row b { display: block; font-weight: 600; }
.gf-consent-dialog__row span span { display: block; color: var(--gf-t2); font-size: 14px; line-height: 19px; }
.gf-consent-dialog__actions { margin-top: 12px; }

/* The switch (w-consent): on is the accent, the knob moves; never preticked. */
.gf-switch {
  position: relative; flex: none; width: 51px; height: 31px; margin: 0;
  border-radius: 999px; background: var(--gf-border); cursor: pointer;
  appearance: none; -webkit-appearance: none; transition: background-color 0.2s;
}
.gf-switch::before {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 999px; background: var(--gf-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  content: ""; transition: transform 0.2s;
}
.gf-switch:checked { background: var(--gf-accent); }
.gf-switch:checked::before { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .gf-switch, .gf-switch::before { transition: none; }
}

/* ---- Type and small pieces (f-type, c-tag) ---------------------------- */
.gf-display-xl { margin: 0; font: 600 56px/60px var(--gf-display); letter-spacing: -0.02em; text-wrap: pretty; }
.gf-display-l { margin: 0; font: 600 44px/50px var(--gf-display); letter-spacing: -0.02em; text-wrap: pretty; }
.gf-display-m { margin: 0; font: 600 28px/34px var(--gf-display); letter-spacing: -0.02em; }
.gf-lede { margin: 0; color: var(--gf-t2); font: 20px/30px var(--gf-font); text-wrap: pretty; }
.gf-meta { color: var(--gf-t2); font: 14px/19px var(--gf-font); }
.gf-eyebrow { margin: 0; color: var(--gf-t2); font: 700 13px/16px var(--gf-font); letter-spacing: 0.8px; text-transform: uppercase; }
.gf-item { font: 500 18px/24px var(--gf-font); }
.gf-strong { margin: 0; font: 600 17px/24px var(--gf-font); }
.gf-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gf-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gf-tag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--gf-sunk); color: var(--gf-t2); font: 600 13px/18px var(--gf-font); white-space: nowrap; }
.gf-tag--small { height: 20px; padding: 0 8px; font-size: 12px; }
.gf-tag--positive { background: var(--gf-accent-subtle); color: var(--gf-accent); }
.gf-tag--pro { height: 20px; padding: 0 7px; background: var(--gf-accent); color: var(--gf-accent-on); font-size: 11px; letter-spacing: 0.05em; vertical-align: 2px; }
.gf-button--tertiary { height: 44px; padding: 0 4px; background: transparent; color: var(--gf-accent); font-weight: 500; }
.gf-button--on-accent { background: var(--gf-accent-on); color: var(--gf-accent); }
.gf-button[disabled], .gf-button[aria-disabled="true"] { opacity: 0.5; cursor: default; }

/* ---- Recipe page (site-system.html, recipe pieces) --------------------- */
[data-recipe] { color: var(--gf-t1); font: 17px/26px var(--gf-font); }
/* "Jump to recipe" and the calls to action land below the sticky header. */
[data-recipe] [id] { scroll-margin-top: 72px; }

.gf-recipe-hero { padding: 56px 0 64px; background: var(--gf-bg); }
.gf-recipe-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "crumbs photo" "title photo" "lede photo" "facts photo" "actions photo"; column-gap: 56px; align-items: start; }
.gf-crumbs { grid-area: crumbs; margin-top: 24px; color: var(--gf-t2); font-size: 14px; line-height: 19px; }
.gf-crumbs a { color: inherit; text-decoration: underline; text-decoration-color: var(--gf-border); text-underline-offset: 3px; }
.gf-recipe-hero h1 { grid-area: title; margin-top: 16px; }
.gf-recipe-hero .gf-lede { grid-area: lede; max-width: 560px; margin-top: 16px; }
.gf-facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0 0; padding: 14px 0; border-block: 1px solid var(--gf-divider); }
.gf-facts dt { color: var(--gf-t2); font: 700 13px/16px var(--gf-font); letter-spacing: 0.8px; text-transform: uppercase; }
.gf-facts dd { margin: 2px 0 0; font: 600 17px/24px var(--gf-font); font-variant-numeric: tabular-nums; }
.gf-recipe-hero__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; }
.gf-recipe-hero__photo { grid-area: photo; margin: 24px 0 0; }
/* Photos are shown no larger than the app's own (at most 800 wide; f-image). */
.gf-recipe-hero__photo img { display: block; width: 100%; max-width: 800px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; background: var(--gf-sunk); }

.gf-recipe-body { padding: 64px 0 80px; background: var(--gf-surface); border-top: 1px solid var(--gf-divider); }
.gf-recipe-body__grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "ingredients directions" "grocery directions" "nutrition directions"; column-gap: 64px; row-gap: 16px; align-items: start; }
.gf-recipe-ingredients { grid-area: ingredients; display: flex; flex-direction: column; gap: 12px; }
.gf-steppercard { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); }
.gf-steppercard .gf-item, .gf-steppercard .gf-meta { display: block; }
.gf-stepper { display: inline-flex; flex: none; align-items: center; overflow: hidden; border: 1px solid var(--gf-border); border-radius: 10px; }
.gf-stepper button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--gf-accent); font: 400 22px/1 var(--gf-font); cursor: pointer; }
.gf-stepper button:disabled { color: var(--gf-t3); opacity: 0.5; cursor: default; }
.gf-stepper output { min-width: 40px; text-align: center; font: 600 17px/24px var(--gf-font); font-variant-numeric: tabular-nums; }
.gf-ingredient-list { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); }
.gf-ingredient-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--gf-divider); }
.gf-ingredient-list li:first-child { border-top: 0; }
.gf-ingredient-list small { color: var(--gf-t2); font-size: inherit; }
.gf-ingredient-list b { font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.gf-ingredient-list .gf-ingredient-list__section { display: block; padding-top: 16px; color: var(--gf-t2); font: 600 14px/19px var(--gf-font); }
.gf-grocery-prompt { grid-area: grocery; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 16px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-bg); }
.gf-grocery-prompt__icon { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--gf-accent-subtle); color: var(--gf-accent); }
.gf-grocery-prompt__icon .gf-icon { width: 22px; height: 22px; }
.gf-grocery-prompt p { margin: 0; color: var(--gf-t2); font-size: 15px; line-height: 21px; }
.gf-grocery-prompt .gf-button { justify-self: start; margin-top: 10px; }
.gf-recipe-directions { grid-area: directions; }
.gf-recipe-directions__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.gf-steps { margin: 0; padding: 0; list-style: none; }
.gf-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--gf-divider); scroll-margin-top: 80px; }
.gf-steps li:first-child { border-top: 0; }
.gf-steps li:target { background: linear-gradient(var(--gf-accent-subtle), var(--gf-accent-subtle)) no-repeat 0 0 / 4px 100%; }
.gf-step__number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--gf-accent-subtle); color: var(--gf-accent); font: 700 14px/1 var(--gf-font); }
.gf-steps p { margin: 0; }
.gf-steps .gf-step__uses { margin-top: 8px; color: var(--gf-t2); font-size: 14px; line-height: 19px; }
.gf-step__timers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gf-nutrition { grid-area: nutrition; margin-top: 8px; }
.gf-nutrition__cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 0; overflow: hidden; border: 1px solid var(--gf-border); border-radius: 14px; background: var(--gf-surface); }
.gf-nutrition__cells div { display: flex; flex-direction: column-reverse; padding: 12px; border-left: 1px solid var(--gf-divider); }
.gf-nutrition__cells div:first-child { border-left: 0; }
.gf-nutrition__cells dt { color: var(--gf-t2); font-size: 14px; line-height: 19px; }
.gf-nutrition__cells dd { margin: 0; font: 600 17px/24px var(--gf-font); font-variant-numeric: tabular-nums; }
.gf-nutrition p { margin: 8px 0 0; color: var(--gf-t2); font-size: 14px; line-height: 19px; }

.gf-cook-along { padding: 96px 0; background: var(--gf-bg); color: var(--gf-t1); }
.gf-cook-along__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 72px; }
.gf-cook-along .gf-display-l { margin-top: 8px; }
.gf-cook-along .gf-lede { max-width: 520px; margin: 16px 0 28px; }
/* The phone shows the app's Cooking screen in the app's light theme (ui-system.html, k-step, k-timer). */
.gf-phone { width: 352px; padding: 10px; border-radius: 34px; background: #000000; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.gf-phone__screen {
  --gf-bg: #F7F6F3; --gf-surface: #FFFFFF; --gf-sunk: #EEEDE9; --gf-border: #E2E0DA; --gf-divider: #EDEBE6;
  --gf-t1: #1A1917; --gf-t2: #5C594F; --gf-t3: #8A867A; --gf-accent: #B02A5B; --gf-accent-subtle: #F9E4EC; --gf-accent-on: #FFFFFF;
  display: flex; flex-direction: column; gap: 14px; min-height: 640px; padding: 20px 16px 16px; border-radius: 26px; background: var(--gf-bg); color: var(--gf-t1);
}
.gf-stepnav { display: flex; gap: 8px; overflow: hidden; }
.gf-stepnav span { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--gf-border); border-radius: 999px; color: var(--gf-t2); font: 600 16px/1 var(--gf-font); }
.gf-stepnav .is-done { border-color: var(--gf-accent-subtle); background: var(--gf-accent-subtle); color: var(--gf-accent); }
.gf-stepnav .is-current { border-color: var(--gf-accent); background: var(--gf-accent); color: var(--gf-accent-on); }
.gf-cook-step { margin: 0; font: 500 30px/40px var(--gf-font); letter-spacing: -0.01em; }
.gf-timer { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); }
.gf-timer__label { font: 600 17px/22px var(--gf-font); }
.gf-timer__time { font: 600 56px/62px var(--gf-font); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.gf-timer__bar { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: var(--gf-sunk); }
.gf-timer__bar i { display: block; width: var(--gf-timer-progress, 0%); height: 100%; border-radius: 3px; background: var(--gf-accent); transition: width 1s linear; }
.gf-timer__pause { margin-top: 12px; }
.gf-cook-along__footer { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 10px; margin-top: auto; }
.gf-cook-along__footer .gf-button { height: 64px; font-size: 19px; }

.gf-questions { padding: 80px 0; background: var(--gf-bg); }
.gf-questions__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 56px; }
.gf-questions details { border-top: 1px solid var(--gf-border); }
.gf-questions details:last-child { border-bottom: 1px solid var(--gf-border); }
.gf-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; font: 500 18px/24px var(--gf-font); cursor: pointer; list-style: none; }
.gf-questions summary::-webkit-details-marker { display: none; }
.gf-questions summary::after { flex: none; width: 10px; height: 10px; border-right: 1.8px solid var(--gf-t2); border-bottom: 1.8px solid var(--gf-t2); content: ""; transform: rotate(45deg) translateY(-3px); }
.gf-questions details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.gf-questions details p { max-width: 640px; margin: 0 0 16px; color: var(--gf-t2); }

.gf-remix { padding: 88px 0; background: var(--gf-accent-subtle); }
.gf-remix__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 56px; }
.gf-remix .gf-display-l { margin-top: 8px; }
.gf-remix .gf-lede { max-width: 500px; margin: 16px 0 28px; }
.gf-remix__card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--gf-border); border-radius: 24px; background: var(--gf-surface); }
.gf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 1px solid var(--gf-border); border-radius: 999px; background: var(--gf-surface); color: var(--gf-t2); font: 500 15px/20px var(--gf-font); cursor: pointer; }
.gf-chip[aria-pressed="true"] { border-color: var(--gf-accent-subtle); background: var(--gf-accent-subtle); color: var(--gf-accent); font-weight: 600; }
.gf-chip[aria-pressed="true"]::before { content: "✓"; }
.gf-remix__lines { margin: 0 0 8px; padding: 4px 16px; list-style: none; border: 1px solid var(--gf-border); border-radius: 14px; }
.gf-remix__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--gf-divider); }
.gf-remix__lines li:first-child { border-top: 0; }
.gf-remix__lines .is-removed, .gf-remix__lines .is-removed b { color: var(--gf-t2); }
.gf-remix__lines .is-removed > span { text-decoration: line-through; }
.gf-remix__lines b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-remix__pro { margin: 0; padding-top: 12px; border-top: 1px solid var(--gf-divider); color: var(--gf-t2); font-size: 14px; line-height: 19px; }

.gf-more-recipes { padding: 80px 0; background: var(--gf-surface); }
.gf-more-recipes__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.gf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gf-card { display: block; overflow: hidden; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); color: var(--gf-t1); text-decoration: none; }
.gf-card:hover { border-color: var(--gf-t3); }
.gf-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--gf-sunk); }
.gf-card__body { display: block; padding: 12px 14px 14px; }
.gf-card__body .gf-item, .gf-card__body .gf-meta { display: block; }
.gf-card__body .gf-meta { margin-top: 4px; }

/* Call to action (s-cta): the Rhubarb band. */
.gf-cta-band { padding: 80px 0; background: var(--gf-accent); color: var(--gf-accent-on); }
.gf-cta-band .gf-eyebrow { color: rgba(255, 255, 255, 0.86); }
.gf-cta-band .gf-display-l { margin-top: 8px; }
.gf-cta-band__body { max-width: 560px; margin: 16px 0 24px; font: 20px/30px var(--gf-font); }
.gf-cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gf-signup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: min(100%, 520px); }
.gf-signup input[type="email"] { min-width: 0; height: 52px; padding: 0 14px; border: 1px solid var(--gf-border); border-radius: 10px; background: #FFFFFF; color: #1A1917; font: 17px var(--gf-font); }
.gf-signup__message { grid-column: 1 / -1; margin: 2px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 19px; }
/* Apple's and Google's own badge artwork (w-stores), 52 tall, never redrawn. The row's gap is the quarter-height clear space both ask for. */
.gf-store { display: inline-flex; flex: none; border-radius: 10px; line-height: 0; }
.gf-store img { display: block; width: auto; height: 52px; }
.gf-stores-soon { margin: 14px 0 0; font-size: 14px; line-height: 19px; }
.gf-cta-band .gf-stores-soon { color: rgba(255, 255, 255, 0.86); }
html[data-device="ios"] .gf-store--android, html[data-device="ios"] .gf-store--web,
html[data-device="android"] .gf-store--ios, html[data-device="android"] .gf-store--web { display: none; }

/* The invite page, /join/<code> (j-invite): the code first, then the store for the device. A phone gets
   Open in Good Fork and its own line; a computer gets the QR card (w-stores) and the line about a phone. */
.j-invite { padding: 72px 0 64px; }
.j-invite__column { display: grid; justify-items: center; gap: 16px; max-width: 560px; text-align: center; }
.j-invite__code { margin: 4px 0; color: var(--gf-t1); font: 700 34px/40px var(--gf-font); letter-spacing: 6px; overflow-wrap: anywhere; }
.j-invite__stores { justify-content: center; }
.j-invite .gf-stores-soon { margin: 0; }
.j-invite__qr-card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; width: min(100%, 340px); margin-top: 8px; padding: 16px; border: 1px solid var(--gf-border); border-radius: 24px; background: var(--gf-surface); text-align: left; }
.j-invite__qr { display: block; border-radius: 4px; }
.j-invite__qr-card .gf-meta { margin: 6px 0 0; }
.j-invite__open { display: none; justify-items: center; gap: 8px; margin-top: 8px; }
.j-invite__open .gf-meta { margin: 0; }
.j-invite__line--phone { display: none; }
html[data-device] .j-invite__line--phone { display: block; }
html[data-device] .j-invite__line--computer, html[data-device] .j-invite__qr-card { display: none; }
html[data-device] .j-invite__open { display: grid; }

.gf-save-bar { position: fixed; z-index: 35; right: 18px; bottom: 18px; pointer-events: none; }
.gf-save-bar__inner { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); box-shadow: var(--gf-overlay-shadow); pointer-events: auto; }
.gf-save-bar img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.gf-save-bar__text { display: grid; max-width: 260px; margin-right: 8px; }
.gf-save-bar__text .gf-strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 899px) {
  .gf-display-xl { font-size: 44px; line-height: 48px; }
  .gf-display-l { font-size: 36px; line-height: 42px; }
  .gf-recipe-hero { padding: 8px 0 40px; }
  .gf-recipe-hero__grid { grid-template-columns: 1fr; grid-template-areas: "crumbs" "title" "photo" "lede" "facts" "actions"; }
  .gf-crumbs { margin-top: 16px; }
  .gf-recipe-hero__photo { margin-top: 20px; }
  .gf-recipe-body { padding: 32px 0 48px; }
  .gf-recipe-body__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "ingredients" "grocery" "directions" "nutrition"; }
  .gf-recipe-directions { margin-top: 24px; }
  .gf-cook-along, .gf-questions, .gf-remix, .gf-more-recipes, .gf-cta-band { padding: 56px 0; }
  .gf-cook-along__grid, .gf-questions__grid, .gf-remix__grid { grid-template-columns: 1fr; gap: 32px; }
  .gf-phone { justify-self: center; width: 100%; max-width: 340px; }
  .gf-cook-step { font-size: 26px; line-height: 34px; }
  .gf-cards { grid-template-columns: 1fr 1fr; }
  .gf-save-bar { right: 0; bottom: 0; left: 0; }
  .gf-save-bar__inner { border-width: 1px 0 0; border-radius: 0; padding: 12px 16px; }
  .gf-save-bar__text { flex: 1; min-width: 0; max-width: none; }
}
@media (max-width: 499px) {
  .gf-display-xl { font-size: 40px; line-height: 44px; }
  .gf-display-l { font-size: 32px; line-height: 38px; }
  .gf-display-m { font-size: 24px; line-height: 30px; }
  .gf-lede, .gf-cta-band__body { font-size: 18px; line-height: 28px; }
  .gf-recipe-hero__photo img { border-radius: 16px; }
  /* A column is never narrower than its longest word ("Preparación", "Vorbereitung"). */
  .gf-facts { display: grid; grid-template-columns: repeat(4, minmax(min-content, 1fr)); gap: 8px; }
  .gf-facts dt { font-size: 11px; letter-spacing: 0.5px; }
  .gf-recipe-hero__actions > .gf-button:first-child { width: 100%; }
  .gf-cards { grid-template-columns: 1fr; }
  .gf-card { display: grid; grid-template-columns: 112px 1fr; }
  .gf-card img { height: 100%; aspect-ratio: auto; }
  .gf-signup { grid-template-columns: 1fr; }
  .gf-cta-band__actions > :not(.gf-store) { width: 100%; justify-content: center; }
  /* On a phone the bar keeps the recipe's name and the button; the photo and times step back. */
  .gf-save-bar img, .gf-save-bar__text .gf-meta { display: none; }
  .gf-save-bar__text .gf-strong { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-timer__bar i { transition: none; }
}

/* ---- Pages (site-system.html: s-hero page and article layouts, s-text,
   s-cards on a list, the contents list, w-404; website step 5,
   docs/design/website/pages-mockup.html). Written by web/lib/site-page.js. -- */
.p-hero { padding: 72px 0 40px; }
.p-hero .gf-eyebrow { margin-bottom: 12px; }
.p-hero .gf-display-xl { max-width: 900px; overflow-wrap: break-word; }
.p-hero .gf-lede { max-width: 680px; margin-top: 16px; }
.p-hero__meta { margin: 16px 0 0; }
.p-section { padding: 8px 0 72px; }
.p-section--compact { padding-bottom: 40px; }
.p-section--generous { padding-bottom: 104px; }
.p-section--surface, .p-section--blush, .p-section--accent, .p-section--ink { padding-top: 56px; }
/* A plain section after a chapter starts with room, not against the band. */
.h-chapter + .p-section--page { padding-top: 56px; }
.p-section--surface { background: var(--gf-surface); }
.p-section--blush { background: var(--gf-accent-subtle); }
.p-section--accent { background: var(--gf-accent); color: var(--gf-accent-on); }
.p-section--accent .gf-eyebrow, .p-section--accent .gf-meta { color: rgba(255, 255, 255, 0.86); }
.p-section--accent .p-prose a { color: inherit; }
.p-section--ink { background: var(--gf-bg); color: var(--gf-t1); }
.p-section__inner > * + * { margin-top: 24px; }
.p-section__inner--narrow > * { max-width: 560px; }
.p-section__inner--standard > * { max-width: 680px; }
.p-heading .gf-eyebrow { margin-bottom: 8px; }
.p-heading--center { margin-inline: auto; text-align: center; }
.p-heading h2, .p-prose h2 { scroll-margin-top: 96px; }
.p-prose > :first-child { margin-top: 0; }
.p-prose > :last-child { margin-bottom: 0; }
.p-prose--large { font-size: 20px; line-height: 30px; }
.p-prose h2 { margin: 48px 0 12px; font: 600 28px/34px var(--gf-display); letter-spacing: -0.02em; }
.p-prose h3 { margin: 32px 0 8px; font: 600 17px/24px var(--gf-font); }
.p-prose h4 { margin: 24px 0 8px; font: 600 15px/22px var(--gf-font); }
.p-prose p, .p-prose ul, .p-prose ol, .p-prose blockquote, .p-prose pre { margin: 0 0 16px; }
.p-prose ul, .p-prose ol { padding-left: 24px; }
.p-prose li + li { margin-top: 6px; }
.p-prose a, .p-callout a { color: var(--gf-accent); text-decoration: underline; text-underline-offset: 3px; }
.p-prose blockquote { padding-left: 16px; border-left: 3px solid var(--gf-accent-subtle); color: var(--gf-t2); }
.p-prose hr, .p-divider { height: 1px; margin: 32px 0; border: 0; background: var(--gf-divider); }
.p-prose img { display: block; width: 100%; height: auto; border-radius: 16px; }
.p-prose table, .p-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.p-prose th, .p-prose td, .p-table th, .p-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--gf-divider); text-align: left; vertical-align: top; }
.p-table { margin: 0; }
.p-table figcaption { margin-bottom: 8px; }
.p-table__scroll { overflow-x: auto; }
.p-table th { color: var(--gf-t2); font-weight: 600; }
.p-table td:first-child { width: 34%; font-weight: 600; }
.p-image { margin: 0; }
.p-image img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--gf-sunk); }
.p-image--landscape img { aspect-ratio: 16 / 9; object-fit: cover; }
.p-image--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.p-image--square img { aspect-ratio: 1; object-fit: cover; }
.p-image figcaption { margin-top: 8px; }
.p-quote { margin: 0; padding: 24px; border-radius: 16px; background: var(--gf-accent-subtle); }
.p-quote blockquote { margin: 0; font: 600 24px/32px var(--gf-display); letter-spacing: -0.01em; }
.p-quote figcaption { margin-top: 12px; }
.p-callout { padding: 16px 20px; border-radius: 16px; background: var(--gf-accent-subtle); }
.p-callout p { margin: 0; }
.p-callout .gf-strong + p { margin-top: 4px; }
.p-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.p-columns--wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.p-columns--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.p-columns > div > * + * { margin-top: 24px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.p-actions--center { justify-content: center; }
.p-cards .p-heading { margin-bottom: 24px; }
.p-cards__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-card .gf-card__body > * + * { margin-top: 6px; }
.p-card p { margin: 0; color: var(--gf-t2); font-size: 15px; line-height: 22px; }
.p-card__link { display: inline-block; color: var(--gf-accent); font-weight: 600; text-decoration: none; }
.p-text__grid { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 64px; align-items: start; }
.p-text__body > * + * { margin-top: 24px; }
/* A long word in a section heading (German: Urheberrechtsbeschwerden) breaks, hyphenated where the language knows how, instead of widening the page. */
.p-text__body h2, .p-text__body h3 { overflow-wrap: break-word; hyphens: auto; }
.p-contents { position: sticky; top: 96px; font-size: 15px; line-height: 20px; }
.p-contents .gf-eyebrow { margin-bottom: 8px; }
.p-contents ol { margin: 0; padding: 0; list-style: none; }
.p-contents a { display: block; padding: 6px 0; color: var(--gf-t2); text-decoration: none; }
.p-contents a:hover, .p-contents a[aria-current] { color: var(--gf-t1); }
.p-contents a[aria-current] { font-weight: 600; }
.p-contents__fold { display: none; }
.p-contents__fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-weight: 600; cursor: pointer; list-style: none; }
.p-contents__fold summary::-webkit-details-marker { display: none; }
.p-contents__fold summary::after { flex: none; width: 10px; height: 10px; border-right: 1.8px solid var(--gf-t2); border-bottom: 1.8px solid var(--gf-t2); content: ""; transform: rotate(45deg) translateY(-3px); }
.p-contents__fold[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.p-contents__fold ol { padding-bottom: 8px; }
.p-list { padding: 0 0 80px; }
.p-list__filters { margin-bottom: 24px; }
.gf-chips[hidden], .gf-card[hidden] { display: none; }
.p-404 { padding: 96px 0; }
.p-404__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.p-404__disc { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 999px; background: var(--gf-accent-subtle); }
.p-404__disc img { width: auto; height: 58px; }
.p-404 h1 { margin-top: 6px; }
.p-404 p { max-width: 440px; margin: 0; color: var(--gf-t2); }
.p-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 8px; }

/* ---- Contact form (site-system.html w-contact): the app's select rows, Field and button ---- */
.c-section { padding-bottom: 96px; }
.c-form, .c-done, .c-alt, .c-nojs { max-width: 560px; }
.c-form { position: relative; display: grid; gap: 24px; }
.c-topics { min-width: 0; margin: 0; padding: 0; border: 0; }
.c-label { display: block; margin: 0 0 8px; padding: 0; color: var(--gf-t2); font: 600 14px/19px var(--gf-font); }
.c-group { overflow: hidden; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); }
.c-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; cursor: pointer; }
.c-row + .c-row { border-top: 1px solid var(--gf-divider); }
.c-row:hover { background: var(--gf-bg); }
.c-row:has(input:focus-visible) { outline: 2px solid var(--gf-accent); outline-offset: -2px; }
.c-row__text { display: grid; flex: 1; min-width: 0; }
.c-row__label { color: var(--gf-t1); font: 17px/22px var(--gf-font); }
.c-row__detail { color: var(--gf-t2); font: 14px/19px var(--gf-font); }
.c-row svg, .c-done__icon svg { flex: none; fill: none; stroke: var(--gf-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.c-row svg { width: 22px; height: 22px; opacity: 0; }
.c-row input:checked ~ svg { opacity: 1; }
.c-field { display: grid; gap: 8px; }
.c-field .c-label { margin: 0; }
.c-input { box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--gf-border); border-radius: 10px; background: var(--gf-surface); color: var(--gf-t1); font: 17px/24px var(--gf-font); }
.c-input:focus-visible { outline: 0; border-color: var(--gf-accent); box-shadow: 0 0 0 1px var(--gf-accent); }
.c-input[aria-invalid="true"] { border-color: var(--gf-danger); box-shadow: 0 0 0 1px var(--gf-danger); }
.c-input--message { display: block; min-height: 168px; padding: 13px 14px; resize: vertical; }
.c-hint, .c-note { margin: 0; color: var(--gf-t2); font: 14px/19px var(--gf-font); }
.c-error { margin: 0; color: var(--gf-danger); font: 14px/19px var(--gf-font); }
.c-hint a, .c-note a, .c-alt a, .c-nojs a { color: var(--gf-accent); text-underline-offset: 3px; }
.c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.c-status { flex: 1 1 240px; margin: 0; color: var(--gf-danger); font: 14px/19px var(--gf-font); }
/* Photos (site-system.html w-contact): the select rows again, one per photo, then the secondary button. */
.c-photolist { margin: 0; padding: 0; list-style: none; }
.c-photolist[hidden] { display: none; }
.c-row--photo { cursor: default; }
.c-row--photo:hover { background: transparent; }
.c-photo__thumb { flex: none; width: 52px; height: 52px; border: 1px solid var(--gf-divider); border-radius: 10px; background: var(--gf-bg); object-fit: cover; }
.c-photo__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.c-photo__remove { flex: none; }
.c-photos__add { justify-self: start; }
.c-photolist:not([hidden]) + .c-photos__add { margin-top: 4px; }
.c-photos .c-error, .c-photos .c-hint { margin: 0; }
.c-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.c-nojs { margin: 0 0 24px; color: var(--gf-t2); }
.c-done { display: grid; justify-items: start; gap: 14px; }
.c-done:focus { outline: 0; }
.c-done h2, .c-done p { margin: 0; }
.c-done p { color: var(--gf-t2); }
.c-done__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--gf-accent-subtle); }
.c-done__icon svg { width: 28px; height: 28px; }

/* ---- Grocery list tool (site-system.html w-grocery-tool): the contact form's Field, button and select rows, as a checklist by aisle ---- */
.g-section { padding-bottom: 96px; }
.g-tool, .g-section .c-nojs { max-width: 640px; }
.g-tool { display: grid; gap: 24px; }
.g-add { display: grid; gap: 16px; }
.g-add__input { display: block; min-height: 104px; padding: 13px 14px; resize: vertical; }
.g-status { color: var(--gf-t2); }
.g-status[data-tone="error"] { color: var(--gf-danger); }
.g-list { display: grid; gap: 20px; }
.g-list__heading { margin: 0; font: 600 22px/28px var(--gf-font); }
.g-list__logo { display: none; }
.g-list--empty .g-list__head { display: none; }
.g-aisle { display: grid; gap: 8px; }
.g-aisle__name, .g-aisle__hint { margin: 0; }
.g-rows { margin: 0; padding: 0; list-style: none; }
.g-row { gap: 8px; padding: 4px 4px 4px 16px; cursor: default; }
.g-row:hover { background: transparent; }
.g-row__main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 44px; cursor: pointer; }
.g-row__main:has(input:focus-visible) { outline: 2px solid var(--gf-accent); outline-offset: 2px; border-radius: 8px; }
.g-ring { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border: 2px solid var(--gf-border); border-radius: 999px; }
.g-row .g-ring svg { width: 16px; height: 16px; opacity: 0; }
.g-row__main input:checked + .g-ring { border-color: var(--gf-accent); background: var(--gf-accent); }
.g-row__main input:checked + .g-ring svg { opacity: 1; stroke: var(--gf-surface); }
.g-row__name { overflow-wrap: anywhere; }
.g-row__main input:checked ~ .g-row__name { color: var(--gf-t2); text-decoration: line-through; }
.g-row__aisle { flex: none; max-width: 42%; min-height: 44px; padding: 0 8px; border: 1px solid var(--gf-border); border-radius: 10px; background: var(--gf-surface); color: var(--gf-t2); font: 14px/19px var(--gf-font); }
.g-row__remove { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--gf-t2); cursor: pointer; }
.g-row__remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: 1; }
.g-row__remove:hover { background: var(--gf-bg); color: var(--gf-t1); }
.g-empty { margin: 0; }
.g-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.g-actions[hidden], .g-empty[hidden], .g-confirm[hidden] { display: none; }
.g-confirm { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); }
.g-confirm__text { margin: 0; color: var(--gf-t1); font: 16px/23px var(--gf-font); }
.g-confirm__text:focus { outline: none; }
.g-confirm__text:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 4px; border-radius: 4px; }
.g-confirm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
@media (max-width: 499px) {
  /* The aisle goes under the name, as a quieter line that is still a 44 target. */
  .g-row { flex-wrap: wrap; row-gap: 0; padding: 4px 4px 4px 16px; }
  .g-row__main { flex-basis: calc(100% - 52px); }
  .g-row__aisle { order: 3; max-width: calc(100% - 36px); margin: -10px 0 0 30px; padding: 0 4px; border-color: transparent; background: transparent; }
}
/* Printed, the tool is the list alone: aisles as headings, a box to tick, nothing to press. */
@media print {
  /* Everything that neither holds the list nor sits in it goes, so a long list runs on over pages. */
  body:has(.g-list) *:not(:has(.g-list)):not(.g-list, .g-list *) { display: none; }
  body:has(.g-list) :has(> .g-list) { display: block; max-width: none; margin: 0; padding: 0; border: 0; background: none; }
  @page { margin: 14mm 14mm 16mm; }
  /* Two columns that fill as far as the list goes: the same look for 3 items or 300.
     Words are t1 or t2 on white (15.9:1, 6.9:1); the accent only draws rules. */
  .g-list { display: block; columns: 2; column-gap: 28pt; color: var(--gf-t1); }
  .g-list__head { display: flex; column-span: all; align-items: flex-end; justify-content: space-between; gap: 16pt; margin-bottom: 16pt; padding-bottom: 8pt; border-bottom: 2pt solid var(--gf-accent); }
  .g-list__heading { color: var(--gf-t1); font: 600 26pt/1.1 var(--gf-display); }
  .g-list__logo { display: block; flex: none; width: auto; height: 20pt; }
  .g-aisle { display: block; margin: 0 0 14pt; }
  .g-aisle__name { margin: 0 0 2pt; padding-bottom: 3pt; border-bottom: 1pt solid var(--gf-accent); color: var(--gf-t1); font: 700 9pt/1.3 var(--gf-font); letter-spacing: 0.08em; text-transform: uppercase; break-after: avoid; }
  .g-row__aisle, .g-row__remove, .g-aisle__hint { display: none; }
  .g-rows { border: 0; border-radius: 0; background: none; }
  .g-row { min-height: 0; padding: 4pt 0; border: 0; break-inside: avoid; }
  .g-row + .g-row { border-top: 0.5pt solid var(--gf-border); }
  .g-row__main { align-items: flex-start; gap: 8pt; min-height: 0; }
  .g-ring, .g-row__main input:checked + .g-ring { width: 11pt; height: 11pt; margin-top: 1.5pt; border: 1pt solid var(--gf-t1); border-radius: 2pt; background: none; }
  .g-row .g-ring svg { width: 9pt; height: 9pt; }
  .g-row__main input:checked + .g-ring svg { stroke: var(--gf-t1); }
  .g-row__name { color: var(--gf-t1); font: 11pt/1.35 var(--gf-font); }
}
.c-alt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--gf-divider); color: var(--gf-t2); font: 15px/22px var(--gf-font); }
.c-alt p { margin: 0; }
.c-alt p + p { margin-top: 6px; }
@media (max-width: 499px) {
  .c-actions .gf-button { width: 100%; }
}
@media (max-width: 899px) {
  .p-hero { padding: 40px 0 24px; }
  .p-section { padding-bottom: 56px; }
  .p-text__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .p-contents { position: static; }
  .p-contents__fold { display: block; border-top: 1px solid var(--gf-divider); border-bottom: 1px solid var(--gf-divider); }
  .p-contents__list { display: none; }
  .p-columns, .p-columns--wide-left, .p-columns--wide-right { grid-template-columns: 1fr; }
  .p-404 { padding: 64px 0; }
}

/* ---- Homepage sections (site-system.html: h-hero, h-path, h-households,
   h-chapter, h-plans; drawn in website/homepage-mockup.html) ------------- */
[data-home], [data-page] { color: var(--gf-t1); font: 17px/26px var(--gf-font); }
[data-home] [id] { scroll-margin-top: 72px; }

/* An app screen: a picture of the real app (decision H4) in a phone frame. */
.h-screen { flex: none; width: 300px; margin: 0; padding: 8px; border-radius: 40px; background: #1A1917; box-shadow: 0 30px 60px -30px rgba(20, 19, 18, 0.45); }
.h-screen img { display: block; width: 100%; height: auto; border-radius: 32px; background: var(--gf-sunk); }
.h-screen--small { width: 240px; padding: 7px; border-radius: 32px; }
.h-screen--small img { border-radius: 26px; }
.h-screen--wide { width: 340px; padding: 0; border-radius: 22px; background: none; }
.h-screen--wide img { border-radius: 22px; }

.h-hero { padding: 72px 0 80px; overflow: hidden; background: var(--gf-bg); }
.h-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.h-hero h1 { margin: 0; font: 600 56px/60px var(--gf-display); letter-spacing: -0.02em; text-wrap: balance; }
.h-hero .gf-lede { max-width: 540px; margin-top: 20px; }
.h-hero__action { margin-top: 28px; }
.h-hero__where { margin: 14px 0 0; color: var(--gf-t2); font-size: 14px; line-height: 19px; }
.h-hero__screens { display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
/* The phones shrink with the column rather than spill over the headline. */
.h-hero__screens .h-screen { flex: 0 1 300px; min-width: 0; }
.h-hero__screens .h-screen--small { flex-basis: 240px; margin-top: 72px; }
.h-video { position: relative; display: block; }
.h-video video { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.h-video__toggle { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--gf-border); border-radius: 999px; background: var(--gf-bg); color: var(--gf-t1); cursor: pointer; }
.h-video__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h-video__toggle .h-video__play, .h-video__toggle.is-paused .h-video__pause { display: none; }
.h-video__toggle.is-paused .h-video__play { display: inline; }
.h-signup { max-width: 480px; }
.h-signup input[type="email"] { border-color: var(--gf-border); }
.h-signup .gf-signup__message { color: var(--gf-t2); }
.h-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.h-path { padding: 72px 0; background: var(--gf-surface); border-block: 1px solid var(--gf-divider); }
.h-path h2 { max-width: 760px; }
.h-path__intro { max-width: 760px; margin: 16px 0 0; }
.h-path__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.h-path__steps li { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-bg); }
.h-path__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--gf-accent-subtle); color: var(--gf-accent); }
.h-path__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-path__steps .gf-eyebrow { margin-top: 6px; }
.h-path__steps p { margin: 0; color: var(--gf-t2); }
/* Steps with a strip of the app at the foot of each card: three across, the strip edge to edge. */
.h-path__steps--pictures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-path__steps--pictures li { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.h-path__steps--pictures li p { margin-bottom: 22px; }
.h-path__picture { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: auto -20px -20px; border-top: 1px solid var(--gf-divider); }

/* h-facts: short facts as cards. Five sit three over two; a last one alone spans the row. */
.h-facts { padding: 56px 0 64px; background: var(--gf-bg); }
.h-facts--surface { background: var(--gf-surface); border-block: 1px solid var(--gf-divider); }
.h-facts--blush { background: var(--gf-accent-subtle); }
.h-facts .gf-display-m { max-width: 720px; margin: 0; }
.h-facts .gf-eyebrow { margin: 20px 0 0; }
.h-facts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.h-facts__grid li { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-bg); }
.h-facts__grid li:nth-child(odd):last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .h-facts__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .h-facts__grid li, .h-facts__grid li:nth-child(odd):last-child { grid-column: span 2; }
  .h-facts__grid li:nth-child(3n+1):nth-last-child(2), .h-facts__grid li:nth-child(3n+2):last-child { grid-column: span 3; }
  .h-facts__grid li:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
.h-facts__grid .gf-strong { margin-top: 6px; }
.h-facts__grid p { margin: 0; color: var(--gf-t2); }

/* h-roles: a card per household role, then panels, over the produce texture. */
.h-roles { position: relative; padding: 88px 0; background: var(--gf-bg); }
.h-roles--texture { overflow: hidden; }
.h-roles__inner { position: relative; z-index: 1; }
.h-roles .gf-display-l { max-width: 820px; margin: 0 0 20px; }
.h-roles__intro { max-width: 640px; margin: 0 0 10px; color: var(--gf-t2); font-size: 19px; line-height: 28px; }
.h-roles__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.h-roles__cards li { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-bg); }
.h-roles__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 600 28px/34px var(--gf-display); letter-spacing: -0.02em; }
.h-roles__name .gf-tag { font: 600 12px/18px var(--gf-font); letter-spacing: 0; }
.h-roles__cards p { margin: 0; color: var(--gf-t2); }
.h-roles__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.h-roles__panel { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 16px; background: var(--gf-accent-subtle); }
.h-roles__panel p { margin: 0; }
.h-roles__panel .h-path__icon { flex: none; background: var(--gf-bg); }
@media (prefers-reduced-motion: no-preference) {
  .h-roles__cards li { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .h-roles__cards li:nth-child(2) { transition-delay: 0.12s; }
  .h-roles__cards li:nth-child(3) { transition-delay: 0.24s; }
  .h-roles__cards li:nth-child(4) { transition-delay: 0.36s; }
  .is-waiting:not(.is-in) .h-roles__cards li { opacity: 0; transform: translateY(20px); }
}

/* The produce texture: the site's marks, faint and scattered, behind one section. Decoration only. */
.h-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.h-texture img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; opacity: 0.38; transform: translate(-50%, -50%) rotate(var(--angle)); }
.h-texture img:nth-child(1) { --x: 76%; --y: 4%; --w: 92px; --angle: -12deg; }
.h-texture img:nth-child(2) { --x: 92%; --y: 12%; --w: 84px; --angle: 16deg; }
.h-texture img:nth-child(3) { --x: 97%; --y: 2%; --w: 64px; --angle: 10deg; }
.h-texture img:nth-child(4) { --x: 70%; --y: 30%; --w: 70px; --angle: 20deg; }
.h-texture img:nth-child(5) { --x: 86%; --y: 34%; --w: 78px; --angle: -14deg; }
.h-texture img:nth-child(6) { --x: 101%; --y: 48%; --w: 90px; --angle: -20deg; }
.h-texture img:nth-child(7) { --x: -3%; --y: 52%; --w: 96px; --angle: 12deg; }
.h-texture img:nth-child(8) { --x: -2%; --y: 96%; --w: 70px; --angle: -15deg; }
.h-texture img:nth-child(9) { --x: 24%; --y: 105%; --w: 72px; --angle: -8deg; }
.h-texture img:nth-child(10) { --x: 52%; --y: 104%; --w: 74px; --angle: 24deg; }
.h-texture img:nth-child(11) { --x: 78%; --y: 105%; --w: 62px; --angle: 14deg; }
.h-texture img:nth-child(12) { --x: 101%; --y: 86%; --w: 86px; --angle: 18deg; }

.h-households { padding: 88px 0; background: var(--gf-bg); }
.h-households__head { max-width: 720px; }
.h-households__head .gf-display-l { margin-top: 8px; }
.h-households__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.h-household { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-surface); }
.h-household h3 { margin: 0; font: 600 20px/26px var(--gf-font); }
.h-household__moment { margin: 0; color: var(--gf-t2); font-size: 15px; line-height: 22px; }
.h-household ul { display: grid; gap: 10px; margin: 4px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--gf-divider); }
.h-household li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 21px; }
.h-household li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 999px; background: var(--gf-accent-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23B02A5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.h-household__link { align-self: flex-start; margin: auto 0 -10px -4px; text-decoration: none; }
.h-pro-line { margin: 20px 0 0; color: var(--gf-t2); font-size: 14px; line-height: 19px; }

.h-chapter { padding: 88px 0; background: var(--gf-bg); color: var(--gf-t1); }
.h-chapter--surface { background: var(--gf-surface); border-block: 1px solid var(--gf-divider); }
.h-chapter--blush { background: var(--gf-accent-subtle); }
.h-chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.h-chapter--flip .h-chapter__copy { order: 2; }
.h-chapter .gf-display-l { margin-top: 8px; }
.h-chapter .gf-lede { max-width: 520px; margin-top: 16px; }
.h-chapter__points { display: grid; gap: 10px; max-width: 520px; margin: 20px 0 0; padding: 0; list-style: none; }
.h-chapter__points li { padding-left: 16px; border-left: 2px solid var(--gf-accent-subtle); color: var(--gf-t2); font-size: 16px; line-height: 23px; }
.h-chapter--blush .h-chapter__points li { border-color: var(--gf-surface); }
.h-chapter--ink .h-chapter__points li { border-color: var(--gf-border); }
.h-chapter__demo { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }

/* Read more: the chapter's other paragraphs, folded and closed on load. */
.h-more { max-width: 520px; margin-top: 18px; }
.h-more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gf-accent); font-weight: 600; cursor: pointer; list-style: none; }
.h-more summary::-webkit-details-marker { display: none; }
.h-more summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.h-more[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.h-more__body p { margin: 6px 0 0; color: var(--gf-t2); }
.h-more__body p + p { margin-top: 14px; }

/* A photo of people with the app on one phone in front of it, kept clear of faces (data-photo). */
.h-photo { position: relative; display: block; }
.h-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; }
.h-photo .h-screen { position: absolute; right: -12px; bottom: -36px; width: 28%; max-width: 190px; margin: 0; padding: 6px; border-radius: 28px; }
.h-photo .h-screen img { border-radius: 22px; }
.h-photo[data-photo="shopping-together"] .h-photo__img, .h-photo[data-photo="cooking-together"] .h-photo__img { object-position: 60% 40%; }
.h-photo[data-photo="shopping-together"] .h-screen { right: auto; left: -28px; }
.h-photo[data-photo="roommates"] .h-photo__img { object-position: 50% 30%; }
.h-photo[data-photo="roommates"] .h-screen { width: 22%; bottom: -16%; }
.h-photo[data-photo="shopping-with-watch"] .h-photo__img { object-position: 20% 50%; }
.h-photo[data-photo="shopping-with-watch"] .h-screen { right: auto; left: -28px; }
/* Two phones side by side, smaller than one alone (the drawing's 0.72 against 0.85), shrinking with the column. */
.h-chapter__demo--pair { flex-wrap: nowrap; }
.h-chapter__demo--pair .h-screen { flex: 0 1 254px; min-width: 0; padding: 7px; border-radius: 34px; }
.h-chapter__demo--pair .h-screen img { border-radius: 28px; }
/* A watch: its own frame, smaller than a phone. Beside a phone it sits lower and both shrink with the column. */
.h-screen--watch { width: 200px; padding: 10px; border-radius: 36px; }
.h-screen--watch img { border-radius: 28px; }
.h-chapter__demo--watch { flex-wrap: nowrap; align-items: flex-end; }
.h-chapter__demo--watch .h-screen { flex: 0 1 280px; min-width: 0; }
.h-chapter__demo--watch .h-screen--watch { flex-basis: 170px; margin-bottom: 40px; padding: 8px; border-radius: 30px; }
.h-chapter__demo--watch .h-screen--watch img { border-radius: 23px; }

/* h-invite: an invitation to a free tool (ToolInvite; drawn in website/f06). The rows are ruled like the
   printable list; the picture is drawn taller than its space so its foot always runs under the next section. */
.h-invite { position: relative; overflow: hidden; padding: 88px 0 0; background: var(--gf-surface); }
.h-invite__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: end; }
.h-invite__copy { padding-bottom: 88px; }
.h-invite__lead { max-width: 520px; margin: 18px 0 0; color: var(--gf-accent); font: 600 22px/30px var(--gf-display); letter-spacing: -0.01em; text-wrap: pretty; }
.h-invite__rows { max-width: 560px; margin: 28px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--gf-accent); }
.h-invite__rows li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--gf-divider); color: var(--gf-t1); font: 17px/25px var(--gf-font); }
.h-invite__box { width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--gf-t2); border-radius: 4px; }
.h-invite__actions { margin-top: 32px; }
.h-invite__closing { max-width: 520px; margin: 20px 0 0; color: var(--gf-t2); font: 15px/23px var(--gf-font); }
.h-invite__sheet { position: relative; height: 560px; align-self: end; }
.h-invite__sheet img { position: absolute; top: 0; left: 50%; width: auto; height: 700px; max-width: none; border-radius: 10px 10px 0 0; box-shadow: 0 24px 60px -24px rgba(20, 19, 18, 0.35), 0 0 0 1px rgba(20, 19, 18, 0.06); transform: translateX(-50%) rotate(-3deg); }
@media (max-width: 899px) {
  .h-invite { padding-top: 64px; }
  .h-invite__grid { grid-template-columns: 1fr; gap: 8px; }
  .h-invite__copy { padding-bottom: 16px; }
  .h-invite__lead { font-size: 20px; line-height: 28px; }
  .h-invite__sheet { height: 340px; }
  .h-invite__sheet img { height: 440px; }
}

/* h-together: a household joined to one week (HouseholdChapter; drawn in website/household-graphic.html). */
.h-together { width: 100%; max-width: 500px; margin: 0; }
.h-together__people { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; text-align: center; }
.h-together__people li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 6px; }
.h-together__people li > span:last-child:not(.gf-strong) { color: var(--gf-t2); font-size: 15px; line-height: 20px; }
.h-together__initial { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--gf-surface); box-shadow: 0 0 0 1px var(--gf-border); color: var(--gf-accent); font: 600 22px/26px var(--gf-font); }
.h-together__lines { display: block; width: 100%; height: 56px; }
.h-together__lines path { fill: none; stroke: var(--gf-accent); stroke-width: 2; stroke-linecap: round; }
.h-together__week { padding: 6px 0; border: 1px solid var(--gf-border); border-radius: 20px; background: var(--gf-surface); box-shadow: 0 30px 60px -36px rgba(20, 19, 18, 0.35); }
.h-together__title { margin: 0; padding: 14px 22px 12px; border-bottom: 1px solid var(--gf-divider); font: 600 20px/26px var(--gf-font); }
.h-together__week ol { margin: 0; padding: 0; list-style: none; }
.h-together__week li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; padding: 12px 22px; font: 500 17px/23px var(--gf-font); }
.h-together__week li + li { border-top: 1px solid var(--gf-divider); }
.h-together__week .gf-eyebrow { color: var(--gf-t3); }
.h-together figcaption { margin-top: 16px; color: var(--gf-t2); font-size: 15px; line-height: 21px; text-align: center; }

.h-plans { padding: 88px 0; background: var(--gf-surface); border-block: 1px solid var(--gf-divider); }
.h-plans .gf-display-l { margin-top: 8px; }
.h-plans__lead { max-width: 640px; margin-top: 16px; color: var(--gf-t2); font-size: 18px; line-height: 27px; }
.h-plans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.h-plan { padding: 24px; border: 1px solid var(--gf-border); border-radius: 16px; background: var(--gf-bg); }
.h-plan--pro { border-color: var(--gf-accent); background: var(--gf-surface); }
.h-plan h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 22px/28px var(--gf-font); }
.h-plan > p { margin: 6px 0 0; color: var(--gf-t2); }
.h-plan ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.h-plan li { padding: 10px 0; border-top: 1px solid var(--gf-divider); }
.h-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

[data-home] .gf-questions .gf-display-l, [data-home] .gf-more-recipes .gf-display-l { margin: 0; }

@media (max-width: 1099px) {
  .h-households__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .h-hero { padding: 32px 0 48px; }
  .h-hero h1 { font-size: 44px; line-height: 48px; }
  .h-hero__grid, .h-chapter__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .h-hero__screens .h-screen--small { display: none; }
  .h-path, .h-households, .h-chapter, .h-plans { padding: 56px 0; }
  .h-path__steps { grid-template-columns: 1fr 1fr; }
  .h-roles { padding: 56px 0; }
  .h-roles .gf-display-l { font-size: 36px; line-height: 42px; }
  .h-roles__cards, .h-roles__panels { grid-template-columns: 1fr; }
  .h-texture img { opacity: 0.34; scale: 0.6; }
  .h-texture img:is(:nth-child(4), :nth-child(5), :nth-child(9), :nth-child(10)) { display: none; }
  .h-chapter--flip .h-chapter__copy { order: 0; }
  .h-chapter__demo .h-screen + .h-screen:not(.h-screen--wide) { display: none; }
  .h-chapter__demo.h-chapter__demo--watch .h-screen + .h-screen:not(.h-screen--wide) { display: block; }
  .h-chapter__demo--watch { gap: 16px; }
  .h-hero__screens .h-screen, .h-chapter__demo--pair .h-screen { flex: none; }
  .h-together__people li > span:last-child:not(.gf-strong) { font-size: 14px; line-height: 19px; }
  .h-plans__grid { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .h-photo__img { border-radius: 18px; }
  .h-photo .h-screen, .h-photo[data-photo] .h-screen { right: 12px; left: auto; bottom: -28px; width: 30%; padding: 4px; border-radius: 16px; }
  .h-photo[data-photo="shopping-together"] .h-screen, .h-photo[data-photo="shopping-with-watch"] .h-screen { right: auto; left: 12px; }
  .h-photo[data-photo="roommates"] .h-screen, .h-photo[data-photo="shopping-with-watch"] .h-screen { width: 24%; bottom: -16%; }
  .h-photo .h-screen img { border-radius: 12px; }
}
@media (max-width: 499px) {
  .h-hero h1 { font-size: 38px; line-height: 42px; }
  .h-path__steps, .h-households__grid, .h-facts__grid { grid-template-columns: 1fr; }
  .h-facts .gf-display-m { font-size: 24px; line-height: 30px; }
  .h-screen { width: 260px; }
}