/* ---------------------------------------------------------------
   WE CHILLIN — preview layout, 29 Sept 2026.
   Same brand codes (Bricolage + Jakarta, violet, accent bar, mark),
   new layout: side-headed sections, plain rows, a real email up top.
   Deliberately no eyebrow labels, gradient headlines, icon-card grids
   or background glows.
   --------------------------------------------------------------- */

:root {
  --bg: #faf7f4;
  --paper: #ffffff;
  --ink: #221721;
  --mid: #5a4a56;
  --faint: #7d6c79;
  --line: #e8dfda;
  --accent: #8f39c7;
  --accent-soft: #f1e6f8;
  --pink: #e0206f;
  --head: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body);
  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

.accent-bar { height: 7px; background: linear-gradient(90deg, #e01e79 0%, #a78bfa 55%, #ffb46b 100%); }

.container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 720px) { .container { padding: 0 2rem; } }

/* ---------- header ---------- */
header.site { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
header.site .container { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.mark svg { width: 1.9rem; height: 1.9rem; }
.mark span { font-family: var(--head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
nav.main { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.4rem; font-size: .95rem; }
nav.main a { color: var(--mid); text-decoration: none; font-weight: 500; }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--ink); }
nav.main a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
nav.main a.btn { color: #fff; padding: .55rem 1rem; font-size: .9rem; }
@media (max-width: 719px) { nav.main { width: 100%; gap: .35rem 1rem; font-size: .9rem; } }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--head); letter-spacing: -.03em; line-height: 1.08; margin: 0; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
.intro { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; color: var(--mid); max-width: 38rem; margin-top: 1.1rem; }
.small { font-size: .9rem; color: var(--faint); }
mark { background: var(--accent-soft); color: var(--ink); padding: 0 .2em; border-radius: 4px; }

/* ---------- buttons ---------- */
.btn { display: inline-block; background: var(--ink); color: #fff; font-weight: 600; font-size: 1rem;
  padding: .85rem 1.4rem; border-radius: 10px; text-decoration: none; border: 0; cursor: pointer; font-family: var(--body); }
.btn:hover { background: var(--accent); color: #fff; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.line:hover { background: var(--ink); color: #fff; }
.btn[disabled] { opacity: .45; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------- hero ---------- */
.hero { padding: 3.5rem 0 3rem; }
.hero.split .container { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero.split .container { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } .hero { padding: 5rem 0 4rem; } }

/* the example email */
.mail { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -24px rgba(34,23,33,.35); overflow: hidden; }
.mail .bar { display: flex; gap: 6px; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: #fcfaf8; }
.mail .bar i { width: 10px; height: 10px; border-radius: 50%; background: #e6dcd6; display: block; }
.mail .head { padding: 1rem 1.25rem .8rem; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--mid); }
.mail .head div { margin-bottom: .2rem; }
.mail .head b { color: var(--ink); font-weight: 600; }
.mail .body { padding: 1.1rem 1.25rem 1.3rem; font-size: .95rem; line-height: 1.6; }
.mail .body p { margin: 0 0 .8rem; }
.mail-cap { font-size: .85rem; color: var(--faint); margin-top: .8rem; }

/* ---------- side-headed sections ---------- */
.sec { border-top: 1px solid var(--line); padding: 3rem 0; }
.sec .container { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .sec .container { grid-template-columns: 17rem 1fr; gap: 3rem; } .sec { padding: 4rem 0; } }
.sec h2 { max-width: 16rem; }
.sec .body { max-width: 44rem; }
.sec .body > p:last-child { margin-bottom: 0; }
.sec.tint { background: var(--paper); }

/* plain rows */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { padding: .95rem 0; border-bottom: 1px solid var(--line); color: var(--mid); display: grid; gap: .25rem; }
@media (min-width: 640px) { .rows li { grid-template-columns: 13rem 1fr; gap: 1.5rem; } }
.rows li b { color: var(--ink); font-weight: 600; }
.rows.single li { grid-template-columns: 1fr; }

/* numbered steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 0 0 1.6rem 3rem; color: var(--mid); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-family: var(--head); font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; }
.steps li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .15rem; }
.steps li:last-child { padding-bottom: 0; }

/* week-by-week */
.weeks { display: grid; gap: 0; border-top: 2px solid var(--ink); }
@media (min-width: 720px) { .weeks { grid-template-columns: repeat(4, 1fr); } }
.weeks div { padding: 1rem 1.25rem 0 0; }
@media (max-width: 719px) { .weeks div { padding: 1rem 0; border-bottom: 1px solid var(--line); } }
.weeks .when { font-family: var(--head); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; display: block; margin-bottom: .3rem; }
.weeks p { color: var(--mid); font-size: .95rem; margin: 0; }

/* the big number */
.big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem; }
.big .n { font-family: var(--head); font-weight: 800; font-size: clamp(4rem, 12vw, 7rem); line-height: .9; letter-spacing: -.05em; color: var(--accent); }
.big .t { font-size: 1.15rem; max-width: 24rem; color: var(--ink); }

/* two columns inside a section */
.pair { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pair { grid-template-columns: 1fr 1fr; } }
.box { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.35rem; }
.sec.tint .box { background: var(--bg); }
.box h3 { margin-bottom: .5rem; }
.box p, .box li { color: var(--mid); }
.box ul { margin: 0; padding-left: 1.1rem; }
.box li { margin-bottom: .35rem; }
.box.yes { border-top: 4px solid #3f9b6d; }
.box.no { border-top: 4px solid var(--pink); }

/* tables */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .8rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }
thead th { font-size: .8rem; color: var(--faint); font-weight: 600; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
thead th span { display: block; font-weight: 500; }
tbody th { font-weight: 600; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody td.n { font-weight: 600; }

/* forms */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.field input { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: .75rem .85rem; }
.field input:focus { outline: 0; border-color: var(--accent); }
.form { max-width: 30rem; }
.err { color: var(--pink); font-weight: 600; font-size: .92rem; }
.hidden { display: none; }

/* about */
.founder { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .founder { grid-template-columns: 200px 1fr; gap: 2rem; } }
.photo-ph { aspect-ratio: 4/5; max-width: 200px; width: 100%; border-radius: 14px; border: 1.5px dashed #cdbfc9; background: #f3ece9;
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: .82rem; color: var(--faint); padding: 1rem; }
.ph { display: inline-block; background: #fff1b8; color: #5c4700; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .15rem .5rem; border-radius: 5px; margin-bottom: .6rem; }
.case { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.case:first-child { border-top: 0; padding-top: 0; }
.case h3 { font-size: 1.3rem; }
.case .meta { font-size: .88rem; color: var(--faint); margin: .25rem 0 .9rem; }
.logos { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 1rem; }
.logos div { height: 58px; border: 1.5px dashed #cdbfc9; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--faint); background: var(--paper); }

/* footer */
footer.site { border-top: 1px solid var(--line); padding: 2rem 0 3rem; font-size: .88rem; color: var(--faint); }
footer.site a { color: var(--mid); margin-right: 1rem; }

a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- homepage pieces brought back, 29 Sept ---------- */
.grad { background: linear-gradient(92deg, #a24fd9 0%, #e0206f 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.trio { display: grid; gap: 0; border-top: 2px solid var(--ink); }
@media (min-width: 720px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio > div { padding: 1.1rem 1.5rem 0 0; }
@media (max-width: 719px) { .trio > div { padding: 1rem 0; border-bottom: 1px solid var(--line); } }
.trio h3 { margin-bottom: .4rem; }
.trio p { color: var(--mid); margin: 0; }
.myth h3 s { text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
.myth .verdict { display: block; font-weight: 700; color: var(--ink); margin-bottom: .15rem; }

.tiers { display: grid; gap: .75rem; }
@media (min-width: 640px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--t); border-radius: 12px; padding: 1.1rem 1.2rem 1.2rem; }
.sec.tint .tier { background: var(--bg); }
.tier:nth-child(1) { --t: #6d4fd1; } .tier:nth-child(2) { --t: #9a3fd4; } .tier:nth-child(3) { --t: #b8308f; } .tier:nth-child(4) { --t: #d81f68; }
.tier .bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-bottom: .7rem; }
.tier .bars i { width: 5px; border-radius: 2px; background: var(--t); opacity: .2; display: block; }
.tier .bars i:nth-child(1) { height: 7px; } .tier .bars i:nth-child(2) { height: 11px; } .tier .bars i:nth-child(3) { height: 15px; } .tier .bars i:nth-child(4) { height: 18px; }
.tier:nth-child(1) .bars i:nth-child(-n+1), .tier:nth-child(2) .bars i:nth-child(-n+2),
.tier:nth-child(3) .bars i:nth-child(-n+3), .tier:nth-child(4) .bars i:nth-child(-n+4) { opacity: 1; }
.tier .name { font-family: var(--head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; color: var(--t); display: block; }
.tier .what { font-weight: 600; margin: .15rem 0 .35rem; display: block; }
.tier p { color: var(--mid); font-size: .95rem; margin: 0; }

/* do-it-yourself recipe */
.flow { list-style: none; margin: 0; padding: 0 0 0 3rem; position: relative; counter-reset: f; }
.flow::before { content: ""; position: absolute; left: .95rem; top: .6rem; bottom: .6rem; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #6d4fd1 0%, #9a3fd4 40%, #b8308f 72%, #d81f68 100%); }
.flow li { counter-increment: f; position: relative; padding-bottom: 1.4rem; color: var(--mid); }
.flow li:last-child { padding-bottom: 0; }
.flow li::before { content: counter(f, decimal-leading-zero); position: absolute; left: -3rem; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--bg); border: 2.5px solid #9a3fd4; display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 800; font-size: .72rem; color: var(--ink); }
.flow li:last-child::before { background: #d81f68; border-color: #d81f68; color: #fff; }
.flow b { display: block; color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .sec.stack .container { grid-template-columns: 1fr; gap: 1.75rem; } .sec.stack h2 { max-width: none; } }
.sec.stack .rows, .sec.stack .rows + .small { max-width: 52rem; }

/* ---------- viability quiz ---------- */
.quizbox { max-width: 46rem; }
.qbar { display: flex; gap: 4px; margin-bottom: 1.4rem; }
.qbar button { flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.qbar button::after { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--line); }
.qbar button.done::after { background: var(--accent); }
.qbar button.now::after { background: var(--ink); height: 5px; }
.qnum { font-size: .85rem; color: var(--faint); margin-bottom: .4rem; }
.qt { font-family: var(--head); font-weight: 800; font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 1.1rem; }
.qopts { display: flex; flex-wrap: wrap; gap: .5rem; }
button.a { font: inherit; font-size: .95rem; font-weight: 500; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 10px; padding: .6rem 1rem; cursor: pointer; text-align: left; }
button.a:hover { border-color: var(--accent); }
button.a[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.qnav { display: flex; gap: .5rem; align-items: center; margin-top: 1.5rem; }
.qnav .nav { font: inherit; font-size: .9rem; font-weight: 600; background: none; border: 1.5px solid var(--line); border-radius: 10px; padding: .45rem .9rem; cursor: pointer; color: var(--ink); }
.qnav .nav:disabled { opacity: .35; cursor: default; }
.qcount { margin-left: auto; font-size: .85rem; color: var(--faint); }
.score { margin-top: 2rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; }
.score .lab { font-size: .85rem; color: var(--faint); }
.score .num { font-family: var(--head); font-weight: 800; font-size: clamp(3rem, 10vw, 4.5rem); letter-spacing: -.04em; line-height: .95; }
.score .num small { font-size: .35em; color: var(--faint); letter-spacing: 0; }
.meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 1rem 0; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #6d4fd1, #9a3fd4, #b8308f, #d81f68); transition: width .3s; }
.subs { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; color: var(--faint); }
.subs b { color: var(--ink); margin-left: .3rem; }
.score .verdict { font-family: var(--head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; margin: .9rem 0 .4rem; }
.flags { list-style: none; margin: 1rem 0 0; padding: 0; }
.flags li { position: relative; padding: .35rem 0 .35rem 1.5rem; color: var(--mid); font-size: .95rem; }
.flags li::before { position: absolute; left: 0; top: .35rem; font-weight: 800; }
.flags li.ok::before { content: "\2713"; color: #3f9b6d; }
.flags li.no::before { content: "\2715"; color: var(--pink); }
.notfor { display: grid; gap: 1.25rem; align-items: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 1.75rem; }
@media (min-width: 720px) { .notfor { grid-template-columns: 1fr auto; padding: 2rem 2.25rem; } }
.notfor h2 { color: #fff; }
.notfor p { color: #d9cdd6; margin: .5rem 0 0; }
.notfor .btn { background: #fff; color: var(--ink); }
.notfor .btn:hover { background: var(--accent-soft); color: var(--ink); }

/* ---------------------------------------------------------------
   HALFWAY HOUSE — 29 Sept. Dark plum top and bottom (header, page
   heads, footer), light middle, lilac-tinted alternate sections.
   Delete this block to go back to the all-light version.
   --------------------------------------------------------------- */
:root { --bg: #f7f2ef; --plum: #221721; --plum-2: #2c1e2a; }
body { background: var(--bg); }

header.site { background: var(--plum); border-bottom-color: rgba(255,255,255,.08); }
.mark span { color: #fff; }
nav.main a { color: #c3b4be; }
nav.main a:hover, nav.main a[aria-current="page"] { color: #fff; }
nav.main a[aria-current="page"] { text-decoration-color: #cd85f2; }
nav.main a.btn { background: #fff; color: var(--plum); }
nav.main a.btn:hover { background: #f1e6f8; color: var(--plum); }

.hero { background: var(--plum); color: #f7f1f5;
  background-image: radial-gradient(circle at 88% 12%, rgba(205,133,242,.22), transparent 42%); }
.hero h1 { color: #fff; }
.hero .intro { color: #d4c6d0; }
.hero .grad, .notfor .grad { background: linear-gradient(92deg, #cd85f2 0%, #ff3d8f 90%); -webkit-background-clip: text; background-clip: text; }
.hero .btn { background: #fff; color: var(--plum); }
.hero .btn:hover { background: #f1e6f8; color: var(--plum); }
.hero .btn.line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.hero .btn.line:hover { background: rgba(255,255,255,.1); color: #fff; }
.hero a:not(.btn) { color: #fff; }
.hero .mail { border-color: rgba(255,255,255,.12); box-shadow: 0 24px 60px -28px rgba(0,0,0,.7); }
.hero .mail-cap { color: #a896a3; }

.sec.tint { background: #f1e8ef; }
.sec.tint .box, .sec.tint .tier { background: #fff; }
.sec { border-top-color: #e7dce2; }

footer.site { background: var(--plum); color: #a896a3; border-top: 0; margin-top: 0; }
footer.site a { color: #d4c6d0; }
footer.site a:hover { color: #fff; }
.hero .mail { color: var(--ink); }

/* ---------- more gradient, 29 Sept ---------- */
.hero { background-color: var(--plum);
  background-image: radial-gradient(ellipse at 90% 0%, rgba(205,133,242,.34), transparent 50%),
                    radial-gradient(ellipse at 0% 110%, rgba(255,61,143,.24), transparent 45%); }
.sec.tint { background: linear-gradient(120deg, #f3e7f7 0%, #f8ecf3 55%, #fcebe9 100%); }
.notfor { background: linear-gradient(115deg, #221721 0%, #3f1d48 55%, #6a1d4c 100%); }

/* ---------- free email check ---------- */
.checkrow { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 34rem; }
.checkrow input { flex: 1 1 14rem; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: .8rem .9rem; }
.checkrow input:focus { outline: 0; border-color: var(--accent); }
.report { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; margin-top: 1.5rem; max-width: 44rem; }
.rlab { font-size: .9rem; color: var(--faint); margin: 0; }
.rverdict { font-family: var(--head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; margin: .3rem 0 .3rem; }
.rsum { color: var(--mid); }
.rrows { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.rrows li { display: grid; grid-template-columns: 1.75rem 7.5rem 1fr; gap: .6rem; padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--mid); align-items: start; }
@media (max-width: 560px) { .rrows li { grid-template-columns: 1.75rem 1fr; } .rrows li span:last-child { grid-column: 2; } }
.rrows b { color: var(--ink); }
.rrows .ic { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #fff; }
.rrows .ok .ic { background: #3f9b6d; } .rrows .warn .ic { background: #d9901a; } .rrows .no .ic { background: var(--pink); }
.leadbox { margin-top: 1.5rem; max-width: 34rem; }

/* ===============================================================
   PLAYFUL — 6 Oct 2026. Kills the stripes ("neapolitan").
   One warm cream page; colour lives in objects, not bands.
   Delete from here down to return to v6 (copy in site-preview-v6-blocky/).
   =============================================================== */
:root { --bg: #fbf5ef; --plum: #221721; --c1: #6d4fd1; --c2: #9a3fd4; --c3: #b8308f; --c4: #d81f68;
  --heat: linear-gradient(90deg, #6d4fd1, #9a3fd4 35%, #b8308f 68%, #d81f68); }
body { background: var(--bg); overflow-x: hidden; }

/* header: cream, floating */
header.site { background: rgba(251,245,239,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 0; }
.mark span { color: var(--ink); }
nav.main a { color: var(--mid); }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--ink); }
nav.main a.btn { background: var(--ink); color: #fff; border-radius: 999px; }
nav.main a.btn:hover { background: var(--c4); color: #fff; }

/* buttons: pills with a wobble */
.btn { border-radius: 999px; transition: transform .15s ease, background .15s; }
.btn:hover { transform: translateY(-2px) rotate(-1.5deg); }

/* inner-page heads: cream, big, with a heat blob */
.hero { background: transparent; color: var(--ink); position: relative; isolation: isolate; }
.hero, .hero[class] { background-image: none; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 34rem; height: 34rem; right: -8rem; top: -12rem; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(205,133,242,.55), rgba(255,61,143,.25) 45%, transparent 70%); filter: blur(10px); }
.hero h1 { color: var(--ink); max-width: 16ch; }
.hero .intro { color: var(--mid); }
.hero .grad, .notfor .grad, .grad { background: linear-gradient(92deg, #9a3fd4 0%, #e0206f 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .btn { background: var(--ink); color: #fff; }
.hero .btn:hover { background: var(--c4); color: #fff; }
.hero .btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hero .btn.line:hover { background: var(--ink); color: #fff; }
.hero a:not(.btn) { color: var(--ink); }

/* sections: no bands, no rules. Headings get a heat underline */
.sec, .sec.tint { background: transparent; border-top: 0; }
.sec h2 { position: relative; padding-bottom: .55rem; }
.sec h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 5px; border-radius: 3px; background: var(--heat); }
.sec:nth-of-type(even) h2::after { transform: rotate(-3deg); }
.sec.tint .box, .sec.tint .tier, .box, .tier { background: #fff; }
.box, .tier, .case, .report, .score { border-radius: 18px; }
.box { box-shadow: 0 1px 0 var(--line), 0 14px 30px -22px rgba(34,23,33,.35); }
.case { background: #fff; border: 1px solid var(--line); padding: 1.4rem 1.5rem; margin-bottom: 1rem; transform: rotate(-.4deg); }
.case:nth-child(odd) { transform: rotate(.5deg); }
.case:first-child { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.notfor { background: linear-gradient(115deg, #221721 0%, #3f1d48 55%, #6a1d4c 100%); }

/* footer: plum slab with rounded top and a giant wordmark */
footer.site { background: var(--plum); border-radius: 2.5rem 2.5rem 0 0; margin-top: 3rem; padding: 3rem 0 2rem; position: relative; overflow: hidden; }
footer.site::after { content: "we chillin'"; display: block; font-family: var(--head); font-weight: 800; letter-spacing: -.06em; line-height: .8;
  font-size: clamp(4rem, 17vw, 13rem); text-align: center; margin-top: 2rem; white-space: nowrap;
  background: linear-gradient(92deg, #a78bfa, #ec5fc4 55%, #ff3d8f); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }

/* ---------- homepage ---------- */
.fun .hero-fun { padding: 3rem 0 2rem; }
.hero-fun .container { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero-fun .container { grid-template-columns: 1fr 15rem; } .fun .hero-fun { padding: 5.5rem 0 4rem; } }
.hero-fun h1 { font-size: clamp(3rem, 9vw, 6.6rem); line-height: .92; letter-spacing: -.055em; max-width: 11ch; }
.hot-stamp { display: inline-block; background: var(--heat); color: #fff; padding: .02em .22em .08em; border-radius: .18em;
  transform: rotate(-6deg) translateY(-.04em); box-shadow: 0 .12em 0 rgba(34,23,33,.18); animation: wobble 4s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: rotate(-6deg) translateY(-.04em); } 50% { transform: rotate(-2deg) translateY(-.1em); } }

.thermo { display: none; }
@media (min-width: 900px) { .thermo { display: flex; gap: 1rem; align-items: stretch; justify-self: end; height: 20rem; } }
.thermo-tube { width: 2.4rem; border-radius: 999px; background: #fff; border: 2px solid var(--ink); position: relative; overflow: hidden; }
.thermo-tube::after { content: ""; position: absolute; left: 50%; bottom: -.2rem; width: 3.4rem; height: 3.4rem; transform: translateX(-50%); }
.thermo-tube i { position: absolute; left: 4px; right: 4px; bottom: 4px; border-radius: 999px; height: 85%;
  background: linear-gradient(0deg, #6d4fd1, #9a3fd4 35%, #b8308f 68%, #d81f68); animation: rise 2.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { height: 8%; } to { height: 85%; } }
.thermo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--head); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.thermo li:nth-child(1) { color: var(--c4); } .thermo li:nth-child(2) { color: var(--c3); }
.thermo li:nth-child(3) { color: var(--c2); } .thermo li:nth-child(4) { color: var(--c1); }

.ticker { background: var(--ink); color: #fff; transform: rotate(-1.5deg); margin: 1.5rem -1rem 1rem; padding: .85rem 0; overflow: hidden; }
.ticker-track { display: flex; gap: 2.5rem; width: max-content; animation: slide 28s linear infinite;
  font-family: var(--head); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.ticker span::after { content: "\2726"; margin-left: 2.5rem; color: #ec5fc4; }
@keyframes slide { to { transform: translateX(-50%); } }

.blk { padding: 3.5rem 0; }
@media (min-width: 900px) { .blk { padding: 5rem 0; } }
.scrawl { display: inline-block; font-size: clamp(1.8rem, 4vw, 2.6rem); position: relative; margin-bottom: 2rem; }
.scrawl::after { content: ""; position: absolute; left: -.2rem; right: -.4rem; bottom: .05em; height: .32em; z-index: -1; border-radius: 4px;
  background: linear-gradient(90deg, rgba(205,133,242,.55), rgba(255,61,143,.4)); transform: rotate(-1.2deg); }
.scrawl { z-index: 0; }
.big-h { font-size: clamp(2rem, 5vw, 3.4rem); line-height: .98; letter-spacing: -.045em; }
.center { text-align: center; margin: 0 auto 2.5rem; max-width: 18ch; }

/* myths as pinned notes */
.fun .notes { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .fun .notes { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: start; } }
.fun .note { background: #fff; border-radius: 6px 22px 6px 22px; padding: 1.6rem 1.4rem 1.4rem; position: relative;
  box-shadow: 0 18px 30px -22px rgba(34,23,33,.45); transition: transform .2s; }
.fun .note::before { content: ""; position: absolute; top: -.55rem; left: 50%; width: 4.5rem; height: 1.1rem; transform: translateX(-50%) rotate(-3deg);
  background: rgba(205,133,242,.45); border-radius: 2px; }
.fun .note.n1 { transform: rotate(-2.5deg); } .fun .note.n2 { transform: rotate(1.8deg); } .fun .note.n3 { transform: rotate(-1deg); background: #fff4e8; }
@media (min-width: 760px) { .fun .note.n2 { margin-top: 2.2rem; } .fun .note.n3 { margin-top: .6rem; } }
.fun .note:hover { transform: rotate(0) scale(1.03); }
.fun .note h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.fun .note h3 s { text-decoration-color: var(--c4); text-decoration-thickness: 4px; }
.fun .note p { color: var(--mid); margin: 0; }
.fun .note .verdict { display: block; font-family: var(--head); font-weight: 800; font-size: 1.6rem; color: var(--ink); letter-spacing: -.03em; margin-bottom: .2rem; }

/* easiest channel: big numbers, staggered */
.split-fun { display: grid; gap: 2rem; }
@media (min-width: 900px) { .split-fun { grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; } .split-fun .big-h { position: sticky; top: 7rem; } }
.stagger { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 1.25rem; }
.stagger li { counter-increment: st; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: start; }
@media (min-width: 900px) { .stagger li:nth-child(2) { margin-left: 3rem; } .stagger li:nth-child(3) { margin-left: 6rem; } }
.stagger li::before { content: "0" counter(st); font-family: var(--head); font-weight: 800; font-size: 4.2rem; line-height: .8; letter-spacing: -.06em;
  background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stagger h3 { font-size: 1.4rem; margin: .3rem 0 .3rem; }
.stagger p { color: var(--mid); margin: 0; }

/* not for everyone: breaks the grid */
.notfor.tilt { transform: rotate(-1.2deg); border-radius: 28px; padding: 2.4rem 2rem; box-shadow: 0 30px 60px -30px rgba(106,29,76,.6); }
@media (min-width: 900px) { .notfor.tilt { margin: 0 -2rem; padding: 3rem 3.5rem; } .notfor.tilt h2 { font-size: 2.6rem; } }
.notfor .btn { background: #fff; color: var(--ink); }

/* tiers: a staircase that heats up */
.stairs { display: grid; gap: .9rem; align-items: end; }
@media (min-width: 640px) { .stairs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stairs { grid-template-columns: repeat(4, 1fr); } .fun .step.s1 { min-height: 13rem; } .fun .step.s2 { min-height: 15.5rem; } .fun .step.s3 { min-height: 18rem; } .fun .step.s4 { min-height: 20.5rem; } }
.fun .step { border-radius: 22px 22px 8px 8px; padding: 1.4rem 1.3rem; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .2s; }
.fun .step:hover { transform: translateY(-6px); }
.fun .step.s1 { background: var(--c1); } .fun .step.s2 { background: var(--c2); } .fun .step.s3 { background: var(--c3); } .fun .step.s4 { background: var(--c4); }
.fun .step .name { font-family: var(--head); font-weight: 800; font-size: 2.3rem; letter-spacing: -.05em; line-height: 1; }
.fun .step .what { font-weight: 700; margin: .35rem 0 .4rem; }
.fun .step p { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; }

.incl { margin-top: 2.5rem; }
.incl h3 { margin-bottom: 1rem; font-size: 1.3rem; }
.chips { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 640px) { .chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .chips { grid-template-columns: repeat(3, 1fr); } }
.chips li { background: #fff; border-radius: 16px; padding: .9rem 1.1rem; border: 1px solid var(--line); color: var(--mid); font-size: .95rem; }
.chips b { display: block; color: var(--ink); font-family: var(--head); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }

/* timeline on a heat line */
.heatline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; position: relative; }
.heatline::before { content: ""; position: absolute; left: .7rem; top: .5rem; bottom: .5rem; width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #6d4fd1, #9a3fd4 35%, #b8308f 68%, #d81f68); }
.heatline li { padding-left: 2.75rem; position: relative; }
.heatline li::before { content: ""; position: absolute; left: .2rem; top: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--bg); border: 4px solid var(--c2); }
.heatline li:nth-child(1)::before { border-color: var(--c1); } .heatline li:nth-child(3)::before { border-color: var(--c3); }
.heatline li:nth-child(4)::before { background: var(--c4); border-color: var(--c4); }
@media (min-width: 800px) {
  .heatline { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-top: 2.5rem; }
  .heatline::before { left: 0; right: 0; top: .55rem; bottom: auto; width: auto; height: 5px; background: var(--heat); }
  .heatline li { padding-left: 0; }
  .heatline li::before { top: -2.5rem; left: 0; }
  .heatline li:nth-child(even) { margin-top: 1.5rem; }
}
.heatline .when { display: block; font-family: var(--head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: .2rem; }
.heatline p { color: var(--mid); margin: 0; }

/* does it work + email check, side by side */
.duo { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }
.works p { color: var(--mid); margin-top: 1rem; }
.envelope { background: #fff; border-radius: 26px; padding: 2rem 1.6rem 1.75rem; position: relative; transform: rotate(1deg);
  box-shadow: 0 28px 50px -30px rgba(34,23,33,.5); border-top: 8px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--heat); background-origin: border-box; background-clip: padding-box, border-box; }
.envelope h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .6rem; }
.envelope p { color: var(--mid); }

@media (prefers-reduced-motion: reduce) {
  .hot-stamp, .ticker-track, .thermo-tube i { animation: none; }
  .btn:hover, .fun .note:hover, .fun .step:hover { transform: none; }
}
/* stagger fix: number spans both rows */
.stagger li { grid-template-columns: 5.5rem 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: 0; }
.stagger li::before { grid-row: 1 / span 2; grid-column: 1; }
.stagger li h3, .stagger li p { grid-column: 2; }
/* hero intro as two balanced lines */
.hero-fun .intro { max-width: 42rem; margin-bottom: 0; }
.hero-fun .intro-2 { margin-top: .5rem; color: var(--ink); font-weight: 500; }

/* ===============================================================
   ROUND 2 — 6 Oct. Homepage tweaks + inner pages get the same love.
   =============================================================== */
.eyebrow-fun { display: inline-block; font-weight: 700; font-size: .85rem; letter-spacing: .02em; color: var(--c2);
  background: #fff; border: 1.5px solid #e6d6ef; border-radius: 999px; padding: .35rem .9rem; margin: 0 0 1.4rem; transform: rotate(-1.5deg); }
.trio-fun { max-width: 64rem; margin: 0 auto; }
@media (min-width: 900px) {
  .trio-fun { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .trio-fun li { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .trio-fun li::before { grid-row: 1; grid-column: 1; margin-bottom: .6rem; }
  .trio-fun li h3, .trio-fun li p { grid-column: 1; }
  .stagger.trio-fun li:nth-child(2) { margin: 2rem 0 0; } .stagger.trio-fun li:nth-child(3) { margin: 4rem 0 0; }
}
.chips li.wide { grid-column: 1 / -1; background: linear-gradient(120deg, #f3e7f7, #fcebe9); border-color: transparent; }
.subline { font-family: var(--head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--c3); margin: -1.2rem 0 1.5rem; }
.solo { max-width: 46rem; }
.solo .envelope { transform: rotate(-.6deg); }

/* ---------- inner pages ---------- */
.hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); letter-spacing: -.05em; line-height: .95; }
.hero:not(.hero-fun) { padding: 4rem 0 2rem; }
.hero:not(.hero-fun) h1::after { content: ""; display: block; width: 4.5rem; height: 8px; border-radius: 4px; background: var(--heat); margin-top: 1rem; transform: rotate(-2deg); }

/* stacked sections: heading on top, content full width — no empty left column */
.sec { padding: 2.5rem 0; }
@media (min-width: 900px) { .sec { padding: 3rem 0; } .sec .container { grid-template-columns: 1fr; gap: 1.5rem; } }
.sec h2 { max-width: none; align-self: start; font-size: clamp(1.7rem, 3.6vw, 2.4rem); display: inline-block; justify-self: start; }
.sec h2::after { width: 100%; height: .3em; bottom: .1em; z-index: -1; opacity: .5; transform: rotate(-1deg); }
.sec h2 { z-index: 0; padding-bottom: 0; }
.sec .body { max-width: 62rem; }

/* rows → cards */
.sec .body > .rows { border: 0; display: grid; gap: .8rem; }
@media (min-width: 700px) { .sec .body > .rows { grid-template-columns: repeat(2, 1fr); } }
.sec .body > .rows li { display: block; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.25rem; transition: transform .2s; }
.sec .body > .rows li:hover { transform: translateY(-3px) rotate(-.4deg); }
.sec .body > .rows li b { display: block; font-family: var(--head); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: .25rem; }
.sec .body > .rows li:nth-child(4n+1) b { color: var(--c1); } .sec .body > .rows li:nth-child(4n+2) b { color: var(--c2); }
.sec .body > .rows li:nth-child(4n+3) b { color: var(--c3); } .sec .body > .rows li:nth-child(4n+4) b { color: var(--c4); }

/* numbered steps → big gradient numbers on a heat line */
.steps { position: relative; padding-left: 0; }
.steps::before { content: ""; position: absolute; left: 1.45rem; top: 1rem; bottom: 1rem; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #6d4fd1, #9a3fd4 35%, #b8308f 68%, #d81f68); }
.steps li { padding: 0 0 1.8rem 4.5rem; }
.steps li::before { width: 3rem; height: 3rem; font-size: 1.2rem; background: #fff; border: 3px solid var(--c2); color: var(--ink); top: -.4rem; }
.steps li:last-child::before { background: var(--c4); border-color: var(--c4); color: #fff; }
.steps li b { font-family: var(--head); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }

/* pairs → tilted notes */
.pair { gap: 1.5rem; }
.pair .box { border-radius: 6px 22px 6px 22px; transform: rotate(-1deg); padding: 1.5rem; }
.pair .box + .box { transform: rotate(1.2deg); background: #fff4e8; }
.box.yes, .box.no { border-top-width: 6px; }

/* tables in a card */
.tablewrap { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: .5rem 1rem; box-shadow: 0 18px 34px -26px rgba(34,23,33,.4); }
tbody tr:hover { background: #fbf4fa; }

/* case studies, quiz, report get the card shadow */
.case, .report, .score, .quizbox { box-shadow: 0 18px 34px -26px rgba(34,23,33,.4); }
.quizbox { background: #fff; border-radius: 22px; padding: 1.6rem; }

/* pricing calculator labels (were invisible) */
.qcalc .eyebrow { color: var(--mid); }
.fun .hero-fun h1 { font-size: clamp(3rem, 9vw, 6.6rem); line-height: .92; letter-spacing: -.055em; max-width: 11ch; }
.fun .hero-fun h1::after { display: none; }
@media (min-width: 1000px) { .chips { grid-template-columns: repeat(4, 1fr); } }

/* ===============================================================
   RESULTS — 6 Oct. Stat-led win cards with rosettes.
   =============================================================== */
.box.yes { border-top-color: var(--c1); }   /* no green on the site */

.wins-blk { padding-top: 1rem; }
.wins { display: grid; gap: 2rem; }
@media (min-width: 860px) { .wins { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2.25rem; } .win:nth-child(even) { margin-top: 3rem; } }
.win { --w: var(--c2); position: relative; background: #fff; border-radius: 28px; padding: 2rem 1.75rem 1.75rem; border-top: 10px solid var(--w);
  box-shadow: 0 26px 50px -32px rgba(34,23,33,.55); transform: rotate(-.8deg); transition: transform .25s; }
.win:nth-child(even) { transform: rotate(.9deg); }
.win:hover { transform: rotate(0) translateY(-4px); }
.win.c1 { --w: var(--c1); } .win.c2 { --w: var(--c2); } .win.c3 { --w: var(--c3); } .win.c4 { --w: var(--c4); }
.win h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); letter-spacing: -.04em; margin: .2rem 0 .6rem; padding-right: 7rem; }
.win-tag { font-size: .85rem; font-weight: 600; color: var(--faint); margin: 0; padding-right: 7rem; }
.win-stat { margin: 0 0 1.4rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; }
.win-stat b { font-family: var(--head); font-weight: 800; font-size: clamp(3.4rem, 8vw, 5rem); line-height: .9; letter-spacing: -.06em; color: var(--w); }
.win-stat span { font-family: var(--head); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); }
.win dl { margin: 0; display: grid; gap: .7rem; }
.win dl div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .8rem; align-items: baseline; padding-top: .7rem; border-top: 1.5px dashed var(--line); }
.win dt { font-family: var(--head); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; color: var(--w); }
.win dd { margin: 0; color: var(--mid); font-size: .97rem; }
.live-dot { display: inline-flex; align-items: center; gap: .35rem; margin-left: .4rem; color: var(--c4); font-weight: 700; }
.live-dot::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c4); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(216,31,104,.5); } 50% { box-shadow: 0 0 0 6px rgba(216,31,104,0); } }

/* rosette */
.rosette { position: absolute; top: -1.6rem; right: 1.1rem; width: 6.6rem; transform: rotate(8deg); filter: drop-shadow(0 10px 14px rgba(34,23,33,.25));
  animation: swing 5s ease-in-out infinite; transform-origin: 50% 10%; }
.win:nth-child(even) .rosette { animation-delay: -2.5s; }
@keyframes swing { 0%,100% { transform: rotate(8deg); } 50% { transform: rotate(-4deg); } }
.rosette svg { display: block; width: 100%; }
.rosette .ring { fill: var(--w); }
.rosette .tail { fill: var(--w); opacity: .75; }
.rosette .core { fill: #fff; stroke: var(--w); stroke-width: 3; stroke-dasharray: 3 4; }
.rosette span { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--head); font-weight: 800; color: var(--w); }
.rosette .r-top { top: 1.55rem; font-size: 1.6rem; letter-spacing: -.05em; line-height: 1; }
.rosette .r-bot { top: 3.25rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.rosette.c1 { --w: var(--c1); } .rosette.c2 { --w: var(--c2); } .rosette.c3 { --w: var(--c3); } .rosette.c4 { --w: var(--c4); }
@media (prefers-reduced-motion: reduce) { .rosette, .live-dot::before { animation: none; } }
/* about: one big pinned note */
.hello { position: relative; max-width: 46rem; background: #fff; border-radius: 6px 28px 6px 28px; padding: 2.4rem 2rem 2rem; transform: rotate(-.8deg);
  box-shadow: 0 26px 50px -32px rgba(34,23,33,.55); }
.hello::before { content: ""; position: absolute; top: -.7rem; left: 50%; width: 6rem; height: 1.3rem; transform: translateX(-50%) rotate(-3deg); background: rgba(205,133,242,.45); border-radius: 2px; }
.hello p { color: var(--mid); font-size: 1.08rem; }
.hello .hello-big { font-family: var(--head); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.035em; color: var(--ink); margin-bottom: 1.2rem; }
/* mobile tidy */
@media (max-width: 600px) {
  .win { padding: 1.8rem 1.3rem 1.4rem; }
  .win dl div { grid-template-columns: 1fr; gap: .15rem; }
  .win h2, .win-tag { padding-right: 5rem; }
  .rosette { width: 5.2rem; right: .6rem; }
  .rosette .r-top { top: 1.2rem; font-size: 1.3rem; } .rosette .r-bot { top: 2.6rem; font-size: .58rem; }
  table { font-size: .82rem; } th, td { padding: .6rem .45rem; }
  .tablewrap { padding: .25rem .4rem; }
}
/* mobile tap targets */
@media (max-width: 719px) {
  nav.main a:not(.btn) { padding: .55rem .15rem; display: inline-block; }
  footer.site p a { display: inline-block; padding: .4rem 0; }
}
/* quiz: multi-select + flow */
.qhint { font-size: .85rem; font-weight: 600; color: var(--c2); margin: -.6rem 0 .9rem; }
button.a { transition: border-color .15s, background .15s, transform .1s; }
button.a:active { transform: scale(.97); }
button.a.m { padding-left: 2.4rem; position: relative; }
button.a.m::before { content: ""; position: absolute; left: .85rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 5px; border: 1.5px solid var(--line-2, #cdb9cb); background: #fff; }
button.a.m[aria-pressed="true"]::before { content: "\2713"; background: var(--c2); border-color: var(--c2); color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.qcont { margin-top: 1.4rem; }
.qcont[disabled] { opacity: .35; transform: none; }
.qnav { justify-content: space-between; }
.qnum { display: flex; align-items: center; gap: .7rem; }
.qtopic { font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c2); background: #f3e7f7; border-radius: 999px; padding: .28rem .7rem; }
/* quiz CTA by heat */
.qcta { margin-top: 1.6rem; border-radius: 20px; padding: 1.4rem 1.5rem; background: linear-gradient(120deg, #f3e7f7, #fcebe9); }
.qcta h3 { font-family: var(--head); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; margin-bottom: .4rem; }
.qcta p { color: var(--mid); }
.qcta .actions { margin-top: 1rem; }
.qcta-hot { background: linear-gradient(115deg, #221721 0%, #3f1d48 55%, #6a1d4c 100%); }
.qcta-hot h3 { color: #fff; } .qcta-hot p { color: #d9cdd6; }
.qcta-hot .btn { background: #fff; color: var(--ink); } .qcta-hot .btn.line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
/* hero: offer line sits with the buttons, apart from the intro */
.hero-offer { margin: 2.2rem 0 0; font-family: var(--head); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.3rem); letter-spacing: -.02em; color: var(--c3); }
.hero-offer + .hero-actions { margin-top: .9rem; }
/* booking page: everything above the fold. Desktop = notes left, calendar right. Mobile = title, calendar, then notes. */
.book { padding: 2rem 0 3rem; position: relative; isolation: isolate; }
.book-grid { display: grid; gap: 1.25rem; grid-template-areas: "head" "cal" "notes"; }
.book-head { grid-area: head; } .book-cal { grid-area: cal; } .book-notes { grid-area: notes; }
.book-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.05em; line-height: .95; }
.book-head .intro { margin-top: .8rem; }
.book-cal { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 22px 44px -30px rgba(34,23,33,.5); min-height: 680px; }
.book-notes h2 { font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: .6rem; }
.book-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.book-notes li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; color: var(--mid); font-size: .95rem; }
.book-notes li b { color: var(--ink); }
@media (min-width: 900px) {
  .book { padding: 2.5rem 0 4rem; }
  .book-grid { grid-template-columns: 22rem 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head cal" "notes cal"; column-gap: 2.5rem; align-items: start; }
}
/* mobile header: one scrollable row of links, so the page starts sooner */
@media (max-width: 719px) {
  header.site .container { min-height: 0; gap: .4rem; padding-top: .55rem; padding-bottom: .45rem; }
  nav.main { flex-wrap: nowrap; overflow-x: auto; gap: 1rem; padding-bottom: .15rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { white-space: nowrap; flex: none; }
  nav.main a.btn { padding: .45rem .85rem; }
  .book { padding-top: 1.2rem; }
  .book-head .intro { font-size: 1rem; }
}
@media (max-width: 719px) { nav.main a.btn { order: -1; } }
/* about: career as stat cards on a heat line */
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: s; }
@media (min-width: 640px) { .story { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .story { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .story li:nth-child(even) { margin-top: 1.5rem; } }
.story li { --s: var(--c2); background: #fff; border-radius: 6px 20px 6px 20px; border-top: 6px solid var(--s); padding: 1rem 1.1rem 1.1rem; box-shadow: 0 16px 30px -24px rgba(34,23,33,.5); transform: rotate(-.6deg); transition: transform .2s; }
.story li:nth-child(even) { transform: rotate(.7deg); }
.story li:hover { transform: rotate(0) translateY(-3px); }
.story .st1 { --s: var(--c1); } .story .st2 { --s: var(--c2); } .story .st3 { --s: var(--c3); } .story .st4 { --s: var(--c4); }
.story .yr { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.story .where { display: block; font-family: var(--head); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; margin: .1rem 0 .5rem; }
.story .big { display: block; font-family: var(--head); font-weight: 800; font-size: 2.3rem; line-height: .95; letter-spacing: -.05em; color: var(--s); }
.story .what { display: block; color: var(--mid); font-size: .92rem; margin-top: .35rem; }
.story li:last-child { background: var(--ink); } .story li:last-child .where { color: #fff; } .story li:last-child .what { color: #d9cdd6; }
.story li:last-child .big { background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-foot { color: var(--mid); margin: 2rem 0 0; max-width: 40rem; }
.termcard { position: relative; background: #fffdf8; border-radius: 10px 26px 10px 26px; padding: 1.6rem 1.5rem 1.4rem; transform: rotate(1.4deg);
  box-shadow: 0 28px 50px -32px rgba(36,18,28,.5); border: 1px solid var(--line);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(176,20,79,.08) 31px 32px); }
.termcard::before { content: ""; position: absolute; top: -.6rem; left: 50%; width: 5rem; height: 1.2rem; transform: translateX(-50%) rotate(-3deg); background: rgba(255,154,60,.45); border-radius: 2px; }
.termcard .rh { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; margin-bottom: .6rem; }
.termcard .rh b { font-family: var(--head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.termcard .rh span { font-size: .8rem; color: var(--faint); font-weight: 600; }
.termcard table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.termcard td { padding: .45rem 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.termcard td:first-child { font-weight: 700; width: 6.5rem; }
.termcard td.g { font-family: var(--head); font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--c2); text-align: right; width: 2.6rem; }
.termcard td.c { color: var(--mid); padding-left: .6rem; }
.termcard .comment { margin: .9rem 0 0; font-size: .92rem; color: var(--mid); }
.termcard .comment b { color: var(--ink); }
.termcard .sig { position: absolute; right: 1rem; bottom: -1.2rem; background: var(--c2); color: #fff; font-family: var(--head); font-weight: 800;
  font-size: .85rem; padding: .45rem .8rem; border-radius: 999px; transform: rotate(-8deg); box-shadow: 0 6px 0 rgba(36,18,28,.12); }

/* ===============================================================
   GROW UP palette over the shared Two Birds chassis (13 Oct 2026)
   raspberry -> pink -> coral -> tangerine, on blush
   =============================================================== */
:root { --bg: #fdf3ef; --ink: #24121c; --mid: #5e4652; --faint: #85707a; --line: #f0dcd6; --plum: #24121c;
  --c1: #b0144f; --c2: #e01e79; --c3: #ff5a5f; --c4: #ff9a3c; --accent: #e01e79; --accent-soft: #fde4ee; --pink: #e01e79;
  --heat: linear-gradient(90deg, #b0144f, #e01e79 35%, #ff5a5f 68%, #ff9a3c); }
body { background: var(--bg); }
.accent-bar { background: var(--heat); }
header.site { background: rgba(253,243,239,.88); }
.mark svg { width: 2rem; height: 2rem; }
nav.main a.btn:hover, .btn:hover { background: var(--c2); }
.hero::before { background: radial-gradient(circle at 40% 40%, rgba(255,154,60,.45), rgba(224,30,121,.22) 45%, transparent 70%); }
.grad, .hero .grad { background: linear-gradient(92deg, #b0144f 0%, #ff5a5f 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hot-stamp { background: var(--heat); }
.eyebrow-fun { color: var(--c1); border-color: #f6cfd9; }
.scrawl::after, .sec h2::after { background: linear-gradient(90deg, rgba(224,30,121,.4), rgba(255,154,60,.45)); }
.notfor { background: linear-gradient(115deg, #24121c 0%, #4a1630 55%, #8a1f45 100%); }
.hero-offer { color: var(--c1); }
footer.site { background: var(--ink); }
footer.site::after { content: "grow up"; background: var(--heat); -webkit-background-clip: text; background-clip: text; }
.story li:last-child { background: var(--ink); }

/* hero with the report card */
.gu-hero .container { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .gu-hero .container { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.gu-hero h1 { font-size: clamp(3rem, 8.5vw, 6.2rem); line-height: .92; letter-spacing: -.055em; max-width: 9ch; }
.termcard { max-width: 30rem; justify-self: center; margin-bottom: 1.5rem; }

/* five areas */
.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .areas { grid-template-columns: repeat(5, 1fr); } .areas li:nth-child(even) { margin-top: 1.5rem; } }
.areas li { background: #fff; border-radius: 6px 20px 6px 20px; padding: 1.1rem 1.1rem 1.2rem; box-shadow: 0 16px 30px -24px rgba(36,18,28,.5); transform: rotate(-.7deg); }
.areas li:nth-child(even) { transform: rotate(.8deg); }
.areas .n { display: block; font-family: var(--head); font-weight: 800; font-size: 2.4rem; line-height: .9; letter-spacing: -.06em; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .5rem; }
.areas h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.areas p { color: var(--mid); font-size: .93rem; margin: 0; }
.dek { color: var(--mid); max-width: 40rem; margin: -1rem 0 2rem; }

/* brands */
.brandrow { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.brandrow li { font-family: var(--head); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; }
.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 .7rem; }

/* results teaser */
.wins-mini { display: grid; gap: .9rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .wins-mini { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wins-mini { grid-template-columns: repeat(4, 1fr); } }
.wins-mini a { display: block; text-decoration: none; background: #fff; border-radius: 20px; border-top: 8px solid var(--w, var(--c2)); padding: 1.1rem 1.2rem; box-shadow: 0 16px 30px -24px rgba(36,18,28,.5); transition: transform .2s; }
.wins-mini a:hover { transform: translateY(-4px) rotate(-.5deg); }
.wins-mini b { display: block; font-family: var(--head); font-weight: 800; font-size: 2.6rem; line-height: .95; letter-spacing: -.06em; color: var(--w, var(--c2)); }
.wins-mini span { display: block; color: var(--mid); font-size: .93rem; margin-top: .3rem; }
.wins-mini .who { color: var(--ink); font-weight: 700; margin-top: .6rem; }
.gu-hero h1::after { display: none; } .gu-hero { padding-top: 3rem; }