/* Home page core styles. Logical properties only (RTL safe). Prefix: home-, qz-, est-, copy-. */
html{scroll-padding-block-start:84px}
.anchor{scroll-margin-block-start:76px}
.home-center{justify-content:center;margin-inline:auto}

/* ---------- hero ---------- */
.home-hero{isolation:isolate}
.home-hero .hero-in{z-index:1}
.home-hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hx{position:absolute;display:block;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hx-sky{inline-size:620px;block-size:620px;border-radius:50%;inset-block-start:-260px;inset-inline-end:-180px;background:radial-gradient(circle at 40% 40%,#CFE3F8 0%,rgba(207,227,248,0) 68%)}
.hx-beige{inline-size:520px;block-size:420px;border-radius:50%;inset-block-end:-220px;inset-inline-start:-160px;background:radial-gradient(circle at 50% 50%,#F6E9CF 0%,rgba(246,233,207,0) 70%)}
.hx-emblem{inline-size:220px;block-size:220px;inset-block-start:46%;inset-inline-start:46%;opacity:.07}
.hx-glow{position:absolute;inline-size:420px;block-size:420px;border-radius:50%;inset-inline-start:0;inset-block-start:0;margin:-210px 0 0 -210px;background:radial-gradient(circle,rgba(217,162,58,.22) 0%,rgba(217,162,58,0) 65%);opacity:0;transform:translate3d(var(--gx,50vw),var(--gy,200px),0);transition:opacity .4s}
:root[dir="rtl"] .hx-glow{margin:-210px -210px 0 0;inset-inline-start:auto;inset-inline-end:0;transform:translate3d(calc(var(--gx,50vw) * -1),var(--gy,200px),0)}
.home-hero.is-glow .hx-glow{opacity:1}
.home-hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.08;letter-spacing:-.02em}
.magnetic{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}

/* ---------- live data counters ---------- */
.home-data{margin-block-start:clamp(32px,5vw,56px)}
.home-data>h3{text-align:center;margin-block-end:var(--s-5)}
.home-stats{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.home-stat{display:flex;flex-direction:column;gap:4px;padding:var(--s-5) var(--s-6);background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-1)}
.home-stat-n{font:var(--fw-semibold) clamp(44px,6vw,64px)/1 var(--font-serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;text-align:start}
.home-stat-l{font-size:var(--fs-18);font-weight:var(--fw-semibold);color:var(--ink)}
.home-stat-s{font-size:var(--fs-15);color:var(--ink-2)}
.home-stat .source{margin-block-start:var(--s-2)}
.home-data>.hint{text-align:center;margin-block-start:var(--s-4)}

/* ---------- quiz ---------- */
.qz{display:flex;flex-direction:column;gap:var(--s-5)}
.qz[hidden]{display:none}
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.qz-step{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--muted)}
.qz-dots{display:flex;gap:6px}
.qz-dots i{inline-size:28px;block-size:6px;border-radius:6px;background:var(--border)}
.qz-dots i.is-on{background:var(--primary)}
.qz fieldset{border:0;margin:0;padding:0;min-inline-size:0}
.qz legend{font:var(--fw-semibold) var(--fs-24)/1.25 var(--font-serif);margin-block-end:var(--s-4);padding:0}
.qz .choice-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.qz .choice{min-block-size:54px;font-size:var(--fs-16)}
.qz-nav{display:flex;gap:var(--s-3);justify-content:space-between;flex-wrap:wrap}
.qz-result{margin-block-start:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4);border-color:var(--gold-line);background:var(--card-grad-gold)}
.qz-result[hidden]{display:none}
.qz-result h3{font-size:var(--fs-28)}
.qz-result .qz-why{margin:0;color:var(--ink-2);max-inline-size:60ch}
.qz-result .actions{margin:0}

/* ---------- price estimate ---------- */
.est{display:flex;flex-direction:column;gap:var(--s-5)}
.est-h{font-size:var(--fs-28);margin-block:var(--s-2)}
.est-grid{display:grid;gap:var(--s-6)}
@media (min-width:900px){.est-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.est-form{display:flex;flex-direction:column;gap:var(--s-5)}
.est-checks{display:grid;gap:8px}
.est-checks .check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card)}
.est-checks .check input{margin-block-start:3px;inline-size:18px;block-size:18px;accent-color:var(--primary);flex:none}
.est-checks .check .est-p{margin-inline-start:auto;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.est-total{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin:0}
.est-total .price{font:var(--fw-semibold) var(--fs-40)/1 var(--font-serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.est-tier{font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--primary-ink)}
.est-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-15)}
.est-lines li{display:flex;justify-content:space-between;gap:var(--s-3);border-block-end:1px dashed var(--border);padding-block:4px}
.est-lines li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.est-monthly,.est-note{margin:0;font-size:var(--fs-14);color:var(--ink-2)}
.est-note{color:var(--warn-ink)}

/* ---------- trust quick copy ---------- */
.copy-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.copy-list li{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card-2)}
.copy-k{font-size:var(--fs-14);color:var(--muted);min-inline-size:76px}
.copy-v{font-weight:var(--fw-semibold);font-size:var(--fs-16);flex:1 1 auto;overflow-wrap:anywhere}
.home-refund{align-self:start}

/* ---------- final cta ---------- */
.home-cta h2{font-size:clamp(28px,4vw,44px)}
.home-cta .actions{margin-block-start:var(--s-5)}

/* ---------- phone sticky bar ---------- */
.home-sticky{position:fixed;inset-inline:0;inset-block-end:0;z-index:55;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom,0px));background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block-start:1px solid var(--border);box-shadow:0 -6px 20px -10px rgba(16,42,67,.25);display:none}
.home-sticky[hidden]{display:none}
@media (max-width:899px){.home-sticky:not([hidden]){display:block}}

