/* ==========================================================================
   ChopTime marketing site — global stylesheet
   Order: @font-face · tokens · reset · utilities · blocks
   Each block is namespaced `ct-<block>` so a single section can be lifted
   into a Blade partial with only its own rules travelling with it.
   ========================================================================== */

/* --- @font-face: Carnac ---------------------------------------------------
   NOTE: web licence for Carnac is unconfirmed (see the mobile repo's
   docs/licences/hoftype-app-licence-request.md). TTFs are served directly
   here; swap in subset woff2 once the licence is settled.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Carnac"; src: url("../fonts/carnac/Carnac-Regular.ttf") format("truetype");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Carnac"; src: url("../fonts/carnac/Carnac-Medium.ttf") format("truetype");    font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Carnac"; src: url("../fonts/carnac/Carnac-Bold.ttf") format("truetype");      font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Carnac"; src: url("../fonts/carnac/Carnac-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Carnac"; src: url("../fonts/carnac/Carnac-Black.ttf") format("truetype");     font-weight: 900; font-style: normal; font-display: swap; }

/* --- tokens (from the ChopTime design system) ---------------------------- */
:root {
  --ct-red: #BD2527;
  --ct-orange: #FAAF40;
  --red-600: #A31D21;
  --red-700: #86171C;
  --orange-100: #FDEACA;
  --orange-200: #FCD79B;
  --orange-300: #FBC36D;
  --orange-500: #EA9A22;
  --cream-0: #FFFFFF;
  --cream-50: #FFF9F0;
  --cream-100: #FAF0E2;
  --cream-200: #F0E2D0;
  --neutral-300: #D9C7B4;
  --neutral-600: #6B5548;
  --neutral-400: #B39D8A;
  --neutral-500: #8C7565;
  --neutral-700: #4E3B31;
  --ink-800: #38251E;
  --ink-900: #2A1713;
  --ink-950: #1B0F0C;
  --green-500: #3E8E4E;
  --green-100: #E1F2E3;
  --danger: #A31D21;
  --border-subtle: #F0E2D0;
  --border-input: #D9C7B4;

  /* ACCENTS AS TYPE, THE RULE. Yolk orange is a GLYPH colour: yolk dots, icons,
     rules, the mark. As type it is only legible on the dark grounds (--ink-800,
     --ink-900), where it measures about 7.7:1. On pepper red it is 3.26:1 and on
     cream 1.78:1. So accent type on red steps up the ramp: --orange-100 for
     small type (5.3:1) and --orange-200 for display scale (4.4:1, well past the
     3:1 large-text floor), while on cream accent type is --ct-red (5.8:1).
     Pepper red as type works on cream, white and yolk, never on charcoal,
     where it is 2.81:1. */
  --font-display: "Carnac", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  /* the nav's tallest child is a 46px control inside 0.9rem of padding */
  --nav-h: calc(46px + 1.8rem);
  --measure: 34ch;
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* anchor targets must clear the fixed nav rather than hide under it */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
body {
  margin: 0;
  background: var(--cream-50);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 0.94; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ct-red); text-decoration: none; }
a:hover { color: var(--red-700); }
button { font: inherit; color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ct-orange);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.ct-eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ==========================================================================
   BLOCK: ct-nav
   ========================================================================== */
.ct-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.9rem var(--gutter);
  background: transparent;
}
.ct-nav::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: color-mix(in srgb, var(--cream-50) 88%, transparent);
  border-bottom: 1px solid var(--cream-200);
}
@supports (backdrop-filter: blur(8px)) {
  .ct-nav::before { backdrop-filter: blur(10px); }
}
.ct-nav > * { position: relative; z-index: 1; }
.ct-nav__logo { flex: 0 0 auto; margin-right: auto; }
.ct-nav__logo img { height: 30px; width: auto; }
.ct-nav__links { display: none; gap: 1.75rem; }
.ct-nav__links a {
  color: var(--neutral-700); font-weight: 500; font-size: 0.95rem;
  padding: 0.35rem 0; position: relative;
}
.ct-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--ct-orange);
  transition: right 0.28s var(--ease-out);
}
.ct-nav__links a:hover { color: var(--ink-900); }
.ct-nav__links a:hover::after { right: 0; }

.ct-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 46px; padding: 0 1.15rem;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--ct-red); color: #fff;
  font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 6px 18px rgb(189 37 39 / 0.24);
  transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.ct-btn:hover { background: var(--red-600); }
.ct-btn:active { background: var(--red-700); transform: scale(0.98); }
.ct-btn__yolk { width: 10px; height: 10px; border-radius: 50%; background: var(--ct-orange); }

.ct-nav__toggle {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: none; border: 1px solid var(--cream-200); border-radius: 14px; cursor: pointer;
}
.ct-nav__toggle i { font-size: 22px; line-height: 1; transition: transform 0.26s var(--ease-out); }
.ct-nav[data-open="true"] .ct-nav__toggle i { transform: rotate(90deg); }

.ct-nav__panel {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 55;
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 0.25rem;
  padding: 1.5rem var(--gutter) 2.5rem;
  background: var(--ink-900);
  background-image: url("../images/marketing/brand/monogram-tile.png");
  background-size: 340px;
  background-blend-mode: soft-light;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.26s var(--ease-out), transform 0.32s var(--ease-out), visibility 0.26s;
}
.ct-nav[data-open="true"] .ct-nav__panel { opacity: 1; visibility: visible; transform: none; }
.ct-nav__panel > a:not(.ct-btn) {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.1);
  color: var(--cream-50); font-weight: 800; font-size: clamp(1.9rem, 9vw, 2.6rem);
  letter-spacing: -0.02em;
}
.ct-nav__panel > a small {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ct-orange); text-transform: uppercase;
}

@media (min-width: 62rem) {
  .ct-nav__links { display: flex; }
  .ct-nav__toggle, .ct-nav__panel { display: none; }
}

/* ==========================================================================
   BLOCK: ct-loop
   One supper, from the plate to the door.
   The journey is literal: a track that starts at your week's plate and ends
   at your front door, with four stops along it and a yolk travelling between
   them. Scroll drives it. Geometry from M6 (ct_bowl_spoon_motif.dart):
   plate superellipse stroked at 22, six yolks at r 59.87.
   Pinned on wide screens; on small screens the journey bar sticks under the
   nav and the stations become stacked cards it tracks against.
   ========================================================================== */
.ct-loop {
  position: relative;
  background: var(--ink-900);
  color: var(--cream-50);
  --fill: 0%;
  --rider: 12.5%;
}
/* The one 3D moment. Only ever present when ct-loop3d.js clears its
   capability gate, so this rule styles something that usually does not exist.
   The mask is the point: it holds the canvas clear of the middle of the stage
   where the station copy sits, so depth arrives at the edges and contrast in
   the reading area is untouched. */
.ct-loop__gl {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 40% 52%, transparent 0%, transparent 58%, #000 100%);
  mask-image: radial-gradient(ellipse 58% 52% at 40% 52%, transparent 0%, transparent 58%, #000 100%);
}
.ct-loop__gl[data-ready="true"] { opacity: 0.62; }

.ct-loop__texture {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../images/marketing/brand/monogram-tile.png");
  background-size: 420px;
  opacity: 0.05;
}
.ct-loop__track { position: relative; }
.ct-loop__stage { position: relative; }

/* --- header -------------------------------------------------------------- */
.ct-loop__head, .ct-journey, .ct-loop__body { position: relative; z-index: 1; }
.ct-loop__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 2rem;
  padding: clamp(3rem, 8vh, 5rem) var(--gutter) clamp(1.5rem, 4vh, 2.25rem);
}
.ct-loop__head .ct-eyebrow { color: var(--ct-orange); margin: 0; }
.ct-loop__head h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); letter-spacing: -0.035em; }
.ct-loop__head h2 span { display: block; margin-top: 0.4rem; font-size: 0.44em; font-weight: 500; color: var(--neutral-400); letter-spacing: -0.01em; }

/* ==========================================================================
   the journey bar: plate ─ stop ─ stop ─ stop ─ stop ─ door
   ========================================================================== */
.ct-journey {
  position: sticky; top: var(--nav-h); z-index: 4;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(0.5rem, 1.6vw, 1.25rem);
  padding: 0.85rem var(--gutter);
  background: color-mix(in srgb, var(--ink-900) 92%, transparent);
  border-block: 1px solid rgb(255 255 255 / 0.1);
}
@supports (backdrop-filter: blur(8px)) { .ct-journey { backdrop-filter: blur(10px); } }

