/* Mote — one motif: the notch (flat top, rounded bottom, flared shoulders) is the hero, the masks, the button and the band. */
:root {
  --ground: #0e0d12;     /* the page */
  --raised: #1b1a21;     /* one tone step up: tiles, fields */
  --notch: #000;         /* the motif */
  --ink: #edebe7;        /* near-white, a touch warm */
  --muted: #aba8a2;      /* secondary text, still 4.5:1 on the ground */
  --accent: #8fcbf2;     /* the glyph's sky: the action. Orange stays the app's "needs you" */
  --on-accent: #06202d;
  --needs: #f08a5d;
  --sky: #96c8f2; --peach: #fcd3a8; --lilac: #cacce6; --mint: #a8ddb5;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --pixel: "Pixelify Sans", var(--sans);
  /* five steps */
  --s-display: clamp(52px, 6.4vw, 100px);
  --s-head: clamp(30px, 3.6vw, 56px);
  --s-lede: clamp(18px, 1.35vw, 21px);
  --s-body: 17px;
  --s-small: 15px;

  --margin: clamp(16px, 2.2vw, 32px);
  --gap-section: clamp(120px, 14vw, 200px);
  --r: 22px;             /* the notch's corner, everywhere */
  --ease: cubic-bezier(.2, .9, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--s-body)/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font: 0.92em ui-monospace, "SF Mono", Menlo, monospace; }

/* --- the motif ------------------------------------------------------------------------------------------- */
/* A notch: black, flat top, rounded bottom corners, a concave shoulder flaring into the top edge on each side. */
.shoulder { position: absolute; top: 0; width: var(--sh, 20px); height: var(--sh, 20px); background: var(--notch);
  -webkit-mask: var(--shoulder) no-repeat center / 100% 100%; mask: var(--shoulder) no-repeat center / 100% 100%; }
