/* OUT NOW landing (FINAL A, 88c15239), ported by the live build step 5 (2026-09-26). Rides on paper.css +
   two-products.css (kept for the checkout mount) and overrides them under .on-page. Paper, ink, one tomato and the
   cobalt accent. Anton = names and headlines; Instrument Serif italic = song titles and the one second-voice phrase per
   heading; Inter Tight = everything read or pressed.
   Tokens only: --on-* (styles/outnow-brand.css) point at --bc-* (lib/design/tokens.ts → styles/tokens.css); the
   in-between tones below are those tokens mixed, never a literal. The three-field form and its live cover are styled
   by styles/checkout.css (step 4); this sheet only lays the section out and places the cover slot.
   Text contrast: ink/paper 16.3:1, muted/paper 6:1, ink/tomato 4.9:1, stone/wax 8:1, paper-dim/ink 12.3:1. */
.paper-page.on-page{--paper:var(--on-paper);--ink:var(--on-ink);--muted:var(--on-muted);--line:var(--on-line);--display:var(--on-name);--body:var(--on-body);--site-ink:var(--on-ink);--site-blue:var(--on-ink);
  --on-body-ink:color-mix(in srgb,var(--on-ink) 86%,var(--on-paper));
  --on-rule:color-mix(in srgb,var(--on-line) 62%,var(--on-stone));
  --on-rule-dark:color-mix(in srgb,var(--on-paper) 16%,var(--on-wax));
  --on-dim-dark:color-mix(in srgb,var(--on-paper) 38%,var(--on-wax));
  --on-tomato-hover:color-mix(in srgb,var(--on-tomato) 86%,var(--bc-white));
  --on-shade:color-mix(in srgb,var(--on-ink) 45%,transparent);
  --g:16px;--wrap:1240px;background:var(--on-paper);color:var(--on-ink);font:16px/1.5 var(--on-body);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
@media (min-width:760px){.paper-page.on-page{--g:32px}}
@media (min-width:1100px){.paper-page.on-page{--g:48px}}
.on-page ::selection{background:var(--on-tomato);color:var(--on-ink)}
.on-page .on-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
.on-page h1,.on-page h2,.on-page h3{letter-spacing:0;white-space:normal}
.on-page :focus-visible{outline:3px solid var(--on-ink);outline-offset:3px;border-radius:6px}
.on-page .on-player :focus-visible,.on-page .on-share :focus-visible,.on-page .on-footer :focus-visible{outline-color:var(--on-paper)}
/* 0926d (final live review P3-6): paper.css's own rings (--accent #285ed3 on buttons and links, #3157d5 in the header)
   out-rank the rule above; on this page every ring is the brand ink, and paper on the dark player, share and footer. */
.paper-page.on-page :is(a,button,input,textarea,summary,[tabindex]):focus-visible,.paper-page.on-page .integration-header :is(a,summary,button):focus-visible{outline-color:var(--on-ink)}
.paper-page.on-page :is(.on-player,.on-share,.on-footer) :focus-visible{outline-color:var(--on-paper)}
.on-page .skip-link{background:var(--on-ink);color:var(--on-paper);border-radius:8px;font-weight:700}

/* ---------------------------------------------------------------- buttons */
.paper-page.on-page .on-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 22px;border-radius:999px;border:1.5px solid var(--on-ink);background:var(--on-paper);color:var(--on-ink);font:700 16px/1.1 var(--on-body);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:transform 120ms ease,background-color 120ms ease}
.paper-page.on-page .on-btn:hover{transform:translateY(-1px)}
.paper-page.on-page .on-btn:active{transform:translateY(1px)}
.paper-page.on-page .on-btn-tomato{background:var(--on-tomato);color:var(--on-ink);border-color:var(--on-ink)}
.paper-page.on-page .on-btn-tomato:hover{background:var(--on-tomato-hover)}
.paper-page.on-page .on-btn-paper{background:var(--on-paper);color:var(--on-ink);border-color:var(--on-paper)}
.paper-page.on-page .on-btn-lg{min-height:58px;padding:17px 28px;font-size:18px}
.on-page .on-link{display:inline-block;margin-top:24px;font-weight:700;color:var(--on-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------------------------------------------------------------- header */
.on-page .integration-header.on-header{background:var(--on-paper);backdrop-filter:none;border-bottom:1.5px solid var(--on-ink);color:var(--on-ink)}
.on-page .on-nav{max-width:var(--wrap);margin:0 auto;padding:0 var(--g);min-height:68px;display:flex;align-items:center;gap:36px}
.on-page .on-brand{display:flex;align-items:center;flex:none}
.on-page .on-brand .on-logo{height:26px;width:auto}
.on-page .on-header nav>a{font:600 15px/1 var(--on-body);color:var(--on-ink);text-decoration:none}
.on-page .on-header nav>a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.on-page .on-header .integration-account{margin-left:auto;display:flex;align-items:center;gap:18px}
.on-page .on-header .signin{font:600 15px/1 var(--on-body);color:var(--on-ink)}
.paper-page.on-page .on-header .on-header-cta{min-height:44px;padding:11px 18px;font-size:15px}
.paper-page.on-page .on-header .mobile-menu{display:none;width:44px;height:44px;min-width:44px;padding:0;border:1.5px solid var(--on-ink);border-radius:50%;background:var(--on-paper);position:relative}
.on-page .on-header .mobile-menu span,.on-page .on-header .mobile-menu span::before,.on-page .on-header .mobile-menu span::after{position:absolute;left:12px;right:12px;height:2px;background:var(--on-ink);content:"";top:20px}
.on-page .on-header .mobile-menu span::before{left:0;right:0;top:-6px}.on-page .on-header .mobile-menu span::after{left:0;right:0;top:6px}
.on-page .on-header #mobile-links{border-top:1px solid var(--on-line);padding:6px var(--g) 14px;display:flex;flex-direction:column;gap:0}
.on-page .on-header #mobile-links[hidden]{display:none}
.on-page .on-header #mobile-links a{font:700 18px/1 var(--on-body);padding:14px 0;border-bottom:1px solid var(--on-line);color:var(--on-ink)}
@media (max-width:980px){.on-page .on-nav>nav{display:none}.paper-page.on-page .on-header .mobile-menu{display:block}.on-page .on-header .signin{display:none}}
@media (max-width:600px){.on-page .on-nav{min-height:58px;gap:10px}.on-page .on-brand .on-logo{height:20px}.on-page .on-header .integration-account{gap:8px}.paper-page.on-page .on-header .on-header-cta{padding:10px 14px;font-size:14px}}
@media (max-width:370px){.paper-page.on-page .on-header .on-header-cta{display:none}}
.on-page .on-cta-short{display:none}
@media (max-width:600px){.paper-page.on-page .integration-account>.primary .on-cta-long{display:none}.paper-page.on-page .integration-account>.primary .on-cta-short,.paper-page.on-page .integration-account>.primary span[aria-hidden]{display:inline}}

/* ---------------------------------------------------------------- common type */
.on-page .on-eyebrow{font:700 12px/1.2 var(--on-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-muted);margin:0 0 14px}
.on-page .on-eyebrow-paper{color:var(--on-stone)}
.paper-page.on-page .on-h2{font:400 clamp(40px,5.2vw,76px)/.9 var(--on-name);text-transform:uppercase;letter-spacing:.004em;margin:0 0 18px;max-width:16ch}
.on-page .on-h2 em{display:block;font:italic 400 .86em/1.02 var(--on-title);text-transform:none;letter-spacing:-.005em;margin-top:.04em}
.on-page .on-sub{margin:0;font-size:18px;line-height:1.55;color:var(--on-body-ink);max-width:38em}

/* ---------------------------------------------------------------- hero */
.on-page .on-hero{background:var(--on-paper);border-bottom:1.5px solid var(--on-ink)}
.on-page .on-hero-grid{max-width:var(--wrap);margin:0 auto;padding:40px var(--g) 56px;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:48px;align-items:center}
.paper-page.on-page .on-h1{margin:0;max-width:none;font:400 clamp(56px,6vw,88px)/.86 var(--on-name);text-transform:uppercase;letter-spacing:.003em;color:var(--on-ink)}
.on-page .on-h1-a{display:block}
.on-page .on-h1-b{display:block;font:italic 400 .9em/1 var(--on-title);text-transform:none;letter-spacing:-.01em;margin-top:.02em}
.on-page .on-lead{margin:22px 0 0;font:500 20px/1.45 var(--on-body);color:var(--on-body-ink);max-width:27em;letter-spacing:-.005em}
.on-page .on-tracklist{list-style:none;margin:26px 0 0;padding:0;border-top:2px solid var(--on-ink);max-width:600px}
.on-page .on-track{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 8px 14px 2px;border-bottom:1px solid var(--on-rule);text-decoration:none;color:var(--on-ink);transition:background-color 120ms ease}
.on-page .on-track:hover{background:var(--on-paper-deep)}
/* the row of the example on show (the product follows the example; outnow.js) */
.on-page .on-track[aria-current=true]{background:var(--on-paper-deep);box-shadow:inset 4px 0 0 var(--on-ink)}
.on-page .on-track-no{font:600 13px/1 var(--on-body);color:var(--on-muted);font-variant-numeric:tabular-nums;letter-spacing:.06em;padding-left:10px}
.on-page .on-track-name{font:800 19px/1.2 var(--on-body);letter-spacing:-.01em}
.on-page .on-track-name small{display:block;font:500 14px/1.35 var(--on-body);color:var(--on-muted);margin-top:3px;letter-spacing:0}
.on-page .on-track-price{font:400 34px/1 var(--on-name);font-variant-numeric:tabular-nums}
.on-page .on-hero-actions{display:flex;align-items:center;gap:20px;margin-top:24px;flex-wrap:wrap}
.on-page .on-ready{margin:0;font:600 15px/1.4 var(--on-body);color:var(--on-muted)}
/* the cause, said small (R-08): the tree mark and one line, down to §4 */
.on-page .on-hero-cause{margin:16px 0 0}
/* 0926d (P3-5): a title never leaves one word alone on its last line ("…the / Taxi") */
.on-page .on-player-title{text-wrap:balance}
.on-page .on-hero-cause a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font:600 15px/1.3 var(--on-body);color:var(--on-ink);text-decoration:none}
.on-page .on-hero-cause a:hover{text-decoration:underline;text-underline-offset:4px}
.on-page .on-hero-cause-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--on-ink);flex:none}