/* the two ends: where the journey starts and where it finishes */
.ct-journey__end {
  display: grid; place-items: center;
  width: clamp(2.5rem, 5.5vw, 3.6rem); aspect-ratio: 1;
  border-radius: 50%;
}
.ct-journey__end svg { width: 100%; height: 100%; }
.ct-journey__door {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.3);
  color: var(--cream-50); font-size: clamp(16px, 2.4vw, 21px);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.ct-loop[data-arrived="true"] .ct-journey__door {
  border-color: var(--ct-orange); background: var(--ct-orange); color: var(--ink-900);
}

/* the track between them */
/* One axis for the whole bar. The stop dots sit in flow, so the axis is their
   centre line: the row starts at 0.9rem and each dot is 9px, putting its
   centre 4.5px lower. The line and the rider are then hung off that, rather
   than each being positioned at 0.9rem and landing 3px above the dots. */
.ct-journey__mid {
  position: relative; min-width: 0; padding-top: 0.9rem;
  --axis: calc(0.9rem + 4.5px);
}
.ct-journey__line, .ct-journey__fill {
  position: absolute; top: calc(var(--axis) - 1.5px); left: 12.5%; right: 12.5%;
  height: 3px; border-radius: 3px;
}
.ct-journey__line { background: rgb(255 255 255 / 0.16); }
.ct-journey__fill {
  right: auto; width: calc(var(--fill) * 0.75);
  background: var(--ct-orange);
  transition: width 0.12s linear;
}
.ct-journey__rider {
  position: absolute; top: var(--axis); left: var(--rider);
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%; background: var(--ct-orange);
  box-shadow: 0 0 0 4px var(--ink-900);
  transition: left 0.12s linear;
}

.ct-journey__stops { display: flex; }
.ct-journey__stops li {
  flex: 1 1 0; min-width: 0;
  display: grid; justify-items: center; gap: 0.5rem;
  text-align: center;
}
.ct-journey__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-900); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.28);
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ct-journey__stops li[data-reached="true"] .ct-journey__dot {
  background: var(--ct-orange); box-shadow: 0 0 0 2px var(--ct-orange);
}
.ct-journey__stops b {
  display: block;
  font-size: clamp(0.66rem, 1.5vw, 0.78rem); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  /* on ink, muted means lighter: neutral-400 is 6.7:1 where neutral-500 is
     3.94:1. The reached state still reads brighter again, in cream. */
  color: var(--neutral-400);
  transition: color 0.3s var(--ease-out);
}
.ct-journey__stops li[data-reached="true"] b { color: var(--cream-50); }
.ct-journey__stops small {
  display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--neutral-400);
}
@media (max-width: 34rem) { .ct-journey__stops small { display: none; } }

/* ==========================================================================
   the stations
   ========================================================================== */
.ct-loop__body { padding: clamp(2rem, 5vh, 3.5rem) var(--gutter) clamp(3rem, 8vh, 5rem); }

.ct-station {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  max-width: 78rem;
}
@media (min-width: 52rem) { .ct-station { grid-template-columns: minmax(0, 1fr) auto; } }

.ct-station__handoff {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ct-orange);
}
.ct-station__handoff i { font-size: 15px; }
.ct-station__handoff span { color: var(--neutral-400); }
.ct-station h3 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 5vw, 3.6rem); letter-spacing: -0.035em;
}
.ct-station h3 .ct-accra { display: block; margin-top: 0.06em; font-size: 1.4em; letter-spacing: -0.05em; color: var(--ct-red); }
.ct-station > div > p { margin-top: 1rem; max-width: 34rem; color: var(--neutral-300); font-size: clamp(1rem, 1.2vw, 1.15rem); }

.ct-ingredients { display: grid; gap: 0 2.5rem; margin-top: 1.5rem; max-width: 30rem; }
@media (min-width: 30rem) { .ct-ingredients { grid-template-columns: 1fr 1fr; } }
.ct-ingredients li {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: baseline; gap: 0.75rem;
  padding: 0.42rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.08);
  font-size: 0.95rem;
}
.ct-ingredients li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ct-orange); transform: translateY(-1px); }
.ct-ingredients span { color: var(--neutral-400); font-size: 0.85rem; }

.ct-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.ct-meta li {
  padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.18);
  font-size: 0.82rem; font-weight: 500; color: var(--cream-100);
}
.ct-meta li b { color: var(--ct-orange); font-weight: 700; }

.ct-station__loopback {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.3rem;
  font-weight: 700; color: var(--ct-orange); font-size: 0.95rem;
}
.ct-station__loopback i { font-size: 20px; }

/* the app screen for each station */
.ct-screen {
  position: relative; justify-self: center;
  width: min(14rem, 72vw); aspect-ratio: 390 / 780;
  border-radius: 15% / 7.5%; overflow: hidden;
  background: var(--ink-950); border: clamp(4px, 0.9vh, 7px) solid var(--ink-950);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.45);
}
.ct-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ct-screen__tab {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.35); z-index: 2;
}

/* --- pinned mode: one station at a time, cross faded -------------------
   Gated on height as well as width, but only as far down as the layout can
   genuinely go. The screen frame sizes from viewport height here rather than
   its own width, so the stage fits anything from 32rem tall upwards and short
   desktop windows still get the pinned experience. Below that, landscape
   phones at roughly 24rem tall, nothing would fit and the stacked cards are
   the right rendering instead. */
