/* DetailX · home — measured results and the before / after stage (home.js) */

/* A compact introduction, followed by an independent image-first comparison. */
.home-view .home-hero{display:block;min-height:0;padding:138px var(--gutter) 64px}
.hero-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;margin-bottom:40px}
.hero-copy,.hero-aside{min-width:0}
.home-view .hero-title{font-size:clamp(40px,4.15vw,66px);line-height:1.14;margin-top:22px;letter-spacing:-.045em}
.hero-title .line:first-child>span>span{display:inline-block}
.home-view .hero-title em{font-size:1.08em;line-height:1.15}
.hero-aside{justify-self:end;padding-bottom:5px;max-width:380px;text-align:end}
.home-view .home-second-link{font-size:13px;min-height:36px;gap:8px}
.home-view .home-second-link .roll{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:5px}
.hero-comparison{position:relative;scroll-margin-top:100px}
.home-view .hero-stage{aspect-ratio:16/9;max-height:74svh;border-radius:28px;--z:1.18;--oy:44%}
.hero-stage .ba-label{top:22px;font-size:12px;padding:7px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(10,12,10,.6);backdrop-filter:blur(12px)}
.hero-stage .ba-label.before{left:22px}
.hero-stage .ba-label.after{right:22px}
.hero-stage .ba-label small{font-size:10px;font-weight:400;color:rgba(255,255,255,.72)}
.hero-split{position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;appearance:none;-webkit-appearance:none}
.hero-split::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:2px;height:100%;cursor:ew-resize}
.hero-split::-moz-range-thumb{width:2px;height:100%;border:0;cursor:ew-resize}
.hero-stage:has(.hero-split:focus-visible){outline:2px solid var(--lime);outline-offset:5px}
.hero-stage:has(.hero-split:focus-visible) .ba-handle{box-shadow:0 0 0 5px rgba(var(--lime-rgb),.35)}
.hero-play{position:absolute;right:22px;bottom:22px;z-index:7;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 17px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(10,12,10,.72);color:#fff;backdrop-filter:blur(14px);transition:background .2s,border-color .2s}
.hero-play:hover{background:rgba(10,12,10,.9);border-color:rgba(255,255,255,.5)}
.hero-play .icon svg{width:16px;height:16px}
.hero-play[aria-busy="true"] .icon{animation:spin 1s linear infinite}
.hero-comparison-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;color:var(--text-3);font-size:11px}
.hero-comparison-caption>span:first-child{display:inline-flex;align-items:center;gap:7px}
.hero-comparison-caption .icon svg{width:14px;height:14px}
.hero-comparison-caption .mono{font-size:10px;letter-spacing:.09em}
.hero-media-status{margin-top:12px;color:var(--text-2);font-size:12px}
@media(max-width:1100px){
  .home-view .home-hero{padding-top:124px}
  .hero-intro{gap:28px}
}
@media(max-width:760px){
  .home-view .home-hero{padding:104px 22px 40px}
  .hero-intro{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:28px}
  .home-view .hero-kicker{font-size:9px;letter-spacing:.12em}
  .home-view .hero-title{font-size:clamp(31px,6.7vw,48px);margin-top:18px;line-height:1.2}
  .hero-aside{max-width:none;padding:0}
  .home-view .hero-stage{aspect-ratio:4/3;max-height:none;border-radius:20px;--z:1}
  .hero-stage .ba-label{top:14px;font-size:11px;padding:6px 9px;gap:5px}
  .hero-stage .ba-label.before{left:14px}
  .hero-stage .ba-label.after{right:14px}
  .hero-stage .ba-label small{font-size:9px}
  .hero-stage .ba-handle{width:40px;height:40px}
  .hero-play{right:14px;bottom:14px;font-size:11px;padding:9px 13px}
  .hero-comparison-caption{margin-top:12px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.hero-play[aria-busy="true"] .icon{animation:none}}

/* ---------- Measured results: a section of its own. The number is the headline; the chart has no card. ---------- */
.measured{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(48px,6vw,110px);align-items:center;padding:170px var(--gutter) 0}
.measured-lead .kicker{margin-bottom:28px}
.measured-big{display:flex;align-items:baseline;gap:10px;font-size:clamp(88px,10vw,150px);font-weight:500;letter-spacing:-.06em;line-height:.85}
.measured-big em{font-style:normal;font-size:.3em;color:var(--text-3);letter-spacing:-.02em}
.measured-lead h2{font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.3;margin-top:24px}
.measured-lead p{font-size:14px;line-height:1.85;color:var(--text-2);margin-top:16px;max-width:420px}
.mc-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px 18px}
.mc-heading h3{font-size:clamp(17px,1.45vw,22px);font-weight:550;letter-spacing:-.025em}
.measured-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;color:var(--text-2)}
.measured-legend span{display:inline-flex;align-items:center;gap:6px}
.measured-legend i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.measured-legend small{flex-basis:100%;font-size:11px;color:var(--text-3)}
.measured-lead .text-link{margin-top:28px;color:var(--text)}
.measured-lead .text-link:hover{color:var(--lime)}

