@import url('./brand.css');

/* The home and family recordings pages (redrawn September 26, 2026, docs/decisions.md).

   One idea carries the page: sound seen as light. The opening screen's prism light stays
   behind the first screen, blurred like a desktop wallpaper, and the drop box and the
   player sit on it as frosted glass; a repaired waveform takes the light's colours. The
   reading sections are quiet off-white with hairline cards and no shadows. Headlines are
   Newsreader, text is Mona Sans, SOLIPSIUM stays in the logo's Cormorant. Champagne gold
   marks only what to press, and the spectrum is only ever light, never a button or a
   label. brand.css supplies the navigation, the skip link and the reduced-motion rule. */
:root {
  --night: #07080a;
  --snow: #f3f1ec;
  --snow-2: #aaa8a2;
  --snow-3: #8d8b85;
  --hair-dark: #ffffff1f;
  --paper: #fbfaf8;
  --mist: #f4f3ef;
  --card: #ffffff;
  --coal: #141414;
  --coal-2: #5a5955;
  --hair: #1414141a;
  --spectrum: #4676c3, #76d3e9, #eae8d4, #f5d47d, #cc9665, #866379;
  --accent: #d8b46a;
  --accent-hover: #e5c687;
  --accent-press: #c7a35a;
  --accent-deep: #b08a3e;
  --accent-ink: #85611f;
  --accent-glow: #e3c68e;
  --worse: #e5484d;
  --spring: cubic-bezier(.16,1,.3,1);
}
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body.site { background:var(--night); color:var(--snow); font:400 17px/1.55 var(--sans); letter-spacing:-.003em; }
.site h1,.site h2,.site h3 { font-family:var(--sans); }
.site ::selection { background:#d8b46a55; color:inherit; }
.site :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.band-mist :focus-visible,.band-paper :focus-visible { outline-color:var(--accent-ink); }
.site .skip-link { border-radius:999px; background:var(--accent); color:var(--coal); font-weight:600; }

/* Bands: each section says which surface it sits on, and its text follows. */
.band-dark { background:var(--night); color:var(--snow); }
.band-mist { background:var(--mist); color:var(--coal); }
.band-paper { background:var(--paper); color:var(--coal); }
.section { padding:136px 0; }
.wrap { width:min(1120px,100% - 48px); margin-inline:auto; }
/* A small label above a headline, with a short stroke of the spectrum before it. */
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before { content:''; width:18px; height:2px; border-radius:1px; background:linear-gradient(90deg,var(--spectrum)); }
.section-head .eyebrow { justify-content:center; }
.band-dark .eyebrow { color:var(--snow-2); }
.band-mist .eyebrow,.band-paper .eyebrow { color:var(--coal-2); }
.site .headline { margin:0; font-family:var(--serif); font-size:clamp(38px,4.6vw,58px); line-height:1.06; font-weight:500; font-variation-settings:'opsz' 72; letter-spacing:-.018em; text-wrap:balance; }
.lede { margin:0; font-size:clamp(17px,1.4vw,19px); line-height:1.5; font-weight:420; }
.band-dark .lede { color:var(--snow-2); }
.band-mist .lede,.band-paper .lede { color:var(--coal-2); }
.band-dark .lede strong { color:var(--snow); font-weight:600; }
.band-mist .lede strong,.band-paper .lede strong { color:var(--coal); font-weight:600; }
/* Headlines no longer set one phrase apart in italic gold (a look September 26's review
   found on too many generated pages); anything still marked so reads as the headline. */
.serif-accent { font:inherit; color:inherit; }
.section-head { max-width:820px; margin:0 auto 64px; text-align:center; }
.section-head .lede { max-width:34em; margin:22px auto 0; }
/* Headline on the left, the paragraph that explains it on the right. */
.split-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px 72px; align-items:end; margin-bottom:64px; }

/* Pills: gold for the one action. */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:12px 26px; border:0; border-radius:999px; background:var(--accent); color:var(--coal); font:600 17px/1.2 var(--sans); letter-spacing:-.01em; cursor:pointer; transition-property:background-color,transform,box-shadow; transition-duration:.18s; transition-timing-function:ease-out; }
.pill:hover { background:var(--accent-hover); }
.pill:active { background:var(--accent-press); transform:scale(.97); }
.pill svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* "Learn more" links, with a chevron that steps forward on hover. */
.more-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:17px; font-weight:500; }
.band-dark .more-link { color:var(--snow); }
.band-mist .more-link,.band-paper .more-link { color:var(--coal); }
.more-link svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--spring); }
.more-link { text-decoration:underline; text-decoration-color:currentColor; text-decoration-thickness:1px; text-underline-offset:5px; }
.more-link:hover { text-decoration-thickness:2px; }
.more-link:hover svg { transform:translateX(3px); }
.more-link.down:hover svg { transform:translateY(3px); }

/* Content arrives as it scrolls into view (reveal.js adds .js-reveal to the page first,
   so without the script everything is simply there). */
.js-reveal [data-reveal] { opacity:0; transition:opacity 1s ease; transition-delay:var(--delay,0s); }
.js-reveal [data-reveal].is-in { opacity:1; }
@media print { .js-reveal [data-reveal] { opacity:1; transform:none; filter:none; } }

/* The first screen: the promise, one action, and the product itself underneath. */
.hero { position:relative; isolation:isolate; padding:calc(124px + env(safe-area-inset-top)) 0 64px; overflow:hidden; text-align:center; }
/* What the opening light leaves behind: its six colours fanning in from above the left
   edge, blurred into a wallpaper the first screen sits on. Still, so it never needs a
   pause button; a fine grain over it keeps the blur from banding on 8-bit screens. */
