/* Landing page. Mobile first. */

.is-fitting .fit-line{transition:none!important;animation:none!important}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:10px 64px}
.hero>*{min-width:0}
.hero-title{font-size:clamp(4.4rem,29vw,12.5rem);line-height:.9;font-weight:900;letter-spacing:-.015em;margin:0 0 22px;padding-top:.04em}
.hero-title .fit-line:nth-child(2){color:var(--ink)}
.hero-lede{margin-bottom:24px}
.hero-lede em{font-style:normal;color:var(--doubt-ink);font-weight:600;background:linear-gradient(transparent 62%,var(--doubt-wash) 62%)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.hero-actions .button{flex:1 1 auto}
.hero-fine{letter-spacing:.06em}

.machine{margin:0;display:grid;gap:14px;padding:16px;border-radius:10px;background:var(--bone-2);position:relative;isolation:isolate}
.machine::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.machine-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 12px;min-height:52px}
.machine-context{grid-column:1/-1}
.machine-question{font:840 clamp(1.25rem,5.4vw,1.7rem)/1 var(--display);font-stretch:84%;letter-spacing:-.01em}
.machine-context{letter-spacing:.04em}
.machine-verdict{justify-self:end;font-size:.66rem;padding:8px 11px;border-radius:8px;background:var(--ink);color:var(--bone);white-space:nowrap;transition:background .3s,color .3s,transform .4s var(--ease-spring)}
.machine-verdict[data-tone="signal"]{background:var(--signal);color:#fff}
.machine-verdict[data-tone="doubt"]{background:var(--doubt-ink);color:#fff}
.machine-verdict.is-pop{transform:scale(1.08)}
.machine-stage{display:grid;grid-template-columns:minmax(0,1fr)}
.machine-canvas{width:100%;aspect-ratio:1/1;max-height:62vh}
.machine-bins{display:flex;border-top:1.5px solid var(--ink)}
.bin{flex:1 1 0;min-width:0;display:grid;gap:4px;padding:10px 4px 2px;text-align:center}
.bin-name{display:block;font:820 clamp(.95rem,4.2vw,1.25rem)/1 var(--display);font-stretch:var(--s,100%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-stretch .45s var(--ease-out)}
.bin-pct{font:500 clamp(1.3rem,6vw,1.9rem)/1 var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.bin.is-lead .bin-pct{color:var(--signal-ink)}
.machine[data-tone="doubt"] .bin .bin-pct{color:var(--doubt-ink)}
.machine-foot{display:grid;gap:10px}
.machine-note{letter-spacing:.04em}

@media (min-width:1000px){
  .hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(40px,5vw,96px);padding-block:clamp(24px,4vw,56px) 96px;min-height:calc(100svh - var(--header))}
  .hero-actions .button{flex:0 0 auto}
  .machine{padding:22px}
  .machine-canvas{max-height:52vh}
}

/* ---------- Section heads ---------- */
.section-head{display:grid;gap:18px;margin-bottom:clamp(36px,6vw,72px)}
@media (min-width:960px){.section-head{grid-template-columns:1.2fr .8fr;align-items:end;gap:64px}}

/* ---------- Formats ---------- */
.format-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,360px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.format-rail::-webkit-scrollbar{display:none}
.format-card{scroll-snap-align:start;display:grid;align-content:start;gap:10px;padding:16px 16px 22px;border-radius:10px;background:var(--bone-2)}
.format-card h3{font:840 clamp(1.6rem,6vw,2.1rem)/.95 var(--display);font-stretch:96%;letter-spacing:-.015em}
.format-card>p:last-child{color:var(--ink-2)}
.viz{height:220px;border-radius:10px;background:var(--bone);margin-bottom:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:900px){
  .format-rail{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .viz{height:260px}
}

.viz-compare{display:grid;align-content:center;gap:14px;padding:20px}
.lane{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 10px}
.lane-name{font:860 1.75rem/.86 var(--display);font-stretch:calc(52% + var(--v) * 150%);letter-spacing:-.01em;transition:font-stretch 1s var(--ease-out)}
.lane b{grid-row:1;grid-column:2;font-weight:500;font-size:.95rem}
.lane-bar{grid-row:2;grid-column:1/-1;height:10px;border-radius:10px;background:var(--bone-3);overflow:hidden}
.lane-bar::after{content:"";display:block;height:100%;width:calc(var(--v) * 100%);background:var(--ink);border-radius:inherit;transform-origin:left;transition:transform 1.1s var(--ease-out)}
.lane:first-child .lane-bar::after{background:var(--signal)}
[data-animate]:not(.is-in) .lane-bar::after{transform:scaleX(0)}
[data-animate]:not(.is-in) .lane-name{font-stretch:50%}
.lane:nth-child(2) .lane-bar::after{transition-delay:.12s}
.lane:nth-child(3) .lane-bar::after{transition-delay:.24s}

.viz-coin{display:grid;place-items:center;perspective:800px;background:radial-gradient(circle at 50% 110%,var(--bone-3),var(--bone) 70%)}
.coin{width:156px;height:156px;transform-style:preserve-3d}
.coin-face{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--signal) 0 calc(var(--v) * 1%),var(--ink) 0);box-shadow:inset 0 0 0 7px rgba(255,255,255,.14),0 24px 30px -20px rgba(20,18,15,.8)}
.coin-face span{width:64%;height:64%;border-radius:50%;background:var(--bone);display:grid;place-content:center;text-align:center;box-shadow:inset 0 2px 6px rgba(20,18,15,.18)}
.coin-face b{font:860 1.5rem/.9 var(--display);font-stretch:120%}
.coin-face i{font-style:normal;font-size:1.1rem;color:var(--signal-ink)}
.is-in .coin{animation:coin-flip 1.8s var(--ease-out) both}
@keyframes coin-flip{
  0%{transform:translateY(-70px) rotateX(18deg) rotateY(0)}
  60%{transform:translateY(-8px) rotateX(6deg) rotateY(1260deg)}
  100%{transform:translateY(0) rotateX(0) rotateY(1440deg)}
}

.viz-score{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;padding:20px 18px 18px}
.step{position:relative;height:calc(var(--h) * 50px);display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px 9px;border-radius:12px 12px 6px 6px;background:var(--bone-3)}
.step i{font-style:normal;font-size:1rem}
.step span{font:600 .78rem/1.1 var(--body)}
.step.is-lead{background:var(--ink);color:var(--bone)}
.step.is-lead i{color:var(--signal-hot)}
.step-marble{position:absolute;top:-24px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb391 0 14%,var(--signal) 52%,#8f2604 100%)}
.is-in .step-marble{animation:marble-drop 1.2s cubic-bezier(.3,0,.3,1) .25s both}
@keyframes marble-drop{
  0%{transform:translateY(-150px);opacity:0}
  40%{transform:translateY(0);opacity:1}
  58%{transform:translateY(-26px)}
  74%{transform:translateY(0)}
  86%{transform:translateY(-7px)}
  100%{transform:translateY(0)}
}

/* ---------- Doubt ---------- */
.doubt{padding-block:clamp(72px,12vw,160px) clamp(48px,8vw,96px)}
.doubt-word{color:var(--doubt);font-stretch:58%}
.doubt-stage{display:grid;margin-top:8px}
.meter{--tone:var(--doubt);position:sticky;margin-bottom:12vh;top:calc(var(--header) + 8px);z-index:2;display:grid;gap:8px;padding:18px 18px 16px;border-radius:10px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line),0 30px 40px -24px #000}
.meter[data-tone="amber"]{--tone:#f0b84a}
.meter[data-tone="signal"]{--tone:var(--signal-hot)}
.meter::after{content:"";position:absolute;left:-2px;right:-2px;top:100%;height:72px;background:linear-gradient(var(--night),transparent);pointer-events:none}
.meter-label{color:var(--bone-dim)}
.meter-value{font-size:clamp(4.2rem,22vw,9rem);line-height:.84;font-weight:400;letter-spacing:-.07em;color:var(--tone);transition:color .4s}
.meter-value small{font-size:.42em;letter-spacing:0;margin-left:.06em;color:var(--bone-dim)}
.meter-track{position:relative;height:12px;margin-top:8px;border-radius:8px;background:var(--night-3)}
.meter-fill{position:absolute;inset:0 auto 0 0;width:var(--fill,22%);border-radius:inherit;background:var(--tone);transition:width .9s var(--ease-out),background .4s}
.meter-threshold{position:absolute;left:55%;top:-7px;bottom:-7px;width:2px;background:var(--bone);border-radius:2px}
.meter-threshold i{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-style:normal;color:var(--bone-dim)}
.meter-state{font:840 clamp(1.35rem,5.6vw,2rem)/1 var(--display);font-stretch:90%;margin-top:6px;color:var(--bone)}
.doubt-steps{list-style:none;margin:0;padding:0 0 12vh}
.doubt-step{min-height:46vh;display:grid;align-content:center;gap:10px;padding:28px 2px;opacity:.26;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease-out)}
.doubt-step.is-active{opacity:1;transform:none}
.step-fact{font:820 clamp(1.8rem,8vw,3.6rem)/.98 var(--display);font-stretch:82%;letter-spacing:-.01em}
.step-note{font-size:1.02rem}
.plus{color:var(--signal-hot);font-stretch:120%}
.doubt-foot{margin-top:8px}
@media (min-width:960px){
  .doubt-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
  .meter{top:calc(var(--header) + 12vh);padding:30px;margin-bottom:0}
  .meter::after{display:none}
  .doubt-step{min-height:72vh}
}

/* ---------- Stress test ---------- */
.stress-grid{display:grid;gap:44px}
.stress-copy .lede{margin-top:20px}
.stress-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:28px}
.stress-card{display:grid;gap:18px;padding:20px 20px 18px;border-radius:10px;background:var(--ink);color:var(--bone);box-shadow:0 50px 80px -50px rgba(20,18,15,.9);color-scheme:dark}
.stress-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--bone-dim)}
.stability{font-size:.92rem}
.stability b{font-size:1.5rem;font-weight:500;color:var(--signal-hot);margin-right:4px}
.stress-lead{font:860 clamp(2.1rem,10vw,3.5rem)/.88 var(--display);font-stretch:72%;letter-spacing:-.015em}
.stress-rows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.stress-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:end}
.row-name{font-size:.93rem;color:#d8d1c5}
.stress-rows b{grid-row:1;grid-column:2;font-weight:500;font-size:.95rem}
.row-bar{grid-row:2;grid-column:1/-1;position:relative;height:8px;border-radius:8px;background:var(--night-3);overflow:hidden}
.row-bar::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(241,236,227,.3);z-index:1}
.row-bar::after{content:"";display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:var(--bone);transform-origin:left;transition:transform 1.1s var(--ease-out)}
[data-animate]:not(.is-in) .row-bar::after{transform:scaleX(0)}
.stress-rows li:nth-child(2) .row-bar::after{transition-delay:.1s}
.stress-rows li:nth-child(3) .row-bar::after{transition-delay:.2s}
.stress-rows li:nth-child(4) .row-bar::after{transition-delay:.3s}
.stress-rows li:nth-child(5) .row-bar::after{transition-delay:.4s}
.stress-rows .is-pivot .row-name{color:#fff;font-weight:600}
.stress-rows .is-pivot b{color:var(--signal-hot)}
.stress-rows .is-pivot .row-bar::after{background:var(--signal)}
.pivot-note{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:10px;background:rgba(238,68,17,.16);color:#ffd9c9;font-size:.95rem}
.pivot-mark{flex:none;width:14px;height:14px;margin-top:3px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(238,68,17,.25)}
@media (min-width:960px){
  .stress-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(48px,7vw,120px)}
  .stress-card{padding:30px}
}

/* ---------- Pricing ---------- */
.pricing{background:var(--bone-2)}
.pricing .narrow{font-stretch:58%}
.pricing .pack{background:var(--bone)}
.pricing .pack-free{background:transparent}
.pricing .pack-featured{background:var(--ink)}
.checkout-status{margin-top:18px}
.checkout-note{margin-top:6px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:36px}
.faq-list details{border-top:1.5px solid var(--ink)}
.faq-list details:last-child{border-bottom:1.5px solid var(--ink)}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:20px 0;cursor:pointer;font:780 clamp(1.25rem,5vw,1.7rem)/1.05 var(--display);font-stretch:94%;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(var(--bone),var(--bone)) center/12px 2px no-repeat,linear-gradient(var(--bone),var(--bone)) center/2px 12px no-repeat,var(--ink);transition:transform .35s var(--ease-spring),background-color .3s}
.faq-list details[open] summary::after{transform:rotate(135deg);background-color:var(--signal)}
.faq-list details p{padding:0 44px 24px 0;max-width:62ch;font-size:1.05rem;color:var(--ink-2)}
@supports (interpolate-size:allow-keywords){
  .faq-list{interpolate-size:allow-keywords}
  .faq-list details::details-content{height:0;overflow:clip;transition:height .45s var(--ease-out),content-visibility .45s allow-discrete}
  .faq-list details[open]::details-content{height:auto}
}
@media (min-width:960px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,7vw,120px)}}

