/* Travel Creator University — landing page (rebuilt from the approved design canvas, 2026-08-23; synced to the V3 artboard).
   Loaded ONLY by src/pages/index.astro. /apply and the blog keep using tcu.css. */

:root {
  --sand: #F5F0E8; --sand-light: #FAF8F3; --sand-dark: #E8E0D0;
  --earth: #8B7355; --earth-dark: #6B5740; --earth-deep: #4A3C2A;
  --amber: #C4954A; --amber-light: #D4A85A;
  --warm-white: #FEFCF9; --warm-black: #2C2416;
  --warm-gray: #9C9488; --warm-gray-light: #B8B0A4; --sage: #8A9A7B;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --font-app: var(--font-body);
  --s-bg: #f2ede4; --s-surface: #f8f5ef; --s-surface2: #ede8de; --s-border: #dad3c5; --s-ink: #241e14; --s-ink2: #52483a; --s-ink3: #857a6c;
  --s-gold: #9e7840; --s-gold-pale: #ece0c4; --s-green: #3d6e50; --s-green-bg: #eaf3ee;
  --fb: #1877f2; --yt: #cc0000; --ig: #c13584; --tt: #222222;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--warm-white); }
.tcu-page, .tcu-page * { box-sizing: border-box; margin: 0; padding: 0; }
.tcu-page { font-family: var(--font-body); color: var(--warm-black); background: var(--warm-white); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; color: var(--earth-deep); }
a:hover { color: var(--amber); }
.tcu-page img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); margin-bottom: 1rem; display: block; }
.tcu-page h1, .tcu-page h2, .tcu-page h3 { font-family: var(--font-display); font-weight: 600; color: var(--warm-black); }
.tcu-page h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.15; letter-spacing: -0.01em; }
.tcu-page h2 em { font-style: italic; color: var(--earth); }
.sub { font-size: 1.05rem; color: var(--earth); line-height: 1.7; }
.center { text-align: center; }
.mx { margin-left: auto; margin-right: auto; }
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: 600; color: var(--warm-white); background: var(--earth-deep); padding: 1rem 2.2rem; border-radius: 100px; box-shadow: 0 4px 20px rgba(74,60,42,0.2); white-space: nowrap; }
.btn:hover { background: var(--amber); color: var(--warm-white); }
.btn .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.btn-amber { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 600; color: var(--earth-deep); background: var(--amber); padding: 1.1rem 2.5rem; border-radius: 100px; box-shadow: 0 4px 20px rgba(196,149,74,0.3); }
.btn-amber:hover { background: var(--amber-light); color: var(--earth-deep); }
.btn-amber .ic { width: 16px; height: 16px; stroke-width: 2.5; }

/* NAV */
.nav { position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem 0; z-index: 50; transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease; }
.nav.scrolled { background: rgba(254,252,249,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(139,115,85,0.08); padding: 0.9rem 0; }
.nav .wrap { display: flex; justify-content: space-between; align-items: center; }
.nav-logo { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--warm-black); letter-spacing: 0.02em; }
.nav-logo span { color: var(--amber); }
.nav-right { display: flex; align-items: center; gap: 1.6rem; }
.nav-link { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-black); }
.nav-link:hover { color: var(--amber); }
.nav-cta { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-white); background: var(--earth-deep); padding: 0.7rem 1.5rem; border-radius: 100px; }
.nav-cta:hover { background: var(--amber); color: var(--warm-white); }

/* HERO */
.hero { position: relative; background: #EDE5D6 url(/images/landing/island-sunrise.jpg) center 45% / cover no-repeat; padding: 2rem 0 0.25rem; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(245,240,232,0.04) 0%, rgba(245,240,232,0.16) 40%, rgba(245,240,232,0.80) 82%, #F5F0E8 100%),
              linear-gradient(90deg, rgba(245,240,232,0.60) 0%, rgba(245,240,232,0.30) 46%, rgba(245,240,232,0.02) 100%); }
.hero-grid { position: relative; z-index: 2; padding: 8.5rem 2rem 1.75rem; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero-eyebrow { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--earth-deep); margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.hero h1 em { font-style: italic; color: var(--earth-deep); }
.hero-sub { font-size: 1.1rem; line-height: 1.65; color: var(--earth-deep); font-weight: 500; max-width: 500px; margin-bottom: 2.2rem; }
.hero-sub strong { font-weight: 700; color: var(--warm-black); }
.hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.hero-alt { font-size: 0.92rem; font-weight: 600; color: var(--earth-deep); display: inline-flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid rgba(74,60,42,0.35); padding-bottom: 2px; }
.hero-alt .ic { width: 14px; height: 14px; }
.hero-chips { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.chip-half { display: flex; align-items: center; gap: 0.7rem; background: rgba(254,252,249,0.72); border: 1px solid rgba(74,60,42,0.14); border-radius: 12px; padding: 0.65rem 0.95rem; backdrop-filter: blur(6px); }
.chip-half .ic { color: var(--amber); width: 18px; height: 18px; }
.chip-half b { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); }
.chip-half span { font-size: 0.82rem; color: var(--warm-black); font-weight: 500; }
.hero-img { display: flex; align-items: center; justify-content: center; }
.hero-img img { width: 100%; max-width: 550px; border-radius: 16px; box-shadow: 0 24px 70px rgba(30,24,14,0.28); }

/* TRUST */
.trust { background: var(--sand); padding: 2.4rem 0 2.6rem; border-bottom: 1px solid var(--sand-dark); }
.trust-items { display: flex; justify-content: center; align-items: center; gap: 3.5rem; flex-wrap: wrap; }
.trust-item { text-align: center; }
.trust-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--earth-deep); line-height: 1; }
.trust-lbl { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-gray); margin-top: 0.55rem; }
.trust-div { width: 1px; height: 40px; background: var(--sand-dark); }

/* STATEMENT */
.statement { padding: 3.5rem 2rem; text-align: center; background: var(--warm-white); }
.st-text { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.3; max-width: 900px; margin: 0 auto; }
.st-arrow { color: var(--amber); font-weight: 400; padding: 0 0.3rem; }
.st-hi { color: var(--amber); font-style: italic; }

/* PROBLEM — HOTEL ROOM TRAP */
.problem { padding: 4.5rem 0; background: var(--sand-light); border-top: 1px solid var(--sand-dark); }
.problem-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
.problem-text p { font-size: 1.05rem; line-height: 1.75; color: var(--earth); margin-bottom: 1.1rem; }
.problem-text p strong { color: var(--warm-black); }
.trap-name { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--warm-black); }
.tools-wrap { display: flex; flex-direction: column; gap: 0.9rem; }
.oldway-lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-gray); text-align: center; margin-bottom: 0.2rem; }
.scribble { width: 100%; }
.scribble img { width: 100%; height: auto; display: block; }
.tools-arrow { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--amber); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.tools-arrow .ic { width: 24px; height: 24px; stroke-width: 2.2; }
.studio-tile { display: flex; align-items: center; gap: 1.1rem; background: var(--earth-deep); color: var(--sand-light); border-radius: 14px; padding: 1.2rem 1.4rem; box-shadow: 0 14px 40px rgba(74,60,42,0.25); }
.studio-tile b { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.25rem; }
.studio-tile b em { font-style: italic; color: var(--amber-light); }
.studio-tile span { font-size: 0.86rem; color: var(--warm-gray-light); line-height: 1.5; display: block; }
.studio-tile .ic { color: var(--amber-light); width: 30px; height: 30px; }

