/* Atma: one committed dark look, sans-led and game-clear.
   Warm near-black ground, one clean sans (Manrope) for everything, an italic serif only on "can be",
   one punchy gold for action, progress and rank. */

:root {
  color-scheme: dark;
  --bg: #151210;           /* ground: warm near-black */
  --bg-2: #1A1613;         /* join panel, footer */
  --card: #201B17;
  --card-2: #29221C;
  --deep: #0B0907;
  --ink: #EAE1CD;          /* 14.3:1 on the ground */
  --ink-2: #BDB19A;        /* 8.8:1 on the ground, 7.4:1 on --card-2 */
  --acc: #D3A651;          /* gold, 8.3:1 on the ground: primary button, rank, progress, focus */
  --acc-hi: #F3CF79;       /* the lit edge of progress */
  --acc-edge: #8E6B2C;     /* 3px bottom edge of gold buttons */
  --acc-ink: #151210;      /* text on gold, 8.3:1 */
  --acc-soft: rgba(211, 166, 81, .12);
  --acc-line: rgba(211, 166, 81, .45);
  --line: rgba(234, 225, 205, .12);
  --line-2: rgba(234, 225, 205, .26);
  --track: #2E2721;        /* empty part of the wheel and the XP bars */
  --focus: #F3CF79;
  --f-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-accent: "Instrument Serif", Georgia, serif; /* the two words "can be", nowhere else */
}

/* ---------- base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; }
b, strong { font-weight: 800; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; z-index: 50; left: 16px; top: -80px; padding: 12px 22px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.nw { white-space: nowrap; }
section[id], .ck-result { scroll-margin-top: 84px; } /* clear the sticky nav on jumps */
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */
.nav-wrap { position: sticky; top: 8px; z-index: 20; padding: 0 12px; }
.nav {
  max-width: 1128px; margin: 8px auto 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 0 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .9);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; padding-right: 6px; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.wordmark { font-weight: 800; font-size: 19px; letter-spacing: .22em; }
.nav-join {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 88px; padding: 0 22px;
  border-radius: 999px; border: 2px solid var(--acc); color: var(--acc);
  font-weight: 800; font-size: 16px; text-decoration: none;
}
.nav-join:hover { background: var(--acc); color: var(--acc-ink); }

