/* Inkbench waitlist, v2 sales template (src/template-v2.html): mockup-led, phone first (390 px), scaled up at 900 px.
   Loads after site.css and reuses its tokens, nav, form, cards, owner note, price plate and footer. Motion follows
   brand/arena/round5/BREATHING-SPEC.md: plates, shadows and loops move, running text never does.
   The 3-feature plan (2026-10-14): hero, three feature blocks, the questions, the note, the price, the footer.
   Jay's round of 2026-10-15: the hero runs headline, subhead, mockup, then the form, on every width; from 900 px the
   hero is one column with a 2:1 desktop still the width of the page; the sticky join bar shows on every width whenever
   no form is on screen; each feature block carries a second paragraph; the one objection became five questions. */

/* every word the reader must read is 14 px or more, including the tags */
.v2 .tag,.v2 .mtoggle,.v2 .mt-l{font-size:14px}

/* ---------- hero ---------- */
.v2 .hero{gap:12px;padding-top:14px;align-content:start}
.v2 .app{display:flex;align-items:center;gap:10px;margin:2px 0 0;font:var(--head-w) 19px/1 var(--serif);letter-spacing:-.01em}
.v2 .appicon{display:block;width:40px;height:40px;flex:0 0 40px}
.v2 .appicon img{display:block;width:40px;height:40px;filter:drop-shadow(0 1.5px 0 rgba(30,27,23,.22))}
:root[data-theme="night"] .v2 .appicon img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .v2 .appicon img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}}
.v2 h1{min-height:0;font-size:clamp(24px,calc((100vw - 40px) * .08),62px)}   /* v6: sized to the column so the longest headline (Inkfeed's approved "Your morning brief, from feeds you chose", 40 characters) takes 2 lines at 360 to 430 px, the same as the other three, and the form sits at one height on all four */
/* the subhead's size follows the column (20.4 em per line at every phone width), so each subhead breaks the same way from 360 to 430 px: 2 lines on all four pages, and the form at one height */
.v2 .sub{min-height:0;font-size:max(14px,min(17.5px,calc((100vw - 40px) / 20.4)));max-width:30em}   /* never under 14 px: under 326 px wide the subhead may take a third line, which the narrow-phone rule below reserves (Astra r5) */
.v2 .signup{margin-top:4px}
.v2 .hshot{margin-top:6px}
.v2 .hero .signup{margin-top:10px}
/* the phone hero keeps its asset's aspect (--ar), capped so a tall mockup does not push the form far down; the mockup is top-anchored and bleeds off the bottom */
.v2 .hshot .mk{max-height:320px}
/* below 900 px every hero mockup is one shape (310 by 320 at 390 px, cover-fit, top-anchored), so the form starts at one height on all four pages and no plate shows empty bands */
@media (max-width:899px){.v2 .hshot .mk{aspect-ratio:31/32}
  /* Inkfeed: the poster (310 by 372 at 390 px) is bottom-anchored so the article's opening lines show (Astra r5); the loop is the full 880 by 1800 frame, so 16.6% lands it on the same region */
  [data-page=feeds] .hshot .mk img{object-position:50% 100%}
  [data-page=feeds] .hshot .mk video{object-position:50% 43.5%}}   /* v6: the poster crop is 880 by 1296 (Inkfeed v5 renders), so the visible 880 by 908 window starts at y 388 of the 1800 px loop: 388 / 892 = 43.5% */

/* narrow phones (320 to 359 px): reserve 3 headline lines and 3 subhead lines, so the form sits at one height on all four pages */
@media (max-width:359px){.v2 h1{min-height:3em}.v2 .sub{min-height:4.5em}}

