/* Multi-page components (home / packs / pack / benchmark / docs / custom). Builds on style.css tokens. */
[hidden] { display: none !important; }
.consent { display: flex; gap: 10px; align-items: flex-start; flex-basis: 100%; font: 400 13px/1.5 var(--sans); color: var(--ink-3); text-transform: none; cursor: pointer; }
.inline-form.col .consent, .inline-form.col .form-msg { flex-basis: auto; }
.consent input { width: auto; margin: 3px 0 0; accent-color: var(--ochre); flex: none; }
.consent a { color: var(--ink-2); }
.legal-links { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.legal-doc h2 { font-size: 26px; }
.legal-doc p, .legal-doc li { font-size: 15px; }
.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); }

/* how it works */
.flow-sec { padding: 8px 0 88px; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.flow-step { position: relative; background: var(--bg-raise); border-radius: 9px 5px 10px 6px / 6px 10px 5px 9px; padding: 26px 22px 22px; box-shadow: var(--shadow); min-height: 210px; transition: transform .6s var(--spring); }
.flow-step:nth-child(3) { transform: translateY(18px) rotate(.5deg); }
.flow-step:hover { transform: translateY(-3px); }
.flow-step h3 { margin: 8px 0 8px; }
.flow-step p { margin: 0; color: var(--ink-2); font-size: 15px; }
.flow-no { font: 300 italic 44px/1 var(--serif); color: var(--ochre); }
.flow-arrow { width: 56px; height: 38px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fork { height: 64px; margin: 10px 0 0; }
.fork svg { width: 100%; height: 100%; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 3 7; stroke-linecap: round; }
.outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.out-card { background: var(--bg-raise); padding: 26px; border-radius: 6px; box-shadow: var(--shadow); display: grid; gap: 12px; align-content: start; }
.out-card.good { background: var(--bg-card); transform: translateY(20px) rotate(-.4deg); }
.out-card h3 { margin: 0; }
.out-card ul { margin: 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 8px; }
.out-card li::marker { color: var(--ochre); }
.out-card .btn { justify-self: start; margin-top: 6px; }
@media (max-width: 960px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .flow-arrow { transform: rotate(90deg); justify-self: center; }
  .flow-step, .flow-step:nth-child(3) { transform: none; min-height: 0; }
  .fork { display: none; }
  .outputs { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .out-card.good { transform: none; }
}

/* blog */
.blog-sec { padding: 8px 0 96px; }
.post-card { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--bg-raise); border-radius: 8px 5px 9px 4px; overflow: hidden; box-shadow: var(--shadow); transition: transform .6s var(--spring), box-shadow .6s var(--ease); max-width: 1000px; }
.post-card:hover { transform: translateY(-4px) rotate(-.2deg); box-shadow: var(--shadow-lift); }
.post-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.post-card > div { padding: 22px 26px 22px 0; }
.post-card h2 { font-size: 26px; margin: 0 0 10px; }
.post-card .ink { display: inline-block; margin-top: 14px; }
@media (max-width: 760px) { .post-card { grid-template-columns: minmax(0, 1fr); } .post-card > div { padding: 0 20px 22px; } }
.post { padding: 56px 0 96px; }
.post-wrap { max-width: 820px; }
.post h2 { margin: 44px 0 12px; font-size: 28px; }
.post p, .post li { color: var(--ink-2); font-size: 17px; }
.post li { margin: 8px 0; } .post li::marker { color: var(--ochre); }
.post b { color: var(--ink-hi); font-weight: 600; }
.post .sheet { margin: 18px 0; }
.post-cta { margin-top: 56px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.post-cta p { margin: 0; }
.tile .v.bad, .tile:first-child .v.bad { color: var(--rust); }
.post-cta .btn { justify-self: start; }

/* 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; }