.hero::before { content:''; position:absolute; z-index:-2; left:-24%; top:-58%; width:150%; height:150%; pointer-events:none; background:conic-gradient(from 98deg at 12% 22%,transparent 0deg,#4676c3 5deg,#76d3e9 12deg,#eae8d4 19deg,#f5d47d 26deg,#cc9665 33deg,#866379 40deg,transparent 49deg); filter:blur(64px); opacity:.36; }
.hero::after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.05; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hero-eyebrow { position:relative; margin:0 0 16px; color:var(--snow-2); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
#hero-title { position:relative; max-width:11em; margin:0 auto; font-family:var(--serif); font-size:clamp(50px,7.2vw,96px); line-height:1; font-weight:500; font-variation-settings:'opsz' 72; letter-spacing:-.022em; color:var(--snow); }
/* Lighter than the page's grey: it sits on the brightest part of the light (4.5:1 checked). */
.hero-lede { position:relative; max-width:31em; margin:24px auto 0; color:#d6d4ce; font-size:clamp(17px,1.5vw,20px); line-height:1.5; font-weight:420; }
.hero-lede strong { color:var(--snow); font-weight:600; }
/* "Free for a limited time", shown only while payments are closed (a "test" pricing note).
   Plain text: on these pages gold means something to press. */
.hero-offer { position:relative; max-width:42em; margin:14px auto 0; padding-inline:20px; color:var(--snow); font-size:clamp(14px,1.2vw,16px); font-weight:500; line-height:1.4; }
.hero-actions { position:relative; display:grid; justify-items:center; gap:14px; margin-top:34px; padding-inline:20px; }
/* The drop box, the whole box one button. A visitor's recording is checked in the browser
   (quick-check.js); a member's opens in the editor (landing.js). */
/* Frosted glass over the light, with the dashed edge everyone reads as "drop here". */
.drop-box { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px 20px; width:min(100%,700px); padding:20px 22px; border:1px dashed #ffffff40; border-radius:24px; background:#0b0c0fa8; backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); box-shadow:0 30px 80px -44px #000; text-align:left; cursor:pointer; transition-property:border-color,background-color,transform; transition-duration:.2s; transition-timing-function:ease-out; }
.drop-box:hover,body.dragover .drop-box { border-color:#d8b46aa8; background:#13141899; }
.drop-box:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.drop-box:active { transform:scale(.995); }
.drop-box[aria-disabled="true"] { cursor:wait; }
.drop-art { width:44px; height:44px; fill:none; stroke:var(--snow); stroke-width:2.2; stroke-linecap:round; }
.drop-art .drop-dot { stroke-width:1.2; opacity:.35; }
.drop-title { margin:0; color:var(--snow); font-size:18px; line-height:1.3; font-weight:650; letter-spacing:-.01em; }
.upload-access { margin:3px 0 0; color:var(--snow-2); font-size:14px; line-height:1.45; text-wrap:pretty; }
.upload-formats { margin:4px 0 0; color:var(--snow-3); font-size:13px; line-height:1.5; }
.choose-file { white-space:nowrap; }
.drop-box:hover .choose-file { background:var(--accent-hover); }
.drop-box:active .choose-file { background:var(--accent-press); }
#landing-progress,#quick-progress { width:min(100%,380px); }
#landing-progress progress,#quick-progress progress { width:100%; height:4px; accent-color:var(--accent); }
/* Status lines are grey and ivory, never gold: gold marks only what to press. */
#landing-status { margin:0; color:var(--snow-2); font-size:14px; overflow-wrap:anywhere; }
#landing-status:empty { display:none; }
#landing-status.error { color:#ff9f8f; }
/* A file dragged anywhere over the page can be dropped there (landing.js), and the page
   says what will happen to it. */
body.dragover::after { content:attr(data-drop-label); position:fixed; inset:calc(84px + env(safe-area-inset-top)) 3vw 18px; z-index:30; display:grid; place-items:center; border:2px dashed var(--accent); border-radius:30px; background:#000000e0; color:var(--snow); font:700 40px var(--sans); letter-spacing:-.02em; text-align:center; pointer-events:none; }

/* The home page's first screen, as the owner drew it (September 27, 2026): a rounded card
   on black whose gold is strongest at the left edge and fades out to the right, where
   the prism light moves (hero-light.js). SOLIPSIUM sits at the foot of the light, and
   under it a box with a sharp gold line sells: what it fixes, the offer, the drop box and
   the proof, in the order the Apple TV page gives its trial. */
.hero.hero-billboard { padding:calc(76px + env(safe-area-inset-top)) 0 56px; text-align:left; }
.hero-billboard::before { content:none; }
/* 1204 pixels wide at most: the page's 1120 column and 42 on each side, so the name
   inside starts where the navigation's name does. Each svh height comes after a vh one:
   a browser older than svh (Safari 15.4, Chrome 108) drops the svh line and keeps vh. */
.billboard { position:relative; isolation:isolate; display:grid; grid-template-rows:minmax(clamp(190px,30vh,320px),1fr) auto; grid-template-rows:minmax(clamp(190px,30svh,320px),1fr) auto; width:min(100% - 48px,1204px); min-height:min(calc(100vh - 96px),780px); min-height:min(calc(100svh - 96px),780px); margin:0 auto; padding:0 28px 24px; overflow:hidden; border-radius:40px; background:radial-gradient(64% 100% at 0% 22%,#a87a2c 0%,#86601f 24%,#553c16 50%,#2a1e0e 72%,transparent 92%),linear-gradient(90deg,#634617 0%,#3a2911 34%,#18110a 60%,#0b0907 100%); box-shadow:inset 0 0 0 1px #ffffff14,0 50px 120px -60px #000; }
/* A fine grain, so the long fade never shows steps on an 8-bit screen. */
.billboard::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
/* The light is added to the gold beneath it, as light is, rather than painted over it. */
.billboard-light { position:absolute; inset:0; z-index:0; width:100%; height:100%; mix-blend-mode:screen; pointer-events:none; }
/* Anything that moves by itself for more than five seconds can be stopped (WCAG 2.2.2). */
.light-pause { position:absolute; z-index:2; top:18px; right:18px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:#00000059; color:var(--snow); box-shadow:inset 0 0 0 1px #ffffff26; cursor:pointer; transition-property:background-color,transform; transition-duration:.18s; transition-timing-function:ease-out; }
.light-pause:hover { background:#0000008c; }
.light-pause:active { transform:scale(.94); }
.light-pause svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.light-play-symbol { display:none; fill:currentColor; stroke:none; }
.light-pause[data-paused] .light-pause-symbol { display:none; }
.light-pause[data-paused] .light-play-symbol { display:block; }
/* The name and the words under it, as on the owner's drawing: SOLIPSIUM in the logo's
   Cormorant, SUPER RESOLUTION AUDIO ENGINE spaced out beside it. */
.hero-billboard #hero-title { position:relative; z-index:1; align-self:end; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 28px; max-width:none; margin:0 0 20px; padding:0 14px; color:#fbeccb; font:500 clamp(42px,4.4vw,64px)/1 var(--display-font); letter-spacing:0; text-shadow:0 0 18px #00000080,0 2px 34px #00000073; }
.billboard-name { letter-spacing:.06em; }
/* A dark halo keeps the small words readable wherever the moving light falls behind them. */
.billboard-sub { color:#f6e9ca; font-size:clamp(12px,1.1vw,16px); font-weight:700; letter-spacing:.44em; text-transform:uppercase; text-shadow:0 0 2px #000,0 0 7px #000000d9,0 0 16px #0000008c; }
/* The box that sells: a sharp gold line, and a dark veil inside it so its words read on
   the gold and the light alike. Roomy, with no line of small print above the headline:
   the owner found the first version crowded. */
.pitch { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); grid-template-areas:"copy actions" "results results" "proof proof"; gap:0 56px; padding:34px 42px 0; border:2px solid var(--accent); border-radius:0; background:#0a0806b3; }
.pitch-copy { grid-area:copy; padding-bottom:28px; }
.hero-billboard .pitch-title { margin:0; color:var(--snow); font:500 clamp(32px,3.1vw,44px)/1.06 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:-.018em; text-wrap:balance; }
.pitch-lede { max-width:30em; margin:18px 0 0; color:#d9d6cf; font-size:17px; line-height:1.55; text-wrap:pretty; }
.hero-billboard .hero-offer { max-width:none; margin:18px 0 0; padding:0; color:#f0dfba; font-size:15px; font-weight:600; }
.hero-billboard .hero-actions { grid-area:actions; display:grid; align-content:start; justify-items:stretch; gap:10px; margin:0; padding:0 0 28px; }
/* The drop box keeps its dashed edge, the sign everyone reads as "drop here", and takes
   the box's square corners. Its words and button are enough, so it has no picture here. */
.hero-billboard .drop-box { grid-template-columns:minmax(0,1fr); grid-template-areas:"words" "button"; gap:16px; width:100%; padding:22px; border-color:#d8b46a73; border-radius:0; background:#0d0b08d9; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.hero-billboard .drop-box:hover,body.dragover .hero-billboard .drop-box { border-color:#d8b46acc; background:#15120ee6; }
.hero-billboard .drop-words { grid-area:words; }
.hero-billboard .choose-file { grid-area:button; width:100%; }
.hero-billboard .more-link.down { justify-self:center; font-size:15px; }
.hero-results { grid-area:results; display:grid; justify-items:start; gap:14px; }
.hero-results:has(> :not([hidden]):not(:empty)) { padding-bottom:30px; }
/* A dropped recording's results take the box's square corners and full width, and no
   glass blur, which would be worked out again every frame over the moving light. */
.hero-billboard .quick-check { width:100%; border-radius:0; background:#0d0b08d9; backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Proof under the offer: short claims, each one checkable further down the page. One
   column per claim, so the row stays full when the price claim is hidden once payments
   open. */
.pitch-proof { grid-area:proof; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:14px 40px; margin:0 -42px; padding:20px 42px 22px; border-top:1px solid #d8b46a40; list-style:none; }
.pitch-proof li { color:#bdbab3; font-size:14px; line-height:1.5; text-wrap:pretty; }
.pitch-proof strong { display:block; margin-bottom:3px; color:var(--snow); font:500 21px/1.2 var(--serif); font-variation-settings:'opsz' 72; font-variant-numeric:lining-nums; letter-spacing:-.01em; }
.pitch-proof a { color:var(--snow); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.pitch-proof a:hover { text-decoration-thickness:2px; }
.hero-billboard .stage { margin-top:48px; }
@media (max-width:900px) {
  .pitch { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "actions" "results" "proof"; }
  .pitch-copy { padding-bottom:24px; }
}
/* A phone: the card fills the width, the name stands above its words, and the box reads in
   the same order as on a wide screen, in one column. The owner found it crowded
   (September 28), so here it says less: one frame, the button first with one line under
   it, and the proof in a quiet strip under the gold line. Spacing is on a 4 and 8 pixel
   scale, close within a group and wider between groups: the name and its words, the
   headline and its paragraph, the offer and the button. */
@media (max-width:700px) {
  .hero.hero-billboard { padding:calc(64px + env(safe-area-inset-top)) 0 40px; }
  /* The card is tall here, so the gold's brightest spot is set in pixels near its top
     left corner, above the name, rather than a share of the card's height. The light's
     row is a share of the smallest screen height (svh), what a phone shows with its
     browser's bars out, so the button still fits under it. */
  .billboard { width:calc(100% - 20px); min-height:0; padding:0 10px 10px; border-radius:28px; grid-template-rows:minmax(170px,24vh) auto; grid-template-rows:minmax(170px,24svh) auto; background:radial-gradient(360px 300px at 0% 70px,#a87a2c 0%,#86601f 26%,#553c16 52%,#2a1e0e 74%,transparent 94%),linear-gradient(90deg,#634617 0%,#3a2911 34%,#18110a 60%,#0b0907 100%); }
  .hero-billboard #hero-title { flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:24px; padding:0 8px; font-size:42px; }
  .billboard-sub { font-size:12px; letter-spacing:.26em; }  /* 12 is the smallest text here; it still fits one line at 360 */
  .light-pause { top:12px; right:12px; }
  /* The gold line is drawn around the pitch and the action only (::before), so the proof
     can sit under it inside the card. */
  .pitch { padding:24px 20px 0; border:0; background:none; }
  .pitch::before { content:''; grid-area:1 / 1 / 4 / 2; margin:-24px -20px 0; border:2px solid var(--accent); background:#0a0806b3; pointer-events:none; }
  .pitch-copy { padding-bottom:16px; }
  .hero-billboard .pitch-title { font-size:32px; }
  .pitch-lede { margin-top:12px; font-size:16px; }
  .hero-billboard .hero-offer { margin-top:24px; }
  .hero-billboard .hero-actions { gap:4px; padding-bottom:12px; }
  /* A phone cannot drag a file, so the drop box is its button and one line. "Drop a
     recording here" stays for a screen reader; the formats wait for question one. */
  .hero-billboard .drop-box,.hero-billboard .drop-box:hover { grid-template-areas:"button" "words"; gap:8px; padding:0; border:0; background:none; }
  .hero-billboard .drop-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .hero-billboard .upload-formats { display:none; }
  .hero-billboard .upload-access { margin:0; text-align:center; text-wrap:balance; }
  /* The proof: a quiet strip on the card, under the gold line. Off the box's dark veil
     its words are a lighter grey, which keeps 4.5:1 on the gold. */
  .pitch-proof { grid-auto-flow:row; gap:16px; margin:0 -20px; padding:24px 20px 16px; border-top:0; }
  .pitch-proof li { color:#d9d6cf; }
  .pitch-proof strong { font-size:19px; }
  .hero-billboard .stage { margin-top:36px; }
}

/* The listening stage: the sample player, frosted glass over the light. */
.stage { position:relative; width:min(1120px,100% - 32px); margin:60px auto 0; padding:28px 34px 16px; border-radius:28px; background:linear-gradient(180deg,#121317b8,#0a0b0dd6); backdrop-filter:blur(26px) saturate(140%); -webkit-backdrop-filter:blur(26px) saturate(140%); box-shadow:inset 0 0 0 1px #ffffff1c,0 50px 120px -50px #000; text-align:left; }
.stage-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:18px 24px; }
.stage-head h2 { margin:0; font-family:var(--serif); font-size:30px; line-height:1.1; font-weight:500; font-variation-settings:'opsz' 72; letter-spacing:-.012em; }
.stage-note { display:block; margin-top:6px; color:var(--snow-3); font-size:14px; font-weight:450; letter-spacing:0; }
/* The Original/Repaired switch is a drop of liquid that flows between the two words:
   two rounded shapes under the buttons, blurred and then sharpened by an SVG filter,
   so they bridge and merge while one is still catching up. The words sit above the
   filter and stay crisp. It is exactly 220 by 44 so the SVG's units are pixels. */
.demo-switch { position:relative; display:grid; grid-template-columns:110px 110px; width:220px; height:44px; border-radius:22px; background:#ffffff14; isolation:isolate; }
.switch-liquid { position:absolute; inset:0; width:220px; height:44px; z-index:-1; overflow:visible; }
.liquid-drop,.liquid-trail { fill:var(--snow); transition:x .5s cubic-bezier(.2,.9,.25,1); }
.liquid-trail { fill:#d9d9de; transition-duration:.65s; transition-delay:.05s; }
.demo-switch[data-version="repaired"] .liquid-drop,.demo-switch[data-version="repaired"] .liquid-trail { x:113px; }
.demo-switch button { min-height:44px; padding:0 8px; border:0; border-radius:22px; background:transparent; color:var(--snow-2); font:600 15px var(--sans); transition:color .3s; }
.demo-switch button[aria-pressed="true"] { color:var(--coal); }
.demo-switch button:hover:not([aria-pressed="true"]) { color:var(--snow); }
/* Which sample: quiet outlined chips under the title, so the Original/Repaired switch
   stays the one bright control. They wrap onto a second line on a phone. */
.demo-samples { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.demo-samples button { min-height:44px; padding:0 16px; border:1px solid #ffffff24; border-radius:22px; background:transparent; color:var(--snow-2); font:500 14px var(--sans); transition:color .2s,border-color .2s,background-color .2s; }
.demo-samples button:hover:not([aria-pressed="true"]) { color:var(--snow); border-color:#ffffff47; }
.demo-samples button[aria-pressed="true"] { border-color:#ffffff5c; background:#ffffff14; color:var(--snow); }
/* The waveform is the drawing of the actual sample, used as a mask: the played part
   shows bright, the rest dim. After the sample loads, landing-demo.js draws the repaired
   version too, from its own audio, and the switch cross-fades between them. */
.demo-wave { position:relative; height:156px; margin:30px 0 4px; --played:0; }
.wave-layer { position:absolute; inset:0; background:#4b4a46; -webkit-mask:var(--shape,url('demo-waveform.svg')) center / 100% 100% no-repeat; mask:var(--shape,url('demo-waveform.svg')) center / 100% 100% no-repeat; transition:opacity .55s ease; }
.wave-played { position:absolute; inset:0; background:linear-gradient(90deg,var(--snow),#fff); clip-path:inset(0 calc((1 - var(--played)) * 100%) 0 0); }
/* Repaired, the waveform takes the light's colours: faint where it has yet to play. */
.wave-repaired { background:linear-gradient(90deg,#4676c366,#76d3e966,#eae8d466,#f5d47d66,#cc966566,#86637966); }
.wave-repaired .wave-played { background:linear-gradient(90deg,var(--spectrum)); }
.demo-wave[data-version="original"] .wave-repaired,.demo-wave[data-version="repaired"] .wave-original { opacity:0; }
#demo-progress { position:absolute; top:-6px; bottom:-6px; left:calc(var(--played) * 100%); width:2px; margin-left:-1px; border-radius:1px; background:var(--snow); opacity:0; transition:opacity .3s; }
.demo-wave.is-moving #demo-progress { opacity:1; }
/* The sliders are 44 pixels tall, a fingertip's size; the track drawn stays thin. */
#demo-position { display:block; width:100%; height:44px; margin:0; accent-color:var(--accent); }
#demo-position:disabled { opacity:.35; }
.demo-transport { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:0; }
#demo-play { display:inline-flex; align-items:center; gap:14px; min-height:52px; padding:4px 10px 4px 4px; border:0; border-radius:999px; background:transparent; color:var(--snow); font:600 16px var(--sans); }
#demo-play svg { width:48px; height:48px; padding:14px 13px 14px 15px; border-radius:50%; background:var(--snow); color:var(--coal); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; transition:transform .18s ease-out,background-color .18s; }
#demo-play:hover svg { background:#fff; transform:scale(1.05); }
#demo-play:active svg { transform:scale(.95); }
#demo-play .demo-play-symbol { fill:currentColor; stroke:none; }
#demo-play .demo-pause-symbol { display:none; }
#demo-play[aria-pressed="true"] svg { padding:14px; }
#demo-play[aria-pressed="true"] .demo-play-symbol { display:none; }
#demo-play[aria-pressed="true"] .demo-pause-symbol { display:block; }
#demo-time { color:var(--snow-3); font-size:14px; font-variant-numeric:tabular-nums; }
#demo-status { min-height:22px; margin:6px 0 4px; color:var(--snow-2); font-size:14px; }
#demo-status.error { color:#ff9f8f; }
.demo-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 18px; border-top:1px solid #ffffff14; }
.demo-credit { flex:1 1 240px; color:var(--snow-3); font-size:13px; line-height:1.6; }
.demo-credit summary { display:list-item; min-height:44px; padding:12px 0; cursor:pointer; }
.demo-credit summary:hover { color:var(--snow); }
.demo-credit p { margin:4px 0 12px; max-width:62ch; }
.demo-credit a { color:var(--snow-2); text-decoration:underline; text-underline-offset:3px; }
#quick-status { margin:0; max-width:40em; color:var(--snow-2); font-size:14px; overflow-wrap:anywhere; text-wrap:pretty; }
#quick-status:empty { display:none; }
#quick-status.error { color:#ff9f8f; }
/* What the quick check heard: the most serious findings, in time order, each with the
   editor's own sentence and the repair that fixes it. */
.quick-check { width:min(100%,700px); padding:22px 22px 20px; border-radius:24px; background:linear-gradient(180deg,#121317cc,#0a0b0de0); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); box-shadow:inset 0 0 0 1px #ffffff1c; text-align:left; }
.quick-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.quick-head h2 { margin:0; font-size:20px; font-weight:680; letter-spacing:-.015em; }
.quick-head p { margin:0; color:var(--snow-3); font-size:13px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.quick-summary { margin:6px 0 12px; color:var(--snow); font-size:15px; font-weight:500; }
.quick-findings { margin:0; padding:0; list-style:none; }
.quick-finding { padding:13px 0; border-top:1px solid #ffffff14; }
.quick-name { display:flex; justify-content:space-between; gap:12px; margin:0; color:var(--snow); font-size:16px; font-weight:600; }
.quick-when { color:var(--snow-3); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quick-detail { margin:4px 0 0; color:var(--snow-2); font-size:14px; line-height:1.5; }
.quick-foot { display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 0; color:var(--snow-3); font-size:13px; }
/* Severity is said in words; the dot only repeats it. */
.quick-severity::before { content:''; display:inline-block; width:7px; height:7px; margin:0 7px 1px 0; border-radius:50%; background:currentColor; }
.quick-severity.high { color:#ff9f8f; }
.quick-severity.medium { color:var(--snow); }
.quick-severity.low { color:var(--snow-3); }
.quick-clear { color:var(--snow-2); font-size:14px; line-height:1.5; }
.quick-more { margin:0; padding-top:12px; border-top:1px solid #ffffff14; color:var(--snow-3); font-size:13px; }
.quick-more:empty { display:none; }
.quick-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:16px; }
.quick-actions p { margin:0; color:var(--snow-3); font-size:13px; }
.quick-actions .more-link { color:var(--accent-glow); font-size:15px; }
/* The try (try.js): the first 20 seconds, repaired on the server, with no account. The
   offer sits right under the check's status, so on a phone it is on the first screen. */
.try-offer { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; width:min(100%,700px); }
.try-offer p { flex:1 1 280px; margin:0; color:var(--snow-2); font-size:13px; line-height:1.5; text-align:left; text-wrap:pretty; }
.try-offer .pill:disabled { cursor:wait; opacity:.6; }
#try-progress { width:min(100%,380px); }
#try-progress progress { width:100%; height:4px; accent-color:var(--accent); }
#try-status { margin:0; max-width:40em; color:var(--snow-2); font-size:14px; overflow-wrap:anywhere; text-wrap:pretty; }
#try-status:empty { display:none; }
#try-status.error { color:#ff9f8f; }
#try-title:focus { outline:none; }
#try-title:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.try-reasons { margin:0 0 16px; padding-left:18px; color:var(--snow-2); font-size:14px; line-height:1.5; }
.try-reasons li + li { margin-top:4px; }
.try-player { display:grid; grid-template-columns:auto auto 1fr; grid-template-areas:"play switch time" "position position position"; align-items:center; gap:10px 16px; }
.try-play { grid-area:play; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:2px 8px 2px 2px; border:0; border-radius:999px; background:transparent; color:var(--snow); font:600 16px var(--sans); }
.try-play svg { width:44px; height:44px; padding:13px 12px 13px 14px; border-radius:50%; background:var(--snow); color:var(--coal); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.try-play:disabled { opacity:.4; cursor:wait; }
.try-play .try-play-symbol { fill:currentColor; stroke:none; }
.try-play .try-pause-symbol { display:none; }
.try-play[aria-pressed="true"] svg { padding:13px; }
.try-play[aria-pressed="true"] .try-play-symbol { display:none; }
.try-play[aria-pressed="true"] .try-pause-symbol { display:block; }
.try-switch { grid-area:switch; display:inline-grid; grid-template-columns:1fr 1fr; justify-self:start; border-radius:22px; background:#ffffff14; }
.try-switch button { min-height:44px; padding:0 16px; border:0; border-radius:22px; background:transparent; color:var(--snow-2); font:600 15px var(--sans); }
.try-switch button[aria-pressed="true"] { background:var(--snow); color:var(--coal); }
.try-switch button:hover:not([aria-pressed="true"]) { color:var(--snow); }
#try-time { grid-area:time; justify-self:end; color:var(--snow-3); font-size:14px; font-variant-numeric:tabular-nums; }
#try-position { grid-area:position; display:block; width:100%; height:44px; margin:0; accent-color:var(--accent); }
#try-position:disabled { opacity:.35; }
.try-result .quick-actions .more-link { font-size:15px; }
.try-after { margin:8px 0 0; color:var(--snow-3); font-size:13px; }
@media (max-width:480px) {
  .try-player { grid-template-columns:auto 1fr; grid-template-areas:"play time" "switch switch" "position position"; }
  .try-switch { justify-self:stretch; }
}
/* The cat's shading, added once by cat-rig.js for every copy of the cat to share. */
.cat-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* Four facts a first-time visitor wants before handing over a file. */
.facts { position:relative; width:min(1120px,100% - 32px); margin:44px auto 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 28px; text-align:left; }
.facts li { padding-top:16px; border-top:1px solid var(--hair-dark); color:var(--snow-2); font-size:14px; line-height:1.5; text-wrap:pretty; }
.facts strong { display:block; margin-bottom:4px; color:var(--snow); font-size:17px; font-weight:600; letter-spacing:-.01em; }

/* What it fixes: a grid of tiles in three sizes, each drawing the damage it repairs. */
.fixes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.fix { position:relative; grid-column:span 2; display:flex; flex-direction:column; padding:30px 30px 0; overflow:hidden; border-radius:24px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.fix-large { grid-column:span 3; }
.fix-wide { grid-column:span 6; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:0 40px; padding:34px 34px 34px 38px; align-items:center; }
.fix-dark { background:#0c0d10; color:var(--snow); box-shadow:none; }
.fix h3 { margin:0 0 10px; font-size:21px; line-height:1.2; font-weight:600; letter-spacing:-.012em; }
.fix-large h3 { font-size:26px; }
.fix p { margin:0; max-width:36ch; color:var(--coal-2); font-size:16px; line-height:1.5; text-wrap:pretty; }
.fix-dark p { color:var(--snow-2); }
.fix.has-art { min-height:380px; }
.fix-large.has-art { min-height:440px; }
.fix-wide.has-art { min-height:0; }
/* Each drawing holds the damaged sound and, on top of it, the repaired sound. The repair
   sweeps across when the tile is seen, and again when it is pointed at (fixes.js). */
.fix-art { position:relative; margin-top:auto; padding:26px 0 30px; }
.fix-wide .fix-art { margin:0; padding:0; }
.fix-art svg { display:block; width:100%; height:auto; overflow:visible; }
.fix-art .art-after { position:absolute; left:0; bottom:30px; clip-path:inset(0 100% 0 0); }
.fix-wide .fix-art .art-after { bottom:0; }
.art-scan { position:absolute; left:0; top:20px; bottom:24px; width:2px; margin-left:-1px; border-radius:1px; background:linear-gradient(180deg,var(--spectrum)); box-shadow:0 0 14px 1px #eae8d4aa; opacity:0; pointer-events:none; }
.fix-wide .art-scan { top:-6px; bottom:-6px; }
.fix.is-fixed .art-after { clip-path:inset(0 0 0 0); transition:clip-path 1.5s cubic-bezier(.45,0,.25,1); }
/* The damaged drawing is wiped away just as fast, so no damage shows through the repair. */
.fix.is-fixed .art-before { clip-path:inset(0 0 0 100%); transition:clip-path 1.5s cubic-bezier(.45,0,.25,1); }
.fix.is-fixed .art-scan { animation:art-scan 1.5s cubic-bezier(.45,0,.25,1); }
@keyframes art-scan { 0% { opacity:1; transform:translateX(0); } 88% { opacity:1; } 100% { opacity:0; transform:translateX(var(--span,300px)); } }
.fix-art path { fill:none; stroke-linecap:round; }
.art-voice { stroke:#b6ae9f; }
.art-after .art-voice { stroke:var(--coal); }
.fix-dark .art-after .art-voice { stroke:var(--snow); }
.art-damage { stroke:#e5484d; }
.art-faint { opacity:.4; }
.art-line,.art-spike { stroke-width:2.5; }
.art-flat { stroke-linecap:butt; }
.art-inferred { stroke:#b9794a; }
.fix-dark .art-inferred { stroke:#cc9665; }
.art-guess { fill:#cc96650f; stroke:#cc9665; stroke-width:1.2; stroke-dasharray:4 3; }
.art-lowered { stroke:#d3cbbb; }
.art-music { stroke:#7fa7c9; }
.art-lowered-music { stroke:#c4d6e6; }
.art-label { fill:var(--coal-2); font:600 12px var(--sans); }
.art-cell { fill:#f5d47d; }
.art-beep { fill:#fff; }
.art-box { fill:none; stroke:#f5f5f7; stroke-width:1.4; stroke-dasharray:5 4; }
/* With less motion: the damage on the left half, the repair on the right, and still. */
@media (prefers-reduced-motion:reduce) {
  .fix-art .art-after { clip-path:inset(0 0 0 50%); }
  .fix-art .art-before { clip-path:inset(0 50% 0 0); }
  .art-scan { left:50%; opacity:1; }
}

/* The editor, shown as a product: a screen on the black band. */
.editor-shot { position:relative; margin:0 auto; max-width:1120px; }
.editor-shot::before { content:''; position:absolute; inset:4% 2% -6%; z-index:0; border-radius:40px; background:conic-gradient(from 200deg at 50% 50%,#4676c329,#76d3e924,#eae8d41c,#f5d47d1f,#cc966524,#86637929,#4676c329); filter:blur(56px); pointer-events:none; }
.editor-caption { margin:28px auto 0; max-width:60ch; color:var(--snow-3); font-size:14px; line-height:1.6; text-align:center; }
/* --t is the playhead's place on the twenty seconds; preview-motion.js moves it. */
.editor-preview { position:relative; z-index:1; overflow:hidden; border-radius:22px; background:#111316; box-shadow:inset 0 0 0 1px #ffffff1c,0 40px 100px -40px #000; --t:.306; font-family:var(--sans); }
.preview-top { display:flex; align-items:center; justify-content:space-between; gap:20px; height:50px; padding:0 20px; border-bottom:1px solid #ffffff12; background:#17181b; font-size:12px; }
.preview-brand { color:var(--gold); font:500 16px/1 var(--display-font); letter-spacing:.064em; }
.preview-project { color:#a1a1a6; }
.preview-export { padding:5px 15px; border-radius:999px; background:var(--accent); color:var(--coal); font-weight:600; }
.preview-body { display:grid; grid-template-columns:25% minmax(0,1fr) 20%; }
.preview-library { grid-column:3; grid-row:1; padding:28px 20px; border-left:1px solid #ffffff12; background:#16171a; }
.preview-file,.preview-kept { padding:12px 10px; border-radius:10px; color:#d6d6db; font-size:12px; }
.preview-file { background:#ffffff0d; box-shadow:inset 0 0 0 1px #ffffff14; }
.preview-file small,.preview-kept small { display:block; margin-top:6px; color:#8e8e93; font-size:11px; }
.preview-inspector { grid-column:1; grid-row:1; padding:28px 22px; border-right:1px solid #ffffff12; background:#16171a; }
.preview-monitor { grid-column:2; grid-row:1; min-width:0; padding:22px 28px 0; background:#0e0f11; }
.preview-label { display:flex; justify-content:space-between; margin:0 0 14px; color:#a1a1a6; font-size:12px; }
.preview-choice { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; padding:11px 12px; border-radius:10px; background:#232428; color:#e8e8ed; font-size:12px; }
.preview-choice svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.preview-slider { position:relative; height:4px; margin:0 0 25px; border-radius:2px; background:#ffffff1f; }
.preview-slider i { position:absolute; width:65%; height:100%; border-radius:2px; background:var(--accent); }
.preview-slider i::after { content:''; position:absolute; right:-6px; top:-5px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0006; }
.preview-divider { height:1px; margin:33px 0 25px; background:#ffffff12; }
.preview-alternative { padding:12px; border-radius:10px; background:#d8b46a14; box-shadow:inset 0 0 0 1px #d8b46a55; color:#e8e8ed; font-size:12px; }
.preview-alternative small { display:block; margin-top:6px; color:#a1a1a6; font-size:11px; }
.monitor-art { display:flex; flex-direction:column; gap:20px; height:250px; padding:16px 4px; }
.monitor-heading { display:flex; justify-content:space-between; gap:12px; color:#e8e8ed; font-size:14px; }
.monitor-heading small { color:#8e8e93; font-size:11px; }
#preview-passage { flex:1; width:100%; min-height:0; overflow:hidden; stroke:#8e8e93; stroke-width:1; }
#preview-passage rect { fill:#ffffff08; stroke:none; }
.monitor-caption { color:#8e8e93; font-size:11px; }
.preview-transport { display:flex; align-items:center; gap:18px; height:50px; color:#a1a1a6; font-size:12px; font-variant-numeric:tabular-nums; }
.preview-transport>svg { width:20px; height:20px; fill:var(--snow); }
.preview-ab { display:flex; align-items:center; gap:13px; margin-left:auto; font-size:11px; }
.preview-ab b { padding:5px 9px; border-radius:999px; background:#d8b46a26; color:var(--accent-glow); font-weight:600; }
.preview-timeline { padding:14px 20px 20px; border-top:1px solid #ffffff12; background:#17181b; }
.preview-ruler { display:flex; justify-content:space-between; margin:0 0 12px 28px; color:#8e8e93; font-size:11px; font-variant-numeric:tabular-nums; }
.preview-track { position:relative; height:78px; border-radius:8px; background:#ffffff08; }
.preview-track svg { width:calc(100% - 28px); height:100%; margin-left:28px; stroke:#6e6e73; stroke-width:1; }
.track-tag { position:absolute; top:29px; left:8px; color:#8e8e93; font-size:11px; }
/* Four to nine seconds of a twenty-second example, after the 28px track label. */
.preview-selection { position:absolute; inset:0 auto 0 calc(20% + 22.4px); width:calc(25% - 7px); border-radius:6px; background:#d8b46a14; box-shadow:inset 0 0 0 1px #d8b46a88; }
.preview-playhead { position:absolute; top:-8px; bottom:-8px; left:calc(28px + (100% - 28px) * var(--t)); width:2px; margin-left:-1px; border-radius:1px; background:var(--snow); }
.preview-playhead::before { content:''; position:absolute; top:-3px; left:-4px; width:10px; height:10px; border-radius:50%; background:var(--snow); }
/* The repair is drawn over the original and revealed as far as the playhead has played. */
.preview-repair { stroke:var(--accent-glow); transition:opacity .6s ease; }
.is-rewinding .preview-repair { opacity:0; }
.preview-cursor { stroke:var(--snow); stroke-width:1; vector-effect:non-scaling-stroke; }
.preview-settles { transition:opacity .5s ease; }
.is-live:not(.is-kept) .preview-settles { opacity:.35; }
.preview-bottom { display:flex; justify-content:space-between; gap:18px; padding:11px 20px; border-top:1px solid #ffffff12; color:#8e8e93; font-size:11px; }

/* Measured: three numbers, each with the evidence it stands on. */
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.stat { display:flex; flex-direction:column; margin:0; padding:32px 30px 30px; border-radius:24px; background:#0e0f12; box-shadow:inset 0 0 0 1px #ffffff12; }
.stat-value { margin:0; font-family:var(--serif); font-size:clamp(54px,5.4vw,78px); line-height:1; font-weight:500; font-variation-settings:'opsz' 72; font-variant-numeric:lining-nums; letter-spacing:-.02em; color:var(--snow); }
.stat-compare { margin:10px 0 22px; color:var(--snow-2); font-size:17px; font-weight:500; }
.stat figcaption { margin-top:auto; padding-top:22px; color:var(--snow-2); font-size:15px; line-height:1.5; text-wrap:pretty; }
/* Seventy-eight recordings each, drawn as dots: the ones made worse in red, because gold
   on this page means Solipsium's own result. */
.dots { display:grid; gap:14px; }
.dots-row { display:grid; gap:7px; }
.dots-label { display:flex; justify-content:space-between; gap:12px; color:var(--snow-2); font-size:13px; }
.dots-label b { color:var(--snow); font-weight:600; }
.dots-grid { display:grid; grid-template-columns:repeat(13,11px); gap:5px; }
.dots-grid i { aspect-ratio:1; border-radius:50%; background:#3a3a3e; }
.dots-grid i.worse { background:var(--worse); }
/* 87% of the way to a perfect chooser: the fill on a lighter step of the same gold. */
.meter { position:relative; height:10px; border-radius:5px; background:#d8b46a33; }
.meter i { position:absolute; inset:0 13% 0 0; border-radius:5px; background:var(--accent); }
.meter-scale { display:flex; justify-content:space-between; margin-top:8px; color:var(--snow-3); font-size:12px; }
/* 51.8% against 89.7% made better (the Sealed set, September 29, 2026) as two dots on a
   scale from 0 to 100%: position carries the value. */
.dumbbell-track { position:relative; height:26px; }
.dumbbell-track::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#ffffff24; }
.dumbbell-span { position:absolute; top:50%; left:51.8%; width:37.9%; height:2px; margin-top:-1px; background:linear-gradient(90deg,#8e8e93,var(--accent)); }
.dumbbell-dot { position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; box-shadow:0 0 0 3px #0e0f12; }
.dumbbell-dot.base { left:51.8%; background:#8e8e93; }
.dumbbell-dot.best { left:89.7%; background:var(--accent); }
.dumbbell-scale { display:flex; justify-content:space-between; margin-top:4px; color:var(--snow-3); font-size:12px; font-variant-numeric:tabular-nums; }
.dumbbell-key { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; color:var(--snow-2); font-size:13px; }
.dumbbell-key i { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; }
.dumbbell-key i.base { background:#8e8e93; }
.dumbbell-key i.best { background:var(--accent); }
.proof-caveat { margin:22px 0 0; color:var(--snow-3); font-size:14px; }

/* Who it's for: one tile per kind of visitor, each leading to the page written for it. */
.doors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.door { display:flex; flex-direction:column; gap:12px; padding:30px 30px 20px; border-radius:24px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.door-art { width:64px; height:64px; margin-bottom:10px; color:var(--coal); }
.door-art svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.door-art .accent { stroke:#b9794a; }
.door h3 { margin:0; font-size:21px; line-height:1.2; font-weight:600; letter-spacing:-.012em; }
.door p { flex:1; margin:0; color:var(--coal-2); font-size:16px; line-height:1.5; text-wrap:pretty; }

/* Pricing, like a shop counter: three plans, the middle one dark. */
.price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.price-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; margin-inline:auto; }
.price-card { position:relative; display:flex; flex-direction:column; padding:34px 30px 30px; overflow:hidden; border-radius:24px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.price-card.featured { background:#0c0d10; color:var(--snow); box-shadow:none; }
.price-card.featured::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--spectrum)); }
.price-card h3 { margin:0 0 6px; font-size:21px; font-weight:650; letter-spacing:-.01em; }
.price { margin:0 0 22px; font-family:var(--serif); font-size:clamp(44px,4vw,54px); line-height:1.05; font-weight:500; font-variation-settings:'opsz' 72; font-variant-numeric:lining-nums; letter-spacing:-.02em; }
.price small { margin-left:4px; color:var(--coal-2); font-family:var(--sans); font-size:16px; font-weight:500; letter-spacing:0; }
.featured .price small { color:var(--snow-2); }
.price-card ul { flex:1; margin:0 0 26px; padding:0; list-style:none; }
.price-card li { padding:11px 0; border-top:1px solid var(--hair); color:var(--coal-2); font-size:15px; line-height:1.45; }
.featured li { border-color:#ffffff1f; color:var(--snow-2); }
.price-action { width:100%; min-height:48px; font-size:16px; }
.price-card:not(.featured) .price-action { background:var(--coal); color:var(--snow); }
.price-card:not(.featured) .price-action:hover:not(:disabled) { background:#000; }
.price-action:disabled { opacity:.55; cursor:default; transform:none; }
.pricing-notes { max-width:44em; margin:22px auto 0; text-align:center; }
.pricing-notes a { color:var(--coal); text-decoration:underline; text-underline-offset:3px; }
/* While nothing is on sale, said in view, right above the buttons that record a choice. */
.pricing-honest { margin:10px 0 0; color:var(--coal-2); font-size:15px; line-height:1.5; text-wrap:balance; }
/* The rest of the pricing note, a tap away: what a credit pays for and the other plans. */
.pricing-more { margin-top:10px; }
.pricing-more summary { list-style:none; cursor:pointer; }
.pricing-more summary::-webkit-details-marker { display:none; }
.pricing-more[open] summary svg,.pricing-more[open] summary:hover svg { transform:rotate(180deg); }
.pricing-more p { margin:10px auto 0; color:var(--coal-2); font-size:16px; line-height:1.55; }
.pricing-status { min-height:24px; margin:22px 0 0; color:var(--coal); font-size:15px; font-weight:500; text-align:center; }
/* Empty until a plan is chosen: it stays in the tree for a screen reader, with no height. */
.pricing-status:empty { min-height:0; margin-top:0; }

/* Questions: the heading stays put while the answers scroll. */
.questions { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px 72px; align-items:start; }
.questions-heading { position:sticky; top:110px; }
.questions-heading .headline { margin-bottom:18px; }
.questions-list details { border-top:1px solid var(--hair); }
.questions-list details:last-child { border-bottom:1px solid var(--hair); }
.questions-list summary { position:relative; display:block; padding:22px 44px 22px 0; font-size:19px; font-weight:600; letter-spacing:-.012em; list-style:none; cursor:pointer; }
.questions-list summary::-webkit-details-marker { display:none; }
.questions-list summary::after { content:''; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px; background:linear-gradient(currentColor,currentColor) center / 14px 2px no-repeat,linear-gradient(currentColor,currentColor) center / 2px 14px no-repeat; transition:transform .3s var(--spring); }
.questions-list details[open] summary::after { transform:rotate(45deg); }
.questions-list summary:hover { color:var(--coal-2); }
.questions-list p { margin:0 0 24px; padding-right:28px; color:var(--coal-2); font-size:17px; line-height:1.55; }

/* The close: one more invitation, and the cat comes over to see you off. */
.closing { position:relative; isolation:isolate; overflow:hidden; padding:150px 0 190px; text-align:center; }
.closing::before { content:''; position:absolute; z-index:-1; right:-26%; top:-40%; width:130%; height:150%; pointer-events:none; background:conic-gradient(from 212deg at 86% 18%,transparent 0deg,#866379 5deg,#cc9665 12deg,#f5d47d 19deg,#eae8d4 26deg,#76d3e9 33deg,#4676c3 40deg,transparent 49deg); filter:blur(70px); opacity:.26; }
.site .closing .headline { max-width:13em; margin:0 auto; font-size:clamp(40px,5.2vw,70px); }
.closing .lede { max-width:30em; margin:24px auto 0; color:#c6c4be; }
.closing-action { display:grid; justify-items:center; gap:14px; margin-top:38px; }
/* Lighter greys at the close: its text sits on the returning light (4.5:1 checked). */
.closing-action p { margin:0; color:#b4b2ac; font-size:14px; }
.closing-floor { position:absolute; left:0; right:0; bottom:0; height:150px; pointer-events:none; }
/* The ledge the cat walks along: a hairline that fades out at both ends. */
.closing-floor::after { content:''; position:absolute; left:8%; right:8%; bottom:18px; height:1px; background:linear-gradient(90deg,transparent,#ffffff2e 30%,#ffffff2e 70%,transparent); }
.closing-floor .cat { position:absolute; left:0; top:0; overflow:visible; filter:drop-shadow(0 6px 10px #0009); cursor:pointer; pointer-events:auto; }
/* The cat's play with the logo (page-cats.js, logo-play.js) needs room over the ledge for
   the ball and the wave; only a page whose script starts the play makes the room. */
.closing.closing-play { padding-bottom:280px; }
.closing-play .closing-floor { height:250px; }
.closing-floor .logo-play { position:absolute; left:0; pointer-events:none; }
/* Pauses the play, and plays it again once it is over (WCAG 2.2.2). */
.closing-pause { position:absolute; z-index:1; left:max(16px,3%); bottom:30px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff3d; border-radius:50%; background:#ffffff0f; color:#e9e7e1; cursor:pointer; transition:background-color .2s ease,border-color .2s ease; }
.closing-pause:hover { background:#ffffff21; border-color:#ffffff70; }
.closing-pause:focus-visible { outline:2px solid #f5d47d; outline-offset:3px; }
.closing-pause[hidden] { display:none; }
.closing-pause svg { width:16px; height:16px; fill:currentColor; }

/* Footer: black like the close above it, so the gold logo reads, small and complete. */
.site-footer { padding:36px 0 calc(44px + env(safe-area-inset-bottom)); border-top:1px solid #ffffff1a; background:var(--night); color:var(--snow-2); font-size:13px; }
.footer-inner { width:min(1120px,100% - 48px); margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px; }
.footer-links { display:flex; flex-wrap:wrap; gap:0 24px; }
.footer-links a { display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:44px; color:var(--snow-2); }
.footer-links a:hover { color:var(--snow); text-decoration:underline; text-underline-offset:3px; }
.footer-brand { gap:12px; min-height:44px; }
.footer-brand img { width:30px; height:30px; }
.footer-brand .brand-name { font-size:28px; letter-spacing:.05em; }
.colophon { flex-basis:100%; margin:6px 0 0; padding-top:18px; border-top:1px solid #ffffff1a; color:var(--snow-3); font-size:12px; }

/* The family recordings page lists its steps as rows. */
.workflow-steps { border-top:1px solid var(--hair); }
.workflow-steps article { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); align-items:baseline; gap:48px; padding:32px 0; border-bottom:1px solid var(--hair); }
.workflow-steps h3 { margin:0; font-size:28px; line-height:1.15; font-weight:680; letter-spacing:-.02em; }
.workflow-steps p { max-width:560px; margin:0; color:var(--coal-2); font-size:17px; line-height:1.55; }

/* Scroll-linked touches where the browser can drive them from the scroll position
   itself; elsewhere the same elements simply stand still. */
@supports (animation-timeline: view()) {
  .editor-shot { animation:shot-rise linear both; animation-timeline:view(); animation-range:entry 0% cover 45%; }
  .stage { animation:stage-rise linear both; animation-timeline:view(); animation-range:entry 0% cover 30%; }
  @keyframes shot-rise { from { transform:scale(.9) translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
  @keyframes stage-rise { from { transform:scale(.96); } to { transform:none; } }
}

@media (max-width:1060px) {
  .fix { grid-column:span 3; }
  .fix-large { grid-column:span 3; }
  .fix-wide { grid-column:span 6; }
  .stats { grid-template-columns:minmax(0,1fr); }
  .doors { grid-template-columns:minmax(0,1fr); max-width:640px; }
  .preview-inspector { padding:24px 16px; }
}
@media (max-width:820px) {
  .split-head,.questions { grid-template-columns:minmax(0,1fr); }
  .questions-heading { position:static; }
  .facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .price-grid,.price-grid.two { grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; }
  .fix,.fix-large { grid-column:span 6; min-height:0; }
  /* As heavy as the .has-art rules above, or the tall minimums would still win here. */
  .fix.has-art,.fix-large.has-art { min-height:0; }
  .fix-wide { grid-template-columns:minmax(0,1fr); gap:24px; padding:30px 30px 30px; }
}
/* A fourth door makes two rows of two, calmer than four narrow columns, from a tablet up;
   on a phone the doors are one column. */
@media (min-width:701px) { .doors:has(> .door:nth-child(4)) { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; } }
/* Below 900 pixels the island keeps the logo, Sign in and the button; the page's own
   sections are a scroll away. */
@media (max-width:900px) { .site-nav nav>a:not(#nav-account):not(.nav-cta) { display:none; } }
@media (max-width:700px) {
  /* A phone's first screen is tall and narrow: the light comes in closer, from the top. */
  .hero::before { left:-60%; top:-26svh; width:220%; height:112svh; }
  .closing::before { right:-70%; top:-20%; width:220%; height:120%; }
  .section { padding:84px 0; }
  .wrap { width:min(1120px,100% - 32px); }
  /* A label over a headline, not a second headline. */
  .eyebrow { margin-bottom:14px; font-size:13px; letter-spacing:.14em; }
  .split-head,.section-head { margin-bottom:48px; }
  .hero { padding:calc(116px + env(safe-area-inset-top)) 0 40px; }
  .hero-eyebrow { font-size:17px; }
  .hero-eyebrow,#hero-title { padding-inline:16px; }
  .hero-lede { margin-top:22px; padding:0 20px; }
  .hero-actions { margin-top:30px; padding-inline:16px; }
  .drop-box { grid-template-columns:minmax(0,1fr); padding:18px 16px; border-radius:22px; }
  .drop-box .drop-art { display:none; }
  .drop-box .choose-file { width:100%; }
  .quick-check { padding:18px 16px; border-radius:22px; }
  .stage { margin-top:72px; padding:24px 18px 10px; border-radius:26px; }
  .stage-head h2 { font-size:22px; }
  .demo-wave { height:112px; margin-top:24px; }
  .demo-switch button { font-size:14px; }
  .demo-samples { margin-top:16px; }
  .demo-samples button { padding:0 14px; }
  .facts { grid-template-columns:minmax(0,1fr); gap:0; }
  .facts li { padding:14px 0; }
  .fix { padding:26px 24px 0; border-radius:24px; }
  /* One size for a card's title: the repairs, the doors and the prices. */
  .fix h3,.fix-large h3,.door h3,.price-card h3 { font-size:20px; }
  /* What it fixes: a shelf that scrolls sideways with the next tile peeking in, the way
     tv.apple.com shows its rows, instead of nine tall tiles in a column. The shelf runs
     to the screen's edges and scrolls inside itself; the page never scrolls sideways. */
  .fixes { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; gap:12px; margin-inline:-16px; padding:4px 16px 20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:16px; scrollbar-width:thin; }
  .fixes > .fix { grid-column:auto; scroll-snap-align:start; }
  .fixes:focus-visible { outline-offset:-2px; }
  /* Tiles off to the side would otherwise stay faded out until swiped to (reveal.js). */
  .js-reveal .fixes > [data-reveal] { opacity:1; }
  .editor-caption { display:none; }  /* it repeats the paragraph above the picture */
  .stat { padding:26px 22px 24px; border-radius:24px; }
  /* 26 dots across, three rows of each 78, instead of six rows of 13. */
  .dots-grid { grid-template-columns:repeat(26,minmax(0,1fr)); gap:3px; }
  /* Each door's picture beside its heading, not on a row of its own. */
  .door { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:12px 14px; padding:26px 22px 16px; border-radius:24px; }
  .door-art { width:40px; height:40px; margin:0; }
  .door p,.door .more-link { grid-column:1 / -1; }
  .door .more-link { justify-self:start; }
  .price-card { padding:28px 22px 24px; border-radius:24px; }
  .pricing-more p { text-align:left; }  /* eight centred lines are hard to follow */
  .questions-list summary { font-size:17px; }
  .closing { padding:110px 0 150px; }
  .closing.closing-play { padding-bottom:210px; }
  .closing-play .closing-floor { height:190px; }
  .workflow-steps article { grid-template-columns:minmax(0,1fr); gap:10px; padding:26px 0; }
  .workflow-steps h3 { font-size:24px; }
  .preview-top { height:44px; padding:0 12px; }
  .preview-project { display:none; }
  .preview-body { display:block; }
  .preview-library,.preview-inspector { display:none; }
  .preview-monitor { padding:16px 14px 0; }
  .monitor-art { height:190px; }
  .preview-transport { gap:10px; height:46px; font-size:11px; }
  .preview-ab { gap:7px; }
  .preview-timeline { padding:12px 10px 17px; }
  .preview-track { height:60px; }
  .track-tag { top:22px; }
  .preview-bottom>span:first-child { display:none; }
  .footer-inner { width:min(1120px,100% - 32px); }
  .footer-links { gap:0 18px; }
  .footer-brand .brand-name { font-size:24px; }
}
@media (forced-colors:active) {
  .wave-layer,.wave-played { forced-color-adjust:none; }
  .pill,.nav-cta { border:1px solid ButtonText; }
}
/* A few small hearts over the cat when it is touched (page-cats.js). */
.closing-floor .cat-heart { position:absolute; pointer-events:none; }
/* Asked for less transparency: solid panels instead of frosted glass over the light. */
@media (prefers-reduced-transparency:reduce) { .drop-box,.stage,.quick-check { background:#0e0f12; backdrop-filter:none; -webkit-backdrop-filter:none; } }
/* The "Large file" dialog a member's import may open on solipsium.com (large-upload.js, shared
   with the editors, which style it in editor-notices.css): the same class in this night palette. */
.site .editor-notice-dialog { box-sizing:border-box; width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:28px; border:1px solid var(--hair-dark); border-radius:24px; background:#0e0f12; color:var(--snow); font:400 17px/1.55 var(--sans); overflow-wrap:anywhere; box-shadow:0 30px 80px -30px #000; }
.site .editor-notice-dialog::backdrop { background:#000000b3; }
.site .editor-notice-dialog h2 { margin:0 0 12px; font:500 30px/1.1 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:-.012em; text-wrap:balance; }
.site .editor-notice-dialog p { margin:0; color:var(--snow-2); }
.site .editor-notice-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:26px; }
.site .editor-notice-actions button { min-height:48px; padding:0 22px; border:1px solid #ffffff24; border-radius:999px; background:transparent; color:var(--snow); font:600 16px/1.2 var(--sans); cursor:pointer; transition:border-color .18s ease-out,background-color .18s ease-out; }
.site .editor-notice-actions button:hover { border-color:#ffffff47; }
.site .editor-notice-actions .primary { border-color:transparent; background:var(--accent); color:var(--coal); }
.site .editor-notice-actions .primary:hover { background:var(--accent-hover); }
@media (max-width:480px) { .site .editor-notice-dialog { padding:22px; } }
@media (forced-colors:active) { .site .editor-notice-actions button { border-color:ButtonText; } }