/* ---------------------------------------------------------------- player: the film + what it is, beside it */
.on-page .on-player{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:24px;padding:16px;border-radius:24px;background:var(--on-wax);color:var(--on-paper);box-shadow:0 30px 60px -20px var(--on-shade),0 0 0 1.5px var(--on-ink)}
.on-page .on-player-media{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--on-ink);cursor:pointer}
.on-page .on-player-media>.on-film{position:absolute;inset:0;width:100%}
.on-page .on-film[data-ground=paper]{box-shadow:inset 0 0 0 1px var(--on-line)}
/* HAD TO BE THERE at landing sizes (a 160–310 px film): the sticker's word spaces round away at 1x (MERGE_STREAMS §6.3);
   a landing-only word gap keeps the four words apart. The 1080 px render is unchanged. */
.on-page .on-film .bf-jokes{word-spacing:.22em}
.on-page .on-player-info{position:relative;display:flex;flex-direction:column;min-width:0;padding:6px 4px 2px 0;container-type:inline-size}
/* the product badge: which of the two this example is, the loudest word beside the film (guardrail: hero Next + badge) */
.on-page .on-badge{align-self:flex-start;margin:0;padding:8px 14px 7px;border-radius:999px;background:var(--on-paper);color:var(--on-ink);font:800 14px/1 var(--on-body);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.on-page .on-player-name{margin:22px 0 0;font:400 min(104px,calc((100cqw - 8px) * 1.85 / var(--n,6)))/.84 var(--on-name);text-transform:uppercase;letter-spacing:.004em;white-space:nowrap}
.on-page .on-player-title{margin:6px 0 0;font:italic 400 clamp(28px,2.8vw,40px)/1.05 var(--on-title)}
.on-page .on-credit{margin:14px 0 0;font:600 14px/1.4 var(--on-body);color:var(--on-paper-dim)}
.on-page .on-player-foot{margin-top:auto;padding-top:22px}
.on-page .on-progress{height:3px;background:var(--on-rule-dark);border-radius:3px;overflow:hidden;margin:0 0 14px}
.on-page .on-progress i{display:block;height:100%;background:var(--on-paper);transform-origin:0 50%;transform:scaleX(0)}
.on-page .on-controls{display:flex;gap:10px;align-items:center}
.paper-page.on-page .on-sound{flex:1 1 auto;min-width:0;justify-content:flex-start;padding-left:16px}
.on-page .on-sound span[data-on]{overflow:hidden;text-overflow:ellipsis}
.on-page .on-sound-icon{flex:none;display:grid;place-items:center;width:16px;height:16px}
.on-page .on-sound-icon svg{display:block}
.on-page .on-sound-icon .on-i-pause,.on-page [aria-pressed=true]>.on-sound-icon .on-i-play{display:none}
.on-page [aria-pressed=true]>.on-sound-icon .on-i-pause{display:block}
.paper-page.on-page .on-next{min-height:44px;margin-top:12px;padding:6px 0;border:0;border-radius:0;background:none;color:var(--on-paper-dim);font:700 15px/1 var(--on-body);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.paper-page.on-page .on-next:hover{color:var(--on-paper);text-decoration:underline;text-underline-offset:4px}

/* ---------------------------------------------------------------- sections */
.on-page .on-section{padding:96px 0}
.on-page .on-head{margin-bottom:40px}

/* ---- the sung lines (0926f, owner "put the scrolling strip live as proposed"): a thin band between the hero and §1,
   one chorus line per example and its name, scrolling very slowly (outnow.js sets the pace, about 48 px/s, and runs it
   only while the hero's film is off screen: one moving thing at a time). Paper, hairline rules, the line in the serif at
   reduced contrast, the name in Anton ink (never cobalt: a line is a tap target, accent-tokens.md). It pauses under a
   pointer, a touch or the focus. The moving copy is two identical runs, so -50% is one run: a seamless loop on the
   compositor. Screen readers and the keyboard use the one plain list (visually hidden; its focused line shows over the
   band). Reduced motion: a still, wrapping row of a few lines. */
.on-page .on-sung{position:relative;background:var(--on-paper);border-bottom:1px solid var(--on-line)}
.on-page .on-sung-band{overflow:hidden;height:52px;display:flex;align-items:center;cursor:pointer;-webkit-mask-image:linear-gradient(90deg,transparent,var(--on-ink) 32px,var(--on-ink) calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,var(--on-ink) 32px,var(--on-ink) calc(100% - 32px),transparent)}
.on-page .on-sung-track{display:flex;width:max-content;flex:none}
.on-page .on-sung-run{display:flex;flex:none;list-style:none;margin:0;padding:0}
.on-page .on-sung-run li{display:flex;align-items:baseline;gap:.55em;padding:0 0 0 .55em;white-space:nowrap}
.on-page .on-sung-line{font:italic 400 18px/1 var(--on-title);color:var(--on-muted);transition:color 120ms ease}
.on-page .on-sung-name{font:400 15px/1 var(--on-name);letter-spacing:.05em;text-transform:uppercase;color:var(--on-ink)}
.on-page .on-sung-dash,.on-page .on-sung-dot{font:400 15px/1 var(--on-body);color:var(--on-muted)}
.on-page .on-sung-run li:hover .on-sung-line{color:var(--on-ink)}
.on-page .on-sung.is-on .on-sung-track{will-change:transform;animation:on-sung var(--on-sung-dur,150s) linear infinite}
.on-page .on-sung.is-on:is(.is-held,.is-off,:focus-within) .on-sung-track{animation-play-state:paused}
@media (hover:hover){.on-page .on-sung.is-on .on-sung-band:hover .on-sung-track{animation-play-state:paused}}
@keyframes on-sung{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.on-page .on-sung-list{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;list-style:none}
.on-page .on-sung-list:focus-within{right:0;bottom:0;width:auto;height:auto;clip:auto;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--on-paper)}
.on-page .on-sung-list:focus-within li:not(:focus-within){display:none}
.paper-page.on-page .on-sung-list button{min-height:40px;padding:6px 12px;border:0;border-radius:6px;background:none;color:var(--on-ink);font:italic 400 18px/1.2 var(--on-title);cursor:pointer}
@media (max-width:600px){.on-page .on-sung-band{height:46px}.on-page .on-sung-line{font-size:16px}.on-page .on-sung-name,.on-page .on-sung-dash,.on-page .on-sung-dot{font-size:14px}}
@media (prefers-reduced-motion:reduce){
  .on-page .on-sung-band{height:auto;padding:14px var(--g);cursor:auto;-webkit-mask-image:none;mask-image:none}
  .on-page .on-sung-track{width:auto;flex:1 1 auto;justify-content:center}
  .on-page .on-sung-run{flex:0 1 auto;flex-wrap:wrap;justify-content:center;gap:8px 1.6em}
  .on-page .on-sung-run+.on-sung-run,.on-page .on-sung-run li:nth-child(n+5),.on-page .on-sung-dot{display:none}
  .on-page .on-sung-run li{padding:0;cursor:pointer}
}

/* ---- 01 examples: the three-up cover carousel (owner decision 19; FINAL B's side-peek coverflow restyled to A's
   paper; the mechanics are coverflow.js, the positions two-products.css's .tp-cf-*). The middle cover is big, its
   neighbours peek at either side; each cover is its film's first frame, on its own ground. */
.on-page .on-releases{background:var(--on-paper)}
.on-page .on-releases .on-eyebrow{color:var(--on-accent)}
.on-page .on-cf{--cf-w:31%;max-width:1000px;margin:0 auto}
.on-page .on-cf .tp-cf{margin:0;border-radius:0}
.on-page .on-cf .tp-cf:focus-visible{outline:3px solid var(--on-ink);outline-offset:6px;border-radius:14px}
.on-page .on-cf .tp-cf-track{padding-bottom:calc(16 / 9 * var(--cf-w) + 28px)}
.on-page .on-cf .tp-cf-item{width:var(--cf-w);top:12px}
.on-page .on-cf .tp-cf-item[data-pos="-1"]{transform:translateX(-130%) scale(.8);opacity:1}
.on-page .on-cf .tp-cf-item[data-pos="1"]{transform:translateX(30%) scale(.8);opacity:1}
.on-page .on-cf .tp-cf-item[data-pos="-2"]{transform:translateX(-190%) scale(.62)}
.on-page .on-cf .tp-cf-item[data-pos="2"]{transform:translateX(90%) scale(.62)}
.on-page .on-cf .tp-cf-item:not([data-pos="-2"]):not([data-pos="-1"]):not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]){opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) scale(.5)}
.paper-page.on-page .on-cf-cover{position:relative;display:block;width:100%;min-height:0;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--on-ink);cursor:pointer;box-shadow:0 22px 44px -22px var(--on-shade),0 0 0 1.5px var(--on-ink)}
.on-page .on-cf-cover .on-film{display:block;width:100%}
.on-page .on-cf-cover .on-film[data-ground=paper]{box-shadow:none}
.on-page .tp-cf-item:not([data-pos="0"]) .on-cf-cover{box-shadow:0 0 0 1.5px var(--on-rule)}
/* the neighbours sit back: a paper veil, never a grey wash of their ground */
.on-page .on-cf-cover::after{content:"";position:absolute;inset:0;background:var(--on-paper);opacity:0;pointer-events:none;transition:opacity .45s ease}
.on-page .tp-cf-item:not([data-pos="0"]) .on-cf-cover::after{opacity:.38}
.on-page .on-cf-caption{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:18px 0 0;font:600 15px/1.3 var(--on-body);color:var(--on-body-ink)}
.on-page .on-cf-dot{color:var(--on-muted)}
.on-page .on-cf-badge{padding:6px 11px 5px;border:1.5px solid var(--on-ink);border-radius:999px;font:800 12px/1 var(--on-body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink);white-space:nowrap}
.on-page .on-cf-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin:18px 0 0}
.paper-page.on-page .on-cf-sound{padding-left:18px}
.paper-page.on-page .on-cf-next{margin-top:0;color:var(--on-ink)}
.paper-page.on-page .on-cf-next:hover{color:var(--on-ink)}
.on-page .on-cf .tp-dashes{display:flex;justify-content:center;gap:2px;margin:14px 0 0}
.paper-page.on-page .on-cf .tp-dash{width:32px;height:40px}
.on-page .on-cf .tp-dash::before{width:12px;height:3px;border-radius:2px;background:var(--on-rule)}
.on-page .on-cf .tp-dash:hover::before{background:var(--on-muted)}
.on-page .on-cf .tp-dash[aria-current=true]::before{width:26px;background:var(--on-ink)}