.mc-rule{margin:8px 0 18px;color:var(--text-2);font-size:12px;line-height:1.65}
.mc-row{display:grid;grid-template-columns:minmax(7em,1fr) minmax(0,2fr) 6ch;align-items:center;gap:clamp(12px,1.5vw,24px);padding:16px 0;border-top:1px solid var(--line)}
a.mc-row:hover .mc-name,a.mc-row:focus-visible .mc-name{color:var(--lime)}
.mc-name{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:550;overflow-wrap:anywhere}
.mc-name small{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--text-3)}
.mc-track{position:relative;display:flex;height:14px;overflow:hidden;border-radius:4px;background:var(--surface-3)}
/* Keep the scale and hit targets stationary. Only paint the leading share. */
.mc-row[data-reveal="meter"]{opacity:1!important;transform:none!important}
.mc-fill{position:absolute;inset:0 auto 0 0;background:var(--lime);transform-origin:left;pointer-events:none}
.js:not(.reduce-motion) .mc-row:not(.is-in) .mc-fill{transform:scaleX(0)}
.js:not(.reduce-motion) .mc-row.is-in .mc-fill{animation:mcFill 1.1s var(--ease) var(--fill-delay,0ms) backwards}
@keyframes mcFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mc-segment{position:relative;flex:1 1 0;background:var(--c)}
.mc-segment+.mc-segment{box-shadow:inset 2px 0 var(--bg)}
.mc-segment:hover{filter:brightness(1.15)}
.mc-count{font:13px var(--mono);color:var(--text-2);white-space:nowrap;text-align:right}
.mc-count b{font-size:16px;font-weight:600;color:var(--text)}
.mc-pending{grid-column:2/-1;font-size:12px;color:var(--text-2)}
.mc-cells{display:flex;gap:4px}
.mc-cell{display:block;width:14px;height:14px;border-radius:4px;background:var(--c);transition:transform .25s var(--ease)}
.mc-cell:hover{transform:scale(1.25)}
.mc-cell.pending{background:transparent;border:1px dashed var(--line-3)}
.mc-foot{padding-top:12px;border-top:1px solid var(--line);font-size:11px;line-height:1.75;color:var(--text-3)}
.mc-tip{position:fixed;left:0;top:0;z-index:100;max-width:min(340px,calc(100vw - 24px));padding:9px 12px;border-radius:10px;background:#1d221c;border:1px solid var(--line-3);font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.mc-tip.on{opacity:1}

/* ---------- Before / after: only the line and two labels on the frame; every control sits in one row below ---------- */
.home-ba{padding:170px var(--gutter) 0}
.ba{margin-top:56px}
.ba-stage{position:relative;aspect-ratio:16/9;max-height:74vh;width:100%;border-radius:30px;overflow:hidden;background:#050605;container-type:size;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:4px;box-shadow:0 70px 120px -70px rgba(0,0,0,.95),0 0 0 1px var(--line);--split:50%;--z:1;--ox:50%;--oy:50%}
.ba-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ba-layer.before{z-index:1;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ba-fit{position:absolute;left:50%;top:50%;translate:-50% -50%;aspect-ratio:var(--ar);width:max(100cqw,calc(100cqh * var(--ar)));transform:scale(var(--z));transform-origin:var(--ox) var(--oy);transition:transform 1s var(--ease)}
.ba-fit video{width:100%;height:100%;object-fit:cover}
.ba-line{position:absolute;top:0;bottom:0;left:var(--split);z-index:4;pointer-events:none}
.ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-.75px;width:1.5px;background:rgba(255,255,255,.92);box-shadow:0 0 16px rgba(0,0,0,.5)}
.ba-handle{position:absolute;top:50%;left:0;translate:-50% -50%;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(10,12,10,.5);border:1.5px solid #fff;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:scale .35s var(--spring)}
.ba-stage:active .ba-handle{scale:.9}
.ba-label{position:absolute;top:24px;z-index:5;display:inline-flex;align-items:baseline;gap:8px;font-size:13px;font-weight:550;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5);pointer-events:none;transition:opacity .3s}
.ba-label.before{left:46px}
.ba-label.after{right:46px;color:var(--lime)}
.ba-label,.ba-caption{padding:5px 10px;border-radius:10px;background:rgba(5,7,5,.68)}
.ba-stage[data-edge="left"] .ba-label.before,.ba-stage[data-edge="right"] .ba-label.after{opacity:0}
.ba-caption{position:absolute;left:46px;bottom:22px;z-index:5;display:inline-flex;align-items:baseline;gap:12px;font-size:12px;color:rgba(255,255,255,.78);text-shadow:0 1px 12px rgba(0,0,0,.5);pointer-events:none}
.ba-caption em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--lime)}
.ba-stage .vf-corner{z-index:5}
.ba-stage.hint{animation:baHint 1.9s var(--ease-io)}
@keyframes baHint{0%,100%{--split:50%}35%{--split:66%}70%{--split:36%}}

