/* ══════════════════════════════════════════════════════════════════════════
   COZY — marketing home (index.html)                 created 2026-08-02
   ─────────────────────────────────────────────────────────────────────────
   The last surface, and the one the founder deliberately saved: *"personally
   it is the most beautiful from the old iteration, even though it screams
   SaaS and AI so much but also cliché — that is why our overhaul is here in
   the first place."*

   That brief is the whole design problem, and it splits cleanly:

   KEEP — this is what made it beautiful and none of it is the cliché:
     · a full-viewport animated canvas backdrop (atmosphere, depth, motion)
     · big confident headline type and generous vertical rhythm
     · a sense of space around everything

   REPLACE — this is what made it read as generic AI SaaS:
     · 🔴 purple nebulas (`rgba(79,60,180)`, `rgba(160,60,220)`) — PURPLE IS
       BANNED, and a violet nebula is the single most recognisable AI-startup
       cliché there is. It was also the dominant hue of the hero.
     · glassmorphism (`backdrop-filter: blur`) — the other one
     · near-black `#04040a` and the generic `#4f9cf9` blue
     · emoji product icons (🧠 🔑 🪄 📚 💬)
     · a symmetric pastel-icon card grid — named on Design Language's Don't list
     · monospace type, and a `fetch()` snippet on a product whose entire promise
       is "ไม่ต้องเขียนโค้ด" (no code needed). That snippet argued against the
       headline directly above it.

   THE MOVE: the atmosphere stays, its VOCABULARY changes. The canvas already
   drew drifting clouds in light mode; Design Language already specifies
   "fluffy cartoon clouds drift across the sky" for comic night. So the same
   backdrop becomes a cozy sky — warm day, or navy night with soft clouds and
   a few gentle stars — and the nebula divs are deleted outright.

   Sections reuse the app's own primitives on purpose (hue-railed rows from the
   KB page, numbered steps from the Guide) so the marketing page and the
   product stop looking like two different companies — audit Finding 1.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'Baloo 2','Baloo Thai 2',-apple-system,BlinkMacSystemFont,'Segoe UI','Sarabun',sans-serif;
  font-size:var(--cz-t-md); line-height:var(--cz-lh);
  color:var(--cz-ink); background:var(--cz-paper);
  min-height:100vh; overflow-x:hidden;
}
/* the canvas sits behind everything; the grain rides on top of it so the page
   still reads as paper rather than as a screen */
#starfield{ position:fixed; inset:0; z-index:0; pointer-events:none; }
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(var(--cz-halftone) 1.3px, transparent 1.5px);
  background-size:15px 15px;
}
/* nav is deliberately NOT in this list — it needs `position:sticky`, and a
   later `position:relative` here would silently beat it. */
.hero, section, .cta-band, footer, .proof, .confirm-banner{ position:relative; z-index:2; }

/* ── nav ───────────────────────────────────────────────────────────────────*/
/* Sticky, because this is a long page whose primary CTA lives in the bar — a
   visitor who has just read the pricing or the trust answers is exactly the
   one most likely to act, and they should not have to scroll back up to do it.
   z-index sits above the sections (2) and the fixed halftone overlay (1), and
   below the profile dropdown it contains (40). */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--cz-s3);
  height:60px; padding:0 var(--cz-s4);
  background:var(--cz-chrome); border-bottom:1px solid var(--cz-line);
  transition:box-shadow .18s ease;
}
/* The bar is opaque and the same tone as the page top, so at rest it should
   look like part of the paper — the shadow only appears once it is actually
   floating over content, which is the moment it needs to separate. */
nav.is-stuck{ box-shadow:var(--cz-e2); }
.nav-logo{
  font-size:var(--cz-t-xl); font-weight:800; letter-spacing:-.01em;
  color:var(--cz-ink); text-decoration:none; line-height:var(--cz-lh-tight);
}
.nav-logo span{ color:var(--cz-teal-d); }
.nav-links{ display:flex; gap:var(--cz-s3); margin-left:var(--cz-s2); }
.nav-links a{
  font-size:var(--cz-t-sm); font-weight:700; color:var(--cz-muted); text-decoration:none;
}
.nav-links a:hover{ color:var(--cz-ink); }
.nav-actions{ display:flex; align-items:center; gap:var(--cz-s2); margin-left:auto; }