/* ---------- Finale ---------- */
.finale{display:grid;gap:30px;padding-block:clamp(56px,10vw,140px) clamp(72px,12vw,160px)}
.finale-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Ask dock ---------- */
.ask-dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--gutter) calc(12px + env(safe-area-inset-bottom));pointer-events:none;transform:translateY(130%);transition:transform .5s var(--ease-out)}
.ask-dock.is-visible{transform:none}
.ask-dock-button{pointer-events:auto;width:100%;display:flex;align-items:center;gap:12px;min-height:58px;padding:0 22px 0 14px;border:0;border-radius:8px;background:var(--ink);color:var(--bone);font:600 1.02rem/1 var(--body);box-shadow:0 20px 44px -16px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.08)}
.ask-dock-button .arrow{margin-left:auto;transition:transform .35s var(--ease-spring)}
.ask-dock-button:hover .arrow{transform:translateX(4px)}
.ask-dock-marble{flex:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb391 0 14%,var(--signal) 52%,#8f2604 100%);animation:dock-bob 2.8s ease-in-out infinite}
@keyframes dock-bob{50%{transform:translateY(-3px)}}
@media (min-width:720px){
  .ask-dock{left:50%;right:auto;width:440px;padding-inline:0;transform:translate(-50%,140%)}
  .ask-dock.is-visible{transform:translate(-50%,0)}
}
@media (min-width:960px){.ask-dock{display:none}}
@media (max-width:959px){body.home .site-footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}

/* Hide the headline until the intro runs; a failsafe reveals it if scripts never do. */
.js .hero-title:not(.is-live) .fit-line{opacity:0;animation:title-failsafe .3s 2.4s forwards}
@keyframes title-failsafe{to{opacity:1}}

/* Translated verdicts run long: on narrow phones the badge takes its own row. */
@media (max-width:480px){
  .machine-head{grid-template-columns:minmax(0,1fr)}
  .machine-verdict{justify-self:start;grid-row:1}
}