/* ---- 02 how a single gets made: You / We / You, beside the "What Amelia typed" card */
.on-page .on-how{background:var(--on-paper);border-top:1.5px solid var(--on-ink)}
.on-page .on-credits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.on-page .on-credits li{border-top:2px solid var(--on-ink);padding-top:18px}
.on-page .on-credit-no{display:block;font:400 64px/1 var(--on-name);color:transparent;-webkit-text-stroke:1.5px var(--on-ink);margin-bottom:10px}
.paper-page.on-page .on-credits h3{font:400 34px/.95 var(--on-name);text-transform:uppercase;letter-spacing:.005em;margin:0 0 10px}
.on-page .on-credit-a{font:800 18px/1.3 var(--on-body);margin:0 0 8px}
.on-page .on-credits p{color:var(--on-body-ink);font-size:16px;line-height:1.55}
.on-page .fa-how-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.paper-page.on-page .fa-steps{grid-template-columns:1fr;gap:0}
.on-page .fa-steps li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 16px;padding:22px 0 24px}
.on-page .fa-steps li:last-child{border-bottom:2px solid var(--on-ink)}
.on-page .fa-steps .on-credit-no{margin:0}
.paper-page.on-page .fa-steps h3{font-size:44px;margin:0 0 6px}
.on-page .fa-steps p:not(.on-credit-a){margin:0}
.on-page .fa-make{margin:0;max-width:460px;justify-self:end;width:100%;padding:18px 18px 16px;border:1.5px solid var(--on-ink);border-radius:16px;background:var(--bc-card);box-shadow:5px 5px 0 var(--on-ink)}
.on-page .fa-make-who{margin:0 0 10px!important;font:700 12px/1.2 var(--on-body)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--on-muted)!important}
.on-page .fa-make-typed{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.on-page .fa-make-typed li{border:0!important;display:block;padding:8px 10px;border-radius:8px;background:var(--on-paper);font:500 15px/1.35 var(--on-body);color:var(--on-ink)}
.on-page .fa-make-arrow{display:flex;align-items:center;gap:8px;margin:12px 0 4px!important;font:700 12px/1 var(--on-body)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--on-muted)!important}
.on-page .fa-make-arrow i{width:1.5px;height:22px;background:var(--on-ink);position:relative;margin-left:6px}
.on-page .fa-make-arrow i::after{content:"";position:absolute;left:-4px;bottom:-1px;border:4.5px solid transparent;border-top:6px solid var(--on-ink);border-bottom:0}
.on-page .fa-make-hook{margin:0!important;font:italic 400 30px/1.05 var(--on-title)!important;color:var(--on-ink)!important}
.on-page .fa-make-hook mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--on-tomato);text-decoration-thickness:3px;text-underline-offset:6px}

