/* ============================================================================
   HALON — LAYOUT. Asymmetric, grid-broken, full-bleed + oversized-type moments
   (SIGNATURE-MOVES §2). One axis system, one vertical rhythm.
   ========================================================================== */

/* ---- living background (§0.3): a breathing signal field, visible at rest ---- */
.bg-field{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-field canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:var(--grain-url);background-size:260px}

main{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
.section{padding-block:var(--rhythm)}
.section__head{display:flex;flex-direction:column;gap:var(--s-3);max-width:60ch;margin-bottom:var(--s-12)}
.section__head h2{font-size:var(--step-3)}
.section__head p{color:var(--text-muted);font-size:var(--step-1);max-width:52ch}
.seam{position:relative;height:2px;max-width:var(--maxw);margin:0 auto}
.seam svg{position:absolute;left:0;top:-20px;width:100%;height:40px;overflow:visible}

/* ============================ HERO — THE MEASUREMENT BENCH ================== */
.hero{position:relative;min-height:100svh;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;
  gap:var(--gutter);padding:calc(var(--s-24) + 40px) var(--gutter) var(--s-16);max-width:var(--maxw);margin:0 auto}
.hero__lead{position:relative;z-index:3;max-width:38ch}
.hero__title{font-size:var(--step-5);line-height:.94;margin:var(--s-5) 0 var(--s-6)}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln i{display:block;font-style:normal;transform:translateY(105%)}
.hero__sub{color:var(--text-muted);font-size:var(--step-1);max-width:34ch;margin-bottom:var(--s-8)}
.hero__cta{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.hero__readout{margin-top:var(--s-10);display:flex;gap:var(--s-8);flex-wrap:wrap}
.ro{display:flex;flex-direction:column;gap:2px}
.ro__v{font-family:var(--font-mono);font-size:var(--step-2);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ro__v b{color:var(--signal-deep);font-weight:400}
.ro__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}

/* the bench itself: product + live scope, one system */
.bench{position:relative;z-index:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:var(--s-4)}
.bench__scope{position:relative;aspect-ratio:16/10;border:1px solid var(--hairline);border-radius:var(--r-3);
  background:linear-gradient(180deg,var(--surface),var(--surface-sunk));overflow:hidden;box-shadow:var(--shadow-2)}
.bench__canvas{position:absolute;inset:0;width:100%;height:100%}
.bench__product{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:62%;filter:drop-shadow(0 26px 40px rgba(12,13,17,.32))}
.bench__product svg{width:100%;height:auto}
.bench__label{position:absolute;top:14px;left:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--text-faint);text-transform:uppercase;display:flex;gap:8px;align-items:center}
.bench__label .live{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 var(--signal-wash);animation:pulse 2s var(--ease-io) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,46,.5)}70%{box-shadow:0 0 0 9px rgba(255,77,46,0)}100%{box-shadow:0 0 0 0 rgba(255,77,46,0)}}
.bench__hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);pointer-events:none;transition:opacity var(--t-ui)}
.bench__scope[data-touched="true"] .bench__hint{opacity:0}
.bench__freq{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--text-faint);
  padding:0 var(--s-2)}
.hero__scroll{position:absolute;left:var(--gutter);bottom:var(--s-6);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:8px}
.hero__scroll::before{content:"";width:1px;height:26px;background:var(--border-strong)}

/* ============================ TRUST STRIP ================================== */
.trust{border-block:1px solid var(--hairline);background:color-mix(in srgb,var(--surface) 50%,transparent)}
.trust__row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding-block:var(--s-10)}
.trust__cell{display:flex;flex-direction:column;gap:6px}
.trust__cell .n{font-family:var(--font-mono);font-size:var(--step-2);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trust__cell .l{color:var(--text-muted);font-size:var(--step--1);max-width:22ch}
.trust__quotes{display:flex;gap:var(--gutter);padding-bottom:var(--s-10);flex-wrap:wrap}
.quote{flex:1;min-width:240px;font-family:var(--font-display);font-size:var(--step-1);font-weight:500;line-height:1.35}
.quote cite{display:block;margin-top:var(--s-3);font-family:var(--font-mono);font-size:11px;color:var(--text-faint);font-style:normal;letter-spacing:.06em}

/* ============================ CATALOG (asymmetric bento) =================== */
.catalog__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-10)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);grid-auto-flow:dense}
.card--wide .card__media{aspect-ratio:16/9}
.card--tall .card__media{aspect-ratio:3/4}

/* full-bleed oversized-type moment */
.bleed{position:relative;padding-block:var(--s-24);overflow:hidden}
.bleed__word{font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,20vw,17rem);line-height:.8;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--border-strong);white-space:nowrap;
  transform:translateX(-4%)}
.bleed__sub{position:absolute;right:var(--gutter);bottom:var(--s-24);max-width:30ch;color:var(--text-muted);
  font-size:var(--step-1);text-align:right}

/* ============================ HOW WE MEASURE (deep-dive) =================== */
.measure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-16);align-items:center}
.measure__viz{position:relative;aspect-ratio:1/1;border:1px solid var(--hairline);border-radius:var(--r-3);overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,var(--surface),var(--surface-sunk))}
.measure__viz svg{position:absolute;inset:0;width:100%;height:100%}
.measure__list{display:flex;flex-direction:column}
.measure__row{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);padding:var(--s-5) 0;border-top:1px solid var(--hairline)}
.measure__row:last-child{border-bottom:1px solid var(--hairline)}
.measure__num{font-family:var(--font-mono);font-size:var(--step--1);color:var(--signal-deep)}
.measure__row h4{font-size:var(--step-1);margin-bottom:6px}
.measure__row p{color:var(--text-muted);font-size:var(--step--1);max-width:44ch}

