/* Three Fixes: the components paper-ui does not own.
   The look, the tokens, the type, the chrome, the buttons and the motion all come from
   /paper.css (canonical source ~/.claude/skills/paper-ui/paper.css, synced with sync.sh).
   Link paper.css BEFORE this file. Never edit /paper.css here: edit the canonical file
   and re-sync, or the project has forked the system.

   Three Fixes takes the paper-ui defaults unchanged, so it overrides none of the four
   brand tokens. Everything below is a component that exists only on this site. */

/* the star of /samples: three tickets */
.tickets{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2)}
.ticket{
  display:flex; flex-direction:column; min-height:196px; text-decoration:none; color:var(--ink);
  background:var(--card); border:0; border-radius:2px; padding:var(--s3);
  box-shadow:var(--sheet-shadow);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
}
.ticket:hover{transform:translateY(-3px) rotate(-.4deg); box-shadow:var(--sheet-shadow-lift)}
.ticket:active{transform:translateY(-1px)}
.ticket .n{font-family:var(--mono); font-size:var(--f1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2)}
.ticket .n b{color:var(--accent-deep); font-weight:500}
.ticket h3{margin-bottom:6px}
.ticket p{color:var(--muted); font-size:15.5px; line-height:1.45; max-width:30ch}
.ticket .stamp{margin-top:auto; padding-top:var(--s2); display:flex; justify-content:space-between; align-items:baseline; border-top:1px dashed var(--hairline)}
.ticket .stamp .t{font-size:14px; color:var(--ink); font-weight:500}
.ticket .stamp .go{font-family:var(--mono); font-size:var(--f1); font-weight:500; color:var(--accent-deep); transition:transform .22s}
.ticket:hover .stamp .go{transform:translateX(3px)}

/* the price line */
.price{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:baseline; margin-top:var(--s3); font-size:16px; color:var(--muted)}
.price .amt{font-family:var(--display); font-weight:800; font-size:30px; color:var(--accent-deep); letter-spacing:-0.02em; line-height:1}
.price .amt small{font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:6px; font-family:var(--body)}

/* what you get: three paper items, no borders, hairline top */
.papers{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.paper{padding-top:var(--s2); border-top:1px solid var(--rule)}
.paper .n{font-family:var(--mono); font-size:var(--f1); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:var(--s1)}
.paper h3{margin-bottom:6px}
.paper p{color:var(--muted); font-size:15.5px; max-width:36ch}
.paper a{color:var(--accent-deep); font-weight:600; text-decoration:none; border-bottom:1px solid var(--accent)}

@media (max-width: 860px){
  .tickets, .papers{grid-template-columns:1fr}
  .ticket{min-height:0}
  .ticket p{max-width:none}
  .paper p{max-width:none}
}

/* paper-ui's reduced-motion block covers .rv, .press and the pill; the ticket is ours */
@media (prefers-reduced-motion: reduce){
  .ticket, .ticket:hover, .ticket .stamp .go{transform:none; transition:none}
}

/* The plated H1, shared by every content page since the 2 Sep 2026 brand pass (it lived only
   in start.html's inline style before, which is exactly how the brand got lost between the
   front door and the inner pages). */
/* max-width:none: paper.css caps every h1 at 15ch, which is ~600px at f7, and inside that a
   five-plate row wraps its last word onto a plate row of its own. The rows here ARE the
   chosen breaks, so the h1 gets the full column. */
.plates-h1{margin:0 0 var(--s3); display:flex; flex-direction:column; align-items:flex-start;
  gap:.06em 0; max-width:none}
.plates-h1 .prow{gap:0 .08em}
/* 70px, not the start page's 104: the longest chosen row (MINUTES IN SHORT PAPERS OUT) is
   1803 native px, and above ~70px it wraps its last word onto a plate row of its own inside
   the ~680px content column, which is the one break the plate law forbids. */
.plates-h1 img{height:clamp(60px,6.7vw,96px)}
/* On a phone that clamp sits on its 36px FLOOR (5.4vw is 22px at 412), so the two pages with no
   size of their own, /pricing and /questions, printed a headline half the width of their own body
   copy while /samples and /how-it-works, which were sized by hand, printed one twice as tall.
   Same defect Hayden named on 5 Sep 2026, on the pages he had not opened. 15vw is 62px at 412,
   and the widest row on either page (SELL YOU on pricing, 4.9x its height; ASK AN AGENCY on
   questions, 5.4x) lands at 334px inside a 384px column, and still fits at 320px wide.
   A page with its own .plates-h1 img rule is unaffected: its <style> comes after this file. */
@media (max-width:720px){
  .plates-h1 img{height:clamp(40px,15vw,64px)}
}
/* One plate scale for every page but the home poster (16 Oct 2026 audit, rule 1): 96px at 1440, 58px at
   390. Word count chooses the ROWS (authored breaks), never the size. A headline authored as two rows for a
   phone (/start, /talk) takes class one-row to sit as ONE row where the column is wide enough. */
@media (min-width:721px){
  .plates-h1.one-row{flex-direction:row; flex-wrap:wrap; gap:0 .08em}
}
/* The hub stamp (rule 4): 30px on a phone, 43px on a desk, one definition for /answers, every answer and the Jargon Buster. */
.plates-h1.stamp img{height:clamp(30px,3vw,44px)}
/* Every content page starts its first element 58px under the header strip (audit rule 3: the tear hangs
   52px, so the kicker or headline sits clear of it). Task pages with a flush frame set the header margin. */
main{padding-top:var(--s5)}
/* R3: every lede uses paper-ui's responsive ladder. The legal pages' older .doc .lede
   rules pin 17px; the element-qualified selector wins without editing their page copies. */
p.lede, .doc p.lede{font-size:clamp(17px,1.6vw,20px)}
/* Privacy and partner terms call their headline kicker .n. Keep that older markup on
   the same ladder as .kicker, including its muted ink and .08em tracking. */
main.doc > .n{font-family:var(--label); font-size:var(--f1); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2)}