@media (min-width: 52rem) and (min-height: 32rem) {
  .ct-loop__track { height: 420vh; }
  .ct-loop__stage {
    position: sticky; top: 0; height: 100svh; min-height: 30rem;
    display: grid; grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }
  /* --nav-h is the single source of truth for clearing the fixed nav; a
     clamp floor of 4.5rem is 3px short of it and overlapped the headline
     on every viewport under 682px tall */
  .ct-loop__head { padding-top: calc(var(--nav-h) + clamp(0.5rem, 4vh, 2rem)); }
  /* Everything the sticky bar needs off the page has to come off here, not
     just its background. `top` is a threshold while sticky and an offset once
     relative, so leaving it set shoved the bar --nav-h down out of its grid
     row and on top of the station. The blur and the rules are page furniture
     too: with no background they would blur and score the stage behind them. */
  .ct-journey {
    position: relative; top: 0;
    background: none; border: 0; backdrop-filter: none;
    /* centred with the rest of the stage. It keeps its full width bar and
       background in stacked mode, where it really is a bar. width:100% is
       required: auto margins alone stop a grid item stretching, so it would
       shrink to its content and collapse the track. */
    width: 100%; max-width: calc(82rem + 2 * var(--gutter)); margin-inline: auto;
  }
  .ct-loop__body { position: relative; }
  .ct-station {
    position: absolute; inset: clamp(2rem, 5vh, 3.5rem) var(--gutter) clamp(2rem, 5vh, 3rem);
    /* the single row stretches to the station's definite height, which is what
       gives the screen wrapper something to resolve 100% against. The copy is
       still centred, by align-items on the base rule. */
    grid-auto-rows: 100%;
    /* A 1fr text column stretches to whatever the stage is, which on a wide
       monitor strands the copy at one edge and the screen at the other. Bound
       it to the measure the copy actually reads at and the pair travels
       together, inside the section's 78rem container. */
    grid-template-columns: minmax(0, 34rem) auto;
    justify-content: start;
    max-width: 82rem; margin-inline: auto;
    opacity: 0; transform: translateY(1.25rem); pointer-events: none;
    transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .ct-station[data-active="true"] { opacity: 1; transform: none; pointer-events: auto; }
  /* The screen is an aspect-ratio box inside an auto column, so sizing it
     directly is circular: its column width depends on its width, which
     depends on its height, which depends on the row. The wrapper breaks the
     loop. It stretches to the station's row, giving a definite height, and
     the frame then takes 100% of that and derives its width. Full designed
     size whenever there is room, scaled down only when there truly is not. */
  .ct-screen__fit { align-self: stretch; display: grid; align-content: center; }
  .ct-screen { height: min(28rem, 100%); width: auto; }
}

/* A short pinned window spends most of its height on the head, the journey bar
   and the station's insets, leaving the product shot too small to read. This
   tightens the chrome rather than shrinking the thing the section exists to
   show. */
@media (min-width: 52rem) and (min-height: 32rem) and (max-height: 46rem) {
  .ct-loop__head { padding-top: calc(var(--nav-h) + 0.4rem); padding-bottom: 0.75rem; }
  .ct-loop__head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .ct-loop__head h2 span { margin-top: 0.2rem; font-size: 0.62em; }
  .ct-journey { padding-block: 0.5rem; }
  .ct-station { inset: 1.1rem var(--gutter) 1rem; }
  .ct-station h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
  .ct-station > div > p { margin-top: 0.7rem; font-size: 0.92rem; }
  /* the two ingredient stations are the tallest; they set the floor for what
     the station has to hold, so they tighten furthest */
  .ct-ingredients { margin-top: 0.9rem; }
  .ct-ingredients li { padding: 0.28rem 0; font-size: 0.85rem; }
  .ct-ingredients span { font-size: 0.76rem; }
  .ct-meta { margin-top: 0.9rem; }
}

/* --- stacked mode: every station is a card the journey bar tracks ------
   A logical or, not an and: too narrow OR too short both land here. */
@media (max-width: 51.99rem), (max-height: 31.99rem) {
  .ct-loop__body { display: grid; gap: 1rem; }
  .ct-station {
    padding: clamp(1.25rem, 4vw, 1.75rem);
    border: 1px solid rgb(255 255 255 / 0.12); border-radius: 28px;
    background: rgb(255 255 255 / 0.03);
    transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
  }
  .ct-station[data-active="true"] { border-color: rgb(250 175 64 / 0.45); background: rgb(250 175 64 / 0.05); }
  .ct-station h3 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .ct-screen { width: min(11rem, 58vw); justify-self: start; }
}

/* --- reduced motion: the journey held still, every station readable ---- */
@media (prefers-reduced-motion: reduce) {
  .ct-loop__track { height: auto; }
  .ct-loop__stage { position: static; height: auto; min-height: 0; display: block; overflow: visible; }
  .ct-journey { position: static; }
  .ct-loop__body { position: static; display: grid; gap: 2rem; }
  .ct-station { position: static; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
  .ct-journey__fill { width: 75%; }
  .ct-journey__rider { display: none; }
  .ct-journey__dot { background: var(--ct-orange); box-shadow: 0 0 0 2px var(--ct-orange); }
  .ct-journey__stops b { color: var(--cream-50); }
  .ct-journey__door { border-color: var(--ct-orange); background: var(--ct-orange); color: var(--ink-900); }
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   BLOCK: ct-motion utilities (shared by every section below)
   ========================================================================== */
/* only hide revealable content when scripting is actually available */
.ct-js .ct-reveal { opacity: 0; transform: translateY(16px); }
.ct-reveal.is-revealed {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
  .ct-js .ct-reveal { opacity: 1; transform: none; }
}

/* the motif's own keyframes, verbatim from ChopTime Motif System v2 */
@keyframes ctDraw { 0% { stroke-dashoffset: 1681 } 28% { stroke-dashoffset: 0 } 88% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -1681 } }
@keyframes ctB1 { 0%,30% { transform: translateY(-170px); opacity: 0 } 31% { opacity: 1 } 39% { transform: translateY(0); opacity: 1 } 90% { transform: translateY(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateY(-170px); opacity: 0 } }
@keyframes ctB2 { 0%,33% { transform: translateY(-170px); opacity: 0 } 34% { opacity: 1 } 42% { transform: translateY(0); opacity: 1 } 90% { transform: translateY(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateY(-170px); opacity: 0 } }
@keyframes ctB3 { 0%,36% { transform: translateY(-170px); opacity: 0 } 37% { opacity: 1 } 45% { transform: translateY(0); opacity: 1 } 90% { transform: translateY(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateY(-170px); opacity: 0 } }
@keyframes ctB4 { 0%,39% { transform: translateY(-170px); opacity: 0 } 40% { opacity: 1 } 48% { transform: translateY(0); opacity: 1 } 90% { transform: translateY(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateY(-170px); opacity: 0 } }
@keyframes ctB5 { 0%,42% { transform: translateY(-170px); opacity: 0 } 43% { opacity: 1 } 51% { transform: translateY(0); opacity: 1 } 90% { transform: translateY(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateY(-170px); opacity: 0 } }
@keyframes ctB6 { 0%,45% { transform: translateY(-170px); opacity: 0 } 46% { opacity: 1 } 54% { transform: translateY(0); opacity: 1 } 90% { transform: translateY(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateY(-170px); opacity: 0 } }
@keyframes ctB7 { 0%,48% { transform: translateY(-170px); opacity: 0 } 49% { opacity: 1 } 57% { transform: translateY(0); opacity: 1 } 90% { transform: translateY(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateY(-170px); opacity: 0 } }
@keyframes ctServe { 0%,18% { transform: translateX(130px); opacity: 0 } 20% { opacity: 1 } 32% { transform: translateX(0); opacity: 1 } 90% { transform: translateX(0); opacity: 1 } 96% { opacity: 0 } 100% { transform: translateX(130px); opacity: 0 } }
@keyframes ctS1 { 0%,60% { transform: scale(0) } 65% { transform: scale(1.16) } 68% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctR1 { 0%,10% { transform: scale(0) } 15% { transform: scale(1.16) } 18% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctR2 { 0%,13% { transform: scale(0) } 18% { transform: scale(1.16) } 21% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctR3 { 0%,16% { transform: scale(0) } 21% { transform: scale(1.16) } 24% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctR4 { 0%,19% { transform: scale(0) } 24% { transform: scale(1.16) } 27% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctR5 { 0%,22% { transform: scale(0) } 27% { transform: scale(1.16) } 30% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctR6 { 0%,25% { transform: scale(0) } 30% { transform: scale(1.16) } 33% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctR7 { 0%,28% { transform: scale(0) } 33% { transform: scale(1.16) } 36% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctScoop { 0% { transform: rotate(-7deg) } 12% { transform: rotate(0deg) } 90% { transform: rotate(0deg) } 100% { transform: rotate(-7deg) } }
@keyframes ctGrow { 0% { transform: scaleX(0) } 16% { transform: scaleX(1) } 90% { transform: scaleX(1) } 100% { transform: scaleX(0) } }
@keyframes ctL1 { 0%,32% { transform: scale(0) } 37% { transform: scale(1.16) } 40% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctL2 { 0%,38% { transform: scale(0) } 43% { transform: scale(1.16) } 46% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctL3 { 0%,44% { transform: scale(0) } 49% { transform: scale(1.16) } 52% { transform: scale(1) } 88% { transform: scale(1) } 95%,100% { transform: scale(0) } }
@keyframes ctSpin { to { transform: rotate(360deg) } }
@keyframes ctUnfold { 0% { transform: scale(.26) rotate(-40deg); opacity: 0 } 15% { transform: scale(1) rotate(0deg); opacity: 1 } 85% { transform: scale(1) rotate(0deg); opacity: 1 } 100% { transform: scale(.26) rotate(-40deg); opacity: 0 } }
@keyframes ctDrift { to { transform: translate(64.6px, 64.6px) } }
@keyframes ctDriftLg { to { transform: translate(166.7px, 166.7px) } }
@keyframes ctDot { 0%,80%,100% { opacity: .35; transform: scale(.72) } 40% { opacity: 1; transform: scale(1) } }
@keyframes ctRise { 0% { opacity: 0; transform: translateY(12px) } 100% { opacity: 1; transform: none } }

/* ==========================================================================
   BLOCK: ct-hero
   Two columns. The question on the left, M6 answering it on the right:
   the plate draws itself on and six yolks land (the week you already
   planned), the spoon reaches in and lifts one out (today), the handle runs
   off the right edge of the viewport. Under the plate, the plan says what
   the spoon is carrying, rotating in time with the served yolk's pop.
   ========================================================================== */
.ct-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 58rem);
  display: grid; align-content: center;
  padding: clamp(6rem, 14vh, 9.5rem) 0 clamp(2.5rem, 7vh, 4rem);
  background: var(--ct-red);
  color: #fff;
  --drift-x: 0px; --drift-y: 0px;
}
.ct-hero__cloth {
  position: absolute; inset: -8%; z-index: -2;
  transform: translate(calc(var(--drift-x) * -0.35), calc(var(--drift-y) * -0.35));
  transition: transform 1.4s var(--ease-out);
}
.ct-hero__cloth svg { width: 100%; height: 100%; }

.ct-hero__inner {
  display: grid; align-items: center;
  gap: clamp(2rem, 5vh, 3.5rem) clamp(1.5rem, 4vw, 4rem);
  padding-left: var(--gutter);
}
@media (min-width: 52rem) {
  .ct-hero__inner { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
}

/* --- left: the question ---------------------------------------------- */
.ct-hero__copy { padding-right: var(--gutter); max-width: 34rem; }
@media (min-width: 52rem) { .ct-hero__copy { max-width: none; } }
.ct-hero h1 {
  font-size: clamp(2.2rem, 6vw, 5.2rem);
  line-height: 0.94; letter-spacing: -0.04em;
}
.ct-hero__so { display: flex; align-items: center; gap: 0.34em; }
.ct-hero__dots { display: inline-flex; gap: 0.18em; padding-top: 0.22em; }
.ct-hero__dots i {
  width: 0.17em; height: 0.17em; border-radius: 50%;
  background: var(--ct-orange); animation: ctDot 1.2s linear infinite;
}
.ct-hero__dots i:nth-child(2) { animation-delay: 0.15s; }
.ct-hero__dots i:nth-child(3) { animation-delay: 0.3s; }
.ct-hero__ask { display: block; }

.ct-hero__lede {
  margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 32rem;
  font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 500;
  color: var(--cream-100);
}
.ct-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}
.ct-hero .ct-btn { background: var(--cream-50); color: var(--ct-red); box-shadow: 0 10px 30px rgb(42 23 19 / 0.28); }
.ct-hero .ct-btn:hover { background: #fff; }
.ct-hero .ct-btn__yolk { background: var(--ct-orange); }

/* --- right: the motif answers ---------------------------------------- */
.ct-hero__motif {
  position: relative; justify-self: stretch; min-width: 0;
  transform: translate(calc(var(--drift-x) * 0.55), calc(var(--drift-y) * 0.4));
  transition: transform 1.1s var(--ease-out);
}
/* Sized from the column's width, not the viewport's height, so the crop is
   the same at every window size. The motif column runs to the viewport's right
   edge, and the sprite's handle stub runs to the viewBox's own right boundary,
   so at full width the whole spoon and part of its stem read, and the stem
   leaves the frame exactly at the edge. */
.ct-hero__motif svg {
  display: block; width: 100%; height: auto; margin: 0;
  pointer-events: none;
}
/* store badge placements: swapped for real badges later, same box */
.ct-store { display: flex; gap: 0.6rem; }
.ct-store a {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.55rem;
  width: 8.6rem; height: 46px; padding: 0 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.42); border-radius: 12px;
  color: #fff; font-size: 0.7rem; font-weight: 500; line-height: 1.1;
}
.ct-store a:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / 0.08); }
.ct-store i { font-size: 20px; }
.ct-store b { display: block; font-size: 0.8rem; font-weight: 700; }

/* nav sitting over the hero */
.ct-nav[data-mode="over"] { border: 0; }
.ct-nav[data-mode="over"]::before { opacity: 0; }
.ct-nav[data-mode="over"] .ct-nav__links a { color: var(--cream-100); }
.ct-nav[data-mode="over"] .ct-nav__links a:hover { color: #fff; }
.ct-nav[data-mode="over"] .ct-nav__toggle { border-color: rgb(255 255 255 / 0.4); color: #fff; }
.ct-nav__logo { position: relative; display: block; }
.ct-nav__logo img { transition: opacity 0.3s var(--ease-out); }
.ct-nav__logo img + img { position: absolute; inset: 0; opacity: 0; }
.ct-nav[data-mode="over"] .ct-nav__logo img { opacity: 0; }
.ct-nav[data-mode="over"] .ct-nav__logo img + img { opacity: 1; }
.ct-nav::before { transition: opacity 0.3s var(--ease-out); }

/* ==========================================================================
   BLOCK: ct-problem
   ========================================================================== */
.ct-problem { padding: clamp(4.5rem, 12vh, 9rem) var(--gutter); }
.ct-problem__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 82rem;
}
@media (min-width: 56rem) { .ct-problem__grid { grid-template-columns: 9rem minmax(0, 1fr); } }
.ct-problem__label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ct-red);
}
@media (min-width: 56rem) { .ct-problem__label { position: sticky; top: 6rem; align-self: start; } }

.ct-clock { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.ct-clock li {
  display: grid; gap: 0.2rem 1.4rem; align-items: baseline;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  padding-bottom: clamp(1.1rem, 2.4vw, 1.8rem);
  border-bottom: 1px solid var(--cream-200);
}
.ct-clock time {
  font-size: 0.85rem; font-weight: 700; color: var(--neutral-600);
  font-variant-numeric: tabular-nums;
}
.ct-clock p { font-size: clamp(1.2rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.14; }

.ct-problem__turn { margin-top: clamp(2.5rem, 6vw, 4rem); max-width: 44rem; }
.ct-problem__turn p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--neutral-700); }
.ct-problem__turn p + p { margin-top: 1rem; }
.ct-problem__turn strong {
  display: block; margin-top: 2rem;
  font-size: clamp(1.9rem, 5.5vw, 3.6rem); font-weight: 900; letter-spacing: -0.035em;
  line-height: 1; color: var(--ct-red);
}

/* ==========================================================================
   BLOCK: ct-plan  (the lead section: meal planning)
   Three movements: how a plan is generated, the model behind it, and the
   planning horizon. The M1 rail runs full bleed as the horizon itself, its
   served yolk today and the six ahead of it the days you planned.
   ========================================================================== */
.ct-plan { padding: clamp(4.5rem, 12vh, 9rem) 0; background: var(--cream-100); }
.ct-plan__head { padding-inline: var(--gutter); max-width: 60rem; }
.ct-plan__head .ct-eyebrow { color: var(--ct-red); }
.ct-plan h2 { font-size: clamp(2.4rem, 7.5vw, 6rem); letter-spacing: -0.04em; }
.ct-plan h2 em { font-style: normal; color: var(--ct-red); }
.ct-plan__head p { margin-top: 1.4rem; max-width: 38rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--neutral-700); }

/* --- how a plan gets generated ---------------------------------------- */
.ct-plan__how {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  margin: clamp(2.5rem, 6vw, 4rem) var(--gutter) 0;
  max-width: 82rem;
}
@media (min-width: 62rem) {
  .ct-plan__how { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
}

.ct-gen { display: grid; gap: 1.15rem; counter-reset: gen; }
.ct-gen li {
  counter-increment: gen;
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1rem;
  padding-bottom: 1.15rem; border-bottom: 1px solid var(--cream-200);
}
.ct-gen li:last-child { padding-bottom: 0; border-bottom: 0; }
.ct-gen li::before {
  content: counter(gen, decimal-leading-zero);
  padding-top: 0.3em;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ct-red);
}
.ct-gen b { display: block; font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 800; letter-spacing: -0.022em; }
.ct-gen p { margin-top: 0.45rem; color: var(--neutral-700); font-size: 0.98rem; }

/* --- the model -------------------------------------------------------- */
.ct-model {
  background: var(--cream-0); border: 1px solid var(--border-subtle); border-radius: 28px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 18px 44px rgb(42 23 19 / 0.08);
}
.ct-model__label {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ct-red);
}
.ct-model__label::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ct-orange); }
.ct-model h3 { margin-top: 0.9rem; font-size: clamp(1.45rem, 3vw, 2.2rem); letter-spacing: -0.03em; }
.ct-model > p { margin-top: 1rem; color: var(--neutral-700); }
.ct-model__knows { display: grid; gap: 0.55rem; margin-top: 1.5rem; }
.ct-model__knows li {
  position: relative; padding-left: 1.6rem;
  font-size: 0.95rem; line-height: 1.5; color: var(--neutral-700);
}
.ct-model__knows li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ct-orange);
}
.ct-model__rule { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 2px solid var(--ink-900); }
.ct-model__rule strong { display: block; font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 800; letter-spacing: -0.022em; }
.ct-model__rule span { display: block; margin-top: 0.55rem; font-size: 0.95rem; color: var(--neutral-700); }

/* --- the planning horizon --------------------------------------------- */
.ct-hz { margin-top: clamp(3rem, 7.5vw, 5.5rem); }
.ct-hz__head { padding-inline: var(--gutter); max-width: 46rem; }
.ct-hz__head .ct-eyebrow { color: var(--ct-red); }
.ct-hz__head h3 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; }
.ct-hz__head p { margin-top: 0.95rem; color: var(--neutral-700); }

/* full bleed: the rail is the horizon, so it runs the whole page width */
.ct-plan__rail { margin-top: clamp(1.75rem, 4vw, 3rem); }
.ct-plan__rail svg { display: block; width: 100%; height: auto; aspect-ratio: 1688 / 300; }

/* The scale is padded to the graphic's real geometry. The horizon rail's
   viewBox is 0 0 1688 300 with no origin offset, so the served yolk centre at
   x 226.89 is exactly 13.44% of the width: "Today" starts on it. The right
   hand label marks where your chosen horizon ends rather than a yolk, because
   the track runs off the edge, so it sits flush to the page gutter. */
.ct-hz__scale {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0 var(--gutter) 0 13.44%;
}
.ct-hz__scale > span {
  font-size: clamp(0.62rem, 1.4vw, 0.78rem); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-600);
}
.ct-hz__scale b { display: block; font-size: 1.05em; color: var(--ink-900); letter-spacing: 0.06em; }
.ct-hz__scale > span:last-child { text-align: right; }

.ct-plan__note {
  padding-inline: var(--gutter); margin-top: 1rem;
  max-width: 42rem; font-size: 0.95rem; color: var(--neutral-600);
}

/* --- the personalisation sheet ---------------------------------------- */
.ct-taste {
  margin: clamp(3rem, 7vw, 5rem) var(--gutter) 0;
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 82rem;
}
@media (min-width: 62rem) { .ct-taste { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.ct-taste__copy h3 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; }
.ct-taste__copy p { margin-top: 1rem; max-width: 30rem; color: var(--neutral-700); }
.ct-taste__sheet {
  background: var(--cream-0); border: 1px solid var(--border-subtle); border-radius: 28px;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  box-shadow: 0 18px 44px rgb(42 23 19 / 0.08);
}
.ct-taste__sheet li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center;
  padding: 0.72rem 0; border-bottom: 1px solid var(--cream-100);
}
.ct-taste__sheet li:last-child { border-bottom: 0; }
.ct-taste__sheet li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ct-orange); }
.ct-taste__sheet span { font-weight: 500; color: var(--neutral-700); font-size: 0.95rem; }
.ct-taste__sheet b { font-weight: 700; font-size: 0.95rem; }
.ct-taste__sheet li:last-child b { color: var(--ct-red); }

/* ==========================================================================
   BLOCK: ct-recipes
   ========================================================================== */
.ct-recipes { position: relative; overflow: hidden; padding: clamp(4.5rem, 12vh, 9rem) 0; background: var(--ink-800); color: var(--cream-50); }
.ct-recipes__head { padding-inline: var(--gutter); max-width: 52rem; }
.ct-recipes__head .ct-eyebrow { color: var(--ct-orange); }
.ct-recipes h2 { font-size: clamp(2.2rem, 6.5vw, 5rem); letter-spacing: -0.04em; }
.ct-recipes__head p { margin-top: 1.3rem; max-width: 34rem; color: var(--neutral-300); }

/* the library as an index to read, not a ticker to watch */
.ct-index {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.55rem 1.15rem;
  margin: clamp(2.25rem, 5.5vw, 3.5rem) var(--gutter) 0;
  max-width: 74rem;
}
.ct-index li {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: clamp(1.05rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.025em;
  color: var(--cream-50);
}
.ct-index li::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ct-orange); flex: 0 0 auto;
}
.ct-index li:last-child::after { display: none; }
.ct-index li[data-quiet] {
  font-size: clamp(0.92rem, 1.35vw, 1.1rem); font-weight: 500; letter-spacing: 0;
  color: var(--neutral-300);
}
.ct-index li[data-quiet]::after { width: 7px; height: 7px; background: var(--neutral-500); }

.ct-recipes__cards {
  display: grid; gap: 1rem; margin: clamp(2.5rem, 6vw, 4rem) var(--gutter) 0;
  max-width: 82rem;
}
@media (min-width: 46rem) { .ct-recipes__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-rcard {
  position: relative; overflow: hidden; border-radius: 20px;
  background: var(--ink-900); border: 1px solid rgb(255 255 255 / 0.1);
  display: grid; align-content: end;
  min-height: 19rem; padding: 1.1rem;
  transition: transform 0.28s var(--ease-out);
}
.ct-rcard:hover { transform: translateY(-4px); }
.ct-rcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ct-rcard::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(27 15 12 / 0.92) 18%, rgb(27 15 12 / 0.18) 62%, rgb(27 15 12 / 0.05));
}
.ct-rcard > * { position: relative; z-index: 2; }
.ct-rcard b { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.ct-rcard em { display: block; margin-top: 0.1rem; font-style: normal; font-size: 0.8rem; font-weight: 500; color: var(--ct-orange); }
.ct-rcard ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.7rem; font-size: 0.8rem; color: var(--cream-100); }
.ct-rcard ul li { display: flex; align-items: center; gap: 0.3rem; }
.ct-rcard ul i { font-size: 15px; color: var(--ct-orange); }

.ct-recipes__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  max-width: 82rem;
}
/* The divider is drawn inside the padding rather than as a border. This box
   carries the container's gutter as padding, and a border sits on the padding
   box, so it would always run edge to edge past the container it belongs to.
   As a full width flex line it starts and ends on the container's own edges,
   matching the identical rule in the footer. */
.ct-recipes__foot::before {
  content: ""; flex: 0 0 100%; height: 1px; margin-bottom: 0.5rem;
  background: rgb(255 255 255 / 0.12);
}
.ct-recipes__foot p { max-width: 34rem; color: var(--neutral-300); font-size: 0.95rem; }

/* ==========================================================================
   BLOCK: ct-shop
   ========================================================================== */
.ct-shop { padding: clamp(4.5rem, 12vh, 9rem) var(--gutter); }
.ct-shop__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); max-width: 82rem; align-items: center; }
@media (min-width: 62rem) { .ct-shop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ct-shop .ct-eyebrow { color: var(--ct-red); }
.ct-shop h2 { font-size: clamp(2.2rem, 6.5vw, 5rem); letter-spacing: -0.04em; }
.ct-shop h2 em { font-style: normal; color: var(--ct-red); }
.ct-shop__copy > p { margin-top: 1.3rem; max-width: 32rem; color: var(--neutral-700); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.ct-shop__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.ct-shop__pills li {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--cream-100); font-size: 0.85rem; font-weight: 700;
}
.ct-shop__pills i { font-size: 16px; color: var(--ct-red); }
.ct-shop__abroad {
  margin-top: 1.75rem; padding-left: 1rem;
  border-left: 2px solid var(--ct-orange);
  font-size: 0.95rem; color: var(--neutral-700); max-width: 30rem;
}

.ct-basket {
  background: var(--cream-0); border: 1px solid var(--cream-200); border-radius: 28px;
  box-shadow: 0 22px 50px rgb(42 23 19 / 0.1);
  overflow: hidden;
}
.ct-basket__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; background: var(--ct-red); color: #fff;
}
.ct-basket__top b { font-size: 1rem; font-weight: 800; }
.ct-basket__top span { font-size: 0.8rem; font-weight: 500; color: var(--cream-100); }
.ct-basket__items { padding: 0.5rem 1.25rem 1rem; }
.ct-basket__items li {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 0.85rem; align-items: center;
  padding: 0.7rem 0; border-bottom: 1px solid var(--cream-100);
}
.ct-basket__items img { width: 2.75rem; height: 2.75rem; border-radius: 12px; object-fit: cover; }
.ct-basket__items b { display: block; font-size: 0.92rem; font-weight: 700; }
.ct-basket__items span { display: block; font-size: 0.78rem; color: var(--neutral-600); }
.ct-basket__items em {
  display: flex; align-items: center; gap: 0.4rem;
  font-style: normal; font-size: 0.78rem; font-weight: 700;
  color: var(--neutral-700);
}
.ct-basket__items em::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500); flex: 0 0 auto;
}
.ct-basket__foot { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem 1.25rem; }
.ct-basket__foot .ct-btn { flex: 1 1 auto; justify-content: center; }
.ct-basket__foot small { font-size: 0.75rem; color: var(--neutral-600); }

