/* Layout: a glassy "box" motif borrowed from the mascot's head; hash-routed pages share one nav and footer. */
:root {
  --paper: #f4f7fc;
  --surface: #ffffff;
  --ink: #101a2f;
  --ink-soft: #4a5874;
  --line: #d9e2f0;
  --blue: #3f86ee;
  --blue-deep: #1f5fcf;
  --blue-wash: #e3eeff;
  --orange: #f59a1b;
  --orange-deep: #c96f00;
  --orange-wash: #fff0dc;
  --on-orange: #1b1204;
  --ph: #8a5a00;
  --ph-bg: #fff6e3;
  --shadow: 0 1px 2px rgba(16,26,47,.06), 0 12px 32px -12px rgba(16,26,47,.18);
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1120px;
}
/* Phones and tablets always use the dark theme; desktop follows the system setting. */
@media (prefers-color-scheme: dark), (max-width: 900px) { :root:not([data-theme="light"]) {
  --paper: #0b1120; --surface: #121b2f; --ink: #eaf0fa; --ink-soft: #a3b1ca; --line: #243150;
  --blue: #6aa5ff; --blue-deep: #8db9ff; --blue-wash: #16264a; --orange: #ffab3d; --orange-deep: #ffbe6b;
  --orange-wash: #2e2211; --on-orange: #1b1204; --ph: #ffcf85; --ph-bg: #2a2010;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -14px rgba(0,0,0,.6); color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #0b1120; --surface: #121b2f; --ink: #eaf0fa; --ink-soft: #a3b1ca; --line: #243150;
  --blue: #6aa5ff; --blue-deep: #8db9ff; --blue-wash: #16264a; --orange: #ffab3d; --orange-deep: #ffbe6b;
  --orange-wash: #2e2211; --on-orange: #1b1204; --ph: #ffcf85; --ph-bg: #2a2010;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -14px rgba(0,0,0,.6); color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; margin: 0 }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 800 }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700 }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em }
p { margin: 0 }
a { color: var(--blue-deep) }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px) }
.eyebrow { font: 500 .75rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep) }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 36em }
.stack { display: grid; gap: 1rem }

/* placeholders */
.ph { background: var(--ph-bg); color: var(--ph); border: 1.5px dashed currentColor; border-radius: 6px; padding: .05em .4em; font-weight: 600; white-space: nowrap }

/* nav */
header.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.nav .wrap { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; padding-block: .7rem }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font: 800 1.35rem/1 var(--f-display); letter-spacing: -.02em }
.brand img { width: 40px; height: 40px }
.brand span b { color: var(--blue) }
.nav nav { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto }
.nav nav a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .75rem; border-radius: 999px }
.nav nav a:hover { color: var(--ink); background: var(--blue-wash) }
.nav nav a[aria-current="page"] { color: var(--ink); background: var(--blue-wash) }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .55rem; font: 700 1rem/1 var(--f-body); padding: .9rem 1.3rem; border-radius: 14px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease }
.btn:hover { transform: translateY(-1px) }
.btn-primary { background: var(--orange); color: var(--on-orange); box-shadow: 0 6px 0 -1px var(--orange-deep) }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line) }
.btn-sm { padding: .6rem 1rem; font-size: .9rem; border-radius: 12px; box-shadow: none }
.stores { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center }
.store { display: inline-flex; align-items: center; gap: .7rem; background: var(--ink); color: var(--paper); text-decoration: none; padding: .6rem 1.1rem .6rem .9rem; border-radius: 12px; min-width: 176px; position: relative }
.store svg { width: 26px; height: 26px; flex: none; fill: currentColor }
.store small { display: block; font-size: .68rem; opacity: .8; letter-spacing: .02em }
.store strong { display: block; font: 700 1.05rem/1.1 var(--f-display) }
.store .tag { position: absolute; top: -9px; right: -8px; font: 500 .62rem/1 var(--f-mono); background: var(--ph-bg); color: var(--ph); border: 1.5px dashed var(--ph); padding: .25rem .4rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em }
.store-note { font-size: .85rem; color: var(--ink-soft) }

/* hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem) }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center }
.hero-copy { display: grid; gap: 1.5rem; min-width: 0 }
.hero h1 .strike { position: relative; white-space: nowrap; color: var(--blue) }
.hero h1 .strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 55%; height: .14em; background: var(--orange); border-radius: 4px; transform: rotate(-3deg) }
.stage { position: relative; aspect-ratio: 1; max-width: 100% }
.cube { position: absolute; inset: 8% 6% 4% 6%; border-radius: 36px; background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 30%, transparent), color-mix(in srgb, var(--blue) 8%, transparent)); border: 2px solid color-mix(in srgb, var(--blue) 45%, transparent); transform: rotate(-4deg) }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(16,26,47,.22)) }
.chip { position: absolute; display: flex; align-items: center; gap: .45rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 999px; padding: .45rem .8rem .45rem .5rem; font: 600 .82rem/1 var(--f-body); white-space: nowrap; animation: bob 6s ease-in-out infinite }
.chip i { width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: var(--on-orange); display: grid; place-items: center; font: 700 .7rem/1 var(--f-body); font-style: normal }
.chip:nth-of-type(1) { top: 10%; left: -6% }
.chip:nth-of-type(2) { top: 34%; right: -8%; animation-delay: -1.5s }
.chip:nth-of-type(3) { bottom: 30%; left: -9%; animation-delay: -3s }
.chip:nth-of-type(4) { bottom: 8%; right: -2%; animation-delay: -4.5s }
@keyframes bob { 50% { transform: translateY(-6px) } }
@media (prefers-reduced-motion: reduce) { .chip { animation: none } .btn { transition: none } }

/* sections */
section.band { padding-block: clamp(3rem, 7vw, 5.5rem) }
section.alt { background: var(--surface); border-block: 1px solid var(--line) }
.head { display: grid; gap: .8rem; margin-bottom: 2.5rem; max-width: 44rem }

.who { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem }
.who div { padding: 1.25rem; border-top: 3px solid var(--blue); display: grid; gap: .4rem; align-content: start }
.who div:nth-child(even) { border-color: var(--orange) }
.who p { color: var(--ink-soft); font-size: .95rem }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; counter-reset: s; list-style: none; padding: 0; margin: 0 }
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem; display: grid; gap: .6rem; align-content: start; counter-increment: s }
.steps li::before { content: counter(s); font: 800 1.6rem/1 var(--f-display); color: var(--blue); width: 48px; height: 48px; display: grid; place-items: center; background: var(--blue-wash); border-radius: 12px; transform: rotate(-4deg) }
.steps p { color: var(--ink-soft); font-size: .95rem }

.kit { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface) }
.kit div { padding: 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: .45rem; align-content: start }
.kit div:nth-child(3n) { border-right: 0 }
.kit div:nth-last-child(-n+3) { border-bottom: 0 }
.kit .k { font: 500 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep) }
.kit p { color: var(--ink-soft); font-size: .95rem }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start }
.ledger { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden }
.ledger h3 { padding: 1rem 1.25rem; font-size: 1rem; border-bottom: 1px solid var(--line) }
.ledger ul { list-style: none; margin: 0; padding: .4rem 0 }
.ledger li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 1.25rem; font-size: .95rem }
.ledger li span:last-child { color: var(--ink-soft); text-align: right }
.ledger.good h3 { background: var(--blue-wash) }
.ledger.good li span:last-child { color: var(--blue-deep); font-weight: 600 }

.promise { display: grid; gap: 1rem; background: var(--ink); color: var(--paper); border-radius: 24px; padding: clamp(1.5rem, 4vw, 2.5rem) }
.promise .eyebrow { color: var(--orange) }
.promise p { opacity: .85 }

.faq { display: grid; gap: .6rem; max-width: 50rem }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem }
.faq summary { font-weight: 700; cursor: pointer }
.faq details p { margin-top: .6rem; color: var(--ink-soft) }

.cta { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; background: var(--blue-wash); border-radius: 28px; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden }
.cta img { width: 180px; transform: rotate(-6deg) }
.cta .stack { gap: 1.25rem }