/* The header (5 Sep 2026, the parity lane, against Hayden's mocks): a strip of black paper laid
   across the very top of the page, at y=0 on every page, no cream above it (the frame's top padding
   is pulled back under it). Taller bar, the mark and the wordmark at the mock's size, the links as
   tracked capitals, the action as a pill. The torn bottom edge is the photographed black tear
   (Higgsfield, cut out locally), 56px of it shown: the mock's tear is about 20px deep and at 42px
   only its last fibres showed. */
.frame > header.top:first-child{margin-top:calc(var(--s3) * -1)}
header.top{padding:16px clamp(20px,3.2vw,44px) 14px; align-items:center; background:#1C1814}
/* the photographed tear hangs a deep flap at its left fifth: shown at 100% it read as a black
   chunk under the wordmark on every page, so the strip is cut at 130% and pinned right, which
   puts the flap past the left edge and leaves the even fibres */
header.top::after{bottom:-52px; height:56px; background:url(/paper/pieces/tear-black.webp) 100% 100% / 130% 230px no-repeat; clip-path:none}
.brand{display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:inherit}
.brand .logomark{width:30px; height:30px}
header.top .logomark .bar{fill:var(--accent)}
header.top .logomark .bar:nth-child(3){fill:var(--paper)}   /* the black strip: the third rule in paper (6 Sep 2026) */
header.top .wordmark{font-size:30px}
nav.links{align-items:center; gap:30px; text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:.09em; font-variation-settings:"wdth" 82}
nav.links a{color:rgba(243,237,225,.92); padding-bottom:4px; border-bottom-width:2px}
/* The CTA pill sits beside the nav, not inside it (the hub shell, 13 Oct 2026), so on a phone it can take its own row. */
header.top a.go{margin-left:30px; background:var(--accent); color:var(--ink); border-bottom:0; border-radius:999px; padding:11px 20px 10px; text-decoration:none;
  font-family:var(--label); text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:.09em; font-variation-settings:"wdth" 82; white-space:nowrap; position:relative;
  transition:transform .18s, background .18s; box-shadow:var(--lx-contact) var(--ly-contact) 0 rgba(0,0,0,.45)}
header.top a.go:hover, header.top a.go[aria-current]{background:var(--accent); color:var(--ink); transform:translateY(-1px) rotate(-.6deg)}
header.top a:focus-visible, header.top summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
/* The links: AI help, then What it costs, Examples and How it works on a desk; the Menu disclosure holds those three on a
   phone (a <details>, so it opens with a tap, Enter or Space and needs no script). */
nav.links{margin-left:auto}
nav.links .menu{display:none; position:relative}
nav.links .menu summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:rgba(243,237,225,.92); padding:4px 0}
nav.links .menu summary::-webkit-details-marker{display:none}
nav.links .menu .chev{transition:transform .18s}
nav.links .menu[open] .chev{transform:rotate(180deg)}
nav.links .menu-list{position:absolute; right:0; top:calc(100% + 12px); z-index:50; min-width:220px; display:flex; flex-direction:column; background:#1C1814; padding:6px 18px; border-radius:3px; box-shadow:var(--sheet-shadow)}
nav.links .menu-list a{padding:13px 0 11px; border-bottom:1px solid rgba(243,237,225,.14); white-space:nowrap}
nav.links .menu-list a:last-child{border-bottom:0}
@media (max-width:1100px) and (min-width:701px){
  nav.links{gap:18px; font-size:12px; letter-spacing:.06em}
  header.top a.go{margin-left:18px; font-size:12px; letter-spacing:.06em; padding:10px 16px 9px}
  header.top .wordmark{font-size:24px}
}
@media (max-width:700px){
  /* one row on a phone (Hayden, 4 Sep: the nav took too much of the screen), the wordmark kept
     beside the mark since the 5 Sep brief (THREE FIXES + the mark), everything else a size down */
  header.top{padding:10px 16px 9px; row-gap:7px}
  .brand{gap:8px} .brand .logomark{width:22px; height:22px}
  header.top .wordmark{font-size:20px}
  /* the bar: the brand, AI help and Menu; the action on a row of its own below (the hub plan's phone header) */
  nav.links{width:auto; justify-content:flex-end; gap:18px; font-size:12px; letter-spacing:.07em}
  nav.links a{font-size:12px; padding-bottom:2px}
  nav.links a.wide{display:none}
  nav.links, nav.links .menu{position:static}
  nav.links .menu{display:block}
  /* the Menu panel hangs from the sticky header, full width under the pill, never over it (audit finding 8) */
  nav.links .menu-list{left:16px; right:16px; top:calc(100% + 6px); min-width:0}
  /* the pill that links to the page you are on is 43px of chrome on the money page (audit finding 9) */
  header.top a.go[aria-current="page"]{display:none}
  header.top a.go{order:3; flex:1 0 100%; margin:2px 0 0; text-align:center; font-size:12px; letter-spacing:.07em; padding:9px 14px 8px}
}
@media (max-width:560px){
  .frame > header.top:first-child{margin-top:calc(var(--s2) * -1)}
  /* the 16px phone gutter (audit rule 2); paper.css is generated by the paper-ui sync and keeps its own 14px */
  .frame{padding-left:16px; padding-right:16px}
}

/* The deckle (5 Sep 2026): paper-ui's tear tokens alternate their offset at every point, which
   reads as pinking shears beside the photographed pieces. These four tear with two slow waves and
   a little fibre on top, the way a handmade sheet tears, and every sheet on the three collage
   pages cuts with one of them. Generated, never hand-edited (tools/threefixes/deckle.py). */
:root{
  --deckle1:polygon(0.0% 0.8%,2.5% 0.7%,5.0% 0.6%,7.5% 1.1%,10.0% 1.6%,12.5% 2.0%,15.0% 1.7%,17.5% 1.6%,20.0% 1.2%,22.5% 1.3%,25.0% 1.2%,27.5% 1.0%,30.0% 1.5%,32.5% 1.3%,35.0% 0.8%,37.5% 0.3%,40.0% 0.0%,42.5% 0.0%,45.0% 0.4%,47.5% 0.5%,50.0% 0.7%,52.5% 0.7%,55.0% 0.5%,57.5% 0.8%,60.0% 1.1%,62.5% 1.7%,65.0% 1.9%,67.5% 2.0%,70.0% 1.8%,72.5% 1.5%,75.0% 1.1%,77.5% 0.9%,80.0% 1.3%,82.5% 1.4%,85.0% 1.2%,87.5% 0.8%,90.0% 0.1%,92.5% 0.0%,95.0% 0.0%,97.5% 0.2%,99.6% 0.0%,99.5% 3.6%,99.9% 7.1%,99.6% 10.7%,99.1% 14.3%,98.6% 17.9%,98.5% 21.4%,98.6% 25.0%,98.8% 28.6%,98.3% 32.1%,98.4% 35.7%,98.5% 39.3%,99.6% 42.9%,99.3% 46.4%,99.5% 50.0%,99.3% 53.6%,99.8% 57.1%,99.9% 60.7%,99.1% 64.3%,98.9% 67.9%,98.8% 71.4%,98.5% 75.0%,98.6% 78.6%,98.5% 82.1%,97.9% 85.7%,98.4% 89.3%,99.5% 92.9%,99.5% 96.4%,100.0% 100.0%,97.5% 99.8%,95.0% 99.6%,92.5% 99.5%,90.0% 99.3%,87.5% 99.8%,85.0% 99.5%,82.5% 99.4%,80.0% 98.9%,77.5% 98.4%,75.0% 98.1%,72.5% 98.4%,70.0% 98.9%,67.5% 98.8%,65.0% 98.6%,62.5% 98.0%,60.0% 98.1%,57.5% 98.4%,55.0% 98.9%,52.5% 99.3%,50.0% 99.2%,47.5% 99.2%,45.0% 99.4%,42.5% 99.1%,40.0% 99.6%,37.5% 99.8%,35.0% 99.9%,32.5% 99.7%,30.0% 99.3%,27.5% 98.9%,25.0% 98.9%,22.5% 99.1%,20.0% 98.8%,17.5% 98.6%,15.0% 98.2%,12.5% 98.0%,10.0% 98.0%,7.5% 98.2%,5.0% 98.9%,2.5% 98.8%,0.2% 100.0%,0.5% 96.4%,0.7% 92.9%,0.3% 89.3%,0.1% 85.7%,0.9% 82.1%,1.2% 78.6%,1.4% 75.0%,0.9% 71.4%,1.2% 67.9%,2.1% 64.3%,1.8% 60.7%,1.3% 57.1%,1.2% 53.6%,1.2% 50.0%,1.1% 46.4%,0.9% 42.9%,0.3% 39.3%,0.0% 35.7%,0.6% 32.1%,0.5% 28.6%,0.3% 25.0%,0.1% 21.4%,0.6% 17.9%,1.7% 14.3%,1.5% 10.7%,1.6% 7.1%,1.3% 3.6%);
  --deckle2:polygon(0.0% 0.8%,2.5% 1.1%,5.0% 1.2%,7.5% 0.9%,10.0% 1.0%,12.5% 1.5%,15.0% 1.7%,17.5% 1.9%,20.0% 1.3%,22.5% 0.8%,25.0% 0.8%,27.5% 0.6%,30.0% 0.8%,32.5% 0.8%,35.0% 0.3%,37.5% 0.0%,40.0% 0.3%,42.5% 0.7%,45.0% 1.3%,47.5% 1.5%,50.0% 1.6%,52.5% 1.2%,55.0% 1.5%,57.5% 1.6%,60.0% 1.9%,62.5% 1.7%,65.0% 1.0%,67.5% 0.3%,70.0% 0.4%,72.5% 0.7%,75.0% 0.7%,77.5% 0.5%,80.0% 0.4%,82.5% 0.1%,85.0% 0.4%,87.5% 1.1%,90.0% 1.8%,92.5% 1.5%,95.0% 1.2%,97.5% 1.1%,98.6% 0.0%,97.9% 3.6%,98.6% 7.1%,98.9% 10.7%,99.3% 14.3%,98.9% 17.9%,99.2% 21.4%,99.8% 25.0%,99.9% 28.6%,99.0% 32.1%,98.6% 35.7%,99.1% 39.3%,98.8% 42.9%,98.1% 46.4%,97.9% 50.0%,98.5% 53.6%,99.2% 57.1%,99.0% 60.7%,99.3% 64.3%,99.3% 67.9%,99.7% 71.4%,100.0% 75.0%,99.2% 78.6%,98.9% 82.1%,98.8% 85.7%,98.8% 89.3%,98.0% 92.9%,97.8% 96.4%,100.0% 99.0%,97.5% 99.1%,95.0% 99.6%,92.5% 99.2%,90.0% 99.2%,87.5% 98.7%,85.0% 98.3%,82.5% 98.2%,80.0% 98.7%,77.5% 98.6%,75.0% 98.4%,72.5% 98.3%,70.0% 98.1%,67.5% 98.6%,65.0% 99.0%,62.5% 99.7%,60.0% 99.6%,57.5% 99.4%,55.0% 99.5%,52.5% 99.3%,50.0% 99.8%,47.5% 100.0%,45.0% 99.6%,42.5% 99.2%,40.0% 99.0%,37.5% 99.0%,35.0% 99.0%,32.5% 99.1%,30.0% 98.5%,27.5% 98.1%,25.0% 98.2%,22.5% 98.1%,20.0% 99.0%,17.5% 99.1%,15.0% 98.6%,12.5% 98.8%,10.0% 98.9%,7.5% 99.3%,5.0% 99.8%,2.5% 99.9%,1.2% 100.0%,1.5% 96.4%,1.5% 92.9%,1.1% 89.3%,1.3% 85.7%,0.7% 82.1%,0.3% 78.6%,0.3% 75.0%,0.6% 71.4%,0.8% 67.9%,1.5% 64.3%,1.7% 60.7%,1.7% 57.1%,1.1% 53.6%,1.6% 50.0%,1.3% 46.4%,1.2% 42.9%,1.0% 39.3%,0.5% 35.7%,0.3% 32.1%,0.1% 28.6%,0.9% 25.0%,0.9% 21.4%,1.7% 17.9%,1.3% 14.3%,1.3% 10.7%,1.2% 7.1%,1.3% 3.6%);
  --deckle3:polygon(0.0% 0.5%,2.5% 0.3%,5.0% 0.5%,7.5% 0.6%,10.0% 0.8%,12.5% 0.6%,15.0% 0.9%,17.5% 0.9%,20.0% 0.8%,22.5% 1.0%,25.0% 1.5%,27.5% 1.6%,30.0% 2.1%,32.5% 2.2%,35.0% 1.9%,37.5% 1.1%,40.0% 0.7%,42.5% 0.4%,45.0% 0.2%,47.5% 0.3%,50.0% 0.5%,52.5% 0.5%,55.0% 0.8%,57.5% 0.9%,60.0% 0.6%,62.5% 0.9%,65.0% 0.8%,67.5% 1.0%,70.0% 1.0%,72.5% 1.6%,75.0% 2.0%,77.5% 1.6%,80.0% 1.9%,82.5% 1.3%,85.0% 1.1%,87.5% 0.5%,90.0% 0.6%,92.5% 0.3%,95.0% 0.4%,97.5% 0.2%,99.4% 0.0%,99.4% 3.6%,99.3% 7.1%,99.6% 10.7%,99.3% 14.3%,98.7% 17.9%,98.2% 21.4%,98.0% 25.0%,98.6% 28.6%,98.7% 32.1%,99.0% 35.7%,99.2% 39.3%,99.2% 42.9%,99.7% 46.4%,100.0% 50.0%,99.7% 53.6%,99.3% 57.1%,98.7% 60.7%,98.5% 64.3%,98.6% 67.9%,98.4% 71.4%,98.3% 75.0%,98.6% 78.6%,98.8% 82.1%,99.6% 85.7%,99.7% 89.3%,99.5% 92.9%,99.6% 96.4%,100.0% 98.2%,97.5% 98.3%,95.0% 98.8%,92.5% 98.8%,90.0% 98.9%,87.5% 98.4%,85.0% 98.6%,82.5% 98.5%,80.0% 99.2%,77.5% 99.7%,75.0% 99.8%,72.5% 99.9%,70.0% 99.6%,67.5% 99.3%,65.0% 99.3%,62.5% 99.4%,60.0% 99.3%,57.5% 99.5%,55.0% 99.6%,52.5% 99.4%,50.0% 99.1%,47.5% 98.3%,45.0% 98.4%,42.5% 98.3%,40.0% 98.3%,37.5% 98.5%,35.0% 98.7%,32.5% 98.6%,30.0% 98.4%,27.5% 98.3%,25.0% 98.3%,22.5% 98.9%,20.0% 99.4%,17.5% 99.9%,15.0% 99.9%,12.5% 100.0%,10.0% 99.4%,7.5% 99.2%,5.0% 99.4%,2.5% 99.3%,1.7% 100.0%,1.4% 96.4%,1.0% 92.9%,1.6% 89.3%,2.1% 85.7%,1.5% 82.1%,0.6% 78.6%,1.0% 75.0%,0.7% 71.4%,0.7% 67.9%,0.1% 64.3%,0.1% 60.7%,1.0% 57.1%,0.8% 53.6%,0.9% 50.0%,0.8% 46.4%,1.9% 42.9%,1.8% 39.3%,1.5% 35.7%,1.4% 32.1%,1.5% 28.6%,1.1% 25.0%,0.9% 21.4%,0.3% 17.9%,0.2% 14.3%,0.8% 10.7%,0.4% 7.1%,0.2% 3.6%);
  --deckle4:polygon(0.0% 1.1%,2.5% 1.6%,5.0% 2.1%,7.5% 1.9%,10.0% 2.1%,12.5% 1.6%,15.0% 1.1%,17.5% 0.9%,20.0% 0.8%,22.5% 0.8%,25.0% 1.2%,27.5% 0.7%,30.0% 0.7%,32.5% 0.3%,35.0% 0.0%,37.5% 0.0%,40.0% 0.5%,42.5% 1.1%,45.0% 0.9%,47.5% 1.1%,50.0% 0.9%,52.5% 1.1%,55.0% 1.4%,57.5% 1.7%,60.0% 1.7%,62.5% 2.1%,65.0% 1.8%,67.5% 1.7%,70.0% 1.1%,72.5% 1.2%,75.0% 1.3%,77.5% 1.3%,80.0% 1.3%,82.5% 1.0%,85.0% 0.5%,87.5% 0.0%,90.0% 0.3%,92.5% 0.1%,95.0% 0.2%,97.5% 0.8%,99.4% 0.0%,99.9% 3.6%,99.5% 7.1%,99.4% 10.7%,98.3% 14.3%,98.2% 17.9%,98.3% 21.4%,98.6% 25.0%,99.0% 28.6%,99.7% 32.1%,99.6% 35.7%,99.7% 39.3%,99.6% 42.9%,99.5% 46.4%,99.4% 50.0%,99.2% 53.6%,98.6% 57.1%,98.4% 60.7%,97.9% 64.3%,98.1% 67.9%,98.7% 71.4%,99.3% 75.0%,99.9% 78.6%,99.8% 82.1%,99.2% 85.7%,98.9% 89.3%,98.8% 92.9%,98.6% 96.4%,100.0% 98.9%,97.5% 99.3%,95.0% 99.0%,92.5% 99.0%,90.0% 99.2%,87.5% 100.0%,85.0% 100.0%,82.5% 99.6%,80.0% 99.2%,77.5% 99.1%,75.0% 98.7%,72.5% 99.1%,70.0% 99.0%,67.5% 98.8%,65.0% 98.4%,62.5% 98.2%,60.0% 98.2%,57.5% 98.5%,55.0% 99.1%,52.5% 99.0%,50.0% 98.7%,47.5% 99.2%,45.0% 99.4%,42.5% 99.9%,40.0% 99.9%,37.5% 99.9%,35.0% 99.5%,32.5% 99.3%,30.0% 98.9%,27.5% 99.0%,25.0% 99.2%,22.5% 98.7%,20.0% 98.5%,17.5% 98.1%,15.0% 97.9%,12.5% 98.6%,10.0% 99.0%,7.5% 99.2%,5.0% 98.7%,2.5% 98.6%,1.1% 100.0%,0.2% 96.4%,0.0% 92.9%,0.3% 89.3%,0.8% 85.7%,1.5% 82.1%,1.6% 78.6%,1.5% 75.0%,1.1% 71.4%,1.6% 67.9%,1.5% 64.3%,1.4% 60.7%,0.9% 57.1%,0.3% 53.6%,0.3% 50.0%,0.1% 46.4%,0.5% 42.9%,1.6% 39.3%,1.6% 35.7%,1.5% 32.1%,1.4% 28.6%,1.4% 25.0%,1.0% 21.4%,0.8% 17.9%,0.7% 14.3%,0.4% 10.7%,0.0% 7.1%,0.4% 3.6%);
}

/* A masked orange sheet's edge (5 Sep 2026, Hayden: beside the kraft corner's torn fibres the
   orange "looks like it is floating, not connected"). One treatment on every page that lays orange
   stock through a torn mask: the same silhouette a hair larger in pale paper BENEATH the orange, so a
   paper rim shows along the tear the way a torn sheet's fibres do; a one pixel contact shadow; and a
   short soft fall (6px), never the wide 18px float. The element sets --tear-mask to its own mask and
   its --tear-mask-size to the mask's size; the orange itself is the element's ::before. */
.torn-orange{filter:drop-shadow(var(--lx-contact) var(--ly-contact) 1px rgba(22,19,15,.5)) drop-shadow(calc(var(--light-x)*.7) calc(var(--light-y)*.7) 6px rgba(22,19,15,.3))}
.torn-orange::after{content:""; position:absolute; inset:-3px; z-index:-1; background:#EEE5D2 var(--grain); background-size:auto, 140px 140px; background-blend-mode:normal, multiply;
  -webkit-mask:var(--tear-mask) var(--tear-mask-pos, center) / var(--tear-mask-size, 100% 100%) no-repeat; mask:var(--tear-mask) var(--tear-mask-pos, center) / var(--tear-mask-size, 100% 100%) no-repeat}

/* Keep going is a way back, not a third thing to do: a text link under the two real buttons
   rather than a button competing with them (Hayden, 8 Sep 2026, on his phone). */
.sheet-card .back-to-it{margin:var(--s3) 0 0}
.sheet-card .back-to-it .linkish{background:none; border:0; padding:0; font:inherit; color:var(--accent-deep); font-weight:600; text-decoration:none; border-bottom:1px solid var(--accent); cursor:pointer}
.sheet-card .back-to-it .linkish:hover{border-bottom-color:var(--accent-deep)}

/* The torn cream sheet as a card (7 Sep 2026, Hayden: the /start doors and the /talk cards read as
   white boxes beside how-it-works' torn steps; "the same bg cards as the how it works page"). One
   element: the photographed sheet is its background and the drop shadows follow its torn
   silhouette, the same three shadows as how-it-works' .step-wrap. how-it-works' .step and the home's
   .item are the same piece with a wrapper, for their mirrored middle sheet. */
.torn-sheet{position:relative; background:url(/paper/pieces/sheet-cream.webp) center/100% 100% no-repeat; padding:40px 24px 28px 26px; border-radius:0; box-shadow:none;
  filter:drop-shadow(0 2px 0 rgba(255,253,248,.55)) drop-shadow(calc(var(--lx-contact)*1.5) calc(var(--ly-contact)*1.5) 0 rgba(22,19,15,.35)) drop-shadow(var(--light-x) var(--light-y) 18px rgba(22,19,15,.26))}

/* The progress row (7 Sep 2026, one funnel, Hayden: progress always visible, time visible, save and
   leave, like a survey tool). Every screen of every door carries this one row: a thin fill across
   its top, the label at the left (Screen 4 of 13 / 3:12 of about 20 minutes), Save and leave at the
   right. The talk page's timer cluster and the form's step counter and rail both moved into it. */
.progress{position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);
  padding:12px 0 0; margin:0 0 var(--s3); font-family:var(--label); font-size:13px; letter-spacing:.06em; color:var(--muted)}