/* ---------- scroll reveal (only when JS marks the page and motion is allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js-reveal .reveal.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .magnetic,.hx{transition:none;will-change:auto}
  .hx{transform:none}
}
/* flagged blocks stay hidden until site-flags.js un-hides them, even where a class sets display */
[data-flag][hidden],[data-flag-off][hidden]{display:none!important}

/* concise home: compact service cards, folded blocks, trust card */
.home-fold{max-inline-size:none;margin-block-start:var(--s-4)}
.home-pv-fold{margin:0}
.home-trust .copy-list{margin-block-start:0}
.home-trust .copy-k{min-inline-size:5.5rem;font-weight:var(--fw-semibold)}
.home-refund{margin-block-end:var(--s-3)}

@media (max-width:899px){.hh .hh-stage{padding-inline:0}}

/* Sources strip: static wrapped list; a slow marquee only without reduced motion (and a Pause button) */
.src{overflow:hidden}
.src-track{display:flex;inline-size:max-content;max-inline-size:100%}
.src-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 12px}
.src-list li{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:12px;background:var(--card,#fff);border:1px solid var(--border,#d9dee3);font-size:var(--fs-14,14px)}
.src-list span{color:var(--ink-2);font-size:13px}
.src-clone{display:none}
.src-pause{margin-block-start:var(--s-3,12px);min-block-size:44px}
@media (prefers-reduced-motion:no-preference){
  .src-track.is-run{max-inline-size:none;animation:src-run var(--src-s,40s) linear infinite}
  .src-track.is-run .src-list{flex-wrap:nowrap;padding-inline-end:12px}
  .src-track.is-run .src-list li{white-space:nowrap}
  .src-track.is-run .src-clone{display:flex}
  .src-track.is-paused,.src:hover .src-track.is-run,.src:focus-within .src-track.is-run{animation-play-state:paused}
  @keyframes src-run{to{transform:translateX(-50%)}}
  [dir="rtl"] .src-track.is-run{animation-name:src-run-rtl}
  @keyframes src-run-rtl{to{transform:translateX(50%)}}
}
@media (prefers-reduced-motion:reduce){.src-pause{display:none}}.src-pause[hidden]{display:none}
/* phones: no hidden-until-scrolled blocks (they left a large blank white gap under the opening section) */
@media (max-width:899px){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* sales pass 2026-10-07: how it works, trust line, phone bottom bar lift (sp-*) | tokens only */
.sp-trust{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--fs-14);color:var(--ink-2)}
.sp-trust li{display:inline-flex;align-items:center;gap:6px}
.sp-trust .icon{inline-size:16px;block-size:16px;flex:none;color:var(--ok-ink)}
/* the phone bar sits at the bottom; the bunny (z-index 80, bottom corner) is lifted above it, never behind it */
body[data-page="home"]:has(.home-sticky:not([hidden])) .mw{inset-block-end:calc(92px + env(safe-area-inset-bottom,0px))}

.svc-price-line{margin:var(--s-4) 0 0;text-align:center;color:var(--ink-2);font-size:var(--fs-15)}
/* genz 2026-10-08: the one-question picker, the story deck of the four services and its micro-demos | tokens only, logical properties, transform and opacity animation only.
   The base rules are the final, still state (no script, or reduced motion); the motion lives in the no-preference block and only on the card in view. */
.gz-pick{margin:var(--s-5) 0 0;max-inline-size:34em}
.gz-pick-q{margin:0 0 var(--s-2);font-weight:var(--fw-semibold);color:var(--ink)}
.gz-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.gz-pick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);min-block-size:84px;padding:var(--s-3);text-align:center;font-weight:var(--fw-semibold);font-size:var(--fs-15);line-height:1.25;color:var(--ink);background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-1);text-decoration:none}
.gz-pick-btn .icon{inline-size:28px;block-size:28px;color:var(--primary-ink)}
.gz-pick-btn:hover,.gz-pick-btn:focus-visible{border-color:var(--primary);box-shadow:var(--shadow-2);text-decoration:none}
@media (min-width:560px){.gz-pick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* QA 2026-10-11: four equal tiles; the icons sit on one line and the words start on one line, whether a label takes one line or two (the row is wide enough for most labels to stay on one) */
.gz-pick{max-inline-size:48em}
.gz-pick-grid{grid-auto-rows:1fr;align-items:stretch}
.gz-pick-btn{justify-content:flex-start;min-block-size:112px;min-inline-size:0;overflow-wrap:break-word}
@media (prefers-reduced-motion:no-preference){.gz-pick-btn{transition:transform .15s ease,box-shadow .15s ease}.gz-pick-btn:hover,.gz-pick-btn:focus-visible{transform:translateY(-2px)}}

.gz-deck{--gz-dir:1;--gz-o:0 50%;max-inline-size:880px;margin-inline:auto}
[dir="rtl"] .gz-deck{--gz-dir:-1;--gz-o:100% 50%}
.gz-prog{list-style:none;margin:0 0 var(--s-2);padding:0;display:flex;gap:6px}
.gz-prog li{position:relative;flex:1;block-size:4px;border-radius:var(--r-pill);background:var(--border-strong);overflow:hidden}
.gz-js .gz-prog li{cursor:pointer}
.gz-prog i{position:absolute;inset:0;background:var(--primary);transform:scaleX(0);transform-origin:var(--gz-o)}
.gz-prog .is-done i,.gz-prog .is-cur i{transform:scaleX(1)}
.gz-track{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:var(--r-xl);box-shadow:var(--shadow-2)}
.gz-track::-webkit-scrollbar{display:none}
.gz-track:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.gz-card{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;min-block-size:440px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-4);padding:var(--s-5);color:#fff;isolation:isolate;overflow:hidden;background:var(--navy)}
.gz-img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:-2}
.gz-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.22) 100%)}
.gz-body{display:grid;gap:var(--s-3);justify-items:start}
.gz-body h3{margin:0;color:#fff;font:var(--fw-semibold) clamp(28px,5vw,40px)/1.15 var(--font-serif)}
[dir="rtl"] .gz-body .icon{transform:scaleX(-1)}
.gz-ctl{display:none;justify-content:center;gap:var(--s-2);margin-block-start:var(--s-3)}
.gz-js .gz-ctl{display:flex}
.gz-js:not(.gz-live) #gz-play{display:none}
.gz-ctl{align-items:center}
.gz-ctl .btn{min-block-size:44px;min-inline-size:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);line-height:1.2;padding-block:0}
[dir="rtl"] #gz-prev .icon,[dir="rtl"] #gz-next .icon{transform:scaleX(-1)}

