/* jacquelinecnichols.com — one stylesheet for every page.
   Palette: Ivory by default (ivory, near-black ink, champagne hairlines). Evening (night plum,
   claret, champagne) is the switch: ?palette=evening or the footer toggle.
   Type: Newsreader + Hanken Grotesk, Pinyon Script for the signature. Text sizes follow the
   research for readers 38 to 62: body 16px and up, labels 12px and up, no faint grey. */

/* Fonts are self-hosted, latin subsets, under the SIL Open Font License (see fonts/*-OFL.txt).
   No third-party font server: the site renders the same if Google is slow or blocked. */
/* Newsreader is variable (optical size and weight), so headlines and small headings each get their own cut. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); }

:root {
  --radius: 22px; --pill: 999px;
  --bg: #fbf8f2; --bg2: #ffffff; --bg3: #f2ece2; --ink: #16110f; --ink2: #4a4044; --ink3: #5a4f52;
  --claret: #5e1a2e; --claret2: #7a2a3f; --gold: #876636; --gold2: #a9844f; --gold3: #dcc8a2; --paper: #fbf8f2; --on-gold: #fffdf8;
  --line: rgba(22,17,15,.13); --glass: rgba(22,17,15,.03);
  --onc: #fbefe6; --onc2: #e3cfc6; --onc3: #c4a9af; --onc-gold: #e9d3ac;
  --btn-a: #2e2428; --btn-b: #16110f; --btn-ink: #fbf8f2; --btn-glow: rgba(22,17,15,.5);
  --glow: rgba(220,200,162,.55); --open-mix: 7%; --cup-glow: 22%; --sheet-shadow: rgba(40,30,25,.28); --err: #a3263a;
  --em: #7a2a3f; --glint: #b58a45; --sheen: rgba(255,255,255,.3);
  --display: "Newsreader", Georgia, serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --h1: 43px; --h2: 31px; --dw: 500; --nav: 70px;
  color-scheme: light;
}
:root[data-palette="evening"] {
  --bg: #150f13; --bg2: #1e161b; --bg3: #2c2027; --ink: #f5ede6; --ink2: #cbbcb3; --ink3: #b3a4aa;
  --claret: #4a1424; --claret2: #5e1a2e; --gold: #d6b47c; --gold2: #e9d3ac; --gold3: #9a7447; --paper: #f5ede6; --on-gold: #2a1a10;
  --line: rgba(214,180,124,.22); --glass: rgba(245,237,230,.06);
  --btn-a: #e9d3ac; --btn-b: #d6b47c; --btn-ink: #2a1a10; --btn-glow: #d6b47c;
  --glow: rgba(94,26,46,.7); --open-mix: 45%; --cup-glow: 45%; --sheet-shadow: rgba(0,0,0,.8); --err: #e8a0a0;
  --em: #d6b47c; --glint: #ffe2a6; --sheen: rgba(255,255,255,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: var(--nav); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100svh; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--dw); line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: 22px; }
p { margin: 0; }
a { color: inherit; }
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.lede { font-size: 17px; color: var(--ink2); max-width: 36em; }
.wrap { padding-inline: 20px; max-width: 1180px; margin-inline: auto; width: 100%; }
.sig { font-family: var(--script); font-size: 44px; line-height: 1; color: var(--gold); font-weight: 400; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--pill); padding: 13px 22px; font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--btn-ink); box-shadow: 0 10px 30px -12px var(--btn-glow); }
.btn-ghost { background: var(--glass); color: var(--ink); border-color: var(--line); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--gold); }
.btn .zero { font-family: var(--display); font-weight: 600; font-size: 17px; }
.act { display: flex; flex-direction: column; justify-content: center; padding-block: 28px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--on-gold); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }

/* phones: three screens that snap. A flick rests on the next screen, a slow scroll goes where it likes. */
@media (max-width: 759px) {
  html { scroll-snap-type: y proximity; }
  .act { min-height: calc(100svh - var(--nav)); scroll-snap-align: start; scroll-snap-stop: always; }
}

