@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Bricolage"; src: url("/assets/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --text-hero: clamp(3.25rem, 9.2vw, 8.5rem);
  --text-lead: clamp(3.25rem, 7.9vw, 7.25rem);
  --text-section: clamp(2.5rem, 4.6vw, 4.25rem);
  --wire: 3px;
  --hero-gap: var(--space-xl);
}

body { font-size: 1.125rem; }

h1, h2 { font-weight: 800; font-variation-settings: "opsz" 96; letter-spacing: var(--tracking-display); line-height: 1; }
h2 { font-size: var(--text-section); }

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-ink-2); }
.skip:focus-visible { top: var(--space-md); }

/* Nav */
.nav { background: var(--color-paper); }
.nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font: 800 var(--text-xl)/1 var(--font-display); color: var(--color-ink); text-decoration: none; }
.brand svg { width: 34px; height: 31px; fill: var(--color-ink); }
.nav nav { display: flex; gap: var(--space-lg); }
.nav nav a { font-weight: 600; text-decoration: none; }
.nav nav a:hover { text-decoration: underline; }
.nav nav a:active { opacity: 0.7; }

/* Hero */
.hero { background: var(--color-paper); padding-block: var(--space-sm) var(--space-xl); }
.hero h1 { font-size: var(--text-lead); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: var(--space-2xl); align-items: center; }
.lede { margin-block-start: var(--space-lg); max-width: 32ch; font: 600 var(--text-xl)/1.3 var(--font-body); }
.hero-side .btn { margin-block-start: var(--space-lg); }

/* Button */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-ink-2); font-weight: 600; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.status { margin-block-start: var(--space-sm); font-size: var(--text-sm); font-weight: 600; }

/* Bands */
.band { padding-block: var(--section-gap-s); }
.band-coral { background: var(--color-paper); color: var(--color-ink); }
.band-green { background: var(--color-paper-2); color: var(--color-ink-2); }
.band-cream { background: var(--color-paper-3); color: var(--color-ink); }
.band-green :focus-visible, .foot :focus-visible { outline-color: var(--color-ink-2); }
.head-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-block-end: var(--space-2xl); }
.split { display: grid; gap: var(--space-2xl); align-items: center; }
.split-links { grid-template-columns: minmax(0, 4fr) minmax(0, 7.6fr); }
.split-ai { grid-template-columns: minmax(0, 7.4fr) minmax(0, 3.6fr); }
.split-thanks { grid-template-columns: minmax(0, 4.4fr) minmax(0, 6.4fr); }
.split-faq { grid-template-columns: minmax(0, 4.4fr) minmax(0, 6.4fr); align-items: start; }
.split-text p { margin-block-start: var(--space-lg); }
figure { margin: 0; }
.stack { position: relative; }
.stack > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* One order: stacked layers of the real app. Base CSS shows the finished picture. */
.order-phone { display: none; }
.stage { position: relative; aspect-ratio: 1618 / 1044; margin-inline: auto; }
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-cover { position: absolute; left: 66.38%; right: 4.57%; top: 13.22%; bottom: 7.09%; background: var(--color-shot); border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); transform: scaleY(0); transform-origin: bottom; }

/* The pictures carry soft margins for their shadows: let the panels themselves reach the page margins. */
@media (min-width: 62.01rem) {
  .hero-shot { width: 136.3%; max-width: none; margin-inline-start: -18.15%; }
  .shot .stack { width: calc(100% * var(--k, 1.14)); max-width: none; margin-inline-start: calc(-100% * var(--l, 0.07)); }
  .split-links .stack { --k: 1.138; --l: 0.0651; }
  .split-ai .stack { --k: 1.16; --l: 0.0775; }
  .split-thanks .stack { --k: 1.161; --l: 0.0818; }
  .band-survey .stack { --k: 1.124; --l: 0.0508; }
}

/* Plan finder */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-sm) var(--gap-columns); align-items: center; margin-block-end: var(--space-xl); }
.calc[hidden] { display: none; }
.calc label { font-weight: 600; }
.calc input { width: 100%; height: 44px; accent-color: var(--color-accent); cursor: pointer; }
.calc output { grid-column: 1 / -1; font: 800 var(--text-xl)/1.2 var(--font-display); min-height: 2.5em; }