.gz-demo{position:relative;align-self:center;box-sizing:border-box;inline-size:min(100%,340px);block-size:172px;background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden}
.gz-demo .badge{position:absolute;inset-block-start:8px;inset-inline-end:8px;z-index:4}
.gz-demo i{display:block;block-size:8px;border-radius:4px;background:var(--border-strong)}
.gz-demo i.s{inline-size:60%}

/* 1 a website assembling */
.gz-win{position:absolute;inset:14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card-2);overflow:hidden}
.gz-win-bar{display:flex;gap:4px;align-items:center;block-size:18px;padding-inline:8px;border-block-end:1px solid var(--border)}
.gz-win-bar i{inline-size:7px;block-size:7px;border-radius:50%}
.gz-win b,.gz-win span{position:absolute;display:block}
.gz-w1{inset-inline:10px;inset-block-start:26px;block-size:42px;border-radius:var(--r-xs);background:linear-gradient(135deg,var(--sky-2),var(--sky-deep))}
.gz-w2{inset-inline-start:10px;inset-block-start:76px;inline-size:55%;block-size:9px;border-radius:4px;background:var(--ink)}
.gz-w3,.gz-w4,.gz-w5{inset-block-start:94px;block-size:32px;inline-size:calc((100% - 40px) / 3);border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card)}
.gz-w3{inset-inline-start:10px}
.gz-w4{inset-inline-start:calc(10px + (100% - 40px) / 3 + 10px)}
.gz-w5{inset-inline-start:calc(10px + 2 * ((100% - 40px) / 3 + 10px))}