/* ---------- type ---------- */
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); line-height: 1.45; margin-bottom: 12px; }
.dot { opacity: .65; padding: 0 .15em; }
h1 {
  font-weight: 800;
  font-size: clamp(38px, 10.8vw, 66px); line-height: 1.04; letter-spacing: -.035em;
  margin: 0 0 12px; max-width: 13ch;
  text-wrap: balance;
}
h1 em {
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  color: var(--acc); font-size: 1.16em; line-height: .9; letter-spacing: -.01em;
}
h2 { font-weight: 800; font-size: clamp(30px, 8.4vw, 46px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
h3 { font-weight: 800; letter-spacing: -.015em; }
.lede { color: var(--ink-2); max-width: 34em; font-size: 18px; line-height: 1.6; }

/* ---------- buttons: all pills ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 56px; padding: 0 26px; border-radius: 999px;
  font-family: var(--f-sans); font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; border: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn.primary, .form button[type=submit] {
  min-height: 60px; background: var(--acc); color: var(--acc-ink); font-size: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 215, .5), 0 3px 0 var(--acc-edge), 0 16px 38px -12px rgba(211, 166, 81, .7);
}
.btn.primary:hover, .form button[type=submit]:hover { background: #DDB25F; }
.btn.primary:active, .form button[type=submit]:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 245, 215, .5), 0 1px 0 var(--acc-edge); }
.btn.secondary { background: rgba(234, 225, 205, .06); color: var(--ink); border: 2px solid var(--line-2); font-weight: 700; }
.btn.secondary:hover { border-color: var(--ink-2); background: rgba(234, 225, 205, .1); }
.btn .dot { color: var(--acc); opacity: 1; }
.btn.primary .dot { color: var(--acc-ink); }
@media (prefers-reduced-motion: reduce) { .btn.primary:active, .form button[type=submit]:active { transform: none; } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-areas: "copy" "phone" "feats"; padding-top: 18px; }
.hero-copy { grid-area: copy; }
.hero .eyebrow { font-size: clamp(14px, 3.85vw, 15px); letter-spacing: 0; text-transform: none; margin-bottom: 10px; }
.sub { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 31em; }
.ctas { display: grid; gap: 10px; margin-top: 20px; max-width: 460px; }

/* the phone */
.phone-fig { grid-area: phone; --k: .78; position: relative; margin: 14px auto 0; width: calc(390px * var(--k) + 20px); }
.phone {
  position: relative; padding: 10px; border-radius: calc(54px * var(--k) + 10px);
  background: linear-gradient(160deg, #2C251F, #0B0907 40%);
  border: 1px solid rgba(234, 225, 205, .18);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .7);
}
.screen { position: relative; width: calc(390px * var(--k)); height: calc(844px * var(--k)); border-radius: calc(54px * var(--k)); overflow: hidden; background: var(--bg); }
.screen iframe { display: block; width: 390px; height: 844px; border: 0; transform: scale(var(--k)); transform-origin: 0 0; }
.phone::after { /* the island */
  content: ""; position: absolute; left: 50%; top: calc(10px + 11px * var(--k)); width: calc(118px * var(--k)); height: calc(34px * var(--k));
  margin-left: calc(-59px * var(--k)); border-radius: 99px; background: #000;
}

/* the mentor's toast: a compact notification dropped onto the top of the phone, below its bezel.
   One label line and one message line; it covers the status bar and the (hidden) header row, never the rank card. */
.toast {
  position: absolute; z-index: 3; top: 8px; left: 50%; transform: translateX(-50%);
  width: min(358px, calc(100vw - 32px));
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center;
  padding: 9px 14px 10px 11px; border-radius: 18px;
  background: var(--card-2); border: 1px solid var(--acc-line);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .95);
}
.toast-icon { width: 30px; height: 30px; }
.toast-top { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); line-height: 1.25; }
.toast-top span { color: var(--ink-2); }
.toast-msgs { display: grid; margin-top: 2px; }
/* the old line fades out first, then the new one fades in: two lines never overlap */
.toast-msg { grid-area: 1 / 1; font-size: 16px; line-height: 1.35; color: var(--ink); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.toast-msg.on { opacity: 1; visibility: visible; transition: opacity .3s ease .25s, visibility 0s linear .25s; }
.toast-msg b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .toast-msg { transition: none; } }

/* what you are looking at */
.feats { grid-area: feats; list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.feats > li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.feats > li.feat-rank { grid-template-columns: 1fr; gap: 12px; padding: 14px 14px 12px; }
.feat-sm { display: none !important; } /* phones: the phone already shows the four parts and the mentor */
.fi { width: 48px; height: 48px; display: grid; place-items: center; }
.fi svg { width: 100%; height: 100%; }
.feats p { font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.feats b { color: var(--ink); }

/* ---------- the seven-badge strip: Lead to Gold, lit up to the current metal (hero and check result) ---------- */
.rs { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; }
.rs::before, .rs::after { content: ""; position: absolute; top: 18px; height: 4px; border-radius: 2px; left: calc(100% / 14); }
.rs::before { right: calc(100% / 14); background: var(--track); }
.rs::after { width: calc((100% - 100% / 7) * var(--p) / 6); background: linear-gradient(90deg, #B9893B, #F3CF79); box-shadow: 0 0 8px rgba(243, 207, 121, .5); }
.rs-i { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rs-b { width: 40px; height: 40px; }
.rs-b svg { width: 100%; height: 100%; }
.rs-i.locked .rs-b { opacity: .45; filter: saturate(.35); }
.rs-i.now .rs-b { transform: scale(1.14); }
.rs-i.goal .rs-b { opacity: 1; filter: drop-shadow(0 0 7px rgba(243, 207, 121, .7)); }
.rs-tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 4px 7px; border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--ink); color: var(--acc-ink); }
.rs-i.now .rs-tag { margin-top: 3px; }
.rs-i.goal .rs-tag { background: var(--acc); color: var(--acc-ink); }
.rstrip-card { padding: 14px 12px 12px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) { .rs::after { transition: width .6s cubic-bezier(.2, .8, .2, 1); } }

/* ---------- sections ---------- */
.sec { padding-top: 76px; }
.rule { position: relative; height: 12px; max-width: 560px; margin: 0 auto 56px; }
.rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(211, 166, 81, .5), transparent); }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--acc); transform: rotate(45deg); box-shadow: 0 0 0 5px var(--bg); }