/* ---- 03 what they get (ink band): the example page on a phone, the email beside it */
.on-page .on-share{background:var(--on-ink);color:var(--on-paper)}
.on-page .on-share-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.on-page .on-share .on-sub{color:var(--on-paper-dim)}
.on-page .on-rx-art{display:flex;align-items:flex-end;justify-content:center}
.on-page .fa-rx-phone{position:relative;flex:none;display:block;width:270px;border-radius:40px;background:var(--on-ink);padding:9px;box-shadow:0 0 0 1.5px var(--on-rule-dark),0 30px 60px -20px var(--on-shade);z-index:1;transition:transform 160ms ease}
.on-page .fa-rx-phone img{display:block;width:100%;height:auto;border-radius:31px}
.on-page .fa-rx-phone:hover{transform:translateY(-3px)}
.on-page .fa-rx-phone:focus-visible{outline-color:var(--on-paper);outline-offset:6px;border-radius:40px}
/* beside the phone, never over its screen (jury 2026-09-26: it hid the lyric line and Copy link) */
.on-page .on-rx-mail{position:relative;flex:none;margin:0 0 56px 22px;width:196px;background:var(--bc-card);color:var(--on-ink);border-radius:14px;padding:10px;box-shadow:0 24px 44px -18px var(--on-shade);z-index:2;text-align:left;transform:rotate(3deg);display:block}
.on-page .on-rx-mail-head{display:flex;justify-content:space-between;font:700 11px/1 var(--on-body)}
.on-page .on-rx-mail-head span+span{font-weight:500;color:var(--on-muted)}
.on-page .on-rx-mail-subj{display:block;margin:5px 0 8px;font:700 13px/1.2 var(--on-body)}
.on-page .on-rx-mail-poster{position:relative;display:block;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--on-line)}
.on-page .on-rx-mail-poster .on-film{display:block;width:100%}
.on-page .on-rx-preview .on-rx-mail-subj{margin:8px 0 2px;font:700 12.5px/1.3 var(--on-body)}
.on-page .on-rx-play{position:absolute;right:7px;top:7px;width:28px;height:28px;border-radius:50%;background:var(--on-paper);display:grid;place-items:center;box-shadow:0 6px 16px var(--on-shade)}
.on-page .on-rx-play{color:var(--on-ink)}
.on-page .on-rx-play svg{display:block;margin-left:1px}
.paper-page.on-page .fa-rx-open{margin-top:26px;background:var(--on-paper);border-color:var(--on-paper);color:var(--on-ink)}

