/* MenuVision — Lens & Letter. Static, local assets, no client-side tracking. */
/* 01. Foundation */
@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/Manrope.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}

@font-face {
  font-family:'Instrument Serif';
  src:url('/assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:'Instrument Serif';
  src:url('/assets/fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-style:italic;
  font-weight:400;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --bg:#0A0A0F;
  --surface:#12121A;
  --raised:#1A1A24;
  --ink:#F4F0E8;
  --muted:#B9B5AE;
  --quiet:#A39F98;
  --gold:#F5A623;
  --gold-light:#FFCC66;
  --line:#34343E;
  --max:1280px;
  --gutter:clamp(24px,5.5vw,80px);
  --sans:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,summary {
  font:inherit;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

h1,h2,h3,h4,p {
  margin:0;
}

h1,h2,h3,h4 {
  line-height:1.1;
  font-weight:600;
}

em {
  font-family:var(--serif);
  font-weight:400;
  color:var(--gold-light);
}

svg {
  flex-shrink:0;
}

::selection {
  background:var(--gold);
  color:var(--bg);
}

:focus-visible {
  outline:3px solid var(--gold-light);
  outline-offset:6px;
  border-radius:3px;
}

a,summary {
  touch-action:manipulation;
}

a:hover {
  color:var(--gold-light);
}

.width-container {
  width:calc(100% - var(--gutter)*2);
  max-width:var(--max);
  margin-inline:auto;
}

.eyebrow {
  font-size:11px;
  letter-spacing:.18em;
  font-weight:700;
  color:var(--gold-light);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:14px;
  font-weight:600;
  min-height:44px;
}

.text-link span {
  font-size:21px;
}

.skip-link {
  position:absolute;
  z-index:50;
  left:20px;
  top:12px;
  transform:translateY(-160%);
  background:var(--gold-light);
  color:var(--bg);
  padding:12px 20px;
}

.skip-link:focus {
  transform:none;
  color:var(--bg);
}

/* 02. Shared navigation */
.site-header {
  max-width:1600px;
  margin:auto;
  min-height:98px;
  padding:22px var(--gutter);
  display:flex;
  align-items:center;
  gap:36px;
  border-bottom:1px solid var(--line);
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:23px;
  font-weight:700;
  letter-spacing:-1px;
  white-space:nowrap;
}

.brand picture,.brand img {
  width:44px;
  height:44px;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  font-size:13px;
  font-weight:500;
}

.site-header nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.site-header nav a[aria-current=page] {
  color:var(--gold-light);
}

.header-status {
  font-size:11px;
  white-space:nowrap;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:30px;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
  vertical-align:middle;
  margin-right:8px;
}

.site-footer {
  border-top:1px solid var(--line);
  padding:36px var(--gutter);
}

.footer-inner {
  max-width:var(--max);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.footer-brand {
  font-size:21px;
}

.site-footer nav {
  display:flex;
  gap:26px;
  font-size:12px;
  flex-wrap:wrap;
}

.site-footer nav a {
  min-height:44px;
  display:flex;
  align-items:center;
}

.site-footer p {
  font-size:11px;
  color:var(--quiet);
}

/* 03. Hero — a menu becoming a dish detail, not a simulated device */
.home-page h1,.home-page h2,.home-page h3,.home-page h4 {
  overflow-wrap:anywhere;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  min-height:760px;
  padding-block:83px 80px;
  align-items:center;
}

.hero-copy {
  position:relative;
  z-index:2;
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:31px;
}

.hero .eyebrow>span {
  width:26px;
  height:1px;
  background:var(--gold);
}

.hero h1 {
  font-size:clamp(58px,6.2vw,91px);
  letter-spacing:-.061em;
  line-height:1.02;
  font-weight:600;
}

.hero h1 em {
  letter-spacing:-.022em;
  font-size:1.15em;
  line-height:.97;
}

.hero-description {
  max-width:470px;
  margin-top:29px;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.hero-actions {
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:29px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:23px;
  padding:15px 22px;
  min-height:52px;
  border-radius:7px;
  font-size:13px;
  font-weight:800;
  transition:background .2s,transform .2s;
}

.button-gold {
  background:var(--gold);
  color:var(--bg);
}

.button-gold:hover {
  background:var(--gold-light);
  color:var(--bg);
  transform:translateY(-2px);
}

.button span {
  font-size:21px;
  line-height:1;
}

.coming-soon {
  font-size:11px;
  color:var(--muted);
  max-width:130px;
  line-height:1.7;
}

.hero-caution {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:12px;
  line-height:1.7;
  margin-top:30px;
  color:var(--muted);
}

.hero-caution strong {
  font-weight:600;
  color:var(--ink);
}

.caution-mark {
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid #8D826C;
  border-radius:50%;
  color:var(--gold-light);
  font-size:11px;
  margin-top:3px;
}

.hero-visual {
  position:relative;
  isolation:isolate;
  height:585px;
  max-width:610px;
  width:100%;
}

.hero-visual:before {
  content:'';
  position:absolute;
  inset:-35% -4%;
  z-index:-2;
  background:radial-gradient(ellipse at center,#ad732525 0,transparent 62%);
  pointer-events:none;
}

.orbit {
  position:absolute;
  border:1px solid #73623d2b;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}

.orbit-one {
  width:490px;
  height:490px;
  top:3%;
  left:2%;
}

.orbit-two {
  width:580px;
  height:580px;
  top:-4%;
  left:-5%;
  border-style:dashed;
  opacity:.6;
}

.menu-paper {
  position:absolute;
  top:14px;
  left:7px;
  width:302px;
  height:432px;
  padding:29px 29px 25px;
  background:#DDD3BC;
  color:#29281E;
  transform:rotate(-11deg);
  box-shadow:0 30px 60px #0006;
  text-align:center;
  font-family:Georgia,serif;
  border:1px solid #F5E8C9;
}

.paper-ornament {
  display:block;
  font-size:20px;
  margin-bottom:11px;
  color:#565238;
}

.paper-name {
  display:block;
  letter-spacing:5px;
  line-height:1.2;
  font-size:25px;
}

.paper-label {
  display:block;
  font-family:var(--sans);
  font-size:7px;
  letter-spacing:1.8px;
  margin-top:10px;
}

.paper-rule {
  height:1px;
  background:#847b5f70;
  margin-block:22px 12px;
}

.paper-course {
  font-size:14px;
  font-style:italic;
}

.paper-dish {
  margin-top:17px;
  text-align:left;
  border-bottom:1px solid #82795633;
  padding-bottom:10px;
  line-height:1.4;
}

.paper-dish b {
  display:block;
  font-size:12px;
  font-weight:400;
}

.paper-dish>span {
  font-size:9px;
  color:#595440;
}

.paper-bottom {
  display:block;
  letter-spacing:1px;
  font-size:6px;
  margin-top:17px;
  font-family:var(--sans);
}

.scan-bracket {
  position:absolute;
  width:48px;
  height:48px;
  border-color:var(--gold);
  opacity:.75;
  z-index:-1;
}

.bracket-top {
  left:-6px;
  top:56px;
  border-left:1px solid;
  border-top:1px solid;
  border-radius:5px 0 0 0;
}

.bracket-bottom {
  right:5px;
  bottom:63px;
  border-right:1px solid;
  border-bottom:1px solid;
  border-radius:0 0 5px 0;
}

.detail-panel {
  position:absolute;
  top:91px;
  right:17px;
  width:316px;
  background:#12121A;
  border:1px solid #44403B;
  border-radius:19px;
  box-shadow:0 28px 70px #0009;
  transform:rotate(3deg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.panel-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #303039;
  padding:14px 19px;
  font-size:12px;
  font-weight:500;
  color:#D7D7DE;
}

.panel-back {
  font-size:26px;
  line-height:18px;
  color:var(--gold);
}

.heart {
  stroke:var(--gold);
  fill:none;
  stroke-width:1.7;
}

.panel-content {
  padding:22px 22px 16px;
}

.panel-section {
  font-size:9px;
  letter-spacing:2px;
  color:#A6A2AE;
  margin-bottom:10px;
}

.detail-panel h2 {
  font-size:23px;
  letter-spacing:-.6px;
  font-weight:650;
  line-height:1.2;
}

.dish-description {
  font-size:12px;
  color:#AAA7B4;
  margin-top:9px;
}

.allergen-label {
  margin-top:15px;
  background:#ec746518;
  color:#FFA398;
  border:1px solid #FF9B8A35;
  border-radius:5px;
  padding:4px 8px;
  display:inline-flex;
  gap:5px;
  align-items:center;
  font-size:10px;
}

.allergen-label svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
}

.warning-line {
  margin-block:14px;
  padding:12px;
  background:#201B20;
  border:1px solid #734f4a;
  border-radius:7px;
}

.warning-label {
  display:block;
  font-size:8px;
  line-height:1.25;
  letter-spacing:1.2px;
  color:#FFA398;
}

.warning-line p {
  font-size:12px;
  line-height:1.35;
  color:#FFE2DB;
  margin-top:6px;
}

.detail-panel h3 {
  font-size:12px;
  margin-top:17px;
  margin-bottom:9px;
  color:#D7D5DC;
}

.app-chips {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.app-chips span {
  border:1px solid #38363E;
  border-radius:20px;
  padding:5px 9px;
  font-size:10px;
  color:#DEDAE4;
  background:#1A1A24;
}

.app-chips .app-chip-warning {
  border-color:#805049;
  color:#FFB7AC;
}

.panel-disclaimer {
  font-size:9px;
  line-height:1.6;
  color:#ACA6B1;
  margin-top:16px;
}

.floating-note {
  position:absolute;
  z-index:2;
  left:-9px;
  bottom:49px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 30px 14px 22px;
  background:#20201D;
  border:1px solid #68604B;
  border-radius:9px;
  box-shadow:0 8px 24px #0005;
  transform:rotate(-3deg);
}

.note-cross {
  color:var(--gold-light);
  font-size:25px;
  line-height:1;
  font-weight:400;
}

.floating-note div>span {
  display:block;
  line-height:1.3;
  color:#C6B992;
  font-size:8px;
  letter-spacing:1.6px;
  font-weight:700;
}

.floating-note p {
  font-size:12px;
  line-height:1.35;
  color:var(--ink);
  margin-top:2px;
}

.visual-caption {
  position:absolute;
  /* Clears the tilted dish panel, which carries the app's section captions. */
  bottom:-60px;
  right:17px;
  font-size:10px;
  color:var(--quiet);
  letter-spacing:.06em;
}

.store-badge {
  display:inline-block;
  padding:12px;
}

.store-badge img {
  height:48px;
  width:auto;
  max-width:none;
}

/* 04. Narrative strip and three steps */
.intro-strip {
  border-block:1px solid var(--line);
  background:#121213;
}

.intro-strip>.width-container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:90px;
  gap:20px;
}

.intro-strip p {
  font-size:23px;
  font-weight:500;
  letter-spacing:-.6px;
}

.intro-strip em {
  font-size:1.15em;
}

.intro-strip span {
  font-size:10px;
  color:var(--quiet);
  letter-spacing:.17em;
}

.steps-section {
  padding-block:106px 107px;
}

.section-heading h2,.features-heading h2,.closing-section h2 {
  font-size:clamp(43px,4.5vw,64px);
  letter-spacing:-.045em;
  line-height:1.04;
  margin-top:17px;
}

.section-heading h2 em,.features-heading h2 em {
  font-size:1.15em;
  letter-spacing:-.01em;
}

.steps-grid {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  padding:0;
  margin:40px 0 0;
}

.steps-grid li {
  min-width:0;
  border-top:1px solid #57503F;
  padding-top:18px;
}

.step-number {
  font-size:12px;
  color:var(--gold-light);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.steps-grid h3 {
  font-size:19px;
  letter-spacing:-.5px;
  margin-top:27px;
}

.steps-grid li>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.85;
  max-width:320px;
  margin-top:13px;
  min-height:73px;
}

/* Each step shows a simplified copy of the real app screen it describes, in
   the app's colours (src/constants/theme.ts) and the system font, with its
   labels word for word: step 01 the Upload screen's photo strip and Analyze
   button (app/(main)/upload.tsx, src/components/ImagePreview.tsx), step 02 the
   menu's filter chips and dish cards (app/(main)/menu.tsx,
   src/components/DishCard.tsx), step 03 the ingredient popup
   (src/components/IngredientModal.tsx). They are aria-hidden: each step's
   title and text carry its meaning.
   One app point is var(--u). It follows the card's width (.22cqi), between
   .7px in the narrowest cards and .88px, so each copy keeps the app's
   proportions; the smallest labels never go under 9px. Rows wrap instead of
   spilling when text is enlarged, and nothing breaks inside a word. */
.step-mini {
  --u:clamp(.7px,.22cqi,.88px);
  container-type:inline-size;
  display:flex;
  max-width:420px;
  margin-top:24px;
  border:1px solid #2A2A36;
  border-radius:14px;
  background:#0A0A0F;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.2;
  color:#FAFAFA;
}

@supports not (width:1cqi) {
  .step-mini {
    --u:.8px;
  }
}

.app-screen {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:calc(14*var(--u)) calc(16*var(--u));
}

.app-screen svg {
  width:1em;
  height:1em;
  fill:currentColor;
}

.app-screen .icon-line {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 01: "Added photos (3/6)" over three menu-page thumbnails, each with its red
   remove button, the dashed Add tile, and the gold Analyze Menu button in the
   footer bar pinned to the bottom of the screen. When the row of cards is
   taller than this copy, the photos sit centred above the footer. In narrow
   cards the Add tile goes (on a phone it is scrolled out of view anyway), so
   the three pages stay large enough to read as menus. */
.upload-head {
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:2px calc(8*var(--u));
  padding-inline:calc(8*var(--u));
  font-size:max(10px,calc(13*var(--u)));
  font-weight:600;
  color:#A0A0B0;
}

.upload-clear {
  font-weight:500;
  color:#FF3B30;
}

.upload-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,calc(100*var(--u))));
  column-gap:calc(20*var(--u));
  padding:calc(14*var(--u)) calc(8*var(--u)) 0 calc(16*var(--u));
  margin-bottom:auto;
}

/* A photographed menu page: the restaurant's name, a rule, then dish names
   (dark) over their descriptions (light). */
.upload-photo {
  position:relative;
  aspect-ratio:5/7;
  border-radius:calc(16*var(--u));
  background-color:#DDD3BC;
  background-image:
    linear-gradient(#2F2C22,#2F2C22),
    linear-gradient(#8C846A,#8C846A),
    repeating-linear-gradient(#4A4536 0 7%,transparent 7% 25%),
    repeating-linear-gradient(transparent 0 11%,#A39A7E 11% 16%,transparent 16% 25%),
    linear-gradient(155deg,#FFFFFF1F,#00000026);
  background-size:52% 5.5%,64% 1%,40% 56%,72% 56%,100% 100%;
  background-position:50% 11%,50% 22%,20% 88%,43% 88%,0 0;
  background-repeat:no-repeat;
}

.upload-photo:nth-child(2) {
  background-size:34% 5.5%,64% 1%,46% 56%,72% 56%,100% 100%;
}

.upload-photo:nth-child(3) {
  background-size:44% 5.5%,64% 1%,34% 56%,66% 56%,100% 100%;
  background-position:50% 11%,50% 22%,18% 88%,35% 88%,0 0;
}

/* The app's remove button: a red close-circle on a ring of the screen colour,
   over the thumbnail's top-right corner. */
.upload-photo>i {
  position:absolute;
  top:-10%;
  right:-14%;
  width:36%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,#FF3B30 55%,#0A0A0F 58%);
}

.upload-photo>i:before,.upload-photo>i:after {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:26%;
  height:max(1px,6%);
  border-radius:1px;
  background:#0A0A0F;
  transform:translate(-50%,-50%) rotate(45deg);
}

.upload-photo>i:after {
  transform:translate(-50%,-50%) rotate(-45deg);
}

.upload-add {
  aspect-ratio:5/7;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(4*var(--u));
  border:max(1px,calc(1.5*var(--u))) dashed #2A2A36;
  border-radius:calc(16*var(--u));
  background:#12121A;
  font-size:max(9px,calc(11*var(--u)));
  color:#A0A0B0;
}

.upload-add svg {
  width:calc(28*var(--u));
  height:calc(28*var(--u));
}

.upload-footer {
  margin:calc(16*var(--u)) calc(-16*var(--u)) calc(-14*var(--u));
  padding:calc(12*var(--u)) calc(24*var(--u)) calc(16*var(--u));
  border-top:1px solid #2A2A36;
}

.app-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(8*var(--u));
  padding:calc(18*var(--u)) calc(24*var(--u));
  border-radius:calc(16*var(--u));
  background:#F5A623;
  font-size:max(11px,calc(17*var(--u)));
  font-weight:600;
  text-align:center;
  color:#0A0A0F;
}

.app-button svg {
  width:calc(20*var(--u));
  height:calc(20*var(--u));
}

/* 02: the menu's filter chips (Allergens, Dislikes, Diet with their counts)
   over two dish cards with the app's warning badges. A card with a warning
   has the app's red border, thicker on the left. The chips drop their icons,
   then their counts, then themselves when the card is too narrow for them. */
.menu-filters {
  display:flex;
  flex-wrap:wrap;
  gap:calc(8*var(--u));
  margin-bottom:calc(4*var(--u));
}

.menu-filter {
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(4*var(--u));
  padding:calc(8*var(--u));
  border:1px solid #2A2A36;
  border-radius:calc(12*var(--u));
  background:#1E1E28;
  font-size:max(9px,calc(11*var(--u)));
  font-weight:500;
  color:#8A8A9A;
}

.menu-filter svg {
  width:calc(14*var(--u));
  height:calc(14*var(--u));
}

.menu-filter b {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:1.64em;
  min-height:1.64em;
  padding-inline:.36em;
  border-radius:1em;
  background:#2A2A36;
  font-weight:700;
  color:#A0A0B0;
}

.menu-dish {
  margin-top:calc(12*var(--u));
  padding:calc(16*var(--u));
  border:1px solid #FF6B6B66;
  border-left-width:3px;
  border-radius:calc(16*var(--u));
  background:#1E1E28;
}

.menu-dish-top {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  column-gap:calc(12*var(--u));
}

.menu-dish-name {
  flex:1 1 50%;
  font-size:max(11px,calc(17*var(--u)));
  font-weight:600;
}

.menu-dish-price {
  display:flex;
  align-items:center;
  gap:calc(8*var(--u));
  font-size:max(11px,calc(17*var(--u)));
  font-weight:700;
  color:#F5A623;
}

.menu-dish-price svg {
  width:calc(18*var(--u));
  height:calc(18*var(--u));
  color:#8A8A9A;
}

.menu-badges {
  display:flex;
  flex-wrap:wrap;
  gap:calc(4*var(--u)) calc(8*var(--u));
  margin-top:calc(8*var(--u));
}

.menu-badge {
  display:flex;
  align-items:center;
  gap:calc(4*var(--u));
  padding:calc(4*var(--u)) calc(8*var(--u));
  border-radius:calc(8*var(--u));
  font-size:max(9px,calc(11*var(--u)));
  font-weight:500;
}

.menu-badge svg {
  width:calc(12*var(--u));
  height:calc(12*var(--u));
}

.badge-allergen {
  background:#FF6B6B26;
  color:#FF6B6B;
}

.badge-dislike {
  background:#FFB34726;
  color:#FFB347;
}

.badge-diet {
  background:#A78BFA26;
  color:#A78BFA;
}

.menu-dish-text {
  margin-top:calc(8*var(--u));
  font-size:max(10px,calc(15*var(--u)));
  line-height:1.6;
  color:#A0A0B0;
}

@container (max-width:259px) {
  .upload-add {
    display:none;
  }
  .upload-strip {
    grid-template-columns:repeat(3,minmax(0,calc(100*var(--u))));
    column-gap:calc(14*var(--u));
    padding-inline:calc(8*var(--u));
  }
}

@container (max-width:269px) {
  .menu-filter svg {
    display:none;
  }
}

@container (max-width:229px) {
  .menu-filter b {
    display:none;
  }
}

@container (max-width:179px) {
  .menu-filters {
    display:none;
  }
}

/* 03: the ingredient popup, risen over the dish screen (dimmed by the app's
   overlay): the name with its close button, the explanation (the Explore
   Pimentón explanation), and the Add to My Dislikes button. */
.app-screen.sheet-screen {
  padding:0;
  background:#030305;
}

/* Behind the popup, the dish screen's "Menu Terms" section under the app's overlay. The chip that was
   tapped (Pimentón) stays bright and gold-outlined, so it is clear what opened the popup. */
.sheet-behind {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:calc(8*var(--u));
  min-height:calc(40*var(--u));
  padding:calc(16*var(--u)) calc(20*var(--u)) calc(14*var(--u));
}

.sheet-behind-title {
  font-size:max(10px,calc(17*var(--u)));
  font-weight:600;
  color:#F0F0F5;
  opacity:.4;
}

.sheet-behind-chips {
  display:flex;
  flex-wrap:wrap;
  gap:calc(8*var(--u));
}

.sheet-behind-chips b {
  padding:calc(7*var(--u)) calc(14*var(--u));
  border:1px solid #2A2A36;
  border-radius:calc(12*var(--u));
  background:#252530;
  color:#F0F0F5;
  font-size:max(9px,calc(13*var(--u)));
  font-weight:500;
  white-space:nowrap;
  opacity:.4;
}

.sheet-behind-chips b.is-tapped {
  border-color:#F5A623;
  color:#F5A623;
  opacity:1;
}

.sheet {
  padding:calc(22*var(--u)) calc(24*var(--u)) calc(20*var(--u));
  border-top:1px solid #3A3A48;
  border-radius:calc(24*var(--u)) calc(24*var(--u)) 0 0;
  background:#12121A;
}

.sheet-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:calc(12*var(--u));
  margin-bottom:calc(14*var(--u));
}

.sheet-name {
  font-size:max(14px,calc(24*var(--u)));
  font-weight:700;
}

.sheet-top svg {
  width:calc(24*var(--u));
  height:calc(24*var(--u));
  color:#A0A0B0;
}

.sheet-text {
  font-size:max(10px,calc(15*var(--u)));
  line-height:1.6;
  color:#A0A0B0;
}

.sheet-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(8*var(--u));
  margin-top:calc(22*var(--u));
  padding:calc(14*var(--u)) calc(20*var(--u));
  border:max(1px,calc(1.5*var(--u))) solid #3A3A48;
  border-radius:calc(16*var(--u));
  font-size:max(10px,calc(15*var(--u)));
  font-weight:600;
  text-align:center;
}

.sheet-button svg {
  width:calc(18*var(--u));
  height:calc(18*var(--u));
  stroke-width:1.8;
}

/* 05. Feature compositions */
.features-section {
  padding-bottom:110px;
}

.features-heading {
  margin-bottom:40px;
}

/* Each section's lead line ("Three steps from a menu photo to your order.", "Made
   for the tasting menu..."), directly under its heading and left-aligned, with
   the same size, colour, width and spacing in both sections. */
.section-heading>p:last-child,.features-heading>p:last-child {
  max-width:440px;
  margin-top:25px;
  font-size:14px;
  color:var(--muted);
  text-wrap:balance;
}

.feature-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:18px;
}

.feature {
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px;
  background:var(--surface);
  min-width:0;
  overflow:hidden;
}

.feature-index {
  font-size:9px;
  letter-spacing:.17em;
  color:var(--gold-light);
}

.feature h3 {
  font-size:29px;
  letter-spacing:-1px;
  margin-top:18px;
  line-height:1.2;
}

.feature p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:390px;
  margin-top:16px;
}

.feature-ingredients {
  grid-row:span 2;
  background:radial-gradient(ellipse at 80% 60%,#AA763519,transparent 60%),var(--surface);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:666px;
}

.feature-ingredients h3 {
  font-size:35px;
  text-wrap:balance;
}

/* Two explanations, stacked like a small deck: the tall explore card
   otherwise leaves a large empty band above a single example. */
.ingredient-stack {
  display:grid;
  margin-top:150px;
}

.ingredient-stack > .ingredient-example {
  grid-area:1 / 1;
}

.ingredient-example.ingredient-example-back {
  opacity:.45;
  box-shadow:none;
  border-top-color:#746649;
  transform:rotate(2deg) translate(-18px, -112px);
}

.ingredient-example {
  margin:48px -2px 8px 15px;
  border:1px solid #746649;
  border-radius:10px;
  padding:28px;
  background:#211F1C;
  box-shadow:-14px 16px 0 #D8BE783;
  border-top:2px solid #D3A660;
  transform:rotate(-3deg);
}

.example-top {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:8px;
  letter-spacing:.13em;
  color:#C9BD9F;
}

.ingredient-example h4 {
  font-size:40px;
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.5px;
  margin-top:32px;
}

.ingredient-example h4 em {
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:9px;
  letter-spacing:.08em;
  color:#BCAF94;
  margin-top:13px;
}

.ingredient-example p {
  font-size:14px;
  max-width:330px;
  margin:26px 0 34px;
  color:#DFD5C6;
  line-height:1.95;
}

.example-label {
  font-size:9px;
  color:#BCAF94;
}

.feature-preferences {
  padding-bottom:27px;
}

/* The card's caveat ends on a full phrase rather than a lone word, and
   "safe—always" stays on one line, so no line starts with the dash. */
.feature-preferences>p {
  text-wrap:pretty;
}

.nowrap {
  white-space:nowrap;
}

.preference-example {
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:17px;
  display:grid;
  gap:10px;
}

.preference-example>div {
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}

.preference-example>div>span {
  font-size:10px;
  color:var(--muted);
  min-width:60px;
}

.preference-example b {
  font-size:10px;
  font-weight:500;
  border:1px solid #655338;
  border-radius:4px;
  padding:4px 9px;
  color:#E6C997;
  background:#292216;
}

.feature-save {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}

.feature-save h3 {
  font-size:26px;
}

.feature-save p {
  max-width:300px;
}

.shortlist-example {
  width:100%;
  margin-top:2px;
}

.shortlist-example>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:13px;
  margin-top:11px;
  font-size:12px;
}

.shortlist-example small {
  display:block;
  font-size:9px;
  color:var(--quiet);
  margin-top:2px;
}

.shortlist-example>div>span:last-child {
  color:var(--gold-light);
  font-size:26px;
  line-height:1;
}

/* 06. Closing */
.closing-section {
  padding-block:24px 87px;
  text-align:center;
}

.closing-section>picture {
  display:block;
  width:86px;
  margin:auto auto 24px;
}

.closing-section h2 {
  font-size:clamp(47px,5.5vw,77px);
  margin-top:18px;
}

.closing-section h2 em {
  font-size:1.1em;
}

.pricing-line {
  font-size:15px;
  margin-top:29px;
  text-wrap:balance;
}

.eligibility-note {
  color:var(--quiet);
  font-size:12px;
  line-height:1.6;
  margin-top:5px;
  max-width:360px;
  margin-inline:auto;
  text-wrap:balance;
}

.closing-status {
  display:table;
  margin:26px auto 6px;
  border:1px solid var(--line);
  border-radius:30px;
  padding:10px 20px;
  font-size:12px;
  color:#CDC5B8;
}

.closing-section .text-link {
  font-size:11px;
  color:var(--muted);
}

/* 07. Frozen legal content: type, spacing and landmarks only */
.legal-page {
  background:radial-gradient(ellipse at 15% 0,#8d652616,transparent 36%),var(--bg);
  padding:55px var(--gutter) 85px;
}

.legal-document {
  max-width:840px;
  margin:auto;
  overflow-wrap:anywhere;
}

.legal-document .back-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--gold-light);
  font-size:13px;
  margin-bottom:45px;
}

.legal-document h1 {
  font-size:clamp(38px,5vw,60px);
  letter-spacing:-2px;
  padding-top:25px;
  border-top:1px solid #6C593A;
  line-height:1.15;
}

.legal-document .last-updated {
  color:var(--quiet);
  font-size:12px;
  margin-top:14px;
  margin-bottom:38px;
}

.legal-document h2 {
  font-size:22px;
  letter-spacing:-.6px;
  margin:42px 0 15px;
  padding-top:24px;
  border-top:1px solid var(--line);
  line-height:1.4;
}

.legal-document p,.legal-document li {
  font-size:14px;
  color:#C6C2BC;
  line-height:1.95;
  margin-bottom:14px;
}

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

.legal-document ul {
  padding-left:22px;
  margin-block:13px 22px;
}

.legal-document li {
  padding-left:5px;
}

.legal-document a:not(.back-link) {
  color:var(--gold-light);
  text-decoration:underline;
  text-underline-offset:4px;
  overflow-wrap:anywhere;
}

.legal-document a:hover {
  color:#FFE0A3;
}

.legal-document .important {
  padding:23px 27px;
  background:#251F16;
  border:1px solid #806338;
  border-left:3px solid var(--gold);
  border-radius:5px;
  color:#E7D9C1;
  font-size:14px;
  line-height:1.9;
  margin-block:30px;
}

/* 08. Support */
.support-shell {
  width:calc(100% - var(--gutter)*2);
  max-width:var(--max);
  margin:auto;
  padding-block:68px 100px;
}

.support-hero {
  max-width:810px;
  margin-bottom:50px;
}

.support-hero h1 {
  font-size:clamp(44px,6vw,78px);
  letter-spacing:-.05em;
  line-height:1.05;
  margin-top:15px;
}

.support-hero>p:not(.eyebrow) {
  font-size:17px;
  line-height:1.8;
  color:var(--muted);
  max-width:650px;
  margin-top:24px;
}

.support-grid {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:55px;
  align-items:start;
}

.support-sidebar {
  display:grid;
  gap:20px;
  position:sticky;
  top:24px;
}

.support-contact,.support-caution {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:27px;
}

.support-contact h2,.support-caution h2 {
  font-size:22px;
  letter-spacing:-.7px;
  line-height:1.2;
  margin-bottom:16px;
}

.support-contact p,.support-caution p {
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
  margin-block:14px;
}

.contact-email {
  display:inline-block;
  color:var(--gold-light);
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere;
  text-decoration:underline;
  text-underline-offset:4px;
  min-height:44px;
  padding-block:8px;
}

.contact-note {
  font-size:11px!important;
  color:var(--quiet)!important;
}

.support-caution {
  background:#211C16;
  border-color:#655237;
}

.support-caution a {
  color:var(--gold-light);
  text-decoration:underline;
  text-underline-offset:4px;
}

.faq-list h2 {
  font-size:27px;
  letter-spacing:-1px;
  margin-bottom:23px;
  line-height:1.2;
}

.faq-list details {
  border-top:1px solid var(--line);
  padding-block:4px;
}

.faq-list details:last-child {
  border-bottom:1px solid var(--line);
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  line-height:1.6;
  padding:19px 34px 19px 0;
  position:relative;
  min-height:60px;
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list summary:after {
  content:'+';
  position:absolute;
  right:3px;
  top:17px;
  font-size:22px;
  font-weight:400;
  color:var(--gold-light);
}

.faq-list details[open] summary:after {
  content:'−';
}

.faq-answer {
  padding:0 32px 24px 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  overflow-wrap:anywhere;
}

.faq-answer p {
  margin-bottom:13px;
}

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

.faq-answer a {
  color:var(--gold-light);
  text-decoration:underline;
  text-underline-offset:4px;
}

.faq-answer ul {
  padding-left:20px;
}

.faq-answer li {
  margin-bottom:7px;
}

.support-hero .eyebrow {
  color:var(--gold-light);
}

/* 09. Responsive layout; nothing depends on animation or JavaScript */
@media(min-width:1600px) {
  .hero {
    min-height:850px;
    gap:65px;
  }
  .hero-visual {
    transform:scale(1.06);
  }
}

@media(max-width:1180px) {
  .header-status {
    display:none;
  }
  .hero {
    padding-top:66px;
    gap:18px;
    min-height:720px;
  }
  .hero h1 {
    font-size:70px;
  }
  .hero-visual {
    transform:scale(.9);
    transform-origin:center right;
  }
  .hero-actions {
    gap:14px;
  }
  .hero-description {
    font-size:15px;
  }
  .coming-soon {
    max-width:120px;
  }
  .steps-grid {
    gap:25px;
  }
  .feature {
    padding:28px;
  }
  .support-grid {
    grid-template-columns:300px 1fr;
    gap:35px;
  }
}

@media(min-width:901px) and (max-width:1180px) {
  .orbit {
    max-width:100%;
    height:auto;
    aspect-ratio:1;
  }
}

@media(max-width:900px) {
  .ingredient-example.ingredient-example-back {
    display:none;
  }
  .visual-caption {
    bottom:-42px;
  }
  .ingredient-stack {
    margin-top:24px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:65px 65px;
    gap:24px;
    max-width:660px;
  }
  .hero-copy {
    max-width:600px;
  }
  .hero h1 {
    font-size:80px;
  }
  .hero h1 br:nth-child(2) {
    display:none;
  }
  .hero-description {
    font-size:17px;
    max-width:500px;
  }
  .hero-visual {
    transform:none;
    max-width:580px;
    justify-self:center;
    height:600px;
    margin-top:20px;
  }
  .detail-panel {
    right:50px;
    top:90px;
  }
  .menu-paper {
    left:35px;
  }
  .floating-note {
    left:28px;
  }
  .orbit-one {
    left:5%;
  }
  .orbit-two {
    left:-3%;
  }
  .bracket-top {
    left:20px;
  }
  .bracket-bottom {
    right:27px;
  }
  .hero-actions {
    gap:24px;
  }
  .coming-soon {
    max-width:170px;
  }
  .hero-caution {
    font-size:12px;
  }
  .intro-strip p {
    font-size:20px;
  }
  .intro-strip span {
    font-size:8px;
  }
  .steps-grid {
    gap:20px;
  }
  .steps-grid h3 {
    font-size:17px;
  }
  .steps-grid li>p {
    font-size:12px;
  }
  .feature-ingredients h3 {
    font-size:28px;
  }
  .feature h3 {
    font-size:25px;
  }
  .feature-grid {
    grid-template-columns:1fr 1fr;
  }
  .ingredient-example {
    margin:35px 0 30px;
    padding:22px;
  }
  .ingredient-example h4 {
    font-size:35px;
  }
  .ingredient-example p {
    font-size:13px;
  }
  .support-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
  .support-sidebar {
    grid-template-columns:1fr 1fr;
    position:static;
    gap:20px;
  }
  .support-hero {
    margin-bottom:38px;
  }
}

@media(min-width:601px) and (max-width:900px) {
  .hero h1 em {
    display:inline-block;
    max-width:100%;
  }
}

@media(max-width:600px) {
  :root {
    --gutter:24px;
  }
  .site-header {
    min-height:80px;
    padding-block:17px;
    flex-wrap:wrap;
    gap:12px;
  }
  .brand {
    font-size:20px;
    gap:7px;
  }
  .brand picture,.brand img {
    width:34px;
    height:34px;
  }
  .site-header nav {
    flex:1 1 260px;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:0 24px;
    margin-left:0;
    font-size:14px;
  }
  .hero {
    padding-top:46px;
    padding-bottom:44px;
    gap:0;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.16em;
    margin-bottom:25px;
    gap:9px;
  }
  .hero .eyebrow>span {
    width:19px;
  }
  .hero h1 {
    font-size:clamp(52px,13vw,74px);
    letter-spacing:-.056em;
    line-height:1.06;
  }
  .hero h1 br:nth-child(2) {
    display:inline;
  }
  .hero h1 em {
    font-size:1.15em;
  }
  .hero-description {
    font-size:14px;
    line-height:1.85;
    margin-top:23px;
    max-width:360px;
  }
  .hero-actions {
    margin-top:24px;
    gap:16px;
    flex-wrap:nowrap;
  }
  .button {
    padding:12px 16px;
    min-height:48px;
    font-size:11px;
    gap:16px;
  }
  .coming-soon {
    font-size:9px;
    max-width:115px;
  }
  .hero-caution {
    font-size:12px;
    margin-top:25px;
    gap:9px;
  }
  .caution-mark {
    width:16px;
    height:16px;
    font-size:10px;
  }
  .hero-visual {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    height:auto;
    gap:24px;
    padding-top:78px;
    margin-top:48px;
    width:100%;
    max-width:385px;
  }
  .menu-paper {
    left:11px;
    overflow:hidden;
    top:0;
    width:237px;
    height:347px;
    padding:21px;
    transform:rotate(-9deg);
  }
  .paper-name {
    font-size:21px;
    letter-spacing:4px;
  }
  .paper-ornament {
    font-size:17px;
    margin-bottom:7px;
  }
  .paper-label {
    font-size:6px;
  }
  .paper-rule {
    margin:15px 0 7px;
  }
  .paper-dish {
    margin-top:12px;
    padding-bottom:8px;
  }
  .paper-dish b {
    font-size:10px;
  }
  .paper-dish>span {
    font-size:8px;
  }
  .paper-course {
    font-size:12px;
  }
  .paper-bottom {
    font-size:5px;
    margin-top:13px;
  }
  .detail-panel {
    position:relative;
    justify-self:end;
    width:266px;
    max-width:100%;
    right:auto;
    top:auto;
    /* The tilt pushes a tall panel's corner past the gutter; keep it inside. */
    margin-right:6px;
    border-radius:13px;
    transform:rotate(3deg);
  }
  .panel-topline {
    padding:12px 15px;
    font-size:11px;
  }
  .panel-content {
    padding:18px 18px 15px;
  }
  .detail-panel h2 {
    font-size:20px;
  }
  .dish-description {
    font-size:11px;
  }
  .panel-section {
    font-size:8px;
  }
  .warning-line {
    margin-block:14px;
    padding:10px 10px;
  }
  .warning-line p {
    font-size:11px;
  }
  .warning-label {
    font-size:7px;
  }
  .detail-panel h3 {
    font-size:11px;
    margin-top:14px;
    margin-bottom:8px;
  }
  .app-chips span {
    font-size:9px;
    padding:4px 8px;
  }
  .panel-disclaimer {
    font-size:8px;
    margin-top:15px;
  }
  .allergen-label {
    margin-top:12px;
    font-size:9px;
  }
  .floating-note {
    position:relative;
    justify-self:start;
    max-width:100%;
    bottom:auto;
    left:auto;
    transform:none;
    padding:9px 16px 9px 12px;
    gap:9px;
    border-radius:6px;
  }
  .floating-note div>span {
    font-size:7px;
  }
  .floating-note p {
    font-size:10px;
  }
  .note-cross {
    font-size:19px;
  }
  .orbit-one {
    width:320px;
    height:320px;
    top:65px;
    left:5%;
  }
  .orbit-two {
    /* Starts at the gutter; capped so it never ends past the screen (375-378px phones). */
    width:min(355px,calc(100vw - var(--gutter)));
    height:auto;
    aspect-ratio:1;
    top:40px;
    left:0;
  }
  .scan-bracket {
    width:32px;
    height:32px;
  }
  .bracket-top {
    left:0;
    top:23px;
  }
  .bracket-bottom {
    right:0;
    bottom:16px;
  }
  .visual-caption {
    position:static;
    justify-self:end;
    font-size:9px;
  }
  .hero-visual:before {
    inset:0;
  }
  .intro-strip>.width-container {
    min-height:82px;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    padding-block:17px;
  }
  .intro-strip p {
    font-size:19px;
  }
  .intro-strip span {
    font-size:7px;
    letter-spacing:.16em;
  }
  .steps-section {
    padding-block:66px;
  }
  .section-heading h2,.features-heading h2 {
    font-size:45px;
    margin-top:14px;
  }
  .eyebrow {
    font-size:9px;
  }
  .steps-grid {
    grid-template-columns:1fr;
    gap:35px;
    margin-top:30px;
  }
  .steps-grid li {
    position:relative;
    padding-top:15px;
  }
  .step-number {
    font-size:11px;
  }
  .steps-grid h3 {
    font-size:22px;
    margin-top:19px;
  }
  .steps-grid li>p {
    font-size:13px;
    margin-top:13px;
    min-height:0;
    max-width:360px;
  }
  .step-mini {
    margin-top:21px;
  }
  .features-section {
    padding-bottom:65px;
  }
  .features-heading {
    margin-bottom:30px;
  }
  .section-heading>p:last-child,.features-heading>p:last-child {
    font-size:12px;
    margin-top:23px;
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .feature {
    padding:27px;
  }
  .feature-ingredients {
    min-height:0;
  }
  .feature-ingredients h3 {
    font-size:29px;
  }
  .feature p {
    font-size:12px;
    line-height:1.9;
  }
  .ingredient-example {
    margin:35px 3px 10px 5px;
    padding:22px;
  }
  .ingredient-example h4 {
    margin-top:24px;
  }
  .ingredient-example p {
    font-size:13px;
    margin:22px 0;
  }
  .feature-preferences h3,.feature-save h3 {
    font-size:28px;
  }
  .feature-save {
    gap:12px;
  }
  .closing-section {
    padding-block:22px 61px;
  }
  .closing-section>picture {
    width:70px;
    margin-bottom:21px;
  }
  .closing-section h2 {
    font-size:51px;
    margin-top:18px;
  }
  .pricing-line {
    font-size:13px;
    margin-top:24px;
  }
  .eligibility-note {
    font-size:12px;
    line-height:1.6;
    max-width:270px;
    margin-inline:auto;
  }
  .closing-status {
    font-size:10px;
  }
  .site-footer {
    padding-block:30px;
  }
  .footer-inner {
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
  }
  .site-footer nav {
    gap:24px;
    font-size:11px;
  }
  .site-footer p {
    font-size:10px;
  }
  .footer-brand {
    font-size:20px;
  }
  .legal-page {
    padding-block:26px 60px;
  }
  .legal-document .back-link {
    margin-bottom:24px;
  }
  .legal-document h1 {
    font-size:39px;
    letter-spacing:-1.5px;
  }
  .legal-document h2 {
    font-size:21px;
    margin-top:32px;
    padding-top:24px;
  }
  .legal-document p,.legal-document li {
    font-size:13px;
    line-height:1.9;
  }
  .legal-document .important {
    font-size:13px;
    padding:20px;
  }
  .legal-document .last-updated {
    margin-bottom:30px;
  }
  .support-shell {
    padding-block:40px 60px;
  }
  .support-hero h1 {
    font-size:49px;
  }
  .support-hero>p:not(.eyebrow) {
    font-size:14px;
    margin-top:20px;
  }
  .support-sidebar {
    grid-template-columns:1fr;
  }
  .support-contact,.support-caution {
    padding:23px;
  }
  .faq-list h2 {
    font-size:24px;
  }
  .faq-list summary {
    font-size:14px;
  }
  .faq-answer {
    padding-right:12px;
  }
  .support-grid {
    gap:36px;
  }
}

@media(max-width:374px) {
  /* Decorative footer of the background menu paper; on the smallest phones with
     enlarged text it can cross the viewport edge. */
  .paper-bottom,
  .menu-paper .paper-dish:last-of-type {
    display:none;
  }
  .hero h1 {
    font-size:51px;
  }
  .detail-panel {
    width:254px;
    transform:none;
  }
  .hero-actions {
    gap:10px;
  }
  .button {
    padding-inline:13px;
    font-size:10px;
  }
  .coming-soon {
    font-size:8px;
  }
  .orbit-two {
    width:min(305px,100%);
    height:auto;
    aspect-ratio:1;
    left:0;
  }
  .orbit-one {
    width:min(290px,95%);
    height:auto;
    aspect-ratio:1;
  }
  .hero-visual:before {
    inset:0;
  }
  .ingredient-example {
    margin-left:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}

/* A shortlist row the diner removed while narrowing down the order. Faded to
   80%, not further: its "Removed from shortlist" label keeps about 4.9:1
   contrast, and the outlined heart still marks the row as removed. */
.shortlist-example .shortlist-dropped {
  opacity:.8;
}

/* The words from the Explore heading, as the tappable chips they are in the
   app. Tapping one swaps the explanation below; the previous one moves back. */
.word-chips-label {
  margin-top:32px;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#BCAF94;
}

.word-chips {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.word-chips button {
  min-height:40px;
  border:1px solid #3A3A44;
  border-radius:20px;
  padding:7px 16px;
  font:inherit;
  font-size:14px;
  color:#DEDAE4;
  background:#1A1A24;
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color .2s,color .2s,background-color .2s;
}

.word-chips button:hover {
  border-color:#746649;
}

.word-chips button[aria-pressed="true"] {
  border-color:var(--gold);
  color:var(--gold-light);
  background:#F5A6231F;
}

/* The app's own caption under a dish-detail section title. */
.panel-label {
  margin:-5px 0 8px;
  font-size:9px;
  font-style:italic;
  color:#ACA6B1;
}

@media(max-width:600px) {
  .word-chips-label {
    margin-top:22px;
  }
  .feature-ingredients .ingredient-example {
    margin-top:22px;
  }
  .feature-ingredients .ingredient-example h4 {
    margin-top:16px;
  }
  .feature-ingredients .ingredient-example p {
    margin:16px 0;
  }
}

/* 10. See it in action: the commercial in a CSS-only phone frame.
   The section sits between the hero copy and the hero artwork in the source,
   so a one-column layout reads headline, video, artwork with no reordering.
   On desktop it takes its own row under the unchanged hero row. The video never
   autoplays, and nothing here moves on its own. */
.see-it {
  /* Named so the desktop transcript can find the phone's centre line (section 10, min-width 901px). */
  --see-it-gap:clamp(40px,6vw,96px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  column-gap:var(--see-it-gap);
  margin-top:80px;
  padding-top:80px;
  border-top:1px solid var(--line);
}

.see-it-copy {
  grid-column:2;
  grid-row:1;
  /* Wide enough that "Ninety seconds." stays on one line at the largest size. */
  max-width:500px;
}

/* A plain section eyebrow, not the hero's ruled one it would otherwise inherit. */
.see-it .eyebrow {
  display:block;
  margin-bottom:0;
  font-size:11px;
  letter-spacing:.18em;
}

.see-it h2 {
  font-size:clamp(43px,4.5vw,64px);
  letter-spacing:-.045em;
  line-height:1.04;
  margin-top:17px;
}

.see-it h2 em {
  font-size:1.15em;
  letter-spacing:-.01em;
}

.see-it-copy>p:last-child {
  max-width:440px;
  margin-top:24px;
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
}

.see-it-media {
  grid-column:1;
  grid-row:1;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin:0;
}

.phone-frame {
  position:relative;
  width:min(300px,100%);
  padding:12px;
  border:1px solid #F5A62366;
  border-radius:36px;
  background:linear-gradient(155deg,#27272F 0%,#111117 46%,#1B1B22 100%);
  box-shadow:inset 0 0 0 1px #FFFFFF0F,0 34px 80px #000000B3;
}

/* A soft gold glow behind the phone; static, and never wider than the frame's
   own column on small screens. */
.phone-frame:before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-14% -22%;
  background:radial-gradient(ellipse at center,#AD732529 0,transparent 64%);
  pointer-events:none;
}

.phone-frame video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  /* Small enough that the player's own corner buttons (full screen, picture in picture, volume) sit clear of the curve. */
  border-radius:22px;
  background:#0A0A0F;
  /* When focus scrolls the player into view, bring the bezel and the ring with it. */
  scroll-margin-block:32px;
}

/* The ring is drawn inside the bezel, around the rounded screen. */
.phone-frame video:focus-visible {
  border-radius:22px;
  outline-offset:3px;
}

.see-it-media figcaption {
  width:min(300px,100%);
  margin-top:20px;
  text-align:center;
  text-wrap:balance;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--quiet);
}

/* The play button over the poster. The script unhides it; without script it stays hidden and the
   browser's own controls do everything. It sits on the screen's centre, inside the bezel. */
.video-play {
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  gap:12px;
  /* max-content: at left:50% the shrink-to-fit width would only be half the frame, which wrapped "Play · 1:30". */
  width:max-content;
  max-width:calc(100% - 44px);
  min-height:52px;
  padding:8px 22px 8px 8px;
  border:1px solid #F5A62399;
  border-radius:999px;
  /* Solid where the glass below is not supported. */
  background:#0A0A0FE6;
  box-shadow:inset 0 0 0 1px #FFFFFF0F,0 14px 36px #000000A6;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.video-play[hidden] {
  display:none;
}

/* A little glass: whatever shows through the pill is blurred. 84% opaque, so the pill's text keeps at least
   4.5:1 even over a white frame, before the scrim below darkens it further. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .video-play {
    background:#0A0A0FD6;
    -webkit-backdrop-filter:blur(12px) saturate(130%);
    backdrop-filter:blur(12px) saturate(130%);
  }
}

/* After the end, the last frame is the end card, whose "AI can make mistakes. Always confirm with restaurant
   staff." sits just below the middle. The film keeps its lowest third free of must-read text on every frame,
   so the button moves there. */
.phone-frame.is-ended .video-play {
  top:78%;
}

/* A soft darkening behind the button, so it reads cleanly on any poster frame. It shares the button's
   coordinates (the frame's box, clipped to the screen) and follows it: centred before the first play, around
   78% on the end card. There it fades out by 65% of the frame, clear of the end card's safety line (48-61%
   of the screen). It never takes a click: a tap anywhere on the poster must reach the video. */
.phone-frame:after {
  content:'';
  display:none;
  position:absolute;
  inset:0;
  clip-path:inset(12px round 22px);
  background:radial-gradient(ellipse 78% 17% at 50% 50%,#0A0A0FC2 0,#0A0A0F99 42%,#0A0A0F40 74%,#0A0A0F00 100%);
  pointer-events:none;
}

.phone-frame.is-poster:after {
  display:block;
}

.phone-frame.is-ended:after {
  background:radial-gradient(ellipse 78% 13% at 50% 78%,#0A0A0FC2 0,#0A0A0F99 42%,#0A0A0F40 74%,#0A0A0F00 100%);
}

/* A tap anywhere on the poster plays it (see the script in index.html). */
.phone-frame.is-poster video {
  cursor:pointer;
}

.video-play-icon {
  flex:none;
  position:relative;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--gold);
}

/* A play triangle, nudged right of centre so it reads as centred. */
.video-play-icon:after {
  content:'';
  position:absolute;
  top:11px;
  left:14px;
  border-style:solid;
  border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent var(--bg);
}

/* After the end: a replay arrow in the same gold disc, and the label "Replay". */
.video-play-replay {
  display:none;
  position:absolute;
  top:8px;
  left:8px;
  fill:none;
  stroke:var(--bg);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.phone-frame.is-ended .video-play-icon:after,.video-play-again,.phone-frame.is-ended .video-play-first {
  display:none;
}

.phone-frame.is-ended .video-play-replay {
  display:block;
}

.phone-frame.is-ended .video-play-again {
  display:inline;
}

.video-play-dot {
  color:var(--quiet);
  font-weight:400;
}

.video-play-time {
  color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}

.video-play:hover {
  border-color:var(--gold);
  background:#0A0A0F;
}

.video-play:hover .video-play-icon {
  background:var(--gold-light);
}

/* Keep the pill's shape under the site-wide focus ring (which would square it off). */
.video-play:focus-visible {
  border-radius:999px;
  outline-offset:4px;
}

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

/* Before the first play, hide the browser's own bar, time display, loading spinner and centre button,
   so the poster reads cleanly under the play button. Chromium and WebKit only; one selector per rule,
   because a browser drops a whole rule that names a pseudo-element or pseudo-class it does not know. The
   controls come back the moment the video plays.
   Never in fullscreen: there the play button (outside the video) can't be seen, and the browser's own
   controls are the only way to replay or leave. Selectors follow the DOM, not the fullscreen layer, so the
   exclusion has to be explicit. The script also keeps the poster state off in fullscreen (belt and braces).
   The prefixed :-webkit-full-screen rules are a separate set for WebKit before Safari 16.4, which does not
   know :fullscreen and so drops the first set; a browser that knows both applies both, identically. */
.phone-frame.is-poster video:not(:fullscreen)::-webkit-media-controls {
  display:none!important;
}

.phone-frame.is-poster video:not(:fullscreen)::-webkit-media-controls-enclosure {
  display:none!important;
}

.phone-frame.is-poster video:not(:fullscreen)::-webkit-media-controls-overlay-enclosure {
  display:none!important;
}

.phone-frame.is-poster video:not(:fullscreen)::-webkit-media-controls-start-playback-button {
  display:none!important;
}

.phone-frame.is-poster video:not(:-webkit-full-screen)::-webkit-media-controls {
  display:none!important;
}

.phone-frame.is-poster video:not(:-webkit-full-screen)::-webkit-media-controls-enclosure {
  display:none!important;
}

.phone-frame.is-poster video:not(:-webkit-full-screen)::-webkit-media-controls-overlay-enclosure {
  display:none!important;
}

.phone-frame.is-poster video:not(:-webkit-full-screen)::-webkit-media-controls-start-playback-button {
  display:none!important;
}

/* The transcript sits under the phone. Opening it grows the row below, so nothing above it moves. */
.see-it-transcript {
  grid-column:1;
  grid-row:2;
  justify-self:end;
  width:min(300px,100%);
  margin-top:8px;
}

.see-it-transcript summary {
  list-style:none;
  cursor:pointer;
  display:block;
  min-height:44px;
  padding:11px 0;
  text-align:center;
  font-size:13px;
  font-weight:600;
  /* 22px at 13px, and it grows with the text (a wrapped plus/minus at 200% gets its own line height). */
  line-height:1.6923;
  color:var(--gold-light);
}

.see-it-transcript summary::-webkit-details-marker {
  display:none;
}

/* The plus/minus is drawn, not typed: generated text would join the summary's accessible name
   ("Read the transcript +"). It is sized in em so it grows with the text (10px and 1.5px at 13px). */
.see-it-transcript summary:after {
  content:'';
  display:inline-block;
  width:.77em;
  height:.77em;
  margin:-.15em 0 0 .77em;
  vertical-align:middle;
  background:linear-gradient(currentColor,currentColor) center/100% max(1.5px,.115em) no-repeat,linear-gradient(currentColor,currentColor) center/max(1.5px,.115em) 100% no-repeat;
}

.see-it-transcript[open] summary:after {
  background:linear-gradient(currentColor,currentColor) center/100% max(1.5px,.115em) no-repeat;
}

.transcript-body {
  padding:14px 0 4px;
  border-top:1px solid var(--line);
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
}

.transcript-body p+p {
  margin-top:12px;
}

.transcript-body .transcript-sound {
  font-size:12px;
  color:var(--quiet);
}

@media(min-width:901px) {
  /* Row 1 is the hero exactly as before: the same minimum height (the old
     min-height less padding) and alignment. The section gets row 2. */
  .hero {
    grid-template-rows:minmax(597px,auto) auto;
    row-gap:0;
  }
  .hero-copy {
    grid-area:1/1;
  }
  .hero-visual {
    grid-area:1/2;
  }
  .see-it {
    grid-area:2/1/3/-1;
  }
  /* The transcript takes the whole row under the phone and its copy, so the open text can be wider than the
     phone. The summary stays centred under the phone, and so does the text: at most 520px, never past the
     section's left edge, and never into the copy's column. --phone-axis is the phone's centre line in this
     row: column 1 ends half a gap before the middle, and the phone (300px) is flush with its end. */
  .see-it-transcript {
    --phone-axis:calc(50% - var(--see-it-gap)/2 - 150px);
    grid-column:1/-1;
    justify-self:stretch;
    width:auto;
  }
  .see-it-transcript summary {
    width:300px;
    margin-left:calc(var(--phone-axis) - 150px);
  }
  .transcript-body {
    --half:min(260px,var(--phone-axis),150px + var(--see-it-gap));
    width:calc(var(--half)*2);
    margin-left:calc(var(--phone-axis) - var(--half));
    font-size:14px;
  }
  .transcript-body .transcript-sound {
    font-size:13px;
  }
}

@media(min-width:1600px) {
  .hero {
    grid-template-rows:minmax(687px,auto) auto;
  }
}

@media(min-width:901px) and (max-width:1180px) {
  .hero {
    grid-template-rows:minmax(574px,auto) auto;
  }
}

@media(max-width:900px) {
  .see-it {
    grid-template-columns:minmax(0,1fr);
    row-gap:40px;
    margin-top:56px;
    padding-top:52px;
  }
  .see-it-copy,.see-it-media,.see-it-transcript {
    grid-column:auto;
    grid-row:auto;
  }
  .see-it-media {
    align-items:center;
  }
  .see-it-transcript {
    justify-self:center;
    margin-top:-24px;
  }
  .phone-frame:before {
    inset:-8% 0;
  }
}

@media(max-width:600px) {
  .see-it {
    margin-top:44px;
    padding-top:44px;
    row-gap:32px;
  }
  .see-it .eyebrow {
    font-size:9px;
  }
  /* 45px, less on the narrowest phones, so that at 200% text the longest word ("seconds.", 3.97em) still fits
     the column (width less 2x24px) and lines break only between words: 33px at 320, 38px at 360, 42px at 390,
     45px from about 420. The site-wide overflow-wrap:anywhere stays as the last resort beyond 200%. */
  .see-it h2 {
    font-size:clamp(28px,12.2vw - 6px,45px);
    margin-top:14px;
  }
  .see-it-copy>p:last-child {
    font-size:14px;
    line-height:1.85;
    margin-top:20px;
  }
}

/* In the three-column steps row, the cards share one row height: each step is
   a subgrid of the list's four rows (number, title, text, card), so the titles,
   the texts and the cards line up, and every card stretches to the tallest. */
@media(min-width:601px) {
  @supports (grid-template-rows:subgrid) {
    .steps-grid {
      row-gap:0;
    }
    .steps-grid li {
      display:grid;
      grid-row:span 4;
      grid-template-rows:subgrid;
    }
  }
}

/* From 1260px the note sits in the pocket under the menu paper, just left of the dish panel. Below that, the
   pocket is too narrow: the note would cover the paper's dishes or the panel's "What's In It" chip, so it sits
   just below the picture instead. */
@media(min-width:601px) and (max-width:1259px) {
  .floating-note {
    left:0;
    bottom:-116px;
  }
  .hero-visual {
    margin-bottom:74px;
  }
}

@media(min-width:601px) and (max-width:900px) {
  .hero-visual {
    margin-bottom:80px;
  }
}

/* From 601 to 900px three columns leave each app copy 160-250px wide: the filter chips lose their icons and counts
   (and vanish below 180px), the price drops under the dish name and "Add to My Dislikes" wraps away from its icon.
   So in this band the steps stack, each a row with its text on the left and its app copy, at a readable width, on
   the right. Comes after the three-column subgrid rule above, which it replaces here. */
@media(min-width:601px) and (max-width:900px) {
  .steps-grid {
    grid-template-columns:1fr;
    row-gap:44px;
  }
  .steps-grid li,.steps-grid li:nth-child(n) {
    display:grid;
    grid-row:auto;
    grid-template-columns:minmax(0,1fr) clamp(280px,50%,360px);
    grid-template-rows:auto auto 1fr;
    grid-template-areas:"number mini" "title mini" "text mini";
    column-gap:32px;
  }
  .steps-grid .step-number {
    grid-area:number;
  }
  .steps-grid h3 {
    grid-area:title;
    margin-top:19px;
    font-size:22px;
  }
  .steps-grid li>p {
    grid-area:text;
    min-height:0;
    font-size:13px;
  }
  .steps-grid .step-mini {
    grid-area:mini;
    align-self:start;
    max-width:none;
    margin-top:0;
  }
}

@media(min-width:901px) and (max-width:1180px) {
  /* The scaled picture is too narrow for the note and the caption side by side. */
  .visual-caption {
    bottom:-146px;
  }
  .hero-visual {
    margin-bottom:84px;
  }
}

@media(min-width:1260px) {
  .floating-note {
    left:auto;
    right:358px;
    bottom:6px;
    width:max-content;
  }
}