/* four parts */
.parts-grid { display: grid; gap: 30px; }
.quote { margin: 26px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--acc); max-width: 30em; }
.quote blockquote { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.quote figcaption { margin-top: 8px; font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.quote cite { font-style: normal; font-weight: 700; }
.quads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "mind spirit" "body build"; gap: 10px; }
.quad { position: relative; padding: 16px 14px 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.q-body { grid-area: body; } .q-mind { grid-area: mind; } .q-spirit { grid-area: spirit; } .q-build { grid-area: build; }
.qtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qg { width: 44px; height: 44px; }
.qg-on { fill: var(--acc); }
.qg-off { fill: var(--track); }
.qg-ring { fill: var(--bg); stroke: var(--acc); stroke-width: 5; }
.qn { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--ink-2); padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line-2); }
.quad h3 { font-size: 22px; line-height: 1.15; margin-bottom: 6px; }
.quad .what { font-size: 16px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.quad .tgt { margin-top: 12px; align-self: flex-start; font-size: 14px; font-weight: 800; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-line); border-radius: 99px; padding: 4px 12px; font-variant-numeric: tabular-nums; }

/* mentor */
.mentor { display: grid; gap: 22px; }
.m-emblem { width: 104px; height: 104px; filter: drop-shadow(0 0 22px rgba(211, 166, 81, .35)); }
.m-emblem svg { width: 100%; height: 100%; }
.tcards { display: grid; gap: 12px; margin-top: 24px; }
.tcard { padding: 18px 18px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.tcard.key { background: var(--card-2); border-color: var(--acc-line); }
.tcard .k { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: 8px; }
.tcard .sample { font-size: 19px; line-height: 1.45; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.tcard .tnote { margin-top: 12px; font-size: 16px; color: var(--ink-2); }
/* how a mentor is made (sample): who inspires you + what you are building -> one mentor */
.forge { margin-top: 24px; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.forge + .tcards { margin-top: 12px; }
.fg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fg-head .k { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); line-height: 1.3; }
.fg-tag { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 5px 8px; border-radius: 99px; background: var(--card-2); color: var(--ink); border: 1px solid var(--line-2); }
.fg-row { display: grid; gap: 6px; margin-top: 12px; }
.fg-k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
.fg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fg-chips li { padding: 6px 13px; border-radius: 999px; background: var(--deep); border: 1px solid var(--line-2); font-size: 16px; font-weight: 700; line-height: 1.3; }
.fg-chips li.dream { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc-hi); }
.fg-out { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.fg-mark { width: 40px; height: 40px; }
.fg-out p { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.fg-out b { color: var(--ink); }

/* ranks: seven collectible badges */
.ranks-head { max-width: 640px; }
.ranks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.ranks li { position: relative; grid-column: span 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 4px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.ranks li:nth-child(n+5) { grid-column: span 4; }
.rb { width: 64px; height: 64px; }
.rb svg { width: 100%; height: 100%; }
.rn { margin-top: 8px; font-size: 16px; font-weight: 800; line-height: 1.2; }
.rbd { font-size: 16px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ranks li.goal { background: linear-gradient(180deg, rgba(211, 166, 81, .2), rgba(211, 166, 81, .06)), var(--card); border: 2px solid var(--acc); box-shadow: 0 0 0 4px rgba(211, 166, 81, .12), 0 18px 40px -18px rgba(211, 166, 81, .55); }
.ranks li.goal .rb { width: 80px; height: 80px; margin-top: -8px; }
.ranks li.goal .rn { color: var(--acc-hi); font-size: 17px; }
.goal-tag, .you-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 5px 8px; border-radius: 99px; }
.goal-tag { background: var(--acc); color: var(--acc-ink); }
.you-tag { background: var(--card-2); color: var(--ink); border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.ranks li.you { border-color: var(--line-2); background: var(--card-2); }
.math { margin-top: 22px; font-size: 16px; color: var(--ink-2); max-width: 40em; }

/* ---------- the rank card: badge, rank, score, XP bar (phone and check result) ---------- */
.rank-card {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "b m s" "x x x" "n n n";
  column-gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line);
}
.rc-badge { grid-area: b; width: 68px; height: 68px; }
.rc-badge svg { width: 100%; height: 100%; }
.rc-main { grid-area: m; min-width: 0; }
.rc-rank { font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--acc); }
.rc-no { margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rc-score { grid-area: s; text-align: right; }
.rc-score small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); line-height: 1.2; }
.rc-score b { display: block; font-size: 52px; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.xp { grid-area: x; margin-top: 12px; height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
.xp i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #B9893B, #F3CF79); box-shadow: 0 0 10px rgba(243, 207, 121, .5); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.xp-next { grid-area: n; margin-top: 7px; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--ink-2); }
.xp-next b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .xp i { transition: none; } }

/* ---------- the skill wheel (check.js) ---------- */
.aw { width: 100%; height: auto; overflow: visible; }
.aw-track { fill: var(--track); }
.aw-glow-p { fill: #E9B955; opacity: .5; }
.aw-edge { fill: none; stroke: #FFE9B0; stroke-width: 2.6; stroke-linecap: round; }
.aw-fresh { fill: #FFF1C9; }
.aw-mark-bg { fill: #F3CF79; stroke: #151210; stroke-width: 2.5; }
.aw-mark-ink { fill: #151210; }
.aw-name { font-family: var(--f-sans); font-weight: 800; font-size: 17px; letter-spacing: .12em; fill: var(--ink); }
.aw-val { font-family: var(--f-sans); font-weight: 800; font-size: 36px; letter-spacing: -.02em; fill: var(--acc-hi); font-variant-numeric: tabular-nums; }
.aw-lab-g.is-weak .aw-val { fill: var(--ink-2); }   /* a low stat: the number greys out, the gold marker beside it stays bright */
.aw-lab-g.is-empty .aw-name, .aw-lab-g.is-empty .aw-val { fill: #8F8574; } /* not answered yet: a dash, 5.1:1 */

/* ---------- the 60-second check ---------- */
.check-grid { display: grid; gap: 28px; }
.check { display: grid; gap: 12px; margin-top: 22px; }
/* phones: a compact bar pinned under the nav while the questions are in view: the mini wheel fills as you tap */
.ck-bar {
  position: sticky; top: 80px; z-index: 6;
  display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px;
  padding: 6px 18px 6px 6px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--acc-line);
  box-shadow: 0 0 0 9px var(--bg), 0 14px 30px -12px rgba(0, 0, 0, .95); /* the ground-coloured ring hides answers scrolling between nav and bar */
}
.ck-mini { width: 52px; height: 52px; border-radius: 50%; background: var(--deep); } /* the empty track needs a darker ground than the bar to show */
.ck-bar small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); line-height: 1.25; }
.ck-bar b { display: block; font-size: 17px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ck-bar.is-full b { color: var(--acc-hi); }
.stem { margin: 6px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.ck-q { margin: 0; padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); min-width: 0; }
.ck-q legend { display: contents; }
.q-tag { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.q-txt { display: block; margin: 4px 0 12px; font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.ck-opts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ck-opts button {
  min-height: 48px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--deep); color: var(--ink);
  font-family: var(--f-sans); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.ck-opts button:hover { border-color: var(--ink-2); }
.ck-opts button[aria-pressed="true"] { background: var(--ink); color: var(--acc-ink); border-color: var(--ink); }
.ck-opts .plus { font-size: .8em; }
/* the two optional questions: your dream, and who inspires you (cards like the four questions) */
.ck-opt { padding: 16px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); min-width: 0; }
.ck-opt .q-txt { margin-bottom: 2px; }
.ck-opt .q-txt span { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.ck-opt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ck-hint { margin-bottom: 12px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.insp-count { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.insp-count b { color: var(--ink); }
.ck-insp.has-picks .insp-count b { color: var(--acc-hi); }
.insp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.insp-add { min-height: 56px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--acc); background: transparent; color: var(--acc); font-family: var(--f-sans); font-weight: 800; font-size: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.insp-add:hover { background: var(--acc); color: var(--acc-ink); }
.insp-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.insp-chips li { max-width: 100%; min-width: 0; }
.insp-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0 8px 0 16px;
  border-radius: 999px; border: 2px solid var(--acc); background: var(--acc-soft); color: var(--ink);
  font-family: var(--f-sans); font-weight: 800; font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.insp-chip .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-chip .x { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); font-size: 18px; line-height: 1; }
.insp-msg { margin-top: 10px; color: #F3CF79; font-weight: 700; font-size: 16px; }
.insp-k { margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.insp-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.insp-s {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px 0 11px; border-radius: 999px;
  border: 2px solid var(--line-2); background: var(--deep); color: var(--ink);
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.insp-s::before { content: "+"; content: "+" / ""; width: .8em; margin-right: 3px; color: var(--acc); font-weight: 800; }
.insp-s:hover { border-color: var(--ink-2); }
.insp-s[aria-pressed="true"] { background: var(--ink); color: var(--acc-ink); border-color: var(--ink); }
.insp-s[aria-pressed="true"]::before { content: "✓"; content: "✓" / ""; color: var(--acc-ink); }
.insp-s[aria-disabled="true"] { opacity: .62; cursor: not-allowed; } /* dimmed but still 4.5:1+ */
.ck-opt input, .form input[type=email] {
  width: 100%; min-height: 56px; padding: 0 20px; border-radius: 999px;
  border: 2px solid var(--line-2); background: var(--deep); color: var(--ink);
  font-family: var(--f-sans); font-size: 17px; font-weight: 600;
}
.ck-opt input::placeholder, .form input::placeholder { color: #9C917E; opacity: 1; }
.ck-opt input:focus-visible, .form input[type=email]:focus-visible { outline-offset: 2px; border-color: var(--acc); }
.ck-go { margin-top: 6px; }
.ck-missing { color: #F3CF79; font-weight: 700; font-size: 16px; }

.ck-side { min-width: 0; }
.ck-ghost, .ck-ghost-cap { display: none; }
.ck-result { display: grid; gap: 14px; }
.ck-est { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.ck-est:focus { outline: none; }
.ck-est:focus-visible { outline: 3px solid var(--focus); }
.ck-result .rank-card { background: var(--card-2); border-color: var(--acc-line); }
.ck-result .rc-badge { width: 84px; height: 84px; }
.step-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.oc-mark { width: 44px; height: 44px; }
.step-card .k { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.ck-lines { margin-top: 6px; font-size: 16px; color: var(--ink-2); }
.ck-step { margin-top: 8px; font-size: 19px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
.ck-goalline { margin-top: 8px; font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
/* the result's mentor card: what this visitor's mentor will be forged from */
.mentor-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px; border-radius: 22px; background: var(--card-2); border: 1px solid var(--acc-line); }
.mc-mark { width: 44px; height: 44px; }
.mentor-card .k { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.mc-txt { margin-top: 6px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mc-sub { margin-top: 6px; font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.mc-add { margin-top: 12px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--acc); background: transparent; color: var(--acc); font-family: var(--f-sans); font-weight: 800; font-size: 16px; cursor: pointer; }
.mc-add:hover { background: var(--acc); color: var(--acc-ink); }
.ck-lever { font-size: 17px; font-weight: 700; color: var(--acc-hi); padding: 0 4px; font-variant-numeric: tabular-nums; }
.ck-circle { max-width: 420px; width: 100%; margin: 4px auto 0; }
.ck-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-sw div { padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.ck-sw small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ck-sw b { display: block; font-size: 18px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ck-note { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.ck-share { width: 100%; }

/* ---------- join ---------- */
.join { margin-top: 90px; padding: 64px 0 72px; background: var(--bg-2); border-top: 1px solid var(--line); }
.join-grid { display: grid; gap: 44px; }
.join-me { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; margin: 4px 0 20px; padding: 14px 16px; border-radius: 22px; background: var(--card-2); border: 1px solid var(--acc-line); }
.join-me-badge { width: 56px; height: 56px; }
.join-me-txt { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.form { display: grid; gap: 12px; margin-top: 22px; padding: 20px 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--acc-line); }
.lbl { font-size: 16px; font-weight: 800; }
.check-line { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; min-height: 44px; font-size: 16px; line-height: 1.45; color: var(--ink); cursor: pointer; padding: 4px 0; }
.check-line input { width: 24px; height: 24px; margin: 0; accent-color: var(--acc); cursor: pointer; }
.form button[type=submit] { border: 0; border-radius: 999px; font-family: var(--f-sans); font-weight: 800; cursor: pointer; }
.form button[disabled] { opacity: .75; cursor: progress; }
.fine { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.fine a { color: var(--ink); font-weight: 700; }
.err { color: #F3CF79; font-weight: 700; font-size: 16px; }
.price-hook { margin-top: 18px; font-size: 16px; color: var(--ink-2); line-height: 1.55; font-variant-numeric: tabular-nums; }
.price-hook b { color: var(--ink); }
.join.is-joined .price-hook { display: none; }
.thanks { margin-top: 22px; padding: 22px 18px; border-radius: 24px; background: var(--card-2); border: 1px solid var(--acc-line); }
.thanks:focus { outline: none; }
.thanks-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.thanks p + p { margin-top: 8px; }
.thanks-circle { color: var(--acc-hi); font-weight: 700; }
.ask { font-weight: 800; font-size: 18px; margin-top: 16px !important; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.opt { min-height: 52px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--deep); color: var(--ink); font-family: var(--f-sans); font-weight: 800; font-size: 16px; cursor: pointer; font-variant-numeric: tabular-nums; }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--acc-ink); border-color: var(--ink); }
.after { margin-top: 16px; display: grid; gap: 10px; }
.share { min-height: 52px; border-radius: 999px; border: 2px solid var(--acc); background: transparent; color: var(--acc); font-family: var(--f-sans); font-weight: 800; font-size: 17px; cursor: pointer; }

.founder { padding: 22px 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.founder h3 { font-size: 20px; margin-bottom: 10px; }
.founder p { font-size: 16px; color: var(--ink-2); }
.founder .sig { margin-top: 12px; color: var(--ink); font-weight: 700; }
.faq { margin-top: 18px; display: grid; gap: 8px; }
.faq details { border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: 17px; font-weight: 800; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--acc); color: var(--acc); font-weight: 800; font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 16px; font-size: 16px; color: var(--ink-2); }
.faq a { color: var(--ink); font-weight: 700; }

/* ---------- footer ---------- */
.foot { padding: 26px 0 40px; background: var(--bg-2); border-top: 1px solid var(--line); }
.foot p { font-size: 16px; color: var(--ink-2); line-height: 1.9; }
.foot a { color: var(--ink); text-decoration-color: rgba(234, 225, 205, .4); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- privacy page ---------- */
.top { padding-top: 16px; padding-bottom: 8px; }
.doc { max-width: 720px; padding-top: 28px; padding-bottom: 72px; }
.doc h1 { font-size: 44px; max-width: none; }
.doc h2 { font-size: 24px; margin: 34px 0 8px; letter-spacing: -.02em; }
.doc p, .doc li { font-size: 17px; color: var(--ink-2); line-height: 1.65; }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 22px; margin: 0; display: grid; gap: 8px; }
.doc a { color: var(--acc); font-weight: 700; }
.updated { font-size: 16px; }
.back { margin-top: 36px; }
.back a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--acc); text-decoration: none; }

/* ---------- small phones ---------- */
@media (max-width: 374px) {
  .phone-fig { --k: .72; }
  .ck-opts { gap: 5px; }
  .ck-opts button { font-size: 17px; }
  .rc-score b { font-size: 46px; }
}

/* ---------- tablet and up ---------- */
@media (min-width: 700px) {
  .wrap { padding: 0 28px; }
  .sub { font-size: 20px; }
  .ctas { grid-template-columns: auto auto; justify-content: start; max-width: none; }
  .ctas .btn { padding: 0 30px; }
  .feats { grid-template-columns: 1fr 1fr; }
  .feats > li.feat-rank { grid-column: 1 / -1; }
  .feat-sm { display: grid !important; }
  .quads { gap: 14px; }
  .quad { padding: 20px 18px; }
  .tcards { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .forge { padding: 18px 20px; }
  .fg-row { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
  .ranks { grid-template-columns: repeat(7, 1fr); gap: 10px; }
  .ranks li, .ranks li:nth-child(n+5) { grid-column: auto; }
  .opts { grid-template-columns: repeat(4, 1fr); }
  .rule { margin-bottom: 64px; }
  .sec { padding-top: 96px; }
}

/* ---------- desktop ---------- */
@media (min-width: 1000px) {
  .nav-wrap { top: 12px; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy phone" "feats phone"; column-gap: 64px; align-items: start; padding-top: 64px; }
  .hero-copy { padding-top: 40px; }
  h1 { font-size: 66px; }
  .phone-fig { --k: .86; margin: 30px 0 0; }
  .toast { left: -120px; transform: none; width: 360px; top: 10px; } /* off the phone's top-left; its right edge stops before the status icons */
  .feats { grid-template-columns: 1fr; max-width: 460px; margin-top: 36px; align-self: start; }
  .feats > li.feat-rank { grid-column: auto; }
  .rs-b { width: 44px; height: 44px; }
  .rs::before, .rs::after { top: 20px; }
  .parts-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
  .mentor { grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
  .m-emblem { width: 200px; height: 200px; }
  .ranks-head { max-width: 760px; }
  .ranks { gap: 14px; margin-top: 40px; }
  .ranks li { padding: 22px 6px 18px; }
  .rb { width: 84px; height: 84px; }
  .ranks li.goal .rb { width: 100px; height: 100px; margin-top: -10px; }
  .rn { font-size: 17px; }
  .check-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .ck-bar { display: none; }
  .ck-side { position: sticky; top: 92px; }
  .ck-ghost { display: block; max-width: 460px; margin: 60px auto 0; }
  .ck-ghost-cap { display: block; text-align: center; color: var(--ink-2); font-size: 16px; margin-top: 10px; }
  .is-done .ck-ghost, .is-done .ck-ghost-cap { display: none; }
  .ck-side .ck-result { margin-top: 0; }
  .join-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .form { padding: 24px; }
}