/* =========================================================
   MIAMI MARKETER — Dark-Mode-First Design System
   ========================================================= */

:root {
  /* === Surface Colors === */
  --bg-primary: #0d0d0d;
  --bg-secondary: #111111;
  --bg-tertiary: #141414;
  --bg-quaternary: #1a1a1a;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);

  /* === Text Colors === */
  --text-primary: #ffffff;
  --text-secondary: #c8d6f0;
  --text-muted: #8893a8;
  --text-faint: #565a7c;

  /* === Brand Colors === */
  --red: #fc0311;
  --red-deep: #be1b23;
  --gold: #fdc054;
  --blue: #188bf6;

  /* === Gradients === */
  --gradient-red: linear-gradient(90deg, var(--red), var(--red-deep));
  --gradient-accent: linear-gradient(90deg, var(--red), var(--gold));

  /* === Typography === */
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Inter", sans-serif;

  /* === Spacing === */
  --section-pad: clamp(4rem, 10vw, 7rem);

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-glow-red: 0 0 40px rgba(252, 3, 17, 0.1);

  /* === Transitions === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.6s;
}

/* === RESET & BASE === */
[hidden] { display: none !important; }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--text-secondary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--red);
  color: #fff;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* === TYPOGRAPHY === */
h1,
h2,
h3 {
  margin: 0 0 0.7rem;
  line-height: 1.08;
  color: var(--text-primary);
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
}

h2 {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
  line-height: 1.65;
}

.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(252, 3, 17, 0.35));
}

.eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.75rem;
  color: var(--text-muted);
}

.section-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* === LAYOUT === */
.container {
  width: min(1280px, 92%);
  margin: 0 auto;
}

.section {
  padding: var(--section-pad) 0;
  position: relative;
}

.section-head {
  margin-bottom: 2.5rem;
}

.section-head.center {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head p {
  color: var(--text-muted);
}

.answer-block {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.answer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) 1.3fr;
  gap: 2rem;
  align-items: start;
}

.answer-grid p:last-child {
  margin-bottom: 0;
}

.projects-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8.5rem 0 5rem;
  isolation: isolate;
}

.projects-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(120deg, rgba(13, 13, 13, 0.42), rgba(13, 13, 13, 0.86)),
    url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1800&q=80") center / cover;
  filter: saturate(0.78) contrast(1.05);
}

.projects-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 34%, rgba(252, 3, 17, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.12), var(--bg-primary) 96%);
}

.projects-hero-content {
  max-width: 820px;
}

.projects-hero-content h1 {
  max-width: 780px;
}

.projects-hero-sub {
  max-width: 680px;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--text-secondary);
}

.projects-intro {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.section-projects {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    var(--bg-card);
  box-shadow: var(--shadow-card);
}

.project-card-accent {
  border-color: rgba(253, 192, 84, 0.28);
}

.project-card-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.project-card-topline span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.26rem 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-card h3 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  letter-spacing: 0.02em;
}

.project-card p {
  color: var(--text-secondary);
}

.project-points {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0.3rem 0 1.4rem;
}

.project-points li {
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.project-card .btn {
  margin-top: auto;
}

.projects-method {
  background: var(--bg-secondary);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.center {
  text-align: center;
}

/* The press strip sits in the hero now, so it has to read as a footnote to the
   CTAs rather than a second banner competing with them. */

/* On a short laptop screen the hero runs out of room and the strip drops below
   the fold, which defeats the point of moving it up, so it tightens instead. */
@media (max-height: 900px) {
  .hero .authority-strip { margin-top: 1.25rem; }
  /* A 768px laptop cannot fit the headline, the sub, the callout, the buttons
     and the strip. The callout goes, because the credibility bar below now
     makes the same owned-and-operated point in almost the same words. */
  .hero-callout { display: none; }
  .hero-content { padding-top: 96px; }
  .hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
  .hero-sub { margin-bottom: 1.4rem; }
}
@media (max-width: 768px) {
  .hero .authority-strip { margin-top: 1.5rem; }
  .hero .authority-strip img { max-width: 100%; opacity: 0.95; }
}

/* One claim in place of two duplicate pill lists. The detail lives in the
   portfolio, which is the only place that list should exist. */
.authority-claim {
  margin: 2rem auto 0; max-width: 46rem; text-align: center;
  font-size: .95rem; line-height: 1.7; color: var(--text-secondary);
}
.authority-claim strong { color: var(--text-primary); }
.authority-claim .text-link { white-space: nowrap; }

/* One card offering four properties should not out-shout three cards offering
   one each, so these sit inline as a single quiet row rather than a stack of
   four underlined links. */
/* Chips, not a dotted sentence. The separator dots dangled at line ends
   whenever the row wrapped, and four underlined links inline read as one
   run-on. A chip per destination wraps cleanly at any width. */
.card-links { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.card-links li { margin: 0; }
.card-links a {
  display: inline-block; padding: .3rem .75rem; border-radius: 99px;
  border: 1px solid rgba(253, 192, 84, .35); color: var(--gold);
  font-size: .82rem; font-weight: 600; text-decoration: none; line-height: 1.4;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.card-links a:hover { border-color: var(--gold); background: rgba(253, 192, 84, .1); }

/* Operator Proof runs alone now, so it spans instead of sitting stranded. */
.center-cta {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .85rem;
}
/* the line under a hero CTA pair, explaining which one costs nothing */
.cta-under {
  margin: .95rem auto 0;
  max-width: 30rem;
  text-align: center;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .center-cta { flex-direction: column; align-items: stretch; }
  .center-cta .btn { width: 100%; }
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.88rem 1.6rem;
  background: var(--gradient-red);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform var(--duration-fast) ease,
    box-shadow var(--duration-normal) ease;
  box-shadow: 0 8px 24px rgba(252, 3, 17, 0.3);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(252, 3, 17, 0.4);
}

.btn:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.84rem;
}

.btn-lg {
  padding: 1.05rem 2.2rem;
  font-size: 1.05rem;
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) ease,
    min-height var(--duration-normal) ease;
}

.site-header.header-scrolled {
  border-bottom-color: var(--border-subtle);
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: 92px;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  gap: 2rem;
  transition: min-height var(--duration-normal) ease,
    padding var(--duration-normal) ease;
}

.header-scrolled .header-inner {
  min-height: 76px;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.brand {
  display: block;
  width: 240px;
  flex-shrink: 0;
}

.brand img {
  width: 100%;
  height: auto;
}

.main-nav {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}

.main-nav a {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--duration-fast) ease;
}

.main-nav a:hover {
  color: var(--text-primary);
}

.btn-header {
  margin-left: auto;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--duration-normal) ease,
    opacity var(--duration-fast) ease;
}

/* Hamburger → X animation */
.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Overlay */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(13, 13, 13, 0.96);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
    visibility var(--duration-normal) ease;
}