.ba-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;margin-top:20px}
.ba-play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--text);transition:border-color .3s}
.ba-play:hover{border-color:var(--line-3)}
.ba-tabs{position:relative;display:flex;gap:32px;overflow-x:auto;scrollbar-width:none}
.ba-tabs>.indicator{top:auto!important;bottom:0;height:2px!important;border-radius:2px;background:var(--lime)}
.ba-tab{display:inline-flex;align-items:baseline;gap:9px;padding:12px 0;font-size:14px;color:var(--text-3);white-space:nowrap;transition:color .3s}
.ba-tab em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.ba-tab:hover{color:var(--text-2)}
.ba-tab.active{color:var(--text)}
.ba-tab.active em{color:var(--lime)}

/* ---------- FAQ: same 5 / 8 grid as the measured section ---------- */
.home-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(48px,6vw,110px);align-items:start;padding:170px var(--gutter) 0}
.faq-lead h2{font-size:clamp(40px,5.4vw,86px);font-weight:500;letter-spacing:-.045em;line-height:1.05;margin-top:22px}
.faq-lead p{font-size:14px;line-height:1.85;color:var(--text-2);margin-top:20px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{display:flex;align-items:baseline;gap:14px;font-size:17px;font-weight:550;letter-spacing:-.01em;line-height:1.5;transition:color .3s}
.faq-q em{flex:0 0 22px;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--text-3)}
.faq-item summary:hover .faq-q{color:var(--lime)}
.faq-toggle{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);color:var(--text-2);flex-shrink:0;transition:transform .5s var(--ease),background-color .3s,border-color .3s,color .3s}
.faq-toggle svg{width:16px;height:16px}
.faq-item summary:hover .faq-toggle{border-color:var(--line-3);color:var(--text)}
.faq-item[open]>summary .faq-toggle{transform:rotate(45deg);background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
.faq-a{max-width:760px;padding:0 60px 30px 36px;font-size:14px;line-height:1.9;color:var(--text-2)}
.faq-a p+p{margin-top:10px}
.faq-a strong{font-weight:550;color:var(--text)}
.faq-a a{color:var(--lime)}
.faq-a a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Closing: the call to action opens the footer; one area with the glowing word, no rule between them ---------- */
.home-footer{padding-top:120px;background:radial-gradient(90% 70% at 50% 100%,rgba(var(--lime-rgb),.055),transparent 70%)}
.home-final{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(64px,7vw,110px)}
.home-final h3{font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.2}
.home-final p{font-size:14px;color:var(--text-3);margin-top:8px}
.home-final .row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.home-final .text-link{color:var(--text)}
.home-final .text-link:hover{color:var(--lime)}
.home-mail{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:22px;font-size:13px;color:var(--text-3);transition:color .3s}
.home-mail .icon svg{width:16px;height:16px}
.home-mail b{font-weight:500;color:var(--text);transition:color .3s}
.home-mail:hover b{color:var(--lime)}

.home-stat-jump{display:inline-flex;align-items:center;gap:4px;font:inherit;letter-spacing:inherit;color:inherit;transition:color .25s}
.home-stat-jump:hover{color:var(--lime)}
.home-stat-jump .icon svg{width:12px;height:12px}

@media(max-width:1100px){
  .measured,.home-faq{grid-template-columns:1fr;gap:48px;padding-top:130px}
  .home-faq{gap:36px}
  .home-ba{padding-top:130px}
  .home-footer{padding-top:100px}
}
@media(max-width:640px){
  .measured{padding:96px 18px 0}
  .measured-big{font-size:88px}
  .mc-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name count" "bar bar";gap:9px 12px;padding:12px 0}
  .mc-name{grid-area:name}
  .mc-track,.mc-pending{grid-area:bar}
  .mc-count{grid-area:count}
  .home-ba{padding:96px 18px 0}
  .home-faq{padding:96px 18px 0}
  .faq-item summary{padding:22px 0;gap:16px}
  .faq-q{font-size:15px;gap:10px}
  .faq-q em{flex-basis:18px}
  .faq-a{padding:0 0 26px 28px}
  .home-footer{padding-top:80px}
  .ba{margin-top:36px}
  .ba-stage{aspect-ratio:4/3;border-radius:22px}
  .ba-label{top:20px}
  .ba-label.before{left:42px}
  .ba-label.after{right:42px}
  .ba-caption{left:42px;right:42px;bottom:18px;flex-wrap:wrap;gap:4px 10px}
  .ba-bar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"play zoom" "tabs tabs";gap:14px 16px}
  .ba-play{grid-area:play}
  .ba-tabs{grid-area:tabs;gap:24px}
  .ba-bar .segmented{grid-area:zoom;justify-self:end}
  .home-final{flex-direction:column;align-items:flex-start}
}