/*
 * Oatmeal — marketing theme (CUBE CSS).
 *
 * CUBE: Composition primitives live in composition.css; this file holds the
 * theme token scope, a few token-driven Utilities, and the Block cosmetics.
 * Variants are Exceptions expressed with [data-*] attributes. Everything is
 * scoped to `.theme-oatmeal` (token remap) and `.oatmeal-*` blocks.
 * Neutrals come from Tailwind Stone; the brand accent is syo-ro.
 */

/* ─────────────────────────── Theme token scope ─────────────────────────── */
@layer modules {
  .theme-oatmeal {
    /* --font-sans is set globally in tokens.css so the font cycler can switch it. */
    --font-display: "Newsreader", ui-serif, Georgia, serif;

    /* Neutral roles — Tailwind Stone (light) */
    --canvas: var(--color-stone-100);
    --surface: var(--color-stone-50);
    --ink: var(--color-stone-950);
    --ink-muted: var(--color-stone-600);
    --ink-subtle: var(--color-stone-500);

    /* Accent — Tailwind Olive (light). syo-ro palette kept for later use. */
    --accent: var(--color-olive-600);
    --accent-hover: var(--color-olive-700);
    --accent-ink: var(--color-stone-50);

    /* Derived tints — built from --ink so they auto-flip in dark mode. */
    --card: color-mix(in oklch, var(--ink) 3%, transparent);
    --card-hover: color-mix(in oklch, var(--ink) 6%, transparent);
    --line: color-mix(in oklch, var(--ink) 10%, transparent);
    --line-strong: color-mix(in oklch, var(--ink) 20%, transparent);

    --radius-pill: 999px;
    --radius-card: var(--radius-3);

    /* Screenshot "wallpaper" gradients (light) */
    --wallpaper-green: linear-gradient(to bottom, #9ca88f, #596352);
    --wallpaper-blue: linear-gradient(to bottom, #637c86, #778599);
    --wallpaper-purple: linear-gradient(to bottom, #7b627d, #8f6976);
    --wallpaper-brown: linear-gradient(to bottom, #8d7359, #765959);

    /* Grayscale noise texture overlaid on wallpapers */
    --noise: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='250'%20height='250'%20viewBox='0%200%20100%20100'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='1.4'%20numOctaves='1'%20seed='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Dark mode — explicit choice and system preference. */
  html[data-theme="dark"] .theme-oatmeal {
    --canvas: var(--color-stone-950);
    --surface: var(--color-stone-900);
    --ink: var(--color-stone-50);
    --ink-muted: var(--color-stone-400);
    --ink-subtle: var(--color-stone-500);

    --accent: var(--color-olive-400);
    --accent-hover: var(--color-olive-300);
    --accent-ink: var(--color-stone-950);

    --wallpaper-green: linear-gradient(to bottom, #333a2b, #26361b);
    --wallpaper-blue: linear-gradient(to bottom, #243a42, #232f40);
    --wallpaper-purple: linear-gradient(to bottom, #412c42, #3c1a26);
    --wallpaper-brown: linear-gradient(to bottom, #382d23, #3d2323);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .theme-oatmeal {
      --canvas: var(--color-stone-950);
      --surface: var(--color-stone-900);
      --ink: var(--color-stone-50);
      --ink-muted: var(--color-stone-400);
      --ink-subtle: var(--color-stone-500);

      --accent: var(--color-olive-400);
      --accent-hover: var(--color-olive-300);
      --accent-ink: var(--color-stone-950);

      --wallpaper-green: linear-gradient(to bottom, #333a2b, #26361b);
      --wallpaper-blue: linear-gradient(to bottom, #243a42, #232f40);
      --wallpaper-purple: linear-gradient(to bottom, #412c42, #3c1a26);
      --wallpaper-brown: linear-gradient(to bottom, #382d23, #3d2323);
    }
  }

  /* Page shell */
  .layout-oatmeal {
    background-color: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Tune composition primitives for this theme (max content width = 80rem). */
  .layout-oatmeal .wrapper { --wrapper-max: 80rem; }

  /* ───────────────────────────── Typography ──────────────────────────── */
  .oatmeal-headline {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.04;
    text-wrap: balance;
  }

  .oatmeal-title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-wrap: pretty;
  }

  .oatmeal-lede {
    color: var(--ink-muted);
    font-size: var(--text-medium);
    line-height: 1.7;
  }

  .oatmeal-eyebrow {
    color: var(--accent);
    font-size: var(--text-small);
    font-weight: 600;
  }

  /* ─────────────────────────────── Buttons ────────────────────────────── */
  .oatmeal-btn {
    --btn-bg: var(--accent);
    --btn-ink: var(--accent-ink);

    align-items: center;
    background: var(--btn-bg);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--btn-ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--text-small);
    font-weight: 500;
    gap: var(--inline-space-half);
    justify-content: center;
    padding: 0.4rem 1rem;
    text-decoration: none;
    transition: background-color 150ms var(--ease-out-expo);
    white-space: nowrap;
  }
  .oatmeal-btn:hover { --btn-bg: var(--accent-hover); }
  .oatmeal-btn[data-size="lg"] { font-size: var(--text-normal); padding: 0.6rem 1.4rem; }

  .oatmeal-btn[data-variant="soft"] {
    --btn-bg: color-mix(in oklch, var(--ink) 8%, transparent);
    --btn-ink: var(--ink);
  }
  .oatmeal-btn[data-variant="soft"]:hover { --btn-bg: color-mix(in oklch, var(--ink) 14%, transparent); }

  .oatmeal-btn[data-variant="plain"] {
    --btn-bg: transparent;
    --btn-ink: var(--ink);
  }
  .oatmeal-btn[data-variant="plain"]:hover { --btn-bg: color-mix(in oklch, var(--ink) 8%, transparent); }

  /* Inline text link with trailing icon */
  .oatmeal-link {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-size: var(--text-small);
    font-weight: 500;
    gap: var(--inline-space-half);
    text-decoration: none;
  }
  .oatmeal-link:hover { color: var(--accent); }

  /* Newsletter signup — pill input + button */
  .oatmeal-signup {
    align-items: center;
    background: var(--surface);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--line);
    display: flex;
    gap: 0.25rem;
    padding: 0.3rem;
  }
  .oatmeal-signup__input {
    background: transparent;
    border: 0;
    color: var(--ink);
    flex: 1;
    font: inherit;
    min-inline-size: 0;
    outline: none;
    padding-inline: 0.85rem;
  }
  .oatmeal-signup__input::placeholder { color: var(--ink-subtle); }

  /* ──────────────────────── Announcement badge ──────────────────────── */
  .oatmeal-badge {
    align-items: center;
    background: var(--card-hover);
    border-radius: var(--radius-pill);
    color: var(--ink);
    display: inline-flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    padding: 0.15rem 0.75rem 0.15rem 0.9rem;
    text-decoration: none;
  }
  .oatmeal-badge:hover { background: color-mix(in oklch, var(--ink) 10%, transparent); }
  .oatmeal-badge__divider { background: var(--line-strong); block-size: 0.8rem; inline-size: 1px; }
  .oatmeal-badge__cta { align-items: center; display: inline-flex; font-weight: 600; gap: 0.25rem; }

  /* ──────────────────────── Navbar (chrome) ─────────────────────────── */
  .oatmeal-nav {
    background: var(--canvas);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
  }
  .oatmeal-nav__bar { min-block-size: 5.25rem; }
  .oatmeal-nav__link {
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 500;
    text-decoration: none;
  }
  .oatmeal-nav__link:hover { color: var(--accent); }
  .oatmeal-nav__logo { align-items: center; color: var(--ink); display: inline-flex; font-family: var(--font-display); font-size: var(--text-large); text-decoration: none; }
  .oatmeal-nav__toggle {
    background: transparent; border: 0; border-radius: var(--radius-pill);
    color: var(--ink); cursor: pointer; display: none; padding: 0.375rem;
  }
  .oatmeal-nav__toggle:hover { background: var(--card-hover); }

  /* Light/dark toggle — shows the icon for the mode you'd switch TO. */
  .oatmeal-theme-toggle {
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    padding: 0.375rem;
  }
  .oatmeal-theme-toggle:hover { background: var(--card-hover); }
  .oatmeal-theme-toggle .theme-icon--sun { display: none; }
  html[data-theme="dark"] .oatmeal-theme-toggle .theme-icon--sun { display: inline-flex; }
  html[data-theme="dark"] .oatmeal-theme-toggle .theme-icon--moon { display: none; }

  .oatmeal-nav__menu {
    background: var(--canvas);
    display: none;
    inset: 0;
    padding: 1.5rem var(--main-padding);
    position: fixed;
    z-index: var(--z-nav);
  }
  .oatmeal-nav__menu[data-open] { display: block; }

  @media (max-width: 899px) {
    .oatmeal-nav__links { display: none; }
    .oatmeal-nav__toggle { display: inline-flex; }
    .oatmeal-nav__menu .oatmeal-nav__link { font-size: var(--text-large); }
  }

  /* ─────────────────────── Section header block ─────────────────────── */
  .oatmeal-heading { max-inline-size: 42rem; }

  /* ──────────────────────── Screenshot / wallpaper ────────────────────── */
  .oatmeal-shot {
    background-image: var(--wallpaper-green);
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
  }
  .oatmeal-shot[data-color="blue"]   { background-image: var(--wallpaper-blue); }
  .oatmeal-shot[data-color="purple"] { background-image: var(--wallpaper-purple); }
  .oatmeal-shot[data-color="brown"]  { background-image: var(--wallpaper-brown); }

  .oatmeal-shot::before {
    background-image: var(--noise);
    content: "";
    inset: 0;
    mix-blend-mode: overlay;
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
  }

  .oatmeal-shot__inner {
    --pad: min(10%, 4rem);
    padding: var(--pad);
    position: relative;
  }
  .oatmeal-shot__inner > * {
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1);
    display: block;
    inline-size: 100%;
    position: relative;
  }

  /* Caption tag — bottom-right corner of the screenshot. */
  .oatmeal-shot__tag {
    background: var(--surface);
    border-radius: var(--radius-pill);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
    color: var(--ink);
    font-size: var(--text-x-small);
    font-weight: 600;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    padding: 0.3rem 0.85rem;
    position: absolute;
    z-index: 2;
  }

  /* Placement: no padding on the bleed edge(s); round the exposed corner(s). */
  .oatmeal-shot[data-placement="bottom"] .oatmeal-shot__inner { padding-block-end: 0; }
  .oatmeal-shot[data-placement="bottom"] .oatmeal-shot__inner > * { border-radius: var(--radius-2) var(--radius-2) 0 0; }

  .oatmeal-shot[data-placement="bottom-right"] .oatmeal-shot__inner { padding-block-end: 0; padding-inline-end: 0; }
  .oatmeal-shot[data-placement="bottom-right"] .oatmeal-shot__inner > * { border-radius: var(--radius-2) 0 0 0; }

  .oatmeal-shot[data-placement="bottom-left"] .oatmeal-shot__inner { padding-block-end: 0; padding-inline-start: 0; }
  .oatmeal-shot[data-placement="bottom-left"] .oatmeal-shot__inner > * { border-radius: 0 var(--radius-2) 0 0; }

  /* ──────────────────────────── Carousel ───────────────────────────── */
  .oatmeal-carousel { position: relative; }
  .oatmeal-carousel__viewport { overflow: hidden; }
  .oatmeal-carousel__track { display: flex; transition: transform 350ms var(--ease-out-expo); }
  .oatmeal-carousel__slide { flex: 0 0 100%; min-inline-size: 0; }

  .oatmeal-carousel__arrow {
    align-items: center;
    background: var(--surface);
    border: 0;
    block-size: 2.5rem;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.18);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.15rem;
    inline-size: 2.5rem;
    inset-block-start: 50%;
    justify-content: center;
    position: absolute;
    transform: translateY(-50%);
    z-index: 2;
  }
  .oatmeal-carousel__arrow:hover { background: var(--canvas); }
  .oatmeal-carousel__arrow--prev { inset-inline-start: 0.75rem; }
  .oatmeal-carousel__arrow--next { inset-inline-end: 0.75rem; }

  .oatmeal-carousel__dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-block-start: 1rem;
  }
  .oatmeal-carousel__dot {
    background: var(--line-strong);
    block-size: 0.5rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    inline-size: 0.5rem;
    padding: 0;
    transition: background-color 150ms var(--ease-out-expo), inline-size 150ms var(--ease-out-expo);
  }
  .oatmeal-carousel__dot[data-active] { background: var(--accent); inline-size: 1.25rem; }

  /* ──────────────────────────── Cards / features ────────────────────── */
  .oatmeal-card {
    background: var(--card);
    border-radius: var(--radius-card);
    padding: 0.5rem;
  }
  .oatmeal-card__media { border-radius: var(--radius-2); display: block; overflow: hidden; }
  .oatmeal-card__media img { aspect-ratio: 1999 / 1094; display: block; inline-size: 100%; object-fit: cover; }

  /* Dark-mode screenshots: expose the [data-mode="dark"] image, hide the light
     one when dark is active (explicit toggle or system preference). Works in any
     image container (hero shot, cards, /features, lightbox). */
  [data-mode="dark"] { display: none; }
  html[data-theme="dark"] [data-mode="light"] { display: none; }
  html[data-theme="dark"] [data-mode="dark"] { display: block; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) [data-mode="light"] { display: none; }
    html:not([data-theme]) [data-mode="dark"] { display: block; }
  }
  .oatmeal-card__body { padding: 1.5rem; }

  .oatmeal-feature__title { color: var(--ink); font-size: var(--text-medium); font-weight: 500; }
  .oatmeal-feature__text { color: var(--ink-muted); font-size: var(--text-small); line-height: 1.7; }
  .oatmeal-feature__icon { color: var(--accent); }

  /* Zoomable card media → native CSS popover lightbox (graceful: no popover
     support = the inline card still shows, just not clickable to enlarge). */
  .oatmeal-card__zoom {
    appearance: none;
    background: none;
    border: 0;
    cursor: zoom-in;
    display: block;
    inline-size: 100%;
    padding: 0;
    position: relative;
  }
  .oatmeal-card__zoom::after {
    background: var(--surface);
    border-radius: var(--radius-pill);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
    color: var(--ink);
    content: "Enlarge";
    font-size: var(--text-x-small);
    font-weight: 600;
    inset-block-end: 0.6rem;
    inset-inline-end: 0.6rem;
    opacity: 0;
    padding: 0.2rem 0.65rem;
    position: absolute;
    transition: opacity 150ms var(--ease-out-expo);
  }
  .oatmeal-card__zoom:hover::after,
  .oatmeal-card__zoom:focus-visible::after { opacity: 1; }

  .oatmeal-lightbox {
    background: transparent;
    border: 0;
    inset: 0;
    /* Re-assert the popover's UA centering, which our `* { margin: 0 }` reset clobbers. */
    margin: auto;
    max-block-size: 94vh;
    max-inline-size: 94vw;
    overflow: visible;
    padding: 0;
    position: fixed;
  }
  .oatmeal-lightbox img {
    block-size: auto;
    border-radius: var(--radius-3);
    box-shadow: 0 12px 48px rgb(0 0 0 / 0.45);
    display: block;
    inline-size: auto;
    max-block-size: 94vh;
    max-inline-size: 94vw;
  }
  .oatmeal-lightbox::backdrop {
    backdrop-filter: blur(2px);
    background: rgb(0 0 0 / 0.6);
  }
  .oatmeal-lightbox__close {
    align-items: center;
    background: var(--surface);
    block-size: 2.25rem;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.3);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.1rem;
    inline-size: 2.25rem;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    justify-content: center;
    position: absolute;
    z-index: 1;
  }
  .oatmeal-lightbox__close:hover { background: var(--canvas); }

  /* Fade in/out where supported (allow-discrete + @starting-style). */
  .oatmeal-lightbox,
  .oatmeal-lightbox::backdrop {
    opacity: 0;
    transition: opacity 200ms var(--ease-out-expo), overlay 200ms allow-discrete, display 200ms allow-discrete;
  }
  .oatmeal-lightbox:popover-open,
  .oatmeal-lightbox:popover-open::backdrop { opacity: 1; }
  @starting-style {
    .oatmeal-lightbox:popover-open,
    .oatmeal-lightbox:popover-open::backdrop { opacity: 0; }
  }

  /* ────────── Feature blocks (/features page — stacked, prose width) ───────
     Basecamp style: image (16:9) → H2 → description, one readable column. */
  .oatmeal-feature-list { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 5rem); }
  .oatmeal-feature-block__media {
    background: var(--card);
    border-radius: var(--radius-3);
    overflow: hidden;
    padding: 0.5rem;
  }
  .oatmeal-feature-block__media img {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-2);
    display: block;
    inline-size: 100%;
    object-fit: cover;
  }
  .oatmeal-feature-block__title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .oatmeal-feature-block__text { color: var(--ink-muted); font-size: var(--text-normal); line-height: 1.7; }

  /* ─────────────────────────────── Stats ────────────────────────────── */
  .oatmeal-stat { border-inline-start: 1px solid var(--line-strong); padding-inline-start: 1.5rem; }
  .oatmeal-stat__value { color: var(--ink); font-size: var(--text-large); letter-spacing: -0.01em; }
  .oatmeal-stat__label { color: var(--ink-muted); font-size: var(--text-small); }

  /* ──────────────────────── Comparison table (card) ─────────────────── */
  .oatmeal-compare-wrap {
    background: var(--card);
    border-radius: var(--radius-card);
    overflow-x: auto;
    padding: 0.5rem 1.25rem;
  }
  .oatmeal-compare {
    border-collapse: collapse;
    font-size: var(--text-small);
    inline-size: 100%;
    min-inline-size: 42rem;
  }
  .oatmeal-compare th,
  .oatmeal-compare td {
    border-block-end: 1px solid var(--line);
    padding: 0.85rem 1rem;
    text-align: center;
  }
  .oatmeal-compare tbody tr:last-child :is(th, td) { border-block-end: 0; }
  .oatmeal-compare thead th { color: var(--ink); font-weight: 600; }
  .oatmeal-compare tbody th { color: var(--ink); font-weight: 500; text-align: start; }
  .oatmeal-compare td { color: var(--ink-muted); }
  .oatmeal-compare__yes { color: var(--color-positive); font-size: 2em; }
  .oatmeal-compare__no { color: var(--color-negative); font-size: 2em; }
  .oatmeal-compare__brand,
  .oatmeal-compare__brand-h { background: color-mix(in oklch, var(--accent) 8%, transparent); }
  .oatmeal-compare__brand-h { border-radius: var(--radius-2) var(--radius-2) 0 0; color: var(--ink); }
  .oatmeal-compare tbody tr:last-child .oatmeal-compare__brand { border-radius: 0 0 var(--radius-2) var(--radius-2); }

  /* ──────────────────────────── Testimonials ────────────────────────── */
  .oatmeal-quote {
    background: var(--card);
    border-radius: var(--radius-card);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    font-size: var(--text-small);
    justify-content: space-between;
    line-height: 1.7;
    padding: 1.5rem;
  }
  .oatmeal-quote__avatar { block-size: 3rem; border-radius: 50%; inline-size: 3rem; overflow: hidden; }
  .oatmeal-quote__avatar > img { block-size: 100%; inline-size: 100%; object-fit: cover; }
  .oatmeal-quote__name { color: var(--ink); font-weight: 600; }
  .oatmeal-quote__byline { color: var(--ink-muted); }

  /* ─────────────────────────────── FAQ ──────────────────────────────── */
  .oatmeal-faq { border-block: 1px solid var(--line); }
  .oatmeal-faq__item + .oatmeal-faq__item { border-block-start: 1px solid var(--line); }
  .oatmeal-faq__q {
    align-items: flex-start;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-size: var(--text-normal);
    gap: 1.5rem;
    justify-content: space-between;
    list-style: none;
    padding-block: 1rem;
  }
  .oatmeal-faq__q::-webkit-details-marker { display: none; }
  .oatmeal-faq__icon { color: var(--ink-muted); flex-shrink: 0; transition: transform 150ms var(--ease-out-expo); }
  .oatmeal-faq__item[open] .oatmeal-faq__icon { transform: rotate(180deg); }
  .oatmeal-faq__a { color: var(--ink-muted); font-size: var(--text-small); line-height: 1.7; padding-block-end: 1rem; padding-inline-end: 3rem; }

  /* ───────────────────────────── Pricing ────────────────────────────── */
  .oatmeal-plan {
    background: var(--card);
    border-radius: var(--radius-3);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1.5rem;
  }
  .oatmeal-plan[data-featured] { outline: 2px solid var(--accent); outline-offset: -1px; }
  .oatmeal-plan__name { color: var(--ink); font-size: var(--text-large); letter-spacing: -0.01em; }
  .oatmeal-plan__price { color: var(--ink); font-size: var(--text-large); }
  .oatmeal-plan__period { color: var(--ink-subtle); font-size: var(--text-normal); }
  .oatmeal-plan__text { color: var(--ink-muted); font-size: var(--text-small); }
  .oatmeal-plan__features { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
  .oatmeal-plan__features li { align-items: start; color: var(--ink-muted); display: flex; font-size: var(--text-small); gap: 0.75rem; }
  .oatmeal-plan__check { color: var(--accent); flex-shrink: 0; }
  .oatmeal-plan__badge {
    background: color-mix(in oklch, var(--ink) 10%, transparent);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-size: var(--text-x-small);
    font-weight: 500;
    padding: 0.1rem 0.6rem;
  }

  /* ─────────────── Pricing — single tier, two columns (pricing-02) ────── */
  .oatmeal-price-card {
    background: var(--card);
    border-radius: var(--radius-3);
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  @media (min-width: 60rem) {
    .oatmeal-price-card { grid-template-columns: 1fr 1fr; }
  }
  .oatmeal-price-card__intro {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    justify-content: space-between;
    padding: 1.5rem;
  }
  .oatmeal-price-card__panel {
    background: var(--surface);
    border-radius: var(--radius-2);
    padding: 1.5rem;
  }
  @media (min-width: 40rem) {
    .oatmeal-price-card__intro { padding: 2.5rem; }
    .oatmeal-price-card__panel { padding: 2.5rem; }
  }
  .oatmeal-price-row { align-items: baseline; display: flex; gap: 0.5rem; }
  .oatmeal-price {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 2rem + 7vw, 6rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .oatmeal-price__period { color: var(--ink-muted); font-size: var(--text-medium); }
  .oatmeal-checklist {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
  }
  @media (min-width: 48rem) and (max-width: 59.99rem) {
    .oatmeal-checklist { grid-template-columns: 1fr 1fr; }
  }
  .oatmeal-checklist li {
    align-items: center;
    color: var(--ink-muted);
    display: flex;
    font-size: var(--text-small);
    gap: 0.75rem;
  }
  .oatmeal-checklist__box {
    align-items: center;
    background: var(--ink);
    block-size: 1.25rem;
    border-radius: 3px;
    color: var(--canvas);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.8rem;
    inline-size: 1.25rem;
    justify-content: center;
  }

  /* ────────────────────────── Call to action ────────────────────────── */
  .oatmeal-cta__title { max-inline-size: 56rem; }

  /* ─────────────────────────────── Footer ───────────────────────────── */
  .oatmeal-footer { padding-block-start: 4rem; }
  .oatmeal-footer__inner { background: var(--card); color: var(--ink); }
  .oatmeal-footer__cat-title { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
  .oatmeal-footer__link { color: var(--ink-muted); display: block; font-size: var(--text-small); text-decoration: none; }
  .oatmeal-footer__link:hover { color: var(--ink); }
  .oatmeal-footer__fine { color: var(--ink-subtle); font-size: var(--text-small); }
  .oatmeal-footer__social { color: var(--ink); }

  .oatmeal-newsletter__field {
    align-items: center;
    border-block-end: 1px solid var(--line-strong);
    display: flex;
    gap: 0.5rem;
    padding-block: 0.5rem;
  }
  .oatmeal-newsletter__field:focus-within { border-color: var(--ink); }
  .oatmeal-newsletter__input {
    background: transparent; border: 0; color: var(--ink); flex: 1; font: inherit; outline: none;
  }
  .oatmeal-newsletter__submit {
    align-items: center; background: transparent; border: 0; border-radius: var(--radius-pill);
    color: var(--ink); cursor: pointer; display: inline-flex; justify-content: center; padding: 0.375rem;
  }
  .oatmeal-newsletter__submit:hover { background: var(--card-hover); }

  /* ──────────────────────────── Logo cloud ──────────────────────────── */
  .oatmeal-logos { align-items: center; color: var(--ink-muted); justify-items: center; }
  .oatmeal-logo { block-size: 2rem; opacity: 0.7; }

  /* ────────────── Document (content pages — privacy-policy-01) ─────────
     Centered legal/prose body: small muted text, medium ink headings,
     square-bullet lists, underlined ink links. */
  .oatmeal-document { color: var(--color-stone-800); font-size: var(--text-prose); line-height: 1.75; }
  html[data-theme="dark"] .oatmeal-document { color: var(--color-stone-200); }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .oatmeal-document { color: var(--color-stone-200); }
  }
  .oatmeal-document > * + * { margin-block-start: 1rem; }
  .oatmeal-document h2 {
    color: var(--ink);
    font-size: var(--text-normal);
    font-weight: 500;
    line-height: 1.6;
  }
  .oatmeal-document h2:not(:first-child) { margin-block-start: 2rem; }
  .oatmeal-document h3 { color: var(--ink); font-size: var(--text-small); font-weight: 600; margin-block-start: 1.5rem; }
  .oatmeal-document a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .oatmeal-document strong { color: var(--ink); font-weight: 600; }
  .oatmeal-document ul { list-style: square; padding-inline-start: 1.5rem; }
  .oatmeal-document ol { list-style: decimal; padding-inline-start: 1.5rem; }
  .oatmeal-document li { padding-inline-start: 0.5rem; }
  .oatmeal-document li::marker { color: var(--ink-subtle); }
}

/* ──────────────────── Utilities (token-driven, single job) ─────────────── */
@layer utilities {
  .font-display { font-family: var(--font-display); font-weight: 400; }
  .text-muted { color: var(--ink-muted); }
  .text-subtle { color: var(--ink-subtle); }
  .text-accent { color: var(--accent); }
  .text-balance { text-wrap: balance; }
  .text-pretty { text-wrap: pretty; }
}