.nav-open .mobile-nav-overlay {
  opacity: 1;
  visibility: visible;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.mobile-nav a {
  color: var(--text-primary);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(13, 13, 13, 0.95) 0%,
    rgba(13, 13, 13, 0.72) 50%,
    rgba(13, 13, 13, 0.92) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 7rem 0 4rem;
}

.hero-content p {
  color: var(--text-secondary);
  max-width: 65ch;
}

.hero-sub {
  font-size: 1.05rem;
}

.hero-callout {
  color: var(--text-primary) !important;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

/* Hero stagger animations */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-anim {
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease-out) forwards;
}

.hero-anim-1 {
  animation-delay: 0.2s;
}
.hero-anim-2 {
  animation-delay: 0.4s;
}
.hero-anim-3 {
  animation-delay: 0.6s;
}
.hero-anim-4 {
  animation-delay: 0.8s;
}

/* =========================================================
   CREDIBILITY BAR
   ========================================================= */
.credibility-bar {
  background: var(--bg-secondary);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.stat-block {
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: var(--text-primary);
  line-height: 1;
}

.stat-prefix {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.authority-strip {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

.authority-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 1rem;
}

.authority-strip img {
  max-height: 80px;
  width: 100%;
  object-fit: contain;
  filter: brightness(2) contrast(0.7) grayscale(0.5);
  opacity: 0.7;
  margin: 0 auto;
}

/* In the hero it is a footnote under the buttons, not a bordered band, and it
   lines up with the left-aligned headline instead of floating centre. */
.hero .authority-strip {
  margin-top: 2rem;
  padding-top: 0;
  border-top: 0;
  text-align: left;
}
/* The file is 1200x180, a 6.67:1 strip. Constraining width AND height forced
   it into a 7.57:1 box, so object-fit letterboxed the artwork inside dead
   space and it read as squashed. Set the width only and let the height follow
   the file, so the rendered ratio matches the source exactly. */
.hero .authority-strip img {
  width: 100%;
  max-width: 620px;
  height: auto;
  max-height: none;
  object-fit: fill;
  margin: 0;
  opacity: 0.9;
  filter: brightness(1.55) contrast(0.85) grayscale(0.3);
}

.authority-badges {
  margin-top: 1.5rem;
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

.badges-strip {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 1rem 2rem;
}

.badges-strip img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================================================
   PROBLEM / AGITATION
   ========================================================= */
.section-problem {
  background: var(--bg-primary);
}

.problem-content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.gradient-line {
  height: 2px;
  width: 100px;
  background: var(--gradient-accent);
  margin: 1.8rem auto;
  border-radius: 2px;
}

.problem-pivot {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 1.6rem;
}

/* =========================================================
   AUDIENCE INTELLIGENCE
   ========================================================= */
.section-intelligence {
  background: var(--bg-secondary);
  overflow: hidden;
}

.section-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(
    ellipse,
    rgba(128, 67, 247, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.section-glow-red {
  background: radial-gradient(
    ellipse,
    rgba(252, 3, 17, 0.07) 0%,
    transparent 60%
  );
}

.intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.intel-text h2 {
  margin-bottom: 1.2rem;
}

.intel-callout {
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid;
  border-image: var(--gradient-accent) 1;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.intel-callout p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.intel-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.intel-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.intel-step h3 {
  margin-bottom: 0.25rem;
}

.intel-step p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.step-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.intel-connector {
  width: 2px;
  height: 20px;
  background: var(--border-subtle);
  margin-left: 2.1rem;
}

/* =========================================================
   GEAR FRAMEWORK
   ========================================================= */
.section-gear {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

.gear-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

/* The copy in these cards is different lengths, so without this the links
   land at four different heights. The paragraph absorbs the slack and every
   link sits on the same line at the bottom of its card. */
.gear-cards .glass-card { display: flex; flex-direction: column; }
.gear-cards .glass-card > p { flex: 1 1 auto; }
.gear-cards .glass-card > a,
.gear-cards .glass-card > .card-links { margin-top: auto; padding-top: .9rem; }
/* .gear-cards is shared with the four-wide GEAR method grid; the portfolio
   holds six properties, and six in a four-wide grid strands a pair on the
   second row. Three by three inside #portfolio only. */
#portfolio .gear-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* same whole-card click treatment as the engine cards */
.gear-cards .glass-card { position: relative; }
.gear-cards .glass-card > a.text-link:only-of-type::after { content: ""; position: absolute; inset: 0; }
.gear-cards .glass-card:has(> a.text-link:only-of-type):hover,
.gear-cards .glass-card:has(> a.text-link:only-of-type):focus-within {
  border-color: var(--gold); transform: translateY(-3px);
}

/* Operator strip: brands Carlos runs but does not own. Logos keep their
   native colors, so each chip picks the background its logo was drawn
   for: white marks on the dark chip, dark marks on the light one. */
.op-head { text-align: center; margin-top: 3rem; }
.op-head h3 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .04em; color: var(--text-primary); margin: 0 0 .4rem; }
.op-head p { font-size: .92rem; color: var(--text-secondary); max-width: 56ch; margin: 0 auto; text-wrap: pretty; }
.op-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.op-card {
  display: flex; flex-direction: column; gap: .85rem; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.2rem 1.15rem;
  transition: border-color .2s, transform .2s, background .2s;
}
.op-card:hover { border-color: var(--gold); transform: translateY(-3px); background: var(--bg-card-hover); }
.op-logo {
  display: flex; align-items: center; justify-content: center;
  height: 74px; border-radius: 10px; padding: 12px 16px;
}
.op-logo.is-dark { background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle); }
.op-logo.is-light { background: #f4f4f2; }
.op-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.op-what { font-size: .85rem; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
@media (max-width: 900px) { .op-grid { grid-template-columns: 1fr; } }

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: background var(--duration-fast) ease,
    box-shadow var(--duration-normal) ease;
}

.glass-card:hover {
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-glow-red);
}

.gear-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
}

.gear-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.7);
}

.gear-icon svg {
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  opacity: 0.85;
}

.glass-card:hover .gear-icon svg {
  color: var(--text-primary);
  opacity: 1;
}

.gear-title {
  font-size: clamp(4rem, 9vw, 7.2rem);
  display: block;
  line-height: 0.9;
  letter-spacing: 0.15em;
  margin: 0.2em 0 0.02em;
}

.gear-subtitle {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--text-secondary);
  -webkit-text-fill-color: var(--text-secondary);
  letter-spacing: 0.03em;
  line-height: 1.12;
  margin-top: -0.08em;
}

/* Balance eyebrow → GEAR → subtitle spacing */
.section-gear .section-head .eyebrow {
  margin-bottom: 0.66rem;
}

.section-gear .section-head h2 {
  margin-bottom: 0.32rem;
}

.section-gear .section-head h2 br {
  display: none;
}

.section-gear .gear-subtitle {
  margin-bottom: 0.3rem;
}

.section-gear .section-head p {
  margin-top: 0.14rem;
  margin-bottom: 0;
}

.glass-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.glass-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

/* Operator Proof runs alone now, so it spans the row instead of leaving
   half of it empty. Must come after .fit-grid to win. */
.fit-grid-single { grid-template-columns: 1fr; }

.fit-card {
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.fit-card h3 {
  margin-bottom: 1rem;
}

.fit-card ul {
  padding-left: 1.1rem;
  list-style: disc;
}

.fit-card li {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
}

.fit-yes {
  border-left: 3px solid #4ade80;
}

.fit-no {
  border-left: 3px solid var(--red);
}

/* =========================================================
   32 CAPABILITIES
   ========================================================= */
.section-capabilities {
  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
}

.capabilities-accordion {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--border-subtle);
}

.capability-category {
  border-bottom: 1px solid var(--border-subtle);
}

.category-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.1rem 0.4rem;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.category-header:hover {
  color: var(--gold);
}

.category-name {
  text-align: left;
  flex-shrink: 0;
}

.category-desc {
  flex: 1;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  padding-left: 0.8rem;
}

.category-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  background: rgba(252, 3, 17, 0.12);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0 0.5rem;
  margin-right: 1rem;
}

.category-chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--duration-normal) ease;
  flex-shrink: 0;
}

.capability-category.expanded .category-chevron {
  transform: rotate(-135deg);
}

.category-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) ease;
}

.capability-category.expanded .category-content {
  /* JS sets max-height to scrollHeight */
}

.skill-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 0.4rem 1.2rem;
}

.skill-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  transition: background var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.skill-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold);
}

/* =========================================================
   SALES EDGE
   ========================================================= */
.section-sales-edge {
  background: var(--bg-primary);
}

.sales-edge-content {
  max-width: 780px;
  margin: 0 auto;
}

.sales-edge-content h2 {
  margin-bottom: 1.4rem;
}

.philosophy-quote {
  margin: 2.5rem 0 0;
  padding: 1.6rem 2rem;
  border-left: 3px solid;
  border-image: var(--gradient-accent) 1;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.philosophy-quote p {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  font-style: italic;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.philosophy-quote cite {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: normal;
  font-weight: 500;
}

/* =========================================================
   CAMPAIGN EXPERIENCE
   ========================================================= */
.section-experience {
  background: var(--bg-tertiary);
}

.brand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0;
}

.brand-grid img {
  flex: 0 0 calc((100% - 6 * 0.6rem) / 7);
  min-width: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  padding: 0.6rem;
}

.partner-strip {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

.partner-strip img {
  max-height: 90px;
  width: 100%;
  object-fit: contain;
  filter: brightness(1.6) contrast(0.8);
  opacity: 0.75;
  margin: 0 auto;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.section-testimonials {
  background: linear-gradient(180deg, var(--bg-tertiary) 0%, #181216 100%);
}

.stars {
  width: 160px;
  margin: 0 auto 1rem;
}

.video-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1060px;
  margin: 0 auto 2rem;
}

.video-testimonial-card {
  padding: 0.6rem;
  overflow: hidden;
}

.video-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.video-wrapper video {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
  background: #000;
}

.video-name {
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
  margin: 0.8rem 0 0.2rem;
}

.fiverr-testimonials {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
  max-width: 1160px;
  margin: 0 auto;
}

.fiverr-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  transition: background var(--duration-fast) ease;
}

.fiverr-card:hover {
  background: var(--bg-card-hover);
}

.fiverr-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.fiverr-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
}

.fiverr-author strong {
  font-size: 0.78rem;
  color: var(--text-primary);
}

.fiverr-card p {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* =========================================================
   PROCESS
   ========================================================= */
.section-process {
  background: var(--bg-secondary);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.process-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1.2rem;
}

.process-bonus {
  text-align: center;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.process-bonus p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
}

.process-bonus .gradient-text {
  -webkit-text-fill-color: transparent;
}

.process-card {
  padding: 1.3rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.process-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}

.process-card h3 {
  margin-bottom: 0.4rem;
}

.process-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
}

/* =========================================================
   FOUNDER
   ========================================================= */
.section-founder {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.founder-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  /* start, not center. Centering a short photo against a tall bio sinks the
     photo and opens a hole above it. Sticky keeps it company on the scroll. */
  align-items: start;
}

.founder-photo {
  margin: 0;
  position: sticky;
  top: 6rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 20px 60px rgba(190, 27, 35, 0.12);
}

.founder-photo img {
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .founder-photo { position: static; }
}

.founder-subline {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.4rem !important;
}

.founder-text .btn {
  margin-top: 0.8rem;
}

.founder-socials {
  margin-top: 1.6rem;
}

.founder-socials-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.founder-socials-icons {
  display: flex;
  gap: 0.7rem;
}

.founder-socials-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition: background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.founder-socials-icons a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* =========================================================
   LEAD MAGNET CALLOUT
   ========================================================= */
.section-lead-magnet {
  background: var(--bg-secondary);
  padding: 2.5rem 0;
}

.lead-magnet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 1.8rem 2.5rem;
  border: 1px solid rgba(253, 192, 84, 0.15);
  background: rgba(253, 192, 84, 0.03);
}

.lead-magnet-content .eyebrow {
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.lead-magnet-content h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.lead-magnet-content p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.lead-magnet-card .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-lead-magnet {
  background: var(--gold);
  color: #0d0d0d;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 16px rgba(253, 192, 84, 0.2);
}

.btn-lead-magnet:hover {
  background: #ffe08a;
  color: #0d0d0d;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253, 192, 84, 0.3);
}

/* =========================================================
   GET STARTED (BOOK SECTION)
   ========================================================= */
.section-book {
  background: var(--bg-primary);
}

.start-options {
  max-width: 900px;
  margin: 0 auto;
}

.start-card {
  padding: 2rem 2.5rem;
  position: relative;
}

.start-primary {
  border: 1px solid var(--border-medium);
  margin-bottom: 1.5rem;
}

.start-badge {
  position: absolute;
  top: -0.6rem;
  left: 2rem;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.9rem;
  border-radius: 20px;
}

.start-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.start-card > p {
  color: var(--text-body);
  margin-bottom: 1.5rem;
  max-width: 700px;
}

.start-steps-mini {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.mini-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.mini-step-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.start-secondary-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.start-card-sm {
  padding: 1.5rem 1.8rem;
}

.start-card-sm h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.start-card-sm p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.section-final-cta {
  background: var(--bg-primary);
  overflow: hidden;
}

.section-final-cta h2 {
  margin-bottom: 1rem;
}

.section-final-cta .btn {
  margin-top: 0.5rem;
}

.cta-footnote {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.cta-alt {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.text-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) ease;
}

.text-link:hover {
  color: var(--text-primary);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #0a0a0a;
  border-top: 1px solid var(--border-subtle);
  padding: 3rem 0 2rem;
}

/* The footer is a sitemap, not a second copy of the top nav.
   Brand and contact on the left, four columns of real links beside it. */
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2.4rem 2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--border-subtle);
  align-items: start;
}

