/* Jiwa Digi Studio — one grid, three colours, two typefaces. */

/* Fonts: self-hosted Latin subsets (SIL Open Font License, see fonts/). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/cormorant-garamond-600.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap;
  src: url(fonts/cormorant-garamond-600-italic.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/manrope-latin.woff2) format("woff2"); }

/* Colours. The page is a day that follows the scroll: cream in the morning at the top, golden in
   the middle, a soft sunset around Packages, charcoal night from "Why Jiwa Digi" to the footer.
   Light sections share one set of text colours, checked for 4.5:1 on every point of the
   cream → sunset gradient (and over the sun's glow); night sections use the dark set. */
:root {
  --day-morning: #F4EEE2; --day-morning2: #F3E8D3; --day-golden1: #F2E0BC; --day-golden: #F0D8AA;
  --day-warm: #EFCBA0; --day-sunset: #ECBC9A; --day-night: #1C1B19;
  --bg: var(--day-morning);
  --ink: #1C1B19;
  --dark: #1C1B19;
  --on-dark: #EDE6D6;
  --accent: #7A5B2D;          /* large text and graphics (3.6:1 or better on every light stop) */
  --accent-ink: #634A26;      /* small text (4.8:1 or better) */
  --accent-on-dark: #C9AE78;  /* anything on dark (8:1) */
  --btn-bg: #1C1B19;
  --btn-fg: #F4EEE2;
  --btn-hover: #634A26;
  --ink-soft: #4D4943;        /* 5.2:1 or better */
  --on-dark-soft: #B7B1A5;
  --error: #8E2A1E;

  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-dark: color-mix(in srgb, var(--on-dark) 20%, transparent);
  --field-line: color-mix(in srgb, var(--ink) 60%, var(--bg));
  --field-bg: color-mix(in srgb, var(--ink) 3%, var(--bg));

  /* Fixed brand colours for the phone mockups (they show the real menus, whatever the page colour). */
  --b-charcoal: #1C1B19;
  --b-cream: #EDE6D6;
  --b-bronze: #8A6A35;
  --b-bronze-ink: #6E5328;
  --b-bronze-light: #C9AE78;
  --b-soft: #52504A;
  --b-line: rgba(28, 27, 25, .16);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 16px;
  --gap: 24px;
  --pad: 36px;               /* section padding, mobile */
  --head-gap: 20px;          /* heading → content */
  --radius: 8px;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --gap: 28px; --pad: 44px; --head-gap: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }
.sprite { position: absolute; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: 1.0625rem; } }
h1, h2, h3, p, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, iframe { display: block; max-width: 100%; }

/* ── Layout ──────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.grid { display: grid; gap: var(--gap); }
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
.section { padding: var(--pad) 0; }
/* The day. main.js paints one continuous gradient down the whole page (.daybg, from the section
   positions): cream → golden → peach → soft rose → deep dusk blue → charcoal, the sunset stretched over
   about a screen. The rose → dusk blend crosses mid-tones only in the empty padding between Packages and
   Why Jiwa Digi, so light text stays on light colours and night text on dark ones (4.5:1 everywhere).
   These per-section strips are the fallback without JS, and the still day with Reduce Motion. */