/* nav: the one place Join free lives on the phone */
.nav { position: sticky; top: 0; z-index: 4; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 22px; height: calc(var(--nav) - 1px); }
.logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: var(--ink); }
.logo b { font-family: var(--display); font-weight: var(--dw); font-size: 21px; letter-spacing: .01em; }
.logo span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.nav-links { display: none; gap: 26px; margin-left: auto; margin-right: 6px; }
.nav-links a { color: var(--ink2); text-decoration: none; font-size: 15px; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--gold); }
.nav .btn { padding: 10px 16px; font-size: 15px; margin-left: auto; }
.burger { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: var(--glass); flex: 0 0 auto; cursor: pointer; padding: 0; color: var(--ink); }
.burger i { display: block; width: 16px; height: 1.5px; background: currentColor; margin: 2px 0; }
.menu { position: fixed; inset: var(--nav) 0 auto 0; z-index: 5; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: grid; gap: 4px; padding: 14px 20px 20px; }
.menu a { padding: 12px 6px; text-decoration: none; color: var(--ink); font-size: 18px; font-family: var(--display); border-bottom: 1px solid var(--line); }
.menu a:last-child { border-bottom: 0; }

/* screen 1: the statement */
.hero { position: relative; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.hero .glow { position: absolute; width: 90%; aspect-ratio: 1; max-width: 100%; border-radius: 50%; left: 50%; top: -40%; transform: translateX(-50%); background: radial-gradient(circle, var(--glow), transparent 65%); filter: blur(30px); pointer-events: none; }
.hero .wrap { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
/* the promise and the turn, as two beats */
.hero h1 { font-size: calc(var(--h1) * 1.1); max-width: 12ch; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l2 { font-style: italic; color: var(--em); margin-top: .1em; }
.hero .lede { text-align: center; font-size: 18px; line-height: 1.5; max-width: 24em; }
/* her credentials, straight after the promise, readable */
.hero .creds { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 16px; line-height: 1.45; color: var(--ink2); font-weight: 500; max-width: 34em; }
.hero .creds li { white-space: nowrap; }
.hero .creds li::before { content: "\2726"; color: var(--gold); margin-right: 8px; font-size: 11px; vertical-align: 2px; }
.hero .motto { font-family: var(--script); font-size: 38px; color: var(--gold); line-height: 1; }
.hero .hint { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink3); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hero .hint i { width: 10px; height: 10px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0) rotate(45deg) } 50% { transform: translateY(5px) rotate(45deg) } }

/* screen 2: the ribbon over the invitation */
.door { gap: 10px; padding-block: 8px; }
.ribbon { display: grid; gap: 8px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ribbon .row { display: flex; gap: 10px; width: max-content; animation: slide 46s linear infinite; }
.ribbon .row.rev { animation-direction: reverse; animation-duration: 54s; }
@keyframes slide { to { transform: translateX(-50%) } }
.q { flex: 0 0 auto; width: 224px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); font-size: 14px; line-height: 1.35; color: var(--ink2); display: flex; flex-direction: column; gap: 4px; }
.q b { font-family: var(--display); font-weight: 500; font-style: italic; font-size: 15px; color: var(--ink); }
.q span { font-size: 11px; color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; }
.q span::before { content: "✦ "; color: var(--gold); }
.behind { display: grid; gap: 8px; justify-items: center; text-align: center; margin-top: 2px; padding-inline: 20px; }
.behind svg { width: 68px; height: auto; filter: drop-shadow(0 14px 30px color-mix(in srgb, var(--gold) var(--cup-glow), transparent)); }
.behind h2 { font-size: 24px; line-height: 1.15; max-width: 22ch; }
.behind p { color: var(--ink2); max-width: 30em; font-size: 16px; line-height: 1.45; }
.behind .btn { margin-top: 2px; }
.behind small { color: var(--ink3); font-size: 14px; }
.behind small a { color: var(--gold2); cursor: pointer; }

/* screen 3: the toast cards */
.toast { gap: 9px; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 7px; height: 7px; border-radius: 7px; background: var(--line); transition: width .3s cubic-bezier(.2,.7,.2,1), background .3s; cursor: pointer; }
.dots i.on { width: 24px; background: var(--gold); }
.cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 6px 20px; scrollbar-width: none; align-items: stretch; }
.cards::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; flex: 0 0 84%; position: relative; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--line); overflow: hidden; min-height: 360px; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; min-width: 0; }
.card:hover { transform: translateY(-4px); border-color: var(--gold); }
.card .art { height: 150px; position: relative; filter: blur(7px) saturate(1.1); transform: scale(1.04); flex: 0 0 auto; }
.card .art.a1 { background: radial-gradient(circle at 30% 40%, var(--gold) 0 18%, transparent 19%), radial-gradient(circle at 70% 60%, var(--claret2) 0 26%, transparent 27%), linear-gradient(160deg, var(--bg3), var(--claret)); }
.card .art.a2 { background: repeating-linear-gradient(90deg, var(--gold3) 0 6px, transparent 6px 18px), linear-gradient(160deg, var(--claret2), var(--bg3)); }
.card .art.a3 { background: radial-gradient(circle at 50% 50%, var(--gold2) 0 22%, var(--claret2) 23% 40%, transparent 41%), linear-gradient(160deg, var(--bg3), var(--claret2)); }
.card .meta { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .kind { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); display: flex; justify-content: space-between; }
.card .kind em { font-style: normal; color: var(--ink3); letter-spacing: 0; text-transform: none; }
.card h3 { font-size: 21px; }
.card .meta p { color: var(--ink2); font-size: 16px; }
.card .lock { position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); color: var(--gold2); font-size: 14px; }
.card .unlock { position: absolute; top: 14px; right: 14px; padding: 6px 11px; border-radius: var(--pill); background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(-4px); transition: .3s; cursor: pointer; border: 0; font-family: var(--body); }
.card:hover .unlock, .card:focus-within .unlock { opacity: 1; transform: none; }
.card.open { background: linear-gradient(170deg, var(--bg2), color-mix(in srgb, var(--claret) var(--open-mix), var(--bg2))); }
.card.open .meta { padding-top: 52px; gap: 10px; }
.card.open .try { position: absolute; top: 14px; left: 14px; padding: 6px 11px; border-radius: var(--pill); border: 1px solid var(--gold); color: var(--gold2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--glass); }
.card input[type=range] { width: 100%; accent-color: var(--gold); height: 28px; margin-top: 2px; }
.card .ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); letter-spacing: .04em; text-transform: uppercase; gap: 8px; }
.card .read { font-family: var(--display); font-size: 17px; line-height: 1.25; min-height: 3.6em; }
.card .read b { color: var(--gold); font-weight: 600; }
.card .quiz-go { margin-top: auto; display: grid; gap: 6px; }
.card .quiz-go .btn { width: 100%; padding: 18px 16px; font-size: 15px; flex-direction: column; gap: 4px; line-height: 1.2; white-space: normal; }
.card .quiz-go .btn small { font: 500 12px var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.premium-go { padding-inline: 20px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.premium-go .btn { width: 100%; max-width: 420px; }
.premium-go small { color: var(--ink3); font-size: 14px; }
.foot { padding: 14px 20px 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; font-size: 13px; color: var(--ink3); }
.foot nav { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.foot a { color: var(--ink2); text-decoration: none; }
.foot button { font: inherit; color: var(--ink2); background: none; border: 1px solid var(--line); border-radius: var(--pill); padding: 4px 10px; cursor: pointer; }

/* the private strategy page */
.premium { padding-bottom: 20px; }
.premium .wrap { display: grid; gap: 26px; padding-block: 24px; }
.back { color: var(--ink3); font-size: 15px; text-decoration: none; }
.back:hover { color: var(--gold); }
.premium-head { display: grid; gap: 10px; }
.premium-head h2 { font-size: calc(var(--h2) * 1.15); }
.about { border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--line); padding: 24px 22px; display: grid; gap: 14px; }
.about .row { display: flex; align-items: center; gap: 16px; }
.about .face { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, var(--bg3), var(--claret2)); border: 1px solid var(--gold); display: grid; place-items: center; font-family: var(--script); font-size: 30px; color: var(--gold); flex: 0 0 auto; }
.about p { color: var(--ink2); font-size: 16px; }
.about .pull { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--ink); }
.tiers { display: grid; gap: 16px; }
.tier { border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg2); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; }
.tier.featured { background: linear-gradient(160deg, var(--claret2), var(--claret)); border-color: var(--gold); box-shadow: 0 30px 60px -40px var(--gold); color: var(--onc); }
.tier.featured ul { color: var(--onc2); }
.tier.featured .price { color: var(--onc-gold); }
.tier.featured .price small { color: var(--onc3); }
.tier.featured .was, .tier.featured li::before { color: var(--onc-gold); }
.tier .price { font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 600; color: var(--gold2); }
.tier .price small { font: 500 14px var(--body); color: var(--ink3); margin-left: 8px; text-decoration: line-through; }
.tier .was { font-size: 13px; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--ink2); font-size: 16px; }
.tier li::before { content: "— "; color: var(--gold); }
.tier .btn { margin-top: auto; align-self: start; }
/* the featured tier is claret in the light too, so its button and tag go champagne there */
:root:not([data-palette="evening"]) .tier.featured { --btn-a: #f3e4c8; --btn-b: #d6b47c; --btn-ink: #2a1a10; --btn-glow: #d6b47c; --gold: #e9d3ac; --on-gold: #2a1a10; }
.tier .tag { position: absolute; top: -12px; right: 20px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--pill); }
.more { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 16px; color: var(--ink2); }
.more a { color: var(--gold2); text-decoration: none; border-bottom: 1px solid var(--line); }

