:root{--ink:#18243a;--blue:#1e5871;--blue2:#e8f3f5;--coral:#e97764;--sun:#f4c96c;--paper:#fffdf8;--cream:#f6f1e8;--line:#dce4e2;--muted:#687582;--white:#fff;--shadow:0 24px 70px rgba(29,50,67,.14);
  /* 2026-09-15 redesign: spacing + type scale tokens used by new/updated
     sections below (hero-to-footer rhythm). Legacy component rules above
     this block keep their original literal values -- styles.css is shared
     by admin.html/resume.html/success.html/terms.html/refund-policy.html,
     so this pass tunes index.html's own sections rather than re-basing
     every rule in the file onto the scale. */
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:26px;--space-5:48px;--space-6:64px;--space-7:64px;
  --font-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  /* Round-2 (2026-09-15) card system: one radius/border/shadow used by the
     proof cards, step cards, AI cards, FAQ rows and price card alike, and one
     button height so primary/secondary buttons read as the same control
     family across the page. */
  --card-radius:16px;--card-border:1px solid var(--line);--card-shadow:0 10px 28px rgba(29,50,67,.06);--card-padding:20px;
  --button-height:56px;
}
/* Section rhythm: 96px between marketing sections on desktop, 64px on
   mobile (round-2 design-system requirement) -- every section margin below
   uses var(--space-7), so this one override retunes all of them at once. */
