/* Gatzby: Aperitivo, reduced. Values mirror gatzby-app theme/tokens.ts and docs/DESIGN.md. */

:root {
  color-scheme: light dark;
  --ground: #EEE8E1;
  --surface: #FFFFFF;
  --ink: #000000;
  --muted: #625A52;
  --tint: #F4E2DD;
  --pick: #A8322D;
  --glint: #FFFFFF;
  --cast: 0.26;
  --hairline: rgba(20, 17, 15, 0.08);
  --beam: rgba(255, 245, 228, 0.62);
  --shade: 70 44 24;
  --metal: linear-gradient(150deg, #F3F0EC 0%, #B8B2AB 18%, #E6E2DD 42%, #A49E97 70%, #DCD7D1 100%);
  --button: #B3ADA6;
  --serif: "New York", ui-serif, "Source Serif 4", Georgia, serif;
  --sans: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1360px;
  --gutter: 16px;
  --edge-left: max(var(--gutter), env(safe-area-inset-left));
  --edge-right: max(var(--gutter), env(safe-area-inset-right));
  --section: clamp(88px, 10vw, 152px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E0B09; --surface: #1A1512; --ink: #FFFFFF; --muted: #A89F96; --tint: #34201A; --pick: #E0654C;
    --glint: rgba(255, 236, 210, 0.5); --cast: 0.7; --hairline: rgba(255, 255, 255, 0.07);
    --beam: rgba(255, 232, 204, 0.14); --shade: 0 0 0;
    --metal: linear-gradient(150deg, #A8A19A 0%, #5F5953 20%, #8E8780 45%, #4F4A45 72%, #827C76 100%); --button: #5F5953;
  }
}

@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }
/* Base */ *, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/24px var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--tint); color: var(--ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge-left) var(--edge-right); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Type: the coach in serif, two tones; everything he operates in SF. */
.display, .title, .mark, .plan__name, .plan__number { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; }
.display, .title { text-wrap: balance; }
.display { line-height: 1.02; letter-spacing: -0.022em; }
.title { font-size: clamp(30px, 1.45vw + 24px, 46px); line-height: 1.1; letter-spacing: -0.012em; }
.aside { display: block; color: var(--muted); }

.lede { font-size: clamp(18px, 0.35vw + 16.6px, 21px); line-height: 1.4; max-width: 21em; text-wrap: balance; }
.read { max-width: 30em; font-size: clamp(17px, 0.2vw + 16.2px, 19px); line-height: 1.45; text-wrap: pretty; }

