/* ==========================================================================
   Paul K Saunders — theme overlay for the shared calculator system.
   Loads AFTER tfc.css.

   Not just a palette swap: the component rules below are transcribed from
   paulksaunders.com's own stylesheet so the section reads as the same site.
     nav      fixed, 1.25rem 2rem, rgba(15,15,15,.85), blur(20), gold hairline
     .hero    centred, 8rem 2rem 6rem, radial gold glow, pill label
     h1       clamp(2.5rem, 6vw, 4.5rem) / 700 / 1.15
     cards    #222, 1px rgba(255,255,255,.06), 12px, 2.5rem pad,
              hover: -4px, gold border, gold 3px top bar
     buttons  solid gold, 100px radius, 1rem 2.25rem
     container 1100px      body Verdana / 1.6
   ========================================================================== */

:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"],
:root[data-theme="light"] {
  /* His --gold / --gold-light, mapped onto the system's accent tokens */
  --tfc-purple:      #D4A843;
  --tfc-purple-deep: #B88F32;
  --tfc-purple-soft: #E8C872;
  --tfc-purple-wash: rgba(212, 168, 67, .1);

  /* --dark / --dark-surface / --dark-card / --text-* verbatim */
  --ink:      #F5F5F5;
  --ink-2:    #A0A0A0;
  --muted:    #6B6B6B;
  --line:     rgba(255, 255, 255, .06);
  --line-2:   rgba(255, 255, 255, .15);
  --bg:       #0F0F0F;
  --surface:  #1A1A1A;
  --surface-2:#222222;

  --good:     #5FBF8A;
  --good-bg:  rgba(95, 191, 138, .08);
  --warn:     #E0A83C;
  --warn-bg:  rgba(224, 168, 60, .08);
  --bad:      #E5645C;
  --bad-bg:   rgba(229, 100, 92, .08);

  --r-sm: 8px;
  --r:    12px;      /* his --radius */
  --r-lg: 12px;

  --font: 'Verdana', Geneva, sans-serif;
  --maxw: 1100px;    /* his .container */

  --shadow:    0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.3);
}

html { color-scheme: dark; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ---------- nav ---------- */
.tfc-header {
  padding: 1.25rem 2rem;
  background: rgba(15, 15, 15, .85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 168, 67, .1);
  transition: padding .3s ease;
}
.tfc-header .wrap { height: auto; padding: 0; max-width: none; }
.tfc-header .brand { gap: 0; }
.brand-mark { display: none; }               /* his logo is type, not a badge */
.brand-name {
  font-size: 1.25rem; font-weight: 700; color: var(--tfc-purple);
  letter-spacing: .02em; text-transform: none;
}
.brand-name span { display: none; }
.header-nav { gap: 2rem; }
.header-nav a {
  font-size: .875rem; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-2); transition: color .2s;
}
.header-nav a:hover { color: var(--tfc-purple); text-decoration: none; }
.header-nav a.nav-here { color: var(--tfc-purple); }
.header-nav a.nav-cta {
  background: var(--tfc-purple); color: var(--bg);
  padding: .6rem 1.5rem; border-radius: 100px; font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}
.header-nav a.nav-cta:hover {
  color: var(--bg); transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(212, 168, 67, .3);
}
@media (max-width: 1180px) { .header-nav .hide-sm { display: none; } }
@media (max-width: 680px) { .tfc-header { padding: 1rem 1.5rem; } .header-nav { gap: 1.1rem; } }

/* ---------- hero ---------- */
body { overflow-x: hidden; }
.hero {
  text-align: center; padding: 3.25rem 2rem 1.75rem;
  position: relative; max-width: none;
}
/* Full-bleed glow: the hero sits inside a 1100px .wrap, so the gradient is
   widened to the viewport or it would show a hard edge at the container. */
.hero::before {
  content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 220%;
  background: radial-gradient(ellipse at 50% 30%, rgba(212, 168, 67, .08) 0%, transparent 60%);
  pointer-events: none;
}
h1 .accent { color: var(--tfc-purple); }

/* .hero-buttons / .hero-stats, transcribed */
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.hero-stats {
  display: flex; justify-content: center; gap: 3rem;
  margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(255, 255, 255, .08);
}
.hero-stats .stat-item { background: none; border: 0; padding: 0; }
.hero-stats .stat-number { font-size: 2rem; font-weight: 700; color: var(--tfc-purple); line-height: 1.2; }
.hero-stats .stat-label {
  font-size: .8rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .1em; margin-top: .25rem;
}
@media (max-width: 900px) { .hero-stats { gap: 2rem; } }
@media (max-width: 680px) { .hero-stats { flex-direction: column; gap: 1.5rem; } }
.hero > * { position: relative; z-index: 1; }
.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--tfc-purple); margin-bottom: 1rem; padding: .35rem .9rem;
  border: 1px solid rgba(212, 168, 67, .3); border-radius: 100px; background: transparent;
}
h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.25rem); font-weight: 700; line-height: 1.12;
  letter-spacing: -.01em; margin-bottom: 1rem;
}
/* His .hero-content is capped at 800px, which is what makes the headline break
   into even lines instead of running the full container width. */
