/* Home page (landing A · Loop): calm and premium. Split hero (text left, a chart that reads itself right), dark
   cards with a 1px line, lime used sparingly. Animated SVG previews come from site/lib/landing.mjs and
   site/lib/landing-analysis.mjs. Loaded on / only. */
.page--home main { padding: 0; }
.hb-sec { padding: 88px 0; }
.hb-sec--line { border-top: 1px solid var(--line); }
.hb-head { max-width: 720px; margin: 0 0 44px; }
.hb-head h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.06; margin: 0; }
.hb-head h2 a { color: inherit; text-decoration: none; }
.hb-head p { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.hcard { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.hb-hero { padding: 72px 0 96px; }
.hb-hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; }
.hb-hero h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1; margin: 16px 0 0; }
.hb-accent { color: var(--accent); }
.hb-hero .answer { background: none; border: 0; padding: 0; max-width: 540px; margin: 22px 0 0; }
.hb-hero .answer p { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.hb-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hb-honest { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.hb-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hb-how__body { padding: 22px; }
.hb-how__text { padding: 0 22px 24px; }
.hb-how__text h3 { font-size: 20px; margin: 0; }
.hb-step { color: var(--accent); }
.hb-how__text p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hb-path { padding: 36px 28px 20px; }
.hb-path--v { display: none; padding: 0; }
.hb-units { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
.hb-units a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.hb-units a:hover { border-color: var(--accent); }
.hb-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hb-tool { display: flex; flex-direction: column; gap: 12px; padding: 22px; text-decoration: none; transition: border-color .15s; }
.hb-tool:hover { border-color: var(--accent); }
.hb-tool h3 { font-size: 20px; margin: 0; color: var(--strong); }
.hb-tool p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.hb-tool__anim { height: 110px; }
.hb-tool__cta { color: var(--accent); font-weight: 600; font-size: 15px; }
.hb-tool:hover .hb-tool__cta { text-decoration: underline; }
.hb-ba { display: grid; grid-template-columns: 1fr 1.45fr; gap: 24px; align-items: center; }
.hb-ba__panel { margin: 0; }
.hb-ba__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px 0; }
.hb-ba__head b { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--strong); }
.hb-ba__head b.is-after { color: var(--accent); }
.hb-ba__head span { font-size: 13px; color: var(--muted); }
.hb-ba__chart { padding: 8px 12px 12px; }
.hb-note { font-size: 13px; color: var(--muted); margin: 20px 0 0; }
.hb-explore .link-columns { max-width: 1000px; }
.hb-faq .faq { max-width: 820px; }
.hb-final { text-align: center; max-width: 760px; margin: 0 auto; }
.hb-final h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; margin: 0; }
.hb-final p { margin: 16px auto 0; color: var(--ink-2); font-size: 18px; max-width: 520px; line-height: 1.55; }
.hb-final .hb-cta { justify-content: center; }
@media (max-width: 1000px) { .hb-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .hb-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hb-how, .hb-ba { grid-template-columns: 1fr; }
  .hb-path--h { display: none; }
  .hb-path--v { display: block; }
}
@media (max-width: 640px) {
  .hb-sec { padding: 52px 0; }
  .hb-hero { padding: 36px 0 56px; }
  .hb-hero .answer p, .hb-head p, .hb-final p { font-size: 16px; }
  .hb-cta .btn { flex: 1 1 100%; }
  .hb-tools { grid-template-columns: 1fr; }
  .hb-head { margin-bottom: 28px; }
}
/* hero: candles draw in, the hammer is spotted, "you got it" */
@keyframes cin{0%{opacity:0;transform:scaleY(.15)}5%,90%{opacity:1;transform:scaleY(1)}96%,100%{opacity:0;transform:scaleY(1)}}
.cin{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:cin 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes h-ring{0%,50%{opacity:0;transform:scale(1.5)}55%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
.h-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:h-ring 9s ease-out infinite}
@keyframes h-label{0%,57%{opacity:0;transform:translateY(6px)}61%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
.h-label{opacity:0;animation:h-label 9s ease-out infinite}
@keyframes h-sheet{0%,64%{opacity:0;transform:translateY(24px)}69%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.h-sheet{opacity:0;animation:h-sheet 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes h-cursor{0%,38%{opacity:0;transform:translate(60px,70px)}44%{opacity:1}50%{opacity:1;transform:translate(0,0)}52%{transform:translate(0,0) scale(.82)}55%,58%{opacity:1;transform:translate(0,0) scale(1)}64%,100%{opacity:0;transform:translate(0,0)}}
.h-cursor{opacity:0;animation:h-cursor 9s ease-in-out infinite}
/* tap card */
@keyframes t-cur{0%,15%{opacity:0;transform:translate(40px,60px)}25%{opacity:1}42%{transform:translate(0,0)}46%{transform:translate(0,0) scale(.8)}50%,70%{opacity:1;transform:translate(0,0) scale(1)}78%,100%{opacity:0;transform:translate(0,0)}}
.t-cur{opacity:0;animation:t-cur 6s ease-in-out infinite}
@keyframes t-ok{0%,47%{opacity:0;transform:scale(1.4)}52%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0}}
.t-ok{opacity:0;transform-box:fill-box;transform-origin:center;animation:t-ok 6s ease-out infinite}
@keyframes ok-sheet{0%,52%{opacity:0;transform:translateY(12px)}58%,88%{opacity:1;transform:translateY(0)}95%,100%{opacity:0}}
.ok-sheet{opacity:0;animation:ok-sheet 6s ease-out infinite}
/* drag support */
@keyframes d-line{0%,12%{transform:translateY(-58px)}22%{transform:translateY(-58px)}48%,88%{transform:translateY(0)}100%{transform:translateY(-58px)}}
.d-line{animation:d-line 6s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes d-snap{0%,48%{opacity:0}52%,88%{opacity:1}95%,100%{opacity:0}}
.d-snap{opacity:0;animation:d-snap 6s ease-out infinite}
@keyframes d-hand{0%,12%{opacity:0}18%,48%{opacity:1}56%,100%{opacity:0}}
.d-hand{opacity:0;animation:d-hand 6s ease-out infinite}
/* place the stop */
@keyframes s-line{0%,14%{transform:translateY(0)}46%,88%{transform:translateY(86px)}100%{transform:translateY(0)}}
.s-line{animation:s-line 6s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes s-zone{0%,14%{transform:scaleY(0)}46%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.s-zone{transform-box:fill-box;transform-origin:50% 0;animation:s-zone 6s cubic-bezier(.3,.7,.2,1) infinite}
/* path */
@keyframes p-draw{0%{stroke-dashoffset:var(--len)}55%,92%{stroke-dashoffset:var(--to)}100%{stroke-dashoffset:var(--len)}}
.p-draw{animation:p-draw 7s cubic-bezier(.3,.6,.2,1) infinite}
@keyframes p-here{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.35);opacity:0}}
.p-here{transform-box:fill-box;transform-origin:center;animation:p-here 1.8s ease-out infinite}
/* tools */
@keyframes bar{0%,10%{transform:scaleX(.08)}50%,88%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
.bar{transform-box:fill-box;transform-origin:0 50%;animation:bar 5s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes rw{0%,10%{transform:scaleY(.2)}50%,88%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
.rw{transform-box:fill-box;transform-origin:50% 100%;animation:rw 5s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes pipm{0%,10%{transform:translateX(0)}50%,88%{transform:translateX(var(--d))}100%{transform:translateX(0)}}
.pipm{animation:pipm 5s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes fade5{0%,48%{opacity:0}55%,88%{opacity:1}95%,100%{opacity:0}}
.fade5{opacity:0;animation:fade5 5s ease-out infinite}
@keyframes hop{0%,8%{transform:translateX(var(--a))}22%,34%{transform:translateX(var(--b))}48%,60%{transform:translateX(var(--c))}72%,92%{transform:translateX(var(--c))}100%{transform:translateX(var(--a))}}
.hop{animation:hop 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes lvl{0%,70%{opacity:0}76%,92%{opacity:1}100%{opacity:0}}
.lvl{opacity:0;animation:lvl 6s ease-out infinite}
/* before / after */
@keyframes q{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.9;transform:translateY(-6px)}}
.q{animation:q 3s ease-in-out infinite}
@keyframes ann5{0%,5%{opacity:0}11%,90%{opacity:1}96%,100%{opacity:0}}.ann.s5{animation:ann5 8s ease-out infinite}@keyframes drw5{0%,5%{stroke-dashoffset:400}19%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s5{animation:drw5 8s ease-out infinite}
@keyframes ann12{0%,12%{opacity:0}18%,90%{opacity:1}96%,100%{opacity:0}}.ann.s12{animation:ann12 8s ease-out infinite}@keyframes drw12{0%,12%{stroke-dashoffset:400}26%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s12{animation:drw12 8s ease-out infinite}
@keyframes ann20{0%,20%{opacity:0}26%,90%{opacity:1}96%,100%{opacity:0}}.ann.s20{animation:ann20 8s ease-out infinite}@keyframes drw20{0%,20%{stroke-dashoffset:400}34%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s20{animation:drw20 8s ease-out infinite}
@keyframes ann28{0%,28%{opacity:0}34%,90%{opacity:1}96%,100%{opacity:0}}.ann.s28{animation:ann28 8s ease-out infinite}@keyframes drw28{0%,28%{stroke-dashoffset:400}42%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s28{animation:drw28 8s ease-out infinite}
@keyframes ann36{0%,36%{opacity:0}42%,90%{opacity:1}96%,100%{opacity:0}}.ann.s36{animation:ann36 8s ease-out infinite}@keyframes drw36{0%,36%{stroke-dashoffset:400}50%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s36{animation:drw36 8s ease-out infinite}
@keyframes ann44{0%,44%{opacity:0}50%,90%{opacity:1}96%,100%{opacity:0}}.ann.s44{animation:ann44 8s ease-out infinite}@keyframes drw44{0%,44%{stroke-dashoffset:400}58%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s44{animation:drw44 8s ease-out infinite}
@keyframes ann54{0%,54%{opacity:0}60%,90%{opacity:1}96%,100%{opacity:0}}.ann.s54{animation:ann54 8s ease-out infinite}@keyframes drw54{0%,54%{stroke-dashoffset:400}68%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s54{animation:drw54 8s ease-out infinite}
@keyframes ann62{0%,62%{opacity:0}68%,90%{opacity:1}96%,100%{opacity:0}}.ann.s62{animation:ann62 8s ease-out infinite}@keyframes drw62{0%,62%{stroke-dashoffset:400}76%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:400}}.drw.s62{animation:drw62 8s ease-out infinite}
.ann{opacity:0}.drw{stroke-dasharray:400;stroke-dashoffset:400}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.floaty{animation:floaty 6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.page--home *{animation:none !important}.cin,.h-ring,.h-label,.h-sheet,.t-ok,.ok-sheet,.d-snap,.fade5,.lvl,.ann{opacity:1 !important;transform:none !important}.drw{stroke-dashoffset:0 !important}.h-cursor,.t-cur,.d-hand{opacity:0 !important}}
/* Hero loop (site/lib/hero-carousel.mjs): 4 scenes x 5 s; each scene's steps run on a 5 s cycle delayed to match. */
.hc { position: relative; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 22px 22px 18px; overflow: hidden; }
.hc-scene { grid-area: 1 / 1; opacity: 0; animation: hc-scn 20s infinite; display: flex; flex-direction: column; }
.hc-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hc-q { margin: 4px 0 10px; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--strong); line-height: 1.2; }
.hc-opts { display: flex; gap: 10px; margin-top: 6px; }
.hc-opt { flex: 1; text-align: center; padding: 9px; border: 1px solid #2E332E; border-radius: 12px; font-weight: 600; font-size: 15px; }
.hc-sheet { margin-top: 10px; background: var(--good); border: 1px solid var(--accent); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.hc-sheet b { font-family: var(--display); font-weight: 600; color: var(--accent); font-size: 16px; }
.hc-sheet span { font-size: 13.5px; color: var(--ink-2); }
.hc-dots { grid-area: 2 / 1; display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.hc-dot { display: block; width: 8px; height: 8px; border-radius: 999px; background: #2E332E; animation: hc-dot 20s infinite; }
.hc-s1 { animation-delay: 5s; } .hc-s2 { animation-delay: 10s; } .hc-s3 { animation-delay: 15s; }
@keyframes hc-scn { 0% { opacity: 0; transform: translateY(8px); } 2%, 23% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: none; } }
@keyframes hc-dot { 0%, 24% { background: var(--accent); width: 22px; } 25%, 100% { background: #2E332E; width: 8px; } }
/* steps inside a scene: 5 s cycle, delayed like the scene */
.hc-in40, .hc-in45, .hc-in50, .hc-in55, .hc-in65, .hc-zs, .hc-zt { opacity: 0; }
.hc-s0 .hc-in40, .hc-s0 .hc-in45, .hc-s0 .hc-in50, .hc-s0 .hc-in55, .hc-s0 .hc-in65, .hc-s0 .hc-tap, .hc-s0 .hc-down, .hc-s0 .hc-up, .hc-s0 .hc-zs, .hc-s0 .hc-zt { animation-delay: 0s; }
.hc-s1 :is(.hc-in40, .hc-in45, .hc-in50, .hc-in55, .hc-in65, .hc-tap, .hc-down, .hc-up, .hc-zs, .hc-zt) { animation-delay: 5s; }
.hc-s2 :is(.hc-in40, .hc-in45, .hc-in50, .hc-in55, .hc-in65, .hc-tap, .hc-down, .hc-up, .hc-zs, .hc-zt) { animation-delay: 10s; }
.hc-s3 :is(.hc-in40, .hc-in45, .hc-in50, .hc-in55, .hc-in65, .hc-tap, .hc-down, .hc-up, .hc-zs, .hc-zt) { animation-delay: 15s; }
.hc-in40 { animation: hc-in40 5s infinite; } .hc-in45, .hc-zs, .hc-zt { animation: hc-in45 5s infinite; } .hc-in50 { animation: hc-in50 5s infinite; }
.hc-in55 { animation: hc-in55 5s ease-out infinite; } .hc-in65 { animation: hc-in65 5s infinite; }
.hc-tap { opacity: 0; animation: hc-tap 5s ease-in-out infinite; }
.hc-down { animation: hc-down 5s cubic-bezier(.3,.7,.2,1) infinite; } .hc-up { animation: hc-up 5s cubic-bezier(.3,.7,.2,1) infinite; }
.hc-yes { animation: hc-yes 5s infinite; animation-delay: 10s; }
@keyframes hc-in40 { 0%, 38% { opacity: 0; } 44%, 100% { opacity: 1; } }
@keyframes hc-in45 { 0%, 43% { opacity: 0; } 49%, 100% { opacity: 1; } }
@keyframes hc-in50 { 0%, 48% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes hc-in55 { 0%, 54% { opacity: 0; transform: translateY(8px); } 61%, 100% { opacity: 1; transform: none; } }
@keyframes hc-in65 { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes hc-tap { 0%, 12% { opacity: 0; transform: translate(30px, 40px); } 20% { opacity: 1; } 34% { transform: translate(0, 0); } 38% { transform: translate(0, 0) scale(.8); } 42%, 60% { opacity: 1; transform: translate(0, 0) scale(1); } 68%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes hc-down { 0%, 12% { transform: translateY(calc(var(--d) * -1)); } 44%, 100% { transform: translateY(0); } }
@keyframes hc-up { 0%, 30% { transform: translateY(var(--d)); } 58%, 100% { transform: translateY(0); } }
@keyframes hc-yes { 0%, 46% { background: transparent; border-color: #2E332E; color: var(--ink); } 50%, 100% { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } }
@media (max-width: 640px) { .hc { padding: 16px 14px 14px; border-radius: 22px; } .hc-q { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) {
  .hc-scene { opacity: 0 !important; visibility: hidden; }
  .hc-scene.hc-final { opacity: 1 !important; visibility: visible; }
  .hc-final :is(.hc-in40, .hc-in45, .hc-in50, .hc-in55, .hc-in65, .hc-zs, .hc-zt) { opacity: 1 !important; transform: none !important; }
  .hc-tap { opacity: 0 !important; }
  .hc-dot.hc-s3 { background: var(--accent); width: 22px; }
}