/* ---------- a plate: one mockup, a lamp pool and a shadow strip ---------- */
.shot{margin:0;display:grid;gap:8px}
.plate{position:relative;isolation:isolate;border-radius:14px;overflow:hidden;background:var(--sawdust);box-shadow:0 0 0 1.5px var(--hair2);display:grid;gap:3px}
.plate .ppool{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:radial-gradient(closest-side,rgba(217,201,168,0) 55%,rgba(201,180,138,.9) 100%)}
.plate .br-grain{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.045;pointer-events:none;z-index:4}
.plate .msh{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--shadow);opacity:.35;z-index:5;pointer-events:none}
.mk{position:relative;width:100%;overflow:hidden;background:var(--sawdust);aspect-ratio:var(--ar)}   /* --ar (and --ard for the hero's desktop still) are set inline by src/sections.mjs */
.mk picture,.mk img,.mk video{position:absolute;inset:0;width:100%;height:100%}
.mk img,.mk video{object-fit:cover;object-position:top;display:block}
.mk video{z-index:2;background:transparent}
.mk video:not([src]):not(:has(source)){visibility:hidden}
@media (max-width:599px){
  .mk.zr img,.mk.zr video{transform:scale(var(--z,1));transform-origin:100% 0}
  .mk.zl img,.mk.zl video{transform:scale(var(--z,1));transform-origin:0 0}
}
:root[data-theme="night"] .plate{box-shadow:0 0 0 1px rgba(255,241,201,.22),0 30px 60px -30px rgba(0,0,0,.9)}
/* at night the bottom strip is a lit edge (the kit's Night Card), not a shadow: dark on dark has nothing to breathe with */
:root[data-theme="night"] .plate .msh{background:rgba(255,241,201,.55)}
:root[data-theme="night"] .v2 .card>.sh{left:0;right:0;bottom:-2px;height:3px;border-radius:0 0 3px 3px;background:rgba(255,241,201,.55)}
:root[data-theme="night"] .plate .ppool{background:radial-gradient(60% 55% at 62% 40%,rgba(255,241,201,.85),rgba(255,241,201,0) 80%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="day"]) .plate{box-shadow:0 0 0 1px rgba(255,241,201,.22),0 30px 60px -30px rgba(0,0,0,.9)}
  :root:not([data-theme="day"]) .plate .msh{background:rgba(255,241,201,.55)}
  :root:not([data-theme="day"]) .v2 .card>.sh{left:0;right:0;bottom:-2px;height:3px;border-radius:0 0 3px 3px;background:rgba(255,241,201,.55)}
  :root:not([data-theme="day"]) .plate .ppool{background:radial-gradient(60% 55% at 62% 40%,rgba(255,241,201,.85),rgba(255,241,201,0) 80%)}
}

/* ---------- the feature blocks and the questions ---------- */
.v2 .sec{padding-top:26px}
.v2 .sec-head{margin-bottom:10px;align-items:baseline}
.v2 .sec-head .fh{margin:0;font:var(--head-w) 24px/1.2 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.v2 .fl{margin:0;font-size:17px;line-height:1.5;max-width:30em;text-wrap:pretty}
.v2 .fm{margin:8px 0 0;font-size:15px;line-height:1.5;max-width:31em;text-wrap:pretty;color:var(--muted)}   /* the second paragraph reads as support for the lead line (Fable, 2026-10-15) */
.faq{display:grid;max-width:34em}
.faq .qa{padding:12px 0 14px}
.faq .qa:first-child{padding-top:0}
.faq h3{margin:0 0 5px;font:var(--head-w) 20px/1.3 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.faq p{margin:0;font-size:16px;line-height:1.5;text-wrap:pretty}
.faq p+p{margin-top:6px}
.faq .hl{display:block;height:1px;background:var(--hair2);margin:0}
.s-faq .sec-head{margin-bottom:14px}
.s-feature{display:grid;gap:14px}
.s-feature .ftext{display:grid;gap:0}
.v2 .ai-note{margin:10px 0 0;max-width:30em}
.v2 .owner{margin-top:0}
@media (max-width:599px){
  .v2 .sec{padding-top:34px}   /* the hero's fine print and section 01 read as two chapters (Fable) */
  .s-feature:not(.s-ai) .mk:has(video){max-height:280px}   /* block 1 only (the loops): top-anchored, so a tall plate loses only paper. Block 2's stills and the AI block keep their full height, because their evidence (the transcript, the brief's links, the changelog) is at the bottom (Fable item 4, narrowed after Astra r5) */
  .v2 .owner{grid-template-columns:1fr;padding:14px 16px 16px;gap:4px}
  .v2 .owner .pf{width:56px;float:left;margin:0 12px 4px 0}
  .v2 .owner .pf img{width:56px}
  .v2 .owner .tag{margin-top:10px}
  .v2 .owner>div{display:block}
  .v2 .owner p{clear:both}
  .v2 .owner .tag+p{clear:none}
}

/* price and the second form */
.pricejoin{display:grid;gap:18px}
.v2 .plate.card{display:grid;gap:6px;padding:18px 20px 20px;background:var(--sawdust);max-width:470px;overflow:visible;box-shadow:none;isolation:auto}
.v2 .s-price .signup .fine{margin-top:6px}
.signup .joined{margin:0;font:var(--head-w) 17px/1.4 var(--serif)}

/* ---------- the sticky bar: one thumb, from the first screen on, hidden while a form or the footer is on screen ---------- */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--hair);transform:translateY(110%);transition:transform 260ms var(--e-out)}
.stick.on{transform:none}
.stick .btn{width:100%;max-width:470px;margin:0 auto;display:flex}
/* the offer in the bar (APPROVED-CHANGES item 9), 40 characters of 14 px mono: one line from 390 px wide (no letter-spacing,
   a narrower bar padding on phones); under 390 px it may wrap to two centred lines, never under 14 px */