.footer-brand img {
  width: 180px;
  margin-bottom: 0.55rem;
}

.footer-tagline {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin: 0 0 1.1rem;
  letter-spacing: 0.04em;
}

.footer-address {
  font-style: normal;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 .9rem;
}

/* Contact as buttons, with the message already written, so reaching out is
   one tap and lands with context instead of a blank compose window. */
/* Four buttons in a wrapping row landed 3 + 1, which looked accidental.
   A 2 x 2 grid of equal buttons is deliberate at every width. */
.footer-cbtns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0 0 1.2rem;
  max-width: 20rem;
}
.footer-actions { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0 0 1rem; }
.footer-actions a {
  font-size: .86rem; font-weight: 600; color: var(--gold); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) ease;
}
.footer-actions a:hover { border-bottom-color: var(--gold); }
.mm-cbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  padding: .52rem .95rem; text-decoration: none; white-space: nowrap;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.mm-cbtn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(253,192,84,.5);
  transform: translateY(-1px);
}
.mm-cbtn svg { width: 14px; height: 14px; fill: var(--gold); flex: none; }

.footer-contact { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.2rem; }
.footer-contact a {
  font-size: 0.86rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
  width: fit-content;
}
.footer-contact a:hover { color: var(--gold); }

.footer-h {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--gold);
  margin: 0 0 .85rem;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-col a {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.footer-col a:hover { color: var(--text-primary); }

/* The old flat nav row, kept for any page that still ships it. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 0.3rem;
}

.footer-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--duration-fast) ease;
}

.footer-nav a:hover {
  color: var(--text-primary);
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding-top: 0.2rem;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition: background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.footer-socials a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a {
  font-size: 0.78rem;
  color: var(--text-faint);
  transition: color var(--duration-fast) ease;
}

.footer-legal a:hover {
  color: var(--text-secondary);
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.ct-wrap { display: grid; grid-template-columns: 1.25fr .85fr; gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .ct-wrap { grid-template-columns: 1fr; } }

.ct-form-col .calc-form { margin-top: 0; }
.ct-form-col textarea {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  color: var(--text-primary);
  padding: .88rem .95rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
  width: 100%; resize: vertical;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ct-form-col textarea:hover:not(:focus) { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.055); }
.ct-form-col textarea:focus {
  outline: none; border-color: var(--red);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(252,3,17,.16);
}
.ct-form-col textarea::placeholder { color: var(--text-faint); }

.ct-side { display: flex; flex-direction: column; gap: 1.1rem; }
.ct-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.3rem;
}
.ct-h {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: var(--gold); margin: 0 0 1rem;
}
.ct-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--border-subtle);
  text-decoration: none; transition: color .18s ease;
}
.ct-row:first-of-type { border-top: 0; padding-top: 0; }
.ct-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; color: var(--text-faint); font-weight: 700; flex: none; }
.ct-v { font-size: .93rem; color: var(--text-secondary); text-align: right; word-break: break-word; }
.ct-row:hover .ct-v { color: var(--gold); }

.ct-address { font-style: normal; font-size: .92rem; line-height: 1.75; color: var(--text-secondary); margin: 0 0 .9rem; }
.ct-note { font-size: .84rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.ct-note-sm { font-size: .78rem; margin-top: .9rem; }
.ct-card-cta { background: linear-gradient(180deg, rgba(253,192,84,.07), rgba(253,192,84,0) 55%), var(--bg-card); border-color: rgba(253,192,84,.24); }
.ct-card-cta .btn { margin-top: 1rem; width: 100%; }

/* =========================================================
   REFERRAL DIAGRAM (/refer)
   Two lanes, because there are genuinely two different intros and people
   were being asked for both without being shown why either matters.
   ========================================================= */
.ref-flow { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2rem; }
.ref-lane {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem 1.5rem;
}
.ref-lane-k {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); margin: 0 0 1.1rem;
}
.ref-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: .75rem;
  align-items: stretch;
}
.ref-node {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem .95rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.ref-node strong { font-size: .95rem; color: var(--text-primary); line-height: 1.35; }
.ref-node p { font-size: .82rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
/* The node the reader is actually being asked to fill. */
.ref-node-you {
  background: linear-gradient(180deg, rgba(253,192,84,.1), rgba(253,192,84,0) 60%), rgba(255,255,255,.04);
  border-color: rgba(253,192,84,.42);
}
.ref-you {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); margin-bottom: .1rem;
}
.ref-arrow { display: flex; align-items: center; justify-content: center; min-width: 26px; }
.ref-arrow em {
  display: block; width: 22px; height: 2px; background: var(--border-medium); position: relative;
}
.ref-arrow em::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 7px solid var(--border-medium);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

/* Nodes and arrows alternate, so any column count between 7 and 1 puts arrows
   in the wrong places. It goes straight from one row to a single stack. */
@media (max-width: 1080px) {
  .ref-track { grid-template-columns: 1fr; gap: .55rem; }
  .ref-arrow { min-height: 22px; }
  .ref-arrow em { width: 2px; height: 18px; }
  .ref-arrow em::after {
    right: auto; left: -3px; top: auto; bottom: -1px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 7px solid var(--border-medium); border-bottom: 0;
  }
}

/* =========================================================
   REFERRAL FEES (/refer)
   ========================================================= */
.fee-rules {
  margin: 1.6rem auto 0; max-width: 52rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem;
}
.fee-rules-h {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); margin: 0 0 1rem;
}
.fee-rules ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.fee-rules li { font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.fee-rules strong { color: var(--text-primary); }
.fee-fine { margin: 1.2rem 0 0; font-size: .8rem; line-height: 1.65; color: var(--text-faint); }

.refer-block-h {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); margin: .6rem 0 -.2rem;
}
.refer-block-h:first-child { margin-top: 0; }
.refer-hint { font-size: .78rem; color: var(--text-faint); margin: -.5rem 0 0; line-height: 1.55; }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 {
  transition-delay: 0.1s;
}
.stagger-2 {
  transition-delay: 0.2s;
}
.stagger-3 {
  transition-delay: 0.3s;
}
.stagger-4 {
  transition-delay: 0.4s;
}

/* =========================================================
   RESPONSIVE — TABLET (≤1100px)
   ========================================================= */
@media (max-width: 1100px) {
  .intel-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .gear-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-grid img {
    flex: 0 0 calc((100% - 3 * 0.6rem) / 4);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid-3 {
    grid-template-columns: 1fr;
  }

  .lead-magnet-card {
    flex-direction: column;
    text-align: center;
    padding: 1.8rem;
  }

  .start-steps-mini {
    flex-direction: column;
    gap: 0.6rem;
  }

  .stats-grid {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .stat-divider {
    display: none;
  }

  .stat-block {
    flex: 0 0 calc(50% - 1rem);
  }

  .fiverr-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Brand takes the full width and the four link columns go 2 x 2,
     so the last row is never left with a single stranded column. */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 34rem;
  }

  .footer-nav {
    flex-wrap: wrap;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.8rem;
  }

  .footer-legal {
    justify-content: center;
  }
}

/* Phones: one column. Must sit after the 1100px rule above to win. */
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand { max-width: none; }
}

/* The full nav plus the logo and the button stop fitting well before the old
   768px hamburger breakpoint, so it tightens first and then hands over to the
   menu button early. The overlay menu is not tied to that breakpoint, so it
   keeps working at every width below it. */
@media (max-width: 1180px) {
  .main-nav { gap: 1.1rem; }
  .main-nav a { font-size: 0.75rem; letter-spacing: 0.045em; }
  .header-inner { gap: 1rem; }
}
@media (max-width: 1080px) {
  .main-nav,
  .btn-header { display: none; }
  .nav-toggle { display: flex; }
}

/* =========================================================
   RESPONSIVE — MOBILE (≤768px)
   ========================================================= */
