/* ==========================================================================
   Hotbox Academy — Marketing site (index.html, legal.html)
   Depends on tokens, base, components. Order mirrors index.html.
   Layout idea: an editorial grid (title column left, content right) on black
   glass, with two machine-like objects (the receipt, the steel panels) and one
   light (the LED strip). No decorative cards.
   ========================================================================== */

/* ---- Top bar ---- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); }
.topbar.is-scrolled { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--rule); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 68px; flex-wrap: nowrap; }
.nav { display: flex; gap: var(--s-5); }
.nav a { color: var(--fg-dim); text-decoration: none; font-size: var(--t-sm); font-weight: 500; white-space: nowrap; transition: color var(--dur-fast); }
.nav a:hover { color: var(--fg); }
@media (max-width: 900px) { .nav { display: none; } }
.hide-phone { display: inline; }
@media (max-width: 520px) { .hide-phone { display: none; } }

/* ---- Sections: editorial grid ---- */
.sec { padding-block: var(--s-9); border-top: 1px solid var(--rule); }
.sec--tight { padding-block: var(--s-8); }
.sec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7) var(--s-8); align-items: start; }
@media (max-width: 900px) { .sec__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.sec__title { display: grid; gap: var(--s-4); align-content: start; }
.sec__title h2 { max-width: 14ch; }
.sec__title p { color: var(--fg-dim); max-width: 38ch; }
.sec__body { display: grid; gap: var(--s-5); min-width: 0; }
@media (min-width: 901px) { .sec__title { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); } }

/* ---- Hero: the promise on the left, the real statement on the right ---- */
.hero { position: relative; padding-top: calc(68px + env(safe-area-inset-top, 0px) + var(--s-8)); padding-bottom: var(--s-6); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-7) var(--s-8); align-items: center; }
@media (max-width: 900px) { .hero { padding-top: calc(68px + env(safe-area-inset-top, 0px) + var(--s-6)); } .hero__inner { grid-template-columns: 1fr; gap: var(--s-7); } }
.hero__copy { display: grid; gap: var(--s-5); max-width: 48rem; }
.hero__copy h1 { max-width: none; }
.hero__sub { font-size: var(--t-lg); color: var(--fg-dim); line-height: 1.5; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); align-items: center; }
.hero__proof { border-top: 1px solid var(--rule); padding-top: var(--s-4); color: var(--fg-dim); max-width: 46ch; }
.hero__proof strong { font-family: var(--font-mono); font-weight: 700; color: var(--fg); }
.hero__paper { max-width: 372px; justify-self: end; transform: rotate(-1.4deg); }
@media (max-width: 900px) { .hero__paper { justify-self: center; } }
.hero__trust { font-size: var(--t-sm); color: var(--fg-faint); margin-top: var(--s-4); }

/* The LED strip: the light bar inside every machine, turned on at page load. */
.led { position: relative; height: 2px; margin-top: var(--s-7); background: linear-gradient(90deg, transparent 0, var(--neon) 8%, var(--neon-hot) 50%, var(--neon) 92%, transparent 100%); box-shadow: var(--neon-glow); transform: scaleX(0); transform-origin: left; animation: led-on 1.1s var(--ease-out) 0.2s forwards; }
@keyframes led-on { to { transform: scaleX(1); } }
html:not(.js) .led { transform: none; animation: none; }

/* ---- Columns without boxes (why vending, who it's for) ---- */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 1100px) and (min-width: 761px) { .cols:not(.cols--2) { grid-template-columns: 1fr 1fr; } }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .cols, .cols--2 { grid-template-columns: 1fr; } }
.col { border-top: 1px solid var(--rule-strong); padding-top: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }
.col h4 { max-width: 20ch; }
.col p { color: var(--fg-dim); }
.col ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.col li { color: var(--fg-dim); padding-left: 1.2rem; position: relative; margin: 0; }
.col li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--fg-faint); }
.col--yes li::before { background: var(--neon-hot); box-shadow: 0 0 6px rgba(var(--neon-rgb), 0.9); }