.link { text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.link:hover { text-decoration-color: currentColor; }
/* The mark: icon and name, never a tracked label. */
.mark { display: flex; align-items: center; gap: 10px; font-size: 21px; line-height: 1; letter-spacing: -0.01em; }
.mark__icon { width: 34px; height: 34px; border-radius: 22.5%; }
/* Apple's badge, unaltered: at least 40px tall, a quarter of its height clear on every side. */
.badge { --h: 48px; display: inline-block; border-radius: calc(var(--h) * 0.2); transition: transform 180ms var(--ease-out); }
.badge img { width: auto; height: var(--h); }
.badge:active { transform: scale(0.98); }

/* Hero: the question on the left, the product on the right, a beam of late sun its only decoration. */
.hero { position: relative; overflow: clip; padding-block: 28px 72px; }
.hero::before { content: ""; position: absolute; inset: -20% -40%; background: linear-gradient(68deg, transparent 47%, var(--beam) 55%, var(--beam) 63%, transparent 72%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 84%); mask-image: linear-gradient(to bottom, #000 50%, transparent 84%); animation: beam-lands 2.4s var(--ease-out) 0.15s both; }

@keyframes beam-lands {
  from { opacity: 0; transform: translate3d(-14%, 0, 0); }
  to { opacity: 1; transform: none; }
}

.hero__grid { position: relative; display: grid; row-gap: 56px; }
.hero__copy { container-type: inline-size; }
/* Four lines in any serif: sized by its column, measured so New York and Source Serif break alike. */
.hero .display { max-width: 8.6em; font-size: clamp(38px, 10vw, 72px); font-size: clamp(38px, 11.6cqi, 72px); }
.hero .mark { margin-bottom: 28px; }
.hero .lede { margin-top: 20px; }
.hero .badge { margin-top: 32px; }

@media (min-width: 900px) {
  .hero { display: grid; align-items: center; min-height: min(100svh, 1000px); padding-block: 48px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
  .hero .mark { margin-bottom: 44px; }
  .hero .lede { margin-top: 28px; }
  .hero .badge { --h: 52px; margin-top: 44px; }
}

/* Hero, bolder: the question large and tight, its answer in the pick's red (5.47:1 on stone,
   5.73:1 on espresso); the phone larger, lit by the beam on its rim and casting the stills' long shadow. */
.hero .display { max-width: 7.6em; font-size: clamp(40px, 11vw, 88px); font-size: clamp(40px, 13cqi, 88px); line-height: 0.98; letter-spacing: -0.026em; }
.hero .display .aside { color: var(--pick); }
.hero .stage { --w: clamp(270px, 88vw, 380px); }
.hero .phone { background: linear-gradient(#000, #000) padding-box, linear-gradient(68deg, transparent 34%, var(--glint) 44%, var(--glint) 47%, transparent 57%) border-box, var(--metal) border-box; box-shadow: 0 1px 2px rgb(var(--shade) / 0.16); animation: phone-settles 1.2s var(--ease-out) 0.1s both; }

.hero .phone__screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(68deg, transparent 40%, rgb(255 255 255 / 0.09) 46%, transparent 53%); pointer-events: none; }
.hero .stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 0.94); height: calc(var(--w) * 1.96); border-radius: calc(var(--w) * 0.17); background: rgb(var(--shade) / var(--cast)); filter: blur(calc(var(--w) * 0.055)); transform: translate(-36%, -47%) skewX(-18deg); transform-origin: bottom center; animation: shadow-lands 1.2s var(--ease-out) 0.1s both; }

@keyframes phone-settles { from { transform: translateY(32px); } to { transform: none; } }
@keyframes shadow-lands { from { opacity: 0; } to { opacity: 1; } }

/* B: the single glass on the stone behind the phone, the same light; atmosphere, not a second object. */
.glass { display: none; position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 1.5); transform: translate(-87%, -33%); pointer-events: none; }
.glass img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 68%, transparent 86%), linear-gradient(to right, transparent, #000 32%, #000 68%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 68%, transparent 86%), linear-gradient(to right, transparent, #000 32%, #000 68%, transparent);
  mask-composite: intersect;
}

@media (min-width: 900px) {
  .hero { padding-block: 20px; }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .glass { display: block; }
  .hero .stage { --w: clamp(300px, calc((100svh - 80px) * 0.476), 430px); }
}

/* The phone: iPhone 17 Pro Max proportions (78 x 163.4 mm, a 1320 x 2868 screen with 62pt corners).
   A brushed silver rim, a thin black border, the screen corner concentric with the body; the
   screenshot fills the screen edge to edge and carries its own status bar, so only the island is drawn. */
.stage { --w: clamp(260px, 86vw, 360px); position: relative; display: grid; justify-items: center; }
.phone { --rim: calc(var(--w) * 0.0095); --button-width: calc(var(--w) * 0.007); position: relative; width: var(--w); padding: calc(var(--w) * 0.0285) calc(var(--w) * 0.0235); border: var(--rim) solid transparent; border-radius: calc(var(--w) * 0.165); background: linear-gradient(#000, #000) padding-box, var(--metal) border-box; box-shadow: 0 1px 2px rgb(var(--shade) / 0.12), 24px 32px 64px -20px rgb(var(--shade) / 0.3); }

/* Action button and volume on the left, the side button on the right. */
.phone::before, .phone::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--button-width); border-radius: 2px; }
.phone::before { left: calc(-1 * (var(--rim) + var(--button-width))); background: linear-gradient(to bottom, transparent 17%, var(--button) 17% 21%, transparent 21% 25.5%, var(--button) 25.5% 32%, transparent 32% 34%, var(--button) 34% 40.5%, transparent 40.5%); }

.phone::after { right: calc(-1 * (var(--rim) + var(--button-width))); background: linear-gradient(to bottom, transparent 27%, var(--button) 27% 37.5%, transparent 37.5%); }

.phone__screen { position: relative; overflow: hidden; border-radius: calc(var(--w) * 0.132); background: var(--ground); }
.phone__screen img { width: 100%; aspect-ratio: 1320 / 2868; object-fit: cover; }
/* The Dynamic Island where iOS draws it: 126 x 37 pt, 11 pt from the top of a 440 x 956 pt screen. */
.phone__screen::after { content: ""; position: absolute; top: 0; margin-top: 2.5%; left: 50%; width: 28.6%; aspect-ratio: 126 / 37; transform: translateX(-50%); border-radius: 999px; background: #000; }

@media (min-width: 900px) {
  .stage { --w: clamp(280px, calc((100svh - 110px) * 0.476), 380px); }
}

/* How it works plays the app's own recording on the phone; its content runs to the tab bar, so the
   phone is whole. Under reduced motion the recording gives way to the Result still, which dissolves
   into the ground just under its third card (the Dissolve Rule). */
.phone__screen video { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 2868; object-fit: cover; }
.phone__screen .screen-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .phone__screen .screen-video { display: none; }
  .phone__screen .screen-still { display: block; }
  .phone--video { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--w) * 1.5), transparent calc(var(--w) * 1.61)); mask-image: linear-gradient(to bottom, #000 calc(var(--w) * 1.5), transparent calc(var(--w) * 1.61)); margin-bottom: calc(var(--w) * -0.495); }
}
@media (min-width: 900px) {
  .stage--how, .stage--inchat { --w: clamp(300px, 28vw, 400px); }
}