/* LIFESTYLE (replicated from the live page) */
.life { padding: 4.5rem 0; background: var(--warm-white); }
.life .st-text { text-align: center; margin: 0 auto 2.75rem; padding: 0 2rem; }
.life .rule { border: 0; border-top: 1px solid var(--sand-dark); max-width: 1200px; margin: 0 auto 3.25rem; }
.life-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.life-text p { font-size: 1.05rem; line-height: 1.75; color: var(--earth); margin-bottom: 1.2rem; }
.life-text .btn { margin-top: 0.4rem; }
.life-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.life-img { border-radius: 12px; aspect-ratio: 3 / 4; background: var(--sand); border: 1px solid var(--sand-dark); overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.life-img:first-child { margin-top: 2rem; }
.life-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* METHOD + MACHINE */
.mm { padding: 4.5rem 0; position: relative; background: #E9E1D3 url(/images/landing/desert-dunes.jpg) center 60% / cover no-repeat; }
.mm::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--warm-white) 0%, rgba(254,252,249,0.6) 14%, rgba(254,252,249,0.42) 50%, rgba(254,252,249,0.6) 86%, var(--warm-white) 100%); }
.mm .wrap { position: relative; z-index: 1; }
.mm-head .sub { color: var(--earth-dark); }
.mm-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.mm-head .sub { margin-top: 1rem; }
.mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.mm-card { position: relative; overflow: hidden; border-radius: 24px; padding: 2.2rem 2.2rem 2rem;
  background: linear-gradient(135deg, rgba(255,251,244,0.62) 0%, rgba(248,236,214,0.40) 55%, rgba(232,214,180,0.34) 100%);
  border: 1px solid rgba(255,255,255,0.62);
  box-shadow: 0 24px 60px rgba(74,60,42,0.16), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.mm-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 58%), linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 40%); }
.mm-card::after { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%); }
.mm-card > * { position: relative; z-index: 1; }
.mm-card.dark { color: var(--sand-light);
  background: linear-gradient(135deg, rgba(74,60,42,0.78) 0%, rgba(56,50,32,0.72) 55%, rgba(38,31,20,0.78) 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 28px 70px rgba(46,37,25,0.35), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(255,255,255,0.06); }
.mm-card.dark::before { background: radial-gradient(120% 70% at 18% -10%, rgba(255,235,200,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 40%); }
.mm-card.dark::after { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,230,190,0.7) 50%, rgba(255,255,255,0) 100%); }

.mm-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.5rem; display: block; }
.mm-card h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.mm-card.dark h3 { color: var(--sand-light); }
.mm-lead { font-size: 0.95rem; color: var(--earth); line-height: 1.6; margin-bottom: 1.4rem; }
.mm-card.dark .mm-lead { color: var(--warm-gray-light); }
.mm-rows { display: flex; flex-direction: column; gap: 0; }
.mm-row { display: grid; grid-template-columns: 34px 1fr; gap: 0.8rem; align-items: start; padding: 0.7rem 0; border-top: 1px solid rgba(139,115,85,0.14); }
.mm-card.dark .mm-row { border-top-color: rgba(255,255,255,0.08); }
.mm-num { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--amber); padding-top: 0.15rem; }
.mm-row .ic { color: var(--amber-light); width: 20px; height: 20px; margin-top: 0.15rem; }
.mm-row b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--warm-black); }
.mm-card.dark .mm-row b { color: var(--sand-light); }
.mm-row span { font-size: 0.86rem; color: var(--earth); line-height: 1.5; }
.mm-card.dark .mm-row span { color: var(--warm-gray-light); }
.mm-foot { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; background: rgba(255,251,244,0.55); border: 1px solid rgba(255,255,255,0.7); border-radius: 100px; padding: 0.9rem 1.6rem; font-size: 0.95rem; color: var(--earth-dark); font-weight: 500; text-align: center; -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 10px 30px rgba(74,60,42,0.10), inset 0 1px 0 rgba(255,255,255,0.8); }
.mm-foot .ic { color: var(--amber); width: 18px; height: 18px; }
.mm-foot b { color: var(--warm-black); }

/* PROOF */
.proof { padding: 4.5rem 0; position: relative; background: #E9E1D3 url(/images/landing/fjord-golden.jpg) center 40% / cover no-repeat; }
.proof::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--warm-white) 0%, rgba(254,252,249,0.55) 22%, rgba(254,252,249,0.38) 60%, rgba(254,252,249,0.7) 88%, var(--warm-white) 100%); }
.proof .wrap { position: relative; z-index: 1; }
.proof .sub { color: var(--earth-dark); }
.proof-head { text-align: center; margin-bottom: 2.5rem; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.proof-card { border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.08); background: var(--sand-light); }

/* STUDIO TOUR */
.tour { padding: 4.5rem 0; background: var(--warm-white); }
.tour-head { text-align: center; max-width: 680px; margin: 0 auto 2.8rem; }
.tour-head .sub { margin-top: 1rem; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; }
.tabs { display: flex; flex-direction: column; gap: 0.4rem; }
.tab { display: grid; grid-template-columns: 28px 1fr; gap: 0.8rem; padding: 0.95rem 1rem; border-radius: 12px; border: 1px solid transparent; }
.tab.on { background: var(--sand-light); border-color: var(--sand-dark); }
.tab-n { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--amber); padding-top: 0.2rem; }
.tab b { display: block; font-size: 1rem; font-weight: 600; color: var(--warm-black); }
.tab span { font-size: 0.86rem; color: var(--earth); line-height: 1.5; }
.tour-note { margin-top: 0.9rem; font-size: 0.78rem; color: var(--warm-gray); font-style: italic; }