/* Plain reasons list (not a sequence) */
.reasons { list-style: none; padding: 0; margin: 0; display: grid; }
.reasons li { padding: var(--s-5) 0; border-top: 1px solid var(--rule); margin: 0; display: grid; gap: var(--s-2); max-width: 62ch; }
.reasons li:last-child { border-bottom: 1px solid var(--rule); }
.reasons p { color: var(--fg-dim); }

/* ---- The system: ordered frameworks beside the machine panels ---- */
.panels { display: grid; gap: var(--s-4); position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .panels { position: static; } }
.panel { background: var(--graphite); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.8rem var(--s-4); border-bottom: 1px solid var(--rule); font-size: var(--t-xs); font-weight: 600; font-stretch: var(--wide-stretch); color: var(--fg-dim); }
.panel__body { padding: var(--s-4); display: grid; gap: var(--s-4); }
.calc__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.calc__paper { max-width: 100%; transform: none; font-size: 0.82rem; padding: 1rem 1.1rem 1.6rem; }
.calc__verdict { font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.5; }
.calc__verdict strong { color: var(--fg); }

/* Scorecard panel */
.traits { display: grid; gap: 0.55rem; }
.trait { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; gap: var(--s-3); align-items: center; font-size: var(--t-sm); color: var(--fg-dim); }
.trait__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trait__meter { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.trait__meter i { display: block; height: 5px; border-radius: 1px; background: var(--bg-3); position: relative; overflow: hidden; }
.trait__meter i::after { content: ""; position: absolute; inset: 0; background: var(--neon); box-shadow: 0 0 6px rgba(var(--neon-rgb), 0.9); }
.trait__meter i.is-off::after { display: none; }
.trait__level { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); min-width: 5.2em; text-align: right; }
.trait__level--on { color: var(--neon-hot); }
.verdict { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.verdict__n { font-stretch: var(--display-stretch); font-weight: 800; font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.verdict__n small { font-size: var(--t-sm); font-weight: 600; color: var(--fg-faint); font-stretch: normal; }
.verdict__text { display: grid; gap: var(--s-1); font-size: var(--t-sm); color: var(--fg-dim); }
.verdict__text strong { font-size: var(--t-md); }

/* ---- 90 days: a sequence, so numbered by week ---- */
.timeline { display: grid; }
.timeline__item { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.timeline__item:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 560px) { .timeline__item { grid-template-columns: 1fr; gap: var(--s-2); } }
.timeline__when { font-stretch: var(--display-stretch); font-weight: 800; text-transform: uppercase; font-size: var(--t-lg); color: var(--fg-faint); line-height: 1.2; }
.timeline__item h4 { margin-bottom: var(--s-2); }
.timeline__item p { color: var(--fg-dim); max-width: 58ch; }
.timeline__phases { display: block; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--fg-faint); }

/* ---- Curriculum: the ten phases as a table ---- */
.phases { display: grid; }
.phase { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--rule); color: var(--fg); text-decoration: none; transition: background var(--dur-fast); }
.phase:last-child { border-bottom: 1px solid var(--rule); }
.phase:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent); text-decoration: none; }
.phase__id { font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--t-2xl); line-height: 1; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.phase:hover .phase__id { color: var(--neon-hot); }
.phase__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.phase__sub { display: block; color: var(--fg-dim); font-size: var(--t-sm); margin-top: var(--s-1); line-height: 1.45; }
.phase__mission { display: block; color: var(--fg-faint); font-size: var(--t-sm); margin-top: var(--s-2); }
.phase__count { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-faint); white-space: nowrap; }
@media (max-width: 560px) { .phase { grid-template-columns: 3rem 1fr; } .phase__count { grid-column: 2; } }

/* ---- People ---- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }
.person { display: grid; gap: var(--s-3); border-top: 1px solid var(--rule-strong); padding-top: var(--s-4); align-content: start; }
.person__role { color: var(--fg-faint); font-size: var(--t-sm); }
.person p { color: var(--fg-dim); }

/* ---- Included: six rows, two columns ---- */
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); }
@media (max-width: 760px) { .included { grid-template-columns: 1fr; } }
.included > div { padding: var(--s-5) 0; border-top: 1px solid var(--rule); display: grid; gap: var(--s-2); align-content: start; }
.included h4 { max-width: 22ch; }
.included p { color: var(--fg-dim); font-size: var(--t-sm); max-width: 44ch; }

