/* Crayon Memories. White paper and a full box of crayons, taken from the logo.
   Colors: red is the action color (buttons). Blue marks what is chosen or in focus. Orange, yellow, green and purple
   decorate. Every soft band, chip and sticker uses one of the six logo colors or its pale shade.
   Text on yellow, orange or green is always dark. Text on red, purple or deep blue is always white.
   Shape rule: buttons are pills, big panels are 36px, cards are 28px, small cards are 18px, inputs are 14px.
   Layers: nav 20, help button 30, dialog uses the top layer. */
@font-face{font-family:"Chewy";src:url("/static/fonts/chewy.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("/static/fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  color-scheme:light;
  --paper:#ffffff;--surface:#ffffff;--ink:#2b2a30;--body:#4a4952;--muted:#6b6a75;--line:#ece8e1;
  /* calm, not loud: one soft coral carries the page; the logo rainbow appears only as pastel accents */
  --red:#f4a59c;--orange:#f7bd8c;--yellow:#f7d98a;--green:#a8d49a;--blue:#9cc9ea;--purple:#c3aee6;
  --accent:#c84a3c;--accent-ink:#ad3e32;--on-accent:#ffffff;--pick:#2f76a3;--coral:#e8604f;--purple-ink:#8a6cc2;
  --tint:#fdf0ec;--red-soft:#fdf0ec;--orange-soft:#fdf3ea;--yellow-soft:#fdf7e4;--green-soft:#eff5ea;--blue-soft:#ecf4fa;--purple-soft:#f4f0fa;
  --rainbow:linear-gradient(90deg,#f4a59c,#f7bd8c,#f7d98a,#a8d49a,#9cc9ea,#c3aee6);
  --warn:#7a4700;--warn-bg:#fff3d9;--bad:#b3261e;--good:#3f8a3a;
  --shadow:0 18px 44px rgba(70,45,30,.12);
  --r-panel:36px;--r-card:28px;--r-small:18px;--r-input:14px;
  --display:"Chewy","Figtree",-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--body);font:17px/1.6 "Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);margin:0;text-wrap:balance}
h1,h2{text-transform:uppercase;letter-spacing:.015em;line-height:1.06}
h1{font-size:clamp(2.4rem,4.3vw,3.7rem);overflow-wrap:anywhere}
h2{font-size:clamp(2rem,3.6vw,2.9rem)}
h3{font-size:1.45rem;letter-spacing:.01em;line-height:1.2}
p{margin:0}
a{color:var(--pick);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
.ic{width:1.25em;height:1.25em;flex:none}
a,button,summary,label,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--pick);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:999px;z-index:40}
.skip:focus{left:12px}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
section[id]{scroll-margin-top:96px}

/* words picked out in crayon */
.pop{color:var(--coral);padding-bottom:.1em;white-space:nowrap;background:var(--rainbow) 0 100%/100% .13em no-repeat;border-radius:0 0 8px 8px}
.c-red{color:var(--coral)}.c-blue{color:var(--pick)}.c-purple{color:var(--purple-ink)}.c-green{color:var(--good)}.c-orange{color:#c46a2a}
.kicker{font:800 .86rem/1 "Figtree",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.rainbow{height:8px;background:var(--rainbow)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;border:2px solid var(--line);
  background:var(--surface);color:var(--ink);font:400 1.22rem/1 var(--display);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 10px 22px rgba(200,74,60,.3)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.small{min-height:44px;padding:0 20px;font-size:1.05rem}
.btn.small.primary{box-shadow:0 6px 14px rgba(200,74,60,.26)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.link{background:none;border:0;padding:0;font:inherit;color:var(--pick);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* the strip above the navigation */
.ribbon{background:var(--accent);color:var(--on-accent);text-align:center;font:700 .98rem/1.35 "Figtree",sans-serif;padding:11px 16px}
.ribbon a{color:var(--on-accent);text-underline-offset:3px}
.ribbon a:hover{text-decoration-thickness:2.5px}
.ribbon :focus-visible{outline-color:#fff}

/* navigation */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,#fff 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1.5px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font:400 1.75rem/1 var(--display);letter-spacing:.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand img{width:88px;height:auto}
.brand em{font-style:normal}
.brand em:nth-child(1){color:#e0766b}.brand em:nth-child(2){color:#e39a4f}.brand em:nth-child(3){color:#d9ac2c}
.brand em:nth-child(4){color:#6fae63}.brand em:nth-child(5){color:#4f9fd1}.brand em:nth-child(6){color:#9b7fcf}
.nav nav{display:flex;align-items:center;gap:28px}
.nav nav a:not(.btn){color:var(--ink);text-decoration:none;font-weight:700;font-size:1rem}
.nav nav a:not(.btn):hover{color:var(--accent-ink);text-decoration:underline}
.demo{background:var(--warn-bg);color:var(--warn);text-align:center;font-weight:700;font-size:.9rem;padding:8px 16px}

/* hero: a soft panel for the words, a big picture beside it */
.hero{padding:28px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.08fr;gap:28px;align-items:stretch}
.hero-card{background:var(--red-soft);border-radius:var(--r-panel);padding:60px 54px;display:flex;flex-direction:column;justify-content:center}
.hero-card p{font-size:1.2rem;max-width:30em;margin:22px 0 30px;color:var(--body)}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.perks{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.perks li{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);font-size:.97rem}
.perks .ic{color:var(--good)}
.stage{position:relative;display:flex;flex-direction:column}
.sticker{position:absolute;z-index:3;width:62px;height:62px;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(60,40,30,.18))}
.sticker .ic{width:100%;height:100%}
.sticker.s1{color:var(--yellow);top:-18px;right:34px;transform:rotate(14deg)}
.sticker.s2{color:var(--red);bottom:64px;left:-24px;width:54px;height:54px;transform:rotate(-14deg)}
.sticker.s3{color:var(--purple);top:36%;right:-22px;width:46px;height:46px;transform:rotate(10deg)}
.compare{position:relative;flex:1;min-height:500px;border-radius:var(--r-panel);overflow:hidden;background:#fefefe;box-shadow:var(--shadow);--pos:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .top{clip-path:inset(0 0 0 var(--pos))}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:5px;margin-left:-2.5px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.compare .knob{position:absolute;top:50%;left:var(--pos);width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  border:4px solid #fff;display:grid;place-items:center;pointer-events:none;box-shadow:0 8px 20px rgba(60,20,20,.3);font-size:1.15rem}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare:focus-within .knob{outline:3px solid var(--ink);outline-offset:3px}
.compare .tag{position:absolute;bottom:16px;z-index:2;padding:7px 14px;border-radius:999px;background:#fff;color:var(--ink);font:700 .85rem/1 "Figtree",sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.14);pointer-events:none}
.compare .tag.l{left:16px}.compare .tag.r{right:16px}
.caption{font-size:.95rem;color:var(--muted);margin-top:14px;text-align:center}

/* example tabs above the slider */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);
  font:700 .95rem/1 "Figtree",sans-serif;cursor:pointer;transition:transform .15s cubic-bezier(.16,1,.3,1)}
.tab:hover{border-color:var(--ink)}
.tab[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab .ic{width:1.1em;height:1.1em}

/* the strip of true promises under the hero */
.perks{padding:6px 0 10px}
.perks ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.perks li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-small);background:var(--yellow-soft);font-size:.97rem;color:var(--body)}
.perks li:nth-child(2){background:var(--green-soft)}.perks li:nth-child(3){background:var(--blue-soft)}.perks li:nth-child(4){background:var(--purple-soft)}
.perks li b{color:var(--ink)}
.perks .ic{font-size:1.5rem;color:var(--ink);flex:none}

/* how it works, with pictures */
.howto{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.howto li{display:grid;gap:10px;align-content:start}
.howto figure{position:relative;margin:0 0 8px;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1;background:#fff}
.howto figure img{width:100%;height:100%;object-fit:cover}
.howto .num{position:absolute;top:16px;left:16px;width:48px;height:48px;border-radius:999px;background:var(--accent);color:#fff;font:400 1.55rem/48px var(--display);text-align:center;
  box-shadow:0 6px 14px rgba(200,74,60,.25)}
.howto li:nth-child(2) .num{background:var(--pick);box-shadow:0 6px 14px rgba(47,118,163,.25)}
.howto li:nth-child(3) .num{background:#8a6cc2;box-shadow:0 6px 14px rgba(138,108,194,.25)}
.center{text-align:center;margin-top:40px}

/* a book for everyone you love */
.love{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.love .card{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:var(--r-card);text-decoration:none;color:var(--body);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.love .card:hover{transform:translateY(-4px)}
.love .card:hover .go{text-decoration:underline}
.love .c-pets{background:var(--green-soft)}.love .c-family{background:var(--blue-soft)}.love .c-kids{background:var(--red-soft)}.love .c-trips{background:var(--orange-soft)}
.love .chip{align-self:flex-start;padding:7px 13px;border-radius:999px;font:800 .78rem/1 "Figtree",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--good)}
.love .c-family .chip{background:var(--pick)}.love .c-kids .chip{background:var(--accent)}.love .c-trips .chip{background:#c95a08}
.love img{width:72%;margin:10px auto 8px;border-radius:10px;box-shadow:0 14px 28px rgba(60,40,30,.2);transform:rotate(-3deg)}
.love .card:nth-child(even) img{transform:rotate(3deg)}
.love h3{font-size:1.5rem}
.love .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink);padding-top:8px}

/* color together */
.together-band{padding:28px 0}
.together{display:grid;grid-template-columns:1fr 1.05fr;border-radius:var(--r-panel);overflow:hidden;background:var(--pick);min-height:440px}
.together img{width:100%;height:100%;object-fit:cover;max-height:560px}
.together .words{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;gap:18px;color:#fff}
.together h2{color:#fff}
.together p{font-size:1.14rem;max-width:30em;color:var(--blue-soft)}
.together .btn{align-self:flex-start;border-color:#fff}
.together .btn:hover{border-color:var(--yellow)}

/* flip through */
.peek{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.peek .lead{margin:16px 0 0}
.flip{display:flex;align-items:center;gap:18px;margin-top:28px;font:400 1.4rem/1 var(--display);color:var(--ink)}
.round{width:52px;height:52px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:1.1rem;
  transition:transform .15s cubic-bezier(.16,1,.3,1)}
.round:hover{background:var(--ink);color:#fff}
.round:active{transform:scale(.95)}
#peekPrev .ic{transform:rotate(180deg)}
.sheetstack{position:relative;max-width:440px;margin:0 auto;width:100%}
.sheetstack::before,.sheetstack::after{content:"";position:absolute;inset:0;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(60,40,30,.12)}
.sheetstack::before{transform:rotate(-5deg) translate(-10px,6px)}
.sheetstack::after{transform:rotate(3deg) translate(8px,4px)}
.sheetstack img{position:relative;z-index:1;width:100%;background:#fff;border-radius:14px;padding:18px;box-shadow:var(--shadow)}

/* the last call to action */
.finale{padding:36px 0 20px}
.finale-card{text-align:center;padding:64px 28px;border-radius:var(--r-panel);background:var(--yellow-soft);position:relative;overflow:hidden}
.finale-card::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--rainbow)}
.finale-card h2{max-width:18em;margin:0 auto}
.finale-card p{font-size:1.18rem;margin:16px auto 28px}

/* the Design Your Book builder */
.builder{padding:28px 0 140px}
.bprogress{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bprogress i{display:block;height:100%;background:var(--rainbow);transform:scaleX(.333);transform-origin:left center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.bgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;margin-top:36px;align-items:start}
.bstep h1,.bstep h2{font-size:clamp(2rem,3.6vw,2.7rem)}
.bstep h1:focus,.bstep h2:focus{outline:none}
.bstep .sub{font-size:1.1rem;margin-top:10px}
.swatches{border:0;padding:0;margin:24px 0 0;min-width:0}
.swatches legend{padding:0;margin-bottom:10px}
.swatch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.swatch{display:flex;align-items:center;gap:10px;padding:10px 12px;border:2px solid var(--line);border-radius:var(--r-input);cursor:pointer;font-weight:700;color:var(--ink);font-size:.95rem}
.swatch:hover{border-color:var(--muted)}
.swatch:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.swatch:has(input:focus-visible){outline:3px solid var(--pick);outline-offset:3px}
.swatch input{position:absolute;opacity:0;width:1px;height:1px}
.swatch .dot{width:30px;height:30px;border-radius:9px;background:var(--sw);flex:none}
.live{position:sticky;top:100px;display:grid;gap:10px;justify-items:center}
.live .label{font-weight:800;color:var(--ink);justify-self:start}
.mock{--cover:var(--blue);--coverInk:#fff;width:100%;max-width:380px;aspect-ratio:2550/3300;background:var(--cover);border-radius:10px;padding:7.5%;
  display:flex;flex-direction:column;gap:5%;box-shadow:0 22px 44px rgba(60,40,30,.22);transition:background-color .25s}
.mtitle{font:400 clamp(1.5rem,3vw,2.2rem)/1.05 var(--display);text-transform:uppercase;text-align:center;color:var(--coverInk);overflow-wrap:anywhere;margin:0}
.mart{flex:1;background:#fff;border-radius:14px;display:grid;place-items:center;overflow:hidden;min-height:0}
.mart img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.mock.mini .mart img{filter:none}
.mart span{display:grid;justify-items:center;gap:8px;color:var(--muted);font-weight:700;text-align:center;padding:12px}
.mart .ic{font-size:2rem}
.mded{font:400 1.1rem/1.2 var(--display);text-align:center;color:var(--coverInk);min-height:1.2em;margin:0;overflow-wrap:anywhere}
.summary{display:grid;gap:6px;margin-top:22px;padding:16px 18px;border-radius:var(--r-input);background:var(--blue-soft)}
.summary div{display:flex;justify-content:space-between;gap:12px}
.summary b{color:var(--ink)}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:1.5px solid var(--line);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.bnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bnav #back .ic{transform:rotate(180deg)}
.bstepno{color:var(--muted);font-weight:700;font-size:.95rem}
body:has(.bnav) .help{bottom:calc(92px + env(safe-area-inset-bottom))}
body:has(.bnav) footer{padding-bottom:140px}

/* honest value, next to the price */
.value-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-input);background:var(--green-soft);color:var(--ink);font-size:.93rem;font-weight:600}
.value-note .ic{color:var(--good);flex:none;margin-top:.1em}
.launch{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--accent);color:#fff;font:800 .8rem/1 "Figtree",sans-serif;letter-spacing:.04em;text-transform:uppercase}

/* the button that follows you down the home page */
.floatcta{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));z-index:29;display:inline-flex;align-items:center;gap:10px;
  min-height:54px;padding:0 30px;border-radius:999px;background:var(--accent);color:#fff;font:400 1.2rem/1 var(--display);letter-spacing:.02em;text-decoration:none;
  border:3px solid #fff;box-shadow:0 12px 28px rgba(200,74,60,.35)}
.floatcta:hover{background:var(--accent-ink)}

/* sections */
.band{padding:84px 0}
.band.soft{border-radius:var(--r-panel);margin:0 16px}
.band.yellow{background:var(--yellow-soft)}
.band.blue{background:var(--blue-soft)}
.band.green{background:var(--green-soft)}
.band.purple{background:var(--purple-soft)}
.head{text-align:center;max-width:760px;margin:0 auto}
.lead{font-size:1.15rem;max-width:36em;margin:16px auto 0}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;align-items:stretch}
.pair{position:relative;margin:0;padding:34px 34px 26px;border-radius:var(--r-card);background:#fff;box-shadow:0 10px 28px rgba(80,40,120,.08)}
.pair .page{border-radius:var(--r-small);background:#fefefe;box-shadow:var(--shadow);width:80%;margin-left:auto}
.pair .photo{position:absolute;left:26px;bottom:96px;width:36%;border-radius:var(--r-small);border:6px solid #fefefe;box-shadow:var(--shadow);transform:rotate(-5deg)}
.pair:nth-child(even) .photo{transform:rotate(4deg)}
.pair figcaption{margin:18px 0 0;font:400 1.2rem/1.3 var(--display);color:var(--ink);text-align:right;padding-left:42%}

.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps li{position:relative;padding:42px 30px 32px;border-radius:var(--r-card);background:var(--yellow-soft);text-align:center;display:grid;gap:10px;justify-items:center;align-content:start}
.steps li:nth-child(2){background:var(--green-soft)}
.steps li:nth-child(3){background:var(--blue-soft)}
.steps .num{position:absolute;top:-22px;left:50%;margin-left:-24px;width:48px;height:48px;border-radius:999px;background:var(--orange);color:var(--ink);font:400 1.5rem/48px var(--display);text-align:center}
.steps li:nth-child(2) .num{background:var(--green)}
.steps li:nth-child(3) .num{background:var(--pick);color:#fff}
.steps .dot{width:76px;height:76px;border-radius:999px;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:2rem;box-shadow:0 8px 20px rgba(60,40,30,.1)}
.steps li p{max-width:26em}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.cell{border-radius:var(--r-card);padding:32px;background:var(--surface);border:1.5px solid var(--line);display:flex;flex-direction:column;gap:10px;min-height:236px}
.cell .ic{font-size:2rem;color:var(--ink);margin-bottom:6px}
.cell.wide{grid-column:span 2}
.cell.tint{background:var(--yellow-soft);border-color:transparent}
.cell.blush{background:var(--blue-soft);border-color:transparent}
.cell.mint{background:var(--green-soft);border-color:transparent}
.cell.solid{background:var(--purple-soft);border-color:transparent;color:var(--body)}
.cell.solid h3,.cell.solid .ic{color:var(--ink)}
.cell.pic{flex-direction:row;align-items:center;gap:30px}
.cell.pic img{width:150px;border-radius:14px;background:#fefefe;flex:none;box-shadow:var(--shadow);transform:rotate(-4deg)}
/* three promises: the picture card tall on the left, two cards stacked on the right */
.bento.three{grid-template-columns:1.5fr 1fr}
.bento.three .pic{grid-row:span 2;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.bento.three .pic img{width:190px}

.price{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;margin-top:44px;padding:44px;border-radius:var(--r-card);background:var(--surface);border:3px solid var(--accent);box-shadow:var(--shadow)}
.price .big{font:400 clamp(3.2rem,6vw,4.6rem)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.price .big small{display:block;font:600 1rem/1.4 "Figtree",sans-serif;color:var(--muted);letter-spacing:0;margin-top:8px}
.ticks{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .ic{color:var(--good);margin-top:.2em}

.faq{margin-top:40px;display:grid;gap:12px}
.faq details{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-small)}
.faq details[open]{border-color:var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font:400 1.3rem/1.25 var(--display);letter-spacing:.01em;color:var(--ink);border-radius:var(--r-small)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq summary .ic{transition:transform .2s cubic-bezier(.16,1,.3,1);background:var(--yellow);color:var(--ink);border-radius:999px;padding:6px;width:2em;height:2em}
.faq details:nth-child(6n+2) summary .ic{background:var(--orange)}
.faq details:nth-child(6n+3) summary .ic{background:var(--green)}
.faq details:nth-child(6n+4) summary .ic{background:var(--blue);color:var(--ink)}
.faq details:nth-child(6n+5) summary .ic{background:var(--purple);color:var(--ink)}
.faq details:nth-child(6n+6) summary .ic{background:var(--red);color:var(--ink)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq p{padding:0 22px 20px;max-width:62ch}

footer{background:var(--blue-soft);padding:44px 0 104px;font-size:.98rem;color:var(--body);border-radius:var(--r-panel) var(--r-panel) 0 0;margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{width:150px}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer a{color:var(--ink);font-weight:700}
footer a:hover{color:var(--accent-ink)}

.help{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;
  background:#fff;color:var(--ink);font:400 1.1rem/1 var(--display);letter-spacing:.02em;text-decoration:none;border:2px solid var(--line);box-shadow:0 10px 24px rgba(70,45,30,.14);transition:transform .18s cubic-bezier(.16,1,.3,1)}
.help:hover{transform:translateY(-2px)}
.help:active{transform:translateY(0)}

/* people who ask their device for less motion get none: buttons still change, they just do not move */
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active,.help,.help:hover{transition:none;transform:none}
}

/* reveal on scroll */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .rise.in{opacity:1;transform:none}
}

/* forms */
.sheet{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-card);padding:36px;margin-top:28px;box-shadow:var(--shadow)}
.page-head{padding:52px 0 0}
.page-head p{margin-top:14px;font-size:1.12rem;max-width:38em}
.field{display:grid;gap:8px;margin-top:24px}
.field label,.field .label{font-weight:800;color:var(--ink);font-size:1rem}
.field .hint{font-size:.9rem;color:var(--muted)}
.field .err{font-size:.92rem;color:var(--bad);font-weight:600;min-height:0}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:var(--r-input);background:#fff;color:var(--ink);font:inherit}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,select:hover,textarea:hover{border-color:var(--muted)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad)}
.field.tight{margin-top:12px;gap:6px}
.field .opt{font-weight:500;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
textarea{min-height:150px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:24px;cursor:pointer}
.check input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--pick);flex:none}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.drop{display:grid;place-items:center;gap:8px;text-align:center;padding:42px 24px;border:3px dashed var(--blue);border-radius:var(--r-card);background:var(--blue-soft);cursor:pointer}
.drop:hover,.drop.over{background:var(--yellow-soft);border-color:var(--orange)}
.drop .ic{font-size:2.4rem;color:var(--pick)}
.drop b{color:var(--ink);font:400 1.5rem/1.2 var(--display);letter-spacing:.01em}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop:focus-within{outline:3px solid var(--pick);outline-offset:3px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin-top:16px;padding:0;list-style:none}
.thumbs li{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--line)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:999px;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer}
.thumbs button:hover{background:var(--accent)}
.thumbs .free{position:absolute;left:0;right:0;bottom:0;background:var(--yellow);color:var(--ink);font-size:.75rem;font-weight:800;text-align:center;padding:3px}
.err:empty,.hint:empty,.thumbs:empty{display:none}
main>.wrap{padding-bottom:80px}
.note{background:var(--yellow-soft);border-radius:var(--r-input);padding:16px 18px;font-size:.96rem;margin-top:24px}
.note b{color:var(--ink)}
.alert{background:var(--warn-bg);color:var(--warn);border-radius:var(--r-input);padding:14px 18px;font-weight:600;margin-top:20px}
.meter{height:14px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:16px}
.meter i{display:block;height:100%;width:100%;background:var(--rainbow);border-radius:999px;transform:scaleX(0);transform-origin:left center;transition:transform .3s}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}

/* the book */
.panel{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-card);padding:32px;margin-top:28px;display:grid;gap:14px}
.panel.key{border-color:transparent;background:var(--yellow-soft)}
.panel h2{font-size:1.9rem}
.panel .actions{margin-top:6px}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));align-items:start;gap:22px;margin:28px 0 0;padding:0;list-style:none}
.tile{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.tile .art{position:relative;aspect-ratio:4/5;background:#fefefe;display:grid;place-items:center}
.tile .art img{width:100%;height:100%;object-fit:contain}
.tile .art .was{position:absolute;left:10px;bottom:10px;width:30%;border-radius:12px;border:3px solid #fefefe;box-shadow:0 6px 16px rgba(0,0,0,.25);height:auto;object-fit:cover;transform:rotate(-3deg)}
.tile.locked .art{background:var(--blue-soft)}
.tile.locked:nth-child(4n) .art{background:var(--yellow-soft)}
.tile.locked:nth-child(4n+1) .art{background:var(--green-soft)}
.tile.locked:nth-child(4n+2) .art{background:var(--purple-soft)}
.tile.locked .lock{color:var(--ink)}
.tile .art.making{background:#fff;overflow:hidden}
.tile .art.making .under{filter:grayscale(1) contrast(.8);opacity:.3;object-fit:cover}
.tile .art .sweep{position:absolute;left:0;right:0;top:0;height:34%;opacity:0;transform:translateY(-100%);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--blue) 22%,transparent));border-bottom:4px solid var(--blue)}
@media (prefers-reduced-motion:no-preference){.tile .art .sweep{opacity:1;animation:sweep 2.6s cubic-bezier(.45,0,.55,1) infinite}}
@keyframes sweep{to{transform:translateY(300%)}}
.tile .wait.on{background:color-mix(in srgb,#fff 92%,transparent);color:var(--ink);inset:auto 12px 12px;border-radius:999px;padding:8px 14px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tile .art.making .wait{color:var(--ink);font-weight:700}
.tile .lock{position:absolute;display:grid;place-items:center;gap:6px;color:var(--ink);font:400 1.2rem/1.2 var(--display);letter-spacing:.01em;text-align:center}
.tile .lock .ic{font-size:1.8rem}
.tile .body{padding:16px 18px 20px;display:grid;gap:12px}
.tile .body b{color:var(--ink);font:400 1.2rem/1.2 var(--display);letter-spacing:.01em}
.tile .row{display:flex;gap:10px;flex-wrap:wrap}
.tile .flag{font-size:.88rem;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:8px 12px}
.versions{display:flex;gap:8px;flex-wrap:wrap}
.versions button{width:58px;border-radius:10px;border:2px solid var(--line);padding:0;overflow:hidden;background:#fefefe;cursor:pointer;aspect-ratio:4/5}
.versions button:hover{border-color:var(--muted)}
.versions button[aria-pressed=true]{border-color:var(--pick);box-shadow:0 0 0 2px var(--pick)}
.versions img{width:100%;height:100%;object-fit:cover}
.skeleton{width:100%;height:100%;background:linear-gradient(100deg,var(--line) 30%,#fff 50%,var(--line) 70%);background-size:300% 100%}
@media (prefers-reduced-motion:no-preference){.skeleton{animation:shimmer 1.6s linear infinite}}
@keyframes shimmer{to{background-position:-300% 0}}
.tile .wait{position:absolute;inset:auto 0 14px;text-align:center;font-size:.9rem;font-weight:600;color:var(--body)}
dialog{border:0;border-radius:var(--r-card);padding:0;background:var(--surface);color:var(--body);width:min(520px,calc(100vw - 32px));box-shadow:var(--shadow)}
dialog{overscroll-behavior:contain;max-width:calc(100vw - 32px);box-sizing:border-box}
/* nothing inside a box may be wider than the box: long button labels wrap instead of pushing the box off a phone screen */
dialog form > *{min-width:0;max-width:100%}
dialog .btn{white-space:normal;min-width:0;line-height:1.2}
dialog::backdrop{background:rgba(30,20,30,.55)}
/* the "see the rest of your book" box: opens from a locked page or the cover before payment. Short, closable, fits a
   small phone screen (it could not be closed on short screens the first day, and pill buttons turned into ovals) */
.unpaid .tile.locked{cursor:pointer}
.tile .rmphoto{justify-self:start;min-height:40px;padding:0 16px;font-size:.88rem}
.unpaid .tile.locked:focus-visible{outline:3px solid var(--pick);outline-offset:2px}
.unpaid .oshead{cursor:pointer}
.unpaid .tile .art.peekable{cursor:pointer}
dialog form{position:relative}
.dlgx{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface-2,#f1ece6);color:var(--ink);font:400 1.6rem/1 sans-serif;cursor:pointer;display:grid;place-items:center}
.dlgx:hover{background:var(--line)}
.peekbox form{padding:24px 20px 20px;gap:10px}
.peekbox h2{font-size:1.5rem;padding-right:44px}
.peekbox p{font-size:.98rem;margin:0}
.peekopts{display:grid;gap:8px;margin-top:2px}
.peekopts .btn{flex-direction:column;align-items:flex-start;gap:1px;min-height:0;padding:12px 16px;border-radius:14px;white-space:normal;text-align:left;line-height:1.2;width:100%}
.peekopts .btn b{font-size:1.02rem}
.peekopts .btn span{font:600 .84rem/1.3 "Figtree",sans-serif;opacity:.9}
.peekthanks{display:flex;gap:8px;align-items:flex-start;margin:2px 0 0;padding:10px 12px;border-radius:12px;background:var(--green-soft);color:var(--ink);font-size:.9rem;line-height:1.4}
.peekthanks .ic{color:var(--coral);flex:none;margin-top:.15em}
.peekclose{width:100%;margin-top:2px}
dialog form{padding:32px;display:grid;gap:8px}
dialog h2{font-size:1.8rem}
.sublabel{font-size:1.25rem;margin:26px 0 0}
.sublabel.first{margin-top:10px}
/* the "add more photos" box on the builder: the number first, big, in the action color */
.few .fewbig{margin:0;color:var(--accent);font:400 clamp(2.2rem,8vw,3rem)/1.05 var(--display);letter-spacing:.01em}
.few h2{font-size:1.35rem;margin-top:6px}
.few p{font-size:1.02rem}
.choice{display:flex;gap:12px;align-items:center;padding:13px 16px;border:2px solid var(--line);border-radius:var(--r-input);cursor:pointer;margin-top:8px;color:var(--ink);font-weight:600}
.choice:hover{border-color:var(--muted)}
.choice:has(input:checked){border-color:var(--pick);background:var(--blue-soft)}
.choice input{accent-color:var(--pick);width:20px;height:20px;margin:0}
dialog form{max-height:calc(100dvh - 32px);overflow-y:auto}

/* download or printed book */
.options{border:0;margin:6px 0 0;padding:0;display:grid;gap:12px;min-width:0}
.option{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:18px 20px;border:2px solid var(--line);border-radius:var(--r-small);background:var(--surface);cursor:pointer}
.option:hover{border-color:var(--muted)}
.option:has(input:checked){border-color:var(--pick);box-shadow:inset 0 0 0 1.5px var(--pick)}
.option:has(input:focus-visible){outline:3px solid var(--pick);outline-offset:3px}
.option input{accent-color:var(--pick);width:22px;height:22px;margin:2px 0 0}
.option .what{display:grid;gap:4px;min-width:0}
.option .what b{color:var(--ink);font:400 1.3rem/1.25 var(--display);letter-spacing:.01em}
.option .what span{font-size:.96rem}
.option .cost{font:400 1.6rem/1.2 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

.copies{border:0;margin:4px 0 0;padding:0;min-width:0}
/* a soft pulse on the choices the unlock box just sent them to */
@keyframes choiceflash{0%,100%{box-shadow:none}25%,55%{box-shadow:0 0 0 5px var(--yellow)}}
.flash{animation:choiceflash 2s ease 1;border-radius:var(--r-small)}
@media (prefers-reduced-motion:reduce){.flash{animation:none;box-shadow:0 0 0 5px var(--yellow)}}
.copies legend{padding:0;margin-bottom:10px;font:400 1.25rem/1.2 var(--display);letter-spacing:.01em;color:var(--ink)}
.copies .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.copy{display:grid;gap:4px;justify-items:start;align-content:start;padding:16px 18px;border:2px solid var(--line);border-radius:var(--r-small);background:var(--surface);cursor:pointer;position:relative}
.copy:hover{border-color:var(--muted)}
.copy:has(input:checked){border-color:var(--pick);box-shadow:inset 0 0 0 1.5px var(--pick)}
.copy:has(input:focus-visible){outline:3px solid var(--pick);outline-offset:3px}
.copy input{position:absolute;opacity:0;width:1px;height:1px}
.copy b{color:var(--ink)}
.copy .cost{font:400 1.5rem/1.2 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.copy .save{font-size:.85rem;font-weight:800;color:var(--good)}
.copies .hint{margin-top:10px;font-size:.92rem;color:var(--muted)}
.copy .sub{font-size:.88rem;color:var(--muted);line-height:1.35}
.speed .row{grid-template-columns:repeat(2,1fr)}

/* the add-ons: next-book price, bonus pages, more photos, the next book */
.deal{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-small);background:var(--green-soft);color:var(--ink);font-size:.98rem}
.deal .ic{color:var(--good);margin-top:.15em}
.perk{display:flex;gap:10px;align-items:flex-start;font-size:.96rem}
.perk .ic{color:var(--purple-ink);margin-top:.18em}
.was-price{font:600 1rem/1 "Figtree",sans-serif;color:var(--muted);text-decoration-thickness:2px;vertical-align:middle}
#moreBox .thumbs{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));margin-top:0}
#moreBox .thumbs:empty{display:none}
#moreChoose{cursor:pointer}
#moreChoose:has(input:focus-visible){outline:3px solid var(--pick);outline-offset:3px}
.panel.again{border-color:transparent;background:var(--purple-soft)}
.panel.again .btn .ic{color:var(--purple-ink)}
@media (max-width:560px){.speed .row{grid-template-columns:1fr}}

/* where the printed book is */
.track{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.track li{display:grid;gap:10px;justify-items:start;padding-top:14px;border-top:6px solid var(--line);color:var(--muted);font-weight:700;font-size:.95rem}
.track li .ic{font-size:1.4rem}
.track li.done{border-color:var(--green);color:var(--ink)}
.track li.now{border-color:var(--blue);color:var(--pick)}
.mailto{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;overflow-wrap:anywhere}
.mailto .ic{color:var(--pick);margin-top:.2em}
.buy{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
.buy .plan{display:flex;flex-direction:column;gap:18px;padding:36px;border-radius:var(--r-card);background:var(--surface);border:2px solid transparent;box-shadow:0 10px 28px rgba(70,45,30,.08)}
.buy .plan.key{border:3px solid var(--accent);box-shadow:var(--shadow)}
.buy .plan h3{font-size:1.7rem}
.buy .plan .tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 15px;border-radius:999px;background:var(--yellow);color:var(--ink);font:800 .88rem/1 "Figtree",sans-serif}
.buy .plan:nth-child(2) .tag{background:var(--green)}
.buy .plan .soon{margin-top:auto;font-weight:600;color:var(--ink)}
.buy .plan .big{font:400 clamp(3rem,5vw,4rem)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.buy .plan .big small{display:block;font:600 1rem/1.4 "Figtree",sans-serif;color:var(--muted);letter-spacing:0;margin-top:8px}
.buy .plan .ticks{grid-template-columns:1fr;margin:0}
.buy .plan .btn{margin-top:auto;align-self:flex-start}
.buy + .hint{margin-top:20px;color:var(--body);font-size:.95rem;text-align:center}

/* the owner's numbers */
.owner h1{font-size:clamp(2.2rem,4vw,3rem)}
.numbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:30px}
.period{min-width:0}
.period{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.period.now{border:3px solid var(--accent)}
.period h2{font-size:1.4rem;margin-bottom:10px}
.period dl{margin:0;display:grid;gap:4px}
.period dl div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.period dt{color:var(--body)}
.period dd{margin:0;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.period dl .big dt{font-weight:800;color:var(--ink)}
.period dl .big dd{font:400 1.35rem/1.1 var(--display);color:var(--accent-ink)}
.period .rates{font-size:.88rem;margin-top:10px;color:var(--muted)}
.period .rates b{color:var(--ink)}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.owner .panel h2{font-size:1.5rem}
.owner .panel h3{font-size:1.1rem;margin-top:14px}
.scroll{overflow-x:auto}
.owner table{width:100%;border-collapse:collapse;font-size:.93rem;font-variant-numeric:tabular-nums}
.owner th{text-align:left;font-weight:800;color:var(--ink);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
.owner td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.owner .funnel th[colspan]{text-align:center;border-bottom:1px solid var(--line)}
.owner .funnel td:not(:first-child),.owner .funnel thead tr:last-child th{text-align:center}
.owner .funnel td:nth-child(2n+1):not(:first-child),.owner .funnel thead tr:last-child th:nth-child(2n){color:var(--pick)}
.owner td a{max-width:220px;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.bars{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.bars li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;background:var(--blue-soft);border-radius:10px}
.bars li:nth-child(2n){background:var(--yellow-soft)}
.bars li span{min-width:0;overflow-wrap:anywhere}
.bars b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:900px){.twin{grid-template-columns:1fr}}

.prose{padding:24px 0 72px}
.prose h2{font-size:1.6rem;margin-top:36px}
.prose p,.prose li{margin-top:12px;max-width:68ch}
.done{text-align:left}

@media (max-width:900px){
  .hero{padding:16px 0 28px}
  .hero .wrap,.examples,.price{grid-template-columns:1fr;gap:20px}
  .hero-card{padding:30px 24px;border-radius:var(--r-card)}
  .hero .show{order:-1}                          /* on a phone the picture comes first, like the ad they tapped */
  .hero .show .tabs{display:none}                /* the picture plays through every example by itself */
  .compare{min-height:0;aspect-ratio:1;border-radius:var(--r-card);flex:none}
  .sticker.s2{left:-8px}.sticker.s3{right:-8px}.sticker.s1{right:20px}
  .band.soft{margin:0 8px;border-radius:var(--r-card)}
  footer{border-radius:var(--r-card) var(--r-card) 0 0}
  .steps{grid-template-columns:1fr;gap:38px}
  .buy{grid-template-columns:1fr}
  .buy .plan{padding:26px}
  .buy .plan .btn{align-self:stretch}
  .track{grid-template-columns:1fr 1fr;gap:16px 10px}
  .copies .row{gap:8px}
  .copy{padding:12px}
  .copy .cost{font-size:1.2rem}
  .option{grid-template-columns:auto 1fr;padding:16px}
  .option .cost{grid-column:2}
  .hero-card p{font-size:1.1rem;margin:16px 0 24px}
  .band{padding:60px 0}
  .bento{grid-template-columns:1fr}
  .cell.wide{grid-column:auto}
  .cell{min-height:0}
  .cell.pic{flex-direction:column;align-items:flex-start}
  .ticks{grid-template-columns:1fr}
  .price{padding:28px}
  .nav nav a.hide{display:none}
  .sheet,.panel{padding:22px}
  .wrap{padding:0 16px}
  .pair{padding:24px 22px 20px}
  .pair .photo{left:14px;bottom:88px}
  .actions .btn,.cta .btn{width:100%}
  .ribbon{font-size:.9rem}
  .nav .wrap{height:70px;gap:8px}
  .brand{font-size:1.3rem;gap:6px}
  .brand img{width:62px}
  .nav .btn.small{padding:0 14px;font-size:.98rem;min-height:42px}
  footer .wrap{flex-direction:column;align-items:flex-start}
  .perks ul{grid-template-columns:1fr 1fr;gap:10px}
  .perks li{padding:12px 14px;font-size:.9rem}
  .howto{grid-template-columns:1fr;gap:32px}
  .love{grid-template-columns:1fr 1fr;gap:14px}
  .love .card{padding:18px 16px}
  .love h3{font-size:1.25rem}
  .love p{font-size:.93rem}
  .together{grid-template-columns:1fr;border-radius:var(--r-card)}
  .together img{max-height:320px}
  .together .words{padding:30px 24px}
  .peek{grid-template-columns:1fr;gap:36px}
  .finale-card{padding:44px 20px;border-radius:var(--r-card)}
  .floatcta{left:16px;right:88px;transform:none;justify-content:center;padding:0 18px}
  /* while the floating button shows, Need Help shrinks to its icon so the two fit side by side */
  body:has(.floatcta[hidden]) .help{display:none}   /* home page on a phone: keep the first screen clear; it returns with the floating button */
  body:has(.floatcta:not([hidden])) .help{padding:0;width:54px;justify-content:center;font-size:0;gap:0}
  body:has(.floatcta:not([hidden])) .help .ic{color:var(--coral);font-size:1.4rem;width:1.4rem;height:1.4rem}
  .bgrid{grid-template-columns:1fr;gap:28px}
  .live{position:static;order:-1}
  .mock{max-width:220px}
  .mtitle{font-size:1.25rem}
  .mded{font-size:.85rem}
  .swatch-row{grid-template-columns:1fr 1fr}
  .bnav .btn{min-height:48px;padding:0 20px}
  /* final step on a phone: Back + the big button only; the step label would push the button off the screen */
  .builder[data-step="2"] .bstepno{display:none}
  .bnav .wrap{gap:10px}
  .bnav #go{flex:1 1 auto;min-width:0;justify-content:center;padding:0 14px;white-space:nowrap}
  .bnav #back{flex:none}
  .bstepno{font-size:.85rem}
  .tabs{gap:6px}
  .tab{padding:0 12px;font-size:.88rem}
}
@media (max-width:420px){.love{grid-template-columns:1fr}}

/* the photo step: the low-effort line, and a tile for an iPhone photo the browser cannot show */
.easy{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;padding:12px 16px;border-radius:var(--r-small);background:var(--green-soft);color:var(--ink);font-size:1rem}
.easy .ic{color:var(--good);margin-top:.15em}
.thumbs .nothumb{display:grid;place-items:center;width:100%;height:100%;background:var(--blue-soft);color:var(--ink);font-weight:800;font-size:.9rem}

/* the builder on a phone: Choose Photos is the first thing on the screen and the email step stays short; the big cover
   preview shows on the cover step only (with their first photo on it), and the floating help button stays out of the way */
@media (max-width:900px){
  .builder[data-step="1"] .live{display:none}
  body:has(.builder) .help{display:none}
}

.freepages{margin-top:18px}
/* the Unlock bar on the bottom of the screen */
.unlockbar{position:fixed;left:0;right:0;bottom:0;z-index:28;display:flex;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(70,45,30,.1)}
.unlockbar{gap:10px}
.unlockbar .btn{flex:1;max-width:260px;flex-direction:column;gap:0;min-height:58px;padding:6px 12px;line-height:1.15}
.unlockbar .btn b{font:400 1.3rem/1.1 var(--display)}
.unlockbar .btn span{font:700 .82rem/1.2 "Figtree",sans-serif}
.unlockbar .btn:not(.primary){background:#fff;border-color:var(--accent);color:var(--accent)}
body:has(.unlockbar:not([hidden])) .help{display:none}
body:has(.unlockbar:not([hidden])) main{padding-bottom:100px}   /* the bar never covers the last lines */
@media (max-width:900px){body:has(#unlock:not([hidden])) .help{display:none}}   /* never on top of the Unlock button; Help stays in the footer */
/* free pages on a phone: side by side, so both are seen at once without scrolling */
@media (max-width:640px){
  .freepages{grid-template-columns:1fr 1fr;gap:10px}
  .freepages .tile{border-radius:var(--r-small)}
  .freepages .tile .body{padding:10px;gap:6px}
  .freepages .tile .body > b{font-size:.92rem}
  .freepages .tile .btn.small{min-height:40px;padding:0 8px;font-size:.78rem;width:100%;white-space:normal;line-height:1.15}
  .freepages .tile .hint{font-size:.72rem}
  .freepages .tile .art .was{width:34%;left:6px;bottom:6px;border-width:2px;border-radius:8px}
  .freepages .tile .flag{font-size:.75rem}
}

/* pay-first book page: what a page looks like, when there are no free pages to judge by */
.examples{margin:16px 0 4px}
.examples .extitle{margin:0 0 8px;font-weight:800;color:var(--ink)}
.examples .expair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.examples .expair img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line, #e6e1d8);background:#fff}
.examples .exnote{margin:4px 0 0;font-size:.92rem;color:var(--soft, #5f636b)}

/* reviews (from reviews.json): a quote card next to the buttons and the price, the way product pages show one */
.reviews ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.reviews blockquote{position:relative;margin:0;padding:16px 18px 16px 52px;border-radius:16px;background:var(--purple-soft);border:1.5px solid #e3d9f3}
.reviews .qm{position:absolute;left:14px;top:4px;font-family:var(--display);font-size:3rem;line-height:1;color:var(--purple-ink)}
.reviews blockquote p{margin:0;font-size:1.05rem;line-height:1.5;font-weight:600;color:var(--ink)}
.reviews cite{display:block;margin-top:6px;font-style:normal;font-weight:800;font-size:.95rem;color:var(--purple-ink)}
.reviews .rvtitle{margin:0 0 12px;font-family:var(--display);font-size:1.6rem;color:var(--ink)}
.reviews.hero-rv{margin-top:20px;max-width:520px}
.reviews.price-rv{max-width:640px;margin:0 auto 28px}
.reviews.price-rv ul{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.reviews.inbook{margin:6px 0 14px}
.reviews.inbook blockquote{background:#fff}

/* the product page (/book) */
.product{padding-top:28px;padding-bottom:90px}
.pgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start}
.gallery{position:sticky;top:96px}
.gmain{position:relative;border-radius:var(--r-panel);overflow:hidden;background:#fff;box-shadow:var(--shadow);aspect-ratio:1}
.gmain>img{display:block;width:100%;height:100%;object-fit:cover}
.gfrom{position:absolute;left:16px;bottom:16px;margin:0;width:30%;max-width:170px;background:#fff;padding:6px 6px 4px;border-radius:14px;box-shadow:0 8px 22px rgba(43,42,48,.18);transform:rotate(-3deg)}
.gfrom img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:9px}
.gfrom figcaption{font-size:.78rem;font-weight:700;color:var(--muted);text-align:center;padding-top:4px}
.gtag{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:700;color:var(--muted)}
.gthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.gthumb{padding:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;aspect-ratio:1}
.gthumb img{display:block;width:100%;height:100%;object-fit:cover}
.gthumb{touch-action:manipulation;transition:border-color .15s}
.gthumb:hover{border-color:var(--ink)}
.gthumb[aria-pressed=true]{border-color:var(--accent)}
.fmt:hover{border-color:var(--ink)}
.product{scroll-padding-bottom:90px}
.gthumb:focus-visible{outline:3px solid var(--pick);outline-offset:2px}
.pinfo .kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:800;color:var(--purple-ink)}
.pinfo h1{font-size:clamp(2.1rem,3.6vw,3.1rem)}
.pfrom{margin:14px 0 0;font-size:1.05rem;color:var(--muted)}
.pfrom b{font:400 2.4rem/1 var(--display);color:var(--ink);margin-right:6px}
.plead{margin:14px 0 18px;font-size:1.08rem;line-height:1.55}
.reviews.inproduct{margin:0 0 20px}
.formats{border:0;padding:0;margin:0 0 18px;display:grid;gap:12px}
.formats legend{font:400 1.35rem/1 var(--display);color:var(--ink);margin-bottom:10px;text-transform:uppercase}
.fmt{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:start;padding:16px 18px 16px 52px;border:2px solid var(--line);border-radius:var(--r-card);background:var(--surface);cursor:pointer}
.fmt input{position:absolute;left:18px;top:20px;width:20px;height:20px;accent-color:var(--pick);margin:0}
.fmt .what b{display:block;font:400 1.25rem/1.15 var(--display);color:var(--ink)}
.fmt .what span{display:block;margin-top:4px;font-size:.95rem;line-height:1.45;color:var(--muted)}
.fmt .cost{font:400 1.5rem/1 var(--display);color:var(--ink)}
.fmt:has(input:checked){border-color:var(--pick);box-shadow:0 0 0 1px var(--pick)}
.pgo{width:100%}
.pnext{margin:10px 0 18px;text-align:center;font-size:.92rem;color:var(--muted)}
.pticks{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.pticks li{display:flex;gap:10px;align-items:flex-start}
.pticks .ic{flex:none;margin-top:3px;color:var(--good, #3f8f4f)}
.pfaq details{border-top:1.5px solid var(--line);padding:12px 0}
.pfaq summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;font-weight:800;color:var(--ink);list-style:none}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq details[open] summary .ic{transform:rotate(180deg)}
.pfaq p{margin:8px 0 0;line-height:1.5}
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1.5px solid var(--line);box-shadow:0 -8px 24px rgba(43,42,48,.08)}
.pbar b{font:400 1.5rem/1 var(--display);color:var(--ink)}
.pbar small{display:block;font-size:.8rem;color:var(--muted)}
@media (max-width:900px){
  .pgrid{grid-template-columns:1fr;gap:22px}
  .gallery{position:static}
  .product{padding-top:14px}
}

/* embedded checkout: Whop's form inside the book page, nearly full screen on a phone */
dialog.paybox{width:min(560px,calc(100vw - 16px));max-height:calc(100dvh - 16px);display:none;flex-direction:column}
dialog.paybox[open]{display:flex}
.payhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px 24px}
.payhead h2{font-size:1.25rem;display:flex;align-items:center;gap:8px;margin:0}
.payx{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.payx:hover{background:rgba(0,0,0,.06)}
.payx:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.paymount{overflow-y:auto;padding:0 8px 16px;min-height:120px}
.paywait{padding:0 24px 24px;margin:0}
.paywait[hidden]{display:none}

/* checkout on the book page, laid out like the builder: the order and its upgrades on the left, the summary and the
   pay button on the right */
.checkout{margin-top:36px}
.cogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.comain{display:grid;gap:18px;min-width:0}
.comain h2{font-size:clamp(2rem,3.6vw,2.7rem)}
.comain .sub{font-size:1.1rem;margin:0}
.colabel{font-weight:800;color:var(--ink);margin:0}
.coup{display:grid;gap:14px}
.upgrade{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:18px 20px;border:2px solid var(--line);border-radius:var(--r-small);background:var(--surface);cursor:pointer}
.upgrade:hover{border-color:var(--muted)}
.upgrade:has(input:checked){border-color:var(--pick);box-shadow:inset 0 0 0 1.5px var(--pick)}
.upgrade:has(input:focus-visible){outline:3px solid var(--pick);outline-offset:3px}
.upgrade input{accent-color:var(--pick);width:22px;height:22px;margin:2px 0 0}
.upgrade .what{display:grid;gap:4px;min-width:0}
.upgrade .what b{color:var(--ink);font:400 1.25rem/1.25 var(--display);letter-spacing:.01em}
.upgrade .what span{font-size:.95rem}
.upgrade .cost{font:400 1.4rem/1.2 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.osum{position:sticky;top:100px;display:grid;gap:10px}
.oscard{border:1.5px solid var(--line);border-radius:var(--r-card);padding:24px;display:grid;gap:16px;background:var(--surface);box-shadow:var(--shadow)}
.oshead{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.oshead b{display:block;color:var(--ink);font:400 1.35rem/1.2 var(--display);overflow-wrap:anywhere}
.oshead span{font-size:.95rem;color:var(--muted)}
.mock.mini{width:92px;max-width:none;border-radius:7px;padding:8px;gap:6px;box-shadow:0 6px 14px rgba(60,40,30,.2)}
.mock.mini .mtitle{font-size:.68rem;line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mock.mini .mart{border-radius:4px;background:#fff}
.mock.mini .mart img{object-fit:contain}
.oslines{margin:0;display:grid;gap:14px;padding:16px 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.osline{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.osline dt{display:grid;gap:2px;min-width:0}
.osline dt span{font-weight:700;color:var(--ink)}
.osline dt small{font-size:.86rem;color:var(--muted);line-height:1.35}
.osline dd{margin:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.osline.free dd{color:var(--good)}
.ostotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ostotal span{font-weight:800;color:var(--ink);font-size:1.05rem}
.ostotal b{font:400 2rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.oscard .btn.primary{width:100%;justify-content:center}
.ossafe{display:flex;gap:8px;align-items:center;justify-content:center;margin:0;font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.cogrid{grid-template-columns:1fr;gap:28px}.osum{position:static}}
.coex{margin-top:40px;display:grid;gap:12px}
.coexrow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.coex .expair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.coex .expair img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#fff}
.coex .exnote{margin:0;font-size:.92rem;color:var(--muted)}
@media (max-width:640px){.coexrow{grid-template-columns:1fr}}
@media (max-width:560px){.upgrade .cost{grid-column:2}}
/* phones: the free page, then straight to the order summary and Pay; upgrades and reviews follow */
@media (max-width:900px){
  .checkout{margin-top:20px}
  .cogrid{display:flex;flex-direction:column;gap:16px}
  .comain{display:contents}
  .comain > *{order:5}
  #unlockTitle{order:1}
  #unlockLine{order:2}
  #dealNote{order:3}
  .osum{order:4}
}

/* a closed book: the cover with the spine's shadow on the left, page edges on the right and bottom, a soft shadow */
.book3d{position:relative;display:block;transform:perspective(900px) rotateY(-13deg) rotateX(2deg);transform-origin:30% 50%}
.book3d .bpages{position:absolute;top:2.5%;bottom:-2.2%;left:6%;right:-4.5%;border-radius:0 6px 6px 0;
  background:repeating-linear-gradient(90deg,#fbf8f1 0 2px,#e3dccd 2px 3px);box-shadow:0 12px 22px rgba(60,40,30,.2)}
.book3d > img,.book3d > .mock{position:relative;display:block;border-radius:3px 8px 8px 3px;box-shadow:0 18px 32px rgba(60,40,30,.3)}
.book3d::after{content:"";position:absolute;top:0;bottom:0;left:0;width:9%;border-radius:3px 0 0 3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.07) 55%,rgba(255,255,255,.24) 68%,rgba(0,0,0,0))}
.book3d.mini{width:100px;flex:none}
.book3d.mini > img{width:100%;height:auto}
.book3d.big{width:100%;max-width:380px}
.book3d.big > .mock{width:100%;max-width:none}
.book3d .mart:has(img){background:transparent}
.book3d .mart img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:none;border:4px solid #fff;border-radius:10px}
@media (max-width:900px){.book3d.big{max-width:220px}}
@media (prefers-reduced-motion:reduce){.book3d{transform:none}}

/* the printed book leads; "Want it now?" is the instant download, one tap below the main button */
.btn.wantnow{width:100%;justify-content:center;flex-wrap:wrap;gap:4px 8px;background:var(--surface);color:var(--ink);border:2px solid var(--line);box-shadow:none;font-family:inherit;font-weight:600}
.btn.wantnow b{font-weight:800}
.btn.wantnow:hover{border-color:var(--ink)}
.btn.wantnow[hidden]{display:none}

/* the arrival date by the price, "shipping included" under printed prices, the promise under Pay */
.parrive{display:flex;align-items:center;gap:8px;margin:-4px 0 0;font-size:1rem;color:var(--body)}
.parrive .ic{color:var(--good);font-size:1.15rem}
.parrive b{color:var(--ink)}
.fmt .cost small{display:block;font:600 .78rem/1.2 "Figtree",sans-serif;color:var(--good);text-align:right;margin-top:2px}
.promise{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:.98rem;color:var(--ink)}
.promise .ic{color:var(--accent)}
.oscard .btn{white-space:normal;text-align:center;line-height:1.2;min-height:56px;height:auto;padding-top:12px;padding-bottom:12px}

/* the book page, laid out like the best stores in this category: rating line, price, choice, one quote, a trust strip,
   then how it works, the drag-to-compare examples, extra copies, questions, a last push, reviews and the sign-up */
.rvsum{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--body);font-size:.95rem;text-decoration:none}
.rvsum:hover{color:var(--ink)}
.rvsum b{color:var(--ink)}
.stars{display:inline-flex;gap:2px;color:#f2a516}
.stars .ic{width:1.05em;height:1.05em}
.pquote{margin:20px 0 0;padding:16px 18px;border-left:4px solid #f2a516;border-radius:0 var(--r-card) var(--r-card) 0;background:var(--yellow-soft)}
.pquote p{margin:6px 0 8px;font-style:italic;color:var(--ink)}
.pquote cite{font:700 .82rem/1 "Figtree",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--body);font-style:normal}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 0;padding:0}
.trust li{display:inline-flex;align-items:center;gap:7px;font:700 .82rem/1.2 "Figtree",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.trust .ic{width:1.15em;height:1.15em;color:var(--coral)}
.trust li:nth-child(2) .ic{color:var(--pick)}
.trust li:nth-child(3) .ic{color:var(--good)}
.transform .show{max-width:560px;margin:28px auto 0}
.transform .tabs{justify-content:center}
.transform .compare{min-height:0;aspect-ratio:1}
/* "Better Together" on the book page. Scoped to that section: the checkout has its own .copies and .copy (the How Many
   Copies? choice), and these rules once leaked onto it and squeezed its boxes. */
#together .copies{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:32px}
#together .copy{display:grid;justify-items:center;gap:6px;text-align:center;padding:28px 20px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow)}
#together .copy.alt{background:var(--yellow-soft);box-shadow:none;border:2px dashed #e7c46a}
#together .copy .ci{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:var(--accent);color:#fff}
#together .copy.alt .ci{background:var(--pick)}
#together .copy .ci .ic{width:26px;height:26px}
#together .copy h3{margin:4px 0 0}
#together .copy p{margin:0;color:var(--body);font-size:.95rem}
#together .copy b{font:400 2rem/1.1 var(--display);color:var(--ink)}
#together .copies .plus{font:400 2.2rem/1 var(--display);color:var(--body)}
.copyticks{list-style:none;display:grid;gap:10px;max-width:460px;margin:26px auto 0;padding:0}
.copyticks li{display:flex;gap:10px;align-items:center}
.copyticks .ic{color:var(--good);flex:none}
.rvgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:32px 0 0;padding:0}
.rvgrid li{display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow)}
.rvgrid p{margin:0;color:var(--ink)}
.rvgrid cite{display:flex;align-items:center;gap:10px;font:700 .95rem/1 "Figtree",sans-serif;font-style:normal;color:var(--ink)}
.rvgrid .av{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--purple-soft,#efe9fb);color:var(--purple-ink);font-weight:800}
.club{text-align:center}
.clubform{display:grid;gap:8px;max-width:460px;margin:22px auto 0;text-align:left}
.clubform label{font-weight:700;color:var(--ink)}
.clubrow{display:flex;gap:10px}
.clubrow input{flex:1;min-width:0;min-height:52px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);font:inherit}
.clubrow input:focus{outline:3px solid var(--pick);outline-offset:2px;border-color:var(--pick)}
.clubmsg{min-height:1.4em;margin:2px 0 0;font-size:.95rem}
.clubmsg.good{color:var(--good)}.clubmsg.bad{color:#b3261e}
@media (max-width:720px){
  #together .copies{grid-template-columns:1fr}
  #together .copies .plus{justify-self:center}
  .clubrow{flex-direction:column}
  .clubrow .btn{width:100%}
}
.rvmore{margin:10px 0 0;font-weight:700}
.rvmore .ic{width:1em;height:1em}
.reviews.price-rv .rvmore{display:flex;justify-content:center}
.started{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:.95rem;color:var(--body)}
.started b{color:var(--ink)}
.started .ic{width:1.15em;height:1.15em;color:var(--purple-ink)}
.reviews .started{margin:6px 0 0}
.reviews.price-rv .started{justify-content:center}
.rvsum{flex-wrap:wrap}
.rvmore .ic{vertical-align:-2px}
.started .ic{flex:none}
.reviews p.started{font-size:.95rem;line-height:1.4}

/* the promise, shown before people pick their photos */
.bpromise{display:flex;gap:14px;align-items:center;margin:4px 0 18px;padding:16px 18px;border-radius:var(--r-card);background:var(--yellow-soft);border:2px solid #e7c46a}
.bpromise .ic{flex:none;width:38px;height:38px;color:var(--good)}
.bpromise b{display:block;font:400 1.45rem/1.15 var(--display);color:var(--ink)}
.bpromise span{display:block;margin-top:4px;color:var(--body);font-size:.95rem}

/* a dated sale on the printed book: the regular price crossed out, and when it ends */
s.was{margin-left:8px;font:600 .5em/1 "Figtree",sans-serif;color:var(--muted);text-decoration-thickness:2px;vertical-align:middle}
.cost s.was{display:block;margin:2px 0 0;font-size:.8em}
.salechip{display:inline-block;margin:10px 0 0;padding:4px 12px;border-radius:999px;background:#fde7e3;color:#a3261c;font:800 .82rem/1.3 "Figtree",sans-serif;letter-spacing:.02em}
.pfrom s.was{margin:0 8px 0 0;font-size:1.25rem}
.salechip{width:fit-content;justify-self:start;align-self:flex-start}

/* a warm line at each step: works for a child, a pet, a gift or for yourself */
.feel{display:flex;align-items:center;gap:8px;margin:10px 0 16px;font-weight:700;font-style:italic;color:var(--accent-ink,#a8402f)}
.feel .ic{flex:none;width:1.05em;height:1.05em;color:var(--coral)}
.cofeel{margin:0 0 18px;padding:18px 20px;border-radius:var(--r-card);background:var(--yellow-soft)}
.cofeel-big{margin:0 0 6px;font:400 clamp(1.5rem,4vw,2rem)/1.15 var(--display);color:var(--ink);text-wrap:balance}
.cofeel p:last-child{margin:0;color:var(--body)}
.feel{align-items:flex-start}
.feel .ic{margin-top:.22em}
.smallbiz{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-weight:700;color:var(--good)}
.smallbiz .ic{flex:none;width:1.2em;height:1.2em}
.pmsg{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;padding:14px 16px;border-radius:var(--r-card);background:var(--yellow-soft);font-weight:700;color:var(--ink);min-height:3.4em}
.pmsg .ic{flex:none;width:1.3em;height:1.3em;margin-top:.1em;color:var(--good)}
#progressMsgText{transition:opacity .25s}
#progressMsgText.fade{opacity:0}
@media (prefers-reduced-motion:reduce){#progressMsgText{transition:none}}

/* ------------------------------------------------------------------------------------------------------------------
   2026-10-05: the site redrawn to feel like a real shop. One accent color for every headline word, real-life
   photos (the hero, the three steps, the coloring-together panel), wavy edges on the color panels, a quiet strip
   of promises, review cards, and the cover style from book.py on the builder's live cover.
   ------------------------------------------------------------------------------------------------------------------ */
.c-blue,.c-purple,.c-green,.c-orange{color:var(--coral)}
.rainbow{height:5px}
.band.blush{background:var(--tint)}
.head .kicker,.peek .kicker{margin-bottom:12px}

/* hero: the words on a soft panel, a real-life photo beside them */
.hero .wrap{grid-template-columns:1fr 1.06fr}
.hero-card .kicker{margin:0 0 16px;font-size:.86rem;color:var(--accent-ink)}
.hero-photo{position:relative;margin:0;min-height:520px;border-radius:var(--r-panel);overflow:hidden;background:var(--tint);box-shadow:var(--shadow)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hero-chip{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;color:var(--ink);
  font:700 .9rem/1 "Figtree",sans-serif;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.hero-chip .ic{color:var(--coral);width:1.15em;height:1.15em}

/* stars, the reviewers' initials and the books-started count, under the main buttons */
.rating{display:flex;align-items:center;gap:14px;margin-top:28px;color:var(--body);text-decoration:none;font-size:.95rem;line-height:1.35}
.rating:hover .rline{color:var(--ink)}
.avs{display:flex;flex:none}
.av{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:#d9695c;color:#fff;font:800 .95rem/1 "Figtree",sans-serif}
.avs .av{box-sizing:content-box;border:3px solid var(--red-soft);margin-left:-11px}
.avs .av:first-child{margin-left:0}
.av.a1{background:#d9695c}.av.a2{background:#d98a3d}.av.a3{background:#5d9e52}.av.a4{background:#3f8fc4}.av.a5{background:#8a6cc2}.av.a6{background:#c84a3c}
.rt{display:grid;gap:2px;min-width:0}
.rline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rline b,.rsub b{color:var(--ink)}
.rsub{color:var(--muted)}

/* the strip of promises: one quiet row with hairlines, not four colored boxes */
.perks{padding:4px 0 6px}
.perks ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.perks ul li,.perks ul li:nth-child(n){background:none;border-radius:0;padding:18px 22px;border-left:1.5px solid var(--line)}
.perks ul li:first-child{border-left:0;padding-left:2px}
.perks ul .ic{color:var(--coral)}

/* the three steps: every number in the accent color, with a white ring so it reads on any photo */
.howto .num,.howto li:nth-child(2) .num,.howto li:nth-child(3) .num{box-sizing:content-box;border:3px solid #fff;background:var(--accent);box-shadow:0 6px 14px rgba(200,74,60,.28)}
.howto figure{box-shadow:0 14px 34px rgba(70,45,30,.12)}

/* the example covers stand as little books */
.love .book3d{width:62%;margin:16px auto 14px}
.love .book3d img,.love .card:nth-child(even) .book3d img{width:100%;margin:0;transform:none;border-radius:3px 8px 8px 3px;box-shadow:0 18px 32px rgba(60,40,30,.3)}

/* wavy edges: where a color panel meets a photo, and above and below the last call to action */
.wave{display:block;position:absolute;pointer-events:none}
.together .words{position:relative}
.together .wave{fill:var(--pick)}
.together .wave.side{left:-27px;top:0;width:28px;height:100%}
.together .wave.top{display:none;left:0;top:-17px;width:100%;height:18px}

/* what you can count on: three even cards */
.chipic{display:grid;place-items:center;width:54px;height:54px;border-radius:999px;background:var(--tint);color:var(--accent-ink);margin-bottom:8px}
.cell .chipic .ic{font-size:1.6rem;color:inherit;margin:0}
#promise .cell{border-color:transparent;box-shadow:0 10px 26px rgba(70,45,30,.07);min-height:0}

/* review cards */
.rvgrid{display:flex;flex-wrap:wrap;justify-content:center}
.rvgrid li{flex:1 1 300px;max-width:380px;border:1.5px solid var(--line);box-shadow:0 10px 26px rgba(70,45,30,.07)}
.rvgrid p{font-size:1.04rem;line-height:1.55}
.rvgrid .av{width:36px;height:36px;color:#fff}

/* questions: one calm color for every arrow */
.faq summary .ic,.faq details:nth-child(n) summary .ic{background:var(--tint);color:var(--accent-ink)}

/* the last call to action: a full band of the accent color between two waves */
.finale{position:relative;padding:0;margin:66px 0 62px;background:var(--accent)}
.finale .wave.edge{left:0;width:100%;height:22px;fill:var(--accent)}
.finale .wave.up{top:-21px}
.finale .wave.down{bottom:-21px}
.finale-card{background:none;border-radius:0;padding:70px 24px 76px;overflow:visible}
.finale-card::before{display:none}
.finale-card .kicker,.finale-card h2,.finale-card p{color:#fff}
.finale-card .btn{border-color:#fff}
.finale-card .btn:hover{border-color:var(--ink)}
.finale :focus-visible{outline-color:#fff}

/* the builder's live cover, in the style of the real cover: sheen, a flat shadow under the title, the tagline, the seal */
.mock{gap:3.2%;background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.13) 40% 54%,transparent 54% 63%,rgba(255,255,255,.09) 63% 68%,transparent 68%),
  radial-gradient(110% 80% at 50% 38%,rgba(255,255,255,.14),rgba(0,0,0,.13)),var(--cover)}
.book3d > .mock{display:flex}                         /* it was laid out as a plain block, so the picture area never filled the cover */
.mtitle{text-shadow:.045em .045em 0 var(--coverUnder,rgba(0,0,0,.3))}
.mtag{display:flex;align-items:center;justify-content:center;gap:.7em;margin:-1.2% 0 0;font:800 clamp(.4rem,.85vw,.6rem)/1 "Figtree",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;color:var(--coverTag,#ffeea8)}
.mtag .ic{width:1em;height:1em}
.mfoot{display:grid;grid-template-columns:13% 1fr 13%;align-items:center;gap:2%}
.mfoot .mded{grid-column:2}
.mseal{grid-column:3;width:100%;height:auto;border-radius:50%;transform:rotate(-9deg);box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* the book page's gallery now holds five pictures */
.gthumbs{grid-template-columns:repeat(5,1fr);gap:8px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .hero-photo{order:-1;min-height:0;aspect-ratio:1;border-radius:var(--r-card)}   /* on a phone the picture comes first, like the ad they tapped */
  .hero-chip{left:12px;bottom:12px;font-size:.82rem;padding:8px 13px}
  .rating{margin-top:22px;gap:8px 12px;flex-wrap:wrap}
  .rating .rt{flex:1 1 100%}
  .perks ul{grid-auto-flow:row;grid-template-columns:1fr 1fr;border:0;gap:2px 10px}
  .perks ul li,.perks ul li:nth-child(n){border:0;padding:10px 4px}
  .love .book3d{width:74%}
  .love .card{gap:8px}
  .together .wave.side{display:none}
  .together .wave.top{display:block}
  .finale{margin:50px 0 46px}
  .finale-card{padding:52px 8px 58px}
  .rvgrid li{max-width:none}
  .mtag{font-size:.42rem}
}
@media (max-width:420px){.love .book3d{width:56%}}

/* 2026-10-05: the home page's top photo vanished on iPhones. Safari gives a grid item that has an aspect-ratio and only an
   absolutely placed child no width at all (Chrome stretches it), so the figure was 0 by 0. The figure now always takes
   the full column, and on phones the photo is a plain picture in the flow, which needs no aspect-ratio support. */
.hero-photo{width:100%;justify-self:stretch}
@media (max-width:900px){
  .hero .hero-photo{aspect-ratio:auto;min-height:0}
  .hero .hero-photo img{position:static;display:block;width:100%;height:auto}
}
/* phones: the tilted sheets behind the flip-through page poked 1px past the right edge in Safari, which let the whole
   page slide sideways a hair. A little narrower, and they stay inside. */
@media (max-width:900px){
  .sheetstack{width:calc(100% - 20px)}
}
/* narrow phones (360px Androids, small iPhones): the name in the header ran under the Make My Book button. The logo,
   the name and the button all get a little smaller so they sit side by side. */
@media (max-width:380px){
  .brand{font-size:1.14rem;gap:5px}
  .brand img{width:52px}
  .nav .btn.small{padding:0 12px;font-size:.92rem}
}
@media (max-width:340px){
  .brand{font-size:1rem}
  .brand img{width:44px}
  .nav .btn.small{padding:0 10px;font-size:.86rem}
}

/* 2026-10-05: what you get, in big words at the Pay button and in the payment box; ready answers on the Help page */
.osget{margin:0;padding:14px 16px;border-radius:var(--r-small);background:var(--yellow-soft);border:2px dashed var(--yellow);color:var(--ink);font:400 1.45rem/1.2 var(--display);letter-spacing:.01em;text-align:center;text-wrap:balance}
/* "Want more pages? Add more photos" before payment: a tappable dashed box under the what-you-get line, and a button in the unlock box */
.grow{display:flex;gap:12px;align-items:center;margin:0;padding:14px 16px;border-radius:var(--r-small);background:var(--blue-soft);border:2px dashed var(--pick);color:var(--ink);cursor:pointer}
.grow .ic{color:var(--pick);font-size:1.6rem;flex:none}
.grow b{display:block;font:400 1.2rem/1.2 var(--display);letter-spacing:.01em}
.grow small{display:block;font-size:.9rem;color:var(--muted);margin-top:2px}
.grow:hover{background:#fff}
.growlink{width:100%;margin-top:2px;white-space:normal;text-align:center;padding:10px 14px}
.payget{margin:0 16px 10px;padding:10px 14px;border-radius:var(--r-small);background:var(--yellow-soft);color:var(--ink);font:400 1.2rem/1.25 var(--display);letter-spacing:.01em;text-align:center;text-wrap:balance}
.helph{margin-top:44px;font-size:1.7rem}
.faq.answers{margin-top:18px}
.faq.answers summary{font-size:1.18rem;padding:15px 18px}
.faq.answers p{padding:0 18px 18px}
.autoanswer{margin-top:18px;padding:16px 18px;border-radius:var(--r-input);background:var(--green-soft);display:grid;gap:6px}
.autoanswer[hidden]{display:none}
.autoanswer .aa-top{display:flex;align-items:center;gap:8px;color:var(--ink)}
.autoanswer .aa-q{font:400 1.2rem/1.25 var(--display);color:var(--ink)}
.autoanswer .hint{font-size:.9rem;color:var(--muted)}
.done .autoanswer{margin-top:20px}

/* 2026-10-05: "print your pages as many times as you want", in plain sight wherever the download is offered */
.reprint{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:700}
.reprint .ic{color:var(--good);flex:none}
.option .what .reprint{font-size:1rem}
.btn.wantnow small.reprint{flex-basis:100%;justify-content:center;font-size:.95rem;line-height:1.3}
.perk.reprint{align-items:flex-start;font-weight:400}
.perk.reprint .ic{margin-top:.18em}
.osget small{display:block;margin-top:6px;font:700 1rem/1.3 "Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0;color:var(--ink)}
.payget small{display:block;margin-top:2px;font:700 .95rem/1.3 "Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0}
.reprint-say{display:block;margin-top:4px;color:var(--ink);font-weight:700}
.ticks li b{color:var(--ink)}

/* ---- Flipbook Preview v1 (docs/flipbook_v1_implementation.md): ONE physical book. Closed, it sits on the book page.
   Opened (.reading), it fills the screen over everything else and its leaves turn on the spine (rotateY around the
   left edge). --pw / --ph (one page) are set by flipbook.js so the book always fits. Without the script (.js missing)
   the pages stack down the page. Class is .fbook, not .flip: the home page owns .flip. */
.fbook{--fpaper:#fffdf8;--turn:.78s;margin:10px auto 36px;max-width:620px;text-align:center;scroll-margin-top:84px}
.fbook[hidden]{display:none}
.flipeyebrow{margin:0 0 4px;color:var(--muted);font-size:.98rem;font-weight:600}
.fbook h2{font-size:clamp(1.7rem,6vw,2.3rem);margin:0;text-wrap:balance}
.flipsub{margin:6px 0 0;color:var(--body)}
.bkbar{display:none}
.fopen{margin-top:22px;min-width:240px}
.fbook:not(.js) .fopen{display:none}
/* no script: every page, one under the other */
.fbook:not(.js) .bkfaces{display:grid;gap:18px;margin-top:18px}
.fbook:not(.js) .bkface{position:relative;max-width:420px;margin:0 auto;aspect-ratio:2550/3300;width:100%}
.fbook:not(.js) .bkface[hidden]{display:none}
.fbook.js .bkfaces{display:none}

/* the book */
.bkdesk{position:relative;margin:22px auto 0;display:flex;justify-content:center;perspective:2200px;perspective-origin:50% 40%}
.bkbook{position:relative;width:calc(var(--pw,290px) * var(--cols,1));height:var(--ph,375px);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.3,.1,.2,1);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.fbook.bkspread .bkbook{--cols:2}
.fbook.bkspread .bkbook.closed{transform:translateX(calc(var(--pw) * -.5))}   /* closed: the cover sits in the middle */
.fbook:not(.reading) .bkbook{cursor:pointer}
.bkleaf{position:absolute;top:0;left:0;width:var(--pw,290px);height:100%;transform-origin:left center;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transform:rotateY(0deg) translateZ(var(--zu,0px));will-change:transform;
  transition:transform var(--turn) cubic-bezier(.35,.08,.22,1),opacity 0s,visibility 0s}
.fbook.bkspread .bkleaf{left:var(--pw)}
.bkleaf.turned{transform:rotateY(-180deg) translateZ(var(--zt,0px))}   /* --zu/--zt: each leaf's own depth, so the stack draws in the right order */
/* one page at a time: a turned leaf swings off to the left and then steps out of the way */
.fbook.bksingle .bkleaf.turned{opacity:0;visibility:hidden;transition:transform var(--turn) cubic-bezier(.35,.08,.22,1),opacity .2s calc(var(--turn) - .22s),visibility 0s var(--turn)}
.bkleaf.dragging{transition:none!important;opacity:1!important;visibility:visible!important}
.bkside{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px 12px 12px 3px;overflow:hidden;
  background:var(--fpaper);box-shadow:0 1px 2px rgba(70,45,30,.12),0 18px 40px rgba(70,45,30,.20)}
.bkside.front{transform:rotateY(0deg) translateZ(.3px)}
.bkside.back{visibility:hidden}.bkleaf.showback .bkside.back{visibility:visible}.bkleaf.showback .bkside.front{visibility:hidden}   /* the script picks the side, so browsers that flatten 3D still show the right one */
.bkside.back{transform:rotateY(180deg) translateZ(.3px);border-radius:12px 3px 3px 12px}   /* both sides placed in 3D, or WebKit shows the back through the front */
.bkside::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(80,55,35,.16),rgba(80,55,35,.04) 5%,transparent 11%)}            /* the gutter by the spine */
.bkside.back::before{background:linear-gradient(270deg,rgba(80,55,35,.16),rgba(80,55,35,.04) 5%,transparent 11%)}
.bkside.coverside{border-radius:4px 12px 12px 4px}
.bkside.coverside::before{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.18) 2.2%,rgba(0,0,0,.08) 4%,transparent 9%)}   /* the cover's hinge */
.bkside::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:var(--shade,0);background:linear-gradient(270deg,rgba(40,25,15,.9),transparent 70%)}
.bkleaf.turning .bkside::after{animation:bkshade var(--turn) ease}
@keyframes bkshade{0%{opacity:0}45%{opacity:.22}100%{opacity:0}}
/* the paper edges of the pages still to come, on the right; and of the pages read, on the left of an open spread */
.bkbook::after{content:"";position:absolute;top:1.2%;bottom:1.2%;right:-7px;width:7px;border-radius:0 5px 5px 0;transform:translateZ(-2px);
  background:repeating-linear-gradient(90deg,#efe5d3 0 1px,#fffaf0 1px 2.4px);box-shadow:2px 10px 18px rgba(70,45,30,.16)}
.fbook.bkspread .bkbook:not(.closed)::before{content:"";position:absolute;top:1.2%;bottom:1.2%;left:-7px;width:7px;border-radius:5px 0 0 5px;transform:translateZ(-2px);
  background:repeating-linear-gradient(90deg,#fffaf0 0 1.4px,#efe5d3 1.4px 2.4px)}
.fbook.flat .bkleaf.turned{display:none}

/* what is printed on the pages: sizes follow the page itself */
.bkface{position:absolute;inset:0;container-type:size;background:var(--fpaper);color:var(--ink)}
.bkbook img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.bkface[hidden]{display:none}
.bkcover{background:#e9eef5}
.bkcoverbtn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.bkcoverbtn img{width:100%;height:100%;object-fit:cover;display:block}
.bkcoverbtn:focus-visible{outline:3px solid var(--pick);outline-offset:-3px}
.bkpad{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;gap:2.4cqh;padding:22px 20px;padding:9cqh 9cqw}
.bkded .fdedi{font-family:var(--display);font-size:1.6rem;font-size:8.4cqw;line-height:1.25;margin:0;overflow-wrap:anywhere;max-height:70%;max-height:70cqh;overflow:hidden}
.bkded .fdedi.soft{color:var(--muted)}
.bkorn{color:var(--coral);font-size:1.1rem;font-size:5cqw;opacity:.8}
.bkart{position:absolute;inset:4%;inset:4.5cqh 5cqw 10cqh;display:flex;align-items:center;justify-content:center}
.bkart img{width:100%;height:100%;object-fit:contain;display:block}
.bkcap{position:absolute;left:0;right:0;bottom:3%;bottom:3.4cqh;margin:0;font-size:.82rem;font-size:3.4cqw;color:var(--muted)}
.bkcap[hidden]{display:none}
.bkretry{position:absolute;left:50%;bottom:16%;transform:translateX(-50%)}
.fwait{display:grid;gap:12px;justify-items:center;padding:16px;color:var(--body);font-size:1rem;font-size:4.2cqw}
.fwait b{font-weight:700;color:var(--ink);max-width:24ch}
.fspin{width:34px;height:34px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--coral)}
@media (prefers-reduced-motion:no-preference){.fspin{animation:fspin 1s linear infinite}}
@keyframes fspin{to{transform:rotate(360deg)}}
.bkmem{justify-content:flex-start;gap:6px;gap:1.6cqh;padding-top:8cqh}
.bkmem h3,.bkbuy h3{font-family:var(--display);font-size:1.35rem;font-size:7cqw;line-height:1.1;margin:0;text-wrap:balance}
.bkmem p,.bkbuy > p{margin:0;font-size:.9rem;font-size:3.8cqw;line-height:1.4;color:var(--body)}
.fcount{display:inline-block;padding:4px 12px;padding:1cqh 3.4cqw;border:2px dashed var(--blue);border-radius:999px;background:var(--blue-soft);font-weight:800;color:var(--ink)!important}
.fthumbs{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;gap:2.6cqw;width:100%}
.fthumb{position:relative;aspect-ratio:2550/3300;background:#fff;border-radius:3px 6px 6px 3px;box-shadow:0 3px 8px rgba(70,45,30,.16);padding:7%;transform:rotate(var(--tilt,0deg))}
.fthumb:nth-child(3n+1){--tilt:-1.6deg}.fthumb:nth-child(3n+2){--tilt:1deg}.fthumb:nth-child(3n){--tilt:-.6deg}
.fthumb img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block}
.fthumb .fx{position:absolute;top:-10px;right:-10px;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;z-index:2}
.fthumb .fx:focus-visible{outline:3px solid var(--pick)}
.bkthanks img{width:42cqw;height:auto}
.bkthanks p{font-family:var(--display);font-size:1.2rem;font-size:6cqw;line-height:1.3;margin:0;color:var(--ink)}
.bkbuy{gap:6px;gap:1.5cqh;padding:7cqh 8cqw}
.bkbuy .btn{width:100%;margin:0;white-space:normal;text-align:center}
.bkbuy .fbig{min-height:50px;min-height:max(46px,10cqh);font-size:1rem;font-size:4.4cqw}
.fsmall{margin:0;font-size:.82rem;font-size:3.3cqw;color:var(--body)}
.fsmall[hidden],.fpick[hidden]{display:none}
.btn.linkish{background:none;border-color:transparent;box-shadow:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px;min-height:44px;font-weight:700}
.btn.linkish:hover{border-color:transparent;transform:none;color:var(--accent-ink)}
.btn.linkish.primary{text-decoration:none;color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.bkbuy #flipPdf{font-size:.95rem;font-size:4cqw;min-height:40px}
.fpick{padding:6px 10px;border-radius:12px;background:var(--yellow-soft);width:100%}
.fpick p{margin:0 0 2px;font-weight:700;font-size:.82rem;font-size:3.3cqw}
.fsafe{display:flex;gap:6px;justify-content:center;align-items:center;font-size:.8rem;font-size:3.2cqw;color:var(--body);margin:0}
.fsafe .ic{width:1.1em;height:1.1em}
.bklinks{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px}
.bklinks .btn{width:auto;min-height:40px;font-size:.88rem;font-size:3.5cqw;padding:0 10px}
.bklinks .fsecond{border-color:var(--pick);color:var(--pick)}
.bkblank{background:var(--fpaper)}

/* reading: the book alone, filling the screen */
html.bkreading,html.bkreading body{overflow:hidden;overscroll-behavior:none}
.fbook.reading{position:fixed;inset:0;z-index:50;margin:0;max-width:none;display:grid;grid-template-rows:auto 1fr auto;align-items:center;
  background:radial-gradient(120% 90% at 50% 38%,#fff 0%,var(--orange-soft) 55%,#f6e6d8 100%);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.fbook.reading .bkintro,.fbook.reading .fopen{display:none}
.fbook.reading .bkbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px}
.fbook.reading .bkdesk{margin:0;align-self:center}
.fbook.reading .bkbook{touch-action:none}
.bkclose,.bkclose-twin{width:48px;height:48px;flex:none}
.bkclose{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.bkclose .ic{width:22px;height:22px}
.bkclose:focus-visible{outline:3px solid var(--pick);outline-offset:2px}
.fwhere{font-weight:700;color:var(--muted);font-size:.98rem;font-variant-numeric:tabular-nums}
.bkbottom{max-width:620px;width:100%;margin:0 auto}
.btn.fnav{min-height:56px;min-width:128px;padding:0 18px}
.btn.fnav[hidden]{visibility:hidden;display:inline-flex}
.btn.fnav .ic{width:22px;height:22px}
.fbook.still{--turn:.01s}
.fbook.still .bkleaf.turning .bkside::after{animation:none}
@media (max-width:380px){.btn.fnav{min-width:108px}}
.picklist{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:46vh;overflow-y:auto}
.pickone{display:grid;gap:4px;justify-items:center;padding:8px;border:2px solid var(--line);border-radius:var(--r-input);cursor:pointer;font-size:.9rem;font-weight:600}
.pickone:has(input:checked){border-color:var(--pick);background:var(--blue-soft)}
.pickone input{width:22px;height:22px;accent-color:var(--pick);margin:0}
.pickone img{width:72px;height:72px;object-fit:cover;border-radius:8px}
#pickBox{padding:22px 18px}
#abandon textarea{width:100%}
#videoBox video{width:100%;border-radius:var(--r-small);background:#000;margin-top:8px}

/* the optional second page: a question first, drawn only when they tap */
.bkask{gap:12px;gap:3cqh}
.bkask h3{font-family:var(--display);font-size:1.4rem;font-size:7.6cqw;line-height:1.15;margin:0;text-wrap:balance}
.bkask .btn{min-height:48px;font-size:1rem;font-size:4.4cqw;padding:0 22px}
.bkart[hidden]{display:none}
/* where you are in the book: small dots, nothing that reads like a step counter */
.fwhere{display:flex;gap:7px;align-items:center;justify-content:center}
.fdot{width:7px;height:7px;border-radius:50%;background:rgba(43,42,48,.22);transition:background .25s,transform .25s}
.fdot.on{background:var(--coral);transform:scale(1.25)}
.fincl{font-weight:800;color:var(--ink)!important;font-size:.9rem;font-size:3.7cqw}
#flipPrintSub[hidden]{display:none}

/* the memories page: a stack of book pages, page 1 on top, a tabbed sheet behind it for each page still to come */
.bkmem{gap:4px;gap:1.3cqh;padding:7cqh 7cqw 6cqh}
.bkmem h3{font-size:1.45rem;font-size:7.6cqw;line-height:1.05}
.fstack{position:relative;width:40cqw;aspect-ratio:2550/3300;margin:calc(2cqh + 9cqw) auto 1.4cqh;transform:translateX(-6cqw)}   /* room above for the sheets behind */
.fsheet{position:absolute;inset:0;background:#fff;border:1px solid #efe6d6;border-radius:2px 6px 6px 2px;
  box-shadow:0 1px 2px rgba(70,45,30,.10),0 6px 14px rgba(70,45,30,.10);
  transform:translate(calc(var(--i,0) * 2.1cqw),calc(var(--i,0) * -1.3cqw)) rotate(calc(var(--i,0) * .7deg))}
.ftab{position:absolute;right:-13cqw;top:calc(4% + var(--i,1) * 12.5%);width:14cqw;height:10cqw;padding:2px;background:#fff;
  border:1px solid #efe6d6;border-left:0;border-radius:0 6px 6px 0;box-shadow:2px 2px 6px rgba(70,45,30,.14);display:flex;align-items:center;justify-content:center}
.ftab img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block}
.ftabmore{font:800 .8rem/1 "Figtree",sans-serif;font-size:3.4cqw;color:var(--pick)}
.fsheet.ftop{z-index:2;padding:5%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(70,45,30,.14),0 12px 24px rgba(70,45,30,.18)}
.fsheet.ftop img{width:100%;height:100%;object-fit:contain;display:block}
.fsheet.ftop .fspin{width:22px;height:22px;border-width:3px}
.bkmem .fcount{margin-top:2px;letter-spacing:.04em;font-size:.82rem;font-size:3.5cqw;padding:5px 12px}
#flipRestHead span{display:block}
#flipRestHead small{display:block;margin-top:.35em;font-size:.56em;line-height:1.15;color:var(--body);letter-spacing:.01em}

/* the first page's loading percentage */
.fmeter{display:grid;gap:6px;justify-items:center;width:62%;margin:0 auto}
.fpct{font:800 1.1rem/1 "Figtree",sans-serif;font-size:5.2cqw;color:var(--coral);font-variant-numeric:tabular-nums}
.fbar{display:block;width:100%;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.fbar i{display:block;height:100%;background:var(--coral);transform-origin:left center;transform:scaleX(0);transition:transform .4s linear}
.ftop .fmeter{position:absolute;left:12%;right:12%;width:auto;top:58%}
.ftop .fpct{font-size:4cqw}
.oswho{margin:6px 0 0;font-size:.85rem;color:var(--muted);text-align:center}
.oswho a{color:inherit}
.fwho{margin:0;font-size:.72rem;font-size:3cqw;color:var(--muted)}