/* Still lifes: full bleed on a phone, fading into the ground at top and bottom (StillLife.tsx). */
.still { display: block; margin-inline: calc(-1 * var(--edge-left)) calc(-1 * var(--edge-right)); }
.still img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent); }

/* On a desk a still bleeds off its own side of the window, as it does off the phone's edge,
   and dissolves on the other three. --bleed is the distance from the column to the window edge. */
@media (min-width: 900px) {
  .still {
    --bleed: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter));
    --inner: to right;
    margin-inline: 0;
    height: clamp(560px, 46vw, 760px);
    aspect-ratio: auto;
  }
  .still img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent, #000 24%, #000 70%, transparent),
      linear-gradient(var(--inner), #000 60%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent, #000 24%, #000 70%, transparent),
      linear-gradient(var(--inner), #000 60%, transparent);
    mask-composite: intersect;
  }
}

/* How it works: three steps, each a line over its why, beside a real Result. */
.how { padding-block: 16px var(--section); }
.how__grid, .inchat__grid { display: grid; }
.stage--how, .stage--inchat { order: 2; margin-top: 48px; }

.steps { counter-reset: step; display: grid; gap: 22px; margin-top: 32px; }
.step { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; }
.step::before { content: counter(step); grid-row: span 2; font: 600 26px/25px var(--serif); color: var(--muted); font-variant-numeric: lining-nums; }
.step__line { font-weight: 600; font-size: 20px; line-height: 25px; letter-spacing: -0.008em; text-wrap: balance; }
.step__why { margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--muted); }

@media (min-width: 900px) {
  .how { padding-block: var(--section); }
  .how__grid, .inchat__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .stage--how, .stage--inchat { order: 0; margin-top: 0; }
  .steps { gap: 28px; margin-top: 44px; }
}

/* In her chat: the two ways in beside the share card over her chat, on How's grid with the phone
   opposite. The ways are either-or, not a sequence, so they carry no numbers. */