/* the Deserve Level quiz page */
.quiz .wrap { display: grid; gap: 18px; padding-block: 22px 40px; max-width: 640px; }
.quiz-head { display: grid; gap: 8px; }
.quiz-head h2 { font-size: calc(var(--h2) * 1.05); }
.quiz-head p { color: var(--ink2); font-size: 16px; }
.progress { display: flex; gap: 5px; }
.progress i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.progress i.done { background: var(--gold); }
.progress i.now { background: var(--gold2); }
.qcard { border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--line); padding: 22px 20px; display: grid; gap: 14px; }
.qcard .num { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.qcard h3 { font-size: 22px; line-height: 1.2; }
.opts { display: grid; gap: 8px; }
.opt { text-align: left; font: 500 16px/1.3 var(--body); color: var(--ink); background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; display: flex; gap: 12px; align-items: center; }
.opt b { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 600 12px var(--body); color: var(--gold); }
.opt:hover { border-color: var(--gold); transform: translateX(3px); }
.opt.pick { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.opt.pick b { border-color: var(--on-gold); color: var(--on-gold); }
.qnav { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink3); }
.qnav a { color: var(--ink2); cursor: pointer; text-decoration: none; }
.qnav a:hover { color: var(--gold); }
.result { display: grid; gap: 16px; justify-items: center; text-align: center; }
.result .eyebrow { margin-bottom: -6px; }
.result .level { display: grid; justify-items: center; gap: 2px; }
.result .level b { font-family: var(--display); font-size: 72px; line-height: 1; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.result .level span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.tri { width: min(100%, 340px); height: auto; overflow: visible; }
.tri .edge { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.tri .grid { fill: none; stroke: var(--line); stroke-width: 1; }
.tri .fill { fill: color-mix(in srgb, var(--claret) 50%, transparent); }
.tri text { font: 600 11px var(--body); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink3); transition: fill .6s; }
.tri text.lit { fill: var(--gold2); }
.tri .halo { fill: var(--gold); opacity: .18; }
.tri .pt { fill: var(--gold2); stroke: var(--bg); stroke-width: 2.5; }
.tri .trail { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.result .read { font-family: var(--display); font-size: 21px; line-height: 1.3; max-width: 26em; }
.result .read b { color: var(--gold); font-weight: 600; }
.result .lean { color: var(--ink2); font-size: 16px; max-width: 32em; }
.result .ctas { display: grid; gap: 8px; width: 100%; max-width: 360px; margin-top: 4px; justify-items: center; }
.result .ctas .btn { width: 100%; }
.result .ctas a.again { color: var(--ink3); font-size: 13px; cursor: pointer; text-decoration: none; }

/* the join sheet: what the Join free pill opens */
.sheet { position: fixed; inset: 0; z-index: 9; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); display: grid; place-items: start center; padding: calc(var(--nav) + 40px) 16px 24px; overflow: auto; }
.sheet-card { width: 100%; max-width: 440px; border-radius: 26px; background: var(--bg2); border: 1px solid var(--gold); padding: 28px 24px; display: grid; gap: 14px; box-shadow: 0 40px 80px -30px var(--sheet-shadow); position: relative; }
.sheet-card .x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--ink2); display: grid; place-items: center; cursor: pointer; font-size: 14px; font-family: var(--body); }
.sheet-card h3 { font-size: 26px; }
.sheet-card p { color: var(--ink2); font-size: 16px; }
.sheet-card form { display: grid; gap: 10px; }
.sheet-card input[type=email] { font: 16px var(--body); padding: 13px 18px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--glass); color: var(--ink); width: 100%; }
.sheet-card input::placeholder { color: var(--ink3); }
.sheet-card .err { color: var(--err); font-size: 14px; }
.sheet-card .done { display: none; }
.sheet-card.joined form, .sheet-card.joined p.lead { display: none; }
.sheet-card.joined .done { display: grid; gap: 10px; text-align: center; }
.sheet-card .done .sig { font-size: 40px; }
.sheet-card small { color: var(--ink3); font-size: 14px; }