nav [data-theme-btn]{
  cursor:pointer; font-family:inherit; font-size:var(--cz-t-md);
  padding:7px 11px; color:var(--cz-muted);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-radius:var(--cz-r-sm); box-shadow:var(--cz-e1);
}
nav [data-theme-btn]:hover{ color:var(--cz-ink); }
/* identical treatment to the app topbar and the login page — same control,
   same object, everywhere */
nav [data-lang-toggle]{
  cursor:pointer; font-family:inherit;
  font-size:var(--cz-t-xs); font-weight:900; letter-spacing:.05em; line-height:1;
  padding:8px 13px; color:var(--cz-ink); background:var(--cz-panel);
  border:1.5px solid var(--cz-ink); border-radius:var(--cz-pill);
  box-shadow:2px 2px 0 var(--cz-ink);
  transition:transform .1s, box-shadow .1s, background .12s;
}
nav [data-lang-toggle]:hover{ background:var(--cz-panel-2); }
nav [data-lang-toggle]:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--cz-ink); }

.btn-ghost, .btn-tools{
  font-size:var(--cz-t-sm); font-weight:800; text-decoration:none;
  padding:9px var(--cz-s3); color:var(--cz-ink);
  background:var(--cz-panel-2); border:1px solid var(--cz-line);
  border-radius:var(--cz-r-sm); box-shadow:var(--cz-e1);
}
.btn-cta{
  font-size:var(--cz-t-sm); font-weight:800; text-decoration:none;
  padding:9px var(--cz-s4); color:var(--cz-on-fill);
  background:var(--cz-teal-d); border:1px solid var(--cz-line);
  border-radius:var(--cz-r-sm); box-shadow:var(--cz-e1);
}
html.light .btn-cta{ color:#FFFFFF; }
.nav-avatar{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-weight:900;
  color:var(--cz-on-fill); background:var(--cz-ochre);
  border:1px solid var(--cz-line); box-shadow:var(--cz-e1);
}
.avatar-wrap{ position:relative; }
.profile-menu{
  display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:220px;
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-radius:var(--cz-r); box-shadow:var(--cz-e2); padding:var(--cz-s1); z-index:40;
}
.profile-menu.open{ display:flex; flex-direction:column; gap:2px; }
.profile-menu-email{ font-size:var(--cz-t-xs); color:var(--cz-muted); padding:var(--cz-s2); }
.profile-menu-label{ font-size:var(--cz-t-xs); color:var(--cz-muted); padding:var(--cz-s1) var(--cz-s2); }
.profile-menu-item{
  font-family:inherit; font-size:var(--cz-t-sm); font-weight:700; text-align:left;
  cursor:pointer; text-decoration:none; color:var(--cz-ink);
  background:none; border:none; border-radius:var(--cz-r-sm); padding:9px var(--cz-s2);
}
.profile-menu-item:hover{ background:var(--cz-panel-2); }
.profile-menu-item.danger{ color:var(--cz-brick-d); }
.profile-menu-sep{ height:1px; background:var(--cz-line); margin:2px 0; }
.recent-icon{ width:14px; height:14px; vertical-align:-2px; }

/* ── hero ──────────────────────────────────────────────────────────────────*/
.hero{
  max-width:860px; margin:0 auto; padding:var(--cz-s6) var(--cz-s4) var(--cz-s5);
  display:flex; flex-direction:column; align-items:center; gap:var(--cz-s3);
  text-align:center;
}
.hero-mascot{
  width:96px; height:96px; padding:8px; box-sizing:content-box;
  background:var(--cz-hero); border:1px solid var(--cz-line); border-radius:50%;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.22));
  animation:cz-home-bob 4.5s ease-in-out infinite; transform-origin:center;
}
@keyframes cz-home-bob{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-6px) rotate(3deg)} }
@media (prefers-reduced-motion:reduce){ .hero-mascot{ animation:none } }