/* Drawn Studio window (placeholder for real screenshots) */
.win { width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(44,36,22,0.18); border: 1px solid var(--sand-dark); background: var(--s-bg); font-family: var(--font-app); color: var(--s-ink); }
.win-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; background: #ebe5da; border-bottom: 1px solid var(--s-border); }
.wdot { width: 10px; height: 10px; border-radius: 50%; background: #d5cdbd; }
.win-url { margin-left: 0.6rem; flex: 1; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 6px; font-size: 11px; color: var(--s-ink3); padding: 0.22rem 0.6rem; }
.app { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 420px; }
.app-side { background: var(--s-surface); border-right: 1px solid var(--s-border); padding: 0.9rem 0.7rem; }
.app-logo { font-size: 12px; font-weight: 600; color: var(--s-ink); line-height: 1.2; padding: 0.2rem 0.5rem 0.8rem; }
.app-logo em { font-style: italic; font-family: var(--font-display); font-weight: 500; color: var(--s-gold); }
.app-logo small { display: block; font-size: 8.5px; font-weight: 400; color: var(--s-ink3); letter-spacing: 0.04em; margin-top: 2px; }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-ni { font-size: 10.5px; color: var(--s-ink2); padding: 0.34rem 0.55rem; border-radius: 6px; display: flex; align-items: center; gap: 0.45rem; }
.app-ni i { width: 6px; height: 6px; border-radius: 2px; background: var(--s-border); display: inline-block; }
.app-ni.on { background: var(--s-gold-pale); color: var(--s-ink); font-weight: 600; }
.app-ni.on i { background: var(--s-gold); }
.app-main { padding: 1rem 1.1rem; }
.app-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.app-title { font-size: 17px; font-weight: 600; color: var(--s-ink); }
.app-btn { font-size: 10.5px; font-weight: 600; background: var(--s-ink); color: #fff; border-radius: 100px; padding: 0.35rem 0.8rem; }
.app-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.app-stat { background: #fff; border: 1px solid var(--s-border); border-radius: 10px; padding: 0.6rem 0.75rem; }
.app-stat b { display: block; font-size: 18px; font-weight: 600; color: var(--s-ink); line-height: 1.1; }
.app-stat span { font-size: 9.5px; color: var(--s-ink3); text-transform: uppercase; letter-spacing: 0.06em; }
.app-card { background: #fff; border: 1px solid var(--s-border); border-radius: 12px; overflow: hidden; }
.app-card-h { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; font-size: 11.5px; font-weight: 600; color: var(--s-ink); border-bottom: 1px solid var(--s-border); background: var(--s-surface); }
.app-card-h span { font-weight: 400; color: var(--s-ink3); font-size: 10px; }
.app-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 0.7rem; align-items: center; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--s-surface2); }
.app-row:last-child { border-bottom: none; }
.app-thumb { width: 54px; height: 32px; border-radius: 5px; background: linear-gradient(135deg, #9fb3c4, #6b8ba4); }
.app-thumb.t2 { background: linear-gradient(135deg, #c9a77a, #8b6a3e); }
.app-thumb.t3 { background: linear-gradient(135deg, #8aa28a, #4f6b55); }
.app-thumb.t4 { background: linear-gradient(135deg, #d7b48a, #a3723f); }
.app-row-t b { display: block; font-size: 11px; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-row-t span { font-size: 9.5px; color: var(--s-ink3); }
.app-chips { display: flex; gap: 0.35rem; }
.chip { font-size: 9px; font-weight: 600; border-radius: 100px; padding: 0.18rem 0.5rem; background: var(--s-surface2); color: var(--s-ink2); white-space: nowrap; }
.chip.ok { background: var(--s-green-bg); color: var(--s-green); }
.chip.ed { background: #fdf0dc; color: #a4651a; }
.plat { display: flex; gap: 0.3rem; }
.plat i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; opacity: 0.95; }
.plat i.off { opacity: 0.2; }
.fb { background: var(--fb); } .yt { background: var(--yt); } .ig { background: var(--ig); } .tt { background: var(--tt); }

/* CLIP MACHINE — rebuilt to Travis's reference (2026-08-22) */
.cm { padding: 4.5rem 0 5rem; background: linear-gradient(180deg, #FBF7F0 0%, #F6F0E6 100%); border-top: 1px solid var(--sand-dark); }
.cm-head { text-align: center; max-width: 840px; margin: 0 auto; }
.cm-spark { width: 26px; height: 26px; margin: 0 auto 0.9rem; color: #C4954A; display: block; }
.cm-head .lbl { letter-spacing: 0.22em; }
.cm-head h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.cm-head p { font-size: 1.08rem; line-height: 1.75; color: var(--earth-dark); margin: 1.2rem auto 0; max-width: 780px; }
.cm-head p strong { color: var(--warm-black); }
.cm-rule { width: 100%; max-width: 760px; height: 1px; background: linear-gradient(90deg, transparent, #D9CDB8 20%, #D9CDB8 80%, transparent); margin: 2rem auto 1.8rem; }
.cm-stats { display: flex; justify-content: center; align-items: center; gap: 0; }
.cm-stat { display: flex; align-items: center; gap: 0.8rem; padding: 0 2rem; border-left: 1px solid #E2D8C6; }
.cm-stat:first-child { border-left: none; }
.cm-stat-ic { width: 48px; height: 48px; border-radius: 50%; background: #F1E9DB; border: 1px solid #E4DACA; display: flex; align-items: center; justify-content: center; color: #B8925A; flex-shrink: 0; }
.cm-stat-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-stat b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; color: var(--warm-black); line-height: 1.05; white-space: nowrap; }
.cm-stat span { font-size: 0.8rem; color: var(--warm-gray); display: block; margin-top: 0.15rem; }

.cmx { margin-top: 3rem; background: #FFFFFF; border: 1px solid rgba(139,115,85,0.12); border-radius: 24px; box-shadow: 0 24px 70px rgba(74,60,42,0.10); padding: 2.2rem 2.4rem 2rem; }
.cmx-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) 44px minmax(0, 2fr) 44px minmax(0, 1.8fr) 44px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 0.9rem; row-gap: 0.7rem; align-items: stretch; }
.cmx-col { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; justify-items: center; align-items: start; row-gap: 0.7rem; min-width: 0; }
.cmx-lbl { grid-row: 1; }
.cmx-col > .cmx-cap:not(:empty), .cmx-col > b, .cmx-col > .cmx-clipcap { grid-row: 2; }
.cmx-cap:empty { display: none; }
.cmx-col > .cmx-clipcap { width: 100%; }
.cmx-col > b { text-align: center; }
.cmx-body { grid-row: 3; align-self: center; }
.cmx-lbl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--earth-dark); text-align: center; white-space: nowrap; }
.cmx-body { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.cmx-cap { text-align: center; }
.cmx-cap small { display: block; font-size: 0.82rem; color: var(--warm-gray); }
.cmx-cap b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--warm-black); margin-top: 0.15rem; }
.cmx-arrow { grid-row: 3; align-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #CDB893; background: #FFFDF9; display: flex; align-items: center; justify-content: center; color: #B8925A; margin: 0; }
.cmx-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cmx-video { position: relative; width: 100%; max-width: 250px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 14px 34px rgba(74,60,42,0.22); }
.cmx-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmx-video .play-btn { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(254,252,249,0.22); border: 2px solid rgba(255,255,255,0.85); box-shadow: none; color: #fff; backdrop-filter: blur(2px); }
.cmx-video .play-btn svg { width: 22px; height: 22px; margin-left: 3px; }

.cmx-clips { display: flex; gap: 0.45rem; justify-content: center; width: 100%; }
.cmx-clip { position: relative; flex: 1 1 0; min-width: 52px; max-width: 84px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 10px 26px rgba(74,60,42,0.22); }
.cmx-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmx-clip .dur { position: absolute; left: 6px; bottom: 22px; font-family: var(--font-app); font-size: 0.62rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.cmx-clip .cc { position: absolute; left: 6px; bottom: 6px; font-size: 0.5rem; font-weight: 700; color: #111; background: rgba(255,255,255,0.9); border-radius: 3px; padding: 0 3px; line-height: 1.4; }
.cmx-clip .chev { position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; color: #fff; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cmx-clipcap { display: flex; align-items: center; gap: 0.8rem; justify-content: center; width: 100%; }
.cmx-clipcap::before, .cmx-clipcap::after { content: ''; flex: 1; max-width: 90px; height: 1px; background: #D9CDB8; }
.cmx-clipcap b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--warm-black); white-space: nowrap; }
.cmx-clipcap .sp { width: 14px; height: 14px; color: #C4954A; }

.cmx-plats { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 340px; position: relative; padding-left: 18px; }
.cmx-plats::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: 14px; border-left: 1.5px dashed #D2BE9A; }
.cmx-plat { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; background: #FFFFFF; border: 1px solid #EAE2D4; border-radius: 12px; padding: 0.6rem 0.9rem; box-shadow: 0 4px 14px rgba(74,60,42,0.06); }
.cmx-plat::before { content: ''; position: absolute; left: -14px; top: 50%; width: 12px; border-top: 1.5px dashed #D2BE9A; }
.cmx-plat img { width: 26px; height: 26px; display: block; border-radius: 6px; }
.cmx-plat span { font-size: 0.88rem; font-weight: 500; color: var(--warm-black); }
.cmx-sq { display: flex; gap: 6px; flex-shrink: 0; }
.cmx-sq i { width: 16px; height: 16px; border-radius: 4px; display: block; flex: none; }
.cmx-sq { background: transparent; }
.cmx-sq.pfb i { background: #1877F2; } .cmx-sq.pyt i { background: #E53935; } .cmx-sq.pig i { background: #C13584; } .cmx-sq.ptt i { background: #1C1C1C; }

.cmx-stack { position: relative; width: 170px; height: 220px; margin: 0.4rem 0 0.6rem; }
.cmx-stack i { position: absolute; inset: 0; border-radius: 18px; background: #FFFDF8; border: 1px solid #EAE0CE; box-shadow: 0 10px 28px rgba(74,60,42,0.10); }
.cmx-stack i:nth-child(1) { transform: translate(12px, 12px); opacity: 0.55; }
.cmx-stack i:nth-child(2) { transform: translate(6px, 6px); opacity: 0.8; }
.cmx-stack .face { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(180deg, #FFFDF8, #F6EFE2); border: 1px solid #E6DCC8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; text-align: center; padding: 1rem; }
.cmx-stack .big { font-family: var(--font-display); font-size: 3.1rem; font-weight: 500; color: #B8925A; line-height: 1; }
.cmx-stack .posts { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--earth-dark); }
.cmx-stack .sp { width: 14px; height: 14px; color: #C4954A; margin: 0.2rem 0; }
.cmx-stack small { font-size: 0.78rem; color: var(--warm-gray); line-height: 1.4; }

@media (max-width: 1100px) {
  .cmx-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.6rem; }
  .cmx-col { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; grid-row: auto; }
  .cmx-arrow { grid-row: auto; margin: 0 auto; transform: rotate(90deg); }
  .cmx-clip { max-width: 70px; }
  .cm-stats { flex-wrap: wrap; gap: 1rem 0; }
  .cm-stat { padding: 0 1.2rem; }
}
@media (max-width: 600px) {
  .cmx { padding: 1.4rem 1rem; border-radius: 18px; }
  .cmx-lbl { white-space: normal; }
  .cm-stat { border-left: none; padding: 0.4rem 0.8rem; }
}

/* CURRICULUM (dark) */
.curr { padding: 4.5rem 0; background: var(--earth-deep); color: var(--sand); }
.curr-head { text-align: center; margin-bottom: 2.5rem; }
.curr h2 { color: var(--sand-light); }
.curr .lbl { color: var(--amber-light); }
.curr .sub { color: var(--warm-gray-light); max-width: 520px; margin: 0.8rem auto 0; }
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mod { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 1.4rem 1.4rem 1.2rem; }
.mod-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.mod-n { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--amber); }
.mod .ic { color: var(--amber); width: 22px; height: 22px; stroke-width: 1.8; }
.mod h3 { font-size: 1.2rem; color: var(--sand-light); margin-bottom: 0.4rem; }
.mod p { font-size: 0.86rem; line-height: 1.6; color: var(--warm-gray-light); margin-bottom: 0.7rem; }
.mod ul { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.mod li { font-size: 0.82rem; color: var(--sand-light); display: flex; gap: 0.5rem; align-items: baseline; }
.mod li::before { content: '→'; color: var(--amber); font-weight: 600; flex-shrink: 0; }
.mod.cap { border-color: rgba(196,149,74,0.35); background: rgba(196,149,74,0.08); }


/* CURRICULUM TABS — replicated from the live site (tcu.css) */
.tcu-tabs { max-width: 850px; margin: 0 auto; position: relative; }
.tcu-tabs-nav { display: flex; gap: 0; position: relative; border-bottom: 1px solid rgba(255,255,255,0.08); overflow-x: auto; scrollbar-width: none; }
.tcu-tabs-nav::-webkit-scrollbar { display: none; }
.tcu-tab-btn { flex: 1; min-width: 0; padding: 1.2rem 0.5rem 1.4rem; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; font-family: var(--font-body); }
.tcu-tab-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background 0.3s ease; }
.tcu-tab-btn.active::after { background: var(--amber); box-shadow: 0 0 12px rgba(196,149,74,0.4); }
.tcu-tab-num { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: rgba(196,149,74,0.5); transition: all 0.3s ease; }
.tcu-tab-name { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--sand); letter-spacing: 0.03em; transition: all 0.3s ease; }
.tcu-tab-btn:hover .tcu-tab-num { color: var(--amber); }
.tcu-tab-btn:hover .tcu-tab-name { color: #fff; }
.tcu-tab-btn.active .tcu-tab-num { color: var(--amber); font-size: 0.95rem; }
.tcu-tab-btn.active .tcu-tab-name { color: #fff; font-weight: 700; }
.tcu-tab-btn-cap.active .tcu-tab-num { color: var(--amber-light); }
.tcu-tabs-content { position: relative; min-height: 320px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-top: none; border-radius: 0 0 16px 16px; }
.tcu-tab-panel { padding: 2.5rem 3rem; }
.tcu-tab-inner { display: grid; grid-template-columns: 1fr 220px; gap: 2.5rem; align-items: center; }
.tcu-tab-text h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--sand-light); margin-bottom: 0.8rem; }
.tcu-tab-text p { font-size: 0.92rem; line-height: 1.7; color: var(--warm-gray-light); margin-bottom: 1.5rem; }
.tcu-tab-lessons { display: flex; flex-direction: column; gap: 0.6rem; }
.tcu-tab-lesson { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; color: var(--sand-light); font-weight: 400; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.tcu-tab-lesson::before { content: '→'; color: var(--amber); font-weight: 600; font-size: 0.85rem; flex-shrink: 0; }
.tcu-tab-lesson:last-child { border-bottom: none; }
.tcu-tab-visual { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 0.5rem; }
.tcu-tab-icon-wrap { width: 90px; height: 90px; border-radius: 50%; background: rgba(196,149,74,0.06); border: 1.5px solid rgba(196,149,74,0.15); display: flex; align-items: center; justify-content: center; }
.tcu-tab-icon-wrap svg { width: 36px; height: 36px; stroke: #C4954A; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tcu-tab-icon-cap { background: rgba(196,149,74,0.1); border-color: rgba(196,149,74,0.3); box-shadow: 0 0 30px rgba(196,149,74,0.1); }
.tcu-tab-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.tcu-tab-tags span { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); background: rgba(196,149,74,0.08); border: 1px solid rgba(196,149,74,0.15); padding: 0.25rem 0.6rem; border-radius: 100px; }
.tcu-tab-arrows { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; margin-top: 0.8rem; position: relative; z-index: 2; }
.tcu-tab-arrow { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: var(--sand); }
.tcu-tab-arrow:hover { background: rgba(196,149,74,0.15); border-color: var(--amber); color: var(--amber); transform: scale(1.08); }
.tcu-tab-arrow.disabled { opacity: 0.2; pointer-events: none; }
.tcu-tab-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tcu-tab-counter { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--warm-gray-light); letter-spacing: 0.05em; }
@media (max-width: 700px) {
  .tcu-tab-btn { padding: 1rem 0.3rem 1.2rem; min-width: 60px; }
  .tcu-tab-name { font-size: 0.68rem; }
  .tcu-tab-panel { padding: 1.8rem 1.5rem; }
  .tcu-tab-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .tcu-tab-icon-wrap { width: 60px; height: 60px; }
  .tcu-tab-icon-wrap svg { width: 26px; height: 26px; }
  .tcu-tab-text h3 { font-size: 1.25rem; }
}

/* ALREADY A CREATOR (photo band) */
.creators { position: relative; padding: 5rem 0; background: #2b2418 url(/images/landing/course-hero.jpg) center 40% / cover no-repeat; color: var(--sand-light); }
.creators::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,24,14,0.88) 0%, rgba(30,24,14,0.74) 55%, rgba(30,24,14,0.55) 100%); }
.creators .wrap { position: relative; z-index: 1; }
.creators .lbl { color: var(--amber-light); }
.creators h2 { color: var(--sand-light); max-width: 760px; }
.creators .sub { color: rgba(245,240,232,0.85); max-width: 640px; margin-top: 1rem; }
.cr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2.2rem 0 2rem; }
.cr-card { background: rgba(254,252,249,0.08); border: 1px solid rgba(254,252,249,0.18); border-radius: 14px; padding: 1.3rem 1.3rem 1.2rem; backdrop-filter: blur(6px); }
.cr-card .ic { color: var(--amber-light); width: 22px; height: 22px; margin-bottom: 0.6rem; }
.cr-card b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--sand-light); margin-bottom: 0.35rem; }
.cr-card span { font-size: 0.88rem; line-height: 1.6; color: rgba(245,240,232,0.82); }
.cr-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cr-actions small { font-size: 0.82rem; color: rgba(245,240,232,0.7); }

/* FIT */
.fit { padding: 4.5rem 0; background: var(--warm-white); }
.fit-head { text-align: center; margin-bottom: 2.5rem; }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2.5rem; max-width: 980px; margin: 0 auto; }
.fear { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; }
.fear-ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(138,154,123,0.12); display: flex; align-items: center; justify-content: center; color: var(--sage); }
.fear-w { font-size: 0.8rem; font-weight: 500; color: var(--warm-gray); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.fear-a { font-size: 0.98rem; color: var(--earth-dark); line-height: 1.55; font-weight: 500; }
.fear-a strong { color: var(--warm-black); }
.fit-disc { max-width: 980px; margin: 2.2rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--sand-dark); font-size: 0.9rem; color: var(--warm-gray); line-height: 1.6; font-style: italic; text-align: center; }
.fit-disc strong { color: var(--earth); font-style: normal; }

/* PRICING */
.pricing { padding: 4.5rem 0; position: relative; background: #E9E1D3 url(/images/landing/patagonia-peaks.jpg) center 45% / cover no-repeat; }
.pricing::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--warm-white) 0%, rgba(254,252,249,0.62) 14%, rgba(254,252,249,0.42) 50%, rgba(254,252,249,0.62) 86%, var(--warm-white) 100%); }
.pricing .wrap { position: relative; z-index: 1; }
.pricing-head .sub { color: var(--earth-dark); }
.pricing-head { text-align: center; margin-bottom: 3rem; }
.pricing-head .sub { max-width: 520px; margin: 0.8rem auto 0; }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.card { background: var(--warm-white); border-radius: 18px; padding: 2.5rem; border: 1px solid rgba(139,115,85,0.1); position: relative; }
.card.featured { border: 2px solid var(--amber); box-shadow: 0 8px 30px rgba(196,149,74,0.12); }
.badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--amber); color: var(--warm-white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 1.2rem; border-radius: 100px; white-space: nowrap; }
.tier { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 0.6rem; }
.pname { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; color: var(--warm-black); margin-bottom: 0.3rem; }
.pdesc { font-size: 0.9rem; color: var(--warm-gray); line-height: 1.5; margin-bottom: 1.4rem; min-height: 2.7rem; }
.amount { font-family: var(--font-display); font-size: 2.9rem; font-weight: 700; color: var(--earth-deep); line-height: 1; margin-bottom: 0.2rem; }
.amount span { font-size: 1.2rem; font-weight: 400; color: var(--warm-gray); }
.period { font-size: 0.84rem; color: var(--warm-gray); margin-bottom: 1.6rem; }
.divider { height: 1px; background: var(--sand-dark); margin-bottom: 1.4rem; }
.features { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-bottom: 1.6rem; }
.features.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.4rem; }
.features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--earth-dark); line-height: 1.45; }
.features li .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--sage); stroke-width: 2.5; }
.features li strong { color: var(--warm-black); font-weight: 600; }
.after { background: var(--sand-light); border: 1px solid var(--sand-dark); border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.86rem; color: var(--earth-dark); line-height: 1.55; margin-bottom: 1.6rem; display: grid; grid-template-columns: 20px 1fr; gap: 0.7rem; align-items: start; }
.after .ic { color: var(--amber); width: 18px; height: 18px; margin-top: 2px; }
.after b { color: var(--warm-black); }
.pbtn { display: block; width: 100%; text-align: center; padding: 0.95rem; border-radius: 100px; font-size: 0.9rem; font-weight: 600; }
.pbtn.primary { background: var(--earth-deep); color: var(--warm-white); }
.pbtn.primary:hover { background: var(--amber); color: var(--warm-white); }
.pbtn.outline { background: transparent; color: var(--earth-deep); border: 1.5px solid var(--earth-deep); }
.pbtn.outline:hover { background: var(--earth-deep); color: var(--warm-white); }
.pbtn.muted { background: transparent; color: var(--warm-gray); border: 1.5px solid var(--sand-dark); }
.pbtn.muted:hover { border-color: var(--earth); color: var(--earth-dark); }
.price-note { text-align: center; font-size: 0.84rem; color: var(--warm-gray); margin-top: 1.4rem; }

/* ABOUT */
.about { padding: 4.5rem 0; background: var(--warm-white); }
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: center; }
.about-img { border-radius: 16px; aspect-ratio: 4/5; overflow: hidden; background: var(--sand); border: 1px solid var(--sand-dark); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about h2 { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: 1.5rem; }
.about p { font-size: 1.05rem; line-height: 1.75; color: var(--earth); margin-bottom: 1rem; }
.about-stats { display: flex; gap: 2.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--sand-dark); }
.about-stats b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--earth-deep); }
.about-stats span { font-size: 0.78rem; color: var(--warm-gray); }

/* FAQ */
.faq { padding: 4.5rem 0; background: var(--sand); }
.faq-head { text-align: center; margin-bottom: 3rem; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--sand-dark); }
.faq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; font-size: 1.02rem; font-weight: 500; color: var(--warm-black); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--amber); }
.faq-q .ic { width: 20px; height: 20px; color: var(--warm-gray); flex-shrink: 0; transition: transform 0.3s ease; }
.faq-item[open] .faq-q { color: var(--amber); }
.faq-item[open] .faq-q .ic { transform: rotate(45deg); }
.faq-a { font-size: 0.95rem; line-height: 1.7; color: var(--earth); padding: 0 2.5rem 1.4rem 0; }

/* FAQ closing nudge */
.faq-cta { max-width: 720px; margin: 3rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--sand-dark); text-align: center; }
.faq-cta p { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--warm-black); line-height: 1.3; margin-bottom: 1.3rem; }
.faq-cta p em { font-style: italic; color: var(--earth); }

