/* ============================================================
   Web Wizard — home.css (homepage only). Mobile-first.
   ============================================================ */

/* ---------- hero ---------- */
.hero{ position:relative; overflow-x:clip; padding-top:clamp(112px, 16vw, 150px); padding-bottom:clamp(40px, 8vw, 80px); }
.hero-grid{ display:grid; gap:clamp(40px, 6vw, 56px); align-items:center; }
.hero-title{ font-size:clamp(2.75rem, 7vw, 7.25rem); letter-spacing:-.022em; }
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.hero-title .line > span{ display:inline-block; }
.hero-sub{ margin-top:clamp(20px, 3vw, 32px); max-width:36ch; }
.hero-actions{ margin-top:clamp(28px, 4vw, 40px); }

/* Load choreography: nav drops, the headline rises out of its masks,
   then the copy and the stage. CSS only, so nothing waits on a script. */
@media (prefers-reduced-motion:no-preference){
  .js .site-nav{ animation:nav-drop .8s var(--ease-out) both; }
  .js .hero-title .line > span{ animation:rise 1s var(--ease-out) both; }
  .js .hero-title .line:nth-child(1) > span{ animation-delay:.12s; }
  .js .hero-title .line:nth-child(2) > span{ animation-delay:.22s; }
  .js .hero-title .line:nth-child(3) > span{ animation-delay:.32s; }
  .js .hero-sub{ animation:fade-up .9s var(--ease-out) .55s both; }
  .js .hero-actions{ animation:fade-up .9s var(--ease-out) .68s both; }
  .js .hero-stage{ animation:stage-in 1.2s var(--ease-out) .25s both; }
}
@keyframes nav-drop{ from{ transform:translateY(-120%); } }
@keyframes rise{ from{ transform:translateY(108%); } }
@keyframes fade-up{ from{ opacity:0; transform:translateY(18px); } }
@keyframes stage-in{ from{ opacity:0; } }

/* ---------- the conjure stage ---------- */
.hero-stage{
  position:relative; margin:0; min-height:clamp(470px, 118vw, 560px);
  display:grid; place-items:center; isolation:isolate;
}
/* gold light falling on the stage */
.hero-stage::before{
  content:""; position:absolute; inset:-12% -20% -6%; z-index:-1; pointer-events:none;
  background:
    conic-gradient(from 196deg at 62% -6%, transparent 0deg, var(--glint-soft) 6deg, transparent 13deg, var(--glint-soft) 22deg, transparent 30deg, var(--gold-soft) 40deg, transparent 52deg),
    radial-gradient(closest-side at 50% 55%, var(--gold-soft), transparent 72%);
  -webkit-mask:radial-gradient(closest-side, #000 40%, transparent); mask:radial-gradient(closest-side, #000 40%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  .hero-stage::before{ animation:sway 14s var(--ease-in-out) infinite alternate; }
}
@keyframes sway{ to{ transform:rotate(4deg) scale(1.04); } }

.phone{
  position:relative; width:clamp(196px, 52vw, 290px); padding:9px; border-radius:42px;
  background:var(--panel-raised); border:1px solid var(--hairline-strong);
  box-shadow:var(--shadow-lift), 0 40px 120px -40px rgba(198,129,39,.55);
}
.phone::after{ /* the speaker slot */
  content:""; position:absolute; top:16px; left:50%; width:28%; height:6px; transform:translateX(-50%);
  border-radius:var(--r-full); background:var(--void); opacity:.85;
}
.phone__screen{
  position:relative; overflow:hidden; border-radius:33px; aspect-ratio:390 / 844;
  background:var(--screen, var(--panel)); transition:background-color .8s linear;
}
.phone__shot{ width:100%; height:100%; object-fit:cover; object-position:top; transition:opacity .7s var(--ease-out); }
.hero-stage .phone{ transform:translateX(-12%); }
.hero-stage.is-conjuring .phone__shot{ opacity:0; }
.hero-stage.is-conjuring.is-shown .phone__shot{ opacity:1; }
.conjure-badge{
  position:absolute; right:2%; bottom:10%; width:clamp(108px, 30vw, 188px); border-radius:50%; z-index:2;
  box-shadow:0 0 0 1px var(--hairline-strong), 0 24px 60px -20px var(--shade), 0 0 60px -10px rgba(198,129,39,.45);
  cursor:pointer;
}
.conjure-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.hero-caption{
  position:absolute; left:0; right:0; bottom:-30px; text-align:center;
  font-size:.8125rem; color:var(--muted);
}
.hero-caption a{ color:var(--glint); }

@media (min-width:1024px){
  .hero{ min-height:100dvh; display:flex; align-items:center; }
  .hero > .wrap{ width:100%; }
  .hero-grid{ grid-template-columns:1.22fr .78fr; }
  .hero-stage{ min-height:620px; }
  .hero-stage .phone{ transform:translateX(-16%); }
  .conjure-badge{ right:-4%; bottom:8%; }
}

/* ---------- promises under the hero ---------- */
.promises{ padding-block:8px 32px; }
.promise-row{ display:grid; gap:12px; font-size:.9375rem; color:var(--text); }
.promise-row li{ display:flex; align-items:center; gap:12px; }
.promise-star{ width:16px; height:16px; color:var(--gold); flex:none; }
@media (min-width:900px){
  .promise-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 44px; }
}

