/* Multi-page components (home / packs / pack / benchmark / docs / custom). Builds on style.css tokens. */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hp { display: none; }
.small { font-size: 13px; }
.ok { color: var(--moss); } .bad { color: var(--rust); }
nav.main a.on { color: var(--ink-hi); }
nav.main a.on::after { clip-path: inset(0 0 0 0); }

/* home */
.home-hero { padding: 56px 0 64px; overflow: hidden; }
h1.promise { font-size: clamp(34px, 4.6vw, 62px); max-width: 21ch; margin-left: clamp(0px, 3vw, 40px); }
.ba { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 44px; }
.ba-stage { aspect-ratio: 16 / 10; -webkit-user-select: none; user-select: none; }
.stage img { -webkit-user-drag: none; user-drag: none; }
.stage .lbl b.plain { color: var(--ink-hi); font-style: italic; }
.big-number { padding-right: clamp(0px, 3vw, 40px); }
.big-number .num { font: 300 clamp(84px, 10vw, 150px)/.9 var(--serif); color: var(--rust); letter-spacing: -.05em; margin: 0; }
.big-number .num span { font-size: .45em; letter-spacing: 0; margin-left: .04em; }
.big-number .num-cap { font: 400 20px/1.35 var(--serif); color: var(--ink); max-width: 20ch; margin: 14px 0 0; }
.big-number .hero-cta { margin-top: 30px; }
@media (max-width: 900px) { .ba { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.home-capture { padding: 72px 0 88px; border-top: 1px solid var(--line-soft); }
.capture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.capture h2 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 32px); }
@media (max-width: 860px) { .capture { grid-template-columns: minmax(0, 1fr); } }
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.inline-form input[type="email"] { flex: 1 1 220px; }
.inline-form.col { flex-direction: column; align-items: stretch; }
.inline-form.col .btn { align-self: flex-start; }
.form-msg { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--ink-2); min-height: 1em; }
.form-msg.ok { color: var(--moss); } .form-msg.bad { color: var(--rust); }

/* page heads */
.page-head { padding: 64px 0 36px; }
.h1-sm { font-size: clamp(32px, 4vw, 54px); max-width: 22ch; }
.page-head .lead { margin-top: 18px; }
.crumbs { font: 13px var(--mono); color: var(--ink-3); margin: 0 0 18px; }

/* packs grid */
.packs-sec { padding: 12px 0 96px; }
.packs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.packs-grid > :nth-child(2n) { margin-top: 48px; }
@media (max-width: 900px) { .packs-grid { grid-template-columns: minmax(0, 1fr); } .packs-grid > :nth-child(2n) { margin-top: 0; } }
.pack-card { background: var(--bg-raise); border-radius: 8px 5px 9px 4px; box-shadow: var(--shadow); overflow: hidden; transition: transform .6s var(--spring), box-shadow .6s var(--ease); }
.pack-card:hover { transform: translateY(-4px) rotate(-.25deg); box-shadow: var(--shadow-lift); }
.pack-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--bg-deep); }
.pack-thumbs img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: filter .5s var(--ease); }
.pack-card:hover .pack-thumbs img { filter: saturate(1.15); }
.pack-body { padding: 22px 24px 24px; }
.pack-body h3 { font-size: 26px; margin: 2px 0 10px; }
.pack-body h3 a { transition: color .3s var(--ease); } .pack-body h3 a:hover { color: var(--ochre); }
.pack-fx { font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
.pack-fx b { font: 500 14px var(--mono); color: var(--rust); } .pack-fx b.ok { color: var(--moss); }
.specs { margin: 0; display: grid; gap: 0; font-size: 14px; }
.specs > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line); }
.specs dt { color: var(--ink-3); font: 12px/1.6 var(--mono); }
.specs dd { margin: 0; color: var(--ink); }
.specs.big { font-size: 15px; margin-top: 18px; }
.specs.big > div { grid-template-columns: 160px minmax(0, 1fr); padding: 11px 0; }
@media (max-width: 520px) { .specs > div, .specs.big > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.pack-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.price { font: 350 32px/1.05 var(--serif); color: var(--ink-hi); letter-spacing: -.02em; }
.price small { display: block; font: 13px var(--sans); color: var(--ink-3); letter-spacing: 0; margin-top: 3px; }
.custom-card { padding: 28px 26px; background: var(--bg-card); border: 1.5px dashed #4a4032; transform: rotate(.6deg); }
.custom-card:hover { transform: rotate(0) translateY(-4px); }

/* pack detail */
.pack-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.pack-hero .note-card { transform: rotate(-1.4deg); }
.pack-hero .note-card:hover { transform: rotate(-.2deg) translateY(-3px); }
@media (max-width: 900px) { .pack-hero { grid-template-columns: minmax(0, 1fr); } }
.gallery-sec { padding: 16px 0 64px; }
.gal-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gal-bar .kicker { margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gallery .g-item { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); }
.gallery .g-item:nth-child(1), .gallery .g-item:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform .8s var(--ease); }
.gallery .g-item:hover img { transform: scale(1.03); }
@media (max-width: 800px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery .g-item:nth-child(6) { grid-column: auto; grid-row: auto; } }
.pack-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .pack-grid { grid-template-columns: minmax(0, 1fr); } }
.buy-col { display: grid; gap: 26px; }
.download { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); transform: rotate(.5deg); }
.download h3 { margin: 0; }
.dl-link { justify-self: start; background: var(--moss); color: var(--bg-deep); border-color: var(--moss); font-weight: 600; }
.buy { display: grid; gap: 14px; padding: 0 6px; }
.buy .btn { justify-self: start; }