/* FINAL CTA */
.final { padding: 5rem 0; background: var(--earth-deep); text-align: center; position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(196,149,74,0.1) 0%, transparent 70%); }
.final h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--sand-light); margin-bottom: 1rem; position: relative; }
.final h2 em { color: var(--amber-light); }
.final p { font-size: 1.1rem; color: var(--warm-gray-light); max-width: 480px; margin: 0 auto 2.5rem; line-height: 1.65; position: relative; }
.final .btn-amber { position: relative; }

/* FOOTER */
.footer { background: var(--warm-black); padding: 3rem 0; text-align: center; }
.footer p { font-size: 0.82rem; color: rgba(245,240,232,0.45); margin-bottom: 0.5rem; }
.footer a { color: rgba(245,240,232,0.65); }
.footer a:hover { color: var(--amber); }

/* HERO VIDEO (VSL) */
.hero-media { position: relative; width: 100%; max-width: 550px; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(30,24,14,0.28); }
.hero-media img { width: 100%; display: block; }
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-btn { width: 78px; height: 78px; border-radius: 50%; background: rgba(254,252,249,0.94); box-shadow: 0 12px 34px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; color: var(--earth-deep); }
.play-btn svg { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 4px; }
.play-tag { position: absolute; left: 14px; bottom: 12px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-white); background: rgba(44,36,22,0.55); border-radius: 100px; padding: 0.3rem 0.7rem; backdrop-filter: blur(4px); }