@media (max-width:599px){.stick{padding-left:12px;padding-right:12px}.stick .btn{padding:8px 8px;letter-spacing:0;white-space:normal;text-align:center;line-height:1.3}}
.has-stick{padding-bottom:84px}

/* ---------- still mode: loops never load, the poster stands ---------- */
.rm .mk video{display:none}
.rm .stick{transition:none}

/* ---------- desktop ---------- */
@media (min-width:600px){
  .pricejoin{grid-template-columns:minmax(0,470px) minmax(0,470px);gap:28px;align-items:start}
  .v2 .s-price .signup{grid-area:auto}   /* site.css names the form's area for the v1 hero (grid-area:form), which put the price form in a third column on a second row */
}
@media (min-width:900px){
  /* the hero is one column: kicker, app row, headline, subhead, the desktop still across the whole column, then the form
     (site.css lays the v1 hero out in two columns with named areas from 900 px; the v2 hero undoes that) */
  .v2 .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none;row-gap:14px;padding-top:20px}
  .v2 .kicker,.v2 .app,.v2 h1,.v2 .sub,.v2 .hero .signup,.v2 .hshot{grid-area:auto}
  .v2 h1{font-size:clamp(32px,3.2vw,46px);max-width:none}   /* v6: 46 px at 1440 so Inkfeed's 40-character headline stays one line */   /* one line on all four pages across the 1040 px column (the longest, 34 characters, is 952 px at 56 px), so the form sits at one height */
  .v2 .sub{font-size:20px;max-width:42em}   /* one line on all four pages, so the hero still ends above the 900 px fold (Fable) */
  .v2 .hshot{margin-top:4px}
  .v2 .hshot .mk{max-height:none}
  .v2 .hshot .plate{max-width:none}   /* site.css caps a plate at 470 px (the feature mockups keep that); the hero still spans the column */
  .hdesk .mk{aspect-ratio:var(--ard,var(--ar))}
  .hdesk .mk video{display:none}   /* the phone loop does not match the desktop still; display:none keeps it out of the observer, so it never loads */
  .v2 .hero .signup{margin-top:8px}
  .v2 .sec{padding-top:44px}
  /* a feature block: the words on the left, the mockup on the right, the same on all three */
  .s-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .s-feature .ftext{position:sticky;top:24px}
  .v2 .sec-head .fh{font-size:30px}
  .v2 .fl{font-size:19px}
  .v2 .fm{font-size:16px;max-width:32em}
  .faq h3{font-size:22px}
  .faq p{font-size:17px}
}

/* ---------- signature desks (Option A, Jay's pick, 2026-10-15; research/2026-10-15-page-debate/VERDICT.md section 4) ----------
   Each page's mockup plates sit on its app's signature color, darkened to one band; the plate frame, the section rules and
   the section numbers take the same hue. Paper, Ink and the Nail Orange CTA stay the same on all four, and orange is now
   only the button (the kicker is steel). The mockups are rendered images with their own desktops baked in, so the desk
   shows as the mat around each image (the plate's padding). Numbers use an AA shade of the hue (light on #F4EFE4, night on #1E1B17):
   Inktape 5.4 and 5.6, Inkmap 7.0 and 5.9, Inkfeed 5.0 and 6.2, Inkquill 10.9 and 12.2. Running text never moves.
   Fable 5.1's nudges (2026-10-15): Inktape day top and night lighter, Inkfeed day off the renders' tan desktop, Inkquill day
   top and night top lifted so the mat reads as a mat. */