@media (max-width: 768px) {
  .main-nav,
  .btn-header {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .header-inner {
    min-height: 64px;
  }

  .brand {
    width: 190px;
  }

  .hero {
    min-height: 90svh;
  }

  .hero-content {
    padding-top: 5.5rem;
  }

  .gear-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .fit-grid,
  .answer-grid,
  .projects-grid,
  .founder-wrap,
  .video-testimonials {
    grid-template-columns: 1fr;
  }

  .founder-wrap {
    gap: 2rem;
  }

  .brand-grid img {
    flex: 0 0 calc((100% - 2 * 0.6rem) / 3);
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .start-secondary-options {
    grid-template-columns: 1fr;
  }

  .start-card {
    padding: 1.5rem;
  }

  .stats-grid {
    gap: 1.2rem;
  }

  .stat-block {
    flex: 0 0 calc(50% - 0.6rem);
  }

  .fiverr-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-desc {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE — SMALL PHONE (≤480px)
   ========================================================= */
@media (max-width: 480px) {
  .container {
    width: 90%;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .btn {
    width: 100%;
    text-align: center;
  }

  .brand-grid img {
    flex: 0 0 calc((100% - 2 * 0.6rem) / 3);
  }

  .philosophy-quote {
    padding: 1.2rem 1.4rem;
  }

  .gear-cards,
  .faq-grid,
  .fiverr-testimonials {
    grid-template-columns: 1fr;
  }
}

/* === Scroll margin for anchor links under fixed header === */
[id] {
  scroll-margin-top: 90px;
}

/* === No orphaned words ===
   balance evens out the lines of a heading so the last one is never a
   single stranded word; pretty does the same job for running copy. */
h1, h2, h3, h4, h5,
.eyebrow, .meet-h, .cc-group-h, .fnl-h, .calc-form-h, .cc-out-k, .part h4, .dl-card h4 {
  text-wrap: balance;
}
p, li, figcaption,
.section-sub, .cta-under, .cc-hint, .cc-note, .cc-foot, .calc-help, .calc-fine, .fnl-note {
  text-wrap: pretty;
}

/* =========================================================
   OWNED ENGINES STRIP (replaces certification badges)
   ========================================================= */
.owned-engines {
  margin-top: 1.5rem;
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

/* Chip rows: GRID, not flex-wrap.
   Column counts are chosen so the item count divides evenly at every
   breakpoint. Never leave 1 or 2 items stranded on the last row.
   Owned row = 6 items  -> 3 / 2 / 1 columns  (6/3=2, 6/2=3, 6/1=6)
   Partner row = 8 items -> 4 / 2 / 1 columns (8/4=2, 8/2=4, 8/1=8)
   IF YOU ADD OR REMOVE A CHIP, re-pick the column counts so they still
   divide evenly. 7 items in a 3-column grid orphans one. */
.engines-strip {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.engines-strip-muted {
  max-width: 1040px;
  grid-template-columns: repeat(4, 1fr);
}

.engines-strip li { margin: 0; display: flex; }

.engines-strip a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 46px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.engines-strip a:hover,
.engines-strip a:focus-visible {
  color: #ffffff;
  border-color: var(--red);
  background: var(--bg-card-hover);
}

@media (max-width: 1000px) {
  .engines-strip a { font-size: 0.86rem; padding: 0.5rem 0.45rem; letter-spacing: 0.02em; }
}

/* No 2-across stage. Full columns, then stacked. Never 2 per line. */
@media (max-width: 700px) {
  .engines-strip,
  .engines-strip-muted { grid-template-columns: 1fr; }
}

.engines-note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .engines-strip a {
    font-size: 0.92rem;
    padding: 0.42rem 0.8rem;
  }
}

/* Partner / client brand row: secondary to owned engines */
.partner-brands {
  margin-top: 2rem;
  text-align: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
}

.engines-strip-muted a {
  font-size: 0.95rem;
  color: var(--text-muted);
  background: transparent;
}

.engines-strip-muted a:hover,
.engines-strip-muted a:focus-visible {
  color: var(--text-primary);
  border-color: var(--gold);
  background: var(--bg-card);
}

/* =========================================================
   WHAT IS A REVENUE ENGINE
   ========================================================= */
.section-engine-def {
  background: var(--bg-secondary);
}

/* 4 items -> 4/2/1 columns. All divide evenly. No orphans. */
.engine-parts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 1000px) { .engine-parts { gap: 0.8rem; } .engine-part { padding: 1.35rem 1.05rem; } }
@media (max-width: 760px) { .engine-parts { grid-template-columns: 1fr; } }

.engine-part {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.engine-part:hover {
  border-color: var(--red);
  background: var(--bg-card-hover);
}

.engine-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--red);
  opacity: 0.55;
  display: block;
  margin-bottom: 0.6rem;
}

.engine-part h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.55rem;
  color: var(--text-primary);
}

.engine-part p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.engine-phases {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border-subtle);
}

.phase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.6rem 1.4rem;
  margin-top: 1.1rem;
}

.phase-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.phase-tag {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
  white-space: nowrap;
}

.phase-head h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--text-primary);
}

.phase-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.phase-card > p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 0.6rem;
}

.phase-proof {
  font-size: 0.86rem !important;
  color: var(--gold) !important;
  margin-bottom: 0 !important;
}

/* 4 items -> 4/2/1 columns. */
.gather-list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  /* 5 items. 5 is prime, so it is 5 across or stacked. Never 4+1. */
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1050px) { .gather-list { grid-template-columns: 1fr; } }

.gather-list li {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
  border-left: 2px solid var(--border-subtle);
  padding-left: 0.85rem;
}

.gather-list strong { color: var(--text-primary); font-weight: 600; }

/* =========================================================
   REFER PAGE
   ========================================================= */
.section-refer-hero { padding-top: 8rem; background: var(--bg-secondary); }
.container.narrow { max-width: 720px; }
.center-text { text-align: center; }

/* 8 items -> 4/2/1 columns. auto-fit was producing 3+3+2 and orphaning two. */
.ask-grid {
  display: grid;
  /* minmax(0,...) so the cards can actually shrink; with plain 1fr their
     min-content width pushed the grid past the viewport around 1000px. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.75rem;
}
@media (max-width: 1150px) { .ask-grid { gap: 0.8rem; } .ask-card { padding: 1.15rem 1rem; } }
/* Eight cards, so two across still fills every row. Nothing gets stranded. */
@media (max-width: 1080px) { .ask-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ask-grid { grid-template-columns: 1fr; } }

.ask-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.35rem;
}

.ask-kicker {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 0.45rem;
}

.ask-card h3 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}

.ask-card p { font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }

.refer-form { display: flex; flex-direction: column; gap: 1.05rem; margin-top: 1.5rem; }
.refer-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; color: var(--text-secondary); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.refer-form input, .refer-form select, .refer-form textarea {
  background: var(--bg-quaternary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  padding: 0.8rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  width: 100%;
}
.refer-form input:focus, .refer-form select:focus, .refer-form textarea:focus {
  outline: none; border-color: var(--red);
}
.refer-form textarea { resize: vertical; }
.form-status { font-size: 0.9rem; color: var(--gold); min-height: 1.2em; margin: 0; }

@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* =========================================================
   PRICING LADDER
   ========================================================= */
.section-pricing { background: var(--bg-secondary); }

.price-table {
  margin-top: 2.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.price-row {
  display: grid;
  grid-template-columns: 2.1fr 0.8fr 0.8fr 1.5fr;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.35rem;
  border-bottom: 1px solid var(--border-subtle);
}

.price-row:last-child { border-bottom: none; }
.price-row:not(.price-head):hover { background: var(--bg-card); }

.price-head {
  background: var(--bg-quaternary);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.price-row strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.24rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.price-row small {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  line-height: 1.4;
}

.price-row span:nth-child(2),
.price-row span:nth-child(3) {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
}

.price-row:not(.price-head) span:nth-child(4) {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.monthly-note {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.monthly-note p:last-child {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.pay-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
  margin-top: 2.25rem;
}

.pay-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.7rem;
}

.pay-hero {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(253, 192, 84, 0.08), transparent);
}

.pay-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.pay-amt {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  line-height: 1.1;
  margin: 0.3rem 0 0;
}

.pay-amt span { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); }
.pay-amt-sm { font-size: 1.35rem; }

.pay-card > p:last-child {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-top: 0.85rem;
  line-height: 1.6;
}

/* Stack to cards on small screens. No 2-across half states. */
@media (max-width: 900px) {
  .price-head { display: none; }
  .price-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1.25rem 1.15rem;
  }
  .price-row span:nth-child(2)::before,
  .price-row span:nth-child(3)::before,
  .price-row span:nth-child(4)::before {
    content: attr(data-l) ": ";
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .price-row span:nth-child(2),
  .price-row span:nth-child(3) { font-size: 1.05rem; }
  .pay-two { grid-template-columns: 1fr; }
}

/* =========================================================
   REVENUE LEAK CALCULATOR
   ========================================================= */
.section-calc { background: var(--bg-secondary); }

.calc-shell {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: start;
}

.calc-left h2 { font-family: var(--font-display); font-size: clamp(2.2rem,4.5vw,3.4rem); line-height: 1; letter-spacing: .02em; margin: .4rem 0 1rem; }
.calc-blurb { font-size: 1rem; color: var(--text-secondary); line-height: 1.65; }
.calc-why { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.calc-why li { font-size: .92rem; color: var(--text-muted); padding-left: 1.7rem; position: relative; margin-bottom: .8rem; line-height: 1.55; }
.calc-why li:before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 700; }
.calc-why strong { color: var(--text-primary); }

.calc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 2.4rem 2.2rem 2.2rem;
  position: relative;
  overflow: hidden;
  min-height: 430px;
}

.calc-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.07); }
.calc-bar span { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .35s ease; }

.calc-step { display: none; animation: calcIn .32s ease both; }
.calc-step.on { display: block; }
@keyframes calcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.calc-step-n { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: .8rem; }
.calc-step h3 { font-family: var(--font-display); font-size: clamp(1.5rem,2.6vw,2.05rem); line-height: 1.12; letter-spacing: .02em; margin-bottom: .5rem; }
.calc-help { font-size: .88rem; color: var(--text-muted); margin-bottom: 1.6rem; line-height: 1.5; }

.calc-val { font-family: var(--font-display); font-size: clamp(2.6rem,6vw,3.6rem); line-height: 1; color: var(--gold); margin-bottom: 1rem; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) var(--pct,33%), rgba(255,255,255,.12) var(--pct,33%), rgba(255,255,255,.12) 100%); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 4px solid var(--red); cursor: grab; box-shadow: 0 3px 14px rgba(252,3,17,.45); }
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--red); cursor: grab; }

.calc-ends { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-faint); margin-top: .55rem; }

.calc-next { margin-top: 1.9rem; }
.calc-next span { margin-left: .3rem; }
.calc-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.9rem; }
.calc-nav .calc-next { margin-top: 0; }
.calc-back { background: none; border: none; color: var(--text-muted); font-size: .88rem; cursor: pointer; font-family: var(--font-body); padding: .5rem 0; }
.calc-back:hover { color: var(--text-primary); }

.calc-toggles { display: flex; flex-direction: column; gap: .7rem; }
.tog { display: flex; align-items: flex-start; gap: .85rem; cursor: pointer; padding: .85rem 1rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-quaternary); transition: border-color .18s ease, background .18s ease; }
.tog:hover { border-color: rgba(255,255,255,.22); }
.tog input { position: absolute; opacity: 0; pointer-events: none; }
.tog-box { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px; border: 2px solid rgba(255,255,255,.22); margin-top: .1rem; position: relative; transition: all .18s ease; }
.tog input:checked ~ .tog-box { background: var(--gold); border-color: var(--gold); }
.tog input:checked ~ .tog-box:after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #0d0d0d; font-size: 13px; font-weight: 800; }
.tog input:checked ~ .tog-txt { color: var(--text-primary); }
.tog-txt { font-size: .9rem; color: var(--text-muted); line-height: 1.5; }
.tog-txt strong { color: var(--text-primary); }