.hero-badge{
  display:inline-flex; align-items:center; gap:var(--cz-s1);
  font-size:var(--cz-t-xs); font-weight:800;
  padding:5px 13px; border-radius:var(--cz-pill);
  background:var(--cz-moss-t); color:var(--cz-ink); border:1px solid var(--cz-line);
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--cz-moss-d); }
.hero h1{
  font-size:var(--cz-t-3xl); font-weight:800; letter-spacing:-.02em;
  line-height:1.25; color:var(--cz-ink); max-width:18ch;
}
.hero h1 span{ color:var(--cz-clay-d); }
.hero > p{
  font-size:var(--cz-t-lg); color:var(--cz-muted); line-height:var(--cz-lh); max-width:56ch;
}
/* Rotating platform word. `min-width` is sized to the LONGEST option
   ("Messenger") so the sentence around it never reflows mid-cycle — text
   that jumps while you are reading it is worse than no animation at all.
   inline-block is required for the transform to apply. */
.cz-rotate{
  display:inline-block; min-width:5.1em; text-align:center;
  font-weight:800; color:var(--cz-teal-d);
  transition:opacity .2s ease, transform .2s ease;
}
/* On a narrow screen the reserved width costs more than the reflow it
   prevents — the sentence is already wrapping there, so a little movement is
   invisible while a fixed gap is not. */
@media (max-width:560px){ .cz-rotate{ min-width:0; } }
.cz-rotate.is-out{ opacity:0; transform:translateY(-4px); }

.hero-actions{ display:flex; gap:var(--cz-s2); flex-wrap:wrap; justify-content:center; margin-top:var(--cz-s2); }
.btn-hero-primary{
  font-size:var(--cz-t-md); font-weight:800; text-decoration:none;
  padding:14px var(--cz-s5); color:var(--cz-on-fill);
  background:var(--cz-teal-d); border:1px solid var(--cz-line);
  border-radius:var(--cz-r-sm); box-shadow:var(--cz-e2);
  transition:transform .1s;
}
html.light .btn-hero-primary{ color:#FFFFFF; }
.btn-hero-primary:active{ transform:translateY(1px); }
.btn-hero-secondary{
  font-size:var(--cz-t-md); font-weight:800; text-decoration:none;
  padding:14px var(--cz-s4); color:var(--cz-ink);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-radius:var(--cz-r-sm); box-shadow:var(--cz-e1);
}
.proof{
  text-align:center; font-size:var(--cz-t-sm); font-weight:700;
  color:var(--cz-muted); padding:0 var(--cz-s4) var(--cz-s5);
}

/* ── sections ──────────────────────────────────────────────────────────────*/
section{ padding:var(--cz-s5) var(--cz-s4); }
.section-inner{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:var(--cz-s3); }
.section-label{
  font-size:var(--cz-t-xs); font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--cz-muted);
}
.section-title{
  font-size:var(--cz-t-2xl); font-weight:800; letter-spacing:-.02em;
  line-height:var(--cz-lh-tight); color:var(--cz-ink);
  padding-bottom:var(--cz-s1); border-bottom:3px solid var(--cz-hue, var(--cz-teal));
}
.section-sub{ font-size:var(--cz-t-md); color:var(--cz-muted); line-height:var(--cz-lh); max-width:64ch; }
#products{ --cz-hue:var(--cz-teal); }
#how-it-works{ --cz-hue:var(--cz-ochre); }

/* NOTE: the five-pillar product grid is GONE, not restyled. It showed a
   stranger an internal architecture map (Prompt Control Center, Env Box,
   Proxy…) in which three of five cards said "coming soon" — an unfinished
   catalogue of things a shop owner never asked for. Design Language also
   names "symmetric pastel-icon card grids" on its Don't list. The pillars get
   their own SEO pages later; the homepage sells the outcome.
   Section hues, still used by the remaining sections: */
#demo{ --cz-hue:var(--cz-teal); }
#honest{ --cz-hue:var(--cz-clay); }
#how-it-works{ --cz-hue:var(--cz-ochre); }
#pricing{ --cz-hue:var(--cz-moss); }
#trust{ --cz-hue:var(--cz-sky); }
#faq{ --cz-hue:var(--cz-olive); }

.demo-note, .token-note, .ent-line{
  font-size:var(--cz-t-sm); color:var(--cz-muted); text-align:center; line-height:var(--cz-lh);
}
.token-note{ margin-top:var(--cz-s2); }

/* ── "not only shops" ──────────────────────────────────────────────────────
   Three unlike knowledge bases side by side is the most compact possible
   proof of D-013's actual thesis — that the differentiator is *being a
   flexible system rather than a fixed-shape tool* (its own Notion
   comparison). Showing them adjacent does more work than any sentence could.
   This IS a symmetric card grid, which Design Language's Don't list warns
   about — allowed here precisely because the symmetry is the argument: three
   things that look structurally identical and are about completely different
   subjects. That is the point being made, not a layout convenience. */