/* pricing */
.toggle { justify-self: start; display: inline-flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px }
.toggle button { font: 700 .9rem/1 var(--f-body); border: 0; background: transparent; color: var(--ink-soft); padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper) }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; align-items: stretch }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.6rem; display: grid; gap: 1rem; grid-template-rows: auto auto auto 1fr auto }
.tier.pick { border: 2px solid var(--orange); box-shadow: var(--shadow) }
.tier .for { color: var(--ink-soft); font-size: .95rem }
.price { font: 800 2.6rem/1 var(--f-display); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap }
.price small { font: 500 .9rem/1 var(--f-body); color: var(--ink-soft) }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; align-content: start }
.tier li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem }
.tier li::before { content: ""; width: 10px; height: 10px; margin-top: .45em; border-radius: 3px; background: var(--blue); transform: rotate(-8deg) }
.badge { justify-self: start; font: 500 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--orange-wash); color: var(--orange-deep); padding: .35rem .55rem; border-radius: 6px }
.notice { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; background: var(--ph-bg); color: var(--ink); border: 1.5px dashed var(--ph); border-radius: 16px; padding: 1rem 1.2rem; font-size: .95rem; margin-bottom: 2rem }
.notice strong { color: var(--ph) }
.notice::before { content: "!"; width: 26px; height: 26px; border-radius: 50%; background: var(--ph); color: var(--ph-bg); display: grid; place-items: center; font-weight: 800 }

/* about */
.about-hero .wrap { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: center }
.about-hero img { width: 100%; max-width: 320px }
.values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem }
.values div { display: grid; gap: .5rem; align-content: start }
.values p { color: var(--ink-soft) }
.quote { font: 700 clamp(1.4rem, 2.6vw, 1.9rem)/1.3 var(--f-display); letter-spacing: -.01em; max-width: 34em; text-wrap: balance }

/* legal */
.legal .wrap { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 3rem; align-items: start }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); display: grid; gap: .2rem; font-size: .9rem }
.toc a { color: var(--ink-soft); text-decoration: none; padding: .3rem 0 }
.toc a:hover { color: var(--ink) }
.toc strong { font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem }
.doc { max-width: 42rem; display: grid; gap: 1.1rem }
.doc h2 { font-size: 1.45rem; margin-top: 1.4rem; scroll-margin-top: 90px }
.doc p, .doc li { color: var(--ink-soft) }
.doc ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem }
.doc .meta { font: 500 .8rem/1.5 var(--f-mono); color: var(--ink-soft) }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 520px }
th, td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top }
th { font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper) }
tr:last-child td { border-bottom: 0 }

/* support + footer */
.mail { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .4rem .4rem .4rem .9rem; font-weight: 700 }
.mail code { font: 600 1rem/1 var(--f-mono); user-select: all; color: var(--ink) }
.copy { font: 700 .8rem/1 var(--f-body); background: var(--blue-wash); color: var(--blue-deep); border: 0; border-radius: 8px; padding: .5rem .7rem; cursor: pointer }
footer { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; background: var(--surface) }
footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: 2rem }
footer h4 { font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .9rem }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem }
footer a { color: var(--ink); text-decoration: none }
footer a:hover { color: var(--blue-deep) }
footer .fine { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.5rem; font-size: .85rem; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap }


@media (max-width: 900px) {
  .hero .wrap, .split, .about-hero .wrap, .legal .wrap { grid-template-columns: 1fr }
  .stage { max-width: 440px; width: 100%; margin-inline: auto }
  .who, .steps { grid-template-columns: repeat(2, minmax(0,1fr)) }
  .kit { grid-template-columns: repeat(2, minmax(0,1fr)) }
  .kit div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important }
  .kit div:nth-child(2n) { border-right: 0 !important }
  .kit div:nth-last-child(-n+2) { border-bottom: 0 !important }
  .stage { max-width: 380px }
  .about-hero img { max-width: 220px }
  .toc { position: static; grid-auto-flow: row }
  footer .wrap { grid-template-columns: 1fr 1fr }
  footer .wrap > :first-child { grid-column: 1 / -1 }
}
@media (max-width: 720px) {
  .tiers, .values { grid-template-columns: 1fr }
  .tiers { max-width: 30rem }
}
@media (hover: none) { .nav nav a { padding: .65rem .85rem } .toc a { padding: .55rem 0 } }
@media (max-width: 560px) {
  body { font-size: 16px }
  .who, .steps, .kit { grid-template-columns: 1fr }
  .kit div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important }
  .kit div:last-child { border-bottom: 0 !important }
  .cta { grid-template-columns: 1fr }
  .cta img { width: 130px }
  .chip { font-size: .72rem }
  .chip:nth-of-type(1), .chip:nth-of-type(3) { left: 0 }
  .chip:nth-of-type(2), .chip:nth-of-type(4) { right: 0 }
  .nav nav { margin-left: 0; width: 100% }
  .nav .dl { display: none }
}

.store { cursor: default }
.soon { font: 700 1.3rem/1.2 var(--f-display); color: var(--ink) }