/* ============================ PDP (product detail) ======================== */
.pdp{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity var(--t-content),visibility var(--t-content)}
.pdp[data-open="true"]{opacity:1;visibility:visible}
.pdp__inner{max-width:var(--maxw);margin:0 auto;padding:calc(var(--s-16) + 20px) var(--gutter) var(--s-24);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-16);align-items:start}
.pdp__back{position:fixed;top:var(--s-5);left:var(--gutter);z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--step--1);padding:9px 14px;border:1px solid var(--border-strong);
  border-radius:var(--r-2);background:color-mix(in srgb,var(--bg) 80%,transparent);cursor:pointer;color:var(--text)}
.pdp__back:hover{border-color:var(--text)}
.pdp__stage{position:sticky;top:var(--s-16);aspect-ratio:1/1;border:1px solid var(--hairline);border-radius:var(--r-3);
  background:radial-gradient(120% 120% at 60% 30%,color-mix(in srgb,var(--signal) 7%,transparent),var(--surface-sunk));
  overflow:hidden;display:grid;place-items:center}
.pdp__stage svg{width:70%;height:auto;filter:drop-shadow(0 28px 44px rgba(12,13,17,.34))}
.pdp__flip-ghost{position:fixed;z-index:200;pointer-events:none;border-radius:var(--r-3);overflow:hidden}
.pdp__eyebrow{font-family:var(--font-mono);font-size:var(--step--1);color:var(--signal-deep);letter-spacing:.06em}
.pdp__title{font-size:var(--step-3);margin:var(--s-2) 0 var(--s-4)}
.pdp__price{font-family:var(--font-mono);font-size:var(--step-2);margin-bottom:var(--s-5)}
.pdp__desc{color:var(--text-muted);font-size:var(--step-0);max-width:48ch;margin-bottom:var(--s-6)}
.pdp__buy{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;margin:var(--s-6) 0}
.specs{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:var(--step--1);margin-top:var(--s-6)}
.specs th{text-align:left;color:var(--text-faint);font-weight:400;padding:11px 0;border-bottom:1px solid var(--hairline);width:44%;vertical-align:top}
.specs td{padding:11px 0;border-bottom:1px solid var(--hairline);text-align:right}
.pdp__section-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin:var(--s-8) 0 var(--s-2)}

/* ============================ FINAL CTA + FOOTER ========================== */
.cta{position:relative;text-align:center;padding-block:var(--s-32);overflow:hidden}
.cta h2{font-size:var(--step-4);max-width:16ch;margin:0 auto var(--s-6)}
.cta p{color:var(--text-muted);font-size:var(--step-1);max-width:44ch;margin:0 auto var(--s-8)}
.footer{border-top:1px solid var(--hairline);padding:var(--s-16) 0 var(--s-10)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gutter)}
.footer__brand{font-family:var(--font-display);font-size:var(--step-2);font-weight:600;display:flex;align-items:center;gap:10px}
.footer__brand svg{width:28px;height:28px}
.footer p.small{color:var(--text-muted);font-size:var(--step--1);max-width:34ch;margin-top:var(--s-3)}
.footer h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s-4)}
.footer a{display:block;color:var(--text-muted);font-size:var(--step--1);padding:5px 0;transition:color var(--t-ui)}
.footer a:hover{color:var(--text)}
.footer__base{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-16);padding-top:var(--s-6);
  border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:11px;color:var(--text-faint);flex-wrap:wrap;gap:var(--s-4)}

/* ============================ RESPONSIVE ================================== */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:calc(var(--s-24) + 30px);gap:var(--s-12)}
  .hero__title{font-size:clamp(3rem,13vw,5.4rem)}
  .measure{grid-template-columns:1fr;gap:var(--s-10)}
  .pdp__inner{grid-template-columns:1fr;gap:var(--s-8)}
  .pdp__stage{position:relative;top:0;max-height:52vh}
  .footer__grid{grid-template-columns:1fr 1fr}
  .card--wide,.card--tall,.card--std,.card--half{grid-column:span 6;grid-row:auto}
}
@media (max-width:720px){
  .nav__links{position:fixed;top:64px;left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--hairline);padding:var(--s-3) var(--gutter) var(--s-5);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--t-ui),transform var(--t-ui),visibility var(--t-ui)}
  .nav__links[data-open="true"]{transform:translateY(0);opacity:1;visibility:visible}
  .nav__link{padding:14px 4px;font-size:var(--step-0);border-bottom:1px solid var(--hairline)}
  .nav__indicator{display:none}
  .nav__burger{display:grid}
  .trust__row{grid-template-columns:1fr 1fr;gap:var(--s-8)}
  .grid{gap:var(--s-6)}
  .card--wide,.card--tall,.card--std,.card--half{grid-column:span 12}
  .footer__grid{grid-template-columns:1fr}
  .hero__readout{gap:var(--s-6)}
  .bleed__sub{position:static;text-align:left;margin-top:var(--s-6);padding:0 var(--gutter)}
}