/* ---------- velocity marquee (React Bits ScrollVelocity) ---------- */
.velocity{
  overflow:hidden; padding-block:clamp(24px, 5vw, 56px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.velocity-track{ display:flex; width:max-content; will-change:transform; }
.velocity-row{
  display:flex; align-items:center; gap:.4em; padding-right:.4em; white-space:nowrap;
  font-family:var(--font-display); font-size:clamp(2.8rem, 9vw, 8.5rem); font-weight:300; line-height:1.05;
  letter-spacing:-.03em; color:var(--ink); font-variation-settings:'opsz' 144;
}
.velocity-row span:nth-of-type(even){ color:transparent; -webkit-text-stroke:1px var(--hairline-strong); }
.velocity-star{ width:.34em; height:.34em; color:var(--gold); flex:none; }

/* ---------- the honest checklist ---------- */
.audit-grid{ display:grid; gap:40px; }
.audit-head .lead{ margin-top:20px; color:var(--muted); }
.audit-list{ display:grid; gap:12px; }
.check{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; cursor:pointer;
  padding:20px; border-radius:var(--r-md); border:1px solid var(--hairline); background:var(--panel);
  transition:border-color var(--dur-mid) linear, background-color var(--dur-mid) linear, transform var(--dur-fast) var(--ease-out);
}
.check:active{ transform:scale(.99); }
.check input{ position:absolute; opacity:0; width:1px; height:1px; }
.check:has(input:focus-visible){ outline:2px solid var(--glint); outline-offset:3px; }
.check-box{
  width:30px; height:30px; border-radius:var(--r-full); display:grid; place-items:center; margin-top:2px;
  border:1.5px solid var(--hairline-strong); color:var(--void);
  transition:background-color var(--dur-mid) linear, border-color var(--dur-mid) linear;
}
.check-box svg{ width:16px; height:16px; stroke-width:3; opacity:0; transform:scale(.4); transition:opacity var(--dur-mid) linear, transform var(--dur-mid) var(--ease-out); }
.check-text strong{ display:block; font-size:1.0625rem; font-weight:600; color:var(--ink); line-height:1.35; }
.check-text span{ display:block; margin-top:6px; font-size:.9375rem; color:var(--muted); line-height:1.6; }
.check:has(input:checked){ border-color:var(--glint); background:var(--panel-raised); }
.check:has(input:checked) .check-box{ background:var(--gold); border-color:var(--gold); }
.check:has(input:checked) .check-box svg{ opacity:1; transform:none; }
@media (hover:hover){ .check:hover{ border-color:var(--hairline-strong); } }
.audit-tally{ margin-top:32px; display:grid; gap:12px; justify-items:start; }
.tally-count{ display:flex; align-items:baseline; gap:12px; color:var(--muted); }
.tally-count b{ font-family:var(--font-display); font-size:clamp(3.5rem, 8vw, 5rem); font-weight:300; line-height:1; color:var(--glint); font-variation-settings:'opsz' 144; }
.tally-msg{ color:var(--text); max-width:36ch; }
@media (min-width:960px){
  .audit-grid{ grid-template-columns:.92fr 1.08fr; gap:80px; }
  .audit-head{ position:sticky; top:120px; align-self:start; }
}

.stats{ display:grid; gap:40px; margin-top:var(--s-xl); }
.stat{ margin:0; }
.stat-num{
  font-family:var(--font-display); font-size:clamp(4.5rem, 13vw, 9rem); font-weight:200; line-height:.9; color:var(--glint);
  letter-spacing:-.04em; font-variation-settings:'opsz' 144;
}
.stat figcaption{ margin-top:16px; max-width:34ch; color:var(--text); }
.stat cite{ display:block; margin-top:8px; font-style:normal; font-size:.8125rem; color:var(--muted); }
.stats-close{ max-width:58ch; color:var(--muted); }
@media (min-width:860px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stats-close{ grid-column:1 / -1; }
}

/* ---------- how it works ---------- */
.process{ position:relative; padding-block:var(--s-section); }
.process-head .lead{ margin-top:18px; }
.process-track{ display:grid; gap:72px; margin-top:56px; padding-inline:var(--gutter); max-width:calc(var(--max) + var(--gutter) * 2); margin-inline:auto; }
.step{ display:grid; gap:28px; }
.step-num{
  display:block; font-family:var(--font-display); font-size:clamp(4rem, 9vw, 7rem); font-weight:200; line-height:.85;
  color:var(--gold); letter-spacing:-.04em; font-variation-settings:'opsz' 144;
}
.step-copy h3{ margin-top:14px; }
.step-copy p{ margin-top:12px; color:var(--muted); max-width:40ch; }
.step-note{ margin-top:14px; font-size:.8125rem; color:var(--muted); }
.browser{ border-radius:20px; overflow:hidden; border:1px solid var(--hairline-strong); background:var(--panel-raised); box-shadow:var(--shadow-lift); }
.browser-bar{ display:flex; gap:7px; padding:12px 14px; }
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:var(--hairline-strong); }
.browser img{ width:100%; }
.step-visual--phone{ display:grid; justify-items:center; }
.phone--small{ width:clamp(170px, 46vw, 230px); }
.process-progress{ display:none; }
@media (min-width:900px){
  .step{ grid-template-columns:.8fr 1.2fr; align-items:center; gap:56px; }
}
/* Pinned and panned sideways (set by home.js when it can run smoothly). */
.process.is-pinned{ padding-block:0; }
.process.is-pinned .process-inner{ height:100dvh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.process.is-pinned .process-head{ flex:none; }
.process.is-pinned .process-track{
  display:flex; gap:0; width:max-content; max-width:none; margin:clamp(24px, 4vh, 48px) 0 0; padding-inline:var(--gutter);
}
.process.is-pinned .step{ width:min(82vw, 1080px); flex:none; padding-right:7vw; }
.process.is-pinned .browser img{ max-height:52vh; object-fit:cover; object-position:top; }
.process.is-pinned .phone--small{ width:clamp(160px, 15vw, 210px); }
.process.is-pinned .process-progress{
  display:block; position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(20px, 5vh, 48px); height:2px;
  background:var(--hairline); border-radius:2px; overflow:hidden; max-width:var(--max); margin-inline:auto;
}
.process-progress span{ display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--glint)); transform-origin:left; transform:scaleX(0); }