/* ---- 04 included: the cause in full on the cobalt band (J-Visual, accent-tokens.md §2), the IC-B marks in rings */
/* The cobalt panel stands in the paper, a paper margin all round (J-Visual P1 #8: two heavy bands back to back read apart
   by hue only, 1.72:1): ink band, a paper edge, the cobalt panel, paper again for Start here. */
.on-page .on-section.on-good{--on-good-rule:color-mix(in srgb,var(--on-paper) 26%,transparent);background:var(--on-paper);padding:40px 0 16px}
.on-page .on-good-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:72px 64px;border-radius:28px;background:var(--on-accent);color:var(--on-paper)}
.on-page .on-good .on-eyebrow{color:var(--on-stone)}
.on-page .on-good .on-sub{color:var(--on-paper-dim)}
.on-page .on-good a{color:var(--on-paper);font-weight:700;text-underline-offset:4px}
.on-page .on-ext svg{display:inline-block;vertical-align:-1px;margin-left:2px}
.on-page .on-good :focus-visible{outline-color:var(--on-paper)}
.on-page .on-thanks{list-style:none;margin:0;padding:0;border-top:2px solid var(--on-good-rule)}
.on-page .on-thanks li{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--on-good-rule)}
.on-page .on-thanks-a{font:400 44px/1 var(--on-name);text-transform:uppercase}
.on-page .fa-thanks-text{display:flex;align-items:baseline;gap:4px 14px;flex-wrap:wrap}
.on-page .on-mark{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--on-paper) 70%,transparent);color:var(--on-paper)}