body { position: relative; }
.daybg { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.has-day .hero::before, .has-day .section::before, .has-day .aside-line::before, .has-day .site-footer::before { display: none; }
/* Text colours ease with the evening: slightly deeper in Packages (its colour deepens to a dusky mauve),
   slightly lighter in Why Jiwa Digi (it starts on a dusk violet), so the light → dark hand-off needs only
   the padding between them. Checked: 4.9:1 or better on every colour each section sits on. */
#packages { --ink: #141312; --ink-soft: #34302A; --accent-ink: #4A3719; --accent: #5E4524; padding-bottom: calc(var(--pad) + 16px); }
/* Phones: night falls just above the add-ons, so they take the night text colours */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .has-day #packages .addons { --ink: var(--on-dark); --ink-soft: var(--on-dark-soft); --accent: var(--accent-on-dark); --accent-ink: var(--accent-on-dark); --line: var(--line-dark); margin-top: 56px; color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  #why { --ink: #F7F4EE; --ink-soft: #D9D4CB; --accent: #DCC392; --accent-ink: #DCC392; padding-top: calc(var(--pad) + 16px); }
}
.hero, .section, .aside-line, .site-footer { position: relative; --from: var(--day-morning); --to: var(--from); }
.hero::before, .section::before, .aside-line::before, .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(var(--from), var(--to));
}
#fix      { --from: var(--day-morning);  --to: var(--day-morning2); }
#work     { --from: var(--day-morning2); --to: var(--day-golden1); }
#style    { --from: var(--day-golden1);  --to: var(--day-golden); }
#features, #how { --from: var(--day-golden); --to: var(--day-golden); --bg: var(--day-golden); }
#packages { --from: var(--day-golden);   --to: var(--day-sunset); }
#why      { --from: var(--day-sunset); }
#why::before { background: linear-gradient(var(--day-sunset), var(--day-night) 40px); }   /* dusk falls in the padding, above any text */
.section-dark, .site-footer { --from: var(--day-night); }
/* Night sections: the dark set of text colours */
.section-dark, .site-header.tone-night {
  --bg: var(--day-night); --ink: var(--on-dark); --ink-soft: var(--on-dark-soft);
  --accent: var(--accent-on-dark); --accent-ink: var(--accent-on-dark);
  --line: var(--line-dark); --btn-bg: var(--accent-on-dark); --btn-fg: var(--dark); --btn-hover: #D1BA8C;
  --field-line: color-mix(in srgb, var(--on-dark) 55%, var(--day-night));
  --field-bg: color-mix(in srgb, var(--on-dark) 5%, var(--day-night));
  --error: #F2A08F;
  color: var(--ink);
}
.section-dark .logo, .site-header.tone-night .logo { --dot: var(--accent-on-dark); color: var(--on-dark); }
/* Reduce Motion: a still day: cream page, the sun in its morning spot, a charcoal footer. */
@media (prefers-reduced-motion: reduce) {
  .hero, .section, .aside-line { --from: var(--day-morning) !important; --to: var(--day-morning) !important; }
  #why::before { background: var(--day-morning); }
  #features, #how { --bg: var(--day-morning); }
  .section-dark:not(.site-footer) {
    --bg: var(--day-morning); --ink: #1C1B19; --ink-soft: #4D4943; --accent: #7A5B2D; --accent-ink: #634A26;
    --line: color-mix(in srgb, #1C1B19 16%, transparent); --btn-bg: #1C1B19; --btn-fg: #F4EEE2; --btn-hover: #634A26;
    --field-line: color-mix(in srgb, #1C1B19 60%, #F4EEE2); --field-bg: color-mix(in srgb, #1C1B19 3%, #F4EEE2); --error: #8E2A1E;
  }
  .section-dark:not(.site-footer) .logo { --dot: #7A5B2D; color: #1C1B19; }
}

/* The sky: fixed, behind everything. GSAP (day.js) scrubs, with the scroll:
   --sp sun 0→1 (morning → sunset) · --sw city windows 0→1 (they light one by one through sunset) ·
   --mp moon 0→1 · --st stars · --end the last screen (the background skyline gives way to the footer city).
   main.js sets --skydark (how dark the page is at the bottom of the screen) so the skyline and its
   windows stay faint on either kind of background. Reduce Motion: everything stays at 0, a still morning. */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none;
  --sp: 0; --sw: 0; --mp: 0; --st: 0; --end: 0; --skydark: 0; --sun-size: 250px; }
@media (min-width: 1024px) { .sky { --sun-size: 360px; } }
@supports (top: calc(sin(30deg) * 1px)) { .sky { display: block; } }
/* a soft horizon haze just above the skyline: warm by day, rose at sunset */
.haze { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; opacity: calc(.55 + var(--sp) * .3 - var(--skydark) * .7);
  background: linear-gradient(to top, rgba(255, 214, 160, .22), rgba(255, 214, 160, .08) 45%, rgba(255, 214, 160, 0)); }
.sun-pos, .moon-pos { position: absolute; inset: 0; will-change: transform; }
/* low on the horizon at the top of the page, high at midday, setting on the right around Packages */
.sun-pos { transform: translate(calc((.07 + var(--sp) * .86) * 100%), calc((.76 - sin(var(--sp) * 180deg) * .6 + pow(var(--sp), 6) * .24) * 100%)); }
.sun { position: absolute; left: 0; top: 0; width: var(--sun-size); height: var(--sun-size);
  margin: calc(var(--sun-size) / -2) 0 0 calc(var(--sun-size) / -2); opacity: clamp(0, (1 - var(--sp)) / .1, 1); }
.sun i { position: absolute; inset: 0; border-radius: 50%; }
.sun-haze { inset: -60% !important; background: radial-gradient(circle closest-side, rgba(255, 206, 140, .16), rgba(255, 206, 140, .06) 50%, rgba(255, 206, 140, 0)); }
.sun-glow { background: radial-gradient(circle closest-side, #FFF0C8 0, #FFE3A6 8%, rgba(255, 212, 132, .78) 15%, rgba(255, 194, 112, .34) 32%, rgba(255, 186, 104, .12) 58%, rgba(255, 186, 104, 0) 100%); }
/* whiter as it rises (strongest at midday) */
.sun-white { opacity: sin(var(--sp) * 180deg);
  background: radial-gradient(circle closest-side, #FFFFFF 0, #FFFDF5 6%, rgba(255, 251, 236, .62) 12%, rgba(255, 248, 230, 0) 30%); }
/* deep orange at sunset (the core stays light, so text over it keeps its contrast) */
.sun-dusk { opacity: clamp(0, (var(--sp) - .55) / .3, 1);
  background: radial-gradient(circle closest-side, #FFC08A 0, #FFB577 7%, rgba(255, 122, 52, .28) 17%, rgba(238, 92, 40, .12) 38%, rgba(238, 92, 40, 0) 100%); }
/* the moon rises up the right edge (the margin beside the text on desktop) and settles above the city */
.moon-pos { transform: translate(84%, calc((.92 - sin(var(--mp) * 90deg) * .42) * 100%)); }
@media (min-width: 1024px) { .moon-pos { transform: translate(94%, calc((.92 - sin(var(--mp) * 90deg) * .56) * 100%)); } }
.moon { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; opacity: clamp(0, var(--mp) * 5, 1);
  background: radial-gradient(circle closest-side, rgba(222, 228, 242, .30), rgba(222, 228, 242, .10) 45%, rgba(222, 228, 242, 0)); }
.moon svg { position: absolute; left: 50px; top: 50px; width: 40px; height: 40px; fill: #F6F4EE; filter: drop-shadow(0 0 6px rgba(226, 232, 246, .55)); }
.stars { position: absolute; inset: 0; opacity: calc(var(--st) * .75); }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #EEF0F6; }
.stars i:nth-child(1) { left: 12%; top: 18%; } .stars i:nth-child(2) { left: 27%; top: 9%; } .stars i:nth-child(3) { left: 44%; top: 22%; }
.stars i:nth-child(4) { left: 58%; top: 12%; } .stars i:nth-child(5) { left: 71%; top: 27%; } .stars i:nth-child(6) { left: 79%; top: 7%; }
.stars i:nth-child(7) { left: 93%; top: 19%; } .stars i:nth-child(8) { left: 35%; top: 31%; width: 1.5px; height: 1.5px; }
/* Manhattan, faint, along the bottom of the screen: an outline by day, windows on through sunset,
   a soft glow at night. Never brighter than text: tiny windows, low opacity. */
/* Daytime: a filled skyline in two layers (the far one paler), real landmark shapes, a faint window grid,
   fading into a soft morning haze at its base. As the windows start to light at sunset it hands over to the
   night skyline below (unchanged), which shows only from then on. Reduce Motion: the still day skyline. */
.skyday { --night: clamp(0, var(--sw) * 4, 1); position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 18vh, 170px);
  opacity: calc((1 - var(--night)) * (1 - var(--end)));
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .2), #000 55%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .2), #000 55%); }
.skyday-svg { display: block; width: 100%; height: 100%; }
.sd-far { fill: #7C8597; opacity: .065; }
.sd-near { fill: #4F4840; opacity: .09; }
.sd-grid { opacity: .035; }
#sdWin rect { fill: #2A2622; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(84px, 14vh, 140px); opacity: calc((1 - var(--end)) * clamp(0, var(--sw) * 4, 1)); }
.skyline-svg { display: block; width: 100%; height: 100%; }
.sl-line { fill: none; stroke: rgba(28, 27, 25, calc(.13 * (1 - var(--skydark)))); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sl-fill { fill: rgba(28, 27, 25, calc(.025 * (1 - var(--skydark)))); }
.has-day .sl-fill { fill: color-mix(in srgb, rgba(28, 27, 25, .03), rgba(205, 214, 240, .05) calc(var(--skydark) * 100%)); }
.sl-win { fill: #FFD58C; opacity: calc(.75 - var(--skydark) * .6); }
.sl-win path { opacity: 0; }
.sl-win path:nth-child(1) { opacity: clamp(0, var(--sw) * 16 - 0, 1); }
.sl-win path:nth-child(2) { opacity: clamp(0, var(--sw) * 16 - 1, 1); }
.sl-win path:nth-child(3) { opacity: clamp(0, var(--sw) * 16 - 2, 1); }
.sl-win path:nth-child(4) { opacity: clamp(0, var(--sw) * 16 - 3, 1); }
.sl-win path:nth-child(5) { opacity: clamp(0, var(--sw) * 16 - 4, 1); }
.sl-win path:nth-child(6) { opacity: clamp(0, var(--sw) * 16 - 5, 1); }
.sl-win path:nth-child(7) { opacity: clamp(0, var(--sw) * 16 - 6, 1); }
.sl-win path:nth-child(8) { opacity: clamp(0, var(--sw) * 16 - 7, 1); }
.sl-win path:nth-child(9) { opacity: clamp(0, var(--sw) * 16 - 8, 1); }
.sl-win path:nth-child(10) { opacity: clamp(0, var(--sw) * 16 - 9, 1); }
.sl-win path:nth-child(11) { opacity: clamp(0, var(--sw) * 16 - 10, 1); }
.sl-win path:nth-child(12) { opacity: clamp(0, var(--sw) * 16 - 11, 1); }
.sl-win path:nth-child(13) { opacity: clamp(0, var(--sw) * 16 - 12, 1); }
.sl-win path:nth-child(14) { opacity: clamp(0, var(--sw) * 16 - 13, 1); }
.sl-win path:nth-child(15) { opacity: clamp(0, var(--sw) * 16 - 14, 1); }
.sl-win path:nth-child(16) { opacity: clamp(0, var(--sw) * 16 - 15, 1); }

/* ── Type ────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font: 600 .8125rem/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 8px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.hero .eyebrow::before { display: none; }
.display {
  font: italic 600 clamp(3.25rem, 9vw, 6.25rem)/.95 var(--serif);
  letter-spacing: -.015em;
}
h2 {
  font: 600 clamp(2rem, 4.4vw, 3.125rem)/1.06 var(--serif);
  letter-spacing: -.01em;
  max-width: 22ch;
}
h3 { font: 600 1.5rem/1.15 var(--serif); }
.accent { color: var(--accent); }
.lede { font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); max-width: 34em; }
@media (min-width: 768px) { .lede { font-size: 1.25rem; } }
.section-head { margin-bottom: var(--head-gap); }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons & focus ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1.5px solid var(--btn-bg); border-radius: 6px;
  font: 600 1rem/1 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .875rem; position: relative; }
.btn-sm::after { content: ""; position: absolute; inset: -3px 0; } /* keeps a 46px tap area */
@media (min-width: 768px) { .btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; } }
.btn-dark { background: var(--btn-bg); color: var(--btn-fg); }
.btn-dark:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn:disabled { opacity: .6; cursor: progress; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.site-footer :focus-visible, .demo-dark :focus-visible { outline-color: var(--accent-on-dark); }
.section-dark :focus-visible { outline-color: var(--accent-ink); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--btn-bg); color: var(--btn-fg); padding: 12px 16px; border-radius: 6px;
}
.skip:focus { top: 12px; }

/* ── Logo ────────────────────────────────────────────────── */
.logo { --dot: var(--accent); color: var(--ink); height: auto; }

/* Section signatures: small line drawings that play once as the section scrolls in */
.sig {
  display: block; width: 140px; height: 64px; margin-bottom: 10px; overflow: visible;
  color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.sig .a { stroke: var(--accent); }
.sig .f, .sig .fill { fill: var(--accent); stroke: none; }
.sig .fill { opacity: .45; }
.sig text { fill: var(--ink-soft); stroke: none; font: italic 600 10px var(--serif); }
.sig [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sig .busy { opacity: 0; }
.sig .finger { transform: translate(98px, 40px); }
.sig .tap, .sig .ripple-e { opacity: 0; }
.sig .pin { transform: translate(66px, 38px); }
.sig .lines, .sig .tool, .sig .fill, .sig .ripple-e, .sig .tap { transform-box: fill-box; }
.sig .lines { transform-origin: left center; }
.sig .fill { transform-origin: bottom center; }
.sig .ripple-e, .sig .tap { transform-origin: center; }

/* ── 1. Header: a sticky bar ─────────────────────────────── */
:root { --header-h: 88px; }
@media (min-width: 768px) { :root { --header-h: 102px; } }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--hdr-bg, var(--bg));
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(28, 27, 25, .35); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--header-h); padding-top: 0; padding-bottom: 0;
}
.brand { display: block; padding: 4px 0; flex: none; }
.brand .logo { width: 172px; }
.nav { display: flex; align-items: center; gap: 8px; }
.nav-links { display: none; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.nav-links a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 6px; }
.cta-free { display: none; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin-right: -6px;
  background: transparent; color: var(--ink); border: 0; border-radius: 8px; cursor: pointer;
}
.menu-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-btn .mb-close { display: none; }
.menu-open .menu-btn .mb-open { display: none; }
.menu-open .menu-btn .mb-close { display: inline; }
.menu-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--hdr-bg, var(--bg)); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px -20px rgba(28, 27, 25, .4);
}
.menu-panel[hidden] { display: none; }
.menu-panel ul { padding-top: 8px; padding-bottom: 16px; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a {
  display: flex; align-items: center; min-height: 56px;
  font: 600 1.5rem/1.2 var(--serif); text-decoration: none;
}
.menu-panel a:hover { color: var(--accent-ink); }
@media (max-width: 370px) { .brand .logo { width: 140px; } }
@media (min-width: 768px) { .brand .logo { width: 210px; } .cta-free { display: inline; } }
@media (min-width: 1024px) {
  .nav-links { display: flex; margin-right: 4px; }
  .menu-btn, .menu-panel { display: none !important; }
}

/* ── 2. Hero ─────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 16px 0 var(--pad); }
.hero > .wrap { z-index: 1; }
/* Tap ripples (added by main.js; none with Reduce Motion) */
.ripples { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.ripple {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0;
}
.ripple-soft { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-width: 1px; }
.hero-text .display { margin-bottom: 16px; }
.hero-text .lede { margin-bottom: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.w { display: inline-block; }

/* Phones and tablets: the headline on the left, the tap card and phone on the right; the subline, the tap
   line and both buttons full width underneath */
@media (max-width: 1023px) {
  .hero .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 0;
    grid-template-areas: "eb st" "ti st" "le le" "ca ca" "ac ac"; grid-template-rows: 1fr 1fr auto auto auto; }
  .hero-text, .hero-hook { display: contents; }
  .hero .eyebrow { grid-area: eb; align-self: end; margin-bottom: 10px; }
  .hero .display { grid-area: ti; align-self: start; font-size: clamp(2.25rem, 11.6vw, 4.5rem); margin-bottom: 0; text-wrap: balance; }
  .hero .hook-stage { grid-area: st; }
  .hero-text .lede { grid-area: le; margin: 14px 0 0; }
  .hook-caps { grid-area: ca; margin: 0 0 6px; }
  .hero .actions { grid-area: ac; }
  .hero .actions .btn { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
  .hero { padding-top: 20px; }
  /* the text, with the tap caption under the buttons, is centred beside the card and phone */
  .hero .grid { grid-template-areas: ". st" "tx st" "ca st" ". st"; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
  .hero-hook { display: contents; }
  .hero-text { grid-area: tx; }
  .hero .hook-stage { grid-area: st; }
  .hook-caps { grid-area: ca; margin-top: 18px; }
  .hero .display { font-size: min(6.5rem, 7.2vw); white-space: nowrap; }   /* one line */
  .hero-text .lede { font-size: 1.5rem; margin-bottom: 28px; }
  .hero .actions .btn { min-height: 56px; padding: 0 30px; font-size: 1.125rem; }
}

/* The tap demo: a matte card and an iPhone-style phone sit right on the page with soft shadows. The phone
   comes in on its lock screen, its top edge taps the card, the NFC banner drops, the menu opens at once,
   "Food menu" is tapped and the real dish list scrolls. Container units scale the whole scene. */

.hook-stage {
  --card-w: 42cqw; --card-h: calc(var(--card-w) * .6296); --card-top: 6px; --gap: 2cqh;
  --ph-w: min(40cqw, calc((100cqh - var(--card-top) - var(--card-h) - var(--gap) - 14px) / 2.1667));   /* the whole phone fits, with room for its shadow */
  --u: calc(var(--ph-w) / 100);
  position: relative; display: block; width: 100%;
  height: 330px; container-type: size;
}
@media (max-width: 1023px) { .hook-stage { --card-w: 88cqw; --card-top: 4px; --gap: 3cqh; --ph-w: min(64cqw, calc((100cqh - var(--card-top) - var(--card-h) - var(--gap) - 14px) / 2.1667)); } }
@media (min-width: 1024px) { .hook-stage {
  --card-w: 56cqw; --card-top: 2.6cqh;
  height: min(560px, calc(100vh - var(--header-h) - 130px));
} }
/* Card: matte black, logo in bronze foil, a soft shadow on the table */
.hook-card {
  position: absolute; left: 50%; top: var(--card-top); z-index: 1;
  width: var(--card-w); height: var(--card-h); padding: 0; margin: 0;
  background: linear-gradient(150deg, #22201E, #141312 70%); color: #C9A66B;
  border: 0; border-radius: 12px; font: inherit; text-decoration: none;
  transform: translateX(-50%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 1px 2px rgba(28, 27, 25, .28), 0 6px 12px -4px rgba(28, 27, 25, .26), 0 22px 36px -14px rgba(28, 27, 25, .42);
}
.hook-card .logo {
  --dot: #E2C48C; color: #C9A66B; position: absolute; left: 8%; top: 14%; width: 46%;
  filter: drop-shadow(0 .6px 0 rgba(255, 236, 200, .28)) drop-shadow(0 -.6px 0 rgba(0, 0, 0, .55));
}
/* A real QR for the live demo in the corner: a third of the card's height, 2-module quiet zone.
   On desktop it is exactly 2px a module (66px), so it scans from a laptop screen. */
.hook-qr { position: absolute; right: 7%; top: 12%; width: calc(var(--card-w) * .3); aspect-ratio: 1; border-radius: 3px; overflow: hidden; }
@media (min-width: 1024px) { .hook-qr { width: 66px; } }   /* desktop: exactly 2px a module, so it scans from a laptop (phones: for looks) */
.hook-qr svg { display: block; width: 100%; height: 100%; }
.hook-card .nfc { position: absolute; left: 50%; bottom: 10%; width: calc(var(--card-w) * .08); height: auto; aspect-ratio: 1; transform: translateX(-50%) rotate(90deg); color: #C9A66B; }
@media (max-width: 1023px) { .hook-card .nfc { left: auto; right: 9%; transform: rotate(90deg); } }
.hook-card-label { position: absolute; left: 8%; bottom: 12%; font: 600 max(8px, calc(var(--card-w) * .03))/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #B89660; }
/* Phone: iPhone-style, thin bezel, a small island, side buttons, a soft glass reflection */
.hook-phone {
  position: absolute; left: 50%; z-index: 2;
  top: calc(var(--card-top) + var(--card-h) + var(--gap));
  width: var(--ph-w); aspect-ratio: 9 / 19.5; padding: calc(var(--u) * 2.6);
  background: linear-gradient(135deg, #48484A, #1F1F21 30%, #2C2C2E 70%, #47474A);
  border-radius: calc(var(--u) * 15);
  transform: translateX(-50%); transform-origin: 50% 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55) inset, 0 1px 2px rgba(28, 27, 25, .3), 0 10px 18px -6px rgba(28, 27, 25, .3), 0 30px 50px -18px rgba(28, 27, 25, .45);
}
.hook-phone::before, .hook-phone::after { content: ""; position: absolute; width: calc(var(--u) * 1.4); border-radius: 2px; background: #38383A; }
.hook-phone::before { left: calc(var(--u) * -1.1); top: 21%; height: 6%; box-shadow: 0 calc(var(--u) * 16) 0 #38383A; }
.hook-phone::after { right: calc(var(--u) * -1.1); top: 27%; height: 10%; }
.hook-screen { position: relative; display: block; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 12.6); background: #0E0D0C; font-size: calc(var(--u) * 4.6); line-height: 1.35; }
.hs-home { position: absolute; top: calc(var(--u) * 12); left: 0; width: 100%; height: auto; }   /* below the status bar and island */
.hs-island { position: absolute; left: 50%; top: calc(var(--u) * 3); width: 31%; height: calc(var(--u) * 8.4); margin-left: -15.5%; border-radius: 999px; background: #000; z-index: 6; }
.hs-glass { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 42%); }
/* Lock screen: a soft dusk wallpaper, the date and a large clock (main.js sets the visitor's time) */
.hs-lock { position: absolute; inset: 0; z-index: 3; opacity: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 20); color: #FFFDF8;
  background: radial-gradient(70% 45% at 22% 88%, rgba(240, 176, 128, .95), transparent 70%), radial-gradient(80% 55% at 90% 42%, rgba(150, 118, 170, .9), transparent 70%), linear-gradient(172deg, #2E3358 0%, #5E4A78 48%, #C98F7C 100%); }
.hl-date { font-size: calc(var(--u) * 4.4); font-weight: 600; opacity: .9; }
.hl-time { font: 600 calc(var(--u) * 24)/1 var(--sans); letter-spacing: -.03em; }
.hl-btn { position: absolute; left: 12%; bottom: calc(var(--u) * 9); width: calc(var(--u) * 11); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.hl-btn.hl-r { left: auto; right: 12%; }
.hs-banner {
  position: absolute; z-index: 4; left: 4%; right: 4%; top: calc(var(--u) * 14);
  display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3.2) calc(var(--u) * 3.6);
  background: rgba(246, 243, 236, .94); color: #1C1B19; border-radius: calc(var(--u) * 6);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-160%);
}
.hs-icon { flex: none; display: grid; place-items: center; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 2.4); background: #1C1B19; color: #C9AE78; }
.hs-icon svg { width: 62%; height: 62%; }
.hs-btext { display: flex; flex-direction: column; min-width: 0; }
.hs-btext b { font-size: calc(var(--u) * 4.6); font-weight: 700; }
.hs-btext span { font-size: calc(var(--u) * 3.7); color: #55524C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-tap { position: absolute; z-index: 2; left: 26%; top: calc(var(--u) * 123.7);   /* on "Food menu" (54.5% down the screenshot) */ width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin: calc(var(--u) * -8) 0 0 calc(var(--u) * -8);
  border-radius: 50%; background: rgba(237, 230, 214, .55); opacity: 0; }
/* The real Food menu (Everest Kitchen), in the demo's dark look */
.hs-list { position: absolute; inset: 0; z-index: 1; background: #171614; color: #EDE6D6; overflow: hidden; }
.hs-bar, .hs-tabs { position: relative; z-index: 1; background: #171614; }
.hs-bar { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 14) calc(var(--u) * 6) calc(var(--u) * 3); }
.hs-bar span { font-size: calc(var(--u) * 3.8); color: #C9AE78; font-weight: 600; }
.hs-bar b { font: 600 calc(var(--u) * 9)/1 var(--serif); }
.hs-tabs { display: flex; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 6) calc(var(--u) * 3); white-space: nowrap; overflow: hidden; border-bottom: 1px solid rgba(237, 230, 214, .14); }
.hs-tabs i { font-style: normal; font-size: calc(var(--u) * 3.6); font-weight: 600; padding: calc(var(--u) * 1.2) calc(var(--u) * 3); border: 1px solid rgba(237, 230, 214, .3); border-radius: 999px; color: #D6CFC1; }
.hs-tabs i.on { background: #C9AE78; border-color: #C9AE78; color: #1C1B19; }
.hs-scroll { padding: 0 calc(var(--u) * 6); }
.hs-cat { margin: calc(var(--u) * 4.5) 0 calc(var(--u) * 1); font-size: calc(var(--u) * 3.4); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #C9AE78; }
.hs-scroll li { display: grid; grid-template-columns: 1fr auto; column-gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) 0; border-bottom: 1px solid rgba(237, 230, 214, .12); }
.hs-name { font: 600 calc(var(--u) * 6)/1.15 var(--serif); }
.hs-badge { display: inline-block; margin-left: calc(var(--u) * 1.6); padding: 0 calc(var(--u) * 1.6); font: 700 calc(var(--u) * 2.8)/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #1C1B19; background: #C9AE78; border-radius: 3px; vertical-align: calc(var(--u) * .8); }
.hs-price { font-size: calc(var(--u) * 3.8); font-weight: 600; color: #C9AE78; white-space: nowrap; }
.hs-desc { grid-column: 1 / -1; margin-top: calc(var(--u) * .8); font-size: calc(var(--u) * 3.6); color: #B7B1A5; }
.hook-ring {
  position: absolute; left: 50%; top: calc(var(--card-top) + var(--card-h)); z-index: 3;
  width: 20cqh; height: 20cqh; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--accent); opacity: 0; transform: translate(-50%, -50%);
}
.hook-stage, .fix-phone, .demo-phone, .style-phone { -webkit-user-select: none; user-select: none; }
.hook-caps { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 8px; }
.hook-line { font: italic 600 1.25rem/1.3 var(--serif); }
.hook-laptop { display: none; }
@media (min-width: 1024px) { .hook-laptop { display: block; flex-basis: 100%; order: 3; font-size: .875rem; color: var(--ink-soft); } }
.hook-cap { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9375rem; color: var(--accent-ink); text-decoration: none; }
.hook-cap:hover { text-decoration: underline; text-underline-offset: 5px; }

.phone-screen {
  width: 100%; height: 100%;
  overflow: hidden; border-radius: 32px;
  background: #F6F1E7;
}

/* ── 3. What we fix: pinned phone, six problems ──────────── */
/* Phones: text column on the left (46%), a big pinned phone on the right (58% of the screen
   width) that bleeds about 12% off the right edge. The section clips it, so the page never
   scrolls sideways (overflow-x: clip keeps the sticky phone working). */
#fix { overflow-x: clip; }
.fix-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.fix-head { grid-column: 1 / -1; grid-row: 1; }
.problems { grid-column: 1; grid-row: 2; }
.fix-pin {
  grid-column: 2; grid-row: 2; align-self: start; justify-self: end;
  position: sticky; z-index: 2;
  top: calc(var(--header-h) + (100vh - var(--header-h) - 330px) / 2);
}
/* One fixed, realistic phone (the hero's design: thin bezel, island, side buttons, glass) at real
   proportions (9:19.5), the same size for all six problems; only the screen changes. 300px wide at
   --fz 1: phones show it at about half the screen width, fully on screen; desktop about 20% bigger. */
.fix-layout { --fz: .62; }
/* Phones: the phone's middle sits on the centre of the screen, where main.js switches its screen as each
   problem crosses it. dvh follows iPhone Safari's toolbar. */
.fix-pin { top: max(var(--header-h), 50vh - 325px * var(--fz)); }
@supports (height: 100dvh) { .fix-pin { top: max(var(--header-h), 50dvh - 325px * var(--fz)); } }
.fix-phone {
  position: relative; width: 300px; aspect-ratio: 9 / 19.5; padding: 8px;
  background: linear-gradient(135deg, #48484A, #1F1F21 30%, #2C2C2E 70%, #47474A); border-radius: 46px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55) inset, 0 30px 60px -30px rgba(28, 27, 25, .55);
  zoom: var(--fz);
}
@media (min-width: 600px) { .fix-layout { --fz: .8; } }
.fix-phone::before, .fix-phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #38383A; }
.fix-phone::before { left: -3px; top: 21%; height: 6%; box-shadow: 0 48px 0 #38383A; }
.fix-phone::after { right: -3px; top: 27%; height: 10%; }
.fp-island { position: absolute; left: 50%; top: 9px; width: 31%; height: 25px; margin-left: -15.5%; border-radius: 999px; background: #000; z-index: 3; }
.fp-glass { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 42%); }
.fix-phone .phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: var(--b-cream); }
.fix-phone .screen { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.fix-phone .screen.is-active { opacity: 1; }
.fix-phone .s-bar { padding-top: 44px; }   /* below the status bar and island */
.s-flash { border-radius: 6px; box-shadow: 0 0 0 3px rgba(138, 106, 53, .45); background-color: rgba(201, 174, 120, .22); }
.s-pair { display: flex; justify-content: space-between; gap: 10px; color: var(--b-soft); font-size: 12px; }
.s-pair b { display: block; color: var(--b-charcoal); font: 600 16px/1.2 var(--serif); }
.s-pair span:last-child { font-weight: 600; color: var(--b-charcoal); }
.s-btn-line { margin-top: 0; background: transparent; color: var(--b-charcoal); border: 1px solid var(--b-charcoal); }

.problem { padding: 28px 0; }   /* as tall as its content */
.num { display: block; font: italic 600 1.125rem/1 var(--serif); color: var(--accent-ink); margin-bottom: 10px; }
.problem h3 { font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.problem > p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.p-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p-pill { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font: 600 .75rem/1.2 var(--sans); color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); text-align: left; }
.p-pill:hover { border-color: var(--ink-soft); }
.p-pill { position: relative; }
.p-pill::after { content: ""; position: absolute; inset: -6px -3px; }   /* 44px tap area */
@media (min-width: 600px) { .problem h3 { font-size: 1.75rem; } .problem > p { font-size: 1rem; } }

@media (min-width: 1024px) and (max-height: 899px) { .fix-layout { --fz: 1.06 !important; } }
@media (min-width: 1024px) and (max-height: 799px) { .fix-layout { --fz: .92 !important; } }
@media (min-width: 1024px) {
  .fix-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  /* A full-height pinned box centres the phone, whatever the height of the current screen, so each
     problem's text sits level with the middle of the phone. */
  .fix-layout { --fz: 1.2; }   /* 360px wide */
  .fix-pin {
    grid-column: 8 / span 5; grid-row: 1 / span 2; justify-self: center; margin-right: 0;
    top: var(--header-h); height: calc(100vh - var(--header-h));
    display: flex; align-items: center;
  }
  @supports (height: 100dvh) { .fix-pin { height: calc(100dvh - var(--header-h)); } }
  .fix-head { grid-column: 1 / span 6; margin: 0; }
  .problems { grid-column: 1 / span 6; }
  .problem { padding: 44px 0; }
  .problem::before { content: ""; display: block; width: 48px; border-top: 1px solid var(--ink); margin-bottom: 16px; }
  .problem h3 { font-size: 2.5rem; margin-bottom: 10px; }
  .problem > p { font-size: 1.25rem; max-width: 30em; }
  .p-chips { gap: 8px; margin-top: 18px; }
  .p-pill { min-height: 40px; padding: 7px 14px; font-size: .9375rem; }
}

/* Screen contents (static HTML, in the brand look) */
.screen { background: var(--b-cream); color: var(--b-charcoal); font-size: 13px; line-height: 1.45; }
.screen-cafe { background: #F8F3EA; }
.s-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 18px 12px; border-bottom: 1px solid var(--b-line);
  font-size: 11px; font-weight: 600;
}
.s-back { color: var(--b-bronze-ink); }
.s-brand { font: 600 15px/1 var(--serif); }
.s-lang { padding: 3px 9px; border: 1px solid var(--b-charcoal); border-radius: 999px; font-size: 11px; }
.s-langs {
  position: absolute; top: 46px; right: 12px; z-index: 1; width: 150px;
  padding: 6px; background: #FBF8F1; border: 1px solid var(--b-line); border-radius: 10px;
  box-shadow: 0 14px 30px -12px rgba(28, 27, 25, .4);
}
.s-langs li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.s-langs li.on { background: var(--b-charcoal); color: var(--b-cream); font-weight: 600; }
.s-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.s-kicker { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--b-bronze-ink); }
.s-title { font: 600 28px/1.05 var(--serif); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.s-price { font: 600 13px/1 var(--sans); }
.s-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--b-soft); margin-top: 4px; }
.s-text { color: var(--b-soft); }
.s-text b { color: var(--b-charcoal); }
.s-row { display: flex; align-items: center; gap: 10px; }
.s-row .s-label { margin: 0; }
.s-spice { display: inline-flex; gap: 4px; }
.s-spice i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--b-bronze); }
.s-spice i.on { background: var(--b-bronze); }
.s-note { font-size: 12px; color: var(--b-soft); }
.s-btn {
  margin-top: 6px; display: flex; justify-content: center; align-items: center; height: 40px;
  background: var(--b-charcoal); color: var(--b-cream); border-radius: 6px; font-weight: 600;
}
.s-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s-chip { padding: 6px 11px; border: 1px solid rgba(28, 27, 25, .6); border-radius: 999px; font-size: 12px; font-weight: 600; }
.s-chip.on { background: var(--b-charcoal); border-color: var(--b-charcoal); color: var(--b-cream); }
.s-chips-plain .s-chip { padding: 4px 9px; font-weight: 500; border-color: var(--b-line); }
.s-hidden { font-size: 12px; color: var(--b-bronze-ink); font-weight: 600; }
.s-list li { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--b-line); }
.s-list li span:first-child { font: 600 17px/1.2 var(--serif); }
.s-list li span:last-child { font-weight: 600; }
.s-list .sold span { color: var(--b-soft); }
.s-list .sold span:last-child { text-decoration: line-through; }
.s-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px; vertical-align: 2px;
  font: 600 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  background: var(--b-charcoal); color: var(--b-cream); border-radius: 4px;
}
.s-toast { padding: 9px 12px; background: var(--b-charcoal); color: var(--b-cream); border-radius: 8px; font-size: 12px; font-weight: 600; }
.s-signed { font-size: 11px; color: var(--b-soft); }
.s-desc { margin-top: -4px; color: var(--b-soft); font-size: 12px; }
.s-cat { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--b-bronze-ink); margin-top: 6px; }
.s-list + .s-hidden { margin-top: -4px; }

/* ── 4. See it working ───────────────────────────────────── */
.demos { display: grid; gap: var(--gap); }
@media (min-width: 768px) { .demos { grid-template-columns: 1fr 1fr; } }
.demo {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 240px; padding: 22px 118px 20px 24px;
  border-radius: var(--radius);
}
@media (min-width: 1024px) { .demo { padding: 26px 172px 24px 28px; } }
.demo h3 { font-size: clamp(2rem, 3.4vw, 2.5rem); margin-bottom: 8px; }
.demo p:not(.demo-kind) { max-width: 26em; margin-bottom: 16px; }
.demo-kind { font: 600 .75rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.demo-phone {
  position: absolute; right: 18px; bottom: -70px; width: 88px;
  border: 6px solid var(--b-charcoal); border-radius: 20px;
  overflow: hidden; background: var(--b-charcoal);
}
@media (min-width: 1024px) { .demo-phone { width: 136px; right: 28px; bottom: -96px; border-width: 7px; } }
.demo-phone img { width: 100%; height: auto; border-radius: 14px; }
.demo-dark .demo-phone { border-color: #4A4743; background: #4A4743; }
.demo-link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.demo-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* whole card clicks */
.demo:hover .demo-link { text-decoration-thickness: 2px; }
.demo-dark { background: var(--dark); color: var(--on-dark); }
.demo-dark .demo-kind, .demo-dark .demo-link { color: var(--accent-on-dark); }
.demo-dark p:not(.demo-kind) { color: var(--on-dark-soft); }
.demo-light { background: transparent; border: 1px solid var(--ink); }
.demo-light .demo-kind, .demo-light .demo-link { color: var(--accent-ink); }
.demo-light p:not(.demo-kind) { color: var(--ink-soft); }

/* ── Your style, your colours ─────────────────────────────── */
.style-intro { margin-top: 10px; color: var(--ink-soft); max-width: 34em; }
.style-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap); }
.style-demo { display: flex; justify-content: center; margin-bottom: 18px; }
@media (min-width: 960px) {
  .style-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .style-head { grid-column: 1 / span 7; grid-row: 1; }
  .style-controls { grid-column: 1 / span 7; grid-row: 2; }
  .style-demo { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: center; margin: 0; }
}
.ctl-label { display: block; margin-bottom: 8px; font: 600 .75rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* Looks: a swipeable row on phones, one neat row on desktop */
.looks {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)) 16px; padding: 2px var(--gutter) 6px;
  scroll-padding-inline: var(--gutter); scrollbar-width: thin;
}
@media (min-width: 960px) {
  .looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0 0 16px; padding: 2px 0; }
}
.look {
  --lk-bg: #F6F1E7; --lk-ink: #1C1B19; --lk-acc: #8A6A35;
  flex: none; width: 104px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px; padding: 8px;
  background: transparent; color: var(--ink); text-align: left;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  font: 600 .8125rem/1.25 var(--sans);
}
@media (min-width: 960px) { .look { width: auto; } }
.look:hover { border-color: var(--ink-soft); }
.look[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.look-sw {
  position: relative; display: block; width: 100%; height: 52px; border-radius: 6px;
  background: var(--lk-bg); border: 1px solid rgba(0, 0, 0, .08); overflow: hidden;
}
.look-sw i { position: absolute; left: 8px; border-radius: 2px; }
.look-sw i:nth-child(1) { top: 9px; width: 60%; height: 7px; background: var(--lk-ink); }
.look-sw i:nth-child(2) { top: 21px; width: 38%; height: 5px; background: var(--lk-ink); opacity: .45; }
.look-sw i:nth-child(3) { bottom: 8px; width: calc(100% - 16px); height: 10px; background: var(--lk-acc); border-radius: 3px; }
.look[data-set-style="night"]   { --lk-bg: #1C1B19; --lk-ink: #EDE6D6; --lk-acc: #C9AE78; }
.look[data-set-style="sunday"]  { --lk-bg: #FAF4EA; --lk-ink: #2E2B26; --lk-acc: #4E6B47; }
.look[data-set-style="bistro"]  { --lk-bg: #FFFFFF; --lk-ink: #111111; --lk-acc: #111111; }
.look[data-set-style="garden"]  { --lk-bg: #EEF2EA; --lk-ink: #1E2B22; --lk-acc: #3F6B3A; }
.look[data-set-style="saffron"] { --lk-bg: #FFF7EC; --lk-ink: #2A1E14; --lk-acc: #A85A12; }
.look-own { --lk-bg: #FBF8F2; border-style: dashed; }
.look-more { text-decoration: none; border-style: dashed; }
.look-more .look-sw { display: flex; align-items: center; justify-content: center; background: transparent; border: 1px dashed var(--line); }
.look-plus { font: 300 2rem/1 var(--sans); color: var(--ink-soft); }
.look-more:hover .look-plus { color: var(--ink); }

/* Your colours: native picker + quick swatches */
.own { margin-bottom: 16px; }
.own-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.own-input { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; cursor: pointer; font-size: .875rem; font-weight: 600; }
.own-input input {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--ink);
  padding: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; overflow: hidden; }
.own-input input::-webkit-color-swatch-wrapper { padding: 3px; }
.own-input input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.own-input input::-moz-color-swatch { border: 0; border-radius: 50%; }
.own-sw { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.own-sw:hover { box-shadow: 0 0 0 1px var(--ink); }
.own-sw[data-color="#8A6A35"] { background: #8A6A35; }
.own-sw[data-color="#B5552F"] { background: #B5552F; }
.own-sw[data-color="#C2761F"] { background: #C2761F; }
.own-sw[data-color="#6B7F4E"] { background: #6B7F4E; }
.own-sw[data-color="#3B4A8C"] { background: #3B4A8C; }
.own-sw[data-color="#7A3B5E"] { background: #7A3B5E; }

/* Motion: four options; each sets the strength of the look's signature animation */
.motion-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.motion-opts button {
  min-height: 44px; padding: 0 16px; cursor: pointer;
  font: 600 .875rem/1 var(--sans); color: var(--ink);
  background: transparent; border: 1px solid var(--ink); border-radius: 999px;
}
.motion-opts button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.style-phone[data-motion="calm"]      { --amp: .15; --sp-dur: .35s; --sp-dist: 3px;  --sp-stagger: 0s;    --sp-zoom: 1.005; }
.style-phone[data-motion="gentle"]    { --amp: .4;  --sp-dur: .6s;  --sp-dist: 8px;  --sp-stagger: .05s;  --sp-zoom: 1.02; }
.style-phone[data-motion="lively"]    { --amp: .7;  --sp-dur: .85s; --sp-dist: 13px; --sp-stagger: .09s;  --sp-zoom: 1.04; }
.style-phone[data-motion="cinematic"] { --amp: 1;   --sp-dur: 1.15s; --sp-dist: 20px; --sp-stagger: .14s; --sp-zoom: 1.06; }
/* Band decor: one signature scene per look */
.sp-band { position: relative; overflow: hidden; }
.sp-decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-decor > g { display: none; }
.style-phone[data-style="classic"] .d-classic, .style-phone[data-style="night"] .d-night,
.style-phone[data-style="sunday"] .d-sunday, .style-phone[data-style="bistro"] .d-bistro,
.style-phone[data-style="garden"] .d-garden, .style-phone[data-style="saffron"] .d-saffron { display: inline; }
.flag, .leaf, .flame, .steam, .scatter, .glowc { transform-box: fill-box; }
.flag { transform-origin: top center; }
.flame { transform-origin: bottom center; }
.scatter { transform-origin: center; }
.style-note { font-size: .875rem; color: var(--ink-soft); }
.style-note + .style-note { margin-top: 2px; }

.style-phone {
  --sp-bg: #F6F1E7; --sp-ink: #1C1B19; --sp-soft: #52504A; --sp-accent: #6E5328; --sp-band: #E2D6BE;
  --sp-btn: #1C1B19; --sp-btn-fg: #F6F1E7; --sp-title: italic 600 32px/1 var(--serif);
  --sp-name: 600 15px/1 var(--serif); --sp-kicker-ls: .16em; --sp-pad: 18px;
  width: 270px; padding: 10px;
  background: #121212; border-radius: 40px;
  box-shadow: 0 30px 60px -30px rgba(28, 27, 25, .55);
}
.sp-screen { overflow: hidden; border-radius: 30px; background: var(--sp-bg); color: var(--sp-ink); font-size: 13px; line-height: 1.45; }
.sp-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--sp-pad) 12px; }
.sp-name { font: var(--sp-name); }
.sp-menu { font-size: 11px; font-weight: 600; color: var(--sp-soft); }
.sp-band { height: 120px; margin: 0 12px; border-radius: 14px; background: var(--sp-band); }
.sp-body { padding: 18px var(--sp-pad) 22px; display: flex; flex-direction: column; gap: 10px; }
.sp-kicker { font-size: 10px; font-weight: 600; letter-spacing: var(--sp-kicker-ls); text-transform: uppercase; color: var(--sp-accent); }
.sp-title { font: var(--sp-title); color: var(--sp-head, var(--sp-ink)); }
.sp-desc { color: var(--sp-soft); font-size: 12px; }
.sp-story { color: var(--sp-soft); }
.sp-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sp-soft); }
.sp-spice { display: inline-flex; gap: 4px; }
.sp-spice i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sp-accent); }
.sp-spice i.on { background: var(--sp-accent); }
.sp-price { margin-left: auto; font-weight: 700; color: var(--sp-ink); font-size: 14px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { padding: 4px 10px; border: 1px solid var(--sp-chip-line, var(--sp-soft)); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--sp-ink); }
.sp-chip.on { background: var(--sp-btn); border-color: var(--sp-btn); color: var(--sp-btn-fg); }
.style-phone[data-style="custom"] .d-classic { display: inline; }
.sp-btn { margin-top: 4px; display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 8px; background: var(--sp-btn); color: var(--sp-btn-fg); font-weight: 600; }

.style-phone[data-style="night"] {
  --sp-bg: #1C1B19; --sp-ink: #EDE6D6; --sp-soft: #B7B1A5; --sp-accent: #C9AE78; --sp-band: #2E2B27;
  --sp-btn: #C9AE78; --sp-btn-fg: #1C1B19; --sp-title: 600 32px/1 var(--serif);
}
.style-phone[data-style="sunday"] {
  --sp-bg: #FAF4EA; --sp-ink: #2E2B26; --sp-soft: #5F5A52; --sp-accent: #4E6B47; --sp-band: #E8D9BF;
  --sp-btn: #4E6B47; --sp-btn-fg: #FAF4EA; --sp-title: 600 26px/1.1 var(--sans);
  --sp-name: 600 14px/1 var(--sans); --sp-kicker-ls: .08em; --sp-pad: 22px;
}
.style-phone[data-style="sunday"] .sp-band { border-radius: 999px 999px 14px 14px; }
.style-phone[data-style="sunday"] .sp-btn { border-radius: 999px; }
.style-phone[data-style="bistro"] {
  --sp-bg: #FFFFFF; --sp-ink: #111111; --sp-soft: #4A4A4A; --sp-accent: #111111; --sp-band: #111111;
  --sp-btn: #111111; --sp-btn-fg: #FFFFFF; --sp-title: 600 24px/1.1 var(--serif);
  --sp-name: 600 12px/1 var(--sans); --sp-kicker-ls: .22em;
}
.style-phone[data-style="garden"] {
  --sp-bg: #EEF2EA; --sp-ink: #1E2B22; --sp-soft: #4A5A4E; --sp-accent: #3F6B3A; --sp-band: #D3DFCC;
  --sp-btn: #2F5530; --sp-btn-fg: #F4F7F1; --sp-head: #2F5530; --sp-title: 600 30px/1 var(--serif);
}
.style-phone[data-style="saffron"] {
  --sp-bg: #FFF7EC; --sp-ink: #2A1E14; --sp-soft: #5E4C3B; --sp-accent: #A0550F; --sp-band: #F5D8A6;
  --sp-btn: #A0550F; --sp-btn-fg: #FFFFFF; --sp-head: #7A3F09; --sp-title: italic 600 32px/1 var(--serif);
}
.style-phone[data-style="custom"] { --sp-title: 600 30px/1 var(--serif); }
.style-phone[data-style="bistro"] .sp-name { letter-spacing: .24em; text-transform: uppercase; }
.style-phone[data-style="bistro"] .sp-title { text-transform: uppercase; letter-spacing: .1em; }
.style-phone[data-style="bistro"] .sp-kicker { text-decoration: underline; text-underline-offset: 4px; }
.style-phone[data-style="bistro"] .sp-band { border-radius: 0; margin: 0; }
.style-phone[data-style="bistro"] .sp-btn { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }

/* ── Everything it can do ────────────────────────────────── */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); }
@media (min-width: 768px) { .features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 16 items: four even rows */
.features li {
  display: flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 8px 0; border-top: 1px solid var(--line);
  font-weight: 600; font-size: .9375rem; line-height: 1.3;
}
.ico { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── 5. How it works: the kitchen ────────────────────────── */
/* Each step is as tall as its content. cook.js plays a step's part of the cooking as the step crosses the
   centre of the screen (phones: the centre of the space under the kitchen).
   Desktop: steps on the left, the kitchen on the right, sticky within this section.
   Phones: the kitchen is pinned full width at the top (below the header), drawn closer up so the range
   fills about 90% of the width, and the steps scroll underneath it. Nothing is trapped. */
.cook-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.cook-pin { aspect-ratio: 520 / 340; }   /* space kept for the scene, which loads just after the page */
.cook { display: block; width: 100%; height: 100%; }
.ck-hole { fill: var(--bg); }
.ck-steam { fill: none; stroke: var(--ink-soft); stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; }
.ck-edge { fill: none; stroke: transparent; }
.ck-tg { transform-box: fill-box; }
#ck-pour { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ck-shelf { display: none; }
.cook-steps { counter-reset: step; display: grid; }
.cook-steps li { counter-increment: step; border-top: 2px solid var(--line); padding: 18px 0 22px; transition: border-color .3s ease; }
.cook-steps h3 { font-size: 1.375rem; margin-bottom: 4px; transition: color .3s ease; }
.cook-steps h3::before { content: counter(step); display: inline-block; min-width: 1.2em; font-style: italic; color: var(--accent-ink); }
.cook-steps p { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
@media (max-width: 959px) {
  .cook-pin {
    position: sticky; top: var(--header-h); z-index: 2; grid-row: 1;
    margin: 0 calc(var(--gutter) * -1) 4px; aspect-ratio: 332 / 290; overflow: hidden;
    background: var(--bg);   /* the steps pass underneath */
  }
  .cook-pin::before {   /* the sun's glow, behind the scene */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(48% 46% at 50% 40%, rgba(255, 214, 150, .85), rgba(255, 214, 150, 0));
  }
  .cook-pin::after {   /* a soft edge where the steps slide under */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none;
    background: linear-gradient(transparent, var(--bg));
  }
  /* show x 14–346 and y −14–276 of the drawing (the range is 32–328) */
  .cook-pin .cook { position: relative; width: 156.627%; height: auto; max-width: none; margin: -7.831% 0 0 -4.217%; }
  .ck-hood { transform: translate(0, 12px); }
  .ck-rail { transform: translate(-346px, 8px); }
  .ck-shelf { display: inline; }
  .ck-plate-pos { transform: translate(87.7px, 83.4px) scale(.55); }
  .ck-phone-pos { transform: translate(27.6px, 32px) scale(.6); }
  .cook-steps { grid-row: 2; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  #ck-egg { transform: translate(300px, 222px) scale(.55) translate(-184px, -188px); }   /* on the plate */
}
/* while the kitchen is on a phone screen, the sky's sun gives way to the glow behind the scene */
@media (max-width: 959px) { .sun-pos { transition: opacity .5s ease; } .how-on .sun-pos { opacity: 0; } }
@media (min-width: 960px) {
  .cook-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); }
  .cook-steps { grid-column: 1 / span 5; padding: 6vh 0; }
  .cook-steps li { padding: 28px 0 32px; }
  .cook-steps h3 { font-size: 2rem; margin-bottom: 6px; }
  .cook-steps p { font-size: 1.0625rem; max-width: 28em; }
  .cook-pin { position: sticky; grid-column: 6 / span 7; grid-row: 1; top: calc(var(--header-h) + (100vh - var(--header-h) - min(58vw * 340 / 520, 64vh)) / 2); max-height: 64vh; }
}
/* the step being described: dark title and a bronze rule (the others stay readable, 4.5:1 or better) */
@media (prefers-reduced-motion: no-preference) {
  .js .cook-steps li h3 { color: var(--ink-soft); }
  .js .cook-steps li.is-active h3 { color: var(--ink); }
  .js .cook-steps li.is-active { border-color: var(--accent); }
}

/* ── 6. Packages ─────────────────────────────────────────── */
.plans { display: grid; gap: var(--gap); align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  position: relative;
  padding: 22px 24px 18px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}
.plan h3 { font-size: 1.75rem; }
.price { font: 600 3.25rem/1 var(--serif); margin: 6px 0 14px; letter-spacing: -.01em; }
.plan li { padding: 7px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.plan .incl { font-weight: 600; }
.plan-featured { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.plan-featured li { border-color: var(--line-dark); }
.plan-featured .incl { color: var(--accent-on-dark); }
.flag {
  position: absolute; top: 25px; right: 24px;
  font: 600 .6875rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-on-dark);
}
.care { margin-top: 18px; text-align: center; color: var(--ink-soft); font-size: .9375rem; }
.care strong { color: var(--ink); font-weight: 600; }
.addons { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.addons-title { font: 600 .75rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.addons ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.addons li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; color: var(--ink-soft); }
.addons b { color: var(--ink); font-weight: 700; }
.addon-note { display: block; font-size: .8125rem; color: var(--ink-soft); }
.addons li:has(.addon-note) { border-radius: 14px; text-align: center; }

/* ── 7. Why Jiwa Digi ────────────────────────────────────── */
.quote p {
  font: italic 600 clamp(2.125rem, 5vw, 3.75rem)/1.08 var(--serif);
  letter-spacing: -.01em;
  max-width: 21ch;
}
.quote .accent { color: var(--accent); }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--gap); margin-top: 30px; }
@media (min-width: 900px) { .points { grid-template-columns: repeat(4, 1fr); } }
.points li { border-top: 1px solid var(--line); padding-top: 14px; }
.points h3 { font-size: 1.375rem; margin-bottom: 4px; }
.points p { color: var(--ink-soft); font-size: .9375rem; }

/* ── 8. Quiet lines ──────────────────────────────────────── */
.aside-line { padding: 16px 0; text-align: center; }
.aside-line p { color: var(--ink-soft); }
.aside-line a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--accent-ink); font-weight: 600; text-underline-offset: 5px;
}

/* ── 9. FAQ ──────────────────────────────────────────────── */
@media (min-width: 960px) and (max-width: 1023px) {
  .faq-head { grid-column: 1 / span 4; margin: 0; }
  .faq { grid-column: 6 / span 7; }
}
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 8px 0;
  font: 600 1.375rem/1.2 var(--serif);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font: 400 1.5rem/1 var(--sans); color: var(--accent-ink);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent-ink); }
.faq details p { padding: 0 0 14px; color: var(--ink-soft); max-width: 36em; }

/* ── 10. Contact ─────────────────────────────────────────── */
.contact-text h2 { margin-bottom: 12px; }
.contact-text .lede { margin-bottom: 16px; }
.contact-list li { padding: 2px 0; color: var(--ink-soft); }
.contact-list a {
  display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px;
  color: var(--ink); font-weight: 600; text-underline-offset: 5px;
}
.contact-list a:hover { color: var(--accent-ink); }
.socials { display: flex; align-items: center; gap: 2px; }
.contact-list .social, .social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; border-radius: 50%;
  color: inherit;
}
.contact-list .socials { margin-left: -12px; }
.contact-list .social { color: var(--ink); }
.social svg { width: 22px; height: 22px; }
.social:hover { color: var(--accent-ink); }
.handle { margin-left: 6px; font-weight: 600; }
#contact { padding-bottom: 28px; }
@media (min-width: 960px) and (max-width: 1023px) {
  .contact-text { grid-column: 1 / span 5; }
  .form, .thanks { grid-column: 7 / span 6; }
}
/* Desktop: Features, Packages, FAQ and Contact put the heading in a narrow left column (sticky, so it stays
   beside longer content) and the content on the right */
@media (min-width: 1024px) {
  #features > .wrap, #packages > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  #features .section-head, #packages .section-head, .faq-head, .contact-text {
    grid-column: 1 / span 4; grid-row: 1; margin: 0; position: sticky; top: calc(var(--header-h) + 24px);
  }
  #packages .section-head { grid-row: 1 / span 3; }
  #features .features, #packages .plans, #packages .care, #packages .addons, .faq, .form, .thanks { grid-column: 5 / -1; }
  #packages .plans { grid-row: 1; } #packages .care { grid-row: 2; } #packages .addons { grid-row: 3; }
  .faq, .form, .thanks { grid-row: 1; }
  .plan-featured .flag { position: static; margin: -6px 0 4px; }   /* above the title in the narrower card */
}
.form { display: grid; gap: 12px; align-content: start; }
@media (min-width: 600px) { .form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-line); border-radius: 6px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.form-status { font-size: .9375rem; }
.form-status.is-error { color: var(--error); font-weight: 600; }
.thanks { padding: 26px; border: 1px solid var(--ink); border-radius: var(--radius); align-self: start; }
.thanks h3 { font-size: 2rem; margin-bottom: 8px; }
.thanks p { color: var(--ink-soft); }

/* ── 11. Footer: the city at night ───────────────────────── */
/* Right after the form the skyline rises with lit windows (day.js scrubs --rise 0→1; it rests at 1, lit,
   with Reduce Motion); the footer sits on the building bases in one compact strip. */
.site-footer { --rise: 1; color: var(--on-dark); padding: 0; }
.city { height: clamp(130px, 19vw, 250px); overflow: hidden; }
.city-svg { display: block; width: 100%; height: 100%; transform: translateY(calc((1 - var(--rise)) * 28px)); }
.city-fill { fill: #121317; }
.city-glow { opacity: var(--rise); }
.city-win { fill: #F2C987; }
.city-win path:nth-child(1) { opacity: clamp(0, var(--rise) * 8 - 0, .9); }
.city-win path:nth-child(2) { opacity: clamp(0, var(--rise) * 8 - 1, .9); }
.city-win path:nth-child(3) { opacity: clamp(0, var(--rise) * 8 - 2, .9); }
.city-win path:nth-child(4) { opacity: clamp(0, var(--rise) * 8 - 3, .9); }
.city-win path:nth-child(5) { opacity: clamp(0, var(--rise) * 8 - 4, .9); }
.city-win path:nth-child(6) { opacity: clamp(0, var(--rise) * 8 - 5, .9); }
.city-win path:nth-child(7) { opacity: clamp(0, var(--rise) * 8 - 6, .9); }
.city-win path:nth-child(8) { opacity: clamp(0, var(--rise) * 8 - 7, .9); }
.footer-strip { background: #121317; padding: 6px 0 22px; }
.site-footer .logo { --dot: var(--accent-on-dark); color: var(--on-dark); width: 120px; }
.footer-inner { display: grid; gap: 10px 24px; align-items: center; }
.footer-tag { font: italic 600 1.25rem/1.2 var(--serif); color: var(--accent-on-dark); margin-top: 6px; }
.footer-soon { font: italic 600 1.125rem/1.35 var(--serif); color: var(--on-dark-soft); }
.footer-meta { font-size: .875rem; color: var(--on-dark-soft); }
.footer-meta .socials { margin-left: -12px; color: var(--on-dark); }
.footer-meta .social:hover { color: var(--accent-on-dark); }
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: auto 1fr auto; }
  .footer-soon { text-align: center; }
  .footer-meta { text-align: right; }
  .footer-meta .socials { justify-content: flex-end; margin: 0 -12px 0 0; }
}

/* ── Motion A: sections fade up once as they enter (JS adds .in) ── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ── Motion: all of it lives here, and none of it runs with Reduce Motion ──
   Hero words rise in on load, the desktop phone floats 3px, the What-we-fix screens crossfade,
   How it works plays a tap once, and the style samples replay their entrance. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero tap demo (5s from load, once; replays back at the top), every part on the same 5s clock:
     0–1.2s the phone comes in on its lock screen · 1.25s its top edge taps the card, a tiny buzz, rings ·
     1.3s the "Open Everest Kitchen" banner drops · 1.7s the menu opens (no blank screen) · 2.45s a tap on
     "Food menu" · 2.75s the dish list slides in · 3.3–4.85s it scrolls a few dishes.
     The headline settles in meanwhile; text is clipped, never hidden. */
  .hook-stage.play .hook-phone { animation: hook-move 5s linear both; }
  .hook-stage.play .hook-card { animation: hook-press 5s linear both; }
  .hook-stage.play .hook-ring { animation: hook-ring .9s 1.25s ease-out both; }
  .hook-stage.play .hook-ring:nth-of-type(2) { animation-delay: 1.45s; }
  .hook-stage.play .hook-ring:nth-of-type(3) { animation-delay: 1.65s; }
  .hook-stage.play .hs-lock { animation: hs-lock 5s linear both; }
  .hook-stage.play .hs-banner { animation: hs-banner 5s linear both; }
  .hook-stage.play .hs-home { animation: hs-home 5s linear both; }
  .hook-stage.play .hs-tap { animation: hs-tap 5s linear both; }
  .hook-stage.play .hs-list { animation: hs-list 5s linear both; }
  .hook-stage.play .hs-scroll { animation: hs-scroll 5s linear both; }
  .hero .w { animation: word-up .6s cubic-bezier(.2, .7, .2, 1) .2s both; }
  .hero .w:nth-child(2) { animation-delay: .3s; }
  .hero .w:nth-child(3) { animation-delay: .4s; }
  .hero-text .lede { animation: word-up .6s cubic-bezier(.2, .7, .2, 1) .6s both; }
  @keyframes hook-move {
    0%    { opacity: 0; transform: translate(-50%, 16cqh); animation-timing-function: cubic-bezier(.25, .6, .3, 1); }
    8%    { opacity: 1; }
    25%   { transform: translate(-50%, calc(var(--gap) * -1 - 1.2cqh)) rotate(-3deg); }
    26.5% { transform: translate(calc(-50% + 1.3px), calc(var(--gap) * -1 - 1.2cqh)) rotate(-2.7deg); }
    28%   { transform: translate(calc(-50% - 1.3px), calc(var(--gap) * -1 - 1.2cqh)) rotate(-3.3deg); }
    29.5% { transform: translate(calc(-50% + 1px), calc(var(--gap) * -1 - 1.2cqh)) rotate(-2.9deg); }
    31%   { transform: translate(-50%, calc(var(--gap) * -1 - 1.2cqh)) rotate(-3deg); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
    44%, 100% { opacity: 1; transform: translate(-50%, 0) rotate(0); }
  }
  @keyframes hook-press { 0%, 24.6% { transform: translateX(-50%); } 26% { transform: translateX(-50%) scale(.985) translateY(-.5cqh); } 30%, 100% { transform: translateX(-50%); } }
  @keyframes hs-lock { 0%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
  @keyframes hs-banner {
    0%, 25.5% { opacity: 0; transform: translateY(-160%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
    29%       { opacity: 1; transform: translateY(0); }
    32.5%     { transform: scale(1); }
    34%       { opacity: 1; transform: scale(.95); }
    37%, 100% { opacity: 0; transform: translateY(-120%) scale(.95); }
  }
  @keyframes hs-home { 0%, 34% { transform: scale(1.06); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 41%, 100% { transform: scale(1); } }
  @keyframes hs-tap { 0%, 48.9% { opacity: 0; transform: scale(.35); } 49% { opacity: .9; transform: scale(.35); animation-timing-function: ease-out; } 56%, 100% { opacity: 0; transform: scale(1.15); } }
  @keyframes hs-list { 0%, 55% { transform: translateX(100%); animation-timing-function: cubic-bezier(.3, .7, .2, 1); } 62%, 100% { transform: translateX(0); } }
  @keyframes hs-scroll {
    0%, 66% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    79%     { transform: translateY(calc(var(--u) * -30)); }
    84%     { transform: translateY(calc(var(--u) * -30)); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    97%, 100% { transform: translateY(calc(var(--u) * -58)); }
  }
  @keyframes hook-ring {
    from { opacity: .7; transform: translate(-50%, -50%) scale(.3); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
  }
  @keyframes word-up {
    from { clip-path: inset(-10% -5% 100% -5%); transform: translateY(.35em); }
    to   { clip-path: inset(-10% -5% -30% -5%); transform: none; }
  }

  /* The sun rises into its morning spot once on load (then GSAP moves it with the scroll) */
  .sun { animation: sun-in 1.8s .2s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes sun-in { from { translate: 0 60px; opacity: 0; } }

  /* Kitchen glow drifts very slowly; ripples spread and fade */
  .ripple { animation: ripple .7s ease-out forwards; }
  .ripple-soft { animation: ripple-soft .6s ease-out forwards; }
  @keyframes ripple { from { opacity: .45; transform: scale(.2); } to { opacity: 0; transform: scale(1); } }
  @keyframes ripple-soft { from { opacity: .22; transform: scale(.3); } to { opacity: 0; transform: scale(1); } }

  /* Section signatures (once, under 1.5s, as the section fades in) */
  .js .reveal.in .sig-fix .waiter { animation: jiggle .12s .15s linear 5 both; }
  .js .reveal.in .sig-fix .busy { animation: busy-off .4s .7s ease-out both; }
  .js .reveal.in .sig-fix .bubble { animation: draw .5s .8s ease-out both; }
  .js .reveal.in .sig-fix .check { animation: draw .3s 1.2s ease-out both; }
  .js .reveal.in .sig-work .finger { animation: finger 1.3s .15s ease-in-out both; }
  .js .reveal.in .sig-work .l1 { animation: grow .3s .5s ease-out both; }
  .js .reveal.in .sig-work .l2 { animation: grow .3s 1.2s ease-out both; }
  .js .reveal.in .sig-work .tap { animation: tap .35s .4s ease-out both, tap .35s 1.1s ease-out both; }
  .js .reveal.in .sig-features .tool { animation: drop .35s cubic-bezier(.3, .7, .3, 1) both; }
  .js .reveal.in .sig-features .tool:nth-of-type(1) { animation-delay: .2s; }
  .js .reveal.in .sig-features .tool:nth-of-type(2) { animation-delay: .45s; }
  .js .reveal.in .sig-features .tool:nth-of-type(3) { animation-delay: .7s; }
  .js .reveal.in .sig-features .tool:nth-of-type(4) { animation-delay: .95s; }
  .js .reveal.in .sig-packages .fill { animation: fill-up .7s ease-out both; }
  .js .reveal.in .sig-packages .f2 { animation-delay: .2s; }
  .js .reveal.in .sig-packages .f3 { animation-delay: .4s; }
  .js .reveal.in .sig-why .draw { animation: draw 1.1s .2s ease-in-out both; }
  .js .reveal.in .sig-contact .pin { animation: pin-drop .6s .3s cubic-bezier(.3, .7, .3, 1) both; }
  .js .reveal.in .sig-contact .ripple-e { animation: ripple-e .6s .85s ease-out both; }
  @keyframes jiggle { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
  @keyframes busy-off { from { opacity: 1; } to { opacity: 0; } }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes finger { 0% { transform: translate(36px, 64px); opacity: 0; } 20% { transform: translate(36px, 40px); opacity: 1; } 45% { transform: translate(36px, 40px); } 75%, 100% { transform: translate(98px, 40px); } }
  @keyframes tap { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }
  @keyframes drop { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
  @keyframes fill-up { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes pin-drop { from { opacity: 0; transform: translate(66px, 6px); } to { opacity: 1; transform: translate(66px, 38px); } }
  @keyframes ripple-e { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.8); } }

  /* What we fix: 400ms crossfade between screens */
  .fix-phone .screen { transition: opacity .4s ease; }

  /* Your style: the slider sets duration, distance, stagger and band zoom (Calm → Cinematic) */
  .style-phone.play .sp-band { animation: sp-band calc(var(--sp-dur, .6s) * 1.6) ease-out both; }
  .style-phone.play .sp-a {
    animation: sp-rise var(--sp-dur, .6s) ease-out both;
    animation-delay: calc(var(--sp-i, 0) * var(--sp-stagger, .05s));
  }
  .sp-body > :nth-child(2) { --sp-i: 1; } .sp-body > :nth-child(3) { --sp-i: 2; }
  .sp-body > :nth-child(4) { --sp-i: 3; } .sp-body > :nth-child(5) { --sp-i: 4; }
  .sp-body > :nth-child(6) { --sp-i: 5; } .sp-body > :nth-child(7) { --sp-i: 6; }
  /* Signature scenes (strength from --amp; loops only while the section is on screen) */
  .style-phone.play[data-style="classic"] .sp-screen > * { animation: page-in calc(var(--sp-dur) * 1.4) ease-out both; transform-origin: left center; }
  .style-phone.live[data-style="night"] .flag { animation: sway 2.8s ease-in-out infinite alternate; }
  .style-phone.live[data-style="night"] .flag:nth-of-type(2n) { animation-delay: -.9s; }
  .style-phone.live[data-style="night"] .flag:nth-of-type(3n) { animation-delay: -1.7s; }
  .style-phone.live[data-style="sunday"] .steam { animation: steam 3.2s ease-in-out infinite; }
  .style-phone.live[data-style="sunday"] .steam:nth-of-type(2) { animation-delay: -1.1s; }
  .style-phone.live[data-style="sunday"] .steam:nth-of-type(3) { animation-delay: -2.1s; }
  .style-phone.live[data-style="bistro"] .flame { animation: flicker 1.7s ease-in-out infinite alternate; }
  .style-phone.live[data-style="bistro"] .glowc { animation: glowc 1.7s ease-in-out infinite alternate; }
  .style-phone.live[data-style="garden"] .leaf { animation: drift 7s ease-in-out infinite; }
  .style-phone.live[data-style="garden"] g:nth-of-type(2) > .leaf { animation-delay: -2s; }
  .style-phone.live[data-style="garden"] g:nth-of-type(3) > .leaf { animation-delay: -4s; }
  .style-phone.live[data-style="garden"] g:nth-of-type(4) > .leaf { animation-delay: -5.5s; }
  .style-phone.play[data-style="saffron"] .scatter { animation: scatter calc(var(--sp-dur) * 1.8) cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes page-in { from { opacity: 0; transform: perspective(700px) rotateY(calc(var(--amp) * -22deg)); } to { opacity: 1; transform: none; } }
  @keyframes sway { from { transform: rotate(calc(var(--amp) * -10deg)); } to { transform: rotate(calc(var(--amp) * 10deg)); } }
  @keyframes steam { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: calc(.3 + var(--amp) * .6); } 100% { opacity: 0; transform: translateY(calc(var(--amp) * -16px - 2px)); } }
  @keyframes flicker { from { transform: scaleY(calc(1 - var(--amp) * .1)) skewX(calc(var(--amp) * -3deg)); opacity: calc(1 - var(--amp) * .2); } to { transform: scaleY(calc(1 + var(--amp) * .06)) skewX(calc(var(--amp) * 3deg)); opacity: 1; } }
  @keyframes glowc { from { opacity: calc(.14 - var(--amp) * .06); } to { opacity: calc(.14 + var(--amp) * .08); } }
  @keyframes drift { 0% { transform: translate(calc(var(--amp) * -14px), calc(var(--amp) * -18px)) rotate(calc(var(--amp) * -25deg)); opacity: 0; } 25%, 75% { opacity: 1; } 100% { transform: translate(calc(var(--amp) * 14px), calc(var(--amp) * 18px)) rotate(calc(var(--amp) * 25deg)); opacity: 0; } }
  @keyframes scatter { from { transform: scale(calc(1 - var(--amp) * .8)) rotate(calc(var(--amp) * -40deg)); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes sp-rise { from { opacity: 0; transform: translateY(var(--sp-dist, 8px)); } to { opacity: 1; transform: none; } }
  @keyframes sp-band { from { opacity: .35; transform: scale(var(--sp-zoom, 1.02)); } to { opacity: 1; transform: none; } }
}