/* TRUST ICONS (live-site items) */
.trust-icon { width: 42px; height: 42px; color: var(--earth); margin: 0 auto 0.7rem; opacity: 0.65; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust-num.word { font-size: 1.9rem; }

/* METHOD + MACHINE — expandable points */
.mm-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: var(--amber); color: var(--warm-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(196,149,74,0.35); z-index: 2; }
.mm-plus svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; }
.mm-grid { position: relative; }
details.mm-row { display: block; padding: 0; border-top: 1px solid rgba(139,115,85,0.2); }
.mm-card.dark details.mm-row { border-top-color: rgba(255,255,255,0.12); }
details.mm-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 22px; gap: 0.8rem; align-items: start; padding: 0.75rem 0; }
details.mm-row summary::-webkit-details-marker { display: none; }
details.mm-row summary:hover b { color: var(--amber); }
.chev { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--warm-gray); margin-top: 0.25rem; transition: transform 0.25s ease; }
.mm-card.dark .chev { color: var(--warm-gray-light); }
details[open] > summary .chev { transform: rotate(180deg); }
.mm-x { padding: 0 2rem 0.9rem 2.65rem; font-size: 0.86rem; line-height: 1.6; color: var(--earth); }
.mm-ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mm-ul li { position: relative; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.5; color: var(--earth-dark); }
.mm-ul li::before { content: '→'; position: absolute; left: 0; color: var(--amber); font-weight: 600; }
.mm-card.dark .mm-ul li { color: rgba(245,240,232,0.85); }
.mm-card.dark .mm-x { color: rgba(245,240,232,0.8); }