.inchat { padding-block: 0 var(--section); }
.steps--ways .step { grid-template-columns: minmax(0, 1fr); }
.steps--ways .step::before { content: none; }
/* The card ends at Three more; the empty sheet under it dissolves into the ground (the Dissolve Rule). */
.phone--card { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--w) * 1.27), transparent calc(var(--w) * 1.4)); mask-image: linear-gradient(to bottom, #000 calc(var(--w) * 1.27), transparent calc(var(--w) * 1.4)); margin-bottom: calc(var(--w) * -0.7); }

/* Your six: the Profile screen on its own stage, the headline over it. */
.six { padding-block: 0 var(--section); }
.six .read { margin-top: 20px; }
.line { display: block; }
.stage--six { margin-top: 48px; }

@media (min-width: 900px) {
  .six__inner { text-align: center; }
  .six .title, .six .read { margin-inline: auto; }
  .six .read { max-width: 36em; }
  .stage--six { margin-top: 64px; }
}

/* Free and Pro: two quiet tiles, the app's one lifted surface; the counts in the score's serif. */
.plans { padding-block: 0 var(--section); }
.plans__inner { max-width: calc(860px + var(--edge-left) + var(--edge-right)); }
.plans__grid { display: grid; gap: 12px; }
.plan { display: flex; flex-direction: column; padding: 24px 22px 26px; border-radius: 22px; border: 1px solid var(--hairline); background: var(--surface); }
.plan__name { font-size: 30px; line-height: 36px; letter-spacing: -0.01em; }
.plan__count { margin: 20px 0 18px; color: var(--muted); line-height: 1; }
.plan__number { margin-right: 4px; color: var(--ink); font-size: 84px; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.plan__line { color: var(--muted); }
.plan__line + .plan__line { margin-top: 4px; }
.plan__price { margin-top: auto; padding-top: 4px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fine { margin-top: 20px; font-size: 15px; line-height: 20px; color: var(--muted); }

@media (min-width: 640px) {
  .plans__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .plan { padding: 30px 32px 32px; }
}

/* Privacy: the covered glass, a drink marked as taken. */
.privacy { padding-block: 0 var(--section); overflow-x: clip; }
.privacy__grid { display: grid; }
.still--covered { order: -1; aspect-ratio: 390 / 400; }
.still--covered img { object-position: 50% 80%; }
.privacy__copy { position: relative; margin-top: -36px; }
.privacy .read { margin-top: 20px; }
.privacy .link { display: table; margin-top: 12px; }

@media (min-width: 900px) {
  .privacy__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .still--covered { --inner: to left; order: 0; aspect-ratio: auto; height: clamp(500px, 40vw, 680px); margin-right: calc(-1 * var(--bleed)); }
  .still--covered img { object-position: 50% 82%; }
  .privacy__copy { margin-top: 0; }
}

/* The close: the question again, and the badge. */
.close { padding-block: clamp(48px, 6vw, 88px) clamp(112px, 12vw, 176px); }
.close__inner { container-type: inline-size; display: grid; justify-items: center; text-align: center; }
.close .display { font-size: clamp(38px, 6vw, 72px); font-size: clamp(38px, 6.4cqi, 72px); }
.close .badge { --h: 52px; margin-top: 40px; }

/* Footer: the mark, the links and the year. */
.footer { padding-block: 0 calc(40px + env(safe-area-inset-bottom)); }
.footer__inner { display: grid; gap: 20px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.footer__nav ul { display: flex; flex-wrap: wrap; column-gap: 24px; }
.footer__nav a { display: inline-block; padding-block: 12px; font-size: 15px; line-height: 20px; text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; }
.footer__legal { font-size: 13px; line-height: 18px; color: var(--muted); }

@media (min-width: 900px) {
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 40px; }
  .footer__nav ul { justify-content: flex-end; }
}

/* Reveals: scroll-driven, one curve, 24px, over the first 240px of scroll after an element enters;
   the second and third of a set start 40px later. Browsers without view timelines (Firefox today)
   and reduced motion never see this block, so nothing ever starts hidden. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .how .title, .step, .stage--how, .inchat .title, .stage--inchat, .six .title, .six .read, .stage--six, .plan, .fine, .privacy__copy, .still--covered, .close__inner {
      animation: rise-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 240px;
    }
    .step:nth-child(2), .plan:nth-child(2) { animation-range: entry 40px entry 280px; }
    .step:nth-child(3) { animation-range: entry 80px entry 320px; }
  }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero .phone, .hero .stage::before { animation: none; }
  .badge { transition: none; }
}