/* ==========================================================================
   BLOCK: ct-soon  (full cooked meals + early access capture)
   ========================================================================== */
.ct-soon { position: relative; overflow: hidden; padding: clamp(4.5rem, 12vh, 9rem) var(--gutter); background: var(--ct-orange); color: var(--ct-red); }
.ct-soon__grid { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); max-width: 82rem; align-items: center; }
@media (min-width: 62rem) { .ct-soon__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.ct-soon .ct-eyebrow { color: var(--red-700); }
.ct-soon h2 { font-size: clamp(2.3rem, 7vw, 5.5rem); letter-spacing: -0.042em; }
.ct-soon__copy p { margin-top: 1.3rem; max-width: 30rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--red-700); font-weight: 500; }
.ct-soon__motif { width: min(12rem, 40%); margin-top: 2rem; }
.ct-soon__motif svg { width: 100%; height: auto; }

.ct-form {
  background: var(--cream-0); border-radius: 28px; padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 22px 50px rgb(42 23 19 / 0.16);
  color: var(--ink-900);
}
.ct-form h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.ct-form > p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--neutral-600); }
.ct-field { display: grid; gap: 0.4rem; margin-top: 1.1rem; }
.ct-field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-600); }
.ct-field input {
  min-height: 50px; padding: 0 0.9rem;
  font: inherit; font-size: 1rem;
  background: var(--cream-0); color: var(--ink-900);
  border: 1.5px solid var(--border-input); border-radius: 14px;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.ct-field input::placeholder { color: var(--neutral-400); }
.ct-field input:hover { border-color: var(--neutral-400); }
.ct-field input:focus {
  outline: 0; border-color: var(--ct-red);
  box-shadow: 0 0 0 4px rgb(189 37 39 / 0.14);
}
.ct-field input:not(:placeholder-shown) { border-color: var(--neutral-400); }
.ct-field small { font-size: 0.78rem; color: var(--neutral-600); }
.ct-field[data-invalid="true"] input { border-color: var(--danger); box-shadow: 0 0 0 4px rgb(163 29 33 / 0.12); }
.ct-field__error { display: none; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; color: var(--danger); }
.ct-field[data-invalid="true"] .ct-field__error { display: flex; }
.ct-form .ct-btn { width: 100%; justify-content: center; margin-top: 1.25rem; }
.ct-form .ct-btn[data-loading="true"] { pointer-events: none; opacity: 0.86; }
.ct-form .ct-btn[data-loading="true"] .ct-btn__yolk { animation: ctDot 0.9s linear infinite; }
.ct-form__success {
  display: none; align-items: flex-start; gap: 0.75rem; margin-top: 1.25rem;
  padding: 1rem; border-radius: 20px; background: var(--green-100);
}
.ct-form[data-state="success"] .ct-form__success { display: flex; }
.ct-form[data-state="success"] .ct-form__body { display: none; }
.ct-form__success i { font-size: 22px; color: var(--green-500); }
.ct-form__success b { display: block; font-size: 1rem; }
.ct-form__success span { font-size: 0.88rem; color: var(--neutral-700); }

/* ==========================================================================
   BLOCK: ct-proof
   ========================================================================== */
.ct-proof { padding: clamp(4.5rem, 12vh, 9rem) var(--gutter); }
.ct-proof .ct-eyebrow { color: var(--ct-red); }
.ct-proof__nums {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 82rem; margin-top: 1rem;
}
@media (min-width: 46rem) { .ct-proof__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-proof__nums div { border-top: 2px solid var(--ink-900); padding-top: 1rem; }
.ct-proof__nums b {
  display: block; font-size: clamp(2.8rem, 8vw, 5.5rem); font-weight: 900;
  letter-spacing: -0.045em; line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.ct-proof__nums span { display: block; margin-top: 0.6rem; font-size: 0.95rem; font-weight: 500; color: var(--neutral-700); }

.ct-quotes { display: grid; gap: 1rem; max-width: 82rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 40rem) { .ct-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .ct-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-quote {
  background: var(--cream-0); border: 1px solid var(--cream-200); border-radius: 20px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  display: grid; align-content: start; gap: 1rem;
  box-shadow: 0 2px 8px rgb(42 23 19 / 0.05);
}
.ct-quote__mark { width: 22px; height: 22px; border-radius: 50%; background: var(--ct-orange); }
.ct-quote blockquote { margin: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 500; }
.ct-quote figcaption { font-size: 0.85rem; color: var(--neutral-600); }
.ct-quote figcaption b { display: block; font-size: 0.95rem; color: var(--ink-900); }

/* ==========================================================================
   BLOCK: ct-close
   ========================================================================== */
.ct-close {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(5rem, 14vh, 10rem) var(--gutter);
  background: var(--ct-red); color: #fff; text-align: left;
}
.ct-close__cloth { position: absolute; inset: -10%; z-index: -1; }
.ct-close__cloth svg { width: 100%; height: 100%; }
.ct-close__inner { max-width: 60rem; }
.ct-close h2 { font-size: clamp(2.6rem, 9vw, 7rem); letter-spacing: -0.045em; line-height: 0.9; }
.ct-close h2 em { font-style: normal; color: var(--orange-200); }
.ct-close p { margin-top: 1.4rem; max-width: 32rem; color: var(--cream-100); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.ct-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2.25rem; }
.ct-close .ct-btn { background: var(--cream-50); color: var(--ct-red); }
.ct-close .ct-btn:hover { background: #fff; }

/* ==========================================================================
   BLOCK: ct-footer
   ========================================================================== */
.ct-footer { background: var(--ink-900); color: var(--cream-100); padding: clamp(3rem, 8vh, 5rem) var(--gutter) 2rem; }
.ct-footer__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); max-width: 82rem; }
@media (min-width: 52rem) { .ct-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.ct-footer__logo img { height: 32px; width: auto; }
.ct-footer__grid h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ct-orange); }
.ct-footer__grid ul { display: grid; gap: 0.6rem; margin-top: 1rem; }
.ct-footer a { color: var(--cream-100); font-weight: 500; }
.ct-footer a:hover { color: var(--ct-orange); }
.ct-footer__tag { margin-top: 1.1rem; max-width: 22rem; font-size: 0.95rem; color: var(--neutral-300); }
.ct-footer__socials { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.ct-footer__socials a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / 0.18); border-radius: 14px; font-size: 20px;
}
.ct-footer__socials a:hover { border-color: var(--ct-orange); }
.ct-footer__base {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  max-width: 82rem; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 0.85rem; color: var(--neutral-400);
}

/* the plan rail and the hero motif hold their aspect so nothing jumps */
.ct-plan__rail svg { aspect-ratio: 1688 / 300; }

.ct-soon__motif svg { aspect-ratio: 1 / 1; }

/* pages without a hero behind the fixed nav */
.ct-page-offset { padding-top: 64px; }


/* ==========================================================================
   SUPPORTING PAGES
   Shared: .ct-page clears the fixed nav; .ct-phead is the page header.
   ========================================================================== */
.ct-page { padding-top: calc(var(--nav-h) + clamp(0.5rem, 3vh, 2rem)); }

.ct-phead { padding: clamp(2.5rem, 7vh, 5rem) var(--gutter) clamp(2.5rem, 6vh, 4rem); }
.ct-phead .ct-eyebrow { color: var(--ct-red); }
.ct-phead h1 {
  max-width: 44rem;
  font-size: clamp(2.4rem, 7vw, 5.4rem); letter-spacing: -0.04em; line-height: 0.94;
}
.ct-phead p {
  margin-top: clamp(1.25rem, 3vw, 1.75rem); max-width: 36rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--neutral-700);
}
.ct-phead__rail { margin-top: clamp(2rem, 5vw, 3rem); }
.ct-phead__rail svg { width: min(100%, 30rem); height: auto; aspect-ratio: 1688 / 300; }