#anyone{ --cz-hue:var(--cz-clay); }
.anyone-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--cz-s3);
}
.anyone-card{
  display:flex; flex-direction:column; gap:var(--cz-s1);
  padding:var(--cz-s4);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-top:4px solid var(--cz-hue, var(--cz-teal));
  border-radius:var(--cz-r); box-shadow:var(--cz-e1);
}
.anyone-ico{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:var(--cz-s1);
  border-radius:13px; border:1px solid var(--cz-line);
  color:var(--cz-on-fill); background:var(--cz-hue, var(--cz-teal));
}
.anyone-ico svg{ width:23px; height:23px; }
.anyone-card h4{
  font-size:var(--cz-t-lg); font-weight:800; color:var(--cz-ink); line-height:var(--cz-lh-tight);
}
.anyone-card p{ font-size:var(--cz-t-sm); color:var(--cz-muted); line-height:var(--cz-lh); }
/* the D&D card's extra line talks about CONSISTENCY, not accuracy — the
   anti-hallucination guarantee above is commerce-scoped and must not leak
   down here (D-010) */
.anyone-note{
  margin-top:var(--cz-s1); font-size:var(--cz-t-xs); font-weight:700;
  color:var(--cz-ink); background:var(--cz-ochre-t);
  border:1px solid var(--cz-line); border-radius:var(--cz-r-sm);
  padding:6px var(--cz-s2); line-height:var(--cz-lh);
}
.anyone-foot{
  font-size:var(--cz-t-md); color:var(--cz-muted); line-height:var(--cz-lh); text-align:center;
}

/* ── pricing ───────────────────────────────────────────────────────────────
   THB, at the founder's 1 USD = ฿36 baseline. Plans & Limits is explicit that
   converted USD "reads as a foreign product" to a Thai buyer — on the page
   that decides the sale, that is a conversion leak, so these are baht.
   Free is listed FIRST and given equal weight on purpose: D-003 makes the
   free tier deliberately generous (BYOK means tokens cost Strakus nothing),
   which makes it the strongest thing on the page, not a lead-in to the paid
   ones. */
.plans{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--cz-s3);
}
.plan{
  position:relative; display:flex; flex-direction:column; gap:var(--cz-s2);
  padding:var(--cz-s4);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-top:4px solid var(--cz-line);
  border-radius:var(--cz-r); box-shadow:var(--cz-e1);
}
.plan--popular{ border-top-color:var(--cz-moss); box-shadow:var(--cz-e2); }
.plan-tag{
  position:absolute; top:-11px; left:var(--cz-s4);
  font-size:var(--cz-t-xs); font-weight:800; padding:3px 11px;
  border-radius:var(--cz-pill); background:var(--cz-moss-t);
  color:var(--cz-ink); border:1px solid var(--cz-line);
}
.plan-name{ font-size:var(--cz-t-sm); font-weight:800; color:var(--cz-muted); letter-spacing:.04em; }
.plan-price{
  font-size:var(--cz-t-2xl); font-weight:800; color:var(--cz-ink);
  line-height:var(--cz-lh-tight); font-variant-numeric:tabular-nums;
}
.plan-price small{ font-size:var(--cz-t-sm); font-weight:700; color:var(--cz-muted); }
.plan-lines{ list-style:none; display:flex; flex-direction:column; gap:var(--cz-s1); }
.plan-lines li{
  font-size:var(--cz-t-sm); color:var(--cz-ink); line-height:var(--cz-lh);
  padding-left:var(--cz-s3); position:relative;
}
.plan-lines li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--cz-moss);
}

/* ── trust ─────────────────────────────────────────────────────────────────
   The conversion barrier, per Trust as the Conversion Barrier: BYOK's real
   objection is "you want me to hand you my API key?" and everything else is
   downstream of clearing it. Written as question → straight answer, because
   that is also the shape a generative engine quotes.
   ⚠️ "Your data is fully isolated" is deliberately NOT here — RLS is not
   verified across every table, and an overstating trust page is worse than
   none. Do not add it until that is closed. */
