/* ==========================================================================
   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: 7rem 2rem 2.5rem;
  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: 1.5rem; padding: .4rem 1rem;
  border: 1px solid rgba(212, 168, 67, .3); border-radius: 100px; background: transparent;
}
h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em; margin-bottom: 1.5rem;
}
/* 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.2rem; color: var(--ink-2); max-width: 600px;
  margin: 0 auto; line-height: 1.7;
}
@media (max-width: 680px) { .hero { padding: 5.5rem 1.5rem 2rem; } }

/* ---------- section rhythm ---------- */
.tools { gap: 1.5rem; margin: 2.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: 2.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.25rem; font-weight: 600; margin-bottom: .75rem; letter-spacing: 0; }
.tool p, .studio p { color: var(--ink-2); font-size: .95rem; line-height: 1.7; margin-bottom: 1.25rem; }
.tool .go, .studio .go { font-size: .85rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tfc-purple); }
.tool-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(212, 168, 67, .1); color: var(--tfc-purple); font-size: 20px;
  margin-bottom: 1.25rem;
}
.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, .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: #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: #151515;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, .12);
}
input::placeholder { color: #5A5A5A; }
select {
  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");
}
.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.25rem; font-weight: 600; margin: 3rem 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: 4.5rem 1.25rem 2rem; }
  .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: 4rem 1rem 1.75rem; }
}