/* Landing page only. Loaded by landing.html alone, so a signed-in studio never
downloads the art direction: cut-paper shapes, an equaliser, a scrolling name
strip, section-wide grounds. Colour still comes from app.css tokens, which is
what lets a reseller repaint the accent without touching this file.
Every shape below is flat two-tone fill, never a soft blended wash or a blur:
that is the difference between "illustrated" and the glow-mesh hero every
generated template ships with. */
/* Small print on the landing page sits on three different grounds, and the
shared muted grey fails on the accent chip, so the page carries its own
slightly brighter tint and the chip states restate it in ink. */
main.full{--soft:#cdc3b6;--soft-on-accent:rgba(23,18,14,.78);
max-width:none;margin:0;padding:0;position:relative;
/* clip, not hidden: overflow:hidden makes this a scroll container, which
silently kills scrollIntoView / anchor jumps for anything nested in it. */
overflow-x:clip;overflow-y:visible;padding-bottom:var(--dock-h,0)}
main.full .muted,main.full .note{color:var(--soft)}
main.full .chip.on .muted{color:var(--soft-on-accent)}
main.full a:focus-visible,main.full button:focus-visible,
main.full summary:focus-visible,main.full [tabindex]:focus-visible{
outline:2px solid var(--accent);outline-offset:3px}
.paper{position:absolute;inset:0 0 auto;height:640px;z-index:0;pointer-events:none}
.paper svg{width:100%;height:100%;display:block}
.paper .blob{fill:var(--card);opacity:.85}
.paper .blob.two{fill:var(--raised);opacity:.6}
.paper .rules path{stroke:var(--line);stroke-width:1;opacity:.5}
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0 0 .6rem;
font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow.center{justify-content:center}
.eyebrow .dot{width:7px;height:7px;border-radius:99px;background:var(--accent);
flex:none}
/* Each fact keeps its own line if it has to, and the separator hangs off the
fact before it - a middle dot set in running text ends up alone on a line. */
.eyebrow>span:not(.dot){white-space:nowrap}
.eyebrow>span:not(.dot):not(:last-child)::after{content:"\00b7";margin-left:.5rem;
color:var(--accent);opacity:.55}
/* Set tighter than the section eyebrows: three facts at .76rem/.14em took two
lines of the hero column and left "self-hosted" hanging on its own. */
.hero .eyebrow{font-size:.71rem;letter-spacing:.1em;margin-bottom:.9rem}
.center{text-align:center}
h2.display{font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.14;margin:0 0 .5rem;
letter-spacing:-.02em}
.lede.center{margin:0 auto 1.5rem;max-width:38rem}
/* --- hero -------------------------------------------------------------- */
.hero{position:relative;z-index:1;max-width:1180px;margin:0 auto;
padding:3.5rem 1.5rem 2rem;display:grid;gap:2.5rem;text-align:left;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.05;
letter-spacing:-.03em;margin:0 0 1rem;max-width:22ch;
text-wrap:balance}
/* Drawn under the word, not ruled: a straight 3px border under a rotating word
is the single clearest tell of a generated page. The stroke is a mask, so a
reseller repainting --accent repaints the pen too. */
.hero h1 em{font-style:normal;color:var(--accent);position:relative;
padding-bottom:.2em;display:block;width:max-content;max-width:100%}
.hero h1 em::after{content:"";position:absolute;left:-.04em;right:-.06em;
bottom:0;height:.24em;background:var(--accent);
-webkit-mask-image:var(--pen);mask-image:var(--pen);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero .lede{color:var(--muted);font-size:1.08rem;max-width:34rem;margin:0 0 1.6rem}
.hero .cta.start{margin:0 0 1.4rem}
.btn.big{padding:.8rem 1.4rem;font-size:1.02rem;display:inline-flex;
align-items:center;gap:.5rem}
/* Every button on this page can carry an icon, so they are all flex rows with a
gap: an inline-block button glues its svg to the first letter. */
main.full .btn{display:inline-flex;align-items:center;justify-content:center;
gap:.5rem;transition:transform var(--fast),box-shadow var(--fast),
border-color var(--fast),background var(--fast)}
main.full .btn:not(.ghost):hover{box-shadow:0 0 0 5px rgba(217,125,61,.14)}
main.full .btn:active{transform:translateY(1px)}
.btn .ic{margin:-2px 0}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
margin:0;padding:0;color:var(--muted);font-size:.88rem}
.ticks li{display:flex;align-items:center;gap:.45rem}
/* Hung as a column: three claims on one 550px row wrapped 2 + 1, which reads as
an accident rather than a chosen list. */
.hero .ticks{flex-direction:column;gap:.5rem}
.ticks .ic{color:var(--accent)}
/* The demo is the hero art: a deck with a lamp, an equaliser that idles and
runs, and the visitor's own sentence in it. */
.deck{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:1.2rem;box-shadow:0 26px 50px -28px rgba(0,0,0,.85);position:relative}
.deck::before{content:"";position:absolute;inset:-1px -1px auto;height:3px;
border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--accent);opacity:.9}
.deck-top{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;
margin:.2rem 0 .9rem}
.deck-top b{font-family:var(--head);font-size:1rem;flex:1}
.lamp{width:9px;height:9px;border-radius:99px;background:var(--accent);
box-shadow:0 0 0 4px rgba(217,125,61,.16)}
.eq{display:flex;align-items:flex-end;gap:3px;height:64px;padding:.5rem .6rem;
background:var(--sunk);border-radius:var(--r-sm);margin-bottom:.9rem}
.eq i{flex:1;background:var(--accent);opacity:.55;height:14%;border-radius:1px;
animation:bob 1.5s ease-in-out infinite;
animation-delay:calc(var(--n) * -80ms)}
.eq.live i{opacity:.95}
@keyframes bob{0%,100%{height:12%}22%{height:74%}45%{height:32%}68%{height:96%}}
.deck textarea{min-height:4.4rem;font-size:1rem}
.deck .chips{margin:.7rem 0 .8rem}
/* "Josie Lockhart English (US)" ran together as one long name: the language is a
second fact about the voice, so it is punctuated as one. */
.deck .chip{display:inline-flex;align-items:center;gap:.35rem}
.deck .chip .muted::before{content:"\00b7";margin-right:.35rem}
.deck .row.between{gap:.6rem 1rem;row-gap:.6rem}
/* The render button and the two links under it were two flex rows stacked with
no space, so "Speak it" and "Keep this voice" touched. The links are a
separate decision from rendering, and are ruled off as one. */
.deck .cta.start{margin:1.15rem 0 0;padding-top:1.1rem;flex-wrap:wrap;
border-top:1px solid var(--line)}
.deck .cta.start .btn{flex:1 1 auto}
.deck canvas{width:100%;height:72px;display:block;margin:.9rem 0 .25rem;
background:var(--sunk);border-radius:var(--r-sm)}
.sr-ish{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin-bottom:.3rem}
/* --- drawn plate ------------------------------------------------------- */
/* A plate, not a bleeding band: full width left the drawing letterboxed in the
middle of the page, which read as a picture that had failed to load, and a
cover crop sliced the tall bars clean off. */
.plate{position:relative;z-index:1;max-width:56rem;margin:2.75rem auto .75rem;
padding:0 1.5rem}
.plate img{display:block;width:100%;height:auto;border:1px solid var(--line);
border-radius:var(--sheet-lg);box-shadow:var(--lift)}
/* The drawing plays: the wave writes itself under a scanning head, rests a
beat, then clears to the right and starts again. Two stacked copies of the
one file (same URL, so one download): the lower sits back in the dark, the
upper is clipped to the head's position. */
.plate .lit{position:absolute;inset:0;padding:inherit;
animation:write 9s cubic-bezier(.32,.06,.4,1) infinite}
.plate .lit img{box-shadow:none}
.plate .rest img{opacity:.3}
.plate .head{position:absolute;top:1px;bottom:1px;left:1.5rem;width:2px;
border-radius:2px;background:linear-gradient(180deg,transparent,
var(--accent) 18%,var(--accent) 82%,transparent);
box-shadow:0 0 12px var(--halo);
animation:scan 9s cubic-bezier(.32,.06,.4,1) infinite}
@keyframes write{
0%{clip-path:inset(0 100% 0 0);opacity:1}
52%{clip-path:inset(0 0 0 0);opacity:1}
84%{clip-path:inset(0 0 0 0);opacity:1}
97%{clip-path:inset(0 0 0 0);opacity:0}
100%{clip-path:inset(0 100% 0 0);opacity:0}}
@keyframes scan{
0%{left:1.5rem;opacity:0}
6%{opacity:1}
52%{left:calc(100% - 1.5rem);opacity:1}
62%{left:calc(100% - 1.5rem);opacity:0}
100%{left:calc(100% - 1.5rem);opacity:0}}
/* --- name strip -------------------------------------------------------- */
.strip{position:relative;z-index:1;overflow:hidden;margin:1.5rem 0 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--card);padding:.6rem 0}
.strip .track{display:flex;gap:2rem;width:max-content;
animation:slide 68s linear infinite}
.strip:hover .track{animation-play-state:paused}
/* The slabs this used to end in chopped a name in half at each edge, which read
as a rendering fault: the track fades out into the band instead. */
.strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5rem,
#000 calc(100% - 5rem),transparent);
mask-image:linear-gradient(90deg,transparent,#000 5rem,
#000 calc(100% - 5rem),transparent)}
.strip span{display:flex;gap:.5rem;align-items:baseline;white-space:nowrap;
color:var(--soft);font-size:.85rem}
.strip b{font-family:var(--head);color:var(--text);font-weight:600}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* --- bands ------------------------------------------------------------- */
.band{position:relative;z-index:1;max-width:1180px;margin:0 auto;
padding:3.75rem 1.5rem}
/* A short accent rule above each section heading: cheap, hand-set, and it stops
nine bands reading as one long scroll. */
.band>.eyebrow.center::before,.band>.eyebrow.center::after{content:"";
width:1.6rem;height:1px;background:var(--line)}
.band>.eyebrow{margin-bottom:.75rem}
.band>h2.display{margin-bottom:.75rem}
.band.sunk{max-width:none;background:var(--sunk);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band.sunk>*{max-width:1180px;margin-left:auto;margin-right:auto}
.band.final{text-align:center;padding:3.75rem 1.5rem 4.5rem;
border-top:1px solid var(--line)}
/* One drawn mark under the closing line so the last screen is not three buttons
floating in black. */
.band.final::before{content:"";display:block;width:3.5rem;height:2px;
margin:0 auto 1.6rem;background:var(--accent);border-radius:2px}
.band.final .lede{margin:0 auto 1.5rem;max-width:34rem;color:var(--muted)}
/* Centred, not top-aligned: the argument is three paragraphs and the card is
five, so starting both at the top left a hand of dead space under the prose. */
.band.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;
align-items:center}
.band.split h2{font-size:1.45rem;margin:0 0 .7rem}
.band.split p{color:var(--muted);max-width:34rem}
/* The one paragraph that admits a weakness was set as fine print, which read as
something being buried. It gets its own rule and normal body size. */
.band.split p.note{font-size:.88rem;color:var(--soft);border-left:2px solid var(--line);
padding-left:.9rem;margin-top:1.2rem}
.note-card{background:var(--card);border:1px solid var(--line);
border-left:3px solid var(--accent);border-radius:var(--r-md);padding:1.3rem}
/* --- bento ------------------------------------------------------------- */
.bento{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem;
grid-template-columns:repeat(4,1fr)}
.bento li{background:var(--card);border:1px solid var(--line);
border-radius:var(--r-md);padding:1.15rem;transition:transform var(--slow),
border-color var(--slow)}
.bento li{position:relative;overflow:hidden}
/* A cut corner, small enough to read as a trimmed card rather than a black
triangle dropped on the artwork. */
.bento li::after{content:"";position:absolute;right:-1px;top:-1px;
width:1.35rem;height:1.35rem;background:var(--sunk);
border-left:1px solid var(--line);border-bottom:1px solid var(--line);
clip-path:polygon(100% 0,0 0,100% 100%);opacity:.75;
transition:opacity var(--slow)}
.bento li:hover::after{opacity:1}
.bento li:hover{transform:translateY(-3px);border-color:var(--accent)}
.bento li:nth-child(3n){border-radius:var(--r-md) var(--r-md) var(--r-md) 2px}
.bento li:nth-child(4n){border-radius:2px var(--r-md) var(--r-md) var(--r-md)}
.bento li.wide{grid-column:span 2;grid-row:span 2;display:flex;
flex-direction:column}
/* The ninth card fills the hole the 2x2 card leaves in the bottom row: a ragged
last row is the tell that a grid was filled by whatever was left over. */
.bento li.long{grid-column:span 2}
/* The full-width card floated its icon, so the heading sat beside it while the
paragraph ran back underneath: the icon takes a column and the text keeps one
left edge, like every other card. */
.bento li.long{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;
align-content:center}
.bento li.long .glyph{grid-row:1/span 2}
.bento li.long b{margin-top:0}
.bento b{display:block;font-family:var(--head);font-size:1.05rem;margin:.7rem 0 .3rem}
.bento p{margin:0;color:var(--muted);font-size:.9rem}
/* The 2x2 card had a paragraph at the top and a number at the bottom with a
hand-width of nothing between them. The field is the catalogue drawn as a
meter: every voice a bar, cut off because there are 1480 of them. */
.bento li.wide .field{display:flex;align-items:flex-end;gap:3px;
margin:1.5rem 0 auto;height:clamp(90px,14vw,170px);min-height:0;
-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);
mask-image:linear-gradient(90deg,#000 62%,transparent)}
.bento li.wide .field i{flex:1;height:var(--h);border-radius:1px;opacity:.5;
background:linear-gradient(180deg,var(--accent),rgba(217,125,61,.18))}
.bento li.wide .field i:nth-child(3n){opacity:.26}
.bento li.wide .field i:nth-child(7n){opacity:.7}
.bento .stat{margin-top:auto;padding-top:1rem;display:flex;align-items:baseline;
gap:.6rem;color:var(--muted);font-size:.85rem}
.bento .stat em{font-family:var(--head);font-style:normal;font-size:2.6rem;
font-weight:600;color:var(--text);letter-spacing:-.03em}
.glyph{display:grid;place-items:center;width:2.9rem;height:2.9rem;
border-radius:var(--r-md);background:var(--sunk);border:1px solid var(--line);
color:var(--accent)}
.note-card .glyph{margin-bottom:.8rem}
/* --- proof shelf ------------------------------------------------------- */
.shelf{list-style:none;padding:0;margin:1.5rem auto 2rem;display:grid;
grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1rem}
.shelf li{background:var(--card);border:1px solid var(--line);
border-radius:var(--r-md);padding:1rem;transition:border-color var(--slow)}
.shelf li:hover{border-color:var(--accent)}
.shelf header{display:flex;gap:.6rem;align-items:center}
.shelf header>span{display:flex;flex-direction:column;min-width:0}
.shelf b{display:block;font-family:var(--head);font-size:1rem}
.shelf .muted{font-size:.78rem}
.shelf q{display:block;color:var(--soft);font-size:.87rem;quotes:none;
border-left:2px solid var(--accent);padding-left:.7rem;margin-top:.75rem;
line-height:1.5}
.avatar{display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:none;
border-radius:99px 99px 99px 4px;background:var(--raised);
border:1px solid var(--line);font-family:var(--head);font-size:1rem;
color:var(--accent)}
/* The drawn player itself now lives in app.css, because a clip plays on nine
pages and the control cannot be landing-only. */
/* --- cost calculator --------------------------------------------------- */
.calc{background:var(--card);border:1px solid var(--line);
border-radius:var(--r-lg);padding:1.4rem;margin:1.5rem auto 1rem}
.calc label{font-size:.85rem;color:var(--muted)}
.calc input[type=range]{width:100%;margin-top:.6rem;padding:0;height:1.6rem;
background:none;border:0;accent-color:var(--accent);cursor:ew-resize}
.calc input[type=range]:focus-visible{outline:2px solid var(--accent);
outline-offset:4px}
.calc-ticks{list-style:none;display:flex;justify-content:space-between;
margin:.1rem 0 1rem;padding:0;color:var(--soft);font-size:.72rem;
letter-spacing:.06em}
.calc-read{margin:.2rem 0 1.2rem;color:var(--muted);font-size:.92rem}
.calc-read b{font-family:var(--head);font-size:1.5rem;color:var(--text);
margin-right:.35rem}
.bars{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.bars li{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr auto;
gap:.9rem;align-items:center;font-size:.9rem}
.bars .who{color:var(--muted);overflow-wrap:anywhere}
.bars .lane{background:var(--sunk);border:1px solid var(--line);
border-radius:99px;height:1.1rem;overflow:hidden}
/* A rival's bar was --line on --sunk, which at this size read as an empty lane:
the whole point is being able to see the two lengths at a glance. */
.bars .lane i{display:block;height:100%;background:var(--muted);opacity:.45;
transition:width var(--slow)}
.bars li.us .lane{border-color:var(--accent)}
.bars li.us .lane i{opacity:1}
.bars li.us .lane i{background:var(--accent)}
.bars li.us .who{color:var(--text);font-weight:600}
.bars .amount{font-family:var(--head);font-size:1.05rem;min-width:4.5rem;
text-align:right}
.bars li.us .amount{color:var(--accent)}
.fold{border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem 1.1rem}
.fold summary{cursor:pointer;color:var(--muted)}
.fold[open] summary{color:var(--text);margin-bottom:.6rem}
/* --- plans, faq, dock -------------------------------------------------- */
/* auto, not 0: this grid is a child of a full-bleed .sunk band, where the
horizontal margin is what centres it. A shorthand margin here reset that and
hung the whole plan row 19px left of every heading above it. */
/* stretch, not start: cards of different text lengths otherwise end at
different heights and the row of buy buttons steps down the page. */
.band .plans{margin:2.25rem auto 1.4rem;align-items:stretch}
.plans .plan{position:relative;display:flex;flex-direction:column}
/* Ragged card bottoms are the tell that a plan row was never looked at: the
button goes to the floor of every card, whatever the feature count. */
.plans .plan>.btn,.plans .plan>form,.plans .plan>.pill,.plans .plan>.go{
margin-top:auto}
.plans .plan>.go{margin-bottom:0}
.plans.lite .plan{padding:1.15rem}
.plans.lite h3{font-family:var(--head);font-size:1.05rem;margin:0}
.plans.lite .price{margin:.55rem 0 .15rem}
.plans.lite .pitch{margin:0 0 .3rem}
.plans.lite .blurb{margin:0 0 1.1rem}
.plans.lite .go{margin:auto 0 0}
.plans.lite .go .btn{width:100%}
/* The bought plan is the one the page should be arguing for, so it is raised off
the row rather than merely flagged. */
.plans .plan.featured{background:var(--raised);border-color:var(--accent);
box-shadow:0 18px 34px -22px rgba(0,0,0,.9)}
.faq{max-width:46rem;margin:2rem auto 0}
.faq dd{margin-right:auto}
.faq dt{font-family:var(--head);font-size:1.02rem;font-weight:600;
border-top:1px solid var(--line);padding-top:.9rem;margin-top:.9rem}
.faq dd{margin:.35rem 0 0;color:var(--soft);max-width:44rem}
.faq dt::before{content:"";display:inline-block;width:.5rem;height:.5rem;
margin-right:.55rem;border-radius:99px;background:var(--accent);
vertical-align:middle}
/* A full-width slab, not a floating pill: a pill parked over the middle of the
page sat on top of the FAQ answers and the footer links, which is exactly the
"text I cannot read" complaint. As chrome along the bottom edge it covers no
column, and the sections it brackets hide it anyway. */
.dock{position:fixed;z-index:30;left:0;right:0;bottom:0;
display:flex;align-items:center;justify-content:center;gap:1.4rem;
padding:.7rem 1.2rem;background:var(--raised);
border-top:1px solid var(--line);
box-shadow:0 -14px 34px -22px rgba(0,0,0,.9);
animation:rise var(--slow) both}
.dock>span{display:flex;align-items:baseline;gap:.55rem;line-height:1.25;
flex-wrap:wrap}
.dock b{font-family:var(--head)}
.dock .muted{font-size:.8rem}
@keyframes rise{from{opacity:0;transform:translateY(1rem)}
to{opacity:1;transform:none}}
/* Room under the last section so the dock never rests on the final words, and
the page itself ends a dock-height early so nothing is unreachable. */
.band.last{padding-bottom:5rem}
html{scroll-padding-bottom:calc(var(--dock-h,0px) + 1rem);
scroll-padding-top:4.5rem}
/* Scroll reveal: opt-in per section, and off entirely for anyone who asked the
OS for less motion. */
html.js [data-role=reveal]>*{opacity:0;transform:translateY(14px);
transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
html.js [data-role=reveal].shown>*{opacity:1;transform:none}
[data-role=reveal].shown>*:nth-child(2){transition-delay:60ms}
[data-role=reveal].shown>*:nth-child(3){transition-delay:120ms}
[data-role=reveal].shown>*:nth-child(4){transition-delay:180ms}
[data-role=reveal].shown>*:nth-child(5){transition-delay:240ms}
[data-role=reveal].shown>*:nth-child(6){transition-delay:300ms}
[data-role=reveal].shown>*:nth-child(7){transition-delay:360ms}
[data-role=reveal].shown>*:nth-child(8){transition-delay:420ms}
/* --- the aesthetic passes ---------------------------------------------- */
/* Everything below is craft rather than layout: paper grain, a warm light on
the fold, cards with a lit top edge instead of flat grey, a knurled slider,
metered bars that read as a studio meter, and one drawn pen stroke. */
main.full{
--pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 11.4c30-5.4 61-7.4 96-6.1 25 .9 47 2.6 104 3.4' stroke='%23000' stroke-width='4.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14 16.4c44-3.4 88-3.8 127-1.6' stroke='%23000' stroke-width='1.6' stroke-opacity='.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
--lit:inset 0 1px 0 rgba(255,255,255,.045)}
/* Grain, fixed to the viewport so it reads as the paper the page is printed on
rather than a texture scrolling past. */
main.full::before{content:"";position:fixed;inset:0;z-index:0;
pointer-events:none;opacity:.055;mix-blend-mode:overlay;
background-image:var(--grain);background-size:160px 160px}
/* One warm light over the fold: a flat black ground behind a hero is why the
page read as a wireframe. */
main.full::after{content:"";position:absolute;inset:0 0 auto;height:min(1100px,120vh);
z-index:0;pointer-events:none;
background:radial-gradient(58% 52% at 76% 4%,rgba(217,125,61,.15),transparent 68%),
radial-gradient(46% 38% at 6% 26%,rgba(217,125,61,.06),transparent 70%),
linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%)}
.paper .blob{animation:drift 26s ease-in-out infinite alternate}
.paper .blob.two{animation-duration:34s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0)}
to{transform:translate3d(-14px,10px,0) rotate(-1.1deg)}}
/* Numerals are data on this page - prices, meters, minute counts - so they are
set on the same width and stop dancing as the calculator moves. */
.plans .price,.bars .amount,.calc-read b,.bento .stat em,.dock b,
.pricetable td{font-variant-numeric:tabular-nums}
h2.display{text-wrap:balance}
.band.split h2,.note-card h2{letter-spacing:-.015em}
.hero .lede,.band.split p,.bento p,.faq dd{text-wrap:pretty}
/* Cards: a lit top edge, the faintest sheen off the top, and a shadow that
falls rather than surrounds. Flat #1f1b18 rectangles were the complaint. */
.bento li,.shelf li,.note-card,.calc,.fold,.plans.lite .plan{
background-image:linear-gradient(180deg,rgba(255,255,255,.024),transparent 42%);
box-shadow:var(--lit),0 20px 34px -30px rgba(0,0,0,.95)}
.plans.lite .plan{background-color:var(--card);
transition:transform var(--slow),border-color var(--slow),
box-shadow var(--slow)}
/* The price cards were the only cards on the page that did not answer the
cursor, which made them read as an image rather than four choices. */
.plans.lite .plan:hover{transform:translateY(-3px);border-color:var(--accent);
box-shadow:var(--lit),0 26px 40px -28px rgba(0,0,0,.95)}
.plans .plan.featured{background-image:
linear-gradient(180deg,rgba(217,125,61,.07),transparent 46%)}
.plans .plan.featured::before{content:"";position:absolute;inset:-1px -1px auto;
height:2px;border-radius:var(--r-md) var(--r-md) 0 0;background:var(--accent)}
.shelf li,.bento li{transition:transform var(--slow),border-color var(--slow),
box-shadow var(--slow)}
.shelf li:hover{transform:translateY(-2px);
box-shadow:var(--lit),0 22px 36px -28px rgba(0,0,0,.95)}
.bento li:hover{box-shadow:var(--lit),0 26px 40px -28px rgba(0,0,0,.95)}
/* The icon plate lights up with the card it belongs to. */
.glyph{box-shadow:var(--lit);transition:color var(--slow),border-color var(--slow),
box-shadow var(--slow)}
.bento li:hover .glyph,.shelf li:hover .avatar{border-color:var(--accent);
box-shadow:var(--lit),0 0 0 4px rgba(217,125,61,.09)}
.avatar{transition:border-color var(--slow),box-shadow var(--slow)}
/* The shelf voice wears its own measured ring, and the well behind it lights
with the row the way the icon plates do. */
.shelf .vmark .vm-well{transition:stroke var(--slow)}
.shelf li:hover .vmark .vm-well{stroke:var(--accent)}
.shelf li:hover .vmark .vm-rays{transform:scale(1.06)}
.deck .chip .vmark{margin-left:-.2rem}
.deck .chip.on .vmark .vm-letter{fill:var(--ink)}
.deck .chip.on .vmark .vm-well{fill:rgba(0,0,0,.14);stroke:rgba(0,0,0,.2)}
.deck .chip.on .vmark .vm-rays line{stroke:var(--ink);opacity:.75}
/* Plan cards read like a card, not a paragraph: four ticked lines on a spine. */
.ticks.stack{flex-direction:column;gap:.42rem;margin:.75rem 0 1.15rem;
font-size:.86rem;color:var(--soft)}
.ticks.stack li{align-items:flex-start;gap:.5rem;line-height:1.4}
.ticks.stack .ic{flex:none;margin-top:.16rem;color:var(--accent);opacity:.9}
.plans.lite .plan.featured .ticks.stack{color:var(--text)}
.plans .flag{box-shadow:0 6px 14px -8px rgba(0,0,0,.9)}
/* A native range control is the last default left on the page: this one has a
milled groove, a filled travel and a knurled slab for a thumb. */
.calc input[type=range]{-webkit-appearance:none;appearance:none;height:2rem;
accent-color:auto}
.calc input[type=range]::-webkit-slider-runnable-track{height:6px;
border-radius:99px;background:var(--sunk);
box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.03)}
.calc input[type=range]::-moz-range-track{height:6px;border-radius:99px;
background:var(--sunk);box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.calc input[type=range]::-moz-range-progress{height:6px;border-radius:99px;
background:var(--accent)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
appearance:none;width:1.15rem;height:1.6rem;margin-top:-.53rem;
border-radius:3px;background:
repeating-linear-gradient(90deg,rgba(0,0,0,.32) 0 1px,transparent 1px 4px),
linear-gradient(180deg,#e9a26a,var(--accent) 55%,#b9612c);
border:1px solid #7d4020;
box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.calc input[type=range]::-moz-range-thumb{width:1.15rem;height:1.6rem;
border-radius:3px;border:1px solid #7d4020;
background:linear-gradient(180deg,#e9a26a,var(--accent) 55%,#b9612c);
box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.calc-read b{font-size:1.7rem;letter-spacing:-.02em}
/* The cost bars are the argument of the whole page, so they are set as meters:
a deeper groove, a hairline between rows, and our lane brighter than theirs. */
.bars{gap:0}
.bars li{padding:.5rem 0;border-top:1px solid var(--line)}
.bars li:first-child{border-top:0}
.bars .lane{height:1.3rem;border-radius:3px;
box-shadow:inset 0 1px 3px rgba(0,0,0,.75)}
.bars .lane i{background-image:
repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px)}
.bars li.us .lane i{box-shadow:0 0 14px -2px rgba(217,125,61,.5)}
.bars .lane i{opacity:.34}
.bars .amount{font-size:1.12rem}
/* The closing band was three buttons in a field of black; it signs off now. */
.band.final .sign{margin:2.25rem auto 0;padding-top:1.4rem;max-width:34rem;
border-top:1px solid var(--line);color:var(--soft);font-size:.82rem;
letter-spacing:.06em;text-transform:uppercase}
.band.last{padding-bottom:3.25rem}
/* FAQ: the marker sits on the baseline of the question and the answer indents
to it, so the column has one hanging edge like a set page. */
.faq dt{display:flex;gap:.6rem;align-items:baseline;padding-top:1rem;
margin-top:1rem;transition:color var(--fast)}
.faq dt::before{content:"";width:.42rem;height:.42rem;flex:none;margin:0;
transform:translateY(-.18rem);opacity:.85}
.faq dd{padding-left:1.02rem}
.faq dt:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){
.eq i,.strip .track,.paper .blob{animation:none}
.shelf li:hover{transform:none}
html.js [data-role=reveal]>*{opacity:1;transform:none;transition:none}
.dock{animation:none}
.bento li:hover{transform:none}
.pl.busy .wait,.pl-key:active{animation:none;transform:none}
.pl-meter i,.pl-head{transition:none}
/* The plate holds still, whole and fully lit, with no scanning head. */
.plate .lit,.plate .head{animation:none}
.plate .rest img{opacity:1}
.plate .head{display:none}
}
@media(max-width:980px){
.hero{grid-template-columns:1fr;padding-top:2.5rem}
.bento{grid-template-columns:repeat(2,1fr)}
.bento li.wide{grid-column:span 2;grid-row:auto}
.band.split{grid-template-columns:1fr}
}
@media(max-width:640px){
.band{padding:2.75rem 1.1rem}
/* A 3:1 drawing 340px wide is a smear: the phone keeps the words instead. */
.plate{display:none}
.hero{padding:2rem 1.1rem 1.5rem;gap:1.75rem}
.paper{height:420px}
.bento{grid-template-columns:1fr}
.bento li.wide,.bento li.long{grid-column:auto}
.bars li{grid-template-columns:1fr auto;row-gap:.35rem}
.bars .lane{grid-column:1/-1;order:3}
.dock{padding:.55rem .8rem;gap:.7rem;animation:none;
justify-content:space-between}
.dock .muted{display:none}
.cta{flex-direction:column;align-items:stretch}
.cta .btn{text-align:center}
/* Two rows of text in a 4.4rem box clipped the third line of the sample
line the page ships with. */
.deck textarea{min-height:6.2rem}
/* A 22ch measure at 390px sets the headline as five short lines: the limit
comes off and the type takes the column. */
.hero h1{max-width:none;letter-spacing:-.02em}
.band.final .sign{margin-top:1.75rem;font-size:.76rem}
/* Two facts and a counter in one 358px row broke the deck's title over two
lines: the counter takes a line of its own. */
.deck-top .note{flex:1 0 100%;order:3}
.eyebrow{font-size:.68rem;letter-spacing:.1em}
.strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem,
#000 calc(100% - 2.5rem),transparent);
mask-image:linear-gradient(90deg,transparent,#000 2.5rem,
#000 calc(100% - 2.5rem),transparent)}
.bars .lane{height:1.1rem}
/* At 390px the bars thin rather than disappear - dropping bars would make the
played fill stop short of the end - and the mute goes, since a phone has a
hardware volume control. */
.pl{gap:.45rem;padding:.5rem;grid-template-columns:auto minmax(0,1fr) auto}
.pl-meter{gap:1px;height:2.1rem}
.pl-meter i{min-width:1px}
.pl-clock{font-size:.72rem}
.pl-vol{display:none}
.calc-ticks li:nth-child(3){display:none}
.shelf q{font-size:.84rem}
}