/* The home page, tuckjoy.com itself: the second landing-page prototype (design/landing-v2 on
   branch claude/landing-page-prototype-a307ec, Anurag 2026-09-26). Its stylesheet, scoped to
   .home so it can't reach the header and footer the other pages share, with these changes:

   - Its colours and fonts are the site's own (design.css): the prototype copied them from there.
     Three tokens it added are defined below.
   - Its inline styles are classes: the CSP drops inline styles without a word.
   - Anything that starts hidden and waits for the script to reveal it (.rv, .stagger, the steps
     of how-it-works, the moving shelf) is hidden only under .home.js, which public/site.js sets
     after revealing what is already on screen. With no script the page reads in full. */

:root { --ease: cubic-bezier(.22,1,.36,1); --slab-muted: #A7B1B2;
  --shadow-float: 0 18px 48px rgba(28,36,38,.12), 0 2px 6px rgba(28,36,38,.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow-float: 0 18px 48px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); }
}
:root[data-theme="dark"] { --shadow-float: 0 18px 48px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); }

body[data-page="home"] { font-size: 17px; line-height: 1.55; overflow-x: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- the shared header, as the prototype draws it (the markup is layout.mjs's) ---- */

/* the bar's colours are toolbar.css's (the dark bar); the home page keeps its stacking and type */
body[data-page="home"] .topbar { z-index: 50; }
body[data-page="home"] .sitenav a { font-size: .95rem; }
/* A phone: this rule is more specific than the toolbar's own phone size (toolbar.css), so it must give
   way here, or "New book" stays 130 px wide beside 40 px controls. */
.home #progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--spark)); z-index: 60; transition: width .1s linear; }

/* ---- the prototype ---- */

/* ---------- base ---------- */
.home *, .home *::before, .home *::after{box-sizing:border-box}
.home img{display:block; max-width:100%; height:auto}
.home a{color:inherit}
.home h1, .home h2, .home h3{font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.05; margin:0}
.home h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.home h3{font-size:1.25rem; line-height:1.2}
.home p{margin:0}
.home button{font:inherit; color:inherit}
.home .wrap{width:min(1180px, 100% - 32px); margin-inline:auto; position:relative; z-index:1}
.home section{position:relative; z-index:1}
.home .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.home .eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); border-radius:2px}
.home .lead{font-size:1.15rem; color:var(--muted); max-width:56ch}
.home .sec-head{max-width:760px; margin-bottom:2.6rem}
.home .sec-head h2{margin:.7rem 0 .9rem}
.home .center{text-align:center; margin-inline:auto}
.home .center .eyebrow::before{display:none}
/* buttons */
/* buttons: the one button (design.css); .arr is the arrow some of them carry */
.home .arr{display:inline-flex; align-items:center; justify-content:center; width:1.1em; height:1.1em; flex:none}
.home .arr svg{width:100%; height:100%; display:block}
/* ---------- reveal on scroll ---------- */
.home.js .rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.home.js .rv.in{opacity:1; transform:none}
.home.js .stagger>*{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.home.js .stagger.in>*{opacity:1; transform:none}
.home .stagger.in>*:nth-child(2){transition-delay:.08s}
.home .stagger.in>*:nth-child(3){transition-delay:.16s}
.home .stagger.in>*:nth-child(4){transition-delay:.24s}
.home .stagger.in>*:nth-child(5){transition-delay:.32s}
.home .stagger.in>*:nth-child(6){transition-delay:.4s}
.home .stagger.in>*:nth-child(7){transition-delay:.48s}
.home .stagger.in>*:nth-child(8){transition-delay:.56s}
.home .stagger.in>*:nth-child(9){transition-delay:.64s}
/* ---------- hero ---------- */
.home .hero{padding:clamp(3rem,7vw,6rem) 0 clamp(1.5rem,3vw,2.5rem); overflow:hidden}
.home .hero .wrap{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.home .blooms{position:absolute; inset:-20% -10% auto; height:120%; pointer-events:none; z-index:0; filter:blur(60px); opacity:.9}
.home .blooms i{position:absolute; border-radius:50%; animation:drift 18s ease-in-out infinite alternate}
.home .blooms i:nth-child(1){width:46vw; height:46vw; left:-8vw; top:6vh; background:var(--bloom-peach)}
.home .blooms i:nth-child(2){width:40vw; height:40vw; right:-6vw; top:-4vh; background:var(--bloom-mint); animation-delay:-6s}
.home .blooms i:nth-child(3){width:34vw; height:34vw; left:36vw; bottom:-10vh; background:var(--bloom-cream); animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,3vh) scale(1.08)}}
.home .hero h1{font-size:clamp(2.7rem,6.2vw,5.1rem); font-weight:600; letter-spacing:-.025em; line-height:.98; margin:1rem 0 1.3rem}
.home .hero h1 .w{display:inline-block; opacity:0; transform:translateY(.6em) rotate(2deg); animation:wordIn .9s var(--ease) forwards}
@keyframes wordIn{from{opacity:0; transform:translateY(.15em) rotate(1deg)} to{opacity:1; transform:none}}
.home .rot{display:inline-grid; justify-items:start; vertical-align:baseline; color:var(--accent); font-style:italic; font-weight:500; position:relative}
.home .rot span{grid-area:1/1; position:relative; white-space:nowrap; opacity:0; transform:translateY(110%); transition:transform .7s var(--ease), opacity .5s}
.home .rot span.on{opacity:1; transform:none}
.home .rot span.out{opacity:0; transform:translateY(-110%)}
.home .rot span::after{content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.1em; background:var(--spark); border-radius:4px; transform:scaleX(0); transform-origin:left}
.home .rot span.on::after{animation:ul 4s var(--ease) forwards}
@keyframes ul{0%{transform:scaleX(0)}25%{transform:scaleX(1)}85%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}
.home .hero .lead{margin-bottom:2rem; font-size:1.2rem}
.home .cta-row{display:flex; gap:.9rem; flex-wrap:wrap; align-items:center}
.home .trust{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.8rem; padding:0; list-style:none; color:var(--muted); font-size:.92rem}
.home .trust li{display:flex; align-items:center; gap:.45rem}
.home .trust svg{width:16px; height:16px; color:var(--accent)}
.home .picturebook-way{margin:1.1rem 0 0; font-size:1rem; font-weight:600}
.home .picturebook-way a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:.35rem}
.home .picturebook-way .arr svg{width:16px; height:16px}
/* the stage: a live book page that keeps one face */
.home .stage{position:relative; aspect-ratio:1/1.02; z-index:1}
.home .stage .page{position:absolute; inset:6% 4% 6% 10%; border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-book); transform:rotate(-1.5deg); transition:transform 1.2s var(--ease)}
.home .stage:hover .page{transform:rotate(0) scale(1.01)}
.home .stage .page img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1.1s var(--ease), transform 6s linear}
.home .stage .page img.on{opacity:1; transform:scale(1)}
.home .stage .cap{position:absolute; left:0; right:0; bottom:0; padding:2.4rem 1.4rem 1.2rem 38%; background:linear-gradient(transparent, rgba(20,25,26,.78)); color:#fff; font-family:var(--display); font-size:1.05rem; line-height:1.3}
.home .stage .cap small{display:block; font-family:var(--body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin-bottom:.25rem}
.home .stage .cap b{display:block; font-weight:500; opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s}
.home .stage .cap b.on{opacity:1; transform:none}
.home .dots{position:absolute; top:14px; right:14px; display:flex; gap:5px}
.home .dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); transition:width .4s var(--ease), background .3s}
.home .dots i.on{width:18px; background:#fff}
.home .sheet{position:absolute; left:-2%; bottom:-2%; width:34%; border-radius:16px; background:var(--surface); padding:8px 8px 10px; box-shadow:var(--shadow-float); transform:rotate(3deg); animation:float 6s ease-in-out infinite; z-index:3}
.home .sheet img{border-radius:10px; width:100%}
.home .sheet figcaption{font-size:.74rem; text-align:center; color:var(--muted); margin-top:.45rem; font-weight:600}
.home .sheet figcaption b{display:block; color:var(--ink); font-family:var(--display); font-size:.95rem; font-weight:600}
@keyframes float{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-10px)}}
.home .tag{position:absolute; display:inline-flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.5rem .9rem .5rem .6rem; font-size:.85rem; font-weight:600; box-shadow:var(--shadow-float); z-index:3; animation:float 7s ease-in-out infinite}
.home .tag .av{width:26px; height:26px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--surface)}
.home .tag .av+.av{margin-left:-14px}
.home .tag.t1{top:-2%; right:0; animation-delay:-2s}
.home .spark{position:absolute; width:14px; height:14px; color:var(--spark); z-index:4; animation:twinkle 3s ease-in-out infinite}
.home .spark.s1{top:4%; left:2%; animation-delay:-1s}
.home .spark.s2{top:14%; right:16%; width:10px; animation-delay:-2s}
.home .spark.s3{bottom:12%; right:8%; width:18px}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0); opacity:.5}50%{transform:scale(1.15) rotate(25deg); opacity:1}}
.home .honest{margin-top:1.4rem; font-size:.85rem; color:var(--faint); text-align:left; max-width:34rem}
@media (max-width:900px){
.home .hero .wrap{grid-template-columns:1fr}
.home .stage{max-width:520px; margin:1rem auto 0; width:100%}
.home .stage .page{inset:6% 4%}
.home .tag.t1{left:0; right:0; width:max-content; max-width:100%; margin-inline:auto}
.home .sheet{width:30%; left:0}
.home .stage .cap{padding-left:36%; font-size:.95rem}
.home .tag{font-size:.78rem}
}
/* ---------- shelf marquee ---------- */
.home .shelf{padding:1.5rem 0 2rem; overflow:hidden}
.home .shelf .head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.4rem}
.home .shelf .head p{color:var(--muted); font-size:.95rem}
.home .shelf .head p a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.home .marquee{display:flex; gap:1.2rem; width:max-content; padding:1rem 0 1rem max(16px, calc((100vw - 1180px) / 2))}
.home.js .marquee{animation:marquee 60s linear infinite}
.home .shelf:hover .marquee{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.home .spread{text-decoration:none; color:inherit; width:min(420px,78vw); flex:none; border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-float); transition:transform .5s var(--ease)}
.home .spread:hover{transform:translateY(-6px) rotate(-.5deg)}
.home .spread img{aspect-ratio:1536/780; width:100%; object-fit:cover}
.home .spread .txt{padding:.9rem 1.1rem 1rem; display:grid; gap:.25rem}
.home .spread .txt b{font-family:var(--display); font-weight:600; font-size:.95rem}
.home .spread .txt span{font-size:.86rem; color:var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.home .spread .txt em{font-style:normal; font-size:.72rem; color:var(--faint); letter-spacing:.06em; text-transform:uppercase}
/* ---------- cast: interactive ---------- */
.home .cast{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.home .cast-grid{display:grid; grid-template-columns:340px 1fr; gap:2.5rem; align-items:start}
.home .chips{display:flex; flex-wrap:wrap; gap:.55rem; margin:1.6rem 0 2rem}
.home .chip{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .9rem .35rem .35rem; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-weight:600; font-size:.9rem; transition:transform .3s var(--ease), border-color .2s, box-shadow .3s}
.home .chip img{width:30px; height:30px; border-radius:50%; object-fit:cover}
.home .chip:hover{transform:translateY(-2px); border-color:var(--accent-lift)}
.home .chip[aria-pressed="true"]{border-color:var(--accent); box-shadow:var(--ring); background:var(--accent-tint)}
.home .card-sheet{position:sticky; top:96px; background:var(--surface); border-radius:22px; padding:14px; box-shadow:var(--shadow-book); perspective:1200px}
.home .card-sheet .flip{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4; background:#fff}
.home .card-sheet .flip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:rotateY(70deg) scale(.96); transition:opacity .5s var(--ease), transform .7s var(--ease)}
.home .card-sheet .flip img.on{opacity:1; transform:none}
.home .card-sheet .who{padding:1rem .4rem .3rem}
.home .card-sheet .who b{font-family:var(--display); font-size:1.5rem; font-weight:600; display:block}
.home .card-sheet .who span{color:var(--muted); font-size:.95rem}
.home .card-sheet .who small{display:block; margin-top:.6rem; font-size:.78rem; color:var(--accent); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.home .scenes{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem}
.home .scene{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1536/780; background:var(--sunk); transition:opacity .5s var(--ease), transform .6s var(--ease), filter .5s}
.home .scene img{width:100%; height:100%; object-fit:cover}
/* A real book's square page in a wide frame keeps this far down the picture (home.mjs PAGE). */
.home img.f30{object-position:50% 30%}
.home img.f35{object-position:50% 35%}
.home img.f45{object-position:50% 45%}
.home img.f55{object-position:50% 55%}
.home img.f70{object-position:50% 70%}
.home .scene span{position:absolute; left:.7rem; bottom:.6rem; color:#fff; font-size:.8rem; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.6)}
.home .scene.off{opacity:.18; filter:grayscale(1); transform:scale(.96)}
.home .scene.pop{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.home .cast-note{margin-top:1.4rem; color:var(--muted); font-size:.95rem}
@media (max-width:900px){
.home .cast-grid{grid-template-columns:1fr}
.home .card-sheet{position:static; max-width:360px}
.home .scenes{grid-template-columns:repeat(2,1fr)}
}
/* A phone: the full drawing filled the screen between the chips and the pages, so a tap seemed to
   do nothing. Here it is a small card beside who they are, and the pages below are only theirs,
   right under the chips (site.js marks the others .off). */
@media (max-width:640px){
.home .chips{margin:1.4rem 0 1rem}
.home .cast-grid{gap:1rem}
.home .card-sheet{display:grid; grid-template-columns:96px 1fr; align-items:center; gap:1rem; max-width:none; padding:10px; border-radius:18px}
.home .card-sheet .flip{border-radius:10px}
.home .card-sheet .who{padding:0}
.home .card-sheet .who b{font-size:1.25rem}
.home .card-sheet .who span{display:block; font-size:.9rem}
.home .card-sheet .who small{margin-top:.35rem}
.home .scene.off{display:none}
}
/* ---------- how it works: scrollytelling ---------- */
.home .how{padding:clamp(2.2rem,4.5vw,3.6rem) 0; background:linear-gradient(180deg, transparent, var(--sunk) 12%, var(--sunk) 88%, transparent)}
.home .how-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.home .steps{display:grid; gap:0; position:relative; padding-left:3.2rem}
.home .steps::before{content:""; position:absolute; left:19px; top:24px; bottom:24px; width:2px; background:var(--line-strong)}
.home .steps .fill{position:absolute; left:19px; top:24px; width:2px; height:0; background:var(--accent); transition:height .4s var(--ease)}
.home .step{padding:1.6rem 0; position:relative; transition:opacity .5s}
.home.js .step{opacity:.45}
.home.js .step.on{opacity:1}
.home .step .n{position:absolute; left:-3.2rem; top:1.45rem; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--line-strong); font-weight:700; font-family:var(--display); transition:background .4s, color .4s, border-color .4s, transform .4s var(--ease)}
.home .step.on .n{background:var(--accent); color:var(--on-accent); border-color:var(--accent); transform:scale(1.08)}
.home .step h3{margin-bottom:.4rem}
.home .step p{color:var(--muted); max-width:44ch}
.home .step small{display:block; margin-top:.5rem; font-size:.82rem; color:var(--accent); font-weight:600}
.home .visual{position:sticky; top:110px; aspect-ratio:1/1; border-radius:24px; background:var(--surface); box-shadow:var(--shadow-book); overflow:hidden}
.home .vis{position:absolute; inset:0; opacity:0; transform:translateY(24px) scale(.98); transition:opacity .7s var(--ease), transform .7s var(--ease); padding:1.6rem; display:grid; align-content:center; gap:1rem}
.home .vis.on{opacity:1; transform:none}
.home .vis .mock{border-radius:14px; background:var(--paper); border:1px solid var(--line); padding:1rem}
.home .vis .lbl{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600}
.home .three{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem}
.home .three figure{margin:0; border-radius:10px; overflow:hidden; border:2px solid transparent; position:relative}
.home .three figure img{aspect-ratio:3/4; object-fit:cover; width:100%}
.home .three figure.pick{border-color:var(--accent)}
.home .three figure.slot{aspect-ratio:3/4; border:2px dashed var(--line-strong); background:var(--paper); display:grid; place-items:center; color:var(--faint); font-size:.8rem; font-weight:600}
.home .three figure.pick::after{content:"✓ keep this one"; position:absolute; left:50%; bottom:6px; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; padding:.2rem .5rem; border-radius:999px; white-space:nowrap}
/* How it works, Step 1: the main character in every style, the one picked labelled with its name (from config) */
.home .three.four{grid-template-columns:repeat(4,1fr); gap:.55rem}
.home .three.four figure.slot{text-align:center; padding:.4rem; hyphens:auto; line-height:1.3}
/* a phone: small enough that the longest style name (Watercolour) fits its box whole */
@media (max-width:480px){.home .three.four{gap:.4rem} .home .three.four figure.slot{padding:.15rem; font-size:.6rem}}
.home .three.four figure.pick::after,.home .three.one figure.pick::after{content:"✓ " attr(data-label); font-size:.62rem}
/* One style on offer: its picture alone, the width of one of the four */
.home .three.one{grid-template-columns:minmax(0,10rem)}
.home .type{font-family:var(--display); font-size:1.15rem; line-height:1.4; min-height:4.2em}
.home .type::after{content:"|"; animation:blink 1s steps(1) infinite; color:var(--accent)}
@keyframes blink{50%{opacity:0}}
.home .spread2{display:grid; grid-template-columns:1fr 1fr; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#fff; color:#1C2426}
.home .spread2 img{height:100%; object-fit:cover; aspect-ratio:1/1}
.home .spread2 p{padding:1.2rem; font-family:var(--display); font-size:.95rem; line-height:1.5; align-self:center}
.home .book3d{margin:0 auto; width:62%; aspect-ratio:1/1; position:relative; transform-style:preserve-3d; transform:rotateY(-22deg) rotateX(6deg); animation:bookTurn 6s ease-in-out infinite alternate}
@keyframes bookTurn{from{transform:rotateY(-28deg) rotateX(6deg)}to{transform:rotateY(-10deg) rotateX(4deg)}}
.home .book3d img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:4px 10px 10px 4px; box-shadow:var(--shadow-book)}
.home .book3d::before{content:""; position:absolute; top:2%; bottom:2%; left:-16px; width:18px; background:linear-gradient(90deg,#d8cfbf,#f2ebdd); transform:rotateY(-90deg) translateX(-9px); transform-origin:right; border-radius:2px}
.home .book3d::after{content:""; position:absolute; inset:0; border-radius:4px 10px 10px 4px; background:linear-gradient(100deg, rgba(255,255,255,.25), transparent 40%)}
.home .files{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}
.home .files span{font-size:.8rem; font-weight:600; padding:.35rem .7rem; border-radius:999px; background:var(--accent-tint); color:var(--accent)}
@media (max-width:900px){
.home .how-grid{grid-template-columns:1fr}
.home .visual{position:relative; top:0; margin-bottom:1.5rem; max-width:520px}
.home.js .steps .step{opacity:1}
.home .steps .step .n{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
}
/* ---------- what you can make: tilt cards ---------- */
.home .make{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.home .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.home .tilt{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/4.6; background:var(--slab); color:#fff; text-decoration:none; transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s var(--ease); box-shadow:var(--shadow-rest)}
.home .tilt:hover{box-shadow:var(--shadow-book)}
.home .tilt img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.home .tilt:hover img{transform:scale(1.06)}
.home .tilt .txt{position:absolute; left:0; right:0; bottom:0; padding:1.4rem; background:linear-gradient(transparent, rgba(15,20,22,.85) 60%)}
.home .tilt .txt b{font-family:var(--display); font-size:1.4rem; font-weight:600; display:block; margin-bottom:.3rem}
.home .tilt .txt span{font-size:.92rem; opacity:.85; line-height:1.4; display:block}
.home .tilt .txt i{font-style:normal; display:inline-block; margin-top:.7rem; font-size:.82rem; font-weight:700; color:var(--accent-lift); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s var(--ease)}
.home .tilt:hover .txt i{opacity:1; transform:none}
.home .tilt .glow{position:absolute; inset:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 45%); opacity:0; transition:opacity .4s; pointer-events:none}
.home .tilt:hover .glow{opacity:1}
@media (max-width:900px){
.home .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.home .cards{grid-template-columns:1fr}
.home .tilt{aspect-ratio:4/3}
}
/* ---------- promise grid + styles ---------- */
.home .promise{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.home .feat{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.home .feat article{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.5rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s}
.home .feat article:hover{transform:translateY(-4px); box-shadow:var(--shadow-float); border-color:var(--accent-lift)}
.home .feat .ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); margin-bottom:1rem}
.home .feat .ic svg{width:22px; height:22px}
.home .feat h3{margin-bottom:.4rem; font-size:1.15rem}
.home .feat p{color:var(--muted); font-size:.95rem}
.home .styles{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem}
.home .styles span{font-size:.78rem; font-weight:600; padding:.3rem .6rem; border-radius:999px; background:var(--sunk); border:1px solid var(--line)}
@media (max-width:900px){
.home .feat{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.home .feat{grid-template-columns:1fr}
}
/* ---------- why the name ---------- */
.home .name{padding:clamp(2.2rem,4.5vw,3.6rem) 0 0}
.home .name .sec-head h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.home .name .eyebrow{color:var(--gold-ink, #B8860B)}
.home .name .eyebrow::before{background:var(--gold-ink, #B8860B)}
.home .tucks{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.home .tucks article{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:2rem; transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.home .tucks article:hover{transform:translateY(-4px); box-shadow:var(--shadow-float)}
.home .tucks .num{width:44px; height:44px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; font-weight:700; font-family:var(--display); margin-bottom:1.4rem}
.home .tucks h3{font-size:1.7rem; margin-bottom:.7rem}
.home .tucks p{color:var(--muted); font-size:1.02rem; line-height:1.6}
.home .tucks p b{color:var(--ink)}
.home .tucks .pain{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .9rem; padding:0; list-style:none}
.home .tucks .pain li{font-size:.8rem; font-weight:600; padding:.3rem .65rem; border-radius:999px; background:var(--sunk); border:1px solid var(--line); color:var(--muted); text-decoration:line-through; text-decoration-color:var(--orange); text-decoration-thickness:2px}
.home .joy{margin-top:1.2rem; background:var(--accent); color:#fff; border-radius:20px; padding:2rem 2.2rem; display:flex; gap:2rem; align-items:center; justify-content:space-between; position:relative; overflow:hidden; box-shadow:0 20px 50px rgba(46,125,115,.3)}
.home .joy::after{content:""; position:absolute; width:40%; aspect-ratio:1; right:-10%; top:-60%; border-radius:50%; background:rgba(255,255,255,.14); filter:blur(30px); pointer-events:none}
.home .joy h3{font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.5rem; position:relative; z-index:1}
.home .joy p{position:relative; z-index:1}
.home .joy p{opacity:.9; max-width:60ch}
.home .joy .btn{flex:none; position:relative; z-index:1}
.home .joy .joyword{white-space:nowrap}
.home .joy .joymark{display:inline-block; width:1.15em; height:1.15em; vertical-align:-.18em; margin-left:.12em; transform-origin:50% 70%; animation:joyPop 3.2s var(--ease) infinite}
@keyframes joyPop{0%,70%,100%{transform:rotate(0) scale(1)}78%{transform:rotate(-10deg) scale(1.18)}88%{transform:rotate(6deg) scale(1.06)}}
.home .joy .joybig{position:absolute; right:29%; top:50%; width:clamp(90px,9vw,120px); height:auto; transform:translateY(-50%) rotate(-8deg); opacity:.22; pointer-events:none; animation:float 7s ease-in-out infinite}
@media (max-width:820px){
.home .joy .joybig{right:-6%; top:0; transform:none; width:120px; opacity:.14}
}
@media (max-width:820px){
.home .tucks{grid-template-columns:1fr}
.home .joy{flex-direction:column; align-items:flex-start}
}
/* ---------- pricing ---------- */
.home .pricing{padding:clamp(2.2rem,4.5vw,3.6rem) 0; position:relative}
.home .pricing .blooms{filter:blur(80px); opacity:.6; inset:0 auto auto; height:100%}
.home .pricing .sec-head, .home .pricing .sec-head .lead{max-width:none}
.home .pricing .sec-head h2{text-wrap:balance}
.home .tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; align-items:stretch}
/* The free card lies across the top, its ticks in two columns, so the four packs below get a
   readable width each and no card is stretched to another's height (Anurag 2026-10-12). */
.home .tier[data-free]{grid-column:1 / -1; grid-template-columns:minmax(13rem,1fr) minmax(0,2.4fr) minmax(12rem,auto); column-gap:2.2rem; align-items:start}
.home .tier[data-free] > *{grid-column:1}
.home .tier[data-free] ul{grid-column:2; grid-row:1 / span 4; grid-template-columns:1fr 1fr; gap:.6rem 1.6rem; margin:0; align-self:center}
.home .tier[data-free] .btn{grid-column:3; grid-row:1 / span 2; align-self:end; margin-top:0}
.home .tier[data-free] .tnote{grid-column:3; grid-row:3 / span 2; max-width:15rem}
.home .tier.best .price small{color:var(--slab-muted)}
.home .every{margin:1.4rem auto 0; text-align:center; color:var(--muted); font-size:.98rem}
.home .tier{position:relative; background:var(--surface); border:1.5px solid var(--line); border-radius:20px; padding:1.6rem 1.4rem 1.4rem; display:grid; align-content:start; gap:.6rem; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s}
.home .tier:hover{transform:translateY(-6px); box-shadow:var(--shadow-float)}
.home .tier.best{background:var(--slab); color:var(--on-slab); border-color:var(--slab)}
:root[data-theme="dark"] .tier.best{border-color:var(--accent)}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tier.best{border-color:var(--accent)}
}
.home .tier.best .muted, .home .tier.best li{color:var(--on-slab)}
.home .tier .tname svg{width:1.05em; height:1.05em; flex:none}
.home .tier.best .tname{display:inline-flex; align-items:center; gap:.45rem; justify-self:start; background:var(--spark); color:#1C2426; padding:.3rem .8rem; border-radius:999px; font-size:.8rem}
.home .tier .tnote{margin:0; font-size:.82rem; color:var(--muted)}
.home .tier .per{justify-self:center; margin:0; background:var(--accent-soft); color:var(--ink); font-size:.92rem; font-weight:500; padding:.3rem .9rem; border-radius:999px; white-space:nowrap}
.home .tier[data-free] .per{justify-self:start; color:var(--accent)}
.home .tier.best .per{background:var(--accent); color:#fff}
.home .assure{list-style:none; padding:0; margin:1.8rem auto 0; display:grid; grid-template-columns:repeat(3,auto); justify-content:center; gap:1rem 3rem}
.home .assure li{display:flex; gap:.9rem; align-items:center; max-width:24rem}
.home .assure li + li{border-left:1px solid var(--line); padding-left:3rem}
.home .assure svg{width:2.2rem; height:2.2rem; flex:none; color:var(--accent); stroke-width:1.6}
.home .assure b{display:block; font-size:.95rem}
.home .assure span{color:var(--muted); font-size:.9rem}
.home .tier .ribbon{position:absolute; top:-12px; left:1.2rem; background:var(--spark); color:#1C2426; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .7rem; border-radius:999px}
.home .tier .tname{font-weight:700; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.home .tier .price{font-family:var(--display); font-size:2.4rem; font-weight:600; line-height:1; margin:.2rem 0}
.home .tier .price small{font-family:var(--body); font-size:.9rem; font-weight:500; color:var(--muted); margin-left:.2rem}
.home .tier .muted{color:var(--muted); font-size:.92rem}
.home .tier ul{list-style:none; padding:0; margin:.6rem 0 1rem; display:grid; gap:.45rem; font-size:.95rem}
.home .tier li{display:flex; gap:.5rem; align-items:flex-start; color:var(--muted)}
.home .tier li::before{content:"✓"; color:var(--accent); font-weight:700; flex:none}
.home .tier .btn{justify-content:center; margin-top:auto}
.home .fine{margin-top:1.4rem; color:var(--muted); font-size:.9rem; text-align:center}
.home .fine a{color:var(--accent)}
@media (max-width:1000px){
.home .tiers{grid-template-columns:repeat(2,1fr)}
.home .tier[data-free]{grid-template-columns:1fr}
.home .tier[data-free] > *, .home .tier[data-free] ul, .home .tier[data-free] .btn, .home .tier[data-free] .tnote{grid-column:1; grid-row:auto}
.home .tier[data-free] ul{margin:.6rem 0 1rem}
.home .tier[data-free] .tnote{max-width:none}
.home .assure{grid-template-columns:1fr; justify-content:start; gap:1rem}
.home .assure li + li{border-left:0; padding-left:0}
}
@media (max-width:760px){
}
@media (max-width:560px){
.home .tiers{grid-template-columns:1fr}
.home .tier[data-free] ul{grid-template-columns:1fr}
}
/* ---------- privacy slab ---------- */
.home .privacy{padding:0}
.home .slab{background:var(--slab); color:var(--on-slab); border-radius:28px; padding:clamp(2.2rem,5vw,3.8rem); display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:center; position:relative; overflow:hidden}
.home .slab::before{content:""; position:absolute; width:60%; aspect-ratio:1; right:-20%; top:-40%; border-radius:50%; background:radial-gradient(circle, rgba(95,191,174,.25), transparent 60%); pointer-events:none}
.home .slab .eyebrow{color:var(--accent-lift)}
.home .slab .eyebrow::before{background:var(--accent-lift)}
.home .slab h2{margin:.7rem 0 .8rem}
.home .slab p{color:var(--slab-muted)}
.home .slab ul{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.home .slab li{display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.04)}
.home .slab li svg{width:22px; height:22px; color:var(--accent-lift); flex:none; margin-top:.15rem}
.home .slab li b{display:block; margin-bottom:.15rem}
.home .slab li span{color:var(--slab-muted); font-size:.92rem}
.home .slab a{color:var(--accent-lift)}
@media (max-width:860px){
.home .slab{grid-template-columns:1fr}
}
/* ---------- faq ---------- */
.home .faq{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.home .faq-list{max-width:800px; margin-inline:auto; display:grid; gap:.6rem}
.home details{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0 1.2rem; transition:border-color .3s}
.home details[open]{border-color:var(--accent-lift)}
.home summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.05rem 0; font-weight:600; font-size:1.02rem}
.home summary::-webkit-details-marker{display:none}
.home summary::after{content:"+"; font-family:var(--display); font-size:1.5rem; color:var(--accent); transition:transform .4s var(--ease); flex:none}
.home details[open] summary::after{transform:rotate(45deg)}
.home details p{padding:0 0 1.1rem; color:var(--muted)}
.home details a{color:var(--accent)}
/* ---------- final call ---------- */
.home .final{padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,7vw,6rem)}
.home .final-card{position:relative; overflow:hidden; border-radius:32px; background:var(--accent); color:#fff; padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,4rem); text-align:center; box-shadow:0 30px 70px rgba(46,125,115,.35)}
.home .final-card::before, .home .final-card::after{content:""; position:absolute; border-radius:50%; filter:blur(50px); pointer-events:none}
.home .final-card::before{width:50%; aspect-ratio:1; left:-15%; top:-30%; background:rgba(255,255,255,.18)}
.home .final-card::after{width:45%; aspect-ratio:1; right:-10%; bottom:-40%; background:rgba(244,164,93,.35)}
.home .final-card h2{font-size:clamp(2.2rem,5.4vw,4rem); margin:.4rem auto 1rem; max-width:16ch; position:relative}
.home .final-card p{max-width:52ch; margin-inline:auto; opacity:.92; position:relative; font-size:1.1rem}
.home .final-card .cta-row{justify-content:center; margin-top:2rem; position:relative}
.home .final-card .faces{display:flex; justify-content:center; margin-bottom:1.2rem; position:relative}
.home .final-card .faces img{width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px var(--accent); margin-left:-12px; transition:transform .4s var(--ease)}
.home .final-card .faces img:first-child{margin:0}
.home .final-card .faces:hover img{transform:translateY(-6px)}
.home .final-card .faces img:nth-child(2n){transition-delay:.05s}
/* ---------- motion respect ---------- */
@media (prefers-reduced-motion: reduce){
.home *, .home *::before, .home *::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important}
.home.js .rv, .home.js .stagger>*{opacity:1; transform:none}
.home .marquee{animation:none; flex-wrap:wrap; width:auto}
.home .hero h1 .w{opacity:1; transform:none}

}

/* ---- what the port adds: classes for the prototype's inline styles ---- */

.home .hero h1 .w.d1 { animation-delay: .05s; } .home .hero h1 .w.d2 { animation-delay: .15s; } .home .hero h1 .w.d3 { animation-delay: .28s; }
.home .shelf .h-sm { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.home .shelf .rail { overflow-x: auto; scrollbar-width: none; }
.home .shelf .rail::-webkit-scrollbar { display: none; }
.home.js .marquee { animation: none; }
.home .scene, .home .step { cursor: pointer; }
.home .scene:focus-visible, .home .step:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0,0,0,.82); }
.lightbox img { display: block; max-width: 96vw; max-height: 86vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox p { color: #fff; text-align: center; margin: .7rem 0 0; font-weight: 600; }
.lightbox button { position: absolute; top: -.6rem; right: -.6rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.home .cast .after { margin-top: 1.2rem; }
.home .final-card .eyebrow { color: #fff; }
.home .final-card .eyebrow::before { background: #fff; }
.home details p a { color: var(--accent); }

/* ---- fixes of 6 October 2026 (Anurag, from the phone) ---- */

/* "Print-ready PDF" is a caption under the picture, not a pill: it looked like a button and was not one. */
.home .stage-note { position: absolute; right: 4%; bottom: -2rem; margin: 0; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.home .stage-note::before { content: "\2713\00a0"; color: var(--accent); }

/* How it works, on a phone: the picture for a step is inside the step, where it is read. The one
   beside the steps is off screen by the time you reach the step it follows. */
.home .step-pic { display: none; }
@media (max-width: 900px) {
  .home .visual { display: none; }
  .home .step-pic { display: grid; gap: .8rem; align-content: center; margin-top: 1rem; padding: 1rem; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-float); max-width: 440px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .home.js .step-pic:not(.seen) { opacity: .35; transform: translateY(12px); }
  .home .step-pic .type { min-height: 5.6em; font-size: 1rem; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* When a step's picture scrolls into view the three other styles fill in, one after another. */
  .home.js .step-pic.seen .three.four .slot { animation: slotfill .7s var(--ease) both; }
  .home.js .step-pic.seen .three.four .slot:nth-of-type(3) { animation-delay: .2s; }
  .home.js .step-pic.seen .three.four .slot:nth-of-type(4) { animation-delay: .4s; }
  @keyframes slotfill { from { background: var(--paper); color: var(--faint); border-style: dashed; } to { background: var(--accent-tint); color: var(--accent); border-style: solid; border-color: var(--accent-lift); } }
}

/* The cast on a phone held sideways (812 x 375): the people, the big picture and the pages they are on
   fit one short screen side by side, instead of three screens one under another. */
@media (orientation: landscape) and (max-height: 520px) {
  .home .cast { padding: 1.6rem 0; }
  .home .cast .sec-head { margin-bottom: 0; }
  .home .cast .sec-head .lead { font-size: 1rem; }
  .home .chips { flex-wrap: nowrap; overflow-x: auto; margin: .9rem 0 .7rem; padding-bottom: 4px; scrollbar-width: none; }
  .home .chips::-webkit-scrollbar { display: none; }
  .home .chip { flex: none; }
  .home .cast-grid { grid-template-columns: minmax(210px, 270px) 1fr; gap: 1rem; align-items: start; }
  .home .card-sheet { position: static; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: .8rem; max-width: none; padding: 10px; border-radius: 18px; }
  .home .card-sheet .flip { border-radius: 10px; }
  .home .card-sheet .who { padding: 0; }
  .home .card-sheet .who b { font-size: 1.15rem; }
  .home .card-sheet .who span { display: block; font-size: .85rem; }
  .home .scenes { grid-template-columns: repeat(4, 1fr); gap: .5rem; max-height: min(50vh, 190px); overflow-y: auto; padding-right: 4px; }
  .home .scene span { font-size: .72rem; }
  .home .cast-note { font-size: .85rem; margin-top: .6rem; }
}
@media (max-width: 900px) { .home .step-pic .three.four figure.slot { font-size: .55rem; padding: 0; hyphens: none; } }


/* The other styles in Step 1 are filled chips like the picked one, just unselected (the home page may only show
   pictures TuckJoy drew, tests/test_home_pictures.py, so the style thumbnails stay out). */
.home .three figure.slot { border: 2px solid var(--accent-lift); background: var(--accent-tint); color: var(--accent); font-weight: 700; }