/* ---------- demo deck ---------- */
.deck-sec{ overflow-x:clip; }
.deck-head{ display:grid; gap:16px; justify-items:start; }
.deck-all{ font-weight:600; }
.deck{
  display:flex; gap:24px; margin-top:40px; padding:12px var(--gutter) 32px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
}
.deck::-webkit-scrollbar{ display:none; }
.deck-slot{ flex:0 0 min(78vw, 420px); scroll-snap-align:center; }
.deck-caption{ display:flex; justify-content:space-between; gap:12px; padding:14px 6px 4px; font-size:.875rem; color:var(--muted); }
.deck-caption b{ color:var(--ink); font-weight:600; }
@media (min-width:1024px){
  .deck{ display:block; position:relative; height:clamp(380px, 34vw, 520px); overflow:visible; padding:0; margin-top:56px; }
  .deck-slot{
    position:absolute; left:50%; top:4%; width:min(23vw, 380px);
    --x:0%; --y:0%; --r:0deg;
    transform:translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r));
    transition:z-index 0s linear .2s;
  }
  .deck-slot:nth-child(1){ --x:-148%; --y:12%; --r:-8deg; z-index:1; }
  .deck-slot:nth-child(2){ --x:-76%; --y:3%; --r:-4deg; z-index:2; }
  .deck-slot:nth-child(3){ --x:0%; --y:0%; --r:0deg; z-index:3; }
  .deck-slot:nth-child(4){ --x:76%; --y:3%; --r:4deg; z-index:2; }
  .deck-slot:nth-child(5){ --x:148%; --y:12%; --r:8deg; z-index:1; }
  .deck-slot:hover,.deck-slot:focus-within{ z-index:5; transition-delay:0s; }
}