/* ---- 05 start here: the big call, the peel mark beside it, the form (styles/checkout.css) in one card */
.on-page .tp-start.on-start{max-width:var(--wrap);margin:0 auto;padding:96px var(--g);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;background:none}
.on-page .on-start-head{position:sticky;top:88px;text-align:left;max-width:none;margin:0}
.on-page .on-start-form{min-width:0}
.on-page .fa-start-h{display:flex;align-items:center;gap:.16em;margin:0;font:400 clamp(64px,8vw,120px)/.86 var(--on-name);text-transform:uppercase;letter-spacing:.004em;color:var(--on-ink)}
.on-page .fa-start-h svg{flex:none;width:.62em;height:.62em;transform:translateY(-.04em)}
.on-page .fa-start-sub{margin:10px 0 0!important;font:italic 400 clamp(34px,3.6vw,48px)/1.02 var(--on-title);color:var(--on-ink)}
/* the cover the form builds: in the slot under the head on a wide screen; under the fields on a phone */
.on-page .fa-credit-slot{margin-top:32px}
.on-page .fa-credit-slot:empty{display:none}
.paper-page.on-page .fa-live-inline{display:none}
.on-page .on-start .bc-checkout{background:var(--bc-card);border:1.5px solid var(--on-ink);border-radius:22px;box-shadow:8px 8px 0 var(--on-ink);padding:6px}
.on-page .on-start .bc-checkout-inner{padding:18px}
.on-page .on-start .bc-checkout :is(h2,h3){font-family:var(--on-name);text-transform:uppercase;letter-spacing:.005em;font-weight:400}
.on-page .on-start .bc-checkout :is(button,input,textarea){font-family:var(--on-body)}
.on-page .on-start .bc-checkout textarea{border-color:var(--on-ink)!important}
/* one head, one box, one button: the section's head stands for the composer's own at the story step */
.on-page .on-start .bc-checkout[data-step=story] .bc-checkout-inner>:is(.eyebrow,h2,.bc-checkout-sub){display:none}
.on-page .on-start .bc-checkout[data-step=story] .bc-checkout-inner>.bc-primary{width:100%}
.paper-page.on-page .on-start .bc-primary{margin-top:14px;min-height:56px;background:var(--on-tomato);border-color:var(--on-ink);color:var(--on-ink);font:700 17px/1 var(--on-body)}
.paper-page.on-page .on-start .bc-primary:hover:not(:disabled){background:var(--on-tomato-hover)}
.on-page .on-picks{display:grid;gap:12px}
.paper-page.on-page .on-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;padding:12px 14px;border:1.5px solid var(--on-line);border-radius:14px;background:var(--on-paper);color:var(--on-ink);min-height:64px}
.paper-page.on-page .on-pick[aria-selected=true]{border-color:var(--on-ink);box-shadow:inset 4px 0 0 var(--on-accent);background:var(--bc-card)}
.on-page .on-pick strong{display:block;font:800 16px/1.2 var(--on-body)}
.on-page .on-pick .tp-pick2-text>span{font-size:14px;color:var(--on-muted)}
.on-page .on-start .bc-checkout .bc-composer-pick .on-pick .tp-pick2-text>span{display:block}
.on-page .on-pick-price{font:400 26px/1 var(--on-name)}
/* the second take, one small line beside the IC-B second-take mark (a record and the one behind it) */
.on-page .fa-notes{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.on-page .fa-notes li{display:grid;grid-template-columns:40px minmax(0,1fr);justify-items:start;align-items:center;gap:12px;font:600 15px/1.4 var(--on-body);color:var(--on-body-ink)}
.on-page .fa-take-mark{justify-self:center;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--on-ink);color:var(--on-ink)}
.on-page .fa-take-mark svg{display:block}