/* brand surface variant (About) */
.ct-phead--brand {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ct-red); color: #fff;
}
.ct-phead--brand .ct-eyebrow { color: var(--orange-100); }
.ct-phead--brand p { color: var(--cream-100); }
.ct-phead__cloth { position: absolute; inset: -10%; z-index: -1; }
.ct-phead__cloth svg { width: 100%; height: 100%; }

/* a shared light screen frame */
.ct-shot {
  position: relative; justify-self: center;
  width: min(15rem, 100%); aspect-ratio: 390 / 780;
  border-radius: 34px; overflow: hidden;
  background: var(--ink-950); border: 7px solid var(--ink-950);
  box-shadow: 0 26px 60px rgb(42 23 19 / 0.22);
}
.ct-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ct-shot span {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.35); z-index: 2;
}

/* ==========================================================================
   BLOCK: ct-steps  (How it works)
   ========================================================================== */
.ct-steps {
  display: grid; gap: clamp(3rem, 8vh, 6rem);
  padding: clamp(1rem, 3vh, 2rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  max-width: 82rem;
}
.ct-step { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) {
  .ct-step { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
  .ct-step:nth-child(even) .ct-step__body { order: 2; }
}
.ct-step__no {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ct-red);
}
.ct-step__no::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ct-orange); }
.ct-step h2 { margin-top: 0.9rem; font-size: clamp(1.75rem, 4.2vw, 3.1rem); letter-spacing: -0.035em; }
.ct-step__body > p { margin-top: 1.1rem; max-width: 34rem; color: var(--neutral-700); font-size: clamp(1rem, 1.25vw, 1.1rem); }
.ct-step__facts { display: grid; gap: 0.5rem; margin-top: 1.6rem; max-width: 32rem; }
.ct-step__facts li {
  position: relative; padding: 0 0 0.55rem 1.7rem;
  border-bottom: 1px solid var(--cream-200);
  font-size: 0.95rem; color: var(--neutral-700); line-height: 1.5;
}
.ct-step__facts li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--ct-orange);
}
.ct-step__facts b { color: var(--ink-900); }

