/* ---------------------------------------------------------------
   WE CHILLIN — brand v6. 3 August 2026.

   Built on the shared house chassis (see timetogrowup.co): dark plum
   ground, Bricolage Grotesque headings, Plus Jakarta Sans body, pill
   buttons, badge logo, 7px accent bar, two soft glows.

   Three equal businesses, one accent each, all three drawn from the
   accent bar:
     Grow Up     pink   #FF3D8F
     We Chillin  violet #A78BFA   <- this one
     Systems     peach  #FFB46B   (reserved)

   The accent bar itself is the group signature and is identical on
   every business. Don't recolour it.

   Rebrand by editing :root. Dark only, same as the parent.
   --------------------------------------------------------------- */

:root {
  /* house ground — shared, do not change per business */
  --bg:     #221721;
  --panel:  #2c1e2a;
  --ink:    #f7f1f5;
  --mid:    #c3b4be;   /* was #b3a3ae — lifted for readability, 8:1 on panel */
  --faint:  #9d8ba6;   /* was #8d7f88 — placeholders now pass AA */
  --line:   rgba(255, 255, 255, 0.1);

  /* the group signature */
  --pink:   #ff3d8f;
  --violet: #a78bfa;
  --peach:  #ffb46b;

  /* this business — warmed up the purple→pink scale, 24 Aug (Danny's call).
     All values AA-checked: accent 6.2:1+ as text, white on both button stops 5:1+ */
  --accent:        #cd85f2;
  --accent-deep:   #9a43d6;
  --accent-deeper: #8f39c7;
  --accent-ink:  #ffffff;
  --glow-a: rgba(205, 133, 242, 0.3);
  --glow-b: rgba(255, 61, 143, 0.2);

  /* the tier heat ramp — cold → fire */
  --t-cold: #a78bfa;
  --t-warm: #c77df5;
  --t-hot:  #ec5fc4;
  --t-fire: #ff3d8f;
  --red:    #ff5d7a;

  --font-head: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --measure: 44rem;
  --wide: 66rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #1d1019; }

/* ---------- shared group signature ---------- */

.accent-bar {
  height: 7px;
  background: linear-gradient(90deg, #e01e79 0%, var(--violet) 55%, var(--peach) 100%);
  position: relative;
  z-index: 20;
}

.glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.glow.a { top: -260px; right: -200px; width: 640px; height: 640px;
  background: radial-gradient(circle, var(--glow-a) 0%, rgba(167,139,250,0) 70%); }
.glow.b { bottom: -300px; left: -240px; width: 700px; height: 700px;
  background: radial-gradient(circle, var(--glow-b) 0%, rgba(255,61,143,0) 70%); }

main, header.site, footer.site { position: relative; z-index: 1; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }
.wrap-wide { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- the badge: two pause bars ---------- */
/* deliberately not a "WC" monogram. */

.badge, .chip, .ember, .dome {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9px;
  background: var(--accent-deep);
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.badge i, .chip i {
  display: block;
  width: 5px;
  height: 14px;
  border-radius: 2.5px;
  background: #fff;
  margin-top: -0.28rem;
}
.badge::after, .chip::after {
  content: "";
  position: absolute;
  bottom: 7px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 3.4px;
  border-radius: 1.7px;
  background: rgba(255, 255, 255, 0.85);
}

/* ---------- nav ---------- */

header.site {
  border-bottom: 1px solid var(--line);
  background: rgba(34, 23, 33, 0.82);
  backdrop-filter: saturate(1.3) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}
header.site .mark {
  margin-right: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
header.site .mark .name {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.35rem;
  line-height: 1;
  color: #fff;
  display: block;
  text-transform: lowercase;
}
header.site .mark .name em {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 5px;
}
header.site nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: 0.9rem; }
header.site nav a { color: var(--mid); text-decoration: none; font-weight: 500; }
header.site nav a:hover { color: var(--accent); }
header.site nav a[aria-current="page"] { color: #fff; font-weight: 600; }

/* ---------- type ---------- */

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.02; margin: 0 0 1.1rem; }
h2 { font-size: clamp(1.55rem, 3.9vw, 2.2rem); line-height: 1.06; margin: 3.25rem 0 0.9rem; }
h3 { font-size: 1.28rem; margin: 2rem 0 0.6rem; letter-spacing: -0.02em; }
h4 { font-size: 1rem; margin: 1.5rem 0 0.35rem; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }

/* gradient span for part of a headline — house move */
.grad {
  background: linear-gradient(92deg, var(--accent) 10%, var(--pink) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

a { color: #fff; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

.lede { font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.42; color: var(--ink); }
.lede b { font-weight: 600; }
.sub, .small { color: var(--mid); }
.small { font-size: 0.9rem; }

/* eyebrow */
.label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

/* inline emphasis — replaces the old acid highlighter */
.hl {
  background: rgba(205, 133, 242, 0.2);
  color: #fff;
  font-weight: 600;
  padding: 0.05em 0.3em;
  border-radius: 0.25rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

ol { padding-left: 1.3rem; margin: 0 0 1rem; }
li { margin-bottom: 0.45rem; }
ul { list-style: none; padding-left: 0; margin: 0 0 1rem; }
ul li { position: relative; padding-left: 1.5rem; }
ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

hr { border: 0; border-top: 1px solid var(--line); margin: 3.5rem 0; }

/* ---------- blocks ---------- */

section.hero { padding: 5rem 0 3.75rem; position: relative; }
section.band { padding: 3.5rem 0; border-top: 1px solid var(--line); }
section.band.washed { background: var(--panel); border-top-color: transparent; }

/* the belief block — gradient tint, for the sharp bits */
section.band.slab, section.band.warm, section.band.frost {
  background: linear-gradient(120deg, rgba(205,133,242,0.14), rgba(255,61,143,0.1));
  border-top-color: transparent;
}
.pad { padding: 4rem 0; }

.btn {
  display: inline-block;
  background: linear-gradient(92deg, var(--accent-deeper), #b52fa8);
  color: var(--accent-ink);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); color: var(--accent-ink); }
/* the last ask on a page — white pill, house move */
.btn.acid, .btn.solid { background: #fff; color: #1d1019; }
.btn.acid:hover, .btn.solid:hover { background: #f0e6f5; filter: none; color: #1d1019; }
.btn.ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.25);
  padding: 0.9rem 1.9rem;
}
.btn.ghost:hover { border-color: var(--accent); color: #fff; filter: none; }
.btn[disabled] { opacity: 0.45; cursor: default; transform: none; }

.callout {
  border-left: 3px solid var(--accent);
  padding: 0.1rem 0 0.1rem 1.25rem;
  margin: 1.75rem 0;
  color: var(--mid);
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; margin: 1.25rem 0 1.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { border-bottom: 1px solid var(--line); padding: 0.8rem 0.8rem; text-align: left; vertical-align: top; }
thead th {
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
tbody th { font-weight: 700; color: #fff; font-family: var(--font-head); letter-spacing: -0.02em; }
tbody td { color: var(--mid); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------- quiz ---------- */

.quiz-shell { max-width: var(--measure); margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.progress { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 1rem; }
.qtext { font-family: var(--font-head); font-size: clamp(1.55rem, 4.3vw, 2.2rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 1.5rem; font-weight: 800; }
.options { display: grid; gap: 0.6rem; margin-bottom: 2rem; }
.option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.95rem 1.15rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.option:hover { border-color: var(--accent); transform: translateX(2px); }
.option[aria-pressed="true"] { border-color: var(--accent); background: rgba(205, 133, 242, 0.16); font-weight: 600; }

.quiz-nav { display: flex; gap: 0.75rem; align-items: center; }
.quiz-nav .back { background: none; border: 0; color: var(--mid); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.35rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.78rem 0.9rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); }
.field textarea { min-height: 6rem; resize: vertical; }

.verdict {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-ink);
  background: linear-gradient(92deg, var(--accent-deep), var(--accent));
  padding: 0.4rem 1rem;
  border-radius: 100px;
  margin-bottom: 0.9rem;
}
.err { color: var(--red); font-size: 0.92rem; margin-top: 0.75rem; font-weight: 600; }
.hidden { display: none; }

/* ---------- cards (homepage myths / test / tiers) ---------- */

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 1.5rem 0 1.25rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.1rem;
}
.card h3 { margin: 0 0 0.5rem; }
.card p { margin: 0; color: var(--mid); }
.card p a { color: var(--ink); }
.band.washed .card, .band.slab .card { background: rgba(34, 23, 33, 0.55); }
.cards.tiers { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card { transition: border-color 0.15s ease, transform 0.15s ease; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .icon { color: var(--accent); margin-bottom: 0.8rem; }
.card .icon svg { width: 30px; height: 30px; display: block; }

/* keyboard focus — visible everywhere */
a:focus-visible, .btn:focus-visible, .option:focus-visible, .quiz-nav .back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transform: none; transition: none; }
}

.field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.78rem 0.9rem;
  appearance: none;
  -webkit-appearance: none;
}
.field select:focus { outline: 0; border-color: var(--accent); }

/* ---------- parent company strip ---------- */

.parent-strip {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  padding: 0.45rem 1rem 0.4rem;
  background: rgba(34, 23, 33, 0.92);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 19;
}

/* ---------- the mark: rising heat bars ---------- */

.badge-mark { width: 2.15rem; height: 2.15rem; display: block; flex: 0 0 auto; }

/* myth cards */
.mythtag { color: var(--red); margin-bottom: 0.5rem; }
.card h3 s {
  text-decoration-line: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
}
.card.hot-seat { border-top: 3px solid var(--t-fire); }
.card.hot-seat:hover { border-color: var(--t-fire); }

/* ---------- the DIY flow (vertical, heats up as it goes) ---------- */

.flow { position: relative; margin: 1.75rem 0 1.25rem; padding-left: 3.1rem; max-width: var(--measure); }
.flow::before {
  content: "";
  position: absolute;
  left: 0.98rem; top: 0.7rem; bottom: 0.7rem;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--t-cold) 0%, var(--t-warm) 40%, var(--t-hot) 72%, var(--t-fire) 100%);
}
.fstep { position: relative; padding-bottom: 1.4rem; }
.fstep:last-child { padding-bottom: 0; }
.fstep .num {
  position: absolute; left: -3.1rem; top: -0.05rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--fc, var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 0.72rem; color: var(--ink);
}
.fstep:nth-child(-n+3) { --fc: var(--t-cold); }
.fstep:nth-child(n+4) { --fc: var(--t-warm); }
.fstep:nth-child(n+7) { --fc: var(--t-hot); }
.fstep h4 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.fstep p { margin: 0; font-size: 0.92rem; color: var(--mid); }
.fstep.live { --fc: var(--t-fire); }
.fstep.live .num { background: linear-gradient(135deg, var(--t-hot), var(--t-fire)); border-color: var(--t-fire); }

/* ---------- tier heat ramp ---------- */

.cards.tiers .card { border-top: 3px solid var(--t, var(--accent)); }
.cards.tiers .card:nth-child(1) { --t: var(--t-cold); }
.cards.tiers .card:nth-child(2) { --t: var(--t-warm); }
.cards.tiers .card:nth-child(3) { --t: var(--t-hot); }
.cards.tiers .card:nth-child(4) { --t: var(--t-fire); }
.cards.tiers .card .icon, .cards.tiers .card .label { color: var(--t); }
.cards.tiers .card:hover { border-color: var(--t); }

/* ---------- stat tiles (timings) ---------- */

.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.5rem 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; }
.stat .big { font-family: var(--font-head); font-weight: 800; font-size: 2.3rem; line-height: 1; letter-spacing: -0.03em; display: block; margin-bottom: 0.5rem; }
.stat p { margin: 0; color: var(--mid); }

/* ---------- the DIY steps ---------- */

.steps { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 1.75rem 0 1.25rem; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
.step .num { font-family: var(--font-head); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.1em; color: var(--accent); }
.step h4 { margin: 0.3rem 0 0.3rem; font-size: 1.02rem; }
.step p { margin: 0; font-size: 0.88rem; color: var(--mid); }
.step.live { background: linear-gradient(120deg, rgba(205,133,242,0.24), rgba(255,61,143,0.2)); border-color: var(--accent); }
.step.live .num { color: #fff; }

/* ---------- footer ---------- */

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2.25rem 0 3rem;
  font-size: 0.82rem;
  color: var(--mid);
}
footer.site .inner { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
footer.site a { color: var(--mid); }
footer.site a:hover { color: var(--accent); }

/* ---------------------------------------------------------------
   INNER PAGES — added 25 Aug 2026.
   The homepage had a component vocabulary the other pages never
   used, so they'd drifted into walls of prose. These are the few
   extra bits those pages needed. Everything else is reused.
   --------------------------------------------------------------- */

/* big number inside a card — prices, counts */
.price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin: 0.1rem 0 0.55rem;
}
.price small { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0; color: var(--mid); }

/* yes / ask-first pair — the legal page verdict */
.card.yes { border-top: 3px solid var(--t-cold); }
.card.no  { border-top: 3px solid var(--red); }
.card.yes:hover { border-color: var(--t-cold); }
.card.no:hover  { border-color: var(--red); }
.vmark {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.card.yes .vmark { color: var(--t-cold); }
.card.no  .vmark { color: var(--red); }

/* lists inside cards inherit the card's quieter voice */
.card ul { margin: 0; }
.card ul li { color: var(--mid); font-size: 0.95rem; margin-bottom: 0.3rem; }
.card ul li::before { top: 0.55em; width: 0.4rem; height: 0.4rem; }

/* small status badge — writing page, default tier */
.tag {
  display: inline-block;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--mid);
  margin-bottom: 0.8rem;
}
.tag.now {
  background: linear-gradient(92deg, var(--accent-deep), var(--accent));
  color: var(--accent-ink);
  border-color: transparent;
}
.card.soon { opacity: 0.72; }
.card.soon:hover { opacity: 1; }
.card.pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* one-line punch band */
.punch {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  line-height: 1.12;
  margin: 0;
}