/* One stylesheet for every page. Light only, on purpose: the site has no dark theme. Colors are the app's own
   (apps/ios/Packages/DesignSystem, Tokens.swift) and its icon's (cubby cream, cubby pink, the three pans). */
:root {
  color-scheme: light;
  --bg: #FBF3F1;
  --text: #2B1A1F;
  --muted: #6B5359;
  --rule: #EBDCDE;
  --accent: #B4325A;
  --ink: #2B1A1F;
  --surface-muted: #F6ECEA;
  --cubby-pink: #F5DDD8;
  --mauve-wash: #EED3D7;
  --pan-peach: #E9C4AF;
  --pan-mauve: #BF8E9C;
  --pan-plum: #8E4F65;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; }
.wrap { width: min(1080px, 100% - 48px); margin-inline: auto; }

header { padding: 28px 0; font-weight: 600; letter-spacing: -0.01em; }
header a { text-decoration: none; }

/* ---------- Landing ---------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
figure { margin: 0; }

.top { padding: 16px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; }
.brand img { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.top-link { font-size: 15px; font-weight: 500; padding: 8px 16px; border: 1px solid #D9BCC2; border-radius: 999px; }
.top-link:hover { background: #fff; }
.top-link:focus-visible, .btn:focus-visible { border-radius: 999px; outline-offset: 3px; }

.eyebrow { font: 600 12px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }

/* Hero: the words, then the shelf on one flat cubby-pink stage with the shade match laid over it */
.hero { padding: 16px 0 72px; }
.hero > .wrap { display: grid; gap: 28px; }
.hero h1 { font: 400 clamp(40px, 5.2vw, 72px)/1.02 var(--serif); letter-spacing: -0.025em; margin: 0 0 18px; max-width: 12ch; text-wrap: balance; }
.hero .sub { font-size: 18px; color: var(--muted); max-width: 30rem; margin: 0 0 26px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.btn:hover { background: #4A3139; }
.soon { font-size: 15px; font-weight: 500; color: var(--muted); }

.stage { position: relative; container-type: inline-size; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 32px; background: var(--cubby-pink); }
.stage .phone { --w: 70cqw; position: absolute; left: 7cqw; top: 8cqw; }
.stage .float { position: absolute; right: 4cqw; bottom: 6cqw; width: 60cqw; }

/* A phone drawn in CSS around a real screen (no Apple device artwork). Every phone is taller than the stage or cell
   it stands in, which cuts it off, so it is drawn open at the bottom. */
.phone { --w: 300px; width: var(--w); padding: calc(var(--w) * 0.03) calc(var(--w) * 0.03) 0; border-radius: calc(var(--w) * 0.165) calc(var(--w) * 0.165) 0 0; background: var(--ink); box-shadow: 0 0 0 1px rgba(43, 26, 31, 0.08), 0 32px 64px -28px rgba(98, 40, 64, 0.45), 0 14px 28px -18px rgba(98, 40, 64, 0.3); }
.phone picture { display: block; }
.phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * 0.135) calc(var(--w) * 0.135) 0 0; background: var(--bg); }
/* The hero phone holds two screens; the second waits on top, hidden, until the motion below shows it */
.screens { position: relative; overflow: hidden; border-radius: calc(var(--w) * 0.135) calc(var(--w) * 0.135) 0 0; }
.screens .next { position: absolute; inset: 0; opacity: 0; }

/* A part of a screen, shown at a readable size: the shade match card, the shade row, the price table */
.float img, .slice img { display: block; width: 100%; height: auto; background: #fff; }
.float img { border-radius: 16px; box-shadow: 0 0 0 1px rgba(43, 26, 31, 0.06), 0 24px 48px -20px rgba(98, 40, 64, 0.4), 0 8px 18px -10px rgba(98, 40, 64, 0.25); }
.slice img { border-radius: 20px; box-shadow: 0 0 0 1px rgba(43, 26, 31, 0.06), 0 20px 40px -24px rgba(98, 40, 64, 0.35); }

/* Features: three cells, each a headline, one sentence and a piece of the app */
.features { padding: 8px 0 24px; }
.grid { display: grid; gap: 16px; }
.cell { display: flex; flex-direction: column; gap: 28px; overflow: hidden; border-radius: 28px; padding: 32px 24px 0; background: var(--surface-muted); }
.cell.pink { background: var(--cubby-pink); }
.cell.mauve { background: var(--mauve-wash); }
.cell h2 { font: 400 clamp(28px, 3.2vw, 38px)/1.1 var(--serif); letter-spacing: -0.015em; margin: 0 0 12px; max-width: 18ch; text-wrap: balance; }
.cell p { margin: 0; max-width: 30rem; color: var(--muted); }
.cell .slice { width: 100%; max-width: 520px; margin: auto auto 28px; }
.cell .phone { --w: min(72%, 280px); max-height: 380px; overflow: hidden; margin: auto auto 0; }
@supports (width: 1cqw) {
  .cell { container-type: inline-size; }
  .cell .phone { --w: min(72cqw, 280px); }
}

/* Discover: some of its real filters, drawn as the app's chips rather than a screenshot */
.cell.discover { background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.chips { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.chips li { padding: 9px 16px; border-radius: 999px; background: var(--surface-muted); font-size: 15px; font-weight: 500; color: var(--text); }
.chips .on { background: var(--ink); color: #fff; }
.chips .sale { background: var(--accent); color: #fff; }

/* Also in the app: short notes in a row */
.more { padding: 40px 0 24px; }
.more-list { display: grid; gap: 20px 40px; margin: 0; }
.more-list div { border-top: 1px solid var(--rule); padding-top: 16px; }
.more-list dt { font-weight: 600; margin: 0 0 4px; }
.more-list dd { margin: 0; color: var(--muted); }

/* Privacy, plainly */
.promise { padding: 40px 0; }
.promise-panel { border-radius: 28px; background: var(--cubby-pink); padding: clamp(32px, 6vw, 72px); }
.promise-panel h2 { font: 400 clamp(32px, 4.6vw, 54px)/1.06 var(--serif); letter-spacing: -0.02em; margin: 0 0 20px; }
.promise-panel h2 span { white-space: nowrap; }
.promise-panel p { margin: 0 0 14px; max-width: 34rem; font-size: 18px; }
.promise-panel p:last-child { margin: 22px 0 0; font-weight: 600; }

/* Questions; the plus is drawn, so screen readers have nothing to read out */
.section-title { font: 400 clamp(32px, 4vw, 46px)/1.08 var(--serif); letter-spacing: -0.015em; margin: 0 0 24px; }
.faq { padding: 56px 0 40px; }
.faq-grid { display: grid; gap: 8px; }
.faq-list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.mk { position: relative; flex: none; width: 14px; height: 14px; }
.mk::before, .mk::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--muted); }
.mk::after { transform: rotate(90deg); transition: transform 0.2s ease; }
.faq details[open] .mk::after { transform: rotate(0deg); }
.faq details p { margin: 0 0 20px; max-width: 38rem; color: var(--muted); }
.faq details a { color: var(--text); }

/* Last call */
.cta { padding: 64px 0 88px; }
.cta h2 { font: 400 clamp(36px, 5.4vw, 64px)/1.04 var(--serif); letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
.cta p { margin: 0 0 30px; font-size: 19px; color: var(--muted); max-width: 32rem; }

/* Motion, none of it with reduced motion. The hero rises in, then its phone slowly scrolls the shelf and cross-fades
   to the wishlist and back (the only loop, paused while pointed at). Further down, pieces rise in as they scroll into
   view and the wishlist scrolls with the page, where the browser supports scroll-driven animation; elsewhere they
   simply stand still. */
@media (prefers-reduced-motion: no-preference) {
  .stage .phone, .stage .float { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .stage .float { animation-delay: 0.12s; }
  .screens picture { animation: drift 14s ease-in-out 1s infinite; }
  .screens .next { animation: drift 14s ease-in-out 1s infinite, swap 14s ease-in-out 1s infinite; }
  .stage:hover .screens picture { animation-play-state: paused; }
  @supports (animation-timeline: view()) {
    .cell .slice, .chips li, .more-list div, .promise-panel { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .chips li:nth-child(3n + 2) { animation-range: entry 20% entry 80%; }
    .chips li:nth-child(3n) { animation-range: entry 30% entry 90%; }
    .cell .phone img { animation: scroll-screen linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
    .band { animation: fill linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes drift { 0%, 6% { transform: translateY(0); } 40%, 54% { transform: translateY(-12%); } 88%, 100% { transform: translateY(0); } }
@keyframes swap { 0%, 44% { opacity: 0; } 50%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes scroll-screen { to { transform: translateY(-22%); } }
@keyframes fill { from { clip-path: inset(0 100% 0 0); } }

/* Phones: the download button stays at hand at the bottom of the screen */
.dock { display: none; }
@media (max-width: 719px) {
  .dock { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(251, 243, 241, 0.94); border-top: 1px solid var(--rule); }
  .dock .btn { min-height: 46px; padding: 0 22px; white-space: nowrap; }
  .dock .soon { font-size: 13px; line-height: 1.3; text-align: right; }
}
/* ...and slides up only once the hero's own button has scrolled away */
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .dock { animation: dock-in linear both; animation-timeline: scroll(root); animation-range: 420px 520px; }
  }
}
@keyframes dock-in { from { transform: translateY(110%); } }

@media (max-width: 719px) {
  .top-link { display: none; }
  .stage { margin-inline: auto; border-radius: 26px; }
  .cell { padding: 28px 20px 0; border-radius: 24px; }
}
@media (min-width: 720px) {
  .hero > .wrap { justify-items: start; }
  .stage { justify-self: center; }
  .more-list { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell.wide { grid-column: 1 / -1; }
  .cell { padding: 40px 36px 0; }
}
@media (min-width: 960px) {
  .top { padding: 24px 0; }
  .hero { padding: 40px 0 96px; }
  .hero > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
  .stage { max-width: none; aspect-ratio: 1 / 1.02; }
  .stage .phone { --w: 54cqw; left: 10cqw; top: 9cqw; }
  .stage .float { width: 56cqw; right: 5cqw; bottom: 8cqw; }
  .grid { gap: 20px; }
  .cell { padding: 48px 48px 0; }
  .cell.wide { flex-direction: row; align-items: center; gap: 48px; padding-bottom: 48px; }
  .cell.wide .cell-copy { flex: 1 1 0; }
  .cell.wide .slice { flex: 0 1 520px; margin: 0; }
  .cell.wide .chips { flex: 0 1 520px; margin: 0; }
  .more-list { grid-template-columns: repeat(4, 1fr); }
  .cell .phone { max-height: 440px; }
  .faq { padding-top: 80px; }
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; }
  .cta { padding: 96px 0 112px; }
}

/* ---------- Shade band: twenty foundation depths, lightest to deepest ---------- */
.band { display: flex; height: clamp(72px, 12vw, 140px); }
.band i { flex: 1; }
/* classes, not style attributes, so the CSP needs no unsafe-inline */
.band i:nth-child(1) { background: #F6E2D2; }
.band i:nth-child(2) { background: #F2D8C3; }
.band i:nth-child(3) { background: #EECEB4; }
.band i:nth-child(4) { background: #EAC4A6; }
.band i:nth-child(5) { background: #E5BA98; }
.band i:nth-child(6) { background: #DFAF8B; }
.band i:nth-child(7) { background: #D8A47E; }
.band i:nth-child(8) { background: #D09872; }
.band i:nth-child(9) { background: #C78C66; }
.band i:nth-child(10) { background: #BD805B; }
.band i:nth-child(11) { background: #B27450; }
.band i:nth-child(12) { background: #A66846; }
.band i:nth-child(13) { background: #995D3D; }
.band i:nth-child(14) { background: #8C5235; }
.band i:nth-child(15) { background: #7E482E; }
.band i:nth-child(16) { background: #703F28; }
.band i:nth-child(17) { background: #623622; }
.band i:nth-child(18) { background: #552E1D; }
.band i:nth-child(19) { background: #482718; }
.band i:nth-child(20) { background: #3C2014; }

/* ---------- Policy and support pages: one reading column ---------- */
h1 { font: 400 clamp(46px, 8vw, 96px)/1 var(--serif); letter-spacing: -0.025em; margin: 0 0 32px; max-width: 11ch; }
.doc { padding: 7vh 0 88px; }
.doc > * { max-width: 40rem; }
.doc h1 { font-size: clamp(40px, 6vw, 64px); max-width: 14ch; margin-bottom: 20px; }
.doc .lede { font-size: 19px; color: var(--muted); margin: 0 0 8px; }
.doc .updated { font-size: 15px; color: var(--muted); margin: 0 0 40px; }
.doc h2 { font: 400 28px/1.2 var(--serif); letter-spacing: -0.01em; margin: 56px 0 14px; padding-top: 22px; border-top: 1px solid var(--rule); }
.doc h3 { font: 600 17px/1.35 var(--sans); margin: 28px 0 6px; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--muted); }
.doc strong { font-weight: 600; }
.doc .contents { list-style: none; padding: 0; margin: 0 0 8px; columns: 2; column-gap: 32px; font-size: 15px; }
.doc .contents li { break-inside: avoid; }
.doc dl { margin: 0 0 14px; }
.doc dt { font-weight: 600; margin-top: 16px; }
.doc dd { margin: 2px 0 0; color: var(--muted); }
.doc .aside { color: var(--muted); font-size: 15px; }

/* What the owner still has to fill in. Never published: `just deploy-web` refuses pages that show one. */
mark.owner { background: #FBE7A1; color: #3A2E05; padding: 0 3px; border-radius: 3px; }

footer { border-top: 1px solid var(--rule); padding: 24px 0 40px; font-size: 14px; color: var(--muted); }
.band + footer, main:has(> .band:last-child) + footer { border-top: 0; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 720px) {
  .wrap { width: calc(100% - 32px); }
  .doc { padding-top: 4vh; }
  .doc .contents { columns: 1; }
  .doc h2 { margin-top: 44px; }
}

/* ---------- Guides: articles that answer a search, then point to the app ---------- */
.learn { padding: 56px 0 8px; }
.learn-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.learn-list a { display: block; height: 100%; padding: 20px 22px; border-radius: 20px; background: var(--surface-muted); font-weight: 600; text-decoration: none; }
.learn-list a:hover { background: var(--cubby-pink); }
.learn p a { font-weight: 600; }
@media (min-width: 720px) { .learn-list { grid-template-columns: repeat(3, 1fr); } }

.guide { padding-top: 3vh; }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.crumbs a { color: var(--muted); }
.guide h1 { font-size: clamp(36px, 5.4vw, 56px); max-width: 18ch; }
.guide a { color: var(--accent); }
.guide ol { margin: 0 0 14px; padding-left: 1.3em; }
.guide ol li { margin-bottom: 8px; }
.guide .shot { margin: 28px 0; }
.guide .shot img { display: block; width: 100%; height: auto; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(43, 26, 31, 0.06), 0 20px 40px -24px rgba(98, 40, 64, 0.35); }
.guide .phone-shot { max-width: 300px; }
.guide .phone-shot img { max-height: 520px; object-fit: cover; object-position: top; }
.guide figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.get-app { margin: 56px 0 8px; padding: clamp(28px, 5vw, 48px); border-radius: 28px; background: var(--cubby-pink); }
.doc .get-app h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: clamp(28px, 4vw, 40px); }
.get-app p { max-width: 34rem; }
.get-app .actions { margin-top: 22px; }
.get-app .btn { color: #fff; }
.related { list-style: none; padding: 0 !important; }
.related li { border-top: 1px solid var(--rule); padding: 12px 0; margin: 0 !important; }
.guide-list { list-style: none; padding: 0 !important; margin: 32px 0 0; display: grid; gap: 12px; max-width: none !important; }
.guide-list li { margin: 0 !important; }
.guide-list a { display: block; padding: 22px 24px; border-radius: 20px; background: var(--surface-muted); text-decoration: none; color: var(--text); }
.guide-list a:hover { background: var(--cubby-pink); }
.guide-list strong { display: block; font: 400 24px/1.2 var(--serif); margin-bottom: 6px; }
.guide-list span { color: var(--muted); font-size: 15px; }
@media (min-width: 720px) { .guide-list { grid-template-columns: repeat(2, 1fr); } }
.guide .now { margin: 8px 0 32px; padding: 24px 26px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.doc .guide .now h2, .guide .now h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 26px; }
.guide .now .aside { margin: 14px 0 0; }