/* leaderboard */
.lb-sec { padding: 8px 0 80px; }
.sheet.lb { margin-top: 0; }
th.num, td.num { text-align: right; }
th small { display: block; font: 500 15px var(--hand); color: var(--ochre); }
td.rank { font: 300 italic 26px var(--serif); color: var(--ochre); width: 44px; }
.lb td.cell { text-align: right; color: var(--ink-hi); background: rgba(217, 119, 74, calc(var(--h) * .55)); }
td.strong { color: var(--ink-hi); font-weight: 500; }
tr.queued td { color: var(--ink-3); }
tr.queued td.name { color: var(--ink-2); }
.queued-note { font: 500 18px var(--hand); color: var(--ink-3); }
.lb-notes { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 30px; align-items: start; }
@media (max-width: 860px) { .lb-notes { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* docs */
.docs-sec { padding: 8px 0 96px; }
.docs { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 96px; display: grid; gap: 10px; font-size: 14px; }
@media (max-width: 860px) { .docs { grid-template-columns: minmax(0, 1fr); } .toc { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; } }
.doc { max-width: 760px; color: var(--ink-2); }
.doc h2 { margin: 48px 0 14px; font-size: 30px; } .doc h2:first-child { margin-top: 0; }
.doc ul { padding-left: 20px; } .doc li { margin: 8px 0; } .doc li::marker { color: var(--ochre); }
.doc b { color: var(--ink-hi); font-weight: 600; }
code { font: 13.5px var(--mono); color: var(--ink-hi); background: rgba(236, 229, 214, .07); padding: 1px 6px; border-radius: 4px; }
pre.code { font: 13px/1.75 var(--mono); background: var(--bg-deep); color: var(--ink); padding: 18px 20px; border-radius: 6px; overflow-x: auto; box-shadow: var(--shadow); margin: 16px 0; }
pre.code .c { color: var(--ink-3); }
table.compact td, table.compact th { padding: 9px 14px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 50% 40% 55% 45%; margin-right: 8px; vertical-align: -1px; }
.caveats.warn { margin: 40px 0 0; }
.caveats p { margin: 6px 0 0; color: var(--ink-2); }

/* custom brief */
.brief-sec { padding: 8px 0 96px; }
.brief { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .brief { grid-template-columns: minmax(0, 1fr); } }
.brief-form { grid-template-columns: minmax(0, 1fr); gap: 26px; transform: rotate(-.3deg); }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
legend { font: 400 24px var(--serif); color: var(--ink-hi); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 0; }
legend span { font: 600 22px/1 var(--hand); color: var(--bg-deep); background: var(--ochre); width: 30px; height: 30px; border-radius: 50% 45% 52% 48%; display: grid; place-items: center; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
@media (max-width: 600px) { .two { grid-template-columns: minmax(0, 1fr); } }
.drop { position: relative; border: 1.5px dashed #52473a; border-radius: 8px 5px 9px 6px; padding: 26px 20px; text-align: center; cursor: pointer; transition: border-color .4s var(--ease), background .4s var(--ease); }
.drop:hover, .drop:focus-within { border-color: var(--ochre); background: rgba(217, 164, 65, .05); }
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-hint { font: 500 20px var(--hand); color: var(--ink-2); }
.file-list { font: 12px var(--mono); color: var(--moss); min-height: 1em; }
.file-list.bad { color: var(--rust); }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--sans); color: var(--ink); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), transform .4s var(--spring); }
.check:hover { border-color: #52473a; transform: translateY(-1px); }
.check:has(input:checked) { background: var(--ink); color: var(--bg-deep); border-color: var(--ink); }
.check input { width: auto; accent-color: var(--ochre); margin: 0; }
.brief-form .btn[type="submit"] { justify-self: start; }
.brief-side { padding-top: 12px; }
.brief-side .hand { font-size: 28px; }
ol.steps.small li { font-size: 14px; padding-left: 48px; }
ol.steps.small li::before { font-size: 30px; }