/* ---- Price ---- */
.price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7) var(--s-8); align-items: start; }
@media (max-width: 900px) { .price { grid-template-columns: 1fr; } }
.price__amount { font-stretch: var(--display-stretch); font-weight: 800; font-size: clamp(5rem, 12vw, 9.5rem); line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.price__once { color: var(--fg-dim); font-size: var(--t-lg); margin-top: var(--s-3); }
.price__left { display: grid; gap: var(--s-5); }
.price__guarantee { border-top: 1px solid var(--rule-strong); padding-top: var(--s-4); display: grid; gap: var(--s-2); color: var(--fg-dim); font-size: var(--t-sm); max-width: 40ch; }
.price__guarantee strong { color: var(--fg); font-size: var(--t-md); }
.includes { list-style: none; padding: 0; margin: 0; display: grid; }
.includes li { padding: var(--s-4) 0; border-top: 1px solid var(--rule); margin: 0; color: var(--fg); line-height: 1.5; }
.includes li:last-child { border-bottom: 1px solid var(--rule); }
.compare { display: grid; margin-bottom: var(--s-6); }
.compare__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-top: 1px solid var(--rule); color: var(--fg-dim); font-size: var(--t-sm); }
.compare__row:last-child { border-bottom: 0; color: var(--fg); }
.compare__v { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 700; color: var(--fg); white-space: nowrap; }
.compare__row:last-child .compare__v { color: var(--neon-hot); }
.disclaimer { font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.55; }

/* ---- FAQ ---- */
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: var(--s-4) 0; font-weight: 500; font-size: var(--t-md); list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--fg-faint); font-size: var(--t-lg); transition: transform var(--dur-med) var(--ease-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 0 var(--s-4); color: var(--fg-dim); max-width: var(--measure); }

/* ---- Founder's note and the close ---- */
.letter { display: grid; gap: var(--s-4); font-size: var(--t-lg); line-height: 1.5; max-width: 60ch; }
.letter .sig { font-stretch: var(--display-stretch); font-weight: 800; text-transform: uppercase; font-size: var(--t-xl); margin-top: var(--s-2); }
.close { position: relative; overflow: hidden; padding-block: var(--s-9); border-top: 1px solid var(--rule); min-height: 560px; display: grid; align-items: center; }
.close__emblem { position: absolute; z-index: 0; right: -4vw; top: 50%; transform: translateY(-50%); width: min(40vw, 500px); aspect-ratio: 1; background: url("../img/logo-full.jpg") center / cover no-repeat; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 36%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 36%, transparent 70%); opacity: 0.9; pointer-events: none; }
@media (max-width: 900px) { .close__emblem { display: none; } }
.close__inner { position: relative; z-index: 1; display: grid; gap: var(--s-5); max-width: 40rem; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--rule); padding-block: var(--s-7) calc(var(--s-7) + env(safe-area-inset-bottom, 0px)); }
.footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }
.footer ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.footer a { color: var(--fg-dim); text-decoration: none; font-size: var(--t-sm); }
.footer a:hover { color: var(--fg); }

/* ---- Sticky CTA (phones) ---- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out); }
.sticky-cta.is-visible { transform: none; }
@media (max-width: 900px) { .sticky-cta { display: flex; } }
.sticky-cta__text { display: grid; line-height: 1.25; }
.sticky-cta__text strong { font-size: var(--t-sm); }
.sticky-cta__text span { font-size: var(--t-xs); color: var(--fg-faint); }

/* ---- Legal page ---- */
.legal { display: grid; gap: var(--s-6); max-width: var(--measure); padding-top: calc(68px + var(--s-8)); padding-bottom: var(--s-9); }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.legal h2 { font-size: var(--t-xl); margin-top: var(--s-4); }
.legal p, .legal li { color: var(--fg-dim); }