/* ---------- glimmer: one quiet pass of light per element, in reading order ----------
   site.js adds .gl-run to one [data-gl] element at a time. Text gets a narrow sweep through its
   own letters (background-clip: text); buttons get a sheen. --gc is the element's own colour. */
.gl-text.gl-run { background-image: linear-gradient(100deg, var(--gc) 0 44%, color-mix(in srgb, var(--glint) 62%, var(--gc)) 50%, var(--gc) 56% 100%); background-size: 280% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gl-sweep 1.6s cubic-bezier(.45,.05,.35,1) forwards; }
.gl-text.gl-run::before, .gl-text.gl-run::after, .gl-text.gl-run * { -webkit-text-fill-color: currentColor; }
@keyframes gl-sweep { to { background-position: 0 0; } }
.gl-btn { position: relative; overflow: hidden; }
.gl-btn.gl-run::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 38%; background: linear-gradient(100deg, transparent, var(--sheen), transparent); transform: skewX(-18deg); animation: gl-sheen 1.3s cubic-bezier(.45,.05,.35,1) forwards; pointer-events: none; }
@keyframes gl-sheen { to { left: 130%; } }
.gl-star { position: absolute; width: 11px; height: 11px; margin: -5px 0 0 -5px; pointer-events: none; z-index: 6; color: var(--glint); opacity: 0; animation: gl-star 1.1s ease-out forwards; }
.gl-star svg { width: 100%; height: 100%; display: block; }
@keyframes gl-star { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 35% { opacity: .85; transform: scale(1) rotate(25deg); } 100% { opacity: 0; transform: scale(.4) rotate(70deg); } }
/* the swipe hint waits its turn (gl-on is set in each page's head unless reduced motion is asked for) */
.gl-on .hero .hint { opacity: 0; transition: opacity 1.2s ease; }
.gl-on .hero .hint.gl-shown { opacity: 1; }
.sheet-card .btn[disabled] { opacity: .6; transform: none; cursor: wait; }

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  .wrap { padding-inline: 48px; }
  .act { padding-block: 72px; }
  :root { --nav: 80px; }
  .nav-links { display: flex; }
  .nav .btn { margin-left: 0; }
  .burger, .menu { display: none !important; }
  h2 { font-size: calc(var(--h2) * 1.3); }
  .hero { padding-block: 110px 80px; }
  .hero h1 { font-size: calc(var(--h1) * 2); max-width: 16ch; }
  .hero .lede { font-size: 20px; }
  .hero .creds { max-width: none; }
  .hero .hint { display: none; }
  .door { gap: 48px; }
  .q { width: 320px; font-size: 15px; }
  .q b { font-size: 16px; }
  .behind { grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; column-gap: 48px; max-width: 1000px; margin-inline: auto; padding-inline: 48px; }
  .behind svg { width: 150px; grid-row: 1 / 6; }
  .behind h2 { font-size: calc(var(--h2) * 1.2); max-width: 24ch; }
  .behind p { font-size: 19px; }
  .nav-links a { font-size: 16px; }
  .cards { padding-inline: 48px; scroll-padding-inline: 48px; gap: 18px; max-width: 1180px; margin-inline: auto; width: 100%; }
  .card { flex-basis: calc((100% - 36px) / 3); }
  .premium-go .btn { width: auto; min-width: 360px; }
  .premium .wrap { gap: 40px; padding-block: 40px 60px; }
  .premium-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .tier { padding: 32px 28px; }
  .quiz .wrap { padding-block: 48px 80px; gap: 24px; }
  .quiz-head h2 { font-size: calc(var(--h2) * 1.4); }
  .qcard { padding: 32px 32px; }
  .result { gap: 20px; }
  .foot { padding: 20px 48px 30px; max-width: 1180px; margin-inline: auto; }
  .sheet { padding-top: 140px; }
}
@media (min-width: 1100px) { .wrap { padding-inline: 64px; } }
@media (prefers-reduced-motion: reduce) { .btn, .card, .dots i, .opt { transition: none } .btn:hover, .card:hover, .opt:hover { transform: none } .ribbon .row { animation: none } .hero .hint i { animation: none } .gl-run, .gl-run::after, .gl-star { animation: none !important } }

/* short phones (an SE with browser chrome): the opening tightens so it still fits one screen */
@media (max-width: 759px) and (max-height: 700px) {
  .hero .wrap { gap: 10px; }
  .hero .motto { font-size: 34px; }
}