/* 2 a resume chip flying into a job card, the match meter filling */
.gz-res,.gz-jobc{position:absolute;inset-block:26px;display:grid;align-content:start;gap:8px;padding:12px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-sm)}
.gz-res{inset-inline-start:16px;inline-size:84px}
.gz-jobc{inset-inline-end:16px;inline-size:148px;padding-block-end:34px}
.gz-meter{position:absolute;inset-inline:12px;inset-block-end:12px;block-size:10px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.gz-meter b{position:absolute;inset:0;background:var(--ok);transform:scaleX(.82);transform-origin:var(--gz-o)}
.gz-chip{position:absolute;inset-block-start:56px;inset-inline-start:34px;z-index:3;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--primary);color:var(--on-primary);opacity:0}
.gz-chip .icon{inline-size:16px;block-size:16px}

/* 3 a route lighting on a mini map */
.gz-d-map{background-color:var(--sky);background-image:linear-gradient(var(--sky-2) 1px,transparent 1px),linear-gradient(90deg,var(--sky-2) 1px,transparent 1px);background-size:24px 24px}
.gz-d-map svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
.gz-ln{fill:none;stroke:var(--border-strong);stroke-width:2;stroke-dasharray:4 5}
.gz-lit{fill:none;stroke:var(--primary);stroke-width:3.5;stroke-linecap:round}
.gz-nd{fill:var(--card);stroke:var(--primary);stroke-width:3.5}
.gz-pin{fill:var(--primary-ink);opacity:0}