.trust-rows{ display:flex; flex-direction:column; gap:var(--cz-s2); }
.trust-row{
  display:flex; gap:var(--cz-s3); align-items:flex-start;
  padding:var(--cz-s3);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-left:5px solid var(--cz-sky); border-radius:var(--cz-r); box-shadow:var(--cz-e1);
}
.trust-ico{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--cz-line);
  background:var(--cz-sky-t); color:var(--cz-sky-d);
}
.trust-ico svg{ width:20px; height:20px; }
.trust-row h4{
  font-size:var(--cz-t-md); font-weight:800; color:var(--cz-ink);
  line-height:var(--cz-lh-tight); margin-bottom:2px;
}
.trust-row p{ font-size:var(--cz-t-sm); color:var(--cz-muted); line-height:var(--cz-lh); }

/* ── FAQ ───────────────────────────────────────────────────────────────────
   Question-format, and expanded by default is deliberate: the SEO TODO says
   the homepage needs more INDEXABLE content, and collapsed <details> content
   is still in the DOM but reads as hidden to some crawlers. These stay open
   with a toggle, so the text is unambiguously present. */
.faq-list{ display:flex; flex-direction:column; gap:var(--cz-s2); }
.faq-item{
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-radius:var(--cz-r-sm); box-shadow:var(--cz-e1); overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:var(--cz-s3);
  font-size:var(--cz-t-md); font-weight:800; color:var(--cz-ink); line-height:var(--cz-lh);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ background:var(--cz-panel-2); }
.faq-item p{
  padding:0 var(--cz-s3) var(--cz-s3);
  font-size:var(--cz-t-md); color:var(--cz-muted); line-height:var(--cz-lh); max-width:70ch;
}

/* ── how it works: the Guide's numbered steps ──────────────────────────────*/
.steps{ display:flex; flex-direction:column; gap:var(--cz-s3); }
.step{
  display:flex; gap:var(--cz-s3); align-items:flex-start;
  padding:var(--cz-s4);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-radius:var(--cz-r); box-shadow:var(--cz-e1);
}
.step-num{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  font-size:var(--cz-t-lg); font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--cz-on-fill); border-radius:50%;
  border:1px solid var(--cz-line); box-shadow:var(--cz-e1);
  background:var(--cz-sky);
}
.step:nth-child(2) .step-num{ background:var(--cz-ochre); }
.step:nth-child(3) .step-num{ background:var(--cz-moss); }
.step:nth-child(4) .step-num{ background:var(--cz-clay); }
.step h4{
  font-size:var(--cz-t-lg); font-weight:800; color:var(--cz-ink);
  line-height:var(--cz-lh-tight); margin-bottom:var(--cz-s1);
}
.step p{ font-size:var(--cz-t-md); color:var(--cz-muted); line-height:var(--cz-lh); max-width:62ch; }

/* ── the LINE preview that replaced the code block ─────────────────────────
   A `fetch()` snippet on a page whose headline promises "no code" argued
   against itself. This shows the thing the product actually produces: a
   customer message and the bot's reply, in LINE. Same bubble language as the
   Editor's Playground, so it is the product, not an illustration of it. */
.line-demo{
  max-width:420px; margin:0 auto; padding:var(--cz-s3);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-radius:var(--cz-r-lg); box-shadow:var(--cz-e2);
}
.line-demo-head{
  display:flex; align-items:center; gap:var(--cz-s2);
  padding-bottom:var(--cz-s2); border-bottom:1px solid var(--cz-line); margin-bottom:var(--cz-s3);
}
.line-demo-head .ava{
  width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--cz-hero); border:1px solid var(--cz-line);
}
.line-demo-head .ava svg{ width:19px; height:19px; color:var(--cz-teal); }
.line-demo-head .nm{ font-size:var(--cz-t-sm); font-weight:800; }
.line-demo-head .on{
  margin-left:auto; display:flex; align-items:center; gap:5px;
  font-size:var(--cz-t-xs); font-weight:800; color:var(--cz-moss-d);
}
.line-demo-head .on i{ width:8px; height:8px; border-radius:50%; background:var(--cz-moss); }
.line-msgs{ display:flex; flex-direction:column; gap:var(--cz-s2); }
.line-msg{
  max-width:86%; padding:10px var(--cz-s3);
  font-size:var(--cz-t-sm); line-height:var(--cz-lh);
  border:1px solid var(--cz-line); border-radius:15px; color:var(--cz-ink);
}
.line-msg.them{ align-self:flex-end; background:var(--cz-sky-t); border-bottom-right-radius:4px; }
.line-msg.bot{ align-self:flex-start; background:var(--cz-teal-t); border-bottom-left-radius:4px; }
.line-msg b{ font-weight:900; }