.ct-close--soft { background: var(--cream-100); color: var(--ink-900); }
.ct-close--soft h2 em { color: var(--ct-red); }
.ct-close--soft p { color: var(--neutral-700); }
.ct-close--soft .ct-btn { background: var(--ct-red); color: #fff; }
.ct-close--soft .ct-btn:hover { background: var(--red-600); }
.ct-close--soft .ct-store a { border-color: var(--neutral-300); color: var(--ink-900); }
.ct-close--soft .ct-store a:hover { border-color: var(--ct-red); background: var(--cream-0); }
.ct-close--soft .ct-loopmark { width: min(11rem, 34%); margin-top: clamp(2rem, 5vh, 3rem); }
.ct-close--soft .ct-loopmark svg { width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* ==========================================================================
   BLOCK: ct-about
   ========================================================================== */
.ct-about { padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); }
.ct-about__lead { max-width: 46rem; }
.ct-about__lead p {
  font-size: clamp(1.35rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.16;
}
.ct-about__lead p + p { margin-top: 1.5rem; }
.ct-about__lead em { font-style: normal; color: var(--ct-red); }

.ct-convictions {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: clamp(3rem, 8vh, 5rem); max-width: 82rem;
}
@media (min-width: 52rem) { .ct-convictions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-conviction { border-top: 2px solid var(--ink-900); padding-top: 1.1rem; }
.ct-conviction h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.025em; }
.ct-conviction p { margin-top: 0.85rem; color: var(--neutral-700); font-size: 0.98rem; }

.ct-pull {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(3.5rem, 9vh, 6rem) 0 0;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
  background: var(--ct-orange); color: var(--ct-red);
}
.ct-pull p {
  max-width: 44rem;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem); font-weight: 900; letter-spacing: -0.035em;
  line-height: 1.08;
}
.ct-pull span {
  display: block; margin-top: 1.5rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-700);
}