[data-page=recorder]{--sg-a:#B98C1E;--sg-b:#9A7418;--sg-no:#7A5C12;--sg-pool:154,116,24;--sg-sel:rgba(201,154,34,.24);
  --sgn-a:#A07E25;--sgn-b:#86691C;--sgn-no:#B48E2A;--sgn-rule:#D9AE42;--sgn-edge:rgba(217,174,66,.45)}
[data-page=mindmaps]{--sg-a:#2C8A81;--sg-b:#145A54;--sg-no:#145A54;--sg-pool:20,90,84;--sg-sel:rgba(44,138,129,.2);
  --sgn-a:#186962;--sgn-b:#0F4A45;--sgn-no:#3FA79C;--sgn-rule:#6CC4B9;--sgn-edge:rgba(63,167,156,.6)}
[data-page=feeds]{--sg-a:#9C7A4A;--sg-b:#6B5330;--sg-no:#7D6239;--sg-pool:107,83,48;--sg-sel:rgba(168,134,90,.24);
  --sgn-a:#7D6239;--sgn-b:#5C482A;--sgn-no:#B8956A;--sgn-rule:#C4A276;--sgn-edge:rgba(184,149,106,.6)}
[data-page=writing]{--sg-a:#4A4034;--sg-b:#1E1B17;--sg-no:#3A3328;--sg-pool:30,27,23;--sg-sel:rgba(58,51,40,.16);
  --sgn-a:#342F28;--sgn-b:#211E19;--sgn-no:#E8D9B0;--sgn-rule:#E8D9B0;--sgn-edge:rgba(255,241,201,.5)}   /* Inkquill at night: the lamplight edge */
.v2{--desk-a:var(--sg-a);--desk-b:var(--sg-b);--desk-edge:0 0 0 1.5px var(--sg-b);--sec-no:var(--sg-no);--sec-rule:var(--sg-b)}
:root[data-theme="night"] .v2{--desk-a:var(--sgn-a);--desk-b:var(--sgn-b);--desk-edge:0 0 0 1.5px var(--sgn-edge),0 30px 60px -30px rgba(0,0,0,.9);--sec-no:var(--sgn-no);--sec-rule:var(--sgn-rule)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .v2{--desk-a:var(--sgn-a);--desk-b:var(--sgn-b);--desk-edge:0 0 0 1.5px var(--sgn-edge),0 30px 60px -30px rgba(0,0,0,.9);--sec-no:var(--sgn-no);--sec-rule:var(--sgn-rule)}}
/* the desk: a mockup plate's fill (not the price card) is the signature gradient; site.css's plate padding (18 20 20) is the mat around the image */
.v2 .shot .plate{background:linear-gradient(160deg,var(--desk-a),var(--desk-b));box-shadow:var(--desk-edge)}
:root[data-theme="night"] .v2 .shot .plate{box-shadow:var(--desk-edge)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .v2 .shot .plate{box-shadow:var(--desk-edge)}}
.v2 .shot .mk{border-radius:6px}
/* the lamp pool by day darkens the desk's edges in its own hue (night keeps the lamplight pool) */
.v2 .shot .plate .ppool{background:radial-gradient(closest-side,rgba(var(--sg-pool),0) 55%,rgba(var(--sg-pool),.9) 100%)}
:root[data-theme="night"] .v2 .shot .plate .ppool{background:radial-gradient(60% 55% at 62% 40%,rgba(255,241,201,.85),rgba(255,241,201,0) 80%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .v2 .shot .plate .ppool{background:radial-gradient(60% 55% at 62% 40%,rgba(255,241,201,.85),rgba(255,241,201,0) 80%)}}
/* one grain layer at night: the plate's live grain lies on the desk under the mockup, not on top of the image */
:root[data-theme="night"] .v2 .shot .plate .br-grain{z-index:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .v2 .shot .plate .br-grain{z-index:0}}
.v2 .shot .mk{z-index:1}
/* section rules and numbers in the signature hue (the night rules are a lighter tint, so their ink-pressure breath still clears the liveness threshold); the kicker is steel, so orange is only the button */
.v2 .sec-head .rule path{stroke:var(--sec-rule)}
.v2 .sec-head .no{color:var(--sec-no)}
.v2 .kicker{color:var(--muted)}
/* the HTML mockups' tokens (no HTML mockup is on the v2 pages; kept in step should one return) */
.v2[data-page] .mock{--mw-desk:linear-gradient(160deg,var(--desk-a),var(--desk-b));--mw-sel:var(--sg-sel)}

/* ---------- v6 (2026-10-15, research/2026-10-15-every-pages/APPROVED-CHANGES.md) ---------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* in their words (item 7): one verbatim public complaint right after the hero, the same slot on all four pages. No number, so 01 to 06 stay the blocks */
.s-quote .sec-head{margin-bottom:12px}
.pq{margin:0;max-width:34em;padding-left:16px;border-left:3px solid var(--sec-no)}
.pq blockquote{margin:0}
.pq blockquote p{margin:0;font:500 17px/1.4 var(--serif);letter-spacing:-.008em;text-wrap:pretty}
.pq figcaption{margin-top:8px;font:400 14px/1.45 var(--mono);color:var(--muted)}
/* the checkmark caption under a mockup (item 6): text, so it never moves; the tick takes the page's signature hue */
.shot .cap{display:flex;align-items:center;gap:8px;font:600 14px/1.4 var(--mono);letter-spacing:.02em;color:var(--fg)}
.shot .cap svg{width:16px;height:16px;flex:0 0 16px;color:var(--sec-no)}
@media (min-width:900px){
  .pq blockquote p{font-size:24px}
}
/* both forms span the content width (Jay, 2026-10-15): stacked full width on phones, the input and the button in one row
   from 600 px, the fine print under the row */
.v2 .signup{max-width:none;width:100%}
.v2 .signup .btn{width:100%}
@media (min-width:600px){
  .v2 .signup .row{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
  .v2 .signup .btn{width:auto;min-width:240px;padding-left:28px;padding-right:28px}
}
/* the price block (Jay, 2026-10-15, layout from Fable 5.1): one card across the content width, then the form across the
   same width. In the card: "$29 once." and the $19 tag, then "What you get with <App> (planned)" and three label and value
   rows. Phone: one column. From 720 px: the price on the left, the rows on the right. The card's top edge is the page's
   signature hue. The hairlines, the top edge and the card's shadow strip breathe, the text never moves */
.v2 .pricejoin{grid-template-columns:minmax(0,1fr)!important;gap:22px}
.v2 .plate.card.pricecard{max-width:none;display:grid;gap:18px;padding:24px 20px 22px;position:relative}
.pricecard .pc-top{position:absolute;left:-1px;right:-1px;top:-1px;height:4px;border-radius:14px 14px 0 0;background:var(--sec-rule)}
.pricecard .pc-price{display:grid;gap:10px;align-content:start}
.pricecard .early{margin-top:0}
.pricecard .pc-h{margin:0 0 6px;font:600 14px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pricecard .get{list-style:none;margin:0;padding:0;display:grid}
.pricecard .gr{position:relative;display:grid;grid-template-columns:7.4em minmax(0,1fr);column-gap:12px;align-items:baseline;padding:11px 0 10px}
.pricecard .get>.hl{display:block;height:1px;background:var(--hair2)}
.pricecard .gk{font:600 14px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pricecard .gv{font:600 17px/1.4 var(--serif)}
@media (min-width:720px){
  .v2 .plate.card.pricecard{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;padding:30px 32px 28px}
  .pricecard .gv{font-size:18px}
}
/* orange only on the button (APPROVED-CHANGES item 4, Astra r6): the headline's and the price's closing dots take the page's
   signature hue. The Inkbench wordmark's dot and the light chain's bead stay orange: they are the brand mark and a control */
.v2 h1 .dot,.v2 .amt .dot{color:var(--sec-no)}
/* Astra r6, second pass: the $19 in the price tag is ink like the rest of the tag, so orange is the button only (plus the
   wordmark's dot, the light chain's bead and the motion switch, which are the brand mark and two controls) */
.v2 .early b{color:inherit}   /* ink on the tag: the signature numbers fall under 4.5:1 on kraft */

/* ===== v7 (2026-10-15, Jay: present the apps as built) =====
   The thank-you step opens with the one disclosure (the app isn't out yet, the early-access list, one email, no charge),
   in plain serif at body size, then the price question. Text, so it never breathes */
.thanks .tdisc{margin:0;font:400 16px/1.45 var(--serif);color:var(--fg);text-wrap:pretty}   /* --fg, not --ink: --ink stays dark at night (Astra r7) */