/* ---------- promise ledger ---------- */
.ledger-head .lead{ margin-top:16px; }
.ledger{ display:grid; gap:12px; margin-top:48px; }
.ledger-more{ margin-top:24px; }
.ledger-item{ border-radius:var(--r-md); border:1px solid var(--hairline); background:var(--panel); }
.ledger-title{ font:inherit; }
.ledger-tab{
  width:100%; display:flex; align-items:center; gap:14px; min-height:64px; padding:18px 22px; text-align:left;
  font-family:var(--font-body); font-size:1.0625rem; font-weight:600; color:var(--ink); border-radius:var(--r-md);
}
.ledger-tab .icon{ color:var(--glint); width:22px; height:22px; }
.ledger-body{ padding:0 22px 22px; color:var(--muted); background:none; border:0; border-radius:0; overflow:visible; }
.ledger-body p + p{ margin-top:.9em; }
.ledger-icon,.ledger-big{ display:none; }
@media (min-width:960px){
  .ledger.is-tabs{ grid-template-columns:minmax(280px, .82fr) 1.3fr; gap:6px 56px; align-items:start; }
  .ledger.is-tabs .ledger-item{ display:contents; }
  .ledger.is-tabs .ledger-title{ grid-column:1; }
  .ledger.is-tabs .ledger-tab{
    min-height:58px; padding:12px 18px; border-radius:var(--r-full);
    font-family:var(--font-display); font-size:clamp(1.25rem, 1.8vw, 1.6rem); font-weight:380; color:var(--muted);
    transition:color var(--dur-mid) linear, background-color var(--dur-mid) linear;
  }
  .ledger.is-tabs .ledger-tab .icon{ opacity:.5; transition:opacity var(--dur-mid) linear; }
  .ledger.is-tabs .ledger-tab:hover{ color:var(--ink); }
  .ledger.is-tabs .ledger-tab[aria-expanded="true"]{ color:var(--ink); background:var(--panel-raised); }
  .ledger.is-tabs .ledger-tab[aria-expanded="true"] .icon{ opacity:1; }
  .ledger.is-tabs .ledger-body{
    grid-column:2; grid-row:1 / span 6; position:sticky; top:120px;
    padding:clamp(32px, 4vw, 56px); border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--panel); overflow:hidden;
  }
  .ledger.is-tabs .ledger-icon{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--glint-soft); color:var(--glint); margin-bottom:28px; }
  .ledger.is-tabs .ledger-big{ display:block; margin-bottom:22px; font-family:var(--font-display); font-size:clamp(2rem, 3.2vw, 2.9rem); font-weight:340; line-height:1.04; letter-spacing:-.025em; color:var(--ink); font-variation-settings:'opsz' 144; }
  .ledger.is-tabs .ledger-body p:not(.ledger-big){ font-size:1.0625rem; color:var(--text); max-width:56ch; }
}
@media (prefers-reduced-motion:no-preference){
  .ledger.is-tabs .ledger-body.is-new{ animation:ledger-in .55s var(--ease-out) both; }
}
@keyframes ledger-in{ from{ opacity:0; transform:translateY(14px); } }


/* ---------- FAQ ---------- */
.faq-grid{ display:grid; gap:36px; }
.faq-head p{ margin-top:16px; }
@media (min-width:960px){
  .faq-grid{ grid-template-columns:.75fr 1.25fr; gap:72px; }
  .faq-head{ position:sticky; top:120px; align-self:start; }
}