/* 4 an invitation scanned, a flag turning amber */
.gz-doc{position:absolute;inset-block:18px;inset-inline-start:calc(50% - 118px);inline-size:150px;display:grid;align-content:start;gap:10px;padding:14px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.gz-doc .gz-hot{background:var(--warn-bg);box-shadow:0 0 0 1px var(--warn)}
.gz-scan{position:absolute;inset-inline:0;inset-block-start:0;block-size:3px;background:var(--primary);opacity:0}
.gz-flag{position:absolute;inset-block-start:60px;inset-inline-start:calc(50% + 50px);inline-size:40px;block-size:40px}
.gz-flag .icon{position:absolute;inset:0;inline-size:40px;block-size:40px}
.gz-f0{color:var(--muted);opacity:0}
.gz-f1{color:var(--warn)}

@keyframes gz-fill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .gz-live .gz-prog .is-cur i{transform:scaleX(0);animation:gz-fill 5s linear forwards}
  .gz-deck.is-paused .gz-prog .is-cur i,.gz-deck.is-paused .gz-card .gz-demo *{animation-play-state:paused}
  @keyframes gz-build{0%{opacity:0;transform:translateY(10px)}18%,82%{opacity:1;transform:none}100%{opacity:0;transform:none}}
  @keyframes gz-fly{0%,8%{opacity:0;transform:translateX(0) scale(.7)}20%{opacity:1;transform:translateX(0) scale(1)}58%{opacity:1;transform:translateX(calc(var(--gz-dir) * 140px)) scale(1)}68%,100%{opacity:0;transform:translateX(calc(var(--gz-dir) * 140px)) scale(.5)}}
  @keyframes gz-meter{0%,52%{transform:scaleX(0)}86%,100%{transform:scaleX(.82)}}
  @keyframes gz-seg1{0%,8%{opacity:0}38%,92%{opacity:1}100%{opacity:0}}
  @keyframes gz-seg2{0%,38%{opacity:0}70%,92%{opacity:1}100%{opacity:0}}
  @keyframes gz-pin{0%,6%{opacity:0;transform:translate(0,0)}12%{opacity:1;transform:translate(0,0)}42%{transform:translate(80px,-45px)}78%{opacity:1;transform:translate(175px,-15px)}90%,100%{opacity:0;transform:translate(175px,-15px)}}
  @keyframes gz-scan{0%,6%{opacity:0;transform:translateY(0)}12%{opacity:1}58%{opacity:1;transform:translateY(134px)}66%,100%{opacity:0;transform:translateY(134px)}}
  @keyframes gz-f0{0%,56%{opacity:1}60%,100%{opacity:0}}
  @keyframes gz-f1{0%,56%{opacity:0;transform:scale(.8)}66%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
  @keyframes gz-hot{0%,54%{opacity:0}64%,92%{opacity:1}100%{opacity:0}}
  .gz-live .gz-card.is-on .gz-win b,.gz-live .gz-card.is-on .gz-win span{animation:gz-build 3s ease-in-out infinite both}
  .gz-live .gz-card.is-on .gz-w2{animation-delay:.25s}
  .gz-live .gz-card.is-on .gz-w3{animation-delay:.5s}
  .gz-live .gz-card.is-on .gz-w4{animation-delay:.7s}
  .gz-live .gz-card.is-on .gz-w5{animation-delay:.9s}
  .gz-live .gz-card.is-on .gz-chip{animation:gz-fly 3s ease-in-out infinite both}
  .gz-live .gz-card.is-on .gz-meter b{animation:gz-meter 3s ease-out infinite both}
  .gz-live .gz-card.is-on .gz-lit1{animation:gz-seg1 3s ease-in-out infinite both}
  .gz-live .gz-card.is-on .gz-lit2{animation:gz-seg2 3s ease-in-out infinite both}
  .gz-live .gz-card.is-on .gz-pin{animation:gz-pin 3s ease-in-out infinite both}
  .gz-live .gz-card.is-on .gz-scan{animation:gz-scan 3s linear infinite both}
  .gz-live .gz-card.is-on .gz-f0{animation:gz-f0 3s linear infinite both}
  .gz-live .gz-card.is-on .gz-f1{animation:gz-f1 3s ease-out infinite both}
  .gz-live .gz-card.is-on .gz-hot{animation:gz-hot 3s ease-out infinite both}
}