/* Pricing */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: var(--space-md) var(--space-md) var(--space-md) 0; text-align: left; border-block-end: 1px solid var(--color-muted); white-space: nowrap; }
thead th { font-size: var(--text-sm); font-weight: 600; }
td, thead th:not(:first-child) { text-align: right; }
tbody th { font: 800 var(--text-2xl)/1.1 var(--font-display); }
tbody td { font-size: var(--text-xl); }
tbody tr { transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
tbody tr.is-match { background: var(--color-accent); color: var(--color-accent-ink); }
tbody tr th, tbody tr td { padding-inline-start: var(--space-md); }
thead th { padding-inline-start: var(--space-md); }

/* Questions */
.faq details { border-block-end: 1px solid var(--color-rule); padding-block: var(--space-md); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-md); list-style: none; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:active { opacity: 0.7; }
.faq details p { margin-block-start: var(--space-xs); }

/* Close */
.close { background: var(--color-paper); padding-block: var(--section-gap); }
.close h1, .close h2 { font-size: var(--text-hero); }
.close .btn { margin-block-start: var(--space-xl); }
.close .status { font-size: var(--text-md); }

/* Footer */
.foot { background: var(--color-accent-ink); color: var(--color-ink-2); padding-block: var(--space-xl); font-size: var(--text-sm); }
.foot-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; justify-content: space-between; }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot p { max-width: 60ch; }

@media (max-width: 62rem) {
  .hero-grid, .head-row, .split-links, .split-ai, .split-thanks, .split-faq { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: var(--space-xl); }
  .split { gap: var(--space-xl); }
  .split-ai .split-text { order: -1; }
  .head-row { margin-block-end: var(--space-xl); }
}

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .stack [data-rise] { display: none; }
  .order-phone { display: block; }
  .stage { display: none; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .hero-shot { margin-inline: -5%; }
  th, td { padding-inline: var(--space-xs); white-space: normal; }
  tbody th { font-size: var(--text-lg); }
  tbody td { font-size: var(--text-md); }
}

/* Motion. Everything below only adds to a page that is already complete. */
@media (prefers-reduced-motion: no-preference) {
  /* First screen: the head lands, then the report's rows roll in, source by source. */
  .hero-side { animation: rise var(--dur-long) var(--ease-out) both; }
  .hero-shot picture { display: block; animation: rows-in 1100ms var(--ease-out) 160ms both; }
  @keyframes rise { from { opacity: 0; transform: translateY(var(--space-lg)); } to { opacity: 1; transform: none; } }
  @keyframes rows-in { from { clip-path: inset(0 0 86% 0); } to { clip-path: inset(0 0 0 0); } }

  /* Each picture's top piece slides in once, when the picture arrives. */
  .js [data-seen] [data-rise] { transition: opacity var(--dur-long) var(--ease-out) 160ms, transform var(--dur-long) var(--ease-out) 160ms; }
  .js [data-seen]:not(.is-seen) [data-rise] { opacity: 0; transform: translateY(var(--space-xl)); }
}

/* The one scroll story: the order plays out while its section holds still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 62.01rem) and (min-height: 620px) {
    .chapter { min-height: 320vh; padding-block: 0; view-timeline: --order block; }
    .chapter-pin { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
    .chapter .head-row { margin-block-end: var(--space-lg); width: 100%; }
    .stage { width: min(100%, calc((100dvh - 230px) * 1.55)); }
    .l-chip, .l-cover, .l-line, .l-credit, .l-helped, .l-card { animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; }
    .l-chip { animation-name: order-in; animation-timeline: --order; animation-range: contain 0% contain 8%; }
    .l-cover { animation-name: order-cover; animation-timeline: --order; animation-range: contain 8% contain 72%; }
    .l-line { animation-name: order-line; animation-timeline: --order; animation-range: contain 8% contain 72%; }
    .l-credit { animation-name: order-tag; animation-timeline: --order; animation-range: contain 9% contain 14%; }
    .l-helped { animation-name: order-tag; animation-timeline: --order; animation-range: contain 28% contain 34%; }
    .l-card { animation-name: order-card; animation-timeline: --order; animation-range: contain 74% contain 88%; }
    @keyframes order-in { from { opacity: 0; transform: translateX(calc(-1 * var(--space-lg))); } to { opacity: 1; transform: none; } }
    @keyframes order-cover { from { transform: scaleY(1); } to { transform: scaleY(0); } }
    @keyframes order-line { from { clip-path: inset(0 0 86.78% 0); } to { clip-path: inset(0 0 7.09% 0); } }
    @keyframes order-tag { from { opacity: 0; transform: translateY(var(--space-xs)); } to { opacity: 1; transform: none; } }
    @keyframes order-card { from { opacity: 0; transform: translateY(var(--space-xl)); } to { opacity: 1; transform: none; } }
  }
}