/* The homepage's stylesheet (index.html links it). Palette: brand/BRAND.md. The other pages use guide.css.
Self-hosted Inter (no third-party CDN: the CSP allows fonts from 'self' only, and visitor IPs never reach a
font provider). index.html preloads the three weights above the fold. Licence: fonts/OFL-Inter.txt. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Palette: brand/BRAND.md. Type: Inter 400/500/600, tight tracking on display sizes. */
:root {
--c-bg: #0a0a0f;
--c-surface: #111118;
--c-surface-2: #18181f;
--c-surface-hover: #14141c;
--c-border: rgba(255,255,255,0.07);
--c-border-2: rgba(255,255,255,0.12);
--c-border-hover: rgba(255,255,255,0.28);
--c-text: #f0f0f5;
--c-text-2: #9898a8;
--c-text-3: #8a8a9c;
--c-accent: #5b8af5;
--c-accent-2: #7aa0f7;
--c-accent-btn: #3a6ce0; /* white text 4.77:1 (Accent Blue is 3.28:1) */
--c-accent-btn-hover: #3565d6;
--c-accent-glow: rgba(91,138,245,0.25);
--c-success: #34d399;
--c-white: #ffffff;
--c-star: #fbbf24; /* the review's five stars (brand/BRAND.md) */
/* File types, always in this order. The tile accents, as r,g,b. The name is always written beside the hue. */
--ft-mp3: 240,180,76; --ft-m4a: 164,139,248; --ft-m4b: 91,138,245; --ft-aac: 85,193,238; --ft-flac: 79,207,169; --ft-wav: 250,128,105;
--r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--gutter: 24px;
--section: 112px;
color-scheme: dark;
}
/* Light mode: the owner's option C (2026-09-26, #121), following the visitor's OS setting.
Contrast (WCAG 2.2 AA) on white: text 18.4:1, text-2 8.2:1, text-3 5.9:1, accent 5.3:1 (4.7:1 on
the page grey, where the section labels sit); the
feature-tile icons get darker colours (3.7:1 or more on their tints). The moving aurora stays,
lighter against the page (10C); with reduced motion it's hidden and the still wash under it
shows (9C). "html" lifts these above the phone-width rules further down. */
@media (prefers-color-scheme: light) {
:root {
--c-bg: #eef1f6; --c-surface: #ffffff; --c-surface-2: #f3f5f9; --c-surface-hover: #e8ecf2;
--c-border: rgba(15,23,42,0.08); --c-border-2: rgba(15,23,42,0.14); --c-border-hover: rgba(15,23,42,0.24);
--c-text: #12141a; --c-text-2: #4b4f5c; --c-text-3: #5f6470;
--c-accent: #3565d6; --c-accent-2: #2b56bf; --c-accent-glow: rgba(58,108,224,0.20);
--c-success: #147a3a;
--c-star: #b07d00; /* 3.6:1 on the white card (WCAG 1.4.11) */
/* The tile hues darkened to 4.6:1 or better as text on a tag over white, the card grey and the page grey */
--ft-mp3: 143,87,0; --ft-m4a: 105,75,207; --ft-m4b: 50,93,193; --ft-aac: 2,104,156; --ft-flac: 10,113,84; --ft-wav: 178,54,35;
color-scheme: light;
}
html ::selection { background: rgba(58,108,224,0.25); color: var(--c-text); }
html header.nav { background: rgba(255,255,255,0.66); }
html header.nav.scrolled { background: rgba(255,255,255,0.92); }
html .nav-links a:hover { background: rgba(15,23,42,0.05); }
html .hero-shade { background: radial-gradient(1400px 700px at 25% -10%, rgba(91,138,245,0.16), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.6) 55%, var(--c-bg) 100%); }
html .hero-veil { opacity: .55; }
html .hero .stage { box-shadow: 0 40px 120px -30px rgba(15,23,42,0.28); }
html .pbar { background: rgba(255,255,255,0.94); }
html .price-card { box-shadow: 0 40px 100px -40px rgba(15,23,42,0.22); }
html .tile { --tile: 58,108,224; }
html .tile.amber { --tile: 176,108,0; }
html .tile.violet { --tile: 112,80,220; }
html .tile.mint { --tile: 12,140,104; }
html .tile.sky { --tile: 2,122,184; }
html .tile.coral { --tile: 205,62,40; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font); font-size: 16px; line-height: 1.6; letter-spacing: -0.011em;
background: var(--c-bg); color: var(--c-text);
-webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
b, strong { font-weight: 600; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--c-accent-glow); color: var(--c-white); }
:focus-visible { outline: 2px solid var(--c-accent-2); outline-offset: 3px; }
[id] { scroll-margin-top: 80px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; top: 8px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill);
background: var(--c-surface); border: 1px solid var(--c-border-2); font-size: 14px; font-weight: 500;
transform: translateY(-200%); }
.skip:focus { transform: none; }
/* Film grain over the whole page, so the darks have depth */
body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Buttons: pills, one primary per block */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; padding: 12px 24px; border-radius: var(--r-pill); border: 1px solid transparent;
font: 500 15px/1.2 var(--font); letter-spacing: -0.006em; white-space: nowrap; cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn-primary { background: var(--c-accent-btn); color: var(--c-white); box-shadow: 0 10px 30px -12px var(--c-accent-glow); }
.btn-primary:hover { background: var(--c-accent-btn-hover); }
.btn-ghost { background: rgba(255,255,255,0.03); border-color: var(--c-border-2); color: var(--c-text); }
.btn-ghost:hover { border-color: var(--c-border-hover); }
.btn:active { transform: scale(0.98); }
/* Nav */
header.nav {
position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent;
background: rgba(10,10,15,0.6); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
transition: background-color .25s, border-color .25s;
}
header.nav.scrolled { background: rgba(10,10,15,0.86); border-bottom-color: var(--c-border); }
.nav-inner { height: 64px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--c-text-2); padding: 6px 12px; border-radius: var(--r-pill); transition: color .15s, background-color .15s; }
.nav-links a:hover { color: var(--c-text); background: rgba(255,255,255,0.05); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-cta .btn { min-height: 36px; padding: 8px 16px; font-size: 14px; }
.menu-toggle { display: none; width: 40px; height: 40px; place-items: center; background: none; border: 0; border-radius: var(--r-sm); color: var(--c-text); cursor: pointer; }
.menu-toggle svg { width: 22px; height: 22px; }
/* Hero: text left, the app right, our moving aurora (veil.js) behind */
.hero { position: relative; overflow: hidden; padding: 96px 0 104px; }
.hero-veil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.hero-veil.off { display: none; }
.hero-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(1100px 560px at 18% -10%, rgba(91,138,245,0.16), transparent 60%),
radial-gradient(900px 480px at 85% 10%, rgba(122,160,247,0.08), transparent 65%),
linear-gradient(180deg, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.62) 55%, var(--c-bg) 100%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.hero h1 { font-size: 64px; line-height: 1.04; letter-spacing: -0.036em; margin: 22px 0 20px; }
/* The one hand-drawn mark on the site (owner's choice, BRAND.md "Motion"): it draws in once, behind the letters. */
.nb { white-space: nowrap; }
.scribble { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.scribble-line { position: absolute; z-index: -1; left: -3%; bottom: -0.13em; width: 106%; height: 0.24em; overflow: visible; pointer-events: none; }
.scribble-line path { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: scribble-draw .9s cubic-bezier(0.16,1,0.3,1) .5s forwards; }
@keyframes scribble-draw { from { opacity: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
.hero .sub { font-size: 18px; color: var(--c-text-2); max-width: 30em; }
.hsteps { margin-top: 14px; font-size: 15px; color: var(--c-text-2); max-width: 36em; }
.platform { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--c-text); }
.platform svg { width: 18px; height: 18px; color: var(--c-accent); flex-shrink: 0; }
.platform a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-accent); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* A text link as tall as the buttons (WCAG 2.5.8). .phone-only shows only in the phone/touch rule below. */
.tlink { display: inline-flex; align-items: center; min-height: 46px; padding: 0 6px; font: 500 15px/1.2 var(--font); color: var(--c-text-2);
text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-accent); transition: color .15s; }
.tlink:hover { color: var(--c-text); }
.phone-only { display: none; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 14px; color: var(--c-text-2); }
.trust li:first-child { color: var(--c-text); font-weight: 500; } /* the price, the same figure as the price card */
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 14px; height: 14px; color: var(--c-success); flex-shrink: 0; }
/* Sections */
.block { position: relative; padding-top: var(--section); }
.head { max-width: 720px; margin-bottom: 48px; }
.eyebrow { display: block; font-size: 14px; font-weight: 500; color: var(--c-accent); margin-bottom: 14px; }
.head h2 { font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; }
/* The hero's app screens, with the six features rotating beneath them in step */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
/* Feature tile accents (brand/BRAND.md): one hue per feature, only on these icon tiles.
The hue is decoration; each feature's icon and title carry the meaning. */
.tile { --tile: 91,138,245; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm);
color: rgb(var(--tile)); background: rgba(var(--tile), 0.10); border: 1px solid rgba(var(--tile), 0.22); }
.tile.amber { --tile: 240,180,76; }
.tile.violet { --tile: 164,139,248; }
.tile.mint { --tile: 79,207,169; }
.tile.sky { --tile: 85,193,238; }
.tile.coral { --tile: 250,128,105; }
.tile svg { width: 20px; height: 20px; }
.cap code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; color: var(--c-text);
padding: 1px 5px; border-radius: 5px; background: var(--c-surface-2); white-space: nowrap; }
.stage { overflow: hidden; display: flex; flex-direction: column; }
.hero .stage { position: relative; z-index: 1;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 40px 120px -30px rgba(0,0,0,0.85); }
.frames { position: relative; aspect-ratio: 1280 / 820; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.slide.on { opacity: 1; }
.caps { display: grid; padding: 18px 20px 4px; }
.cap { grid-area: 1 / 1; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-content: start;
opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.cap.on { opacity: 1; visibility: visible; transition: opacity .5s ease .2s, visibility 0s; }
html:not(.js) .caps { row-gap: 14px; padding-bottom: 18px; } /* without JS: all six features, listed */
html:not(.js) .cap { grid-area: auto; opacity: 1; visibility: visible; }
html:not(.js) .stage-bar { display: none; }
.cap .tile { grid-row: 1 / span 2; width: 36px; height: 36px; }
.cap .tile svg { width: 18px; height: 18px; }
.cap .cap-t { margin: 1px 0 3px; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -0.014em; color: var(--c-text); }
.cap p { font-size: 14px; line-height: 1.5; color: var(--c-text-2); letter-spacing: -0.006em; }
.stage-bar { display: flex; align-items: center; padding: 8px 12px 12px 20px; }
.ctls { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ctl { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 80px; height: 32px; padding: 0 14px;
border-radius: var(--r-pill); border: 1px solid var(--c-border-2); background: transparent; color: var(--c-text-2);
font: 500 13px/1 var(--font); cursor: pointer; transition: color .15s, border-color .15s; }
.ctl:hover { color: var(--c-text); border-color: var(--c-border-hover); }
.ctl svg { width: 12px; height: 12px; }
.ctl .i-play, .ctl.paused .i-pause { display: none; }
.ctl.paused .i-play { display: block; }
/* Enlarge a screen (home.js builds the magnifier and the dialog): the screen at full size, dark behind it. */
html.js .frames { cursor: zoom-in; }
.lb-b { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-pill);
border: 1px solid rgba(255,255,255,0.3); background: rgba(10,10,15,0.8); color: #f0f0f5; cursor: pointer; }
.lb-b:hover { background: rgba(10,10,15,0.96); border-color: rgba(255,255,255,0.55); }
.lb-b svg { width: 18px; height: 18px; }
.lb { box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 12px;
border: 0; background: transparent; color: #f0f0f5; }
.lb::backdrop { background: rgba(5,6,10,0.9); }
.lb[open] { display: flex; align-items: center; justify-content: center; }
html:has(.lb[open]) { overflow: hidden; }
.lb-box { display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.lb-bar { display: flex; align-items: center; gap: 8px; }
.lb-cap { flex: 1; min-width: 0; font: 500 15px/1.35 var(--font); letter-spacing: -0.01em; }
.lb-scroll { max-width: 100%; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow: auto; overscroll-behavior: contain;
border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); touch-action: pan-x pan-y pinch-zoom; }
.lb-scroll img { display: block; max-width: 100%; max-height: calc(100vh - 94px); max-height: calc(100dvh - 94px); }
@media (max-width: 440px) { .zoom { min-width: 36px; padding: 0 10px; } .zoom span { display: none; } } /* the six dots need the room */
@media (max-width: 360px) { #shotsToggle { min-width: 36px; padding: 0 10px; } #shotsToggle span { display: none; } } /* and at 320 px Pause is the icon alone (its name stays) */
@media (max-width: 899px) { /* narrow screens: full size, and drag to pan: a shrunk screen can't be read */
.lb-scroll img { max-width: none; max-height: none; width: 1280px; }
}
.dots { display: flex; margin-left: auto; }
.dot { width: 24px; height: 32px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.dot::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-text-3); transition: width .3s, background-color .3s; }
.dot:hover::before { background: var(--c-text); }
.dot[aria-current="true"]::before { width: 18px; background: var(--c-accent); }
/* File-type tags (brand/BRAND.md, "File-type colours"): a 10% fill, a 28% border and the name in the hue.
The hue is a second cue; the name is always written. The chips in the animation draw the same tag from ::before. */
.mp3 { --ft: var(--ft-mp3); } .m4a { --ft: var(--ft-m4a); } .m4b { --ft: var(--ft-m4b); }
.aac { --ft: var(--ft-aac); } .flac { --ft: var(--ft-flac); } .wav { --ft: var(--ft-wav); }
.ft, .chip::before { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 22px; padding: 0 8px;
border-radius: 6px; border: 1px solid rgba(var(--ft), 0.28); background: rgba(var(--ft), 0.10); color: rgb(var(--ft));
font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .02em; }
/* Players: the formats grid, three named players, two fallbacks */
.ptop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 40px; }
.ptop .head { margin: 0; }
.fmts { display: grid; grid-template-columns: 52px repeat(6, auto); align-items: center; justify-items: start; gap: 10px 8px; font-size: 14px; color: var(--c-text-2); }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px; text-align: center; }
.pcard .plogo { width: 64px; height: 64px; border-radius: 50%; }
.pcard h3 { font-size: 22px; line-height: 1.3; }
.ftags { display: flex; gap: 6px; }
.pfeat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; }
.pfeat li { display: flex; align-items: center; gap: 8px; }
.pfeat svg { width: 16px; height: 16px; color: var(--c-success); flex-shrink: 0; }
.pslim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.pslim li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 18px 24px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: 15px; }
.pslim svg { width: 20px; height: 20px; color: var(--c-text-2); flex-shrink: 0; }
.pslim h3 { font-size: 15px; line-height: 1.4; }
.pslim p { color: var(--c-text-2); }
.prepair { max-width: 760px; margin-top: 20px; font-size: 15px; color: var(--c-text-2); }
.prepair em { font-style: normal; font-weight: 500; color: var(--c-text); }
.pmark { max-width: 760px; margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--c-text-3); }
/* How it works: twelve loose files sort, take their chapter names, fly into one chapter bar and become an M4B.
The finished state is the page as written: sorted chapter names, the full book card, a blue bar, every caption
readable. home.js adds .play once the section is on screen (never with reduced motion), measures where each chip
has to fly and sets --sx --sy --r (start), --bx --by --sw --sh (the bar) on it. The loop is 12 s. */
.how { display: flex; flex-direction: column; gap: 44px; }
.flow { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) 56px minmax(0, 1fr); align-items: stretch; }
.fpanel { padding: 24px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.fhead { display: flex; align-items: center; gap: 10px; height: 24px; margin-bottom: 16px; font-size: 14px; color: var(--c-text-2); }
.fhead svg { width: 18px; height: 18px; flex: none; color: var(--c-text-3); }
.fhead span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhead span:last-child { margin-left: auto; flex: none; color: var(--c-text-3); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(40px, auto)); grid-auto-flow: column; gap: 10px; }
.chip { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 8px;
background: var(--c-surface-2); border: 1px solid var(--c-border-2); border-radius: var(--r-sm); font-size: 13px; line-height: 1.25; }
.chip::before { width: 44px; padding: 0; }
.chip.mp3::before { content: "MP3"; } .chip.m4a::before { content: "M4A"; } .chip.flac::before { content: "FLAC"; } .chip.wav::before { content: "WAV"; }
.chip b { display: inline-block; width: 20px; font-weight: 500; opacity: .7; }
.nm { display: grid; flex: 1; min-width: 0; }
.nm > span { grid-area: 1 / 1; align-self: center; }
.fn { opacity: 0; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.farrow { display: grid; place-items: center; color: var(--c-accent); }
.farrow svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbook { position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px; text-align: center;
border-color: color-mix(in srgb, var(--c-success) 30%, transparent); }
.empty { position: absolute; inset: 28px; display: grid; place-items: center; border: 1px dashed var(--c-border-hover); border-radius: 10px;
font-size: 14px; color: var(--c-text-3); opacity: 0; }
/* The cover is a picture of the demo book's cover (brand/shots/make_shots.py make_cover): its own colours, Georgia,
a double rule. It stays the same in light mode, like a real cover. */
.cov { flex: none; width: 150px; height: 150px; padding: 7px; background: #1d4a5a; border-radius: 4px; box-shadow: 0 16px 40px -16px rgba(0,0,0,0.8); }
.cov div { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
border: 2px solid #f2e9d8; box-shadow: inset 0 0 0 3px #1d4a5a, inset 0 0 0 4px #f2e9d8;
font-family: Georgia, "Times New Roman", serif; color: #f2e9d8; text-align: center; }
.cov span { font-size: 13px; line-height: 1.15; }
.cov i { width: 22px; height: 1px; background: #f2e9d8; }
.cov em { font-size: 9px; }
.det { margin-top: 14px; }
.det p:first-child { font-size: 18px; font-weight: 600; line-height: 24px; }
.det p + p { font-size: 14px; line-height: 20px; color: var(--c-text-2); }
.bar { display: flex; gap: 2px; width: 100%; height: 14px; margin-top: 18px; }
.bar:empty { background: rgb(var(--ft-m4b)); border-radius: 3px; } /* without JS: one bar */
.seg { height: 14px; border-radius: 3px; background: rgb(var(--ft-m4b)); }
.done { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--c-text-2); }
.done > div { display: flex; align-items: center; gap: 10px; }
.done .ok { gap: 8px; color: var(--c-success); }
.done svg { width: 16px; height: 16px; }
.how.play .chip { animation: chip 12s infinite; will-change: transform, opacity; }
.how.play .fn { animation: fn 12s infinite; }
.how.play .chn { animation: chn 12s infinite; }
.how.play .seg { animation: seg 12s infinite; }
.how.play .det { animation: det 12s infinite; }
.how.play .cov { animation: cov 12s infinite; }
.how.play .done { animation: done 12s infinite; }
.how.play .empty { animation: empty 12s infinite; }
.how.play .step p { color: inherit; }
.how.play .step:nth-child(1) { animation: cap1 12s infinite; }
.how.play .step:nth-child(2) { animation: cap2 12s infinite; }
.how.play .step:nth-child(3) { animation: cap3 12s infinite; }
.how.play .chip::before, .how.play .nm { animation: chipx 12s infinite; }
.how.paused *, .how.paused *::before { animation-play-state: paused !important; } /* the shorthands above reset it, so this one insists */
.fctl { margin: -28px 0 0 auto; } /* sits under the animation, above the captions */
.how:not(.play) .fctl { visibility: hidden; }
/* A chip: shuffled (4 to 25%), sorted (33%), fill turns solid with its text gone (56 to 60%), then two stages: first to
the bar's height (side by side: straight down or up the folder panel; stacked: shrinks in place to a pill), then
across into its segment, easing out so it settles. 74% on, the segment takes over. */
@keyframes chip {
0% { transform: translate(var(--sx), var(--sy)) rotate(var(--r)) scale(1, 1); opacity: 0; background-color: var(--c-surface-2); }
4%, 25% { transform: translate(var(--sx), var(--sy)) rotate(var(--r)) scale(1, 1); opacity: 1; background-color: var(--c-surface-2); animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
33%, 56% { transform: translate(0, 0) rotate(0deg) scale(1, 1); opacity: 1; background-color: var(--c-surface-2); border-color: var(--c-border-2); animation-timing-function: ease-in-out; }
60% { transform: translate(0, 0) rotate(0deg) scale(1, 1); background-color: rgb(var(--ft)); border-color: rgb(var(--ft)); animation-timing-function: cubic-bezier(0.4,0,0.2,1); }
64% { transform: translate(0, var(--ay)) rotate(0deg) scale(var(--aw), var(--ah)); background-color: rgb(var(--ft)); border-color: rgb(var(--ft)); animation-timing-function: cubic-bezier(0,0,0.2,1); }
72% { transform: translate(var(--bx), var(--by)) rotate(0deg) scale(var(--sw), var(--sh)); opacity: 1; background-color: rgb(var(--ft)); border-color: rgb(var(--ft)); }
74%, 100% { transform: translate(var(--bx), var(--by)) rotate(0deg) scale(var(--sw), var(--sh)); opacity: 0; background-color: rgb(var(--ft)); border-color: rgb(var(--ft)); }
}
@keyframes chipx { 0%, 55% { opacity: 1; } 59%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fn { 0%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes chn { 0%, 34% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes seg {
0%, 70% { opacity: 0; background: rgb(var(--ft)); }
72%, 76% { opacity: 1; background: rgb(var(--ft)); }
82%, 96% { opacity: 1; background: rgb(var(--ft-m4b)); }
100% { opacity: 0; background: rgb(var(--ft-m4b)); }
}
@keyframes det { 0%, 38% { opacity: 0; transform: translateY(6px); } 44%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cov { 0%, 40% { opacity: 0; transform: scale(.92); } 48%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes done { 0%, 80% { opacity: 0; } 86%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes empty { 0%, 36% { opacity: 1; } 42%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cap1 { 0%, 38% { color: var(--c-text); border-color: var(--c-accent); } 42%, 96% { color: var(--c-text-3); border-color: var(--c-border-2); } 100% { color: var(--c-text); border-color: var(--c-accent); } }
@keyframes cap2 { 0%, 38% { color: var(--c-text-3); border-color: var(--c-border-2); } 42%, 58% { color: var(--c-text); border-color: var(--c-accent); } 62%, 100% { color: var(--c-text-3); border-color: var(--c-border-2); } }
@keyframes cap3 { 0%, 58% { color: var(--c-text-3); border-color: var(--c-border-2); } 62%, 96% { color: var(--c-text); border-color: var(--c-accent); } 100% { color: var(--c-text-3); border-color: var(--c-border-2); } }
/* Three steps (the captions under the animation) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step { border-top: 2px solid var(--c-border-2); padding-top: 24px; }
.step .num { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: 8px; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.018em; }
.step p { max-width: 34ch; font-size: 15px; color: var(--c-text-2); }
/* Pricing: the card on its own, centred; its heading is the card's first lines */
#pricing { overflow-x: clip; }
.price-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.price-wrap::before { content: ""; position: absolute; left: 50%; top: 55%; width: 560px; height: 460px; transform: translate(-50%, -50%);
border-radius: 50%; background: radial-gradient(circle, rgba(91,138,245,0.18), transparent 70%); filter: blur(60px); pointer-events: none; }
.price-card { position: relative; text-align: center; padding: 48px 44px 40px; border-radius: var(--r-xl);
background: var(--c-surface); border: 1px solid var(--c-border-2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 40px 100px -40px rgba(0,0,0,0.8); }
.price-card .eyebrow { margin-bottom: 12px; }
.price-card h2 { margin-bottom: 20px; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.price-card h3 { font-size: 15px; font-weight: 500; color: var(--c-text-2); letter-spacing: -0.006em; }
.price-card .amount { margin: 16px 0 10px; font-size: 88px; font-weight: 600; line-height: 1; letter-spacing: -0.045em; }
.price-card .amount sup { position: relative; top: 9px; margin-right: 4px; vertical-align: top; font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--c-text-2); }
.price-card .approx { margin-bottom: 6px; font-size: 13px; color: var(--c-text-3); }
.price-card .once { font-size: 15px; color: var(--c-text-2); }
.incl { margin: 32px 0 20px; text-align: left; border-top: 1px solid var(--c-border); }
.incl li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; font-size: 15px; line-height: 1.45; border-bottom: 1px solid var(--c-border); }
.incl svg { width: 18px; height: 18px; margin-top: 1px; color: var(--c-success); flex-shrink: 0; }
.opens { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--c-text-2); }
.opens .ft:first-of-type { margin-left: 2px; }
.notdrm { margin: 6px 0 24px; font-size: 14px; color: var(--c-text-2); }
.price-card .rev { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 20px; font-size: 17px; color: var(--c-text); }
.price-card .rev cite { font-size: 13px; font-style: normal; color: var(--c-text-3); }
.stars { display: flex; gap: 3px; }
.stars svg { width: 22px; height: 22px; fill: var(--c-star); }
.price-card .btn { width: 100%; min-height: 52px; font-size: 16px; }
.price-card .btn + .btn { margin-top: 10px; }
.price-card .fine { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--c-text-3); }
.price-card .fine + .fine { margin-top: 8px; }
.price-card .fine a { color: var(--c-text-2); text-decoration: underline; text-underline-offset: 3px; }
/* Phones only (the 560px block): the price bar */
.pbar { display: none; }
/* FAQ */
.faq { max-width: 760px; margin-inline: auto; }
.faq .head { margin: 0 auto 40px; text-align: center; }
.faq-list { border-top: 1px solid var(--c-border); }
details.qa { border-bottom: 1px solid var(--c-border); }
details.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 0; font-size: 16px; font-weight: 500; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary svg { width: 18px; height: 18px; color: var(--c-text-2); flex-shrink: 0; transition: transform .2s ease;
fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
details.qa[open] summary svg { transform: rotate(45deg); }
details.qa p { max-width: 62ch; padding: 0 40px 22px 0; font-size: 15px; color: var(--c-text-2); }
details.qa p a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Footer */
footer { margin-top: var(--section); border-top: 1px solid var(--c-border); padding: 56px 0 40px; }
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot .brand { align-self: start; }
.foot .brand img { width: 24px; height: 24px; }
.foot-h { font-size: 13px; font-weight: 500; }
.foot-links a { display: inline-block; padding: 5px 0; font-size: 14px; color: var(--c-text-2); transition: color .15s; }
.foot-links a:hover { color: var(--c-text); }
.fd summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; padding: 4px 0; }
.fd summary::-webkit-details-marker { display: none; }
.fd summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--c-text-2); border-bottom: 2px solid var(--c-text-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
.fd[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fd summary:hover::after { border-color: var(--c-text); }
.fd .foot-links { margin-top: 4px; }
.foot-copy { grid-column: 1 / -1; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-3); }
/* Responsive */
@media (max-width: 1100px) {
.hero h1 { font-size: 56px; }
}
@media (max-width: 900px) {
:root { --section: 88px; }
.hero { padding: 64px 0 80px; }
.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
/* the stacked hero puts the text over the brightest part of the aurora: a darker shade keeps 4.5:1 */
.hero-shade { background: radial-gradient(700px 420px at 18% -10%, rgba(91,138,245,0.12), transparent 60%),
linear-gradient(180deg, rgba(10,10,15,0.5) 0%, rgba(10,10,15,0.72) 45%, var(--c-bg) 100%); }
.hero h1 { font-size: 52px; }
.head h2 { font-size: 40px; }
.pcard { padding: 24px; gap: 16px; }
.pcard h3 { font-size: 20px; }
.flow { grid-template-columns: minmax(0, 1fr); }
.farrow { height: 48px; }
.farrow svg { transform: rotate(90deg); }
.nav-links { display: none; }
.nav-links.open { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
margin: 0; padding: 8px var(--gutter) 16px; background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.nav-links.open a { padding: 12px 0; border-radius: 0; font-size: 15px; border-bottom: 1px solid var(--c-border); }
.nav-links.open a:last-child { border-bottom: 0; }
.nav-links.open a:hover { background: none; }
.menu-toggle { display: grid; }
.nav-cta { margin-left: auto; }
}
/* One column of chips where two would cut a title off (the longest needs a 286px chip): beside the book from
901 to 1199px, and stacked up to 700px. A title that still doesn't fit (320px) wraps to a second line. */
@media (min-width: 901px) and (max-width: 1199px), (max-width: 700px) {
.chips { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 4px; }
.chip { min-height: 28px; padding: 3px 8px; font-size: 12.5px; }
.chip::before { width: 38px; height: 18px; font-size: 11px; }
.chip b { width: 18px; }
}
@media (max-width: 760px) {
.steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pcards, .pslim { grid-template-columns: minmax(0, 1fr); }
.pcard { padding: 20px; gap: 12px; }
}
/* The trial installs on Windows: phones and touch-only tablets get a text link that says so (the download page
then offers to send the link to a PC), not the Try button. A Windows laptop with a touchscreen still has a fine
pointer, so it keeps the button. The prefix match also covers the download links that carry a short code after the path. */
@media (max-width: 560px), (hover: none) and (pointer: coarse) {
.hero-cta .btn[href^="/download"], .price-card .btn[href^="/download"] { display: none; }
.phone-only { display: inline-flex; }
.trust + .phone-only { margin-top: 12px; } /* in the hero it follows the trust list, so the four answers end above a phone's fold */
.price-card .phone-only { margin-top: 10px; } /* the card's rhythm between its buttons */
.price-card .phone-only + .fine { display: none; } /* "Not sure yet? The free trial..." says what the link above it says */
}
/* Phones: a dense layout, so the page isn't a long scroll (brand/BRAND.md, Spacing) */
@media (max-width: 560px) {
:root { --gutter: 16px; --section: 56px; }
html { scroll-padding-bottom: 80px; } /* a focused link never ends up under the price bar (WCAG 2.4.11) */
.hero { padding: 40px 0 44px; }
.hero-grid { gap: 32px; }
.hero h1 { font-size: 40px; letter-spacing: -0.032em; }
.hero .sub { font-size: 17px; }
.hero-cta .btn { flex: 1 1 100%; }
.hero-cta .tlink:not(.phone-only) { display: none; } /* See how it works: the section is the next scroll anyway */
.head { margin-bottom: 24px; }
.head h2 { font-size: 30px; }
.eyebrow { margin-bottom: 10px; }
.caps { padding: 14px 14px 2px; }
.stage-bar { padding: 6px 10px 10px 14px; }
.ptop { gap: 16px; margin-bottom: 24px; }
.fmts { grid-template-columns: 46px repeat(6, auto); gap: 8px 5px; font-size: 13px; }
.ft { padding: 0 7px; }
.pcards, .pslim { gap: 14px; }
.pslim { margin-top: 14px; }
.pcard .plogo { width: 48px; height: 48px; }
.pcard h3 { font-size: 18px; }
.ftags { gap: 5px; }
.pfeat { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; }
.pfeat li { gap: 6px; }
.pfeat svg { width: 15px; height: 15px; }
.pslim li { gap: 8px 10px; padding: 14px 16px; font-size: 13px; }
.pslim p { flex-basis: 100%; padding-left: 30px; }
.prepair { margin-top: 14px; font-size: 14px; }
.how { gap: 28px; }
.fctl { margin-top: -14px; }
.fpanel { padding: 16px; }
.fbook { padding: 24px 16px; }
.farrow { height: 36px; }
.fhead { margin-bottom: 12px; font-size: 13px; }
.steps { gap: 0; }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; border-top-color: var(--c-border); }
.step .num { grid-row: 1 / span 2; margin: 3px 0 0; }
.step h3 { margin-bottom: 2px; font-size: 17px; }
.step p { font-size: 14.5px; }
.price-card { padding: 36px 22px 28px; }
.price-card h2 { font-size: 28px; }
.opens { gap: 5px; font-size: 13px; }
.notdrm { font-size: 13px; }
.stars svg { width: 20px; height: 20px; }
.price-card .amount { margin: 12px 0 8px; font-size: 64px; }
.price-card .amount sup { top: 6px; font-size: 32px; }
.incl { margin: 20px 0 16px; }
.incl li { gap: 10px; padding: 9px 0; font-size: 14.5px; }
.price-card .fine { margin-top: 12px; }
.faq .head { margin-bottom: 24px; }
details.qa summary { padding: 14px 0; font-size: 15.5px; }
.nav-cta .btn { display: none; } /* the hero CTA is right below; the brand and menu need the room */
footer { padding: 32px 0 96px; } /* the bottom 96px keeps the price bar off the last links */
.foot { grid-template-columns: minmax(0, 1fr); gap: 0; }
.foot .brand { margin-bottom: 8px; }
.foot nav { border-top: 1px solid var(--c-border); }
.foot .foot-h { min-height: 44px; }
.fd summary { justify-content: space-between; }
.foot-links a { padding: 4px 0; font-size: 13.5px; line-height: 1.35; }
.foot-copy { margin-top: 4px; padding-top: 16px; }
/* The price bar: shown once the hero's buttons have scrolled away, hidden again while the price card is on
screen, so there's never a second primary button in view */
.pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px;
padding: 10px var(--gutter); background: rgba(10,10,15,0.92);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--c-border);
transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.pbar.on { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.pbar p { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--c-text-2); }
.pbar p b { display: block; font-size: 15px; color: var(--c-text); }
.pbar .btn { min-height: 44px; padding: 10px 18px; }
}
@media (max-width: 400px) { /* Opens wraps to two rows of three; Makes sits under them in the same columns */
.fmts { grid-template-columns: 46px repeat(3, auto); }
.fmts span:nth-child(5) { grid-column: 2; }
}
/* Reduced motion: no aurora, no rotation, no transitions. Forced colours: no shader. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero-veil { display: none; }
.ctl:not(.zoom) { display: none; } /* Pause has nothing to pause (the animation's too); Enlarge still works */
*, *::before, *::after { transition: none !important; }
.scribble-line path { animation: none; stroke-dashoffset: 0; opacity: 1; }
.how *, .how *::before { animation: none !important; } /* the finished book, still */
}
@media (forced-colors: active) {
.hero-veil { display: none; }
/* The text backplate would cover a line behind the letters: here it sits over them. */
.scribble { isolation: auto; }
.scribble-line { z-index: auto; }
.scribble-line path { stroke: CanvasText; }
.dot::before { forced-color-adjust: none; background: CanvasText; }
.dot[aria-current="true"]::before { background: Highlight; }
.how *, .how *::before { animation: none !important; } /* the colours carry the flight: show the finished book */
.fctl { display: none; }
.seg, .bar:empty { forced-color-adjust: none; background: Highlight; }
.stars svg { fill: CanvasText; }
.fd summary { color: CanvasText; } /* not the link colour */
}
/* Icons. The repeated ones are symbols in the sprite at the top of ; the tiles' and the platform
line's icons take their stroke from here instead of from attributes on each