/* ==========================================================================
   BLOCK: ct-faq
   ========================================================================== */
.ct-faq {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1rem, 3vh, 2rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  max-width: 82rem;
}
@media (min-width: 56rem) { .ct-faq { grid-template-columns: 14rem minmax(0, 1fr); } }
.ct-faq__nav { align-self: start; }
@media (min-width: 56rem) { .ct-faq__nav { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
.ct-faq__nav h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neutral-600); }
.ct-faq__nav ul { display: grid; gap: 0.55rem; margin-top: 1rem; }
.ct-faq__nav a { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.98rem; color: var(--ink-900); }
.ct-faq__nav a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ct-orange); }
.ct-faq__nav a:hover { color: var(--ct-red); }
.ct-faq__nav p { margin-top: 1.5rem; font-size: 0.9rem; color: var(--neutral-600); }
.ct-faq__nav p a { display: inline; font-weight: 700; }

.ct-faq__group + .ct-faq__group { margin-top: clamp(2.5rem, 6vh, 4rem); }
.ct-faq__group > h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.03em;
  padding-bottom: 0.9rem;
}
.ct-q { border-top: 1px solid var(--cream-200); }
.ct-q:last-child { border-bottom: 1px solid var(--cream-200); }
.ct-q summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem); font-weight: 800; letter-spacing: -0.02em;
}
.ct-q summary::-webkit-details-marker { display: none; }
.ct-q summary:hover { color: var(--ct-red); }
.ct-q__icon {
  flex: 0 0 auto; order: 2; margin-left: auto;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--cream-100); color: var(--ct-red);
  font-size: 16px;
  transition: transform 0.24s var(--ease-out), background 0.24s var(--ease-out), color 0.24s var(--ease-out);
}
.ct-q[open] .ct-q__icon { transform: rotate(45deg); background: var(--ct-red); color: #fff; }
.ct-q__body { padding-bottom: 1.5rem; max-width: 42rem; }
.ct-q__body p { color: var(--neutral-700); }
.ct-q__body p + p { margin-top: 0.8rem; }
.ct-q__body ul { display: grid; gap: 0.45rem; margin-top: 0.8rem; }
.ct-q__body ul li {
  display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 0.7rem; align-items: baseline;
  color: var(--neutral-700);
}
.ct-q__body ul li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ct-orange); transform: translateY(-1px); }

/* ==========================================================================
   BLOCK: ct-contact
   ========================================================================== */
.ct-contact {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1rem, 3vh, 2rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  max-width: 82rem; align-items: start;
}
@media (min-width: 56rem) { .ct-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }
.ct-channels { display: grid; gap: 0.75rem; }
.ct-channel {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.1rem; align-items: center;
  padding: 1.1rem 1.25rem; border-radius: 20px;
  background: var(--cream-0); border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgb(42 23 19 / 0.05);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.ct-channel:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(42 23 19 / 0.1); }
.ct-channel i { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--cream-100); color: var(--ct-red); font-size: 22px; }
.ct-channel b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.ct-channel span { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--neutral-600); }
.ct-contact__socials { display: flex; gap: 0.5rem; margin-top: 1.75rem; }
.ct-contact__socials a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--neutral-300); border-radius: 14px; font-size: 20px; color: var(--ink-900);
}
.ct-contact__socials a:hover { border-color: var(--ct-red); color: var(--ct-red); }
.ct-contact__hours { margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--ct-orange); font-size: 0.95rem; color: var(--neutral-700); max-width: 28rem; }
.ct-form--page { border: 1px solid var(--border-subtle); box-shadow: 0 18px 44px rgb(42 23 19 / 0.08); }
.ct-field textarea {
  min-height: 8.5rem; padding: 0.7rem 0.9rem; resize: vertical;
  font: inherit; font-size: 1rem;
  background: var(--cream-0); color: var(--ink-900);
  border: 1.5px solid var(--border-input); border-radius: 14px;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.ct-field textarea::placeholder { color: var(--neutral-400); }
.ct-field textarea:hover { border-color: var(--neutral-400); }
.ct-field textarea:focus { outline: 0; border-color: var(--ct-red); box-shadow: 0 0 0 4px rgb(189 37 39 / 0.14); }
.ct-field[data-invalid="true"] textarea { border-color: var(--danger); box-shadow: 0 0 0 4px rgb(163 29 33 / 0.12); }

/* ==========================================================================
   BLOCK: ct-legal  (Privacy, Terms)
   ========================================================================== */
.ct-legal {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1rem, 3vh, 2rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  max-width: 84rem; align-items: start;
}
/* The measure is capped for reading, so the leftover track becomes a third
   column rather than dead space: section nav, prose, then the summary and
   contact rail. */
/* In the two column band the prose track is capped at the measure itself, so
   the grid ends where the text ends rather than handing column 2 several
   hundred pixels its only child can never use. */
@media (min-width: 56rem) { .ct-legal { grid-template-columns: 14rem minmax(0, 38rem); } }
@media (min-width: 74rem) { .ct-legal { grid-template-columns: 13rem minmax(0, 36rem) minmax(0, 17rem); } }

.ct-legal__aside { display: grid; gap: 1rem; align-self: start; max-width: 38rem; }
@media (min-width: 56rem) { .ct-legal__aside { grid-column: 2; } }
@media (min-width: 74rem) { .ct-legal__aside { grid-column: 3; max-width: none; position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
.ct-lcard {
  background: var(--cream-0); border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 1.1rem 1.2rem;
  box-shadow: 0 2px 8px rgb(42 23 19 / 0.05);
}
.ct-lcard h2 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ct-red);
}
.ct-lcard dl { display: grid; gap: 0.5rem; margin: 0.9rem 0 0; font-size: 0.88rem; }
.ct-lcard dl > div { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; justify-content: space-between; }
.ct-lcard dt { color: var(--neutral-600); }
.ct-lcard dd { margin: 0; font-weight: 700; white-space: nowrap; }
.ct-lcard ul { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.ct-lcard ul li {
  position: relative; padding-left: 1.4rem;
  font-size: 0.88rem; line-height: 1.45; color: var(--neutral-700);
}
.ct-lcard ul li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ct-orange);
}
.ct-lcard p { margin-top: 0.9rem; font-size: 0.88rem; color: var(--neutral-700); }
.ct-lcard__links { display: grid; gap: 0.45rem; margin-top: 0.9rem; }
.ct-lcard__links a { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; }
.ct-lcard__links i { font-size: 16px; }
.ct-lcard__caveat { font-size: 0.8rem; color: var(--neutral-600); }
.ct-legal__nav { align-self: start; }
@media (min-width: 56rem) { .ct-legal__nav { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
.ct-legal__nav h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neutral-600); }
.ct-legal__nav ol { display: grid; gap: 0.5rem; margin-top: 1rem; counter-reset: legal; }
.ct-legal__nav a {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.5rem;
  font-size: 0.92rem; font-weight: 500; color: var(--neutral-700);
}
.ct-legal__nav li { counter-increment: legal; }
.ct-legal__nav a::before { content: counter(legal, decimal-leading-zero); color: var(--ct-red); font-weight: 700; }
.ct-legal__nav a:hover { color: var(--ct-red); }