/* ---- 06 questions as liner notes */
.on-page .integration-faq.on-faq{display:block;max-width:none;margin:0;padding:96px 0;background:var(--on-paper);border-top:1.5px solid var(--on-ink);color:var(--on-ink)}
.on-page .on-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.on-page .on-faq details{border-bottom:1px solid var(--on-rule)}
.on-page .on-faq details:first-child{border-top:2px solid var(--on-ink)}
.on-page .on-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;padding:22px 0;min-height:64px;font:800 19px/1.3 var(--on-body);cursor:pointer}
.on-page .on-faq summary::-webkit-details-marker{display:none}
.on-page .on-faq summary span{flex:none;position:relative;width:18px;height:18px}
.on-page .on-faq summary span::before,.on-page .on-faq summary span::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--on-ink)}
.on-page .on-faq summary span::after{transform:rotate(90deg);transition:transform 160ms ease}
.on-page .on-faq details[open] summary span::after{transform:rotate(0)}
.on-page .on-faq details p{padding:0 32px 22px 0;font-size:16.5px;line-height:1.6;color:var(--on-body-ink)}

/* ---- the close (ink) */
.on-page .on-footer{background:var(--on-ink);color:var(--on-paper);padding:80px 0 40px}
.on-page .on-footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:48px;border-bottom:1px solid var(--on-rule-dark)}
.on-page .on-footer-big{margin:0;font:400 clamp(44px,6vw,92px)/.88 var(--on-name);text-transform:uppercase;max-width:12ch}
.on-page .on-footer-big em{display:block;font:italic 400 .9em/1 var(--on-title);text-transform:none;color:var(--on-stone)}
.on-page .on-footer-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:28px 0 18px}
.on-page .on-footer-row nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.on-page .on-footer-row nav a{color:var(--on-paper-dim);font-size:14.5px;text-decoration:none}
.on-page .on-footer-row nav a:hover{color:var(--on-paper);text-decoration:underline}
.on-page .on-legal{color:var(--on-stone);font-size:12.5px;line-height:1.6}

/* ---- back to top (R-13): bottom-right after ~1.5 screens (outnow.js), clear of the form and the close */
.on-page .on-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(20px,calc(env(safe-area-inset-bottom) + 16px));z-index:30;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--on-ink);background:var(--on-paper);color:var(--on-ink);box-shadow:0 12px 28px -14px var(--on-shade);text-decoration:none;transition:transform 120ms ease,opacity 160ms ease}
/* off: faded and out of the pointer's way, still focusable; a keyboard focus shows it wherever the page is */
.on-page .on-top.is-off:not(:focus-visible){opacity:0;pointer-events:none;transform:translateY(8px)}
.on-page .on-top:focus-visible{outline:3px solid var(--on-ink);outline-offset:3px}
/* the IC-B next glyph inside CTAs and "Next: <name>" (it replaces the text arrow) */
.on-page .on-arrow{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em}
.on-page .on-top:hover{transform:translateY(-2px)}
.on-page .on-top svg{display:block}
@media (prefers-reduced-motion:reduce){.on-page .on-top{transition:none}.on-page .on-top:hover{transform:none}.on-page .on-cf .tp-cf-item{transition:none}}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1100px){
  .on-page .on-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .on-page .on-cf{--cf-w:36%}
  .on-page .on-good-panel{padding:56px 40px;gap:40px}
}
/* ---------------------------------------------------------------- phone */
/* 0926d (final live review P3-3): the phone hero is 32 px tighter, so on a 390×844 first screen the ready and cause
   lines sit above the slim consent bar (globals.css) instead of under it. */