.hero h1 { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* .hero p on his site is 600px — leave the lede at his measure. */
.lede {
  font-size: 1.05rem; color: var(--ink-2); max-width: 640px;
  margin: 0 auto; line-height: 1.6;
}
@media (max-width: 680px) { .hero { padding: 2.75rem 1.5rem 1.5rem; } }

/* ---------- section rhythm ---------- */
.tools { gap: 1rem; margin: 1.25rem 0 0; }
.card, .book, .cta { margin-top: 3.5rem; }

/* ---------- cards, transcribed from .key-card ---------- */
.tool, .studio, .card {
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--r);
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  box-shadow: none;
}
.tool, .studio { padding: 1.4rem 1.5rem; }
.tool::before, .studio::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tfc-purple), var(--tfc-purple-soft));
  opacity: 0; transition: opacity .3s;
}
.tool:hover, .studio:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 168, 67, .2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.tool:hover::before, .studio:hover::before { opacity: 1; }
.tool h3, .studio h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .45rem; letter-spacing: 0; }
.tool p, .studio p { color: var(--ink-2); font-size: .86rem; line-height: 1.5; margin-bottom: .9rem; }
.tool .go, .studio .go { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tfc-purple); }
.tool-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(212, 168, 67, .1); color: var(--tfc-purple); font-size: 16px;
  margin-bottom: .8rem;
}
.studio-icon { background: rgba(212, 168, 67, .1); color: var(--tfc-purple); width: 48px; height: 48px; border-radius: 10px; }
.studio-kicker { font-size: .8rem; font-weight: 600; letter-spacing: .15em; color: var(--tfc-purple); }
.card { padding: 2.5rem; }
@media (max-width: 680px) { .tool, .studio { padding: 1.25rem; } .card { padding: 1.75rem; } }

/* ---------- form card: keep data entry tight inside the generous shell ---------- */
.section-title { font-size: .8rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--tfc-purple); margin-bottom: .5rem; }
.section-note { color: var(--muted); font-size: .85rem; }
.field label { font-size: .8rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.field .hint { font-size: .72rem; color: var(--muted); line-height: 1.5; }
input[type="number"], input[type="text"], input[type="date"],
input[type="email"], input[type="tel"], select, textarea {
  /* background-color, never the `background` shorthand — the shorthand resets
     background-repeat and background-position, which tiles the select arrow
     across the whole field. */
  background-color: #1A1A1A; border: 1px solid rgba(255,255,255,.1); color: var(--ink);
  border-radius: 8px; font-size: .9rem; padding: .75rem .9rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--tfc-purple); background-color: #151515;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, .12);
}
input::placeholder { color: #5A5A5A; }
select {
  /* Lighter arrow for the dark theme. Repeat and position are restated rather
     than inherited so this holds whatever order the stylesheets load in. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A0A0A0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
/* This sheet loads after tfc.css, so its plain .9rem rule above would otherwise
   beat tfc.css's coarse-pointer floor. Restate it here to keep the 16px minimum
   that stops iOS Safari zooming in on field focus. */
@media (pointer: coarse) {
  input[type="number"], input[type="text"], input[type="date"],
  input[type="email"], input[type="tel"], input[type="search"], select, textarea {
    font-size: 16px;
  }
}
.check { background: #1A1A1A; border-color: rgba(255,255,255,.1); border-radius: 100px; font-size: .85rem; }
.check:has(input:checked) { border-color: var(--tfc-purple); background: rgba(212,168,67,.1); color: var(--tfc-purple); }
.seg { background: #1A1A1A; border-color: rgba(255,255,255,.1); border-radius: 100px; }
.seg button { border-radius: 100px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.seg button[aria-pressed="true"] { background: var(--tfc-purple); color: var(--bg); box-shadow: none; }

/* ---------- buttons, transcribed ---------- */
.btn {
  padding: 1rem 2.25rem; border-radius: 100px; font-size: 1rem; font-weight: 600;
  letter-spacing: 0; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.btn-primary { background: var(--tfc-purple); color: var(--bg); box-shadow: none; border: none; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212, 168, 67, .25); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .15); font-weight: 500;
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .05); }
.btn-sm { padding: .6rem 1.4rem; font-size: .85rem; }

/* ---------- results ---------- */
.headline {
  background: var(--surface-2); border: 1px solid rgba(212, 168, 67, .2);
  border-radius: var(--r); box-shadow: none; padding: 3rem 2rem;
  position: relative; overflow: hidden;
}
.headline::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tfc-purple), var(--tfc-purple-soft));
}
.headline .label { color: var(--tfc-purple); opacity: 1; font-size: .8rem; letter-spacing: .15em; }
.headline .value { color: var(--ink); font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 700; letter-spacing: -.01em; }
.headline .sub { color: var(--ink-2); font-size: .95rem; }
/* The base sheet paints these solid green/red. On a dark gold-accented page that
   reads as a different site — keep the surface, signal with the bar and the figure. */
.headline.is-good {
  background: var(--surface-2); border-color: rgba(95, 191, 138, .3);
}
.headline.is-good::before { background: linear-gradient(90deg, var(--good), #8FE0B4); }
.headline.is-good .label { color: var(--good); }
.headline.is-good .value { color: var(--good); }
.headline.is-bad {
  background: var(--surface-2); border-color: rgba(229, 100, 92, .3);
}
.headline.is-bad::before { background: linear-gradient(90deg, var(--bad), #F0918B); }
.headline.is-bad .label { color: var(--bad); }
.headline.is-bad .value { color: var(--bad); }

.stat { background: var(--surface); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; }
.stat .k { font-size: .7rem; letter-spacing: .1em; color: var(--muted); }
.stat .v { font-size: 1.6rem; font-weight: 700; }
.stat .n { font-size: .75rem; color: var(--muted); }
.stat.accent .v { color: var(--tfc-purple); }

h3.res-h { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .25rem; }
p.res-p { color: var(--ink-2); font-size: .9rem; }
table.tfc { font-size: .85rem; }
table.tfc thead th { font-size: .7rem; letter-spacing: .1em; color: var(--muted); }
table.tfc td, table.tfc th { border-bottom-color: rgba(255,255,255,.06); }
table.tfc tbody tr:hover { background: rgba(255,255,255,.02); }

.note { border-radius: 10px; font-size: .9rem; border-color: rgba(255,255,255,.08); background: var(--surface); }
.note.brand { background: rgba(212,168,67,.06); border-color: rgba(212,168,67,.25); color: var(--tfc-purple-soft); }
.note.good { border-color: rgba(95,191,138,.25); }
.note.warn { border-color: rgba(224,168,60,.25); }
.note.bad  { border-color: rgba(229,100,92,.25); }
.phase-when { background: rgba(212,168,67,.1); color: var(--tfc-purple); font-size: .7rem; letter-spacing: .1em; }
.phase::before { background: var(--tfc-purple); box-shadow: 0 0 0 4px var(--bg); }
.bar-fill { background: linear-gradient(90deg, var(--tfc-purple-deep), var(--tfc-purple-soft)); }
details.assump { background: var(--surface); border-color: rgba(255,255,255,.06); border-radius: 10px; }
.dropzone { background: #1A1A1A; border-color: rgba(255,255,255,.15); border-radius: var(--r); }
.dropzone:hover, .dropzone.over { border-color: var(--tfc-purple); background: rgba(212,168,67,.05); }
.dz-icon { background: var(--tfc-purple); color: var(--bg); }
.preset { background: #1A1A1A; border-color: rgba(255,255,255,.1); border-radius: 10px; }
.preset.on { border-color: var(--tfc-purple); background: rgba(212,168,67,.1); box-shadow: none; }
.preset.on .p-name { color: var(--tfc-purple); }
.sheet { background: var(--surface); border-color: rgba(255,255,255,.1); }
.sheet-title { color: var(--tfc-purple); letter-spacing: .15em; }
.tf-word { color: var(--tfc-purple); }

/* ---------- booking blocks, built on his .cta-section ---------- */
.book {
  text-align: center; position: relative; overflow: hidden;
  padding: 5rem 2rem; border-radius: var(--r);
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .05);
}
.book::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at 50% 70%, rgba(212, 168, 67, .06) 0%, transparent 60%);
  pointer-events: none;
}
.book > * { position: relative; z-index: 1; }
.book h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.2; margin-bottom: 1.25rem; }
.book p { font-size: 1.05rem; color: var(--ink-2); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; }
.book .book-sub {
  font-size: .85rem; color: var(--muted); margin: 1.5rem 0 0;
  letter-spacing: .05em; text-transform: none; font-weight: 500;
}

.book-inline {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--r); padding: 2.5rem; margin-top: 3.5rem;
  position: relative; overflow: hidden;
}
.book-inline::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tfc-purple), var(--tfc-purple-soft));
}
.book-inline p { margin: 0; font-size: .95rem; color: var(--ink-2); max-width: 60ch; line-height: 1.7; }
.book-inline b { color: var(--ink); font-weight: 600; }
.book-inline .free {
  display: block; margin-top: .75rem; font-size: .8rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tfc-purple); font-weight: 600;
}

/* ---------- footer ---------- */
.tfc-footer {
  padding: 3rem 2rem; border-top: 1px solid rgba(255, 255, 255, .05);
  text-align: center; margin-top: 5rem;
}
.tfc-footer .wrap { flex-direction: column; gap: .9rem; justify-content: center; }
.tfc-footer .footer-logo { font-weight: 700; color: var(--tfc-purple); font-size: 1.1rem; }
.tfc-footer > .wrap > div:not(.links) { color: var(--muted); font-size: .85rem; }
.tfc-footer .links { justify-content: center; gap: 1.5rem; }
.tfc-footer .links a { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.disclaimer { color: var(--muted); font-size: .78rem; margin: .5rem auto 0; text-align: center; }

/* ---------- scroll reveal, same timing as the site ---------- */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .tool:hover, .studio:hover, .btn-primary:hover { transform: none; }
}

/* ---------- "Email me these results" ---------- */
.emailer { background: var(--surface-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r); }
.emailer-head { padding: 26px 28px 0; }
.emailer-head h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.emailer-head p { color: var(--ink-2); font-size: .95rem; line-height: 1.7; }
.emailer-form { padding: 18px 28px 28px; }
.emailer-consent { background: #1A1A1A; border-color: rgba(255,255,255,.1); border-radius: 10px; color: var(--ink-2); }
.emailer-consent:has(input:checked) { border-color: var(--tfc-purple); background: rgba(212,168,67,.08); color: var(--tfc-purple-soft); }

/* ---------- Phone header ----------
   At 390px the wordmark, "Free Tools" and the Book a Call pill were each
   wrapping onto two lines. Tighten the type so all three sit on one row. */
@media (max-width: 620px) {
  .tfc-header { padding: .85rem 1rem; }
  .tfc-header .wrap { gap: 8px; }
  .brand-name { font-size: .95rem; white-space: nowrap; letter-spacing: .02em; }
  .header-nav { gap: 12px; }
  .header-nav a { font-size: .7rem; white-space: nowrap; letter-spacing: .04em; }
  .header-nav a.nav-cta { padding: .55rem .95rem; }
  .eyebrow { font-size: .68rem; padding: .4rem .85rem; letter-spacing: .1em; }
  .hero { padding: 2.5rem 1.25rem 1.5rem; }
  .lede { font-size: 1rem; line-height: 1.65; }
}
@media (max-width: 400px) {
  .brand-name { font-size: .85rem; }
  .header-nav a { font-size: .65rem; }
  .header-nav a.nav-cta { padding: .5rem .8rem; }
}

@media (max-width: 480px) {
  .tfc-header { padding: .8rem .85rem; }
  .brand-name { font-size: .82rem; }
  .header-nav { gap: 9px; }
  .header-nav a { font-size: .62rem; letter-spacing: .03em; }
  .header-nav a.nav-cta { padding: .5rem .7rem; }
  .eyebrow { font-size: .6rem; padding: .35rem .7rem; letter-spacing: .07em; }
  .hero { padding: 2.25rem 1rem 1.25rem; }
}

/* ── The 5 Keys Program layer ──────────────────────────────────────────────
   Three states that only exist on this build: a client tool nobody has
   unlocked yet, a field carrying a member's own figure, and the panel that
   offers to write one back. Everything reads from the same tokens as the rest
   of the system, so it re-skins with it. */

.badge-member {
  background: rgba(212, 168, 67, 0.14);
  border-color: rgba(212, 168, 67, 0.4);
  color: var(--gold-light);
}

/* A locked card is a card, not a link — no pointer, no lift on hover, and the
   whole thing dimmed just enough to read as unavailable without being unreadable. */
.tool-locked {
  cursor: default;
  opacity: 0.72;
}

.tool-locked .go {
  color: var(--text-muted);
}

/* A figure the artist did not type. Marked, because a starting point that looks
   identical to an answer is worse than no starting point at all. */
.pks-prefilled {
  border-color: rgba(212, 168, 67, 0.45) !important;
  background: rgba(212, 168, 67, 0.06) !important;
}

.pks-note {
  color: var(--text-muted);
  margin-top: 1rem;
}

.pks-note strong {
  color: var(--gold-light);
  font-weight: 600;
}

.pks-save {
  margin-top: 1.25rem;
}

.pks-save .btn {
  margin-top: 0.35rem;
}

.pks-status:empty {
  display: none;
}

.pks-status {
  margin: 0.6rem 0 0;
  color: var(--text-muted);
}

/* The "already a member?" line, in the unlock panel and under the hub's gated
   section. Quiet — it is for the few people it applies to, not a second CTA. */
.gate-signin {
  color: var(--text-muted);
}

.gate-signin a {
  color: var(--gold);
  border-bottom: 1px solid rgba(212, 168, 67, 0.4);
  text-decoration: none;
}

.gate-signin a:hover { color: var(--gold-light); }