/* result */
.calc-lbl { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.calc-big { font-family: var(--font-display); font-size: clamp(3rem,9vw,5rem); line-height: .95; color: var(--red); margin: .3rem 0 .1rem; text-shadow: 0 0 42px rgba(252,3,17,.35); }
.calc-yr { font-size: .82rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.calc-sub { font-size: .93rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; }
.calc-missing { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.calc-missing li { font-size: .88rem; color: var(--text-secondary); padding-left: 1.2rem; position: relative; margin-bottom: .5rem; line-height: 1.5; }
.calc-missing li:before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.calc-missing strong { color: var(--text-primary); }
.calc-rec { background: linear-gradient(180deg, rgba(253,192,84,.11), transparent); border: 1px solid rgba(253,192,84,.32); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.calc-rec p { font-size: .9rem; color: var(--text-secondary); line-height: 1.55; }
.calc-rec strong { color: var(--gold); }
/* The capture form is the last thing between a number and a conversation,
   so it gets treated like part of the result panel, not a tacked-on form. */
.calc-form {
  display: flex; flex-direction: column; gap: 1.05rem;
  margin-top: 1.5rem; padding: 1.55rem 1.4rem 1.4rem;
  border: 1px solid rgba(253,192,84,.22);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(253,192,84,.06), rgba(253,192,84,0) 46%), var(--bg-tertiary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -28px rgba(0,0,0,.9);
}
.calc-form .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }

.calc-form label {
  display: flex; flex-direction: column; gap: .45rem;
  font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-muted);
}
.calc-form input {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  color: var(--text-primary);
  padding: .88rem .95rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.calc-form input:hover:not(:focus) { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.055); }
.calc-form input:focus {
  outline: none; border-color: var(--red);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(252,3,17,.16);
}
.calc-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: 0 0 0 40px #1b1b1b inset;
}
.calc-form button[type="submit"] { margin-top: .3rem; width: 100%; justify-content: center; }
.calc-form .form-status { min-height: 0; margin: -.4rem 0 0; text-align: center; }
.calc-form .form-status:empty { display: none; }
.calc-fine { font-size: .76rem; line-height: 1.55; color: var(--text-muted); opacity: .72; margin: -.35rem 0 0; text-align: center; }
.calc-status { font-size: .85rem; color: var(--gold); min-height: 1.1em; margin: 0; }

.calc-assump { margin: 1.8rem auto 0; max-width: 820px; font-size: .86rem; color: var(--text-muted); }
.calc-assump summary { cursor: pointer; color: var(--text-secondary); }
.calc-assump p { margin-top: .7rem; line-height: 1.65; }

@media (max-width: 980px) {
  .calc-shell { grid-template-columns: 1fr; gap: 2rem; }
  .calc-card { padding: 2rem 1.4rem 1.8rem; min-height: 0; }
  .calc-form .fr { grid-template-columns: 1fr; }
}

/* =========================================================
   MEET (pre one-to-one prep page)
   ========================================================= */
.meet-h {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: .03em;
  margin-bottom: 1rem;
  color: var(--text-primary);
}
.meet-p { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 1rem; }
.meet-p strong { color: var(--text-primary); }
.meet-quiet { color: var(--text-muted); font-size: .94rem; }

.meet-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.meet-list li {
  font-size: .97rem; line-height: 1.65; color: var(--text-secondary);
  padding-left: 1.4rem; position: relative; margin-bottom: .9rem;
}
.meet-list li:before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--red); border-radius: 50%;
}
.meet-list strong { color: var(--text-primary); }

/* 6 items -> 3/1 columns. Never 2 per line. */
.meet-give { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
.meet-give .card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 1.3rem 1.25rem;
}
.meet-give .card h4 {
  font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .03em;
  margin-bottom: .45rem; color: var(--text-primary);
}
.meet-give .card p { font-size: .9rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
@media (max-width: 900px) { .meet-give { grid-template-columns: 1fr; } }

/* =========================================================
   MEET: personal facts, GAINS, contact sphere, referral fit
   ========================================================= */

/* Multi-column masonry, not grid. Grid gives every card in a row the
   height of the tallest one, and The Corps card is five times longer
   than its neighbors, so three cards were mostly empty space. Columns
   pack each card to its own height. */
.fact-grid { columns: 4 230px; column-gap: 1rem; margin-top: 1.75rem; }
.fact {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.15rem 1.1rem;
  break-inside: avoid; margin: 0 0 1rem;
}
.fact h4 {
  font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .4rem;
}
.fact p { font-size: .9rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
/* column count degrades on its own via the 230px minimum */

/* 6 items -> 3/1 columns. */
.sphere-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
.sphere-grid .card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--red); border-radius: var(--radius-lg); padding: 1.3rem 1.25rem;
}
.sphere-grid .card h4 {
  font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .03em;
  margin-bottom: .45rem; color: var(--text-primary);
}
.sphere-grid .card p { font-size: .9rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
@media (max-width: 900px) { .sphere-grid { grid-template-columns: 1fr; } }

/* deliberate pair, not a grid of many */
.meet-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.5rem; }
.meet-compare .cmp {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.4rem 1.3rem;
}
.meet-compare .cmp-yes { border-top: 3px solid var(--gold); }
.meet-compare .cmp-no { border-top: 3px solid var(--red); }
.meet-compare h4 {
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .03em;
  margin-bottom: .8rem; color: var(--text-primary);
}
.meet-compare ul { list-style: none; margin: 0; padding: 0; }
.meet-compare li {
  font-size: .92rem; line-height: 1.55; color: var(--text-secondary);
  padding-left: 1.3rem; position: relative; margin-bottom: .65rem;
}
.meet-compare li:last-child { margin-bottom: 0; }
.meet-compare .cmp-yes li:before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.meet-compare .cmp-no li:before { content: "\2715"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 700; }
@media (max-width: 820px) { .meet-compare { grid-template-columns: 1fr; } }

.meet-quote {
  border-left: 3px solid var(--gold); padding: .35rem 0 .35rem 1.25rem;
  margin: 1.6rem 0 .4rem; font-size: 1.15rem; line-height: 1.55;
  color: var(--text-primary); font-weight: 600;
}
.meet-quote span { display: block; margin-top: .5rem; font-size: .88rem; font-weight: 400; color: var(--text-muted); }

.gains { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.gains li {
  border-left: 2px solid var(--border-subtle); padding: 0 0 0 1.1rem; margin-bottom: 1.15rem;
}
.gains li:last-child { margin-bottom: 0; }
.gains h4 {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .3rem;
}
.gains p { font-size: .95rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* =========================================================
   PRESS KIT / SPONSOR KIT / LINK HUB
   ========================================================= */

/* 6 items -> 3/1 columns. */
/* === Engine marks ===
   One per engine, in a tinted badge. Six deliberately different
   silhouettes so no two are mistakable at card size. */
.eng-badge {
  width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(252,3,17,.16), rgba(253,192,84,.10));
  border: 1px solid rgba(255,255,255,.09);
  margin-bottom: 1rem;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.eng-ico { width: 30px; height: 30px; display: block; color: var(--text-primary); }
.ico-hot, .ico-hot-fill { fill: var(--gold); }
.ico-hot-stroke { stroke: var(--gold); fill: none; }
.dl-card:hover .eng-badge {
  border-color: rgba(253,192,84,.4);
  background: linear-gradient(150deg, rgba(252,3,17,.26), rgba(253,192,84,.16));
  transform: translateY(-2px);
}

.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
.dl-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.3rem 1.25rem; display: flex; flex-direction: column;
}
.dl-card h4 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .03em; margin-bottom: .35rem; color: var(--text-primary); }
.dl-card p { font-size: .87rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 1rem; flex: 1; }
.dl-card a { font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.dl-card a:hover { color: var(--red); }
/* The whole card is the click target, not just the caps link at the bottom.
   The link's ::after stretches over the card. :only-of-type spares the one
   press card that offers the same asset as two links, where stretching the
   first would bury the second. */
.dl-card { position: relative; transition: border-color .2s, transform .2s, background .2s; }
.dl-card > a:only-of-type::after { content: ""; position: absolute; inset: 0; }
.dl-card:has(> a:only-of-type):hover,
.dl-card:has(> a:only-of-type):focus-within {
  border-color: var(--gold); transform: translateY(-3px); background: var(--bg-card-hover);
}
/* A card offering the same asset in two formats gets two links rather than
   two near-identical cards. */
.dl-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: 1fr; } }

.bio-block {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold); border-radius: var(--radius-lg);
  padding: 1.4rem 1.35rem; margin-bottom: 1.1rem;
}
.bio-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap; }
.bio-head h4 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .04em; color: var(--text-primary); margin: 0; }
.copy-btn {
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted);
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.copy-btn:hover { border-color: var(--gold); color: var(--gold); }
.bio-block p { font-size: .97rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }

.press-photo { max-width: 260px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); display: block; margin: 0 auto 1.5rem; }

/* 4 items -> 4/1 columns. */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.75rem; }
.tier {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 1.4rem 1.25rem;
}
.tier.tier-hot { border-top-color: var(--red); }
.tier h4 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .03em; color: var(--text-primary); margin-bottom: .2rem; }
.tier .tier-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); letter-spacing: .02em; margin-bottom: .9rem; }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li { font-size: .87rem; line-height: 1.5; color: var(--text-secondary); padding-left: 1.1rem; position: relative; margin-bottom: .55rem; }
.tier li:before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; }
.tier.tier-hot li:before { background: var(--red); }
@media (max-width: 1050px) { .tier-grid { grid-template-columns: 1fr; } }