/* STUDIO SECTION — laptop mockup */
.tour-text { max-width: 520px; }
.tour-text .sub { margin-top: 1rem; }
.tour-actions { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin: 1.6rem 0 1.4rem; }
.tour-link { font-size: 0.92rem; font-weight: 600; color: var(--earth-deep); display: inline-flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid rgba(74,60,42,0.35); padding-bottom: 2px; }
.tour-link .ic { width: 14px; height: 14px; }
.feat { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feat span { font-size: 0.8rem; font-weight: 600; color: var(--earth-dark); background: var(--sand-light); border: 1px solid var(--sand-dark); border-radius: 10px; padding: 0.5rem 0.75rem; line-height: 1.2; }
.laptop { width: 100%; max-width: 720px; margin: 0 auto; }
.lap-screen { position: relative; background: #1d1a17; border-radius: 18px 18px 8px 8px; padding: 14px 14px 18px; box-shadow: 0 34px 90px rgba(30,24,14,0.32); }
.lap-screen::before { content: ''; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #3d3631; }
.lap-display { background: var(--s-bg); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; font-family: var(--font-app); color: var(--s-ink); }
.lap-base { position: relative; height: 16px; margin: 0 -28px; background: linear-gradient(180deg, #ddd6c8 0%, #bfb7a8 100%); border-radius: 0 0 16px 16px; box-shadow: 0 14px 30px rgba(30,24,14,0.18); }
.lap-base::after { content: ''; position: absolute; top: 0; left: 50%; width: 140px; height: 6px; margin-left: -70px; background: #a69e90; border-radius: 0 0 8px 8px; }
.lap-display { aspect-ratio: 1434 / 800; }
.lap-display img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lap-display .app { min-height: 0; height: 100%; }
.lap-display .app-main { padding: 0.8rem 1rem; }
.lap-display .app-top { margin-bottom: 0.6rem; }
.lap-display .app-stats { margin-bottom: 0.6rem; }
.lap-display .app-stat { padding: 0.45rem 0.7rem; }
.lap-display .app-row { padding: 0.45rem 0.8rem; }
.lap-display .app-side { padding: 0.7rem 0.6rem; }
.lap-display .app-logo { padding: 0.1rem 0.5rem 0.6rem; }
.lap-display .app-ni { padding: 0.22rem 0.55rem; font-size: 10px; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .tour-grid { grid-template-columns: 1fr; }
  .tour-text { max-width: none; }
  .mm-plus { display: none; }
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cm-g { max-width: 720px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .hero { background-position: 18% 45%; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; padding-top: 7.5rem; gap: 2.5rem; }
  .hero-img { order: -1; }
  .hero-img img { max-width: 360px; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-chips { justify-content: center; }
  .trust-div { display: none; }
  .trust-items { gap: 2rem; }
  .problem-grid, .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .life-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .mm-grid, .cr-grid, .fit-grid, .proof-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 480px; }
  .features.two { grid-template-columns: 1fr; }
  .nav-link { display: none; }
}
@media (max-width: 700px) {
  .cm-g { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
  .cm-arr .ic { transform: rotate(90deg); }
  .cm-total { border-left: none; border-top: 1px dashed var(--sand-dark); padding-top: 0.8rem; padding-left: 0; }
  .cm-plats { width: 100%; max-width: 260px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 1.25rem; }
  .hero-grid { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav-logo { font-size: 0.9rem; }
  .nav-cta { padding: 0.6rem 0.9rem; font-size: 0.72rem; }
  .mods { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .lap-display { aspect-ratio: auto; }
  .lap-base { margin: 0 -10px; }
  .tour-actions { justify-content: flex-start; }
  .app-row { grid-template-columns: 44px minmax(0, 1fr); }
  .app-chips, .app-row .plat { display: none; }
  .app-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .about-stats { flex-direction: column; gap: 1.2rem; }
  .card { padding: 1.8rem 1.4rem; }
  .mm-card { padding: 1.6rem 1.3rem; }
  .fear { grid-template-columns: 1fr; }
  .fear-ic { display: none; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* MOBILE — centred layout (Travis, 2026-08-23): when sections stack, centre almost everything */
@media (max-width: 900px) {
  .lbl { display: block; text-align: center; }
  .tcu-page h2, .tcu-page h3 { text-align: center; }
  .sub, .life-text p, .problem-text p, .tour-text p, .about p, .cm-head p, .faq-a { text-align: center; margin-left: auto; margin-right: auto; }
  .life-text, .problem-text, .tour-text, .about-text, .cr-card, .mm-card, .card, .pricing-head, .tour-note, .price-note { text-align: center; }
  .life-text .btn, .tour-actions .btn, .about .btn { margin-left: auto; margin-right: auto; }
  .tour-actions, .hero-actions, .cr-actions { justify-content: center; text-align: center; }
  .cr-actions { flex-direction: column; gap: 0.9rem; }
  .cr-card .ic { margin-left: auto; margin-right: auto; }
  .mm-tag, .mm-card h3, .mm-lead { text-align: center; }
  .mm-foot { text-align: center; }
  .studio-tile { flex-direction: column; text-align: center; gap: 0.8rem; }
  .studio-tile > div { border-left: none; padding-left: 0; }
  .tools-wrap { align-items: center; }
  .oldway-lbl { text-align: center; }
  .about-stats { justify-content: center; text-align: center; }
  .about-stats > div { text-align: center; }
  .features li { justify-content: center; text-align: center; }
  .after { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .faq-head { text-align: center; }
  .faq-q { justify-content: center; text-align: center; gap: 0.6rem; }
  .faq-cta { text-align: center; }
  .cmx-lbl, .cmx-cap, .cmx-col > b { text-align: center; }
  .cm-head { text-align: center; }
  .footer { text-align: center; }
}
@media (max-width: 600px) {
  .tour-actions { justify-content: center; flex-direction: column; }
  .about-stats { align-items: center; }
}

/* ===================== V3 (2026-08-23) ===================== */
/* Hotel Room Trap — his combined graphic gets a wider column */
.problem-grid { grid-template-columns: 0.85fr 1.3fr; gap: 3rem; }
.scribble { margin: 0 auto; }

/* brief Method + Machine — plain beige (his call 2026-08-23); the dunes photo moved to the syllabus */
.mm3 { padding-top: 0; background: var(--sand); }
.mm3::before { display: none; }
.mm-rule { border: 0; border-top: 1px solid var(--sand-dark); max-width: 1200px; margin: 0 auto 4.5rem; position: relative; z-index: 1; }
.mm3 .mm-head { max-width: 800px; }
.mm3 .mm-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.mm3 .mm-card { padding: 2.5rem 2.5rem 2.3rem; display: flex; flex-direction: column; }
.mm-ico { width: 54px; height: 54px; border-radius: 16px; background: rgba(74,60,42,0.09); border: 1px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; color: var(--earth-deep); margin-bottom: 2.2rem; }
.mm-card.dark .mm-ico { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); color: var(--amber-light); }
.mm-ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-ico svg[fill="currentColor"] { fill: currentColor; stroke: none; }
.mm3 .mm-card h3 { font-size: 2.2rem; margin-bottom: 0.7rem; }
.mm3 .mm-lead { font-size: 1.04rem; line-height: 1.7; margin-bottom: 2rem; max-width: 470px; }
.mm-link { margin-top: auto; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; }
.mm-link:hover { color: var(--earth-deep); }
.mm-card.dark .mm-link { color: var(--amber-light); }
.mm-card.dark .mm-link:hover { color: var(--sand-light); }
.mm-link .ic { width: 16px; height: 16px; stroke-width: 2.5; }

/* TCU syllabus */
.syl { padding: 4.5rem 0 5rem; position: relative; background: #E9E1D3 url(/images/landing/desert-dunes.jpg) center 60% / cover no-repeat; border-top: 1px solid var(--sand-dark); }
.syl::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--warm-white) 0%, rgba(254,252,249,0.6) 14%, rgba(254,252,249,0.42) 50%, rgba(254,252,249,0.6) 86%, var(--warm-white) 100%); }
.syl > .wrap { position: relative; z-index: 1; }
.syl-head { text-align: center; max-width: 760px; margin: 0 auto 2.8rem; }
.syl-head h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.syl-head .sub { margin-top: 1rem; }
.syl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.syl-card { background: var(--warm-white); border: 1px solid var(--sand-dark); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.syl-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.syl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.syl-body { padding: 1.2rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.syl-num { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.6rem; }
.syl-card h3 { font-size: 1.28rem; line-height: 1.2; margin-bottom: 0.6rem; }
.syl-card p { font-size: 0.88rem; line-height: 1.55; color: var(--earth); }
.syl-more { margin-top: auto; padding-top: 1rem; }
.syl-more summary { list-style: none; cursor: pointer; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth-dark); display: inline-flex; align-items: center; gap: 0.4rem; }
.syl-more summary::-webkit-details-marker { display: none; }
.syl-more summary:hover { color: var(--amber); }
.syl-more summary .chev { width: 14px; height: 14px; margin-top: 0; }
.syl-more ul { list-style: none; margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.syl-more li { position: relative; padding-left: 1rem; font-size: 0.82rem; line-height: 1.45; color: var(--earth-dark); }
.syl-more li::before { content: '→'; position: absolute; left: 0; color: var(--amber); }
.syl-swipe { display: none; }
.syl-boot { grid-column: 1 / -1; margin-top: 0.2rem; border: 1px solid var(--amber); border-radius: 18px; background: rgba(254,252,249,0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.syl-boot summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 2rem; }
.syl-boot summary::-webkit-details-marker { display: none; }
.syl-boot .lbl { margin-bottom: 0.35rem; }
.syl-boot h3 { font-size: 1.7rem; margin-bottom: 0.3rem; }
.syl-boot p { color: var(--earth); font-size: 0.98rem; }
.syl-pill { flex-shrink: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); border: 1.5px solid var(--amber); border-radius: 100px; padding: 0.7rem 1.3rem; white-space: nowrap; }
.syl-boot[open] .syl-pill, .syl-boot summary:hover .syl-pill { background: var(--amber); color: var(--warm-white); }
.syl-boot-x { padding: 0 2rem 1.6rem; }
.syl-boot-x ul { list-style: none; border-top: 1px solid rgba(196,149,74,0.3); padding-top: 1.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2rem; }
.syl-boot-x li { position: relative; padding-left: 1rem; font-size: 0.9rem; line-height: 1.5; color: var(--earth-dark); }
.syl-boot-x li::before { content: '→'; position: absolute; left: 0; color: var(--amber); }

/* Studio workflow — interactive window mockup (pure CSS: radios + labels) */
.tour3 { position: relative; }
.tour3 .tour-step input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; left: 0; top: 0; }
.tour3 .tour-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); grid-template-areas: "intro lap" "ctrl lap"; gap: 0 3.5rem; align-items: center; }
.tour3 .tour-intro { grid-area: intro; align-self: end; }
.tour3 .tour-ctrl { grid-area: ctrl; align-self: start; }
.tour3 .tour-lap { grid-area: lap; }
.tour3 .tour-text { max-width: none; }
.tour3 .tour-text h2 { font-size: clamp(2.3rem, 3.8vw, 3.1rem); }
.tour-steps { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.6rem; }
.tour-step { display: block; position: relative; cursor: pointer; border-radius: 14px; padding: 1rem 1.2rem; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.tour-step:hover { background: rgba(74,60,42,0.04); }
.tour-step b { display: block; font-size: 1.08rem; font-weight: 600; color: var(--warm-black); }
.tour-step b i { font-style: normal; color: var(--warm-gray); font-weight: 600; margin-right: 0.5rem; }
.tour-step span { display: none; font-size: 0.9rem; color: var(--earth); line-height: 1.55; margin-top: 0.45rem; min-height: 2.8em; }
/* Edit is the default state WITHOUT relying on :checked (robust inside the canvas preview); the other radios override it.
   The radios live INSIDE their labels so focusing one never scrolls the page (no jolt), and the switch is done with :has(). */
.tour3 .tour-step:first-child { background: var(--sand-light); border-color: var(--sand-dark); box-shadow: 0 8px 24px rgba(74,60,42,0.08); }
.tour3 .tour-step:first-child span { display: block; }
.tour3:has(#ts2:checked) .tour-step:first-child, .tour3:has(#ts3:checked) .tour-step:first-child, .tour3:has(#ts4:checked) .tour-step:first-child { background: transparent; border-color: transparent; box-shadow: none; }
.tour3:has(#ts2:checked) .tour-step:first-child span, .tour3:has(#ts3:checked) .tour-step:first-child span, .tour3:has(#ts4:checked) .tour-step:first-child span { display: none; }
.tour3 .tour-step:has(#ts2:checked), .tour3 .tour-step:has(#ts3:checked), .tour3 .tour-step:has(#ts4:checked) { background: var(--sand-light); border-color: var(--sand-dark); box-shadow: 0 8px 24px rgba(74,60,42,0.08); }
.tour3 .tour-step:has(#ts2:checked) span, .tour3 .tour-step:has(#ts3:checked) span, .tour3 .tour-step:has(#ts4:checked) span { display: block; }
.tour-lap { max-width: 760px; }
.tour3 .lap-display { position: relative; aspect-ratio: 1440 / 900; }
.tour3 .lap-display img.scr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: none; }
.tour3 .lap-display img.scr-1 { display: block; }
.tour3:has(#ts2:checked) .scr-1, .tour3:has(#ts3:checked) .scr-1, .tour3:has(#ts4:checked) .scr-1 { display: none; }
.tour3:has(#ts2:checked) .scr-2, .tour3:has(#ts3:checked) .scr-3, .tour3:has(#ts4:checked) .scr-4 { display: block; }
.lap-ph { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: rgba(245,240,232,0.85); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.8; background: rgba(42,36,28,0.9); }
.lap-cap { text-align: center; margin-top: 1.2rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-gray); }
.lap-cap .wr { display: none; }
.lap-cap .wr-1 { display: inline; }
.tour3:has(#ts2:checked) .wr-1, .tour3:has(#ts3:checked) .wr-1, .tour3:has(#ts4:checked) .wr-1 { display: none; }
.tour3:has(#ts2:checked) .wr-2, .tour3:has(#ts3:checked) .wr-3, .tour3:has(#ts4:checked) .wr-4 { display: inline; }

/* CLIP ECONOMICS — redesigned to his reference (2026-08-24) */
.cm3 .cm-head h2 em { color: var(--amber); }
.cm3-sub { font-size: 1.08rem; color: var(--earth); margin-top: 1rem; }
.cm3-stats { display: flex; justify-content: center; align-items: stretch; gap: 2.4rem; margin-top: 2rem; }
.cm3-stats > div { text-align: center; }
.cm3-stats i { width: 1px; background: var(--sand-dark); }
.cm3-stats b { display: block; font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; color: var(--s-gold); line-height: 1.1; }
.cm3-stats span { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--warm-gray); line-height: 1.4; }
.cm3-card { margin-top: 3rem; background: var(--warm-white); border: 1px solid rgba(139,115,85,0.09); border-radius: 28px; box-shadow: 0 26px 70px rgba(74,60,42,0.08); padding: 2.75rem 2.5rem; }
.cm3-grid { display: grid; grid-template-columns: 1.05fr 26px 1.5fr 26px 1.35fr 26px 0.95fr; grid-template-rows: auto auto auto 1fr; gap: 0.15rem 0.9rem; }
.cm3-col { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 4; text-align: center; }
.cm3-n { grid-row: 1; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--amber); letter-spacing: 0.08em; }
.cm3-t { grid-row: 2; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-black); margin-top: 0.4rem; }
.cm3-c { grid-row: 3; font-size: 0.85rem; color: var(--warm-gray); line-height: 1.45; margin-top: 0.45rem; }
.cm3-media { grid-row: 4; align-self: center; justify-self: stretch; margin-top: 1.6rem; }
.cm3-arrow { grid-row: 4; align-self: center; color: var(--amber); display: flex; justify-content: center; margin-top: 1.6rem; }
.cm3-arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm3-video { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(30,24,14,0.18); }
.cm3-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm3-video .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; }
.cm3-video .play-btn svg { width: 18px; height: 18px; margin-left: 3px; }
.cm3-video .dur, .cm3-clip .dur { position: absolute; left: 8px; bottom: 8px; font-size: 0.62rem; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); padding: 2px 6px; border-radius: 5px; letter-spacing: 0.04em; }
.cm3-clips { display: flex; gap: 7px; }
.cm3-clip { flex: 1; position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(30,24,14,0.16); }
.cm3-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm3-clip .dur { left: 4px; bottom: 17px; padding: 1px 3px; font-size: 0.48rem; border-radius: 3px; }
.cm3-clip .cc { position: absolute; left: 4px; bottom: 4px; font-size: 0.42rem; font-weight: 800; color: #fff; background: rgba(0,0,0,0.6); padding: 1px 3px; border-radius: 3px; letter-spacing: 0.06em; }
.cm3-plats { display: grid; gap: 0.55rem; }
.cm3-plat { display: flex; align-items: center; gap: 0.55rem; background: #fff; border: 1px solid rgba(139,115,85,0.08); border-radius: 12px; padding: 0.6rem 0.8rem; box-shadow: 0 5px 16px rgba(74,60,42,0.06); }
.cm3-plat img { width: 20px; height: 20px; }
.cm3-plat > span:first-of-type { font-size: 0.85rem; font-weight: 600; color: var(--warm-black); }
.cm3-sq { display: flex; gap: 4px; margin-left: auto; }
.cm3-sq i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.cm3-sq.pfb i { background: var(--fb); } .cm3-sq.pyt i { background: var(--yt); } .cm3-sq.pig i { background: var(--ig); } .cm3-sq.ptt i { background: var(--tt); }
.cm3-total { background: linear-gradient(160deg, #FDFBF5 0%, #F3EBDB 100%); border: 1px solid rgba(196,149,74,0.35); border-radius: 20px; padding: 2rem 1.2rem; text-align: center; box-shadow: 0 12px 32px rgba(74,60,42,0.08); }
.cm3-total b { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 700; color: var(--s-gold); line-height: 0.95; letter-spacing: -0.02em; }
.cm3-total .posts { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--warm-black); margin-top: 0.6rem; }
.cm3-total .sp { display: block; width: 14px; height: 14px; margin: 0.7rem auto 0; color: var(--amber); }
.cm3-total .sp svg { width: 14px; height: 14px; display: block; }
.cm3-total small { display: block; margin-top: 0.7rem; font-size: 0.8rem; color: var(--earth); line-height: 1.4; }
@media (max-width: 1100px) {
  .cm3-stats { flex-wrap: wrap; gap: 1.4rem 2.5rem; }
  .cm3-stats i { display: none; }
  .cm3-grid { display: flex; flex-direction: column; gap: 2.25rem; }
  .cm3-col { display: block; }
  .cm3-media { margin-top: 1.1rem; }
  .cm3-arrow { transform: rotate(90deg); margin: -0.8rem 0; }
  .cm3-card { padding: 2rem 1.5rem; }
  .cm3-video, .cm3-clips, .cm3-plats, .cm3-total { max-width: 420px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 1100px) {
  .syl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour3 .tour-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "lap" "ctrl"; gap: 2rem 0; }
  .tour3 .tour-intro, .tour3 .tour-ctrl { align-self: auto; }
  .tour-steps { margin-top: 0; }
  .tour-lap { margin: 0 auto; }
}
@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .scribble { margin: 0 -1rem; width: auto; }
  /* module cards become a swipe carousel on phones (scroll-snap, no script) */
  .syl-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0.9rem; margin: 0 -2rem; padding: 0.25rem 2rem 1rem; scrollbar-width: none; }
  .syl-grid::-webkit-scrollbar { display: none; }
  .syl-card, .syl-boot { flex: 0 0 min(82vw, 340px); scroll-snap-align: center; }
  .syl-boot { margin-top: 0; display: flex; flex-direction: column; }
  .syl-boot summary { flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2rem; padding: 1.6rem 1.25rem; }
  .syl-boot .lbl { text-align: center; }
  .syl-boot-x { padding: 0 1.25rem 1.4rem; }
  .syl-swipe { display: block; text-align: center; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-gray); margin-top: 0.2rem; }
  .syl-body { align-items: center; text-align: center; }
  .syl-more ul { display: inline-flex; flex-direction: column; text-align: left; }
  .syl-boot summary { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .syl-boot-x ul { grid-template-columns: 1fr; }
  .tour-steps { text-align: left; }
  .mm3 .mm-card { align-items: center; text-align: center; }
  .mm-link { align-self: center; }
}
@media (max-width: 600px) {
  .syl-grid { margin: 0 -1.25rem; padding: 0.25rem 1.25rem 1rem; }
}

/* two-card pricing (his pick, 2026-08-24) */
.price-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }
@media (max-width: 900px) {
  .price-grid.two { grid-template-columns: 1fr; max-width: 480px; }
}