/* ---------- community ---------- */
.community .lead{ margin-top:16px; }
.community-grid{ display:grid; gap:20px; margin-top:40px; }
.community-card{ display:flex; flex-direction:column; gap:14px; padding:32px; transition:transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) linear; }
.community-card p{ color:var(--muted); }
.community-icon{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--glint-soft); color:var(--glint); }
.community-icon svg{ width:24px; height:24px; fill:currentColor; }
.community-go{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--glint); }
.community-go .icon{ transition:transform var(--dur-mid) var(--ease-out); }
.community-card:active{ transform:scale(.99); }
@media (hover:hover) and (pointer:fine){
  .community-card:hover{ transform:translateY(-4px); }
  .community-card:hover .community-go .icon{ transform:translate(3px, -3px); }
}
@media (min-width:860px){ .community-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- "scroll" circle while How it works is pinned ---------- */
.scroll-hint{ display:none; }
.process.is-pinned .scroll-hint{
  display:grid; place-items:center; position:absolute; left:50%; bottom:clamp(36px, 6vh, 64px); z-index:2;
  width:72px; height:72px; border-radius:50%; transform:translateX(-50%);
  border:1px solid var(--hairline-strong); background:var(--panel-raised); box-shadow:var(--shadow-lift);
  transition:opacity var(--dur-slow) linear, transform var(--dur-slow) var(--ease-out);
}
.process.is-pinned .scroll-hint.is-done{ opacity:0; transform:translateX(-50%) scale(.8); }
.scroll-ring{ position:absolute; inset:0; width:100%; height:100%; }
/* big, heavy, bright letters so the turning words stay readable */
.scroll-ring text{ fill:var(--ink); font:800 15px var(--font-body); letter-spacing:.06em; }
.scroll-arrow{ color:var(--glint); line-height:0; }
.scroll-arrow .icon{ width:18px; height:18px; stroke-width:2.4; }
@media (prefers-reduced-motion:no-preference){
  .scroll-ring{ animation:hint-spin 20s linear infinite; }
  .scroll-arrow{ animation:hint-bob 1.6s var(--ease-in-out) infinite; }
}
@keyframes hint-spin{ to{ transform:rotate(360deg); } }
@keyframes hint-bob{ 50%{ transform:translateY(4px); } }

/* ---------- quick estimator ---------- */
.qe-grid{ display:grid; gap:32px; align-items:start; }
.qe-head .lead{ margin-top:16px; }
.qe-more{ margin-top:20px; font-weight:600; }
.qe{ display:grid; gap:24px; padding:clamp(22px, 4vw, 40px); }
/* let the Magical Job "!" panel spill out of the card; round the spotlight glow instead of clipping it */
.qe.spot{ overflow:visible; z-index:3; }
.qe.spot::before{ border-radius:inherit; }
.qe-q{ border:0; display:grid; gap:12px; min-width:0; }
.qe-q legend{ font-size:.9375rem; font-weight:600; color:var(--ink); margin-bottom:12px; }
.qe-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.qe-opt{ position:relative; cursor:pointer; }
.qe-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.qe-opt span{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--r-full);
  border:1px solid var(--hairline-strong); background:var(--void); color:var(--text); font-size:.9375rem; font-weight:500;
  transition:background-color var(--dur-mid) linear, border-color var(--dur-mid) linear, color var(--dur-mid) linear, transform var(--dur-fast) var(--ease-out);
}
.qe-opt:active span{ transform:scale(.97); }
.qe-opt input:checked + span{ background:var(--glint-soft); border-color:var(--glint); color:var(--ink); }
.qe-opt input:focus-visible + span{ outline:2px solid var(--glint); outline-offset:3px; }
@media (hover:hover){ .qe-opt:hover span{ border-color:var(--glint); } }
.qe-industry{ margin:4px 0 0; max-width:340px; }
.qe-result{ display:grid; gap:10px; justify-items:start; padding-top:24px; border-top:1px solid var(--hairline); }
.qe-label{ font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--glint); }
.qe-figure{
  font-family:var(--font-display); font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:300; line-height:1; letter-spacing:-.03em;
  color:var(--glint); font-variation-settings:'opsz' 144; font-variant-numeric:tabular-nums;
}
.qe-note{ color:var(--muted); font-size:.875rem; max-width:46ch; }
.qe-result .btn{ margin-top:8px; }
@media (min-width:960px){
  .qe-grid{ grid-template-columns:.8fr 1.2fr; gap:72px; }
  .qe-head{ position:sticky; top:120px; }
}