/* link hub */
.link-group { margin-top: 2.4rem; }
.link-group > h3 {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.link-item {
  display: block; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.05rem 1.15rem; transition: border-color .2s, transform .2s;
}
.link-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.link-item strong { display: block; font-size: 1rem; color: var(--text-primary); margin-bottom: .25rem; }
.link-item span { display: block; font-size: .84rem; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 900px) { .link-grid { grid-template-columns: 1fr; } }

/* =========================================================
   REVENUE ENGINE LANDERS
   ========================================================= */

/* 4 items -> 4/1 columns. Never 2 or 3 per line. */
.parts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.75rem; }
.part {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.3rem 1.2rem;
}
.part .part-n {
  font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--red); margin-bottom: .5rem;
}
.part h4 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .04em; color: var(--text-primary); margin-bottom: .4rem; }
.part p { font-size: .88rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
@media (max-width: 1050px) { .parts-grid { grid-template-columns: 1fr; } }

.engine-crumb {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 1.2rem; text-align: center;
}
.engine-crumb a { color: var(--gold); text-decoration: none; }
.engine-crumb a:hover { color: var(--red); }

.payback {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; margin-top: 1.5rem;
}
.payback .payback-label {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem;
}
.payback p { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: .02em; color: var(--text-primary); margin: 0; }
.payback .payback-note { font-family: var(--font-body, inherit); font-size: .88rem; letter-spacing: 0; color: var(--text-muted); margin-top: .7rem; }

/* press kit: asset previews inside the download cards */
.dl-card .dl-thumb {
  display: block;
  width: calc(100% + 2.5rem);
  margin: -1.3rem -1.25rem 1.05rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* =========================================================
   ENGINE FLOW DIAGRAM (audience -> front door -> engine -> cash)
   ========================================================= */
.flow { margin-top: 2rem; }
.flow-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.45fr auto 1fr;
  align-items: stretch;
  gap: .55rem;
}
.flow-node {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.1rem 1rem;
  display: flex; flex-direction: column; justify-content: center;
}
.flow-k {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .45rem;
}
.flow-node strong {
  font-family: var(--font-display); font-size: 1.12rem; letter-spacing: .03em;
  color: var(--text-primary); display: block; margin-bottom: .3rem; line-height: 1.15;
}
.flow-node p { font-size: .82rem; line-height: 1.5; color: var(--text-secondary); margin: 0; }

.flow-node.n-src { border-left: 3px solid var(--text-muted); }
.flow-node.n-door { border-left: 3px solid var(--red); }
.flow-node.n-door .flow-k { color: var(--red); }

/* the machine */
.flow-box {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: .95rem .9rem;
}
.flow-box-k {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .7rem; text-align: center;
}
.flow-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.flow-part {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: .7rem .65rem; text-align: center;
  animation: flowPulse 3.6s ease-in-out infinite;
}
.flow-part:nth-child(2) { animation-delay: .45s; }
.flow-part:nth-child(3) { animation-delay: .9s; }
.flow-part b { display: block; font-size: .88rem; color: var(--text-primary); margin-bottom: .2rem; }
.flow-part span { display: block; font-size: .74rem; line-height: 1.4; color: var(--text-muted); }
@keyframes flowPulse {
  0%, 62%, 100% { border-color: var(--border-subtle); box-shadow: none; }
  18%, 34%      { border-color: var(--gold); box-shadow: 0 0 16px rgba(253,192,84,.16); }
}
.flow-score {
  margin-top: .5rem; border: 1px dashed var(--border-subtle); border-radius: 10px;
  padding: .55rem .65rem; text-align: center;
  font-size: .74rem; line-height: 1.45; color: var(--text-muted);
}
.flow-score b { color: var(--gold); font-weight: 700; }

/* cash */
.flow-node.n-cash {
  border: 1px solid rgba(253,192,84,.45);
  background: linear-gradient(180deg, rgba(253,192,84,.09), rgba(253,192,84,.02));
  position: relative; overflow: hidden;
  animation: cashGlow 3.6s ease-in-out infinite;
}
.flow-node.n-cash .flow-k { color: var(--gold); }
.flow-node.n-cash strong { color: var(--gold); }
@keyframes cashGlow {
  0%, 55%, 100% { box-shadow: none; }
  78%           { box-shadow: 0 0 30px rgba(253,192,84,.22); }
}
.cash-bits { position: absolute; inset: 0; pointer-events: none; }
.cash-bits i {
  position: absolute; bottom: -14px; font-style: normal; font-weight: 800;
  font-size: .95rem; color: rgba(253,192,84,.75);
  animation: cashRise 3.6s ease-out infinite;
}
.cash-bits i:nth-child(1) { left: 16%; animation-delay: .2s; }
.cash-bits i:nth-child(2) { left: 48%; animation-delay: 1.4s; }
.cash-bits i:nth-child(3) { left: 76%; animation-delay: 2.5s; }
@keyframes cashRise {
  0%   { transform: translateY(0) scale(.7); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(-86px) scale(1.05); opacity: 0; }
}

/* connectors */
.flow-arrow { position: relative; align-self: center; width: 44px; height: 22px; }
.flow-arrow:before {
  content: ""; position: absolute; top: 50%; left: 0; right: 6px; height: 2px;
  transform: translateY(-50%); background: var(--border-subtle);
}
.flow-arrow:after {
  content: ""; position: absolute; top: 50%; right: 0;
  transform: translateY(-50%);
  border-left: 7px solid var(--border-subtle);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.flow-arrow em {
  position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(252,3,17,.7);
  animation: flowDot 3.6s linear infinite;
}
.flow-arrow.a2 em { animation-delay: .5s; }
.flow-arrow.a3 em { animation-delay: 1s; background: var(--gold); box-shadow: 0 0 10px rgba(253,192,84,.8); }
@keyframes flowDot {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  72%  { opacity: 1; }
  80%, 100% { transform: translateX(34px); opacity: 0; }
}

/* return loop */
.flow-loop {
  margin-top: .9rem; position: relative;
  border: 1px dashed rgba(253,192,84,.35); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  height: 46px;
}
.flow-loop span {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%);
  background: var(--bg-primary); padding: 0 .8rem;
  font-size: .78rem; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap;
}
.flow-caption { font-size: .84rem; color: var(--text-muted); text-align: center; margin-top: 2.2rem; }

/* The diagram ends on "five revenue lines", so the obvious next question is
   how much. This is where that gets answered. */
.flow-cta { margin-top: 1.6rem; text-align: center; }
.flow-cta .btn { display: inline-flex; }
.flow-cta-note { margin: .8rem 0 0; font-size: .82rem; color: var(--text-faint); }

@media (max-width: 1050px) {
  .flow-track { grid-template-columns: 1fr; }
  .flow-arrow { width: 22px; height: 40px; justify-self: center; }
  .flow-arrow:before { top: 0; bottom: 6px; left: 50%; right: auto; width: 2px; height: auto; transform: translateX(-50%); }
  .flow-arrow:after {
    top: auto; bottom: 0; right: 50%; transform: translateX(50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--border-subtle); border-bottom: none;
  }
  .flow-arrow em { top: 0; left: 50%; margin-left: -4px; margin-top: 0; animation-name: flowDotV; }
  @keyframes flowDotV {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 1; }
    72%  { opacity: 1; }
    80%, 100% { transform: translateY(30px); opacity: 0; }
  }
  .flow-loop span { white-space: normal; text-align: center; width: 15rem; }
}
@media (max-width: 560px) {
  .flow-parts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-part, .flow-node.n-cash, .cash-bits i, .flow-arrow em { animation: none !important; }
  .cash-bits i { opacity: .55; bottom: auto; top: 12%; }
  .flow-arrow em { opacity: 1; transform: translateX(14px); }
}

/* =========================================================
   LINK HUB v2 (/links)
   ========================================================= */
.linkhub { max-width: 1000px; margin: 0 auto; }