@media(max-width:800px){:root{--space-7:48px}}
[hidden]{display:none!important}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans)}
h1,h2,h3{text-wrap:balance}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:radial-gradient(#788 0.55px,transparent .65px);background-size:7px 7px}.brandbar{width:min(1120px,calc(100% - 36px));height:84px;margin:auto;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);position:relative;z-index:2}.brandmark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#fff;font:700 1.25rem var(--font-serif);transform:rotate(-7deg)}.brandbar strong,.brandbar span{display:block}.brandbar strong{font:700 1.25rem var(--font-serif)}.brandbar span{font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.kicker{font-size:.69rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin:0 0 16px}
/* ---- Round-2 hero (2026-09-15): the demo spread IS the product, shown
   large; one column stacked on mobile (heading, spread, then actions), two
   columns >=1024px (heading+actions in a left column, spread filling the
   right) via named grid areas -- see index.html's hero-heading/hero-spread/
   hero-actions siblings. ---- */
.hero{width:min(1400px,calc(100% - 36px));margin:auto;padding:40px 0 var(--space-6);display:grid;row-gap:20px;column-gap:40px;grid-template-columns:1fr;grid-template-areas:"heading" "spread" "actions"}
.hero-heading{grid-area:heading}
.hero-spread{grid-area:spread;margin:0}
.hero-actions{grid-area:actions}
.hero h1{font:700 clamp(2.5rem,5vw,4rem)/1.08 var(--font-serif);letter-spacing:-.03em;margin:0}
.hero h1 em{color:var(--coral);font-style:italic}
.flow-step h2{font:700 clamp(2.5rem,5.4vw,4.1rem)/.96 var(--font-serif);letter-spacing:-.05em;margin:0}
.lede{max-width:560px;font-size:1.06rem;line-height:1.55;color:var(--muted);margin:var(--space-2) 0}
.hero-secondary{display:inline-block;margin:14px 0 0;color:var(--blue);font-weight:700;font-size:.88rem;text-decoration:none}
.hero-secondary:hover{text-decoration:underline}
.mini-proof{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:var(--space-3);font-size:.82rem;font-weight:700;color:var(--muted)}.mini-proof i{width:3px;height:3px;border-radius:50%;background:var(--coral);flex:0 0 auto}
/* The two-page spread: original photo | coloring page, each >=380px wide at
   the 1440px desktop grading viewport (see DESIGN-TEARDOWN.md round 2 notes
   for the column-math this targets), with a soft spine shadow and a paper
   edge instead of the old small tilted book mock-up. */
.hero-spread{display:grid;grid-template-columns:1fr 8px 1fr;background:#fff;padding:8px;border-radius:10px;box-shadow:0 30px 80px rgba(29,50,67,.16);position:relative}
.spread-page{min-width:0;position:relative;overflow:hidden;background:#f4efe6;border-radius:4px}
/* height:auto is required here, not decorative: the img's HTML width/height
   attributes (768x1024, kept for pre-CSS layout reservation) map to a CSS
   height presentational hint that otherwise wins over aspect-ratio once
   width is overridden to 100% -- Chromium then renders the image at its raw
   1024px intrinsic height instead of the 3:4-computed ~505px. */
.spread-page img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.spread-spine{background:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.02) 30%,rgba(0,0,0,.02) 70%,rgba(0,0,0,.14));border-radius:2px}
.hero-spread figcaption{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.7rem;line-height:1.45;margin:14px 4px 2px}
.flow-shell{width:min(920px,calc(100% - 30px));margin:0 auto var(--space-7);position:relative}.progress{position:sticky;top:0;z-index:20;height:44px;background:rgba(255,253,248,.94);backdrop-filter:blur(12px);display:flex;align-items:center;border-bottom:1px solid var(--line)}.progress::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#e3e8e5}.progress i{position:absolute;left:0;bottom:-1px;width:20%;height:3px;background:var(--coral);transition:width .5s}.progress span{margin-left:auto;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.flow-step{position:relative;min-height:520px;padding:64px 56px 60px;margin-top:20px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 60px rgba(29,50,67,.08);border-radius:22px;opacity:0;transform:translateY(24px);transition:opacity .55s,transform .55s}.flow-step.active{opacity:1;transform:none}.flow-step[hidden]{display:none}.flow-step h2{font-size:clamp(2.5rem,5.4vw,4.1rem);margin-bottom:var(--space-3)}.flow-step>p:not(.kicker):not(.error):not(.payment-status){max-width:610px;color:var(--muted);font-size:1rem;line-height:1.6}.step-number{position:absolute;right:32px;top:26px;color:#d7ddd9;font:700 2.3rem var(--font-serif)}.upload-button,.pay-button{border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:min(520px,100%);min-height:var(--button-height);padding:0 22px;margin-top:30px;background:var(--blue);color:#fff;border-radius:12px;font-weight:800;font-size:1rem;box-shadow:0 10px 24px rgba(30,88,113,.2);transition:transform .2s,background .2s}.upload-button:hover,.pay-button:hover{transform:translateY(-2px);background:#17495f}.upload-button input{position:absolute;opacity:0;pointer-events:none}.upload-button b{font-size:1.3rem}.upload-count{display:flex;align-items:baseline;gap:6px;margin-top:16px;color:var(--muted)}.upload-count strong{font:700 2.2rem var(--font-serif);color:var(--coral)}.upload-count span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}.photo-strip{display:flex;gap:7px;overflow:hidden;margin-top:21px}.photo-strip img{width:54px;height:54px;object-fit:cover;border-radius:8px;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}.field-label{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin:32px 0 10px}.field-label.compact{margin-top:22px}textarea,input[type=text],input[type=email]{width:100%;border:1.5px solid #ccd7d5;border-radius:12px;background:var(--paper);color:var(--ink);font:500 1rem var(--font-sans);padding:17px 18px;outline:0;transition:border .2s,box-shadow .2s}textarea{min-height:135px;resize:vertical;line-height:1.55}textarea:focus,input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,88,113,.09)}.flow-step small{display:block;color:var(--muted);font-size:.7rem;margin-top:10px}.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:35px}.theme-grid label{cursor:pointer}.theme-grid input,.recipient-options input{position:absolute;opacity:0}.theme-grid label>span,.theme-grid label>b{display:block}.theme-grid label{position:relative;padding:19px 18px 17px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);transition:.2s}.theme-grid label>span{font-size:1.45rem;color:var(--coral);margin-bottom:12px}.theme-grid label>b{font:700 1.05rem var(--font-serif)}.theme-grid label:has(input:checked){border-color:var(--blue);background:var(--blue2);box-shadow:0 0 0 2px var(--blue)}.error{min-height:20px;color:#b34036!important;font-size:.78rem!important;margin:12px 0 0}.proof-step{padding-bottom:75px}.proof-working{text-align:center;padding:55px 20px;border-radius:16px;background:var(--cream);margin-top:35px}.spinner{width:72px;height:72px;position:relative;margin:0 auto 20px;animation:spin 2.5s linear infinite}.spinner i{position:absolute;width:18px;height:18px;border-radius:50%}.spinner i:nth-child(1){left:27px;top:0;background:var(--sun)}.spinner i:nth-child(2){right:0;bottom:7px;background:var(--coral)}.spinner i:nth-child(3){left:0;bottom:7px;background:var(--blue)}.spinner.large{width:82px;height:82px}.proof-working strong{font:700 1.45rem var(--font-serif)}.proof-working p{color:var(--muted);max-width:530px;margin:9px auto 22px;font-size:.86rem;line-height:1.5}.proof-meter,.working-meter{height:7px;border-radius:99px;overflow:hidden;background:#dde3df;max-width:500px;margin:auto}.proof-meter i,.working-meter i{display:block;height:100%;width:6%;border-radius:inherit;background:var(--coral);transition:width .5s}.proof-pair{display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;gap:10px;margin-top:36px}.proof-pair figure{margin:0;background:#fff;border:1px solid var(--line);padding:12px;box-shadow:0 12px 30px rgba(0,0,0,.08)}.proof-pair figure span{display:block;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:4px 3px 11px}.proof-pair img{display:block;width:100%;aspect-ratio:2/3;object-fit:contain;background:#f2f0ea}.pair-arrow{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#fff;font-weight:900}.order-summary{margin:45px 0 25px;padding:29px;border-radius:15px;background:var(--blue2);border:1px solid #cfdee1}.order-summary h3{font:700 2rem var(--font-serif);margin:0 0 12px}.order-summary>p:not(.kicker){color:#405363;line-height:1.55}.order-summary ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;padding:0;list-style:none;font-size:.78rem;font-weight:700}.order-summary li::before{content:"✓";color:var(--coral);margin-right:8px}.gift-panel{margin:24px 0;padding:26px;border:1px solid var(--line);border-radius:15px}.recipient-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.recipient-options label span{display:block;cursor:pointer;border:1.5px solid var(--line);border-radius:10px;padding:14px;text-align:center;font-size:.78rem;font-weight:800}.recipient-options label:has(input:checked) span{border-color:var(--blue);background:var(--blue2);box-shadow:0 0 0 1px var(--blue)}.gift-panel .field-label{margin-top:24px}.pay-button{width:100%;margin-top:24px}.pay-button span,.pay-button b{display:block}.pay-button b{font-size:.78rem;color:#d7ebf2}.payment-status{min-height:22px;text-align:center;font-size:.76rem!important;color:var(--muted)!important}.working-overlay{position:fixed;inset:0;z-index:100;background:rgba(24,36,58,.86);backdrop-filter:blur(12px);display:grid;place-items:center;padding:18px}.working-overlay[hidden]{display:none}.working-card{width:min(560px,100%);background:var(--paper);padding:50px 42px 40px;border-radius:26px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.4)}.working-card h2{font:700 2.7rem/1 var(--font-serif);margin:0 0 15px}.working-card>p:not(.kicker){color:var(--muted);line-height:1.55}.working-meter{margin:28px auto 14px}.working-card>strong{font-size:.67rem;text-transform:uppercase;letter-spacing:.12em;color:var(--blue)}@keyframes spin{to{transform:rotate(360deg)}}footer{width:min(1120px,calc(100% - 36px));margin:auto;border-top:1px solid var(--line);min-height:120px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.7rem}footer strong{font:700 1.1rem var(--font-serif);color:var(--ink)}
@media(max-width:900px){.flow-step{padding:75px 35px 65px}.theme-grid{grid-template-columns:1fr 1fr}.proof-pair{grid-template-columns:1fr}.pair-arrow{transform:rotate(90deg);margin:auto}.proof-pair figure{max-width:420px;margin:auto;width:100%}.order-summary ul{grid-template-columns:1fr}.step-number{right:27px;top:25px}.recipient-options{grid-template-columns:1fr}}
/* Hero two-column layout only from 1024px up (round-2 spec): left column
   (heading stacked on actions) beside the spread, which fills the right
   column top-to-bottom. Below 1024px the hero stays the single stacked
   column defined as the base .hero rule above (heading, spread, actions). */
@media(min-width:1024px){
  /* grid-template-rows:auto 1fr keeps the "heading" row exactly as tall as
     its own content (kicker+H1) -- without it, Grid's default algorithm for
     distributing the extra height the spanning .hero-spread needs can widen
     the WRONG row, opening a large blank gap between the H1 and the subhead
     instead of trailing space below the button/trust line. */
  /* grid-template-rows:auto 1fr keeps the "heading" row exactly as tall as
     its own content -- any extra vertical space the tall .hero-spread needs
     goes entirely into the "actions" row instead of being split between
     both (Grid's default behavior for a multi-row-spanning item, which
     opened a visible gap between the H1 and the subhead). .hero-spread
     itself uses align-self:start (not the grid default of stretch) so its
     height always comes from its own aspect-ratio'd image, never from
     trying to fill an indefinite 1fr track. */
  .hero{grid-template-columns:minmax(420px,0.85fr) minmax(520px,1.15fr);grid-template-rows:auto 1fr;grid-template-areas:"heading spread" "actions spread";align-items:start}
  .hero-spread{align-self:start}
}
@media(max-width:480px){.brandbar{height:70px}.hero{width:min(100% - 26px,1120px);padding:28px 0 40px}.lede{font-size:.98rem}.mini-proof{gap:6px;font-size:.72rem}.flow-shell{width:min(100% - 20px,920px);margin-bottom:70px}.flow-step{min-height:auto;padding:68px 20px 50px;border-radius:16px}.flow-step h2{font-size:3.05rem}.flow-step>p:not(.kicker):not(.error):not(.payment-status){font-size:.9rem}.step-number{font-size:2.15rem}.theme-grid{grid-template-columns:1fr 1fr;gap:7px}.theme-grid label{padding:14px 11px}.theme-grid label>b{font-size:.86rem}.theme-grid label>span{font-size:1.2rem;margin-bottom:8px}.photo-strip img{width:42px;height:42px}.working-card{padding:39px 20px 31px}.working-card h2{font-size:2.15rem}.proof-working{padding:40px 14px}.order-summary,.gift-panel{padding:20px 16px}.order-summary h3{font-size:1.7rem}.upload-button,.pay-button{padding:18px 16px}footer{width:min(100% - 26px,1120px);flex-direction:column;justify-content:center;text-align:center;gap:7px}}

/* Color Me photo editing, timed proof, and cover preview */
.sample-coloring{position:relative;overflow:hidden}.sample-coloring img{filter:none;transform:none}.sample-note{max-width:720px;margin:22px auto 30px;padding:17px 19px;border:1px solid #b9d9cf;border-radius:12px;background:#edf8f4;color:var(--muted);font-size:.82rem;line-height:1.6;text-align:left}.sample-note strong{color:var(--ink)}
.upload-help{max-width:650px;margin:8px auto 18px;color:var(--muted);font-size:.82rem;line-height:1.5}.upload-button.locked{background:#26735d;cursor:default;opacity:.92}.upload-button.locked b{display:none}.error.success{color:#26735d!important}.photo-strip{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;max-width:760px;margin:22px auto}.photo-card{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 20px rgba(29,50,67,.08)}.photo-card>img{display:block;width:100%;height:112px;object-fit:cover}.photo-number{position:absolute;top:7px;left:7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(24,36,58,.85);color:#fff;font-size:.68rem;font-weight:800}.photo-tools{display:grid;grid-template-columns:30px 30px 1fr 1.35fr;gap:3px;padding:6px}.photo-tools button{border:0;border-radius:7px;padding:7px 3px;background:var(--blue2);color:var(--ink);font:700 .62rem var(--font-sans);cursor:pointer}.photo-tools button:hover{background:#d5e9ed}.photo-tools button:disabled{opacity:.3;cursor:default}.proof-clock{width:min(330px,100%);margin:20px auto 12px;padding:12px 16px;border:1px solid rgba(255,255,255,.35);border-radius:12px;display:flex;justify-content:space-between;align-items:center}.proof-clock span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.proof-clock strong{font-size:.9rem}.cover-preview{position:relative;width:min(380px,100%);aspect-ratio:4/5;margin:12px auto 32px;border-radius:10px;overflow:hidden;box-shadow:0 22px 50px rgba(20,40,55,.25);background:var(--blue)}.cover-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,31,45,.06) 25%,rgba(12,31,45,.88) 100%)}.cover-copy{position:absolute;inset:auto 26px 28px;color:#fff;text-align:left}.cover-copy span,.cover-copy b{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.57rem}.cover-copy h3{margin:8px 0 15px!important;color:#fff;font-size:2.45rem!important;line-height:.95}.story-teaser{max-width:650px;margin:0 auto 28px;text-align:center}.story-teaser h3{margin:4px 0 15px}.story-teaser>p:not(.kicker){font:600 1.18rem/1.65 var(--font-serif);color:var(--ink)}.story-teaser small{display:block;color:var(--muted);font-style:italic}.editor-overlay{position:fixed;z-index:1000;inset:0;background:rgba(16,29,42,.82);display:grid;place-items:center;padding:18px;overflow:auto}.editor-card{width:min(560px,100%);background:var(--paper);border-radius:20px;padding:28px;box-shadow:var(--shadow)}.editor-card h2{font:700 2.5rem/.95 var(--font-serif);margin:0 0 20px}.editor-stage{width:min(320px,100%);aspect-ratio:3/4;margin:0 auto 18px;overflow:hidden;background:#e8eceb;border-radius:12px;display:grid;place-items:center}.editor-stage img{width:100%;height:100%;object-fit:cover;transition:transform .12s ease}.editor-control{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px;margin:12px 0;color:var(--ink);font-size:.78rem;font-weight:700}.editor-control input{width:100%;accent-color:var(--coral)}.editor-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:20px}.editor-actions button{border:1px solid var(--line);border-radius:10px;padding:12px 7px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}.editor-actions button.primary{background:var(--coral);border-color:var(--coral);color:#fff}.modal-open{overflow:hidden}
@media(max-width:600px){.photo-strip{grid-template-columns:repeat(2,1fr)}.photo-card>img{height:132px}.photo-tools{grid-template-columns:1fr 1fr;gap:5px}.photo-tools button{min-height:44px;font-size:.68rem}.editor-card{padding:22px 16px}.editor-actions{grid-template-columns:1fr 1fr}.cover-copy h3{font-size:2rem!important}.proof-clock{padding:10px 12px}.editor-control{grid-template-columns:105px 1fr}}

/* Public product story, privacy-safe demonstration, and offer clarity */
.hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--button-height);margin-top:20px;padding:0 26px;border-radius:12px;background:var(--coral);color:#fff;text-decoration:none;font-weight:800;font-size:1rem;box-shadow:0 12px 28px rgba(233,119,100,.25)}.hero-cta:hover{transform:translateY(-1px)}.upload-wait{max-width:650px;margin:14px auto 8px;padding:13px 15px;border-radius:12px;background:var(--blue2);color:var(--muted);font-size:.82rem;line-height:1.5}.upload-wait strong{color:var(--ink)}
.spread-page .page-label{position:absolute;z-index:2;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 5px 16px rgba(24,36,58,.12);font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
/* 2026-09-15 redesign: confidence-strip is now the inner card grid of the
   "why families choose" proof section (.confidence-strip-section), not a
   standalone hero-overlapping strip -- so it no longer carries its own page
   width or negative top margin; the wrapping section owns that spacing. */
.confidence-strip-section{width:min(1060px,calc(100% - 36px));margin:0 auto var(--space-7);text-align:left}
/* Four separate proof cards (not one strip with dividers) so they share the
   exact card system (radius/border/shadow/padding) that the step cards, AI
   cards, FAQ rows and price card all use -- round-2 design-system requirement. */
.confidence-strip{margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.confidence-strip div{border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);background:#fff;padding:var(--card-padding)}
.confidence-strip strong,.confidence-strip span{display:block}.confidence-strip strong{font:700 1.1rem var(--font-serif);margin-bottom:8px}.confidence-strip span{color:var(--muted);font-size:.85rem;line-height:1.55}
.offer-intro{width:min(1060px,calc(100% - 36px));margin:0 auto var(--space-7);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:36px;align-items:start}/* One H2 treatment for every marketing section (round-2 design-system
   requirement) -- proof, occasions, how-it-works, AI, price and FAQ all
   share this rule instead of five near-duplicate clamps. */
.offer-copy h2,.how-it-works h2,.confidence-strip-section h2,.ai-made h2,.occasions h2,.faq h2{font:700 clamp(1.9rem,3.6vw,2.75rem)/1.12 var(--font-serif);letter-spacing:-.03em;margin:0 0 var(--space-3);max-width:760px}/* Round-2 price section: left column (offer-copy) is the H2 + the value
   argument + the six included items as a checklist; right column
   (offer-card) is only the dark price card -- $79, fine print, button. The
   privacy note moved out into its own slim band above the footer. */
.offer-copy .offer-value{color:var(--muted);font-size:1rem;line-height:1.7;max-width:640px;margin:0 0 var(--space-3)}
.offer-checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:560px}
.offer-checklist li{position:relative;padding-left:30px;color:var(--ink);font-size:.92rem;line-height:1.5;font-weight:600}
.offer-checklist li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--blue2);color:var(--blue);font-size:.68rem;font-weight:800;display:grid;place-items:center}
.offer-card{background:var(--ink);color:#fff;padding:var(--card-padding);border-radius:20px;box-shadow:var(--shadow);text-align:center;align-self:start}
.offer-card>strong{display:block;font:700 3.8rem/.95 var(--font-serif);margin:10px 0 4px}
.offer-card>small{display:block;color:#cbd5dc;font-size:.75rem;margin-bottom:var(--space-3)}
.offer-card a{display:flex;justify-content:center;align-items:center;gap:8px;height:var(--button-height);background:var(--coral);color:#fff;text-decoration:none;border-radius:10px;font-size:.9rem;font-weight:800}
.offer-card a:hover{background:#d96655}
.privacy-band{width:min(1060px,calc(100% - 36px));margin:0 auto var(--space-7);padding:18px 22px;border-radius:14px;background:var(--cream);border-left:4px solid var(--coral)}
.privacy-band p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.6}
.privacy-band strong{color:var(--ink)}
.how-it-works{width:min(1060px,calc(100% - 36px));margin:0 auto var(--space-7)}.how-it-works>h2{max-width:700px}.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-2);margin-top:var(--space-4)}.how-grid article{padding:var(--card-padding);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);background:#fff}.how-grid article>span{display:block;color:var(--coral);font-size:.66rem;font-weight:800;letter-spacing:.15em;margin-bottom:18px}.how-grid article>strong{display:block;font:700 1.1rem var(--font-serif);margin-bottom:10px}.how-grid p{color:var(--muted);font-size:.85rem;line-height:1.6;margin:0}
@media(max-width:900px){.confidence-strip{grid-template-columns:1fr 1fr}.offer-intro{grid-template-columns:1fr;gap:32px}.offer-card{max-width:520px;width:100%;margin:auto}.how-grid{grid-template-columns:1fr}}
@media(max-width:600px){.hero-spread figcaption{font-size:.64rem;padding:0 10px}.spread-page .page-label{top:8px;font-size:.5rem;padding:5px 8px}.confidence-strip{grid-template-columns:1fr}.offer-card{padding:24px 20px}.offer-card>strong{font-size:3.2rem}}

/* Authenticated customer proof; content is populated only from sanitized review JSON. */
.resume-status{margin:1rem auto;max-width:70rem;padding:.9rem 1.2rem;border:2px solid #2b6f66;border-radius:12px;background:#eefaf7;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.resume-status[hidden]{display:none}.resume-status a{color:#174f48;font-weight:700}.resume-status button{border:1px solid #174f48;border-radius:999px;background:#fff;color:#174f48;padding:.65rem .9rem;font:700 .9rem var(--font-sans);cursor:pointer}.resume-status button:disabled{cursor:wait;opacity:.65}#startOverMessage{width:100%;color:#174f48;font-size:.85rem}
.resume-project{max-width:70rem;margin:1rem auto;padding:1.25rem 1.5rem;border:1px solid var(--line);border-radius:16px;background:#fff;display:grid;grid-template-columns:1.25fr 1fr;gap:2rem;align-items:center}.resume-project h2{margin:.15rem 0}.resume-project p{margin:.4rem 0;color:var(--muted)}.resume-project form label{font-weight:700}.resume-project form>div{display:flex;gap:.5rem;margin-top:.4rem}.resume-project input{min-width:0;flex:1;padding:.8rem;border:1px solid var(--line);border-radius:8px}.resume-project button{border:0;border-radius:8px;padding:.8rem 1rem;background:#174f48;color:white;font-weight:700}.recovery-exchange{min-height:90vh;display:grid;place-items:center;padding:2rem}.recovery-exchange section{max-width:36rem;padding:2rem;border:1px solid var(--line);border-radius:16px;background:#fff}@media(max-width:700px){.resume-project{grid-template-columns:1fr}.resume-project form>div{display:grid}}

/* Locked, standalone sample-generation and result experience. */
.create-sample-button{margin-top:24px}.sample-wait-note{margin:24px auto 0;color:var(--ink);font-size:1rem;text-align:center}.sample-experience .brandbar,.sample-experience main>section:not(.flow-shell),.sample-experience footer{display:none!important}.sample-experience{background:var(--cream)}.sample-experience main{min-height:100dvh}.sample-experience .flow-shell{width:100%;margin:0;min-height:100dvh}.sample-experience .flow-shell>.progress,.sample-experience .flow-step:not(#proofStep){display:none!important}.sample-experience #proofStep{display:flex!important;min-height:100dvh;width:100%;max-width:none;margin:0;padding:clamp(28px,6vh,70px) 20px;flex-direction:column;align-items:center;justify-content:center;border:0;border-radius:0;box-shadow:none;background:var(--paper)}.sample-experience #proofStep>.step-number,.sample-experience #proofStep>.kicker,.sample-experience #proofStep>h2{display:none!important}.sample-experience #proofWorking{width:min(620px,100%);margin:0}.sample-creating{overflow:hidden}.sample-creating #proofPair,.sample-creating #orderSummary,.sample-creating #payButton,.sample-creating #paymentStatus,.sample-creating #proofError,.sample-creating #proofStep>.sample-note{display:none!important}.sample-ready #proofWorking,.sample-ready #sampleWaitNote{display:none!important}.sample-ready #proofStep{justify-content:flex-start;overflow:auto}.sample-error #proofWorking,.sample-error #proofPair,.sample-error #orderSummary,.sample-error #payButton,.sample-error #paymentStatus,.sample-error #proofStep>.sample-note{display:none!important}.sample-error #proofError{display:block;max-width:620px;margin:auto;padding:24px;text-align:center}.sample-experience .proof-clock strong{font-variant-numeric:tabular-nums;font-size:1.1rem}@media(max-width:600px){.sample-experience #proofStep{padding:24px 14px}.sample-experience #proofWorking{padding:34px 18px}.sample-wait-note{font-size:.92rem}}
.private-review{margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--cream);text-align:left}.private-review h2,.private-review h3{font-family:var(--font-serif)}.private-review>.primary-button{display:inline-block;margin:8px 0 18px}.review-story{max-height:320px;overflow:auto;padding-right:8px}.review-story p{color:var(--muted);font-size:.82rem;line-height:1.55}

/* Hard viewport lock for iPhone/in-app browsers during sample creation. */
body.sample-creating{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none!important}
body.sample-creating #proofStep{position:fixed!important;inset:0!important;z-index:2147483647!important;width:100vw!important;height:100dvh!important;overflow:hidden!important;touch-action:none!important}
.cover-choice-help{max-width:760px;margin:4px auto 24px;padding:24px;border:3px solid var(--coral);border-radius:16px;background:#fff6f2;color:var(--muted);font-size:.95rem;text-align:left;box-shadow:0 14px 34px rgba(233,119,100,.18)}.cover-choice-help strong,.cover-choice-help span{display:block}.cover-choice-help strong{margin:7px 0;color:var(--ink);font:700 1.55rem var(--font-serif)}.cover-choice-help .cover-required{color:#b84b3d;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.photo-card{padding-bottom:42px}.photo-card.cover-selected{border:3px solid var(--coral);box-shadow:0 12px 30px rgba(233,119,100,.24)}.cover-choice{position:absolute;left:7px;right:7px;bottom:7px;min-height:29px;border:0;border-radius:8px;background:var(--blue2);color:var(--blue);font:800 .68rem var(--font-sans);cursor:pointer}.cover-choice[aria-pressed="true"]{background:var(--coral);color:#fff}.sample-payment{margin:22px auto 12px}.order-summary .sample-payment+.payment-status{margin-bottom:22px}

/* Required operational order contact and purchase confirmations. */
.contact-panel,.consent-panel{max-width:720px;margin:26px auto 0;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left}.contact-panel h3,.consent-panel legend{font:700 1.35rem var(--font-serif);color:var(--ink)}.contact-panel>p,.consent-panel>p{color:var(--muted);font-size:.8rem;line-height:1.55}.contact-panel input{width:100%}.contact-panel .required-phone{min-height:64px;padding:16px 18px;border:3px solid var(--blue);font-size:1.18rem}.consent-panel{display:grid;gap:14px}.consent-panel legend{padding:0 8px}.consent-panel label{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:.86rem;line-height:1.5;cursor:pointer}.consent-panel input[type="checkbox"]{width:26px;height:26px;margin:0;accent-color:var(--blue)}.consent-panel label:has(input:checked){border-color:#6fae99;background:#edf8f4}@media(max-width:480px){.contact-panel,.consent-panel{padding:18px 14px}.consent-panel label{font-size:.78rem}.contact-panel .required-phone{min-height:60px;font-size:1.05rem}}

.service-text-consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:.85rem;padding:.9rem;border:1px solid var(--line);border-radius:12px;background:#fffdf8;font-size:.82rem;font-weight:650;line-height:1.45}.service-text-consent input{width:1.25rem!important;height:1.25rem;flex:0 0 auto;margin-top:.1rem}

/* Keep the native file input operable through its label without allowing
   Linux WebKit's intrinsic file-control width to escape the upload card. */
#photoInput{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Explicit single-step customer flow: one document scroller, no viewport locks. */
.flow-shell{min-height:760px}.flow-step[hidden]{display:none!important}.flow-step{animation:none!important}
.step-controls{max-width:760px;margin:28px auto 0;display:flex;justify-content:space-between;gap:12px}
.step-controls button,#createSampleButton{min-height:var(--button-height);padding:12px 20px;border:0;border-radius:10px;background:var(--blue);color:#fff;font:800 .86rem var(--font-sans);cursor:pointer}
.step-controls button:disabled{opacity:.45;cursor:default}.step-controls button:first-child:not(:last-child){background:#e7eef0;color:var(--ink)}
.photo-card{padding-bottom:0}.photo-tools{grid-template-columns:1fr 1fr;padding:7px}.photo-tools .cover-choice{position:static;grid-column:1/-1;min-height:34px}
body.sample-creating{position:static!important;width:auto!important;height:auto!important;overflow:visible!important}
body.sample-creating #proofStep{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;touch-action:auto!important}
@media(max-width:480px){.flow-shell{min-height:667px}.step-controls{position:static}.photo-card>img{height:116px}}

/* WP7: five-step flow additions — "Made automatically by AI" section, FAQ,
   pay-step price line, and the offer card's production/shipping timing line. */
.ai-made{width:min(1060px,calc(100% - 36px));margin:0 auto var(--space-7);text-align:left}
/* Round-2: three short cards ("What the AI does" / "What the AI check looks
   for" / "If a page can't pass") instead of a two-paragraph wall of text,
   using the shared card tokens -- same radius/border/shadow as the proof
   cards, step cards and FAQ rows. */
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-4)}
@media(max-width:900px){.ai-grid{grid-template-columns:1fr}}
.ai-card{border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);background:#fff;padding:var(--card-padding)}
.ai-card strong{display:block;font:700 1.1rem var(--font-serif);margin-bottom:10px}
.ai-card p{color:var(--muted);font-size:.88rem;line-height:1.6;margin:0}
.ai-disclosure{color:var(--muted);font-size:.84rem;line-height:1.6;max-width:820px;margin:var(--space-3) 0 0}
.pay-step .price-line{font:700 2.6rem/1 var(--font-serif);color:var(--ink);margin:30px 0 6px}
.pay-step .pay-helper{max-width:520px;color:var(--muted);font-size:.78rem;line-height:1.55;margin-top:14px}
.marketing-consent{background:#fff}
.faq{width:min(860px,calc(100% - 36px));margin:0 auto var(--space-7)}
.faq-list{margin-top:var(--space-4);display:flex;flex-direction:column;gap:6px}
.faq-list details{border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:14px 18px;background:#fff}
.faq-list summary{cursor:pointer;font:700 1.1rem var(--font-serif);color:var(--ink);list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";float:right;color:var(--coral);font-weight:800}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{margin:14px 0 2px;color:var(--muted);font-size:.87rem;line-height:1.65}
@media(max-width:480px){.ai-made,.faq{width:min(100% - 26px,900px)}.faq-list details{padding:15px 16px}.pay-step .price-line{font-size:2.1rem}}
footer{flex-wrap:wrap;gap:14px;min-height:auto;padding:20px 0}
/* Round-2 fix: wordmark and tagline were running together
   ("Color PicksMade entirely by AI…") because <strong> and <span> are both
   inline with no gap -- stack them as a column instead. */
.footer-primary{display:flex;flex-direction:column;gap:4px}
.footer-secondary{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;max-width:560px}.footer-links{display:flex;gap:8px;align-items:center;font-weight:700}.footer-links a{color:var(--blue);text-decoration:none}.footer-links a:hover{text-decoration:underline}.footer-links span{color:var(--line)}.footer-disclosure{margin:0;color:var(--muted);font-size:.68rem;line-height:1.5}.footer-copyright{margin:0;color:var(--muted);font-size:.66rem;opacity:.8}.pay-terms-line{max-width:520px;color:var(--muted);font-size:.78rem;line-height:1.55;margin:18px auto 0}.pay-terms-line a{color:var(--blue);font-weight:700}.consent-panel a{color:var(--blue);font-weight:700}.pay-start-over-line{text-align:center;margin:16px 0 0;font-size:.78rem}.pay-start-over-line a{color:var(--blue);font-weight:700;text-decoration:none}.pay-start-over-line a:hover{text-decoration:underline}.pay-start-over-line a[aria-disabled="true"]{color:var(--muted);pointer-events:none;opacity:.55;text-decoration:none;cursor:default}
.legal-page main{width:min(760px,calc(100% - 36px));margin:0 auto;padding:56px 0 100px}.legal-page h1{font:700 clamp(2.3rem,5vw,3.4rem)/1.05 var(--font-serif);margin:0 0 6px;letter-spacing:-.03em}.legal-page .legal-updated{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 34px}.legal-page h2{font:700 1.4rem var(--font-serif);margin:36px 0 14px;color:var(--ink)}.legal-page p{color:#3b4855;font-size:.98rem;line-height:1.75;margin:0 0 16px;max-width:680px}.legal-page a{color:var(--blue);font-weight:700}.legal-page .legal-back{display:inline-block;margin-top:24px;font-size:.8rem}
@media(max-width:480px){.footer-secondary{align-items:center;text-align:center}.footer-links{flex-wrap:wrap;justify-content:center}}
.story-teaser.story-loading small{visibility:hidden}.story-loading-dots::after{content:"....";display:inline-block;width:0;overflow:hidden;vertical-align:bottom;animation:story-loading-ellipsis 1.4s steps(4) infinite}@keyframes story-loading-ellipsis{to{width:1.1em}}

/* Names-with-hints (2026-09-11, interview-notes.md Q12): a small repeatable
   name+hint list replacing the old single free-text "names" field, so the
   AI story writer gets an explicit hint per person (see claude_story.py
   _creative_facts / _people_facts) instead of one unstructured string. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.name-entry-row{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.name-entry-row input{flex:1 1 160px;margin-top:0}
.name-entry-row button{flex:0 0 auto;border:0;border-radius:10px;padding:0 18px;background:var(--blue);color:#fff;font:700 .8rem var(--font-sans);cursor:pointer;white-space:nowrap}
.name-entry-row button:hover{background:#17495f}
.name-entry-row button:disabled{opacity:.5;cursor:default}
.name-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.name-list li{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:999px;background:var(--blue2);color:var(--ink);font-size:.82rem;font-weight:700}
.name-list .remove-name{border:0;border-radius:50%;width:22px;height:22px;background:#fff;color:var(--muted);font-size:.7rem;line-height:1;cursor:pointer}
.name-list .remove-name:hover{background:var(--coral);color:#fff}
@media(max-width:480px){.name-entry-row{flex-direction:column}.name-entry-row input,.name-entry-row button{width:100%}}

/* Why-$69 value copy (2026-09-11, content/why-69.md): above-the-fold price
   justification in the offer card, and the hero likeness line under the
   hero's subhead. Both are plain paragraphs styled to match their section. */
.offer-value{margin:12px 0 0;color:#d7dee2;font-size:.84rem;line-height:1.5}
.hero-likeness{max-width:560px;color:var(--muted);font-size:.85rem;font-weight:700;margin:-14px 0 22px}
@media(max-width:800px){.hero-likeness{margin-left:auto;margin-right:auto}}

/* ---- 2026-09-15 UX flow redesign additions ---- */
/* Slim step indicator (Photos · Theme · Names · Contact · Sample & Pay). */
.progress-steps{display:flex;align-items:center;gap:0;margin:0 auto;padding:0 14px;list-style:none;font-size:.68rem;font-weight:800;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow-x:auto;width:100%}
.progress-steps li{padding:0 9px;position:relative;text-transform:uppercase}
.progress-steps li:not(:last-child)::after{content:'·';position:absolute;right:-2px;color:var(--line)}
.progress-steps li.current{color:var(--coral)}

/* Sticky bottom action bar for step 1 (photos): tells the customer what to
   do next no matter how far they've scrolled, instead of leaving them
   "hanging at the bottom" once 20 photos are in (Ken, 2026-09-15). */
.sticky-action-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(29,50,67,.14)}
.sticky-action-bar p{margin:0;font-size:.86rem;font-weight:700;color:var(--ink);flex:1}
.sticky-action-bar button{border:0;cursor:pointer;padding:14px 22px;border-radius:12px;background:var(--coral);color:#fff;font-weight:800;font-size:.92rem;white-space:nowrap;box-shadow:0 10px 24px rgba(233,119,100,.25);transition:transform .2s}
.sticky-action-bar button:hover{transform:translateY(-2px)}
/* --photo-bar-height is kept in sync with the sticky bar's real rendered
   height by app.js (it can wrap to two lines / stack a full-width button on
   narrow viewports), so the last row of tiles and the Next button are never
   covered by it -- 2026-09-15 revision 2. */
#uploadStep{padding-bottom:calc(var(--photo-bar-height, 90px) + 24px)}
@media(max-width:560px){
  .sticky-action-bar{flex-direction:column;align-items:stretch;text-align:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .sticky-action-bar button{width:100%}
}

/* Single 10-tile theme grid (replaces the old two-part feeling+theme pick). */
.theme-grid-single{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.theme-grid-single{grid-template-columns:1fr}}

/* Sample-and-pay merged step (05): a measured ETA line replaces the old
   ticking "Time elapsed" stopwatch (Ken, 2026-09-15: "Remove the ticking
   timer; I want a timer of sorts so people understand it might take about
   N seconds"), and the pay panel sits directly under the sample once ready. */
.proof-eta{margin:14px 0 0;font-size:.86rem;color:var(--muted);font-weight:600}
.proof-eta strong{color:var(--ink)}
.pay-panel{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);text-align:center}
.sample-step-back{justify-content:flex-start}

/* ---- 2026-09-15 revision 2: simplified photo tiles ---- */
/* One tap on the tile (or the accessible pill/badge button) selects the
   cover; Earlier/Later reorder controls are opt-in via the toggle above the
   grid, off by default, instead of cluttering every tile. */
.photo-strip-controls{max-width:760px;margin:14px auto 0;text-align:left}
.reorder-toggle{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer}
.reorder-toggle input{width:16px;height:16px;cursor:pointer}
.photo-card{cursor:pointer}
.photo-strip:not(.reorder-active) .photo-tools{display:none}

/* Fix (2026-09-15 revision 2 follow-up): the "Use as cover" pill/badge used
   to float absolutely over the bottom of the photo, sized for a card whose
   only other controls lived in a fixed-height .photo-tools row. Now that
   .photo-tools (Earlier/Later) can appear or disappear under the toggle, an
   absolutely-positioned pill anchored to the card's bottom edge overlapped
   and intercepted clicks on the reorder buttons once they were shown. Normal
   document flow avoids that overlap entirely regardless of toggle state.
   Higher-specificity selector wins over the earlier absolute-position rule. */
#photoStrip .photo-card{padding-bottom:0}
#photoStrip .photo-card > .cover-choice{position:static;display:block;width:calc(100% - 14px);margin:7px auto;left:auto;right:auto;bottom:auto}

/* ---- 2026-09-15 visual redesign: honest proof strip repositioned, new
   occasions strip (10 themes), tighter cross-page rhythm, and CLS/perf
   basics. See DESIGN-TEARDOWN.md for the competitor comparison this pass
   was built against. Landing-page copy itself comes from
   businesses/colorpix/content/landing-page-v2.md (Sparky-approved). ---- */

/* Static hero images ship width/height attributes (see index.html) so the
   browser reserves their box before the stylesheet or webfonts load --
   this rule just keeps that reserved ratio in sync with the rendered size. */
.book-page img{aspect-ratio:3/4}

/* Occasions strip: the 10 finalized theme names as their own section
   (landing-page-v2.md section 3), mirroring My Colorful World's "shop by
   occasion" idea without needing sub-pages. Reuses the same labels app.js
   renders in the theme-picker step, so the promise here matches step 2
   exactly. */
.occasions{width:min(1060px,calc(100% - 36px));margin:0 auto var(--space-7);text-align:left}
.occasions-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.occasions-list li{display:flex;align-items:center;gap:10px;padding:15px 22px;border:var(--card-border);border-radius:999px;background:#fff;box-shadow:var(--card-shadow);font-size:.95rem;font-weight:700;color:var(--ink)}
.occasions-list li span{display:inline-flex;align-items:center;justify-content:center;width:24px;flex:0 0 auto}
.occasions-list li span{color:var(--coral);font-size:1.05rem;line-height:1}
.occasions-caption{margin:var(--space-3) 0 0;color:var(--muted);font-size:.84rem;max-width:560px}
@media(max-width:600px){.occasions-list li{padding:9px 13px;font-size:.8rem}}

/* Mobile-specific tightening pass (390px): the proof strip, occasions strip,
   how-it-works grid and price card all stack to one column on narrow
   viewports, which is naturally taller than the desktop grid -- these
   overrides trim padding/line-height on the stacked mobile layout so adding
   the two new sections (proof, occasions) doesn't blow the mobile scroll out
   further than necessary. */
@media(max-width:480px){
  .how-grid article{padding:18px 16px}
  .how-grid article>span{margin-bottom:12px}
  .ai-made p{line-height:1.6;font-size:.92rem}
  .offer-card li{padding:7px 0 7px 22px}
  .offer-card ul{margin:14px 0}
  .confidence-strip div{padding:14px}
  .confidence-strip span{font-size:.76rem;line-height:1.5}
  .occasions-list{gap:8px}
}