.ct-prose { max-width: 38rem; }
.ct-prose__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--cream-200);
  font-size: 0.88rem; color: var(--neutral-600);
}
.ct-prose__meta span { white-space: nowrap; }
.ct-prose__meta b { color: var(--ink-900); }
.ct-prose section + section { margin-top: clamp(2.5rem, 6vh, 3.5rem); }
.ct-prose h2 {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem); letter-spacing: -0.028em;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.ct-prose h2 em { font-style: normal; color: var(--ct-red); font-size: 0.72em; font-weight: 800; }
.ct-prose p { margin-top: 0.95rem; color: var(--neutral-700); }
.ct-prose ul { display: grid; gap: 0.5rem; margin-top: 0.95rem; }
.ct-prose ul li {
  display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 0.7rem; align-items: baseline;
  color: var(--neutral-700);
}
.ct-prose ul li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ct-orange); transform: translateY(-1px); }
.ct-prose strong { color: var(--ink-900); }
.ct-prose__note {
  margin-top: 2.5rem; padding: 1.25rem; border-radius: 20px;
  background: var(--cream-100); font-size: 0.95rem; color: var(--neutral-700);
}
.ct-prose__note b { display: block; color: var(--ink-900); margin-bottom: 0.35rem; }


/* ==========================================================================
   MOBILE REFINEMENTS
   Mobile is the primary experience here, not the leftover. These are the
   places where a rule that is right on a wide screen stops being right on a
   narrow one, fixed at the rule rather than by stacking everything.
   ========================================================================== */

@media (max-width: 26rem) {
  .ct-nav__logo img { height: 26px; }
}

/* Touch targets. A link in a list is comfortably clickable with a mouse at
   its text height and uncomfortably small under a thumb, so on touch input
   the standing lists grow to a 44px target without changing how they look. */
@media (hover: none) and (pointer: coarse) {
  .ct-footer__grid ul a,
  .ct-faq__nav ul a,
  .ct-legal__nav ol a {
    /* the footer's anchors are inline, where min-height has no effect at all,
       so they have to become flex boxes before the target height means
       anything. The other two are already flex and grid. */
    display: flex; min-height: 44px; align-items: center;
  }
  .ct-footer__grid ul { gap: 0.15rem; }
  .ct-faq__nav ul { gap: 0.15rem; }
  .ct-legal__nav ol { gap: 0.15rem; }
  .ct-q summary { padding-block: 1.35rem; }
}

/* The journey bar is the one piece that has to hold four labels, two end caps
   and a track inside 360px. The ends shrink, the gaps tighten, and the labels
   are allowed to wrap to two lines rather than being clipped. */
@media (max-width: 30rem) {
  .ct-journey { gap: 0.4rem; padding-inline: 0.9rem; }
  .ct-journey__end { width: 2.1rem; }
  .ct-journey__stops li { padding-inline: 0.15rem; }
  .ct-journey__stops b { font-size: 0.66rem; letter-spacing: 0.04em; line-height: 1.25; }
}

/* Two store badges sit side by side down to 360px, but below that they are
   better as one full width pair than as a badge and a half. */
@media (max-width: 22.5rem) {
  .ct-store { width: 100%; }
  .ct-store a { flex: 1 1 0; width: auto; }
}

/* The horizon scale's right hand label is two words too long once the track
   is only a few hundred pixels wide. */
@media (max-width: 30rem) {
  .ct-hz__scale { padding-right: 0.9rem; }
  .ct-hz__scale > span { font-size: 0.6rem; }
}

/* Long unbroken strings in body copy, such as an email address, must not be
   able to push a narrow page sideways. */
@media (max-width: 40rem) {
  .ct-prose p, .ct-q__body p, .ct-channel span { overflow-wrap: anywhere; }
}


/* ==========================================================================
   CONTAINERS
   One centred container, 82rem wide, and everything aligns to its left edge.
   Each element keeps its own measure, so a heading still sets at 46rem and
   body copy at 42rem, but they all start on the same line rather than each
   being centred at its own width, which would stagger them.

   The edge is computed rather than wrapped: `50% - 41rem` is the distance
   from an element's own box to the container's left edge, clamped at 0 so a
   narrow screen simply keeps its gutter. Elements that carry their own gutter
   padding subtract it; elements sitting inside an already padded section do
   not.

   Two deliberate exceptions, both in the planning horizon: the rail is full
   bleed because the rail IS the horizon and has to leave the frame, and its
   scale is full bleed because it is padded to the rail's own geometry
   (13.44% is where the served yolk sits) and would fall out of alignment
   inside a narrower box.
   ========================================================================== */

/* The loop's head and journey bar are grid items in the pinned stage, where a
   trailing auto margin stops the item stretching and it collapses to its
   content. They take a stretched box with a centred max-width instead, which
   puts their content on the same edge as everything below. */
.ct-loop__head {
  width: 100%; max-width: calc(82rem + 2 * var(--gutter)); margin-inline: auto;
}

/* carries its own gutter padding, sits in a full width section */
.ct-plan__head,
.ct-plan__how,
.ct-hz__head,
.ct-plan__note,
.ct-taste,
.ct-recipes__head,
.ct-index,
.ct-recipes__cards,
.ct-recipes__foot {
  margin-left: max(0px, calc(50% - 41rem - var(--gutter)));
  margin-right: auto;
}

/* sits inside a section that is already padded to the gutter */
.ct-shop__grid,
.ct-soon__grid,
.ct-proof__nums,
.ct-quotes,
.ct-close__inner,
.ct-footer__grid,
.ct-footer__base {
  margin-left: max(0px, calc(50% - 41rem));
  margin-right: auto;
}

/* these boxes fill the container, so their max-width has to allow for the
   gutter now living in their padding */
.ct-plan__how,
.ct-taste,
.ct-recipes__cards,
.ct-recipes__foot { max-width: calc(82rem + 2 * var(--gutter)); }
.ct-index { max-width: calc(74rem + 2 * var(--gutter)); }

/* these had the gutter in their margin, which the container now owns */
.ct-plan__how,
.ct-taste { padding-inline: var(--gutter); }
.ct-index,
.ct-recipes__cards,
.ct-recipes__foot { padding-inline: var(--gutter); }
.ct-plan__how { margin-top: clamp(2.5rem, 6vw, 4rem); }
.ct-taste { margin-top: clamp(3rem, 7vw, 5rem); }
.ct-index { margin-top: clamp(2.25rem, 5.5vw, 3.5rem); }
.ct-recipes__cards { margin-top: clamp(2.5rem, 6vw, 4rem); }
.ct-recipes__foot { margin-top: clamp(2rem, 4vw, 2.75rem); }