/* the snippet kept, demoted to an opt-in detail for the developer audience */
.dev-details{
  max-width:640px; margin:var(--cz-s4) auto 0;
  border:1px solid var(--cz-line); border-radius:var(--cz-r);
  background:var(--cz-panel-2); overflow:hidden;
}
.dev-details summary{
  cursor:pointer; list-style:none; padding:var(--cz-s3);
  font-size:var(--cz-t-sm); font-weight:800; color:var(--cz-muted);
}
.dev-details summary::-webkit-details-marker{ display:none; }
.dev-details summary:hover{ color:var(--cz-ink); }
.dev-details pre{
  margin:0; padding:var(--cz-s3); overflow-x:auto;
  font-family:'SF Mono','Fira Code',monospace;
  font-size:var(--cz-t-xs); line-height:var(--cz-lh);
  background:var(--cz-hero); color:#E8E2D2;
}
.dev-details .c-dim{ color:#93A7B5; }
.dev-details .c-blue{ color:#9FC6EE; }
.dev-details .c-string{ color:#B8D9A8; }
.dev-details .c-yellow{ color:#E8C97A; }

/* ── CTA + footer ──────────────────────────────────────────────────────────*/
.cta-band{ padding:var(--cz-s6) var(--cz-s4); }
.cta-inner{
  max-width:720px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--cz-s2);
  padding:var(--cz-s5) var(--cz-s4);
  background:var(--cz-hero); color:#F7EFDD;
  border:1px solid rgba(0,0,0,.25); border-radius:var(--cz-r-lg); box-shadow:var(--cz-e2);
}
.cta-inner h2{ font-size:var(--cz-t-2xl); font-weight:800; letter-spacing:-.02em; line-height:var(--cz-lh-tight); }
.cta-inner p{ font-size:var(--cz-t-md); color:#C3D3DA; line-height:var(--cz-lh); }
.cta-inner .btn-hero-secondary{ background:rgba(255,255,255,.1); color:#F7EFDD; border-color:rgba(255,255,255,.25); }

footer{
  display:flex; align-items:center; gap:var(--cz-s3); flex-wrap:wrap;
  max-width:900px; margin:0 auto; padding:var(--cz-s5) var(--cz-s4) var(--cz-s6);
  border-top:1px solid var(--cz-line);
}
.footer-logo{ font-size:var(--cz-t-lg); font-weight:800; color:var(--cz-ink); }
.footer-logo span{ color:var(--cz-teal-d); }
.footer-links{ display:flex; gap:var(--cz-s3); margin-left:auto; flex-wrap:wrap; }
.footer-links a{ font-size:var(--cz-t-sm); font-weight:700; color:var(--cz-muted); text-decoration:none; }
.footer-links a:hover{ color:var(--cz-ink); }
.footer-copy{ font-size:var(--cz-t-sm); color:var(--cz-faint); width:100%; }

/* ── email-confirmation banner ─────────────────────────────────────────────*/
.confirm-banner{
  display:none; max-width:520px; margin:var(--cz-s4) auto 0;
  padding:var(--cz-s4); text-align:center;
  flex-direction:column; align-items:center; gap:var(--cz-s2);
  background:var(--cz-panel); border:1px solid var(--cz-line);
  border-radius:var(--cz-r); box-shadow:var(--cz-e1);
}
.confirm-banner.show{ display:flex; }
.confirm-banner.ok{ background:var(--cz-moss-t); }
.confirm-banner.err{ background:var(--cz-brick-t); }
.confirm-banner p{ font-size:var(--cz-t-md); color:var(--cz-ink); line-height:var(--cz-lh); }

@media (max-width:640px){
  .hero h1{ font-size:var(--cz-t-2xl); }
  .product-card{ grid-template-columns:auto 1fr; }
  .product-tag{ grid-column:2; justify-self:start; }
  .step{ flex-direction:column; }
  footer{ flex-direction:column; align-items:flex-start; }
  .footer-links{ margin-left:0; }
}