/* Tailtype — "Sticker Pop" design system.
   Layout: one centred column (max 1120px) on a dotted butter-paper ground; content blocks are
   ink-outlined "stickers" with hard offset shadows. Single light theme by design. */
@font-face { font-family: "Bagel Fat One"; src: url("/fonts/bagel-fat-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --ink: #1B1530; --ink-2: #4A4362; --paper: #FFF8D9; --paper-2: #FFF1B8; --white: #FFFFFF;
  --yel: #FFD23F; --pink: #FF5FA2; --cob: #2D5BFF; --mint: #4FE0B5; --orange: #FF9F43; --violet: #8B6CFF; --sky: #7CC8FF; --red: #FF5A4E;
  --display: "Bagel Fat One", "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 18px; --bw: 3px; --shadow: 5px 5px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink);
  --gut: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--paper); background-image: radial-gradient(rgba(27,21,48,.11) 1.3px, transparent 1.6px); background-size: 22px 22px; color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--cob); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--cob); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: .005em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(36px, 6vw, 64px); }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: 24px; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gut); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,248,217,.92); backdrop-filter: blur(8px); border-bottom: var(--bw) solid var(--ink); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 30; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 26px; color: var(--ink); text-decoration: none; }
.logo img { width: 36px; height: 36px; border: 2.5px solid var(--ink); border-radius: 10px; }
.logo b { font-weight: 400; color: var(--pink); }
.nav { display: flex; align-items: center; gap: 22px; font-weight: 700; font-size: 15px; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav .btn { padding: 8px 14px; font-size: 15px; }
@media (max-width: 720px) { .nav a:not(.btn) { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-weight: 800; font-size: 17px; line-height: 1.2; color: var(--ink); background: var(--white); border: var(--bw) solid var(--ink); border-radius: 14px; padding: 12px 20px; box-shadow: 4px 4px 0 var(--ink); text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--cob); color: #fff; }
.btn.pink { background: var(--pink); }
.btn.yel { background: var(--yel); }
.btn.mint { background: var(--mint); }
.btn.dark { background: var(--ink); color: var(--yel); }
.btn.small { font-size: 15px; padding: 8px 14px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.btns { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .btn, .opt, .card-link { transition: none !important; } .btn:hover, .opt:hover, .card-link:hover { transform: none !important; } }

/* stickers / cards */
.sticker { background: var(--white); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px; }
.tag { display: inline-block; background: var(--mint); border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 14px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.tag.tilt { transform: rotate(-3deg); }
.tag.pink { background: var(--pink); } .tag.yel { background: var(--yel); } .tag.sky { background: var(--sky); } .tag.white { background: #fff; }
.eyebrow { font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lede { font-size: 19px; line-height: 1.55; max-width: 56ch; }
.muted { color: var(--ink-2); }
.hl { color: var(--cob); background: linear-gradient(transparent 62%, var(--yel) 62% 92%, transparent 92%); }

/* sections */
section { padding-block: 56px; }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.band { border-block: var(--bw) solid var(--ink); }
.band.pink { background: var(--pink); } .band.yel { background: var(--yel); } .band.mint { background: var(--mint); } .band.cob { background: var(--cob); color: #fff; } .band.white { background: #fff; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; padding-block: 48px 64px; }
.hero h1 { margin: 20px 0 16px; font-size: clamp(40px, 6.4vw, 76px); line-height: 1.0; }
.hero .lede { margin-bottom: 26px; }
.hero .meta { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.hero-art { max-width: 520px; justify-self: center; width: 100%; }
@media (max-width: 820px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; } .hero-art { max-width: 360px; order: -1; } }

/* grids */
.grid { display: grid; gap: 22px; }
.grid.g3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .card-link { padding: 14px; } .card-link h3 { font-size: 19px; } }
.card-link { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; transition: transform .12s ease, box-shadow .12s ease; min-width: 0; }
.card-link:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.card-link img { width: 100%; aspect-ratio: 280 / 250; }
.card-link h3 { font-size: 22px; }
.card-link .code { font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--ink-2); }
.card-link p { font-size: 15px; line-height: 1.45; }
.quiz-card { padding: 22px; gap: 14px; }
.quiz-card .art { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px; }
.quiz-card .go { font-weight: 800; color: var(--cob); }
@media (max-width: 600px) { .grid.quizzes { grid-template-columns: minmax(0, 1fr); } .quizzes .quiz-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 14px; align-items: start; } .quizzes .quiz-card .art { grid-row: span 4; } .quizzes .quiz-card .tag { justify-self: start; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; counter-reset: s; }
.step { counter-increment: s; }
.step::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border: var(--bw) solid var(--ink); border-radius: 12px; background: var(--yel); font-family: var(--display); font-size: 22px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.step h3 { font-size: 22px; margin-bottom: 6px; }

/* report promo */
.promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 36px; font-weight: 600; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border: 2.5px solid var(--ink); border-radius: 8px; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231B1530' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.price { font-family: var(--display); font-size: 56px; line-height: 1; }
.price small { font-family: var(--body); font-weight: 800; font-size: 16px; color: var(--ink-2); margin-left: 6px; }
@media (max-width: 820px) { .promo { grid-template-columns: minmax(0, 1fr); } }

/* faq */
.faq { display: grid; gap: 14px; }
.faq details { background: #fff; border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 0; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 18px; padding: 16px 20px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 20px 18px; }

/* footer */
.foot { border-top: var(--bw) solid var(--ink); background: var(--ink); color: #fff; padding-block: 44px 36px; }
main > .wrap:last-child { padding-bottom: 48px; }
.foot a { color: #fff; }
.foot .cols { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; }
.foot h4 { font-family: var(--display); font-weight: 400; font-size: 18px; margin: 0 0 10px; color: var(--yel); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.foot .small { font-size: 13px; opacity: .75; margin-top: 28px; }
.foot .logo { color: #fff; }
@media (max-width: 760px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* prose */
.prose { font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: 32px; margin-top: 40px; }
.prose h3 { font-size: 22px; margin-top: 28px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 6px; }
.prose .cite { font-size: 14px; color: var(--ink-2); border-left: 4px solid var(--yel); padding-left: 12px; }
.prose .updated, .prose .note { font-size: 14px; color: var(--ink-2); }
.prose .big-email { font-family: var(--display); font-size: clamp(24px, 5vw, 36px); }
.page-head { padding-block: 44px 8px; display: flex; flex-direction: column; gap: 14px; }
.table-wrap { overflow-x: auto; border: var(--bw) solid var(--ink); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 620px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 2px solid #EEE6C8; vertical-align: top; }
th { background: var(--yel); font-weight: 800; }
tr:last-child td { border-bottom: 0; }

/* quiz */
.quiz-shell { min-height: 70vh; padding-block: 36px 72px; }
.quiz-box { max-width: 760px; margin: 0 auto; }
.progress { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; font-weight: 800; font-size: 14px; }
.progress .bar { flex: 1; height: 16px; border: var(--bw) solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--pink); border-right: var(--bw) solid var(--ink); transition: width .25s ease; }
.q-title { font-size: clamp(28px, 4.6vw, 44px); margin-bottom: 26px; }
.opts { display: grid; gap: 14px; }
.opt { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font: inherit; font-weight: 700; font-size: 18px; color: var(--ink); background: #fff; border: var(--bw) solid var(--ink); border-radius: 16px; padding: 16px 18px; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.opt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--paper-2); }
.opt .k { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 2.5px solid var(--ink); border-radius: 10px; font-family: var(--display); font-size: 17px; background: var(--yel); }
.opt[aria-pressed="true"] { background: var(--mint); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }
.linkish { background: none; border: 0; font: inherit; font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 6px 0; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: center; }
@media (max-width: 720px) { .intro-grid { grid-template-columns: minmax(0, 1fr); } .intro-grid img { max-width: 240px; } }
.field { display: grid; gap: 8px; max-width: 420px; margin: 22px 0 26px; }
.field label { font-weight: 800; }
.field input { font: inherit; font-size: 19px; padding: 12px 16px; border: var(--bw) solid var(--ink); border-radius: 14px; background: #fff; box-shadow: inset 2px 2px 0 rgba(27,21,48,.08); }
.field small { color: var(--ink-2); font-size: 14px; }

/* result / type page */
.result-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 40px 28px; }
.result-hero .title { font-size: clamp(40px, 6vw, 70px); margin: 12px 0 14px; }
.result-hero .who { font-weight: 800; font-size: 20px; }
.code-chips { display: flex; gap: 10px; margin: 6px 0 18px; }
.code-chips span { width: 52px; height: 52px; display: grid; place-items: center; border: var(--bw) solid var(--ink); border-radius: 12px; font-family: var(--display); font-size: 26px; background: #fff; box-shadow: var(--shadow-sm); }
.code-chips span:nth-child(1) { background: var(--yel); } .code-chips span:nth-child(2) { background: var(--cob); color: #fff; } .code-chips span:nth-child(3) { background: var(--mint); }
@media (max-width: 820px) { .result-hero { grid-template-columns: minmax(0, 1fr); } .result-hero .art { max-width: 380px; order: -1; justify-self: center; } }
.meters { display: grid; gap: 18px; }
.meter { display: grid; gap: 6px; }
.meter .row { display: flex; justify-content: space-between; font-weight: 800; font-size: 15px; gap: 8px; }
.meter .row .on { color: var(--cob); }
.meter .track { position: relative; height: 22px; border: var(--bw) solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.meter .fill { position: absolute; top: 0; bottom: 0; background: var(--yel); }
.meter .fill.left { left: 0; border-right: var(--bw) solid var(--ink); }
.meter .fill.right { right: 0; border-left: var(--bw) solid var(--ink); }
.meter .blurb { font-size: 14px; color: var(--ink-2); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 760px) { .two { grid-template-columns: minmax(0, 1fr); } }
.list-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-plain li { padding-left: 30px; position: relative; }
.list-plain li::before { content: "★"; position: absolute; left: 0; top: -1px; color: var(--pink); font-size: 20px; -webkit-text-stroke: 1px var(--ink); }
.list-plain.quirk li::before { content: "!"; font-family: var(--display); color: var(--orange); }
.mini-title { font-size: 26px; margin-bottom: 14px; }
.share { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.share canvas, .share .preview { width: 100%; height: auto; border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); background: var(--pink); }
@media (max-width: 760px) { .share { grid-template-columns: minmax(0, 1fr); } .share .preview { max-width: 300px; } }
.locked { position: relative; overflow: hidden; }
.locked .blur { filter: blur(5px); user-select: none; pointer-events: none; opacity: .7; }
.locked .over { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: linear-gradient(rgba(255,248,217,0), rgba(255,248,217,.95) 55%); }
.unlock { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 460px; }
.notice { border: var(--bw) solid var(--ink); border-radius: 14px; padding: 14px 18px; background: var(--yel); font-weight: 700; }
.notice.err { background: #FFD3CF; }
.banner { background: var(--mint); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 14px 20px; font-weight: 800; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.runners { display: flex; flex-wrap: wrap; gap: 10px; }
.runners a { background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.fact { background: #fff; border: var(--bw) solid var(--ink); border-radius: 14px; padding: 14px 16px; }
.fact b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fact span { font-weight: 800; }
[data-result-only] { display: none; }
.has-result [data-result-only] { display: revert; }
.has-result [data-generic-only] { display: none; }

/* report */
.report section { padding-block: 28px; }
.report > section + section { margin-top: 22px; }
.report > section.two { padding: 0; }
.report .dim { display: grid; gap: 10px; }
.report .dim + .dim { margin-top: 26px; padding-top: 26px; border-top: 2px dashed #E3D8AE; }
.report .dim h3 { font-size: 24px; }
.report .pill { display: inline-block; background: var(--yel); border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 14px; }
.compat-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.compat-pick button { font: inherit; font-weight: 700; font-size: 14px; border: 2.5px solid var(--ink); border-radius: 999px; padding: 6px 12px; background: #fff; cursor: pointer; }
.compat-pick button[aria-pressed="true"] { background: var(--cob); color: #fff; }
.score-dots { display: flex; gap: 6px; }
.score-dots i { width: 18px; height: 18px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; }
.score-dots i.on { background: var(--pink); }
.sample-flag { background: var(--violet); color: #fff; }
.loading { display: grid; place-items: center; gap: 14px; padding: 80px 0; text-align: center; font-weight: 800; }
.spinner { width: 54px; height: 54px; border: 6px solid var(--ink); border-top-color: var(--pink); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.copyrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.copyrow input { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; }
.center { text-align: center; }
.mt { margin-top: 24px; }