@media (max-width:900px){
  .on-page .on-hero-grid{grid-template-columns:minmax(0,1fr);padding-top:10px;padding-bottom:36px;gap:0}
  .on-page .on-hero-copy{display:contents}
  .on-page .on-h1{order:1}.on-page .on-lead{order:2}.on-page .on-hero-stage{order:3;margin-top:10px}.on-page .on-hero-grid>.on-hero-copy>.on-tracklist{order:4}.on-page .on-hero-actions{order:5}.on-page .on-hero-cause{order:6;text-align:center}
  .paper-page.on-page .on-h1{font-size:clamp(40px,11.6vw,72px);line-height:.88}
  .on-page .on-h1-a{display:inline}.on-page .on-h1-b{display:inline;font-size:.96em}
  .on-page .on-lead{font-size:16px;line-height:1.4;margin-top:10px}
  .on-page .on-tracklist{margin-top:10px;max-width:none}
  .on-page .on-track{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:9px 4px 9px 0}
  .on-page .on-track-name{font-size:16.5px}.on-page .on-track-name small{font-size:14px}
  .on-page .on-track-price{font-size:28px}
  .on-page .on-hero-actions{margin-top:10px;gap:6px 12px;justify-content:center}
  .paper-page.on-page .on-hero-actions .on-btn{width:100%}
  .on-page .on-ready{font-size:14px}
  .on-page .on-hero-cause{margin-top:2px}
  .on-page .on-player{grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);gap:14px;padding:12px;border-radius:20px}
  .on-page .on-player-info{padding:2px 0 0}
  .on-page .on-badge{font-size:14px;padding:7px 11px 6px;letter-spacing:.08em}
  .on-page .on-player-name{font-size:min(60px,calc((100cqw - 4px) * 1.85 / var(--n,6)));margin-top:12px}
  .on-page .on-player-title{font-size:21px}
  .on-page .on-credit{font-size:14px;margin-top:8px}
  .on-page .on-player-foot{padding-top:12px}
  .on-page .on-progress{margin:0 0 10px}
  .paper-page.on-page .on-sound{min-height:44px;padding:9px 12px;font-size:14px;gap:8px}
  .paper-page.on-page .on-next{font-size:14px;margin-top:12px}
  .paper-page.on-page .tp-picks.on-picks{grid-template-columns:minmax(0,1fr)!important;display:grid!important}
  .on-page .on-section{padding:64px 0}
  .on-page .on-head{margin-bottom:24px}
  .on-page .on-sub{font-size:16.5px}
  .on-page .on-cf{--cf-w:56%}
  .on-page .on-cf .tp-cf-item[data-pos="-1"]{transform:translateX(-122%) scale(.76)}
  .on-page .on-cf .tp-cf-item[data-pos="1"]{transform:translateX(22%) scale(.76)}
  .on-page .on-cf-controls{gap:10px 20px}
  .on-page .on-credits{grid-template-columns:1fr;gap:28px}
  .on-page .on-credit-no{font-size:48px}
  .on-page .fa-how-grid{grid-template-columns:1fr;gap:28px}
  .on-page .fa-make{justify-self:stretch;max-width:none}
  .on-page .fa-steps li{grid-template-columns:52px minmax(0,1fr);padding:18px 0 20px}
  .paper-page.on-page .fa-steps h3{font-size:36px}
  .on-page .on-share-grid{grid-template-columns:1fr;gap:36px}
  .on-page .on-share-copy{order:-1}
  .on-page .fa-rx-phone{width:224px;border-radius:34px;padding:8px}
  .on-page .fa-rx-phone img{border-radius:26px}
  .on-page .on-rx-mail{width:132px;margin:0 0 40px -2px;padding:8px}
  .on-page .on-section.on-good{padding:24px 0 8px}
  .on-page .on-good-panel{grid-template-columns:1fr;gap:28px;padding:44px 22px;border-radius:22px}
  .on-page .on-thanks-a{font-size:34px}
  .on-page .on-mark{width:48px;height:48px}
  .on-page .tp-start.on-start{grid-template-columns:1fr;padding:64px var(--g);gap:28px}
  .on-page .on-start-head{position:static}
  .on-page .on-start .bc-checkout{box-shadow:5px 5px 0 var(--on-ink)}
  .on-page .fa-start-h{font-size:clamp(60px,18vw,96px)}
  .on-page .fa-start-sub{font-size:34px}
  .on-page .fa-credit-slot{display:none}
  .paper-page.on-page .fa-live-inline{display:grid}
  .on-page .integration-faq.on-faq{padding:64px 0}
  .on-page .on-faq-grid{grid-template-columns:1fr;gap:12px}
  .on-page .on-faq summary{font-size:17px}
  .on-page .on-footer{padding:56px 0 32px}
}
@media (max-width:600px){
  .on-page .fa-notes li{font-size:14px;align-items:flex-start}
}
/* a Single + Video plays its rendered photo video over the film frame (outnow.js deck; examples v3 2026-09-26) */
.on-film .on-mp4{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:6;background:transparent;pointer-events:none}.on-film.is-mp4 .on-mp4{display:block}