.section-linkhub { padding-top: 7rem; padding-bottom: 2rem; background: var(--bg-secondary); }
.lh-profile { text-align: center; }
.lh-avatar {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold); display: block; margin: 0 auto 1rem;
}
.lh-name {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: .03em; line-height: 1; margin-bottom: .55rem; color: var(--text-primary);
}
.lh-role {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
}
.lh-tag { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); max-width: 34rem; margin: 0 auto 1.4rem; }
.lh-socials { display: flex; justify-content: center; gap: .6rem; }
.lh-socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
  transition: border-color .2s, color .2s, transform .2s;
}
.lh-socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* three big primary actions */
.lh-primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 2.2rem; }
.lh-cta {
  display: block; text-decoration: none; text-align: center;
  border-radius: var(--radius-lg); padding: 1.35rem 1.1rem;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  transition: border-color .2s, transform .2s, background .2s;
}
.lh-cta:hover { border-color: var(--gold); transform: translateY(-3px); background: var(--bg-card-hover); }
.lh-cta strong { display: block; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .03em; color: var(--text-primary); margin-bottom: .3rem; }
.lh-cta span { display: block; font-size: .85rem; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
/* Written here, right after the rules they override, so source order cannot betray them.
   repeat(3, 1fr) refuses to shrink below its content, which is what put a horizontal
   scrollbar on the link pages at tablet widths. minmax(0, 1fr) lets the track shrink. */
.lh-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.lh-cta { display: flex; flex-direction: column; justify-content: center; }
.lh-cta strong { text-wrap: balance; }
.lh-cta.is-hot { background: linear-gradient(180deg, rgba(252,3,17,.16), rgba(252,3,17,.04)); border-color: rgba(252,3,17,.5); }
.lh-cta.is-hot strong { color: #fff; }
@media (max-width: 860px) { .lh-primary { grid-template-columns: 1fr; } }

/* groups */
.linkhub-cta { display: flex; justify-content: center; margin-top: 1.8rem; }
.section-linkhub-body { padding-top: 2.5rem; }
.link-group { margin-top: 2.6rem; }
.link-group:first-child { margin-top: 0; }
.link-group > h3 {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.link-group > h3:after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; align-items: stretch; }
.li-txt strong { text-wrap: balance; }
.li-txt span { text-wrap: pretty; }
.link-item {
  display: flex; align-items: center; gap: .85rem; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: .95rem 1rem;
  transition: border-color .2s, transform .2s, background .2s;
}
.link-item:hover { border-color: var(--gold); transform: translateY(-2px); background: var(--bg-card-hover); }
/* The chip used to hold two letters set in Bebas, a display face with no
   lowercase built for headlines at 40px and up. Two condensed capitals at
   16px left a sliver of ink floating in a 34px box, and codes like PF or BK
   had no key anywhere on the page. It carries a drawn mark now. */
.li-badge,
.link-item span.li-badge {  /* the second selector outguns ".link-item span" at line ~3097,
     an older card style whose display:block was flattening this flexbox
     and pinning the icon to the chip's top left corner */
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--gold);
  transition: border-color .2s, background .2s, color .2s;
}
.li-ico { width: 19px; height: 19px; display: block; }
.link-item:hover .li-badge { border-color: rgba(253,192,84,.45); background: rgba(253,192,84,.10); }
.li-txt { flex: 1; min-width: 0; }
.li-txt strong { display: block; font-size: .96rem; color: var(--text-primary); margin-bottom: .12rem; line-height: 1.3; }
.li-txt span { display: block; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.li-go { flex: 0 0 auto; color: var(--text-muted); font-size: 1.05rem; transition: transform .2s, color .2s; }
.link-item:hover .li-go { color: var(--gold); transform: translateX(3px); }
.link-item.is-ext .li-go:after { content: "\2197"; }
.link-item.is-int .li-go:after { content: "\2192"; }
@media (max-width: 900px) { .link-grid { grid-template-columns: 1fr; } }

/* =========================================================
   ENGINE PICKER (#picker)
   ========================================================= */
.tog.tog-r .tog-box { border-radius: 50%; }
.tog.tog-r input:checked ~ .tog-box:after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0d0d0d; }
.tog input:focus-visible ~ .tog-box { outline: 2px solid var(--gold); outline-offset: 2px; }

.pk-kicker { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: .4rem; }
.calc-step h3.pk-name { color: var(--text-primary); margin-bottom: .8rem; }
.pk-why { font-size: .96rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 1.2rem; }
.pk-pay {
  background: var(--bg-quaternary); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold); border-radius: 12px; padding: .95rem 1rem; margin-bottom: 1.1rem;
}
.pk-pay span { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem; }
.pk-pay strong { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .02em; color: var(--text-primary); }
.pk-second { font-size: .9rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 1.3rem; }
.pk-second strong { color: var(--text-primary); }
.pk-see { margin-bottom: 1.7rem; }
.calc-form-h {
  font-family: var(--font-display); font-size: 1.42rem; letter-spacing: .035em;
  color: var(--text-primary); margin: 0 0 .1rem;
  display: flex; align-items: center; gap: .6rem;
}
.calc-form-h::before {
  content: ""; flex: none; width: 26px; height: 3px; border-radius: 3px;
  background: var(--gradient-accent);
}
.calc-form .calc-help { font-size: .86rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 .1rem; }

/* icon tile on the "who I'm looking for" cards */
.ask-ico {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: .85rem;
  background: rgba(252,3,17,.10); border: 1px solid rgba(252,3,17,.28);
  color: var(--red);
}
.ask-ico svg { width: 21px; height: 21px; display: block; }
.ask-card:nth-child(4n+2) .ask-ico,
.ask-card:nth-child(4n+3) .ask-ico { background: rgba(253,192,84,.10); border-color: rgba(253,192,84,.30); color: var(--gold); }

/* the logo always goes home */
.footer-brand > a { display: inline-block; line-height: 0; transition: opacity .2s; }
.footer-brand > a:hover { opacity: .75; }

/* founder CTA block: let it breathe */
.founder-text .btn { margin-top: 1.8rem; }
.founder-text .btn + p { margin: 1.5rem 0 0; }
.founder-socials {
  margin-top: 2.6rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--border-subtle);
}
.founder-socials-label { margin: 0 0 1rem; }
.founder-socials-icons { gap: 0.8rem; }
@media (max-width: 900px) {
  .founder-text .btn { margin-top: 1.5rem; }
  .founder-socials { margin-top: 2.2rem; padding-top: 1.6rem; }
}

/* =========================================================
   CONFERENCE REVENUE CALCULATOR (#conference-calculator)
   ========================================================= */
.cc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.4rem; margin-top: 2.2rem; align-items: start; }
@media (max-width: 1000px) { .cc { grid-template-columns: 1fr; } }

.cc-inputs { display: grid; gap: 1rem; }
.cc-group {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.3rem 1.25rem;
}
.cc-group-h {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 1.1rem;
}
.cc-field { margin-bottom: 1.35rem; }
.cc-field:last-child { margin-bottom: 0; }
.cc-lab { margin-bottom: .5rem; }
.cc-lab span { font-size: .88rem; color: var(--text-secondary); line-height: 1.35; }
.cc-hint { font-size: .76rem; line-height: 1.5; color: var(--text-muted); margin-top: .5rem; }

/* slider + type-it-in box */
.cc-in { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: .75rem; align-items: center; }
.cc-in input[type="range"] { min-width: 0; }
.cc-in input[type="number"],
.cc-booth input[type="number"] {
  background: var(--bg-quaternary); border: 1px solid var(--border-subtle); border-radius: 10px;
  color: var(--gold); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em;
  padding: .5rem .6rem; width: 100%; text-align: center; -moz-appearance: textfield;
}
.cc-in input[type="number"]:focus,
.cc-booth input[type="number"]:focus { outline: none; border-color: var(--red); }
.cc-in input[type="number"]::-webkit-outer-spin-button,
.cc-in input[type="number"]::-webkit-inner-spin-button,
.cc-booth input[type="number"]::-webkit-outer-spin-button,
.cc-booth input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* booth rows */
.cc-booth { display: grid; grid-template-columns: minmax(0, 1fr) 104px 92px; gap: .5rem; align-items: center; margin-bottom: .55rem; }
/* Small phones: the fixed number columns have to give ground or the whole
   calculator pushes the page sideways. */
@media (max-width: 430px) {
  .cc-in { grid-template-columns: minmax(0, 1fr) 76px; gap: .5rem; }
  .cc-booth { grid-template-columns: minmax(0, 1fr) 72px 60px; gap: .4rem; }
  .cc-group { padding: 1.1rem .95rem; }
  .cc-in input[type="number"], .cc-booth input[type="number"] { font-size: .95rem; padding: .45rem .3rem; }
}
.cc-booth label { font-size: .88rem; color: var(--text-secondary); }
.cc-booth-h { margin-bottom: .45rem; }
.cc-booth-h span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.cc-booth-h span:first-child { text-align: left; }
@media (max-width: 480px) {
  .cc-in { grid-template-columns: 1fr 84px; }
  .cc-booth { grid-template-columns: 1fr 84px 74px; }
}

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.seg button {
  background: var(--bg-quaternary); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); border-radius: 10px; padding: .6rem .3rem;
  font-family: inherit; font-size: .85rem; cursor: pointer; transition: all .18s ease;
}
.seg button:hover { border-color: rgba(255,255,255,.25); }
.seg button.on { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }

.cc-out {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--gold); border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem; position: sticky; top: 92px;
}
@media (max-width: 1000px) { .cc-out { position: static; } }
.cc-out-k { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.cc-total {
  font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1;
  color: var(--gold); letter-spacing: .01em; margin: .35rem 0 1.2rem;
}
.cc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.cc-meta > div { background: var(--bg-quaternary); border: 1px solid var(--border-subtle); border-radius: 10px; padding: .65rem .6rem; text-align: center; }
.cc-meta b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--text-primary); line-height: 1.1; }
.cc-meta span { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: .2rem; }

