/* ==========================================================================
Tim Campbell / The Clarity Roadmap — design system
Extracted from https://theclarityroadmap.com (all 47 routes), Sept 2026.
Plain CSS, no build step. Class names that exist on the live site are kept
verbatim (cta-shimmer, cta-flat, cta-whatsapp, faq-*, vip-*). Everything
else is prefixed tc-.
Two themes:
Light "ivory" — default. Landing, about, confirmation, legal.
Dark "VIP stage" — wrap the page in .vip-stage. VIP, call, application,
replay, resources, register-interest.
Fonts: the display family is self-hosted (section 0). Only Barlow loads in :
========================================================================== */
/* --------------------------------------------------------------------------
0. Display font: "TC Display"
One composite family so nothing else has to care which font is which:
font-style: normal → Playfair Display 400, drawn at 95% (size-adjust)
font-style: italic → Instrument Serif Italic, at full size
Chosen by Will, Sept 2026 (tuner: Playfair Display · 400 · 95% · spacing -2%).
The live site uses Instrument Serif for both; this pairing keeps its italic
and swaps the condensed upright for a roomier one. Files are self-hosted in
fonts/ (both SIL OFL). size-adjust needs Chrome 92 / Firefox 92 / Safari 17;
older Safari just shows Playfair at 100%.
-------------------------------------------------------------------------- */
@font-face { font-family: "TC Display"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 95%;
src: url("fonts/playfair-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "TC Display"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 95%;
src: url("fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TC Display"; font-style: italic; font-weight: 400; font-display: swap;
src: url("fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "TC Display"; font-style: italic; font-weight: 400; font-display: swap;
src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* --------------------------------------------------------------------------
1. Tokens
HSL triplets, shadcn-style, so alpha works: hsl(var(--accent) / .4)
-------------------------------------------------------------------------- */
:root {
/* surfaces */
--background: 60 33% 95%; /* #f6f6ee warm ivory page */
--card: 60 25% 97%; /* #f9f9f5 card, lighter than page */
--secondary: 60 20% 92%; /* #efefe7 alt section / quiet card */
--muted: 60 11% 90%; /* #e8e8e3 icon circles, placeholders */
--popover: 0 0% 100%;
--gold-light: 40 54% 96%; /* #faf7ef */
/* text */
--foreground: 0 0% 20%; /* #333333 */
--muted-foreground: 0 0% 45%; /* #737373 all body copy */
--card-foreground: 0 0% 20%;
--secondary-foreground: 218 46% 20%;
/* brand */
--primary: 218 46% 20%; /* #1c2d4a navy */
--primary-foreground: 0 0% 100%;
--accent: 44 53% 54%; /* #c8a74c gold */
--accent-foreground: 0 0% 100%;
--cta: 44 53% 54%;
--cta-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%; /* #ef4444 urgency bar only */
--destructive-foreground: 0 0% 100%;
/* lines */
--border: 60 11% 88%; /* #e4e4dd */
--input: 60 11% 88%;
--ring: 218 46% 20%;
--gradient-start: 218 46% 20%;
--gradient-end: 218 46% 15%;
/* dark-theme literals used on the live site */
--vip-bg-top: #111b2d;
--vip-bg-bottom: #0c1422;
--vip-heading: 40 30% 94%; /* #f4f1eb headings on navy */
--vip-heading-soft: 40 30% 92%; /* #f1ede4 */
--vip-body: 40 20% 80%; /* #d6cfc2 hero sub-copy on navy */
--vip-soft: #dad4c8; /* .vip-soft body copy */
--vip-muted: #c9c2b6; /* .vip-muted fine print */
--vip-chip: 218 46% 18%; /* #192843 chips, progress track */
--vip-inset: 218 46% 10%; /* #0e1625 video wells */
--vip-inset-deep: 218 46% 8%; /* #0b121e */
--vip-panel: #10233b; /* DQ page panels */
--cta-ink: #111b2d; /* text on gold buttons */
/* radii — base .75rem; Tailwind lg/md/sm derive from it */
--radius: .75rem;
--radius-lg: .75rem; /* rounded-lg: buttons, VIP cards, badges */
--radius-md: calc(.75rem - 2px); /* rounded-md: inputs, boxed eyebrow */
--radius-sm: calc(.75rem - 4px);
--radius-xl: .75rem; /* Tailwind default xl — light cards */
--radius-2xl: 1rem; /* feature cards, framed images, CTA panel */
--radius-3xl: 1.5rem; /* DQ page panels */
--radius-faq: 14px;
--radius-full: 9999px;
/* type */
--font-button: var(--font-sans); /* button labels are Barlow semibold, not the display serif (Will, Sept 2026; live site uses serif) */
--button-weight: 600;
--font-label: var(--font-sans); /* all small text — eyebrows, chips, meta, captions, UI — is Barlow too (Will, Sept 2026) */
--font-display: "TC Display", "Playfair Display", serif; /* upright = Playfair Display, italic = Instrument Serif */
--display-tracking: -.02em; /* upright headings only; italic stays at 0 */
--font-sans: Barlow, sans-serif;
/* shadows */
--shadow-portrait: 0 25px 70px -25px hsl(var(--primary) / .55);
--shadow-cta: 0 1px #f5dfa399 inset, 0 14px 30px -10px #755f2473;
--shadow-cta-hover: 0 1px #f5dfa399 inset, 0 18px 40px -10px #755f2499;
--shadow-vip-card: 0 1px hsl(var(--accent) / .15) inset, 0 30px 60px -30px #06090f80;
--shadow-badge: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
/* motion */
--ease-standard: cubic-bezier(.4, 0, .2, 1);
--reveal-duration: .4s; /* sections: fade + 10px rise, easeOut */
--reveal-distance: 10px;
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
margin: 0;
background: hsl(var(--background));
color: hsl(var(--foreground));
font-family: var(--font-sans);
font-variant-numeric: lining-nums; /* Playfair defaults to old-style figures that dip below the line */
overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; background: transparent; padding: 0; }
/* --------------------------------------------------------------------------
3. Layout
Breakpoints: sm 640 · md 768 · lg 1024. Container caps at 1400, but every
section narrows it: 3xl 768 (FAQ, lists) · 4xl 896 (details, CTA panel) ·
5xl 1024 (card grids) · 6xl 1152 (wide grids, split layouts).
-------------------------------------------------------------------------- */
.tc-container { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: 1400px; }
.tc-container--2xl { max-width: 42rem; }
.tc-container--3xl { max-width: 48rem; }
.tc-container--4xl { max-width: 56rem; }
.tc-container--5xl { max-width: 64rem; }
.tc-container--6xl { max-width: 72rem; }
.tc-section { padding-block: 4rem; background: hsl(var(--background)); } /* py-16 md:py-28 */
.tc-section--tight { padding-block: 3.5rem; } /* py-14 md:py-24 */
.tc-section--alt { background: hsl(var(--secondary) / .4); }
.tc-section--tint { background: hsl(var(--accent) / .05); border-block: 1px solid hsl(var(--border) / .6); }
.tc-section--navy { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tc-section--divided { border-top: 1px solid hsl(var(--border) / .6); }
.vip-stage .tc-section { background: transparent; }
@media (min-width: 768px) {
.tc-section { padding-block: 7rem; }
.tc-section--tight { padding-block: 6rem; }
}
.tc-grid { display: grid; gap: 1.25rem; } /* gap-5 md:gap-6 */
@media (min-width: 640px) { .tc-grid--2, .tc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .tc-grid { gap: 1.5rem; } .tc-grid--3-md { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.tc-center { text-align: center; }
.tc-section-head { text-align: center; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .tc-section-head { margin-bottom: 3.5rem; } }
/* --------------------------------------------------------------------------
4. Typography
Split (Will, Sept 2026 — the live site sets all of this in serif):
display serif = headings, statements, the letter, big ornamental numerals
Barlow = body, buttons, and ALL small text (eyebrows, chips, meta,
captions, countdowns, FAQ questions, links, placeholders)
Headings are ALWAYS the display family at weight 400 (only 400 is loaded —
never bold it). Upright text is tracked in by --display-tracking; anything
italic resets to normal because Instrument's italic is already tight. Body is Barlow 400 in muted grey. Emphasis is gold, not bold.
-------------------------------------------------------------------------- */
.tc-display { letter-spacing: var(--display-tracking); font-family: var(--font-display); font-weight: 400; }
/* Eyebrow: serif, tiny, caps, wide tracking, gold */
.tc-eyebrow {
font-family: var(--font-label); font-weight: 600;
font-size: .75rem; line-height: 1rem;
letter-spacing: .18em; text-transform: uppercase;
color: hsl(var(--accent)); margin-bottom: .75rem;
}
.tc-eyebrow--wide { letter-spacing: .24em; } /* about page */
.tc-eyebrow--navy { color: hsl(var(--primary)); } /* brand blue instead of the default gold */
.tc-eyebrow--navy.tc-eyebrow--boxed { border-color: hsl(var(--primary) / .25); }
/* Filled pill — a small solid banner rather than an outline. For pointing at
the thing directly beneath it ("Watch the breakdown ↓"), where an outlined
chip reads as another eyebrow and gets lost. */
.tc-eyebrow--filled {
display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
border: 0; border-radius: 9999px; padding: .5rem 1.125rem;
}
.tc-eyebrow--lined { display: inline-flex; align-items: center; gap: .75rem; } /* line + label */
.tc-eyebrow--lined::before { content: ""; width: 2rem; height: 1px; background: hsl(var(--accent) / .6); }
.tc-eyebrow--boxed { /* "Free Training Replay" */
display: inline-flex; align-items: center; font-weight: 500;
border: 1px solid hsl(var(--accent) / .4); border-radius: var(--radius-md);
padding: .5rem 1rem; margin-bottom: 1.25rem;
}
/* Dark-theme eyebrow is Barlow, not serif — verbatim from the site */
.vip-eyebrow {
color: hsl(var(--accent)); font-family: var(--font-sans); font-weight: 500;
letter-spacing: .22em; text-transform: uppercase; font-size: .72rem;
}
/* Hero h1: 1.5rem → 1.75 → 2.5 → 2.875rem, leading 1.12 → 1.2.
(Live site: 1.65 → 1.875 → 2.75 → 3.25. Stepped down ~10% because Playfair runs ~21% wider.) */
.tc-h1 { letter-spacing: var(--display-tracking);
font-family: var(--font-display); font-weight: 400;
font-size: 1.5rem; line-height: 1.12; text-wrap: pretty; max-width: 36rem; margin-bottom: .75rem;
}
/* Statement h1 (about / register-interest): 2 → 3.375rem, leading 1.08 (live: 2.25 → 3.75) */
.tc-h1--statement { font-size: 2rem; line-height: 1.08; text-wrap: balance; max-width: 48rem; margin-bottom: 1.5rem; }
/* Utility-page h1 (confirmation, checkout, replay): italic, 1.5 → 2.5rem */
.tc-h1--utility { letter-spacing: normal; font-size: 1.5rem; line-height: 1.15; font-style: italic; max-width: 56rem; }
/* "You're in." moment: 3.75 → 6rem, italic, leading .95 */
.tc-h1--moment { letter-spacing: normal; font-size: 3.75rem; line-height: .95; font-style: italic; max-width: none; }
/* Section h2: 1.75 → 2.75rem, leading 1.25 (live: 1.875 → 3) */
.tc-h2 { letter-spacing: var(--display-tracking); font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.25; margin-bottom: 1rem; text-wrap: balance; }
.tc-h2--utility { letter-spacing: normal; font-size: 1.5rem; font-style: italic; } /* 1.5 → 2.25rem */
/* Card h3: 1.125 → 1.5rem */
.tc-h3 { letter-spacing: var(--display-tracking); font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.2; margin-bottom: .5rem; color: hsl(var(--foreground)); }
.tc-h3--lg { font-size: 1.5rem; line-height: 1.25; margin-bottom: .75rem; } /* 1.5 → 1.875rem */
/* :not([class*="tc-h1--"]) keeps these base sizes from overriding the variants below */
@media (min-width: 640px) { .tc-h1:not([class*="tc-h1--"]) { font-size: 1.75rem; line-height: 1.15; margin-bottom: 1rem; } .tc-h1--statement { font-size: 2.75rem; } }
@media (min-width: 768px) {
.tc-h1:not([class*="tc-h1--"]) { font-size: 2.5rem; line-height: 1.2; }
.tc-h1--statement { font-size: 3.375rem; }
.tc-h1--utility { font-size: 2.5rem; }
.tc-h1--moment { font-size: 6rem; }
.tc-h2 { font-size: 2.75rem; }
.tc-h2--utility { font-size: 2.25rem; }
.tc-h3 { font-size: 1.5rem; }
.tc-h3--lg { font-size: 1.875rem; }
}
@media (min-width: 1024px) { .tc-h1:not([class*="tc-h1--"]) { font-size: 2.875rem; } .tc-h1--utility { font-size: 2.75rem; } } /* live utility h1 is 3rem at lg */
/* The signature move: second clause of every headline in gold.
Three dialects on the live site —
landing: upright heading, upright gold span → .tc-accent
utility: italic heading, UPRIGHT gold span → .tc-accent.tc-upright
about: upright heading, ITALIC gold span → .tc-accent.tc-italic */
.tc-accent { color: hsl(var(--accent)); }
.tc-italic { font-style: italic; letter-spacing: normal; }
.tc-upright { font-style: normal; letter-spacing: var(--display-tracking); }
.tc-h-line { display: block; margin-top: .2em; } /* drops a headline clause onto its own line, with a little air above */
.tc-balance { text-wrap: balance; } /* evens up the line lengths of a short paragraph */
.tc-inline-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; margin-right: .4em; color: hsl(var(--accent)); }
.tc-body { color: hsl(var(--muted-foreground)); font-size: 1rem; line-height: 1.625; }
.tc-body--sm { font-size: .875rem; }
.tc-body--ui { font-size: .9375rem; } /* 15px card copy */
.tc-lead { color: hsl(var(--muted-foreground)); font-size: 1rem; line-height: 1.625; max-width: 48rem; margin-inline: auto; }
.tc-fineprint { font-size: .75rem; color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) { .tc-lead { font-size: 1.125rem; } .tc-body--grow { font-size: 1.125rem; } }
/* Serif pull-quote / statement paragraph */
.tc-statement { letter-spacing: var(--display-tracking); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.375; color: hsl(var(--foreground)); text-wrap: balance; }
@media (min-width: 768px) { .tc-statement { font-size: 1.875rem; } }
/* Letter body ("A note from Tim") */
.tc-letter { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75; }
.tc-letter > * + * { margin-top: 1.5rem; }
.tc-dropcap::first-letter { float: left; font-style: italic; font-size: 3.75rem; line-height: .85; color: hsl(var(--accent)); margin: .25rem .75rem 0 0; }
@media (min-width: 768px) { .tc-letter { font-size: 1.25rem; } .tc-dropcap::first-letter { font-size: 4.5rem; } }
/* On navy */
.vip-stage, .tc-on-navy { color: #f1ede4; }
.vip-stage .tc-h1, .vip-stage .tc-h2, .vip-stage .tc-h3, .vip-stage .tc-statement { color: hsl(var(--vip-heading)); }
.vip-stage .tc-body, .vip-stage .tc-lead { color: var(--vip-soft); }
.vip-muted { color: #c9c2b6; }
.vip-soft { color: #dad4c8; }
.tc-section--navy .tc-h2 { color: hsl(var(--primary-foreground)); }
.tc-section--navy .tc-body { color: hsl(var(--primary-foreground) / .8); }
/* --------------------------------------------------------------------------
5. Ornaments & rules — thin gold lines carry the whole identity
-------------------------------------------------------------------------- */
.tc-rule { width: 4rem; height: 1px; background: hsl(var(--accent) / .6); margin: 0 auto 1.5rem; }
.tc-rule--left { margin-left: 0; }
.tc-rule--faint { background: hsl(var(--accent) / .3); }
.tc-rule--short { width: 2rem; margin: .5rem 0 .75rem; } /* inside cards */
.vip-rule { height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--accent) / .6), transparent); width: 6rem; margin-inline: auto; }
/* line · dot · line, sits under section h2 */
.tc-ornament { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.tc-ornament::before, .tc-ornament::after { content: ""; width: 1.5rem; height: 1px; background: hsl(var(--accent) / .4); }
.tc-ornament > span { width: .375rem; height: .375rem; border-radius: 9999px; background: hsl(var(--accent) / .6); }
/* gold left rule on a paragraph (pain-point list) */
.tc-barred { border-left: 2px solid hsl(var(--accent) / .4); padding-left: 1rem; }
@media (min-width: 768px) { .tc-barred { padding-left: 1.25rem; } }
/* Scroll cue: an eyebrow that bobs to say "keep going". Pair with .tc-eyebrow
for the type. Wrap the words and the arrow in their own spans — inline-flex
turns bare text into anonymous items and eats the gap. Apart from the CTA
shimmer this is the only thing looping on a light page, so keep it to one. */
@keyframes tc-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
.tc-scroll-cue { display: inline-flex; align-items: center; gap: .375rem; margin-bottom: 0; animation: tc-bob 2s ease-in-out infinite; }
/* rotated-square marker (timeline nodes, closing card) */
.tc-diamond { width: .75rem; height: .75rem; transform: rotate(45deg); background: hsl(var(--accent)); }
/* --------------------------------------------------------------------------
6. Buttons — Barlow semibold labels, sentence case, radius-lg, no caps.
(The live site sets button labels in the display serif at 400. Will prefers
sans here for legibility, so labels are a step larger and heavier.)
-------------------------------------------------------------------------- */
.tc-btn {
display: inline-block; width: 100%; max-width: 28rem; text-align: center;
font-family: var(--font-button); font-weight: var(--button-weight); letter-spacing: .01em;
font-size: 1.0625rem; line-height: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-lg); cursor: pointer;
}
.tc-btn > span { position: relative; z-index: 10; display: block; } /* keeps label above the shimmer */
.tc-btn .tc-btn__sub { font-family: var(--font-sans); font-weight: 500; font-size: .8125rem; line-height: 1.125rem; letter-spacing: 0; opacity: .8; margin-top: .125rem; }
.tc-btn--sm { font-size: .9375rem; padding: .75rem 2rem; width: auto; }
.tc-btn--auto { width: auto; padding-inline: 2.5rem; }
@media (min-width: 640px) { .tc-btn { font-size: 1.1875rem; line-height: 1.75rem; padding-inline: 2rem; } }
@media (min-width: 768px) { .tc-btn { font-size: 1.3125rem; padding-block: 1.25rem; } .tc-btn--sm { font-size: 1.0625rem; } }
/* Primary: gold gradient with a light sweep every 3.5s. Verbatim. */
@keyframes shimmer { 0% { background-position: -200% 0; } to { background-position: 200% 0; } }
.cta-shimmer, .vip-cta {
position: relative; overflow: hidden;
background: linear-gradient(180deg, #dbb857, #bb993a);
color: #111b2d;
border: 1px solid hsl(44 65% 70%);
box-shadow: var(--shadow-cta);
transition: transform .15s ease, box-shadow .2s ease;
}
.cta-shimmer::after, .vip-cta::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 40%, hsl(0 0% 100% / .35) 50%, transparent 60%);
background-size: 200% 100%;
animation: shimmer 3.5s ease-in-out infinite;
pointer-events: none;
}
.cta-shimmer:hover, .vip-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-cta-hover); }
.cta-shimmer:active, .vip-cta:active { transform: scale(.98); }
/* Secondary on light: flat navy */
.cta-flat { background: hsl(var(--primary)); color: #fff; border: 1px solid hsl(var(--primary)); transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.cta-flat:hover { background: #243a61; border-color: #243a61; }
.cta-flat:active { transform: scale(.98); }
/* WhatsApp community join */
.cta-whatsapp { background: #1ea951; color: #fff; border: 1px solid hsl(142 70% 39%); transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.cta-whatsapp:hover { background: #198f44; border-color: #198f44; }
.cta-whatsapp:active { transform: scale(.98); }
/* Secondary on navy: the "no thanks" button */
.vip-ghost-btn { background: transparent; color: #eae3d7; border: 1px solid hsl(var(--accent) / .3); transition: border-color .2s ease, background .2s ease; }
.vip-ghost-btn:hover { border-color: hsl(var(--accent) / .6); background: hsl(var(--accent) / .05); }
/* Quiet outline button on light (cookie banner, tertiary) */
.tc-btn-outline { font-family: var(--font-button); font-weight: var(--button-weight); font-size: .9375rem; padding: .625rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); transition: background-color .15s var(--ease-standard); }
.tc-btn-outline:hover { background: hsl(var(--secondary)); }
/* Pill buttons (DQ page only) */
.tc-pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; background: hsl(var(--accent)); color: hsl(220 40% 10%); padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600; transition: opacity .15s; }
.tc-pill-btn:hover { opacity: .9; }
.tc-pill-link { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: 9999px; border: 1px solid hsl(var(--accent) / .3); padding: .625rem 1rem; font-size: .875rem; color: hsl(var(--vip-heading-soft)); transition: border-color .15s, background-color .15s; }
.tc-pill-link:hover { border-color: hsl(var(--accent) / .7); background: hsl(var(--accent) / .05); }
/* Text link */
.tc-link { font-family: var(--font-label); font-weight: 500; font-size: .875rem; letter-spacing: 0; color: hsl(var(--foreground) / .8); text-decoration: underline; text-underline-offset: 4px; transition: color .15s; }
.tc-link:hover, .tc-link--gold { color: hsl(var(--accent)); }
.tc-link--gold:hover { color: hsl(var(--accent) / .8); }
/* Trust row under the hero CTA: 14px line icon + 12px serif label */
.tc-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem .75rem; margin-top: 1rem; }
.tc-trust > * { display: flex; align-items: center; gap: .375rem; color: hsl(var(--muted-foreground)); font-family: var(--font-label); font-weight: 500; font-size: .75rem; }
.tc-trust svg { width: .875rem; height: .875rem; color: hsl(var(--muted-foreground) / .7); }
@media (min-width: 640px) { .tc-trust { column-gap: 1.25rem; } }
/* --------------------------------------------------------------------------
7. Badges, chips, live dot
-------------------------------------------------------------------------- */
@keyframes ping { 75%, to { transform: scale(2); opacity: 0; } }
.tc-live-dot { position: relative; display: flex; width: .5rem; height: .5rem; flex-shrink: 0; }
.tc-live-dot::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #ef4444; opacity: .75; animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.tc-live-dot::after { content: ""; position: relative; width: 100%; height: 100%; border-radius: 9999px; background: #ef4444; }
@media (min-width: 640px) { .tc-live-dot { width: .625rem; height: .625rem; } }
/* Hero date badge: 2px gold border, 5% gold wash, serif */
.tc-badge {
display: inline-flex; align-items: center; gap: .5rem; text-align: center;
font-family: var(--font-label); font-weight: 500; font-size: 12px; letter-spacing: .01em; color: hsl(var(--accent));
border: 2px solid hsl(var(--accent) / .4); background: hsl(var(--accent) / .05);
padding: .375rem .875rem; border-radius: var(--radius-lg); margin-bottom: .75rem;
}
@media (min-width: 640px) { .tc-badge { font-size: 1rem; padding: .75rem 1.5rem; margin-bottom: 1.5rem; } }
/* Social-proof badge: overlapping faces + a count, sits directly above a CTA.
Swap each placeholder for 
when photos land.
The pill is transparent so it sits on the page rather than on a block of
colour; --badge-ring must therefore match the surface BEHIND it, which is
why the navy contexts reset it. Faces stack left-over-right. Keep the label inside its own : a flex container
turns bare text into anonymous items and strips the spaces around . */
.tc-proof-badge {
--badge-bg: transparent;
--badge-ring: hsl(var(--background)); /* must match what is BEHIND the pill, so the faces cut apart cleanly */
--badge-text: hsl(var(--foreground));
--badge-border: hsl(var(--border));
display: inline-flex; align-items: center;
padding: .375rem .9375rem .375rem .4375rem;
border-radius: 9999px;
background: var(--badge-bg); border: 1px solid var(--badge-border);
color: var(--badge-text);
font-family: var(--font-label); font-weight: 500;
font-size: .8125rem; line-height: 1.25; text-align: left;
margin-bottom: 1rem;
}
.tc-proof-badge b { font-weight: 600; }
/* margin, not gap: bare text around would otherwise become flex items and get spaced */
.tc-proof-badge__faces { display: flex; flex-shrink: 0; margin-right: .625rem; }
.tc-proof-badge__faces > * {
position: relative; width: 1.75rem; height: 1.75rem; flex-shrink: 0;
border-radius: 9999px; overflow: hidden; object-fit: cover; object-position: top;
background: hsl(var(--muted)); color: hsl(var(--primary) / .5);
box-shadow: 0 0 0 2px var(--badge-ring);
display: flex; align-items: center; justify-content: center;
}
.tc-proof-badge__faces > * + * { margin-left: -.5rem; }
.tc-proof-badge__faces > :nth-child(1) { z-index: 3; }
.tc-proof-badge__faces > :nth-child(2) { z-index: 2; }
.tc-proof-badge__faces > :nth-child(3) { z-index: 1; }
.tc-proof-badge__faces svg { width: 100%; height: 100%; padding: .1875rem; }
@media (min-width: 768px) {
.tc-proof-badge { font-size: .875rem; }
.tc-proof-badge__faces > * { width: 2rem; height: 2rem; }
.tc-proof-badge__faces > * + * { margin-left: -.5625rem; }
}
/* on navy the hairline goes gold and the face rings follow the surface behind */
.tc-panel--navy .tc-proof-badge, .vip-stage .tc-proof-badge {
--badge-text: hsl(var(--vip-heading)); --badge-border: hsl(var(--accent) / .25);
}
.tc-panel--navy .tc-proof-badge { --badge-ring: hsl(var(--primary)); }
.vip-stage .tc-proof-badge { --badge-ring: hsl(218 46% 11%); }
/* with no solid pill under them the faces need to be a shade darker than the page */
.tc-proof-badge__faces > * { background: hsl(var(--muted)); color: hsl(var(--primary) / .6); }
.tc-panel--navy .tc-proof-badge__faces > *, .vip-stage .tc-proof-badge__faces > * { background: hsl(218 46% 24%); color: hsl(var(--vip-heading) / .55); }
/* Small caps chip — light: card bg + border; navy: deep-navy bg + gold border */
.tc-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 9999px; font-family: var(--font-label); font-weight: 500; font-size: .75rem; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.vip-stage .tc-chip, .tc-chip--vip { background: hsl(var(--vip-chip)); border-color: hsl(var(--accent) / .25); color: hsl(var(--vip-heading)); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .75rem; }
.tc-chip--gold { color: hsl(var(--accent)); letter-spacing: .15em; }
/* "Most Popular" flag that straddles a card's top edge — add with .vip-cta */
.tc-flag { position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); z-index: 10; font-family: var(--font-label); font-weight: 600; font-size: .6875rem; padding: .375rem 1rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
/* Floating caption badge pinned to an image corner */
.tc-float-badge { position: absolute; bottom: -1rem; right: -1rem; display: flex; align-items: center; gap: .5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); padding: .5rem .75rem; box-shadow: var(--shadow-badge); text-align: left; line-height: 1.25; }
.tc-float-badge svg { width: 1rem; height: 1rem; color: hsl(var(--accent)); }
.tc-float-badge b { display: block; font-family: var(--font-label); font-weight: 600; font-size: .75rem; color: hsl(var(--foreground)); }
.tc-float-badge small { display: block; font-size: 10px; color: hsl(var(--muted-foreground)); }
/* --------------------------------------------------------------------------
8. Cards — flat. 1px border, no drop shadow on light. Depth comes from
border-colour change + 4px lift on hover.
-------------------------------------------------------------------------- */
.tc-card { position: relative; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); padding: 1.5rem; overflow: hidden; }
.tc-card--pad-lg { padding: 1.25rem; }
.tc-card--flush { padding: 0; display: flex; flex-direction: column; } /* image/video on top, body below */
/* Banner strip across the head of a flush card: a label for the media below
it, e.g. "Watch the breakdown ↓" over a video. Full width, so it reads as
part of the embed rather than as a badge floating above it. The card
already clips to its radius, so the strip picks up the rounded top. */
.tc-card__banner {
display: flex; align-items: center; justify-content: center; gap: .5rem;
background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
font-family: var(--font-label); font-weight: 600; font-size: .75rem;
letter-spacing: .18em; text-transform: uppercase; text-align: center;
padding: .6875rem 1rem;
}
.tc-card--flush > .tc-card__body { padding: 1.25rem; flex: 1; }
.tc-card--hover { transition: all .3s var(--ease-standard); }
.tc-card--hover:hover { border-color: hsl(var(--accent) / .5); transform: translateY(-.25rem); }
.tc-card--hover-soft { transition: border-color .15s var(--ease-standard); }
.tc-card--hover-soft:hover { border-color: hsl(var(--accent) / .4); }
/* Hero feature card: gold border, 5% gold wash, 2xl radius */
.tc-card--feature { border-color: hsl(var(--accent) / .3); background: hsl(var(--accent) / .05); border-radius: var(--radius-2xl); padding: 1.75rem; }
.tc-card--feature.tc-card--hover:hover { border-color: hsl(var(--accent) / .6); }
/* Solid navy (the middle "When" card; lifts out of the row on desktop) */
.tc-card--navy { background: hsl(var(--primary)); border-color: transparent; color: hsl(var(--primary-foreground)); }
.tc-card--quiet { background: hsl(var(--secondary)); }
/* 4px gold spine on the left (module list, quote card) */
.tc-card--spine { border-left: 4px solid hsl(var(--accent)); padding-left: 1.5rem; }
@media (min-width: 768px) {
.tc-card--pad-lg { padding: 2rem; }
.tc-card--flush > .tc-card__body { padding: 1.5rem; }
.tc-card--feature { padding: 2.5rem; }
.tc-card--raised { margin-block: -1rem; }
.tc-card--spine { padding-left: 2rem; }
}
/* Ghost numeral in the corner: "01" in serif at 15% gold */
.tc-watermark { position: absolute; top: .75rem; right: 1rem; font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: hsl(var(--accent) / .15); user-select: none; pointer-events: none; }
.tc-watermark--xl { top: 1rem; right: 1.5rem; font-size: 3.75rem; }
.tc-watermark--strong { color: hsl(var(--accent) / .25); }
@media (min-width: 768px) { .tc-watermark--xl { font-size: 6rem; } }
/* Big gold numeral + hairline (the "nine outputs" cards) */
.tc-numeral { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.tc-numeral > b { font-family: var(--font-display); font-weight: 400; font-size: 3rem; line-height: 1; color: hsl(var(--accent)); }
.tc-numeral::after { content: ""; flex: 1; height: 1px; background: hsl(var(--border)); transition: background-color .15s; }
.tc-card:hover .tc-numeral::after { background: hsl(var(--accent) / .4); }
@media (min-width: 768px) { .tc-numeral > b { font-size: 3.75rem; } }
/* Icon holders. Icons are Lucide, stroke-width 1.5, always gold or navy. */
.tc-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: hsl(var(--accent)); }
.tc-icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
.tc-icon--box { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); border: 1px solid hsl(var(--accent) / .3); background: hsl(var(--accent) / .05); margin-bottom: 1rem; }
.tc-icon--tint { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); background: hsl(var(--accent) / .1); margin-bottom: 1rem; }
.tc-icon--box-lg { width: 4rem; height: 4rem; border-radius: var(--radius-xl); border: 1px solid hsl(var(--accent) / .4); background: hsl(var(--background)); }
.tc-icon--box-lg svg { width: 2rem; height: 2rem; }
.tc-icon--circle { width: 3rem; height: 3rem; border-radius: 9999px; background: hsl(var(--muted)); color: hsl(var(--primary)); margin-bottom: 1rem; }
.tc-icon--circle svg { width: 1.5rem; height: 1.5rem; }
.tc-card--navy .tc-icon--circle { background: hsl(var(--primary-foreground) / .15); color: hsl(var(--primary-foreground)); }
.tc-icon--navy { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: var(--radius-lg); padding: .75rem; height: fit-content; }
.tc-icon--navy svg { width: 1.5rem; height: 1.5rem; }
.vip-stage .tc-icon--circle, .tc-icon--vip { background: hsl(var(--accent) / .15); border: 1px solid hsl(var(--accent) / .35); color: hsl(var(--accent)); }
@media (min-width: 768px) {
.tc-icon--box-lg { width: 5rem; height: 5rem; }
.tc-icon--circle { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; }
.tc-icon--circle svg { width: 1.75rem; height: 1.75rem; }
}
/* Agenda card: navy header strip with icon + serif title, checklist body */
.tc-agenda { display: flex; flex-direction: column; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); }
.tc-agenda__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.25; }
.tc-agenda__head svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.tc-agenda__body { padding: 1.25rem; flex: 1; }
.tc-agenda__body > * + * { margin-top: .5rem; }
@media (min-width: 768px) { .tc-agenda__head { font-size: 1.125rem; padding: 1.25rem 1.5rem; } .tc-agenda__body { padding: 1.5rem; } }
/* Checklist row: gold 16–20px icon + muted copy */
.tc-check { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; line-height: 1.625; color: hsl(var(--muted-foreground)); }
.tc-check svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--accent)); flex-shrink: 0; margin-top: .125rem; }
.vip-stage .tc-check { color: var(--vip-soft); }
.tc-panel--navy .tc-check, .tc-section--navy .tc-check { color: hsl(var(--primary-foreground) / .8); }
@media (min-width: 768px) { .tc-check { font-size: 1rem; } }
/* Horizontal icon + text row card ("What you'll walk away with") */
.tc-row-card { display: flex; gap: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); padding: 1.25rem; }
@media (min-width: 768px) { .tc-row-card { gap: 1.5rem; padding: 1.75rem; } }
/* Stats: bordered strip, 2×2 → 4 across, hairline dividers */
.tc-stats { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid hsl(var(--border)); }
.tc-stats > * { padding: 2.5rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tc-stats > *:nth-child(even) { border-left: 1px solid hsl(var(--border)); }
.tc-stats > *:nth-child(n+3) { border-top: 1px solid hsl(var(--border)); }
.tc-stats b { font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; line-height: 1; letter-spacing: -.025em; color: hsl(var(--foreground)); margin-bottom: .75rem; }
.tc-stats b + i { width: 1.5rem; height: 1px; background: hsl(var(--accent) / .6); margin-bottom: .75rem; }
.tc-stats small { font-family: var(--font-label); font-weight: 500; font-size: .75rem; line-height: 1.375; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
/* compact variant under the instructor photo: gold numerals, inside a card */
.tc-stats--card { border: 0; border-top: 1px solid hsl(var(--border)); }
.tc-stats--card > * { padding: 1rem; }
.tc-stats--card b { font-size: 1.5rem; line-height: 1.25; color: hsl(var(--accent)); margin-bottom: 0; }
@media (min-width: 768px) {
.tc-stats { grid-template-columns: repeat(4, 1fr); }
.tc-stats > * { padding-block: 3.5rem; }
.tc-stats > * + * { border-left: 1px solid hsl(var(--border)); }
.tc-stats > *:nth-child(n+3) { border-top: 0; }
.tc-stats b { font-size: 3.75rem; }
.tc-stats small { font-size: .875rem; }
.tc-stats--card > * { padding: 1.5rem; }
.tc-stats--card b { font-size: 1.875rem; }
}
/* Steps: numbered gold ring circles joined by a hairline */
.tc-steps { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 48rem; margin-inline: auto; }
.tc-steps > * { position: relative; display: flex; align-items: center; gap: .75rem; flex: 1; width: 100%; max-width: 15rem; text-align: left; } /* fixed-width rows keep the circles in one column on mobile */
.tc-step-num { width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 2px solid hsl(var(--accent)); color: hsl(var(--accent)); font-family: var(--font-display); font-size: 1.125rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 10; background: hsl(var(--background)); }
.tc-section--navy .tc-step-num, .tc-panel--navy .tc-step-num { background: hsl(var(--primary)); }
/* Icon in the circle instead of a numeral. Lucide glyphs, to match the live
site's icon set; drop the bare 24x24