.shoulder.left { right: 100%; --shoulder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0H20V20C20 9 11 0 0 0Z'/%3E%3C/svg%3E"); }
.shoulder.right { left: 100%; --shoulder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 0H0V20C0 9 9 0 20 0Z'/%3E%3C/svg%3E"); }

.btn { display: inline-block; padding: 16px 30px 18px; background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-weight: 650; border-radius: 0 0 var(--r) var(--r); transition: transform .18s var(--ease), background-color .18s; }
.btn:hover { background: #a9d8f6; transform: translateY(2px); }
.btn:active { transform: translateY(4px); }
.btn.small { padding: 10px 18px 12px; font-size: var(--s-small); border-radius: 0 0 14px 14px; }

/* --- bar ------------------------------------------------------------------------------------------------- */
.bar { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--margin); }
.wordmark { font: 600 32px/1 var(--pixel); text-decoration: none; letter-spacing: .02em; }
.bar nav { display: flex; gap: 28px; align-items: center; font-size: var(--s-small); }
.bar nav a { text-decoration: none; color: var(--ink); }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar-action { color: var(--accent) !important; font-weight: 650; }

/* --- hero: the giant notch ------------------------------------------------------------------------------- */
.hero { position: relative; min-height: 92svh; overflow: hidden; display: grid; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding: 120px var(--margin) 80px 8vw; max-width: 46vw; display: grid; gap: 24px; }
h1 { font-size: var(--s-display); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
.lede { font-size: var(--s-lede); max-width: 34em; }
.fine { font-size: var(--s-small); color: var(--muted); }
.giant-notch { position: absolute; top: 0; left: 52vw; width: 120vh; height: 74svh; background: var(--notch);
  border-radius: 0 0 calc(var(--r) * 4) calc(var(--r) * 4); --sh: 64px; }
.giant-tier { position: absolute; left: 0; right: 0; bottom: 9svh; padding: 0 40px; display: grid; gap: 14px; justify-items: start;
  margin-left: 7vh; }
.tier-dim, .tier-bright { white-space: nowrap; display: flex; align-items: center; gap: .4em; }
.giant-tier .tier-dim { font-size: clamp(18px, 1.9vw, 30px); color: rgba(237, 235, 231, .62); }
.giant-tier .tier-bright { font-size: clamp(30px, 3.4vw, 54px); font-weight: 560; letter-spacing: -.02em; gap: .55em; }
.who { font-weight: 650; color: #a98be0; }
.more { color: rgba(237, 235, 231, .4); padding-left: .4em; }
.glyph { display: block; flex: none; }
.swap { transition: opacity .18s ease, filter .18s ease; }
.swap.out { opacity: 0; filter: blur(4px); }

/* --- showcase: a notch on a disc --------------------------------------------------------------------------- */
/* The notch sits in the middle of the disc. Its type, padding and glyph are sized to the disc's width (cqi), so the
   longest state (~70% of the width) always clears the circle's edge, from phone to desktop. */
.showcase { min-height: 100svh; margin-top: 40px; padding: 0 var(--margin); display: grid; align-items: center;   /* list, disc and fact share one centre line */
  grid-template-columns: minmax(0, 1fr) min(78vh, 52vw) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 56px); overflow: clip; }
.disc-stage { grid-column: 2; grid-row: 1; position: relative; aspect-ratio: 1; align-self: center; container-type: inline-size; }
.disc { position: absolute; inset: 0; border-radius: 50%; background: var(--peach); transition: background-color .3s ease; }
/* its top sits 150 app points above the centre, so it grows down into the disc and the 600x300 preview ends up centred */
.moment-notch { position: absolute; left: 50%; top: calc(50% - var(--u, .8) * 150px); translate: -50% 0; max-width: 86%; background: var(--notch); white-space: nowrap;
  padding: 4.6cqi 4.2cqi 3.8cqi; border-radius: 0 0 var(--r) var(--r); display: grid; gap: 1cqi; justify-items: center; --sh: 3.2cqi; }
.moment-notch .tier-dim { font-size: clamp(8px, 2.6cqi, 19px); color: rgba(237, 235, 231, .62); gap: .35em; }
.moment-notch .tier-bright { font-size: clamp(10px, 3.2cqi, 23px); font-weight: 560; letter-spacing: -.015em; gap: .55em; }
.moment-list { grid-column: 1; grid-row: 1; display: grid; justify-items: start; gap: 2px; }
.moment-list h2, .moment-list button { font-size: var(--s-head); line-height: 1.12; letter-spacing: -.02em; }
.moment-list h2 { color: var(--muted); font-weight: 400; margin-bottom: 6px; }
.moment-list button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap;
  transition: color .2s, translate .2s var(--ease); }
.moment-list button:hover { color: var(--ink); translate: 6px 0; }
.moment-list button[aria-checked="true"] { color: var(--ink); }
.moment-list button[aria-checked="true"]::before { content: ""; display: inline-block; width: .5em; height: .36em; margin-right: .3em;
  vertical-align: .14em; background: var(--accent); border-radius: 0 0 .14em .14em; }
.moment-fact { grid-column: 3; grid-row: 1; align-self: center; max-width: 300px; font-size: var(--s-lede); }

/* --- the try-me notch (M-12, notch-demo.js): opens like the app. Inside .xp, 1em = one app point (--u px), so sizes
   below are NotchLayout.swift's: rail 42, top inset 28, rows 46, list pane 200, pad 10, radius 18. --------------------- */
.moment-notch { cursor: pointer; transition: width .34s var(--ease), height .34s var(--ease); }
/* open, it takes the app's look: notch #0B0B0C, an 18pt corner, no shadow, 20pt shoulders (flare = .08·height + 3, max 20) */
.moment-notch.open { --notch: #0b0b0c; background: var(--notch); padding: 0; max-width: none; cursor: default; z-index: 3;
  border-radius: 0 0 calc(var(--u) * 18px) calc(var(--u) * 18px); --sh: calc(var(--u) * 20px); }
.moment-notch .shoulder { transition: width .34s var(--ease), height .34s var(--ease); }
.moment-notch .tier-dim, .moment-notch .tier-bright { transition: opacity .15s; }
.moment-notch.open .tier-dim, .moment-notch.open .tier-bright { position: absolute; opacity: 0; pointer-events: none; }
.xp { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; display: flex; padding-top: 28em; opacity: 0;
  pointer-events: none; font: 400 calc(var(--u, 1) * 1px)/1.2 var(--sans); white-space: normal; text-align: left; transition: opacity .34s var(--ease); }
.moment-notch.open .xp { opacity: 1; pointer-events: auto; }
.xp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.xp b { font-weight: 600; }
.xp-rail { width: 42em; flex: none; background: #08080a; display: flex; flex-direction: column; align-items: center; gap: 4em; padding: 8em 0; }
.xp-rail-btn { width: 30em; height: 30em; border-radius: 8em; display: grid; place-items: center; color: rgba(244, 239, 230, .52); }
.xp-rail-btn svg { width: 18em; height: 18em; }   /* SF Symbols at 14pt draw about 18pt wide */
.xp-rail-btn.on { background: rgba(244, 239, 230, .1); color: #f4efe6; }
.xp-rail-btn.soon { opacity: .45; }
.xp-body { flex: 1; min-width: 0; display: flex; gap: 10em; padding: 2em 10em 10em 2em; }
.xp-list { flex: 1; min-width: 0; }
.xp-body.detail .xp-list { flex: none; width: 200em; }
.xp-head { display: flex; align-items: center; gap: 8em; padding: 0 4em 5em 8em; white-space: nowrap; }
.xp-head b { font-size: 14em; color: #f4efe6; }
.xp-head span { font-size: 10em; font-weight: 600; }
.xp-next { margin-left: auto; font-size: 11em !important; font-weight: 600 !important; padding: .27em .73em !important; color: #f4efe6 !important;
  background: #111019 !important; border-radius: .64em; box-shadow: inset 0 0 0 calc(var(--u) * 1px) rgba(244, 239, 230, .12); }
.xp-row { width: 100%; height: 46em; display: flex; align-items: center; gap: 8em; padding-right: 8em !important; border-radius: 9em;
  text-align: left; }
.xp-row:not(.needs) > * { opacity: .5; }   /* calm rows dim their content; the hover/selected background stays full */
.xp-row:hover, .xp-row.sel { background: rgba(244, 239, 230, .09) !important; }
.xp-stripe { width: 3em; align-self: stretch; margin: 7em 0; border-radius: 3em; flex: none; }
.xp-who { display: flex; flex-direction: column; gap: 1em; min-width: 0; flex: 1; }
.xp-who b { font-size: 13.5em; }
.xp-why { font-size: 10.5em; color: rgba(244, 239, 230, .52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-row.needs .xp-why { color: #f4efe6; }
.xp-ctx { font-size: 10em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-time { font-size: 10em; color: rgba(244, 239, 230, .52); font-variant-numeric: tabular-nums; }
.xp-card { flex: 1; min-width: 0; background: #111019; border-radius: 12em; box-shadow: inset 0 0 0 1em rgba(244, 239, 230, .12);
  overflow: hidden; display: flex; flex-direction: column; animation: xp-in .34s var(--ease); }
.xp-body.fade { animation: xp-in .17s ease-out; }
.xp-card-head { display: flex; align-items: center; gap: 9em; padding: 11em 13em; border-bottom: 1em solid rgba(244, 239, 230, .12); }
.xp-card-head > i { width: 24em; height: 24em; border-radius: 6em; flex: none; }
.xp-card-head span { display: flex; flex-direction: column; gap: 2em; }
.xp-card-head b { font-size: 14em; }
.xp-card-head small { font-size: 10em; color: rgba(244, 239, 230, .52); white-space: nowrap; }
.xp-badge { margin-left: auto; font-size: 10em; font-weight: 600; color: #0b0b0c; padding: .3em .7em; border-radius: 2em; }
.xp-card-body { padding: 11em 13em; display: flex; flex-direction: column; gap: 9em; overflow-y: auto; scrollbar-width: none; }
.xp-need { display: flex; flex-direction: column; align-items: flex-start; gap: 7em; padding: 9em 11em; border-radius: 9em;
  background: rgba(217, 119, 87, .16); color: #f4efe6; }
.xp-need-label { font-size: 11em; font-weight: 600; color: #d97757; }
.xp-need > span:nth-child(2) { font-size: 12.5em; }
.xp-need small { font-size: 10.5em; color: rgba(244, 239, 230, .52); }
.xp-jump { font-size: 11em !important; font-weight: 600 !important; color: #0b0b0c !important; background: #2fa3a0 !important;
  padding: .45em .9em !important; border-radius: .64em; }
.xp-feed { font-size: 10.5em; color: #f4efe6; display: flex; align-items: baseline; gap: .6em; white-space: nowrap; min-width: 0; }
.xp-feed span:first-child { font-size: 1.24em; }   /* the app leaves the icon at the body size, 13pt */
.xp-feed span:last-child { overflow: hidden; text-overflow: ellipsis; }
.xp-feed span, .xp-diff span { color: rgba(244, 239, 230, .52); }
.xp-diff { font-size: 10.5em; color: #f4efe6; display: flex; gap: .6em; padding: .45em .65em; border-radius: .65em; background: rgba(0, 0, 0, .3); }
.xp-diff .add { margin-left: auto; color: #8fa98b; font-weight: 400; } .xp-diff .del { color: #d97757; font-weight: 400; }
.xp-files { font-size: 10em; color: rgba(244, 239, 230, .34); padding: .6em .8em; border-radius: .7em; background: #0b0b0c; }
.xp-activity { font-size: 11.5em; color: rgba(244, 239, 230, .52); display: flex; align-items: center; gap: .2em; }
.xp-caret { width: .52em; height: 1.04em; background: #2fa3a0; animation: xp-blink 1s linear infinite; }
.xp-usage { flex: 1; padding: 10em 4em 2em 12em;   /* with .xp-body's: the app's 12/14 */ display: flex; flex-direction: column; gap: 8em; color: rgba(244, 239, 230, .52); }
.xp-usage-top { display: flex; align-items: center; gap: 12em; }
.xp-usage-top span { display: flex; flex-direction: column; gap: 3em; }
.xp-usage-top b { font-size: 26em; color: #f4efe6; }
.xp-usage-top small { font-size: 11em; white-space: nowrap; }
.xp-usage-top svg { flex: 1; height: 40em; overflow: visible; }
.xp-usage-top polyline { fill: none; stroke: #2fa3a0; stroke-width: calc(var(--u) * 2px); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.xp-usage-top .dot { stroke: #2fa3a0; stroke-width: calc(var(--u) * 6px); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xp-week { font-size: 10.5em; color: rgba(244, 239, 230, .34); }
.xp-bars { display: flex; flex-direction: column; gap: 5em; margin-top: 2em; }
.xp-bar { display: flex; align-items: center; gap: 8em; }
.xp-bar span { font-size: 11em; } .xp-bar span:first-child { width: 5.8em; } .xp-bar span:last-child { width: 3.8em; text-align: right; font-variant-numeric: tabular-nums; }
.xp-bar > i { flex: 1; height: 9em; border-radius: 5em; background: #221d31; overflow: hidden; } .xp-bar > i > i { display: block; height: 100%; background: #2fa3a0; border-radius: inherit; }
.xp-soon { flex: 1; padding: 12em 6em; display: flex; flex-direction: column; align-items: flex-start; gap: 8em; color: rgba(244, 239, 230, .52); }
.xp-soon b { font-size: 14em; color: #f4efe6; }
.xp-soon-tag { font-size: 10em; font-weight: 600; color: #c9a227; padding: .2em .6em; border-radius: .5em; background: rgba(201, 162, 39, .14); }
.xp-soon p { font-size: 12em; max-width: 20em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes xp-in { from { opacity: 0; } }
@keyframes xp-blink { 50% { opacity: 0; } }
/* "try me": a hand-drawn arrow from the disc's upper right down to the notch; it leaves after the first open */
.try-me { position: absolute; right: -2%; top: 14%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: 600 clamp(15px, 1.4vw, 20px)/1 var(--sans); color: var(--ink); transform: rotate(-6deg); pointer-events: none; transition: opacity .3s; }
.try-me svg { order: 2; width: clamp(44px, 4.6vw, 64px); margin-left: -18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.try-me.gone { opacity: 0; }
.jump-hint { position: absolute; left: 50%; bottom: 6%; translate: -50% 8px; width: max-content; max-width: 90%; padding: 8px 14px;
  border-radius: 12px; background: rgba(14, 13, 18, .88); color: var(--ink); font-size: var(--s-small); opacity: 0; pointer-events: none;
  transition: opacity .25s, translate .25s var(--ease); }
.jump-hint.show { opacity: 1; translate: -50% 0; }

/* --- features: sentences with switches ---------------------------------------------------------------------- */
.features { margin-top: var(--gap-section); }
.band { min-height: 20vh; display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 32px;
  padding: 28px var(--margin); transition: background-color .3s ease, color .3s ease; color: var(--muted); }
.band .say { font-size: var(--s-head); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; }
.band .then { grid-column: 1; font-size: 17px; max-width: 46em; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s var(--ease), opacity .3s, margin .3s; }
.band.on { color: #121117; }
.band.on .then { max-height: 6em; opacity: 1; margin-top: 10px; }
.band.on[data-tone="sky"] { background: var(--sky); }
.band.on[data-tone="peach"] { background: var(--peach); }
.band.on[data-tone="lilac"] { background: var(--lilac); }
.band.on[data-tone="mint"] { background: var(--mint); }
.switch { grid-column: 2; grid-row: 1; align-self: center; width: 2.4em; height: 1.4em; font-size: clamp(30px, 3.6vw, 56px);
  border: 0; padding: .14em; border-radius: 0 0 .5em .5em; background: var(--raised); cursor: pointer; transition: background-color .25s; }
.switch span { display: block; width: 1.12em; height: 1.12em; background: var(--muted); border-radius: 0 0 .32em .32em;
  transition: translate .25s var(--ease), background-color .25s; }
.switch[aria-checked="true"] { background: #121117; }
.switch[aria-checked="true"] span { translate: 1em 0; background: var(--ink); }

/* --- film: the motif as a frame --------------------------------------------------------------------------------- */
.film { margin-top: var(--gap-section); padding: 0 var(--margin); display: grid; gap: 18px; }
.film h2 { font-size: var(--s-display); line-height: 1; letter-spacing: -.035em; font-weight: 700; }
.film > p { font-size: var(--s-lede); max-width: 38em; }
.film-frame { position: relative; margin-top: 32px; background: var(--notch); border-radius: 0 0 calc(var(--r) * 2) calc(var(--r) * 2);
  overflow: hidden; --sh: 40px; }
.film-frame video { width: 100%; height: auto; object-fit: cover; background: var(--notch); }
.film-frame .wide { aspect-ratio: 16 / 9; } .film-frame .tall { aspect-ratio: 9 / 16; }
.film-frame .tall { display: none; }

/* --- how it works: drag through the stages --------------------------------------------------------------------- */
.how { margin-top: var(--gap-section); display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; }
.how-words { background: var(--raised); padding: 56px var(--margin); display: grid; align-content: start; gap: 20px; }
.how-words h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; max-width: 9em; }
.stage-note { font-size: var(--s-lede); max-width: 26em; }
.how-picture { position: relative; background: #24222b; display: grid; place-items: center; padding: 48px; }
.stage-img { grid-area: 1 / 1; width: min(100%, 520px); opacity: 0; transition: opacity .2s ease; border-radius: 0 0 var(--r) var(--r); }
.stage-img.on { opacity: 1; }
.stage-img.code { margin: 0; padding: 28px 30px; background: var(--notch); color: var(--ink); font-size: 15px; line-height: 1.6;
  white-space: pre; overflow: auto; }
.stage-bar { grid-column: 1 / -1; padding: 28px var(--margin) 0; }
#stage { width: 100%; appearance: none; background: none; height: 32px; cursor: pointer; }
#stage::-webkit-slider-runnable-track { height: 8px; background: var(--raised); }
#stage::-webkit-slider-thumb { appearance: none; width: 32px; height: 32px; margin-top: -12px; background: var(--accent); border-radius: 0 0 10px 10px; }
#stage::-moz-range-track { height: 8px; background: var(--raised); }
#stage::-moz-range-thumb { width: 32px; height: 32px; border: 0; background: var(--accent); border-radius: 0 0 10px 10px; }
.stage-names { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: space-between; font-size: var(--s-small); color: var(--muted); }
.stage-names .on { color: var(--ink); }

/* --- faq: filled tiles ---------------------------------------------------------------------------------------- */
.faq { margin-top: var(--gap-section); padding: 0 var(--margin); display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.faq h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; position: sticky; top: 96px; align-self: start; }
.tiles { display: grid; gap: 8px; }
details { background: var(--raised); border-radius: 0 0 var(--r) var(--r); transition: background-color .25s; }
summary { list-style: none; cursor: pointer; min-height: 72px; padding: 22px 64px 22px 24px; position: relative; font-size: var(--s-lede); font-weight: 560; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 16px; height: 3px; background: currentColor;
  transition: rotate .25s var(--ease); }
summary::after { rotate: 90deg; }
details[open] { background: var(--accent); color: var(--on-accent); }
details[open] code { color: inherit; }
details[open] summary::after { rotate: 0deg; }
details > :not(summary) { margin: 0 24px 22px; max-width: 52ch; font-size: 17px; }
details img { max-width: 100%; border-radius: 0 0 14px 14px; }
details pre { background: #041722; color: #cfe8f9; padding: 16px 18px; border-radius: 0 0 14px 14px; overflow: auto; font-size: 14px; max-width: none; }

/* --- cta: a sentence with a blank ------------------------------------------------------------------------------- */
.cta { margin-top: var(--gap-section); padding: 0 var(--margin); }
.ask-line { font-size: var(--s-display); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; }
.ask-line input, .ask-line button { font: inherit; letter-spacing: inherit; height: 1.15em; vertical-align: baseline; border: 0; }
.ask-line input { width: 7.5em; padding: 0 .3em; background: var(--raised); color: var(--ink); border-radius: 0 0 .28em .28em; }
.ask-line input::placeholder { color: var(--muted); }
.ask-line button { padding: 0 .35em; background: var(--accent); color: var(--on-accent); cursor: pointer; border-radius: 0 0 .28em .28em;
  transition: translate .18s var(--ease); }
.ask-line button:hover { translate: 0 .05em; }
.ask-note, .ask-done { margin-top: 18px; font-size: var(--s-small); color: var(--muted); }

/* --- footer: the mark, built large ------------------------------------------------------------------------------ */
.end { margin-top: var(--gap-section); padding: 0 var(--margin) 28px; }
.mark { width: 100%; height: auto; display: block; }
.mark rect { fill: var(--ink); }
.mark rect.lit { fill: var(--needs); }
.end-cols { margin-top: 56px; display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 32px; font-size: var(--s-small); }
.end-cols nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.end-cols nav a { text-decoration: none; } .end-cols nav a:hover { text-decoration: underline; }
.privacy { color: var(--muted); }
.end-row { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; font-size: var(--s-small); color: var(--muted); }

/* --- entrances (only with script; content is visible without it) ------------------------------------------------- */
.js .reveal, .js .showcase > *, .js .band, .js .how > *, .js details, .js .ask-line, .js .faq h2 { opacity: 0; translate: 0 24px; }
.js .in { opacity: 1 !important; translate: 0 0 !important; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.js .disc { scale: .9; } .js .disc.in { scale: 1; transition: scale 1.1s var(--ease), opacity .7s, background-color .3s; }
.js .film-frame { clip-path: inset(0 0 100% 0); } .js .film-frame.in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease), opacity .7s; }
.js .film-frame video { scale: 1.12; } .js .film-frame.in video { scale: 1; transition: scale 1.1s var(--ease); }
.js .giant-notch { opacity: 1; translate: 0 -12svh; } .js .giant-notch.in { translate: 0 0 !important; transition: translate 1s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .moment-notch, .xp, .xp-card, .jump-hint { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .showcase > *, .js .band, .js .how > *, .js details, .js .ask-line, .js .faq h2, .js .giant-notch,
  .js .film-frame, .js .film-frame video, .js .disc { opacity: 1; translate: none; scale: none; clip-path: none; transition: none !important; }
}

/* --- phone: its own composition -------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --s-display: min(11.5vw, 76px); --s-head: min(8vw, 44px); }
  .bar nav a:not(.bar-action) { display: none; }
  .hero { min-height: 100svh; align-items: start; }
  .hero-copy { max-width: none; padding: 92px var(--margin) 0; gap: 18px; }
  .giant-notch { top: auto; bottom: 0; left: -15vw; width: 130vw; height: 40svh; border-radius: 0 0 48px 48px; --sh: 0px; }
  .js .giant-notch { translate: 0 12svh; }
  .giant-tier { bottom: 7svh; margin-left: 0; padding: 0 calc(15vw + var(--margin)); }
  .giant-tier .tier-dim { font-size: 15px; } .giant-tier .tier-bright { font-size: 23px; }
  .showcase { min-height: auto; grid-template-columns: 1fr; gap: 24px; }
  .disc-stage, .moment-list, .moment-fact { grid-column: 1; grid-row: auto; }
  .disc-stage { width: min(86vw, 520px); justify-self: center; }
  .moment-list { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 6px; }
  .moment-list h2 { display: none; }
  .moment-list button { white-space: nowrap; }
  .moment-fact { position: static; translate: none; width: auto; font-size: 16px; }
  .band { min-height: 132px; grid-template-columns: 1fr 64px; }
  .band .say { font-size: var(--s-head); }
  .switch { font-size: 30px; min-width: 44px; }
  .film-frame .wide { display: none; } .film-frame .tall { display: block; }
  .how { grid-template-columns: 1fr; }
  .how-picture { order: -1; min-height: 46svh; padding: 24px; }
  .faq { grid-template-columns: 1fr; } .faq h2 { position: static; }
  summary { min-height: 64px; }
  .ask-line input { display: block; width: 100%; margin: .1em 0; }
  .end-cols { grid-template-columns: 1fr; }
}