.cc-assets { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.4rem; }
.cc-asset { border-radius: 12px; padding: .85rem .8rem; text-align: center; }
.cc-asset b { display: block; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.05; }
.cc-asset span { display: block; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin-top: .25rem; line-height: 1.35; }
.cc-asset-list {
  background: linear-gradient(180deg, rgba(253,192,84,.12), rgba(253,192,84,.02));
  border: 1px solid rgba(253,192,84,.32);
}
.cc-asset-list b { color: var(--gold); }
.cc-asset-conns {
  background: linear-gradient(180deg, rgba(252,3,17,.10), rgba(252,3,17,.02));
  border: 1px solid rgba(252,3,17,.30);
}
.cc-asset-conns b { color: #ff6b74; }
@media (max-width: 420px) { .cc-assets { grid-template-columns: 1fr; } }

.cc-lines { display: grid; gap: .85rem; margin-bottom: 1.2rem; }
.cc-line-t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.cc-line-t span { font-size: .85rem; color: var(--text-secondary); }
.cc-line-t b { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-primary); }
.cc-bar { height: 7px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.cc-bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .35s ease; }
.cc-line[data-k="tickets"] .cc-bar i { background: linear-gradient(90deg, var(--red), #ff6b74); }
.cc-line[data-k="booths"]  .cc-bar i { background: linear-gradient(90deg, var(--gold), #ffd88a); }
.cc-line[data-k="replays"] .cc-bar i { background: linear-gradient(90deg, #7db4ff, #b9d8ff); }
.cc-line[data-k="network"] .cc-bar i { background: linear-gradient(90deg, #2ecc71, #8ff0b5); }

.cc-note {
  font-size: .84rem; line-height: 1.6; color: var(--text-secondary);
  border-left: 2px solid var(--border-subtle); padding-left: .85rem; margin-bottom: 1.4rem;
}
.cc-note strong { color: var(--text-primary); }
.cc-cta { padding-top: .2rem; }
.cc-cta .btn { width: 100%; }
.cc-foot { font-size: .82rem; line-height: 1.6; color: var(--text-muted); text-align: center; max-width: 46rem; margin: 1.8rem auto 0; }

/* conference funnels */
.fnl-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; margin-top: 1.6rem; }
/* three funnels on the conference page: attendees, vendors, and your own pipeline */
.fnl-wrap.fnl-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .fnl-wrap.fnl-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .fnl-wrap, .fnl-wrap.fnl-3 { grid-template-columns: 1fr; } }
.fnl-col {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.3rem 1.25rem;
}
.fnl-h {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 1.1rem;
}
.fnl { display: block; }
.fnl-step { position: relative; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.03); }
.fnl-bar {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, rgba(252,3,17,.35), rgba(252,3,17,.12));
  border-right: 2px solid var(--red);
  transition: width .4s ease;
}
.fnl-step.v .fnl-bar {
  background: linear-gradient(90deg, rgba(253,192,84,.32), rgba(253,192,84,.10));
  border-right-color: var(--gold);
}
.fnl-t { position: relative; display: flex; align-items: baseline; gap: .7rem; padding: .8rem .95rem; }
.fnl-t b { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: .02em; color: var(--text-primary); line-height: 1; }
.fnl-t span { font-size: .82rem; color: var(--text-secondary); line-height: 1.3; }
.fnl-drop {
  font-size: .72rem; color: var(--text-muted); text-align: center;
  padding: .35rem 0; letter-spacing: .04em;
}
.fnl-note {
  font-size: .8rem; line-height: 1.6; color: var(--text-muted);
  border-left: 2px solid var(--border-subtle); padding-left: .8rem; margin-top: 1.1rem;
}
.fnl-note strong { color: var(--text-primary); }

/* engine calculator: mode toggle and reverse target */
.ec-modes { display: inline-grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 1.6rem auto 0; padding: .35rem;
  background: var(--bg-quaternary); border: 1px solid var(--border-subtle); border-radius: 99px; }
.cc-modes-wrap, .section-calc .ec-modes { display: grid; }
.ec-modes { justify-self: center; }
.section-calc > .container > .ec-modes { margin-left: auto; margin-right: auto; max-width: 34rem; }
.ec-modes button {
  background: transparent; border: none; color: var(--text-muted);
  border-radius: 99px; padding: .6rem 1.2rem; font-family: inherit; font-size: .87rem; cursor: pointer;
  transition: all .18s ease; white-space: nowrap;
}
.ec-modes button:hover { color: var(--text-primary); }
.ec-modes button.on { background: var(--red); color: #fff; font-weight: 700; }
/* Two nowrap labels in a pill are wider than a phone. Let them wrap and
   stack instead of pushing the whole page sideways. */
@media (max-width: 560px) {
  .ec-modes { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 100%;
    border-radius: var(--radius-lg); gap: .3rem; }
  .ec-modes button { white-space: normal; padding: .7rem 1rem; font-size: .84rem;
    border-radius: calc(var(--radius-lg) - 5px); }
  .section-calc > .container > .ec-modes { max-width: 100%; }
}

.ec-target {
  max-width: 34rem; margin: 1.3rem auto 0;
  background: var(--bg-card); border: 1px solid rgba(253,192,84,.32);
  border-radius: var(--radius-lg); padding: 1.2rem 1.3rem;
}
.ec-target > label { display: block; font-size: .88rem; color: var(--text-secondary); margin-bottom: .6rem; }
.ec-target-out { font-size: .86rem; line-height: 1.6; color: var(--text-secondary); margin-top: .85rem; }
.ec-target-out strong { color: var(--gold); }

/* =========================================================
   121 PREP SHEET  (/meet/)
   A paper sheet on the dark site, so the page reads as a
   worksheet first and a website second. The full briefing
   collapses beneath it.
   ========================================================= */
/* the site header is fixed, so the sheet needs its own clearance */
.sheet-wrap { padding-top: 8rem; }
.sheet {
  max-width: 780px; margin: 0 auto; background: #f6f2e9; color: #241f1a;
  border-radius: 16px; padding: 2.3rem 2.2rem 2.5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.sheet-head { border-bottom: 2px solid #241f1a; padding-bottom: 1.1rem; }
.sheet-tag { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: #8a6d1f; font-weight: 700; }
.sheet h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: 1; color: #241f1a; margin: .25rem 0 .5rem; }
.sheet-sub { font-size: .95rem; line-height: 1.6; color: #5b5347; margin: 0; max-width: 62ch; text-wrap: pretty; }
.sheet-sec { margin-top: 2rem; }
.sheet-sec h2 {
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .05em;
  color: #241f1a; margin: 0 0 .7rem; display: flex; align-items: baseline; gap: .6rem;
}
.sheet-sec h2 span { color: #b9891c; }
.sheet-facts { margin: 0; padding-left: 1.25rem; list-style: disc; }
.sheet-facts li::marker { color: #b9891c; }
.sheet-facts li { margin: 0 0 .45rem; font-size: .95rem; line-height: 1.55; color: #3c352c; text-wrap: pretty; }
.sheet-p { font-size: .95rem; line-height: 1.6; color: #3c352c; margin: 0; text-wrap: pretty; }
.sheet-note { margin-top: 1rem; }
.sheet-note label, .sheet-form label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8a6d1f; margin: .9rem 0 .3rem;
}
.sheet-note label { margin-top: 0; }
.sheet-note textarea, .sheet-form textarea, .sheet-form input {
  width: 100%; background: #fffdf7; border: 1px solid #d9d0bd; border-radius: 8px;
  color: #241f1a; font: inherit; font-size: .95rem; padding: .55rem .7rem;
}
.sheet-note textarea {
  min-height: 66px; resize: vertical; overflow: hidden;
  line-height: 30px; padding: 0 .7rem 4px;
  background-origin: content-box; background-clip: padding-box;
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(36,31,26,.22) 29px 30px);
}
.sheet-note textarea:focus, .sheet-form textarea:focus, .sheet-form input:focus {
  outline: none; border-color: #b9891c; box-shadow: 0 0 0 3px rgba(185,137,28,.15);
}
.sheet-note textarea::placeholder, .sheet-form textarea::placeholder, .sheet-form input::placeholder { color: #a2977f; }
.sheet .ws-saved { display: block; min-height: .95rem; margin-top: .3rem; font-size: .74rem; color: #8a7a5f; }
.sheet-form textarea { resize: vertical; min-height: 58px; }
.sheet-form .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.sheet-send { margin-top: 1.3rem; width: 100%; }
.sheet .form-status { margin: .7rem 0 0; font-size: .85rem; color: #5b5347; text-align: center; }

/* the briefing sections were built for the full container; capping the
   details block at sheet width crammed a four column grid into 780px */
/* dance card rows: category header, then his filled cell and your blank cell */
.dc-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
  margin-top: 1.6rem; font-family: var(--font-display); font-size: .95rem;
  letter-spacing: .14em; text-transform: uppercase; color: #8a6d1f;
}
.dc-row { margin-top: 1.15rem; }
.dc-cat {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .1em;
  text-transform: uppercase; color: #241f1a; margin: 0 0 .4rem;
  border-bottom: 1px solid #d9d0bd; padding-bottom: .25rem;
}
.dc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.dc-side { display: none; }
.dc-his {
  background: #efe9db; border: 1px solid #d9d0bd; border-radius: 8px;
  padding: .6rem .75rem;
}
.dc-his p { margin: 0; font-size: .86rem; line-height: 1.55; color: #3c352c; text-wrap: pretty; }
.dc-yours textarea {
  width: 100%; height: 100%; min-height: 92px; resize: vertical; overflow: hidden;
  background: #fffdf7; border: 1px solid #d9d0bd; border-radius: 8px;
  color: #241f1a; font: inherit; font-size: .9rem; padding: 2px .7rem 4px;
  line-height: 30px; background-origin: content-box; background-clip: padding-box;
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(36,31,26,.22) 29px 30px);
}
.dc-yours textarea:focus { outline: none; border-color: #b9891c; box-shadow: 0 0 0 3px rgba(185,137,28,.15); }
.dc-yours textarea::placeholder { color: #a2977f; }
.dc-yours .ws-saved { display: block; min-height: .9rem; margin-top: .25rem; font-size: .72rem; color: #8a7a5f; }
.dc-note { margin-top: 1rem; }
.dc-note label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8a6d1f; margin: 0 0 .3rem;
}
.dc-hint { font-size: .78rem; color: #8a7a5f; margin: -.15rem 0 .35rem; text-wrap: pretty; }
.dc-note textarea {
  width: 100%; min-height: 66px; resize: vertical; overflow: hidden;
  background: #fffdf7; border: 1px solid #d9d0bd; border-radius: 8px;
  color: #241f1a; font: inherit; font-size: .9rem; padding: 2px .7rem 4px;
  line-height: 30px; background-origin: content-box; background-clip: padding-box;
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(36,31,26,.22) 29px 30px);
}
.dc-note textarea:focus { outline: none; border-color: #b9891c; box-shadow: 0 0 0 3px rgba(185,137,28,.15); }
.dc-note textarea::placeholder { color: #a2977f; }
.dc-note .ws-saved { display: block; min-height: .9rem; margin-top: .25rem; font-size: .72rem; color: #8a7a5f; }
@media (max-width: 640px) {
  /* one column on phones: the pair stacks, so each cell labels itself */
  .dc-cols { display: none; }
  .dc-pair { grid-template-columns: 1fr; gap: .55rem; }
  .dc-side {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #8a6d1f; margin-bottom: .2rem;
  }
  .dc-yours textarea, .dc-note textarea { font-size: 16px; }  /* stops iOS zoom on focus */
}

.meet-more { margin: 1.5rem auto 0; }
.meet-more > summary {
  cursor: pointer; list-style: none; text-align: center;
  display: block; max-width: 780px; margin-left: auto; margin-right: auto;
  color: var(--text-secondary); font-size: .9rem;
  border: 1px solid var(--border-subtle); border-radius: 99px; padding: .75rem 1.3rem;
  transition: border-color .2s, color .2s;
}
.meet-more > summary::-webkit-details-marker { display: none; }
.meet-more > summary:hover { border-color: var(--gold); color: var(--text-primary); }
.meet-more[open] > summary { margin-bottom: .5rem; }

@media (max-width: 640px) {
  .sheet-wrap { padding-top: 5.5rem; }
  .sheet { padding: 1.6rem 1.1rem 1.9rem; border-radius: 12px; }
  .sheet-form .field-row { grid-template-columns: 1fr; }
  .sheet-note textarea, .sheet-form textarea, .sheet-form input { font-size: 16px; }  /* stops iOS zoom on focus */
}