.progress::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--hairline); border-radius:2px}
.progress .fill{position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); border-radius:2px; transition:width .45s cubic-bezier(.22,1,.36,1)}
.progress .label{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0}
.progress .label b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.progress .state{text-transform:uppercase; letter-spacing:.12em; font-size:12px}
.progress .leave{font:inherit; letter-spacing:inherit; color:var(--ink); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.progress .leave:hover{color:var(--accent-deep)}
.progress .leave[hidden]{display:none}

/* The cream sheet a door's conversation and its finish sit on: /talk's stage since 4 Sep 2026, and
   the form's finish since the finish polish (7 Sep 2026), one tilt and one padding on both doors. */
.sheet.stage{position:relative; padding:var(--s3); transform:rotate(-.8deg)}   /* the door sheet only: the home reveal also carries .stage, and a bare rule tilted it by a pixel (7 Sep 2026) */
@media (prefers-reduced-motion: reduce){ .sheet.stage{transform:none} }

/* The finish (7 Sep 2026, one funnel): the one page after the door's own finish, the same block on
   /talk and /form. The head, one required field (a website, or the business name when there is
   none), where the papers go, the one button in the home hero's shape, the reassurance, Start over.
   The button has no href until the field's value has landed on the server (aria-disabled). */
.finish{display:grid; gap:var(--s2); justify-items:start; text-align:left; max-width:58ch}
.finish h2{font-size:clamp(24px,2.6vw,32px); margin:0; text-wrap:balance}
.finish .sure{color:var(--muted); font-size:15.5px; line-height:1.5; margin:-4px 0 4px; text-wrap:pretty}   /* one line under the head: everything captured (the finish polish, 7 Sep 2026) */
.finish label{display:block; font-weight:600; font-size:15px; color:var(--ink); margin:0; text-wrap:balance}
.finish input{width:100%; max-width:420px; padding:12px 14px; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--hairline); border-radius:2px}
.finish input:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
.finish p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.5; text-wrap:pretty}
.finish .cta{font-size:20px; padding:19px 40px; text-transform:uppercase; letter-spacing:.08em; gap:22px; margin:var(--s1) 0}
.finish .cta small{font-size:15px; letter-spacing:.1em; padding-left:22px; text-transform:none}
.finish .cta[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}   /* still clickable: the script posts the field first, then goes */
.finish .linkish{background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:14px; cursor:pointer}
.finish .linkish:hover{color:var(--ink)}
@media (max-width:600px){
  /* one line on a 390 phone: the words and the price never wrap inside the button (Hayden: never a lone word) */
  .finish .cta{font-size:15px; letter-spacing:.02em; padding:15px 14px; gap:10px; width:100%; justify-content:center; white-space:nowrap}
  .finish .cta small{padding-left:10px; font-size:13px; letter-spacing:.04em}
}
.progress[hidden]{display:none}   /* an author display beats the UA hidden rule (6 Sep 2026, the /talk scrap) */

/* The save sheet (7 Sep 2026, one funnel): "Save and leave" on either door opens this one sheet,
   drawn by save-sheet.js: the link, the fixed words, an optional email. It lived in form.html
   alone until the talk door needed the same picture. */
.sheet-backdrop{position:fixed; inset:0; background:rgba(24,18,12,.5); display:flex; align-items:center; justify-content:center; padding:var(--s3); z-index:30}
.sheet-card{background:var(--card); color:var(--ink); border:1px solid var(--hairline); border-radius:3px; padding:var(--s4); max-width:440px; width:100%; max-height:90vh; overflow:auto; text-align:left}
.sheet-card h2{font-size:22px; line-height:1.2; margin:0 0 var(--s3); text-wrap:balance}   /* never a lone word on the last line: IN. sat alone at 390 */
.sheet-card label{display:block; font-weight:600; font-size:15px; margin:var(--s3) 0 6px; color:var(--ink)}
.sheet-card input{width:100%; padding:12px 14px; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--hairline); border-radius:2px; margin-bottom:10px}
.sheet-card input:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
.sheet-card .aside{color:var(--muted); font-size:15px; margin:var(--s2) 0 0; max-width:none}
.sheet-card .btn{font-size:15px; padding:11px 20px}
.sheet-card .nav{display:flex; justify-content:space-between; align-items:center; margin-top:var(--s4)}

/* The footer (the hub shell, 13 Oct 2026), generated whole by add-footer-legal.mjs from the registry's navigation.footer:
   three groups of useful links, the signature line, then Ask an AI about us. It takes its colours from the footer it sits
   in (cream, the black world, the landing's black band), so the rules use the footer's own voice and currentColor. */
footer.foot .foot-nav{flex:1 0 100%; display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s3) var(--s4)}
/* AI help is the longest group (the hub, its six sections, the Jargon Buster): two short columns on a desk, so the footer
   is as tall as the starting-plan group and no taller */
footer.foot .foot-group:first-child ul{columns:2; column-gap:var(--s4)}
footer.foot .foot-group li{break-inside:avoid}
footer.foot .foot-h{margin:0 0 var(--s1); font-size:var(--f1); font-weight:700; letter-spacing:.12em; text-transform:uppercase}
footer.foot .foot-group ul{list-style:none; margin:0; padding:0}
footer.foot .foot-group li{padding:2px 0}
footer.foot .foot-group a{font-size:13px; line-height:1.45}
footer.foot .sig{flex:1 0 100%; margin:0; padding:var(--s1) 0 var(--s2)}
@media (max-width:700px){
  footer.foot .foot-nav{grid-template-columns:1fr 1fr; grid-template-areas:"ai plan" "ai about"; gap:var(--s2) var(--s3)}
  footer.foot .foot-group:nth-child(1){grid-area:ai} footer.foot .foot-group:nth-child(2){grid-area:plan} footer.foot .foot-group:nth-child(3){grid-area:about}
  footer.foot .foot-group li{padding:4px 0}
  footer.foot .foot-group:first-child ul{columns:1}
}

/* Ask an AI about us (10 Oct 2026): since the hub shell the footer's last block, after the useful links on every page, stamped by
   add-footer-legal.mjs from ask-ai-copy.json. It takes its colours from the footer it sits in (cream,
   the black world, the landing's black band), so one rule set serves all three: the footer's own label
   voice, the kicker tracked like a part number, four hairline pills in currentColor with the house tilt
   on hover, the marks in the accent. */
footer.foot .ask-ai{flex:1 0 100%; margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); padding-top:var(--s3); border-top:1px solid color-mix(in srgb, currentColor 25%, transparent)}
footer.foot .ask-ai p{margin:0}
footer.foot .ask-ai-kicker{font-size:var(--f1); font-weight:700; letter-spacing:.12em; text-transform:uppercase}
footer.foot .ask-ai-note{max-width:62ch; font-size:13px; line-height:1.45; text-wrap:pretty}
footer.foot .ask-ai-row{display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:4px}
footer.foot .ask-ai-row a{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border:1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.02em; transition:transform .2s, border-color .2s}
footer.foot .ask-ai-row a:hover{border-color:var(--accent); transform:translateY(-1px) rotate(-.6deg)}
footer.foot .ask-ai-row svg{flex:none; color:var(--accent)}
/* the landing dims its signature line */
main.lp ~ footer.foot .sig{opacity:.65}
/* two by two on a phone: three and a lone fourth read as a widow */
@media (max-width:560px){footer.foot .ask-ai-row{align-self:stretch} footer.foot .ask-ai-row a{flex:1 1 calc(50% - var(--s1)); justify-content:center}}
@media (prefers-reduced-motion:reduce){footer.foot .ask-ai-row a:hover{transform:none}}