/* Self-hosted Poppins (was Google Fonts; removes render-blocking 3rd-party + privacy leak). font-display:swap. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/assets/fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/assets/fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Titan Network — shared site styles. Depends on design-system/tokens.css */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg-base); }
body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-body); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--titan-gold); color: var(--titan-black); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.measure { max-width: var(--measure); }
.eyebrow { font-size: var(--t-eyebrow); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--text-gold); margin-bottom: var(--sp-3); display: inline-flex; align-items: center; gap: 0.6rem; }
.eyebrow::before { content:""; width: 28px; height: 1px; background: var(--titan-gold); opacity: 0.6; }
h1,h2,h3 { color: var(--text-strong); font-weight: var(--w-black); letter-spacing: var(--track-tight); line-height: var(--lh-snug); }

#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--titan-gold); z-index: 100; transition: width 90ms linear; }

/* skip-to-content link: first focusable, hidden until keyboard focus (WCAG bypass-blocks) */
.skip-link { position: fixed; top: 0; left: 0; z-index: 200; padding: 0.7rem 1.1rem; background: var(--titan-gold); color: var(--titan-black); font-weight: var(--w-bold); font-size: var(--t-sm); border-radius: 0 0 var(--r-sm) 0; transform: translateY(-130%); transition: transform var(--dur-fast) var(--ease-out); }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
body > header { position: sticky; top: 0; z-index: 80; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base); border-bottom: 1px solid transparent; }
header.scrolled { background: rgba(17,17,17,0.82); backdrop-filter: blur(12px); border-bottom-color: var(--border-hair); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand img.logo { height: 30px; width: auto; display: block; }
footer .brand img.logo { height: 26px; }
.nav-links { display: flex; gap: 2.2rem; font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--text-body); }
.nav-links a { position: relative; transition: color var(--dur-fast) var(--ease-out); }
/* underline affordance is for text links only; exclude buttons (.btn) or the absolute underline
   pseudo collides with the CTA arrow ::after and ejects the arrow below the mobile Apply button */
.nav-links a:not(.btn)::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background: var(--titan-gold); transition: width var(--dur-base) var(--ease-out); }
.nav-links a:hover { color: #fff; } .nav-links a:not(.btn):hover::after { width: 100%; }
.nav-links a.active { color:#fff; } .nav-links a:not(.btn).active::after { width:100%; }
@media (max-width: 900px){ .nav-links { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--r-sm); transition: transform var(--dur-slow) var(--ease-pop), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast), color var(--dur-fast); will-change: transform; cursor: pointer; background: transparent; border: 0; font-family: inherit; }
.btn-cta { background: var(--cta); color: #fff; padding: 0.95rem 2.2rem; font-size: 1.0rem; box-shadow: var(--glow-cta); }
.btn-cta:hover { background: var(--cta-hover); transform: translateY(-2px); }
.btn-sm { padding: 0.6rem 1.25rem; font-size: 0.8rem; }
.btn-ghost { border: 1.5px solid var(--border-gold); color: var(--titan-gold); padding: 0.85rem 1.8rem; font-size: 0.9rem; }
.btn-ghost:hover { background: var(--titan-gold); color: var(--titan-black); transform: translateY(-2px); }
/* forward arrow on primary CTAs (not the small nav button) */
.btn-cta:not(.btn-sm)::after, .btn-ghost::after { content: "\2192"; font-size: 1.05em; line-height: 1; margin-left: 0.1em; transition: transform var(--dur-base) var(--ease-out); }
.btn-cta:not(.btn-sm):hover::after, .btn-ghost:hover::after { transform: translateX(4px); }
.cta-note { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--sp-2); }

/* hero sits a touch under full-viewport so the next section peeks above the fold,
   killing the "false bottom" (NN/g) and cueing the scroll. ~15svh of the next
   section shows on load. */
/* content-driven hero: hugs its content with generous, capped padding so it never
   floats in a tall empty box (the "lacking structure" / false-bottom problem on
   short-content pages). The next section then flows right below, in view. */
.hero { position: relative; min-height: 28rem; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(2.25rem, 5vh, 4.5rem); padding-bottom: clamp(2.5rem, 5.5vh, 5rem); overflow: hidden; }
/* when a plain dark .block follows the hero (e.g. amazon, omni), tighten its top so
   its heading peeks above the fold instead of leaving an empty dark band. Pages whose
   next section is the stats/marquee band already peek, so they are not affected. */
.hero:not(.compact) + section.block { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* utility/content pages (legal, about, blog hub): keep the hero compact so the page
   content sits near the fold instead of floating in a full viewport */
.hero.compact { min-height: auto; justify-content: flex-start; }
.hero::before { content:""; position:absolute; inset:0; background: var(--light-gold-top), var(--light-red-corner); pointer-events:none; z-index:-1; }
.hero h1 { font-size: var(--t-hero); line-height: var(--lh-tight); max-width: 16ch; }
.hero .sub { font-size: var(--t-lead); color: var(--text-body); max-width: 52ch; margin-top: var(--sp-4); }
.hero .actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-5); }
.chip { font-size: 0.78rem; font-weight: var(--w-semi); color: rgba(255,255,255,0.72); border: 1px solid var(--border-hair); border-radius: var(--r-pill); padding: 0.45rem 1rem; }
.chip b { color: var(--titan-gold); font-weight: var(--w-bold); }
/* hero with a product demo: copy + video side by side (desktop), stacked with the
   video directly under the headline so it sits above the fold (mobile) */
.hero-demo .hero-demo-grid { display:grid; grid-template-columns:1.04fr 0.96fr; column-gap:clamp(2rem,5vw,4rem); row-gap:var(--sp-5); align-items:center; }
/* the demo is the portrait (9:16) cut on every viewport, a vertical player on the
   hero right; capped so it clears the fold on desktop */
.hero-media .video-card { aspect-ratio:9/16; width:100%; max-width:340px; margin-inline:auto; }
/* smaller than the single-column hero so copy + CTA + video all clear the fold */
.hero-demo h1 { font-size:clamp(2.1rem,5vw,3.9rem); max-width:14ch; }
.hero-demo .sub { margin-top:var(--sp-3); max-width:42ch; }
.hero-proof { font-size:var(--t-sm); color:var(--text-muted); margin-top:var(--sp-3); max-width:46ch; }
.hero-proof b { color:#fff; }
@media (max-width:900px){ .hero-demo .hero-demo-grid { grid-template-columns:1fr; } }
@media (max-width:640px){
  .hero-demo h1 { font-size:2rem; }
  .hero-media .video-card { max-width:300px; }
  .hero-media { margin-top:var(--sp-2); }
  .hero-proof { text-align:center; margin-inline:auto; }
}

.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(110%); transition: transform 0.9s var(--ease-reveal); }
.loaded .reveal-line > span { transform: translateY(0); }
.loaded .reveal-line:nth-child(2) > span { transition-delay: 90ms; }
.loaded .reveal-line:nth-child(3) > span { transition-delay: 180ms; }
.hero .sub, .hero .actions, .hero .chips { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal); }
.loaded .hero .sub { opacity:1; transform:none; transition-delay: 360ms; }
.loaded .hero .actions { opacity:1; transform:none; transition-delay: 460ms; }
.loaded .hero .chips { opacity:1; transform:none; transition-delay: 560ms; }

.marquee { border-block: 1px solid var(--border-hair); background: var(--bg-surface); overflow: hidden; padding-block: 1.1rem; }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: scrollx 38s linear infinite; }
.marquee span { font-size: 0.95rem; font-weight: var(--w-semi); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; }
.marquee span::before { content: "\2022"; color: var(--titan-gold); margin-right: 3rem; }
@keyframes scrollx { to { transform: translateX(-50%); } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: var(--sp-6); border-bottom: 1px solid var(--border-hair); text-align: center; }
.stat .num { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: var(--w-black); color: var(--titan-gold); letter-spacing: -0.02em; line-height: 1; }
.stat .lbl { font-size: var(--t-sm); color: var(--text-muted); margin-top: 0.5rem; }
@media (max-width:680px){ .stats { grid-template-columns: repeat(2,1fr); gap: 2rem; } }

section.block { padding-block: var(--sp-section); }
.surface { background: var(--bg-surface); border-block: 1px solid var(--border-hair); }
.section-head { display: flex; align-items: baseline; gap: 1.5rem; }
.section-num { font-size: 0.85rem; font-weight: var(--w-bold); color: var(--titan-gold-dark); letter-spacing: 0.1em; }
h2.big { font-size: var(--t-h1); max-width: 22ch; }
.lead { font-size: var(--t-lead); color: var(--text-body); max-width: 54ch; margin-top: var(--sp-3); }
.body-blocks p { margin-top: var(--sp-3); }
.gold-rule { width: 56px; height: 2px; background: var(--titan-gold); border-radius: 2px; }
.center { text-align:center; } .mt5 { margin-top: var(--sp-5); } .mt6 { margin-top: var(--sp-6); }

.r { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); }
.r.in { opacity: 1; transform: none; }
.rg > .r:nth-child(2){ transition-delay: 80ms; } .rg > .r:nth-child(3){ transition-delay: 160ms; }
.rg > .r:nth-child(4){ transition-delay: 240ms; } .rg > .r:nth-child(5){ transition-delay: 320ms; }
.rg > .r:nth-child(6){ transition-delay: 400ms; }

.split.align-top { align-items: start; }
.brain-ratio { margin: var(--sp-4) 0; max-width: 30rem; }
.brain-ratio-bar { display: flex; gap: 3px; height: 0.55rem; }
.brain-ratio-bar span { display: block; border-radius: var(--r-pill); }
.brain-ratio-bar .seg-skills { flex: 0 0 10%; background: var(--border-soft); }
.brain-ratio-bar .seg-brain { flex: 1; background: var(--titan-gold); }
.brain-ratio-keys { display: flex; justify-content: space-between; margin-top: 0.65rem; font-size: var(--t-sm); color: var(--text-muted); }
.brain-ratio-keys .rk b { font-size: 1.05rem; font-weight: var(--w-black); margin-right: 0.3rem; }
.brain-ratio-keys .rk-skills b { color: var(--text-body); }
.brain-ratio-keys .rk-brain, .brain-ratio-keys .rk-brain b { color: var(--text-gold); }
.moat-list { margin-top: var(--sp-5); display: grid; gap: 1px; background: var(--border-hair); border: 1px solid var(--border-hair); border-radius: var(--r-md); overflow: hidden; }
.moat { background: var(--bg-base); padding: 1.6rem 1.8rem; display: flex; gap: 1.25rem; align-items: flex-start; }
.moat .mk { font-size: 0.8rem; font-weight: var(--w-bold); color: var(--titan-gold); min-width: 1.5rem; }
.moat h3 { font-size: 1.15rem; } .moat p { font-size: var(--t-sm); margin-top: 0.25rem; }
blockquote { margin-top: var(--sp-5); border-left: 2px solid var(--titan-gold); padding-left: 1.5rem; font-size: clamp(1.25rem, 2.5vw, 1.7rem); font-weight: var(--w-semi); color: #fff; line-height: 1.3; max-width: 30ch; }

.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; margin-top: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: var(--sp-6); }
@media (max-width:900px){ .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width:760px){ .grid-2 { grid-template-columns: 1fr; } }
@media (max-width:600px){ .grid-3 { grid-template-columns: 1fr; } }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: var(--sp-6); }
@media (max-width:900px){ .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .grid-4 { grid-template-columns: 1fr; max-width: 22rem; margin-inline:auto; } }
/* leader card */
.lead-card { background: var(--bg-base); border: 1px solid var(--border-hair); border-radius: var(--r-md); padding: 1.6rem; text-align: center; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.surface .lead-card { background: var(--bg-raised); }
.lead-card:hover { transform: translateY(-5px); border-color: var(--border-gold); box-shadow: var(--shadow-card); }
.lead-card img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-gold); margin: 0 auto 1.1rem; display: block; }
.lead-card h3 { font-size: 1.15rem; }
.lead-card .role { font-size: 0.72rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--titan-gold); margin-top: 0.3rem; }
.lead-card p { font-size: 0.9rem; color: var(--text-body); margin-top: 0.7rem; }
.card { background: var(--bg-base); border: 1px solid var(--border-hair); border-radius: var(--r-md); padding: 1.9rem; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.surface .card { background: var(--bg-raised); }
.card:hover { transform: translateY(-5px); border-color: var(--border-gold); box-shadow: var(--shadow-card); }
.card .k { font-size: 0.72rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.14em; color: var(--titan-gold); }
.card h3 { font-size: 1.35rem; margin-top: 0.7rem; }
.card p { font-size: 0.95rem; color: var(--text-body); margin-top: 0.6rem; }
.card .big-num { font-size: 2.6rem; font-weight: var(--w-black); color: var(--titan-gold); line-height: 1; }

/* split feature row */
.split { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:860px){ .split { grid-template-columns: 1fr; } }
.panel { background: var(--bg-raised); border:1px solid var(--border-hair); border-radius: var(--r-lg); padding: clamp(1.5rem,3vw,2.5rem); }
.panel.glow { box-shadow: var(--glow-gold); border-color: var(--border-gold); }
ul.ticks { list-style:none; display:grid; gap: 0.9rem; margin-top: var(--sp-4); }
ul.ticks li { display:flex; gap:0.75rem; align-items:flex-start; color: var(--text-body); }
ul.ticks li::before { content:"\2713"; color: var(--titan-gold); font-weight:700; margin-top:1px; }
/* term-and-definition variant: bold label on its own line, description beneath
   (keeps the bold lead-in from becoming a cramped second flex column on mobile) */
.trust-ticks li b { display:block; color:#fff; margin-bottom:0.1rem; }

.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: var(--sp-6); }
@media (max-width:860px){ .tiers { grid-template-columns: 1fr; max-width: 30rem; margin-inline:auto; } }
.tier { background: var(--bg-base); border: 1px solid var(--border-hair); border-radius: var(--r-lg); padding: 2rem; display: flex; flex-direction: column; }
.surface .tier { background: var(--bg-raised); }
.tier.feature { border: 1.5px solid var(--titan-gold); box-shadow: var(--glow-gold); position: relative; }
.tier.feature .flag { position: absolute; top: -0.8rem; left: 2rem; background: var(--titan-gold); color: var(--titan-black); font-size: 0.7rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.8rem; border-radius: var(--r-pill); }
.tier h3 { font-size: 1.6rem; } .tier .stage { color: var(--text-muted); margin-bottom: 1.2rem; } .tier .price { font-size: 2rem; font-weight: var(--w-black); color:#fff; margin-bottom: 0.25rem;} .tier .price small{ font-size:0.9rem; color:var(--text-muted); font-weight:400;} .tier p { font-size: 0.95rem; flex: 1; margin-bottom: 1.6rem; }

.proof-note { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--sp-4); }

.final { position: relative; text-align: center; overflow: hidden; }
.final::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(251,184,37,0.12) 0%, transparent 60%); pointer-events:none; }
.final h2 { font-size: var(--t-h1); max-width: 20ch; margin-inline:auto; }
.final .lead { margin-inline: auto; }

details { border-bottom: 1px solid var(--border-hair); }
summary { list-style: none; cursor: pointer; padding-block: 1.3rem; font-weight: var(--w-semi); font-size: 1.1rem; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color var(--dur-fast); }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--titan-gold); }
summary .ic { color: var(--titan-gold); font-size: 1.5rem; transition: transform var(--dur-base) var(--ease-out); }
details[open] summary .ic { transform: rotate(45deg); }
details .ans { padding-bottom: 1.3rem; color: var(--text-body); max-width: 60ch; }

.socials { display:flex; gap:0.6rem; margin-top:1.1rem; }
.socials a { width:34px; height:34px; border-radius:50%; border:1px solid var(--border-soft); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); transition:color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.socials a:hover { color:var(--titan-gold); border-color:var(--border-gold); transform:translateY(-2px); }
.socials a::after { display:none; }
.socials svg { width:15px; height:15px; fill:currentColor; }
.foot-contact { margin-top:1.1rem; font-size:0.85rem; line-height:1.7; }
.foot-contact a { color:var(--text-muted); transition:color var(--dur-fast); }
.foot-contact a:hover { color:var(--titan-gold); }
footer { border-top: 1px solid var(--border-hair); padding-block: var(--sp-6); }
.foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2.5rem; }
.foot-col { display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.9rem; }
.foot-col .h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 0.4rem; }
.foot-col a { color: var(--text-body); transition: color var(--dur-fast); } .foot-col a:hover { color: var(--titan-gold); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-hair); font-size: 0.8rem; color: var(--text-muted); }
.foot-legal { max-width: var(--container); margin: var(--sp-4) auto 0; padding: var(--sp-4) clamp(1.25rem, 4vw, 2.5rem) 0; border-top: 1px solid var(--border-hair); font-size: 0.7rem; line-height: 1.55; color: var(--text-muted); }

/* iOS 26 Safari ("Liquid Glass") samples background-color + backdrop-filter directly off
   position:fixed elements near the viewport edge to tint its chrome, which leaves a gap
   below a fixed bottom bar. Fix: keep the fixed element transparent with no filter, and
   paint the glass on an absolute ::before child (Safari ignores absolute children). */
/* iOS 26 Safari: `bottom:0` resolves to the TOP of the floating Liquid Glass
   controls (WebKit #297779, intentional), and env(safe-area-inset-bottom) is now
   the control height (~44-64px). So we must NOT add env() as bottom clearance
   (bottom:0 already clears the controls) or the bar floats a control-height too
   high. Instead: keep normal padding, and bleed the bar background DOWN by the
   inset so it reaches the true screen edge and no page content shows beneath it.
   Opaque bg + no backdrop-filter also dodges the Liquid Glass tint bug (#300965). */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; background: transparent; border-top: 0; padding: 0.7rem 1rem; }
.mbar::before { content:""; position: absolute; left: 0; right: 0; top: 0; bottom: calc(-1 * env(safe-area-inset-bottom)); z-index: 0; background: var(--titan-black); border-top: 1px solid var(--border-hair); }
.mbar .btn { position: relative; z-index: 1; width: 100%; }
@media (max-width: 900px){
  /* hidden until the hero CTA scrolls out of view (JS toggles .visible) */
  .mbar { display: block; transform: translateY(120%); transition: transform var(--dur-base) var(--ease-out); will-change: transform; }
  .mbar.visible { transform: translateY(0); }
  body { padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce){
  .r, .hero .sub, .hero .actions, .hero .chips, .reveal-line > span { opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee-track { animation: none; }
  .moat { opacity: 1 !important; transform:none !important; }
  .mbar { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- PROOF: testimonial wall + trustpilot + events ---- */
.quote { background: var(--bg-base); border:1px solid var(--border-hair); border-left:2px solid var(--titan-gold); border-radius: var(--r-md); padding: 1.6rem 1.8rem; font-size: 1.0rem; color: var(--text-body); font-style: italic; line-height:1.5; }
.surface .quote { background: var(--bg-raised); }
.quote cite { display:block; margin-top: 1rem; font-style: normal; font-weight: var(--w-semi); color:#fff; font-size:0.9rem; }
.quote cite span { color: var(--text-muted); font-weight:400; }
.tp { display:flex; align-items:center; justify-content:center; gap:0.9rem; margin-top: var(--sp-5); flex-wrap:wrap; text-align:center; }
.tp .stars { color: var(--titan-gold); font-size:1.2rem; letter-spacing:2px; }
.tp .tp-txt { color: var(--text-body); font-size:0.95rem; } .tp .tp-txt b { color:#fff; }
.event-card { overflow:hidden; border-radius: var(--r-md); border:1px solid var(--border-hair); background: var(--bg-raised); display:flex; flex-direction:column; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.event-card:hover { transform: translateY(-5px); border-color: var(--border-gold); box-shadow: var(--shadow-card); }
.event-card img.evbg { display:block; width:100%; aspect-ratio: 4 / 3; object-fit:cover; }
.event-card .ev-body { padding:1.35rem 1.5rem 1.6rem; }
.event-card .loc { font-size:0.72rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.14em; color:var(--titan-gold); }
.event-card h3 { font-size:1.3rem; margin-top:0.35rem; }
.event-card p { font-size:0.9rem; color:var(--text-body); margin-top:0.45rem; }

/* ---- MEDIA: community mosaic + video wall ---- */
.gallery { columns: 4; column-gap: 10px; margin-top: var(--sp-6); }
@media (max-width:900px){ .gallery { columns: 3; } }
@media (max-width:600px){ .gallery { columns: 2; column-gap:8px; } }
.gallery img { width:100%; margin-bottom:10px; border-radius:10px; display:block; break-inside:avoid; border:1px solid var(--border-hair); }
.gallery.r.in img { opacity:1; }
/* testimonial screenshot wall (real proof images) */
.tgrid { columns: 3; column-gap: 1rem; margin-top: var(--sp-6); }
@media (max-width:900px){ .tgrid { columns: 2; } }
@media (max-width:560px){ .tgrid { columns: 1; max-width: 28rem; margin-inline:auto; } }
.tgrid img { width:100%; margin-bottom:1rem; border-radius:14px; display:block; break-inside:avoid; background:#fff; border:1px solid var(--border-hair); box-shadow: var(--shadow-card); }
.lm-wrap { text-align:center; margin-top:var(--sp-5); }
/* operator journey card: image fills the card */
.op-card { position:relative; background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-md); overflow:hidden; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.surface .op-card { background:var(--bg-raised); }
.op-card:hover { transform:translateY(-6px); border-color:var(--border-gold); box-shadow:var(--shadow-card); }
/* portraits are tightly framed on the face and gently graded so mixed-background member
   shots read as one cohesive editorial set, not a stock collage */
.op-card img { width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 12%; filter:saturate(0.9) contrast(1.04) brightness(0.99); display:block; }
/* floor-fade: pinned exactly over the square image, dissolves every photo's base into the
   card surface so clashing backgrounds resolve to one off-black at the seam */
.op-card::after { content:""; position:absolute; top:0; left:0; width:100%; aspect-ratio:1/1; pointer-events:none; background:linear-gradient(to bottom, rgba(17,17,17,0.32) 0%, transparent 22%, transparent 56%, rgba(17,17,17,0.5) 84%, var(--bg-base) 100%), radial-gradient(125% 108% at 50% 30%, transparent 48%, rgba(17,17,17,0.6) 100%); }
.surface .op-card::after { background:linear-gradient(to bottom, rgba(23,23,23,0.32) 0%, transparent 22%, transparent 56%, rgba(23,23,23,0.5) 84%, var(--bg-raised) 100%), radial-gradient(125% 108% at 50% 30%, transparent 48%, rgba(23,23,23,0.6) 100%); }
.op-card .op-body { position:relative; padding:1.4rem 1.5rem 1.7rem; }
.op-card h3 { font-size:1.25rem; }
.op-card .role { font-size:0.72rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.12em; color:var(--titan-gold); margin-top:0.35rem; }
.op-card p { font-size:0.92rem; color:var(--text-body); margin-top:0.75rem; }

.video-wall { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:var(--sp-6); }
@media (max-width:860px){ .video-wall { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .video-wall { grid-template-columns:1fr; } }
.video-card { position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-hair); background:#000; cursor:pointer; aspect-ratio: 9/12; }
/* mosaic: mixed-orientation masonry of every video we have */
.video-wall.mosaic { display:block; columns:3; column-gap:1rem; }
.video-wall.mosaic .video-card { aspect-ratio:auto; width:100%; margin-bottom:1rem; break-inside:avoid; }
.video-wall.mosaic .video-card img { height:auto; }
@media (max-width:860px){ .video-wall.mosaic { columns:2; } }
@media (max-width:560px){ .video-wall.mosaic { columns:1; max-width:24rem; margin-inline:auto; } }
.video-card img, .video-card video { width:100%; height:100%; object-fit:cover; display:block; }
.video-card .play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; transition: background var(--dur-base); }
.video-card .play::after { content:""; width:62px; height:62px; border-radius:50%; background:var(--titan-gold); box-shadow:var(--glow-gold); background-image:none; clip-path: none; display:block; }
.video-card .play span { position:absolute; width:0;height:0; border-left:20px solid var(--titan-black); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; z-index:3; }
.video-card .cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem; background:linear-gradient(180deg, transparent, rgba(17,17,17,0.85)); font-size:0.85rem; color:#fff; font-weight:var(--w-semi); }
.video-card.feat { aspect-ratio:16/9; max-width:900px; margin-inline:auto; }
/* feat demo card that ships a portrait (9:16) mobile cut: go vertical on phones */
@media (max-width:640px){ .video-card.feat.portrait-mobile { aspect-ratio:9/16; max-width:360px; } }
.video-card.playing .play, .video-card.playing .cap { display:none; }
.video-card video { position:absolute; inset:0; width:100%; height:100%; z-index:4; }
.video-card[data-lightbox] { cursor:pointer; }
/* fullscreen video lightbox (user-initiated, sound on) for message-carrying demos */
.vlightbox { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,2.5rem); background:rgba(0,0,0,0.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:vlb-in var(--dur-base) var(--ease-out); }
/* fits both cuts and fills available space: 16:9 desktop scales up to the viewport
   (height-governed), 9:16 mobile caps by width */
.vlightbox video { max-width:min(100%,1600px); max-height:86vh; width:auto; height:auto; border-radius:var(--r-md); box-shadow:var(--shadow-pop); background:#000; }
.vlightbox-close { position:absolute; top:max(1rem,env(safe-area-inset-top)); right:1.1rem; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-soft); background:rgba(17,17,17,0.6); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color var(--dur-fast), border-color var(--dur-fast); }
.vlightbox-close:hover { color:var(--titan-gold); border-color:var(--border-gold); }
@keyframes vlb-in { from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .vlightbox { animation:none } }

/* booking calendar lightbox ("Book a Demo" CTAs open the GHL calendar in-page) */
.callb { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:clamp(0.75rem,3vw,2rem); background:rgba(0,0,0,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.callb.open { display:flex; animation:vlb-in var(--dur-base) var(--ease-out); }
/* #fff is the documented exception: the GHL booking iframe ships its own white theme */
.callb-frame { width:min(720px,100%); height:min(86vh,860px); border:0; border-radius:var(--r-md); background:#fff; box-shadow:var(--shadow-pop); }
.callb-close { position:absolute; top:max(1rem,env(safe-area-inset-top)); right:1.1rem; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-soft); background:rgba(17,17,17,0.6); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color var(--dur-fast), border-color var(--dur-fast); }
.callb-close:hover { color:var(--titan-gold); border-color:var(--border-gold); }
@media (prefers-reduced-motion:reduce){ .callb.open { animation:none } }

/* ---- COMMUNITY: alternating image/text rows ---- */
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.feature-row + .feature-row { margin-top: clamp(3rem,7vw,6rem); }
.feature-row .media img { width:100%; border-radius:var(--r-lg); aspect-ratio:4/3; object-fit:cover; border:1px solid var(--border-hair); box-shadow: var(--shadow-card); }
.feature-row .copy h3 { font-size: clamp(1.5rem,3vw,2rem); }
.feature-row .copy p { margin-top: var(--sp-3); color: var(--text-body); }
.feature-row.reverse .media { order: 2; }
@media (max-width:860px){ .feature-row { grid-template-columns:1fr; gap:1.5rem; } .feature-row.reverse .media { order:0; } }

/* ---- NAV: channels mega-dropdown + mobile menu ---- */
.nav-links { align-items:center; }
.nav-dd { position:relative; }
.nav-trigger { background:none; border:0; color:var(--text-body); font:inherit; font-size:var(--t-sm); font-weight:var(--w-semi); cursor:pointer; display:inline-flex; align-items:center; gap:0.35rem; padding:0; transition: color var(--dur-fast); }
.nav-dd:hover .nav-trigger, .nav-trigger[aria-expanded="true"], .nav-trigger.active { color:#fff; }
.nav-trigger .caret { transition: transform var(--dur-base) var(--ease-out); }
.nav-dd:hover .nav-trigger .caret, .nav-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-panel { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); margin-top:12px; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-md); box-shadow:var(--shadow-pop); padding:0.5rem; width:max-content; display:grid; grid-template-columns:1fr 1fr; gap:0.2rem; opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); z-index:90; }
.nav-panel::before { content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-dd:hover .nav-panel, .nav-dd:focus-within .nav-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-panel a { display:block; padding:0.7rem 0.95rem; border-radius:10px; transition:background var(--dur-fast); min-width:215px; }
.nav-panel a::after { display:none; }
.nav-panel a:hover { background:var(--bg-raised); }
.nav-panel a .pk { font-size:0.64rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--titan-gold); font-weight:var(--w-bold); }
.nav-panel a b { display:block; color:#fff; font-size:0.98rem; margin-top:2px; }
.nav-panel a small { color:var(--text-muted); font-size:0.78rem; }
/* official channel logos: small inline mark in the nav title, larger lockup on channel hero */
.ch-logo { height:1.05em; width:auto; vertical-align:-0.18em; margin-right:0.4em; }
.hero-logo { height:2.75rem; width:auto; display:block; margin-bottom:var(--sp-3); }
/* highlighted Omni card in the Channels dropdown (bottom-right) */
.nav-panel a.omni-card { background:rgba(251,184,37,0.08); border:1px solid var(--border-gold); }
.nav-panel a.omni-card:hover { background:rgba(251,184,37,0.15); }
.nav-panel a.omni-card .pk { color:var(--titan-gold); }
.nav-panel a.omni-card b { color:var(--titan-gold); }
/* highlighted Membership item in the Membership dropdown (primary offer) */
.nav-panel a.mem-card { background:rgba(251,184,37,0.08); border:1px solid var(--border-gold); }
.nav-panel a.mem-card:hover { background:rgba(251,184,37,0.15); }
.nav-panel a.mem-card .pk { color:var(--titan-gold); }
.nav-panel a.mem-card b { color:var(--titan-gold); }
/* channel card icon */
.card .card-ic { width:30px; height:30px; color:var(--titan-gold); margin-bottom:1rem; display:block; }
.card .card-ic svg { width:100%; height:100%; }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; width:42px; height:42px; flex-direction:column; justify-content:center; gap:5px; }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; margin-inline:auto; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
body.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle { display:flex; order:3; }
  .nav .btn-cta { display:none; }
  .nav-links { display:none; position:fixed; top:68px; left:0; right:0; bottom:0; background:var(--bg-base); flex-direction:column; align-items:stretch; gap:0; padding:1.5rem clamp(1.25rem,4vw,2.5rem); overflow-y:auto; }
  body.menu-open .nav-links { display:flex; }
  /* When scrolled, header gets backdrop-filter, which makes it a containing block for its
     position:fixed .nav-links child -> the full-screen panel collapses to the header box and
     the menu appears broken. While the menu is open, drop the filter (instantly, so the panel
     doesn't flash during the fade-out) so the panel anchors to the viewport again. */
  body.menu-open > header { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:var(--bg-base); transition:none; }
  .nav-links > a, .nav-trigger { padding:1rem 0; border-bottom:1px solid var(--border-hair); font-size:1.05rem; width:100%; justify-content:space-between; }
  .nav-dd { width:100%; }
  .nav-panel { position:static; transform:none; opacity:1; visibility:visible; display:block; box-shadow:none; border:0; background:none; padding:0 0 0.5rem; margin:0; width:100%; }
  .nav-panel::before{ display:none; }
  .nav-panel a { min-width:0; padding:0.7rem 0 0.7rem 1rem; }
  .nav-links .btn-cta-mobile { display:flex; justify-content:center; margin-top:1.25rem; border-bottom:0; }
}
.btn-cta-mobile { display:none; }

/* ---- NAV: Titan AI emphasis ---- */
.nav-links a.nav-ai { color:#fff; font-weight:var(--w-bold); display:inline-flex; align-items:center; }
.nav-new { margin-left:0.45rem; font-size:0.58rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--titan-black); background:var(--titan-gold); padding:0.13rem 0.42rem; border-radius:var(--r-pill); line-height:1.35; box-shadow:0 0 0 0 rgba(251,184,37,0.6); animation: navpulse 2.6s ease-out infinite; }
@keyframes navpulse { 0%{ box-shadow:0 0 0 0 rgba(251,184,37,0.55);} 60%{ box-shadow:0 0 0 7px rgba(251,184,37,0);} 100%{ box-shadow:0 0 0 0 rgba(251,184,37,0);} }
@media (prefers-reduced-motion: reduce){ .nav-new { animation:none; } }

/* ---- TIMELINE (milestones) ---- */
.timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:var(--sp-6); }
@media (max-width:860px){ .timeline { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .timeline { grid-template-columns:1fr; } }
.milestone { border-top:2px solid var(--titan-gold); padding-top:1rem; }
.milestone .yr { font-size:1.4rem; font-weight:var(--w-black); color:var(--titan-gold); }
.milestone h3 { font-size:1.05rem; margin-top:0.25rem; }
.milestone p { font-size:0.85rem; color:var(--text-body); margin-top:0.35rem; }

/* ---- RESULTS: quote wall (masonry) ---- */
.quote-wall { columns: 3; column-gap: 1.1rem; margin-top: var(--sp-6); }
@media (max-width:900px){ .quote-wall { columns: 2; } }
@media (max-width:600px){ .quote-wall { columns: 1; } }
.quote-wall .quote { margin-bottom: 1.1rem; break-inside: avoid; }
.quote .res { display:block; margin-top:0.9rem; color:var(--titan-gold); font-style:normal; font-weight:var(--w-bold); font-size:0.9rem; }
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:var(--sp-6); }
@media (max-width:900px){ .result-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .result-grid { grid-template-columns:1fr; } }
.result-card { background:var(--bg-raised); border:1px solid var(--border-hair); border-radius:var(--r-md); padding:1.8rem; }
.result-card .big-num { font-size:2.6rem; font-weight:var(--w-black); color:var(--titan-gold); line-height:1; }
.result-card p { margin-top:0.6rem; font-size:0.92rem; color:var(--text-body); }
.result-card cite { display:block; margin-top:0.8rem; font-style:normal; font-size:0.8rem; color:var(--text-muted); }

/* ---- FORMS (apply) ---- */
.form { max-width: 40rem; margin-top: var(--sp-6); display:grid; gap:1.15rem; }
.field label { display:block; font-size:0.85rem; font-weight:var(--w-semi); color:var(--text-body); margin-bottom:0.45rem; }
.field input, .field select, .field textarea { width:100%; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:0.85rem 1rem; color:#fff; font:inherit; font-size:1rem; }
.field input::placeholder, .field textarea::placeholder { color:var(--text-muted); }
.field textarea { min-height:120px; resize:vertical; }
.field select option { color:#111; }
.form .btn-cta { justify-self:start; }
.apply-trust { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:var(--sp-5); color:var(--text-muted); font-size:0.85rem; }
.apply-trust b { color:var(--titan-gold); }

/* ---- MEDIA STRIP (edge photo band, reusable per page) ---- */
.photo-strip { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; margin-top:var(--sp-6); }
.photo-strip img { width:100%; height:240px; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--border-hair); }
@media (max-width:900px){ .photo-strip { grid-auto-flow:row; grid-template-columns:1fr 1fr; } .photo-strip img { height:180px; } }
@media (max-width:520px){ .photo-strip { grid-template-columns:1fr 1fr; } }
/* duo media (2-up) */
.media-duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--sp-5); }
.media-duo img { width:100%; height:100%; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--border-hair); aspect-ratio:4/3; }
@media (max-width:600px){ .media-duo { grid-template-columns:1fr; } }

/* ---- PARALLAX BANDS (full-bleed photo + overlay + text) ---- */
.px-band { position:relative; overflow:hidden; min-height:clamp(380px,62vh,580px); display:flex; align-items:center; }
.px-band .px-img { position:absolute; left:0; right:0; top:-14%; height:128%; width:100%; object-fit:cover; z-index:0; will-change:transform; }
.px-band .px-ov { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(17,17,17,0.62) 0%, rgba(17,17,17,0.74) 100%); }
.px-band .px-ov.left { background:linear-gradient(90deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.6) 55%, rgba(17,17,17,0.35) 100%); }
.px-band .wrap { position:relative; z-index:2; }
.px-band h2 { font-size:var(--t-h1); max-width:20ch; }
.px-band .lead { color:rgba(255,255,255,0.9); }
.px-band .px-stat { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:var(--w-black); color:var(--titan-gold); line-height:1; letter-spacing:-0.02em; }
@media (prefers-reduced-motion:reduce){ .px-band .px-img{ transform:none !important; } }

/* ---- HALF-COLUMN EDGE BLEED ---- */
.bleed { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:clamp(440px,62vh,640px); }
.bleed.flip .bleed-media { order:2; }
.bleed-media { position:relative; min-height:300px; overflow:hidden; }
.bleed-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bleed-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(2rem,5vw,4.5rem); }
.bleed-copy .eyebrow { margin-bottom:var(--sp-3); }
@media (max-width:860px){ .bleed{ grid-template-columns:1fr; } .bleed.flip .bleed-media{ order:0; } .bleed-media{ min-height:260px; } }

/* legal pages */
.legal .lh2 { font-size:1.5rem; margin-top:var(--sp-5); margin-bottom:0.6rem; color:#fff; }
.legal .lh3 { font-size:1.15rem; margin-top:var(--sp-4); margin-bottom:0.4rem; color:#fff; }
.legal p { color:var(--text-body); margin-bottom:1rem; line-height:1.8; }
.legal ul, .legal ol { margin:0 0 1rem 1.2rem; }
.legal li { color:var(--text-body); margin-bottom:0.5rem; line-height:1.7; }
.legal a { color:var(--titan-gold); }
.legal-wrap { max-width: 52rem; }
.legal .clauses { display:grid; gap:1.15rem; margin:1.3rem 0 1.8rem; }
.legal .clause { display:grid; grid-template-columns:2.4rem 1fr; gap:0.7rem; align-items:start; }
.legal .clause .cn { font-weight:var(--w-black); color:var(--titan-gold); font-size:1.05rem; line-height:1.7; }
.legal .clause p { color:var(--text-body); line-height:1.8; }
.legal .clause ul { margin:0.7rem 0 0 1.1rem; display:grid; gap:0.45rem; }
.legal .clause li { color:var(--text-body); line-height:1.7; }
.legal .lh2 { border-bottom:1px solid var(--border-hair); padding-bottom:0.6rem; }

.nav-dd .nav-trigger::after { display:none; }
a.nav-trigger { text-decoration:none; }

/* ============================================================
   BLOG — category/hub index + single post
   ============================================================ */

/* ---- inline newsletter capture (reused on hub + post) ---- */
.nl-form { display:flex; gap:0.6rem; margin-top:var(--sp-5); max-width:34rem; }
.nl-form input { flex:1; min-width:0; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:0.85rem 1rem; color:#fff; font:inherit; font-size:1rem; }
.nl-form input::placeholder { color:var(--text-muted); }
.nl-form .btn { white-space:nowrap; }
.nl-note { font-size:var(--t-sm); color:var(--text-muted); margin-top:var(--sp-2); }
@media (max-width:520px){ .nl-form { flex-direction:column; } .nl-form .btn { width:100%; } }

/* ---- category filter bar ---- */
.cat-bar { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:var(--sp-6); }
.cat-pill { font-size:0.82rem; font-weight:var(--w-semi); color:var(--text-body); border:1px solid var(--border-soft); border-radius:var(--r-pill); padding:0.5rem 1.1rem; cursor:pointer; background:none; font-family:inherit; transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.cat-pill:hover { color:#fff; border-color:var(--border-gold); }
.cat-pill.active { color:var(--titan-black); background:var(--titan-gold); border-color:var(--titan-gold); }
.blog-filters { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:var(--sp-5); }
.post-uplink { margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--border-hair); display:flex; flex-wrap:wrap; align-items:baseline; gap:0.6rem; }
.post-uplink > span { font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--track-wide); color:var(--text-muted); font-weight:var(--w-bold); }
.post-uplink a { color:var(--titan-gold); font-weight:var(--w-semi); font-size:1.05rem; }

/* ---- featured (hero) post ---- */
.featured { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:center; margin-top:var(--sp-6); background:var(--bg-surface); border:1px solid var(--border-hair); border-radius:var(--r-lg); overflow:hidden; transition:border-color var(--dur-base), box-shadow var(--dur-base); }
.featured:hover { border-color:var(--border-gold); box-shadow:var(--shadow-card); }
.featured .f-media { position:relative; align-self:stretch; min-height:260px; overflow:hidden; }
.featured .f-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.featured:hover .f-media img { transform:scale(1.03); }
.featured .f-tag { position:absolute; top:1rem; left:1rem; z-index:2; background:rgba(17,17,17,0.85); backdrop-filter:blur(6px); color:var(--titan-gold); font-size:0.68rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.12em; padding:0.4rem 0.8rem; border-radius:var(--r-pill); }
.featured .f-body { padding:clamp(1.6rem,3vw,2.8rem) clamp(1.6rem,3vw,2.8rem) clamp(1.6rem,3vw,2.8rem) 0; }
.featured .f-kicker { font-size:0.72rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.14em; color:var(--titan-gold); }
.featured h2 { font-size:clamp(1.6rem,3vw,2.3rem); margin-top:0.6rem; line-height:1.15; }
.featured p { color:var(--text-body); margin-top:0.8rem; font-size:1rem; }
.featured .p-meta { margin-top:1.1rem; }
.featured .f-link { display:inline-flex; align-items:center; gap:0.4rem; margin-top:1.3rem; color:var(--titan-gold); font-weight:var(--w-bold); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.06em; }
.featured .f-link::after { content:"\2192"; transition:transform var(--dur-base) var(--ease-out); }
.featured:hover .f-link::after { transform:translateX(4px); }
@media (max-width:760px){ .featured { grid-template-columns:1fr; } .featured .f-media { min-height:220px; } .featured .f-body { padding:1.6rem; } }

/* ---- post card grid ---- */
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin-top:var(--sp-5); }
@media (max-width:900px){ .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .post-grid { grid-template-columns:minmax(0,1fr); } }
.post-card { min-width:0; display:flex; flex-direction:column; background:var(--bg-surface); border:1px solid var(--border-hair); border-radius:var(--r-md); overflow:hidden; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.post-card:hover { transform:translateY(-5px); border-color:var(--border-gold); box-shadow:var(--shadow-card); }
.post-card .pc-media { position:relative; overflow:hidden; }
.post-card .pc-media img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.post-card:hover .pc-media img { transform:scale(1.04); }
.post-card .pc-tag { position:absolute; top:0.8rem; left:0.8rem; background:rgba(17,17,17,0.85); backdrop-filter:blur(6px); color:var(--titan-gold); font-size:0.64rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.1em; padding:0.32rem 0.7rem; border-radius:var(--r-pill); }
.post-card .pc-body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.post-card h3 { font-size:1.18rem; line-height:1.25; }
.post-card .pc-ex { font-size:0.9rem; color:var(--text-body); margin-top:0.6rem; flex:1; }
.p-meta { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; color:var(--text-muted); }
.p-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--text-muted); }
.post-card .p-meta { margin-top:1.1rem; }

/* ---- in-grid lead-capture block (spans the row) ---- */
.capture-block { grid-column:1 / -1; min-width:0; background:var(--bg-raised); border:1px solid var(--border-gold); border-radius:var(--r-md); padding:clamp(1.6rem,3vw,2.4rem); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:center; box-shadow:var(--glow-gold); }
.capture-block .eyebrow { margin-bottom:var(--sp-2); }
.capture-block h3 { font-size:clamp(1.4rem,2.6vw,1.9rem); }
.capture-block p { color:var(--text-body); margin-top:0.6rem; font-size:0.95rem; }
.capture-block .nl-form { margin-top:var(--sp-4); }
@media (max-width:760px){ .capture-block { grid-template-columns:1fr; gap:1.2rem; } }

/* ---- proof microbar (hub footer) ---- */
.proof-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.5rem,5vw,3.5rem); padding-block:var(--sp-5); border-block:1px solid var(--border-hair); text-align:center; }
.proof-bar .pb { display:flex; flex-direction:column; gap:0.2rem; }
.proof-bar .pb b { font-size:1.5rem; font-weight:var(--w-black); color:var(--titan-gold); line-height:1; }
.proof-bar .pb span { font-size:0.8rem; color:var(--text-muted); }
.proof-bar .stars { color:var(--titan-gold); letter-spacing:2px; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.breadcrumb { display:flex; flex-wrap:wrap; gap:0.45rem; font-size:0.78rem; color:var(--text-muted); }
.breadcrumb a { color:var(--text-muted); transition:color var(--dur-fast); }
.breadcrumb a:hover { color:var(--titan-gold); }
.breadcrumb .sep { opacity:0.5; }
.breadcrumb .cur { color:var(--text-body); }

.post-head { padding-top:clamp(2.5rem,6vw,4rem); }
.post-head .cat-pill-static { display:inline-block; margin-top:var(--sp-4); background:rgba(251,184,37,0.12); color:var(--titan-gold); font-size:0.7rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.12em; padding:0.4rem 0.9rem; border-radius:var(--r-pill); border:1px solid var(--border-gold); }
.post-head h1 { font-size:clamp(2rem,4.5vw,3.1rem); line-height:1.1; max-width:20ch; margin-top:var(--sp-3); }
.post-head .dek { font-size:var(--t-lead); color:var(--text-body); max-width:54ch; margin-top:var(--sp-4); }
.byline { display:flex; align-items:center; gap:0.85rem; margin-top:var(--sp-5); flex-wrap:wrap; }
.byline img { width:44px; height:44px; border-radius:50%; object-fit:cover; border:1.5px solid var(--border-gold); }
.byline .bl-name { font-weight:var(--w-semi); color:#fff; font-size:0.92rem; }
.byline .p-meta { margin-top:0.15rem; }
.byline .share { margin-left:auto; display:flex; gap:0.5rem; }
.byline .share a { width:34px; height:34px; border-radius:50%; border:1px solid var(--border-soft); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); transition:color var(--dur-fast), border-color var(--dur-fast); }
.byline .share a:hover { color:var(--titan-gold); border-color:var(--border-gold); }
.byline .share svg { width:15px; height:15px; fill:currentColor; }
@media (max-width:560px){ .byline .share { margin-left:0; width:100%; } }

.post-hero-img { width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--r-lg); border:1px solid var(--border-hair); margin-top:var(--sp-6); }

/* layout: article + sticky ToC rail */
.post-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start; padding-top:var(--sp-6); }
.post-body { min-width:0; max-width:var(--measure); margin-inline:auto; font-size:1.1875rem; line-height:1.8; color:var(--text-body); }
.post-body .blog-post-container { max-width:100%; color:inherit; font:inherit; }
.post-body .blog-post-container > *:first-child { margin-top:0; }
.post-body figure { overflow-x:auto; }
.post-body > * + * { margin-top:var(--sp-4); }
.post-body h2 { font-size:var(--t-h2); line-height:1.2; font-weight:var(--w-bold); color:#fff; margin:1.6em 0 0.55em; scroll-margin-top:90px; }
.post-body h3 { font-size:var(--t-h3); line-height:1.3; font-weight:var(--w-semi); color:#fff; margin:1.5em 0 0.5em; }
.post-body h4 { font-size:1.15rem; line-height:1.4; font-weight:var(--w-semi); color:#fff; margin:1.4em 0 0.5em; }
.post-body p { color:var(--text-body); margin:0 0 1.4em; }
.post-body strong, .post-body b { color:#fff; font-weight:var(--w-semi); }
.post-body a:not(.btn):not(.cta-button) { color:var(--titan-gold); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-gold); transition:text-decoration-color var(--dur-fast); }
.post-body a:not(.btn):not(.cta-button):hover { text-decoration-color:var(--titan-gold); }
.post-body .cta-button { color:#fff; text-decoration:none; }
.post-body ul, .post-body ol { margin-left:1.3rem; display:grid; gap:0.6rem; color:var(--text-body); }
.post-body li { line-height:1.7; }
.post-body img { border-radius:var(--r-md); border:1px solid var(--border-hair); margin-block:var(--sp-5); }
.post-body figcaption { font-size:0.8rem; color:var(--text-muted); margin-top:0.5rem; text-align:center; }
/* tables in post body (Yoast / comparison-table) */
.post-body table, .blog-post-container table { width:100%; border-collapse:collapse; margin:var(--sp-5) 0; font-size:0.9rem; display:block; overflow-x:auto; }
.post-body table th, .post-body table td, .blog-post-container table th, .blog-post-container table td { border:1px solid var(--border-soft); padding:0.7rem 0.95rem; text-align:left; vertical-align:top; line-height:1.55; }
.post-body table thead th, .blog-post-container table thead th { background:var(--bg-raised); color:#fff; font-weight:var(--w-semi); white-space:nowrap; }
.post-body table tbody tr:nth-child(even), .blog-post-container table tbody tr:nth-child(even) { background:rgba(255,255,255,0.025); }
.post-body table tbody td { color:var(--text-body); }

/* ===== WP content components (brand-aligned; replaces stripped inline post styles) ===== */
.post-body .eyebrow-label { text-transform:uppercase; letter-spacing:0.14em; color:var(--text-muted); font-size:0.8125rem; font-weight:var(--w-semi); margin-bottom:0.5em; display:block; }
/* boxed callouts: table of contents, key takeaways, callouts, quick answer, highlight */
.post-body .table-of-contents,
.post-body .key-takeaways,
.post-body .callout, .post-body .callout-tip, .post-body .callout-info, .post-body .callout-warning,
.post-body .quick-answer, .post-body .highlight-box {
  background:var(--bg-raised); border:1px solid var(--border-soft); border-left:4px solid var(--titan-gold);
  padding:1.25em 1.5em; margin:1.8em 0; border-radius:0 var(--r-md) var(--r-md) 0;
}
.post-body .table-of-contents h4, .post-body .key-takeaways h4,
.post-body .callout h4, .post-body .callout-tip h4, .post-body .callout-info h4,
.post-body .quick-answer h4, .post-body .highlight-box h4 { margin:0 0 0.6em; color:var(--titan-gold); font-size:1.05rem; }
.post-body .table-of-contents ul, .post-body .key-takeaways ul { margin-bottom:0; }
.post-body .table-of-contents a { color:var(--titan-gold); text-decoration:none; }
.post-body .table-of-contents a:hover { text-decoration:underline; }
.post-body .callout-warning { border-left-color:var(--titan-red); }
/* pros / cons grid */
.post-body .pros-cons-list { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:2em 0; }
.post-body .pros-list, .post-body .cons-list { padding:1.25rem 1.4rem; border-radius:var(--r-md); border:1px solid var(--border-soft); background:var(--bg-raised); }
.post-body .pros-list h4 { color:#86efac; margin-top:0; }
.post-body .cons-list h4 { color:#fca5a5; margin-top:0; }
@media (max-width:640px){ .post-body .pros-cons-list { grid-template-columns:1fr; } }
/* in-content CTA -> brand button */
.post-body .cta-button { display:inline-block; background:var(--cta); color:#fff; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.04em; padding:0.9rem 2rem; border-radius:var(--r-sm); text-decoration:none; box-shadow:var(--glow-cta); transition:background var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.post-body .cta-button:hover { background:var(--cta-hover); color:#fff; transform:translateY(-2px); }

/* ===== two-column article shell + sticky lead-capture rail (blog CRO) ===== */
.post-shell { display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:clamp(2rem,4vw,3.5rem); align-items:start; padding-top:var(--sp-5); }
.post-main { min-width:0; }
.post-main .post-head { padding-top:0; }
.post-main .post-body { max-width:none; margin:0; }
.post-rail { min-width:0; }
.post-rail .rail-inner { position:sticky; top:88px; display:grid; gap:1.1rem; max-height:calc(100svh - 108px); overflow-y:auto; scrollbar-width:thin; }
.post-rail .rail-inner::-webkit-scrollbar { width:6px; }
.post-rail .rail-inner::-webkit-scrollbar-thumb { background:var(--border-soft); border-radius:3px; }
.rail-card { background:var(--bg-raised); border:1px solid var(--border-gold); border-radius:var(--r-md); padding:1.6rem 1.4rem; }
.rail-card .rail-eyebrow { text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; font-weight:var(--w-bold); color:var(--titan-gold); }
.rail-card .rail-title { font-size:1.2rem; line-height:1.25; color:#fff; margin:0.5rem 0 0.95rem; font-weight:var(--w-bold); }
.rail-card .rail-proof { list-style:none; margin:0 0 1.15rem; padding:0; display:grid; gap:0.5rem; }
.rail-card .rail-proof li { font-size:0.9rem; color:var(--text-body); padding-left:1.4rem; position:relative; line-height:1.4; }
.rail-card .rail-proof li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--titan-gold); font-weight:700; }
.rail-card .rail-cta { width:100%; font-size:0.9rem; padding:0.85rem 1rem; letter-spacing:0.02em; }
.rail-card .rail-cta::after { display:none; }
.rail-card .rail-link { display:block; text-align:center; margin-top:0.75rem; font-size:0.85rem; font-weight:var(--w-semi); color:var(--titan-gold); text-decoration:none; }
.rail-card .rail-link:hover { text-decoration:underline; }
.rail-toc { border:1px solid var(--border-soft); border-radius:var(--r-md); padding:1.15rem 1.3rem; }
.rail-toc .rail-toc-h { display:block; text-transform:uppercase; letter-spacing:0.12em; font-size:0.7rem; font-weight:var(--w-bold); color:var(--text-muted); margin-bottom:0.75rem; }
.rail-toc ul { list-style:none; margin:0; padding:0; display:grid; gap:0.55rem; }
.rail-toc a { font-size:0.85rem; line-height:1.35; color:var(--text-body); text-decoration:none; }
.rail-toc a:hover { color:var(--titan-gold); }
@media (max-width:980px){ .post-shell { grid-template-columns:1fr; } .post-rail { display:none; } }

/* ===== hero: vertically centered, best-practice mobile positioning ===== */
@media (max-width:760px){
  .hero { min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:center; padding-top:1.5rem; padding-bottom:2.5rem; }
  .hero h1 { font-size:clamp(2.4rem,9.5vw,3.25rem); max-width:14ch; }
  .hero .sub { font-size:1.0625rem; }
}

/* sticky ToC */
.toc { position:sticky; top:92px; }
.toc .toc-h { font-size:0.7rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.14em; color:var(--text-muted); margin-bottom:0.9rem; }
.toc ul { list-style:none; display:grid; gap:0.65rem; border-left:1px solid var(--border-hair); }
.toc a { display:block; padding-left:1rem; margin-left:-1px; border-left:2px solid transparent; font-size:0.85rem; color:var(--text-muted); line-height:1.35; transition:color var(--dur-fast), border-color var(--dur-fast); }
.toc a:hover, .toc a.active { color:#fff; border-left-color:var(--titan-gold); }
.toc .toc-cta { margin-top:var(--sp-4); padding-left:1rem; }
.toc .toc-cta .btn { width:100%; }
/* mobile ToC = collapsible */
.toc-mobile { display:none; margin-top:var(--sp-5); border:1px solid var(--border-hair); border-radius:var(--r-md); background:var(--bg-surface); }
.toc-mobile summary { padding:1rem 1.2rem; font-size:0.95rem; }
.toc-mobile ul { list-style:none; display:grid; gap:0.7rem; padding:0 1.2rem 1.2rem; }
.toc-mobile a { color:var(--text-body); font-size:0.9rem; }
.toc-mobile a:hover { color:var(--titan-gold); }
@media (max-width:900px){ .toc-rail { display:none; } .toc-mobile { display:block; } }

/* content-upgrade callout (the lead magnet) */
.cu-box { background:var(--bg-raised); border:1px solid var(--border-gold); border-radius:var(--r-md); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--glow-gold); margin-block:var(--sp-5); }
.cu-box .cu-k { font-size:0.68rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.14em; color:var(--titan-gold); }
.cu-box h3 { font-size:1.3rem; margin-top:0.5rem; }
.cu-box p { color:var(--text-body); font-size:0.92rem; margin-top:0.5rem; }
.cu-box .nl-form { margin-top:var(--sp-4); }

/* key takeaways + insight callouts */
.takeaways { background:var(--bg-surface); border:1px solid var(--border-hair); border-radius:var(--r-md); padding:clamp(1.4rem,3vw,1.9rem); margin-block:var(--sp-5); }
.takeaways h3 { font-size:1.1rem; color:var(--titan-gold); }
.takeaways ul { margin-top:1rem; margin-left:0; list-style:none; display:grid; gap:0.7rem; }
.takeaways li { display:flex; gap:0.7rem; align-items:flex-start; color:var(--text-body); line-height:1.6; }
.takeaways li::before { content:"\2713"; color:var(--titan-gold); font-weight:700; margin-top:1px; }
.insight { border-left:2px solid var(--titan-gold); background:rgba(251,184,37,0.06); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:1.2rem 1.5rem; margin-block:var(--sp-5); }
.insight .ik { font-size:0.68rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.14em; color:var(--titan-gold); }
.insight p { color:#fff; font-weight:var(--w-semi); margin-top:0.4rem; line-height:1.5; }

/* mid-article inline CTA */
.inline-cta { text-align:center; background:var(--bg-surface); border:1px solid var(--border-hair); border-radius:var(--r-md); padding:clamp(1.6rem,3vw,2.2rem); margin-block:var(--sp-6); }
.inline-cta h3 { font-size:1.3rem; max-width:24ch; margin-inline:auto; }
.inline-cta p { color:var(--text-body); font-size:0.92rem; margin-top:0.5rem; }
.inline-cta .btn { margin-top:var(--sp-4); }

/* end-of-post: operator proof + apply */
.post-cta { margin-top:var(--sp-8); }
.op-proof { display:flex; gap:1.2rem; align-items:center; background:var(--bg-surface); border:1px solid var(--border-hair); border-left:2px solid var(--titan-gold); border-radius:var(--r-md); padding:1.5rem 1.7rem; }
.op-proof img { width:64px; height:64px; border-radius:50%; object-fit:cover; border:1.5px solid var(--border-gold); flex-shrink:0; }
.op-proof .res { font-size:1.05rem; color:#fff; font-weight:var(--w-semi); line-height:1.4; }
.op-proof cite { display:block; margin-top:0.4rem; font-style:normal; font-size:0.82rem; color:var(--text-muted); }
.op-proof .res b { color:var(--titan-gold); }
@media (max-width:520px){ .op-proof { flex-direction:column; text-align:center; } }
.apply-card { text-align:center; background:var(--bg-raised); border:1px solid var(--border-gold); border-radius:var(--r-lg); padding:clamp(2rem,4vw,3rem); margin-top:1.25rem; box-shadow:var(--glow-gold); }
.apply-card h2 { font-size:clamp(1.6rem,3vw,2.2rem); max-width:22ch; margin-inline:auto; }
.apply-card p { color:var(--text-body); margin-top:0.7rem; max-width:48ch; margin-inline:auto; }
.apply-card .btn { margin-top:var(--sp-4); }

/* author bio */
.author-bio { display:flex; gap:1.3rem; align-items:flex-start; background:var(--bg-surface); border:1px solid var(--border-hair); border-radius:var(--r-md); padding:1.6rem 1.8rem; margin-top:var(--sp-6); }
.author-bio img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:1.5px solid var(--border-gold); flex-shrink:0; }
.author-bio .ab-name { font-size:1.1rem; color:#fff; font-weight:var(--w-bold); }
.author-bio .ab-role { font-size:0.72rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.12em; color:var(--titan-gold); margin-top:0.2rem; }
.author-bio p { font-size:0.9rem; color:var(--text-body); margin-top:0.7rem; line-height:1.7; }
@media (max-width:520px){ .author-bio { flex-direction:column; } }

/* prev / next */
.prevnext { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:var(--sp-6); }
@media (max-width:600px){ .prevnext { grid-template-columns:1fr; } }
.prevnext a { background:var(--bg-surface); border:1px solid var(--border-hair); border-radius:var(--r-md); padding:1.3rem 1.5rem; transition:border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.prevnext a:hover { border-color:var(--border-gold); transform:translateY(-3px); }
.prevnext .pn-k { font-size:0.7rem; font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); }
.prevnext .pn-t { color:#fff; font-weight:var(--w-semi); margin-top:0.4rem; font-size:0.98rem; }
.prevnext a.next { text-align:right; }

/* membership offer page */
ul.nope { list-style:none; display:grid; gap:0.9rem; margin-top:var(--sp-4); }
ul.nope li { display:flex; gap:0.75rem; align-items:flex-start; color:var(--text-muted); }
ul.nope li::before { content:"\2715"; color:#7a7a7a; font-weight:700; margin-top:1px; }
.fit-card { background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-md); padding:2rem; }
.surface .fit-card { background:var(--bg-raised); }
.fit-card.yes { border-color:var(--border-gold); box-shadow:var(--glow-gold); }
.price-note { font-size:var(--t-sm); color:var(--text-muted); margin-top:0.5rem; }
.tier .inc { list-style:none; display:grid; gap:0.6rem; margin:0 0 1.6rem; }
.tier .inc li { display:flex; gap:0.6rem; align-items:flex-start; font-size:0.92rem; color:var(--text-body); }
.tier .inc li::before { content:"\2713"; color:var(--titan-gold); font-weight:700; }

/* ===== Mobile-first CRO refinements ===== */
@media (max-width:900px){
  /* prominent full-width primary CTAs above the fold */
  .hero .actions { flex-direction:column; align-items:stretch; gap:0.8rem; }
  .hero .actions .btn { width:100%; }
  /* no sticky-bar / menu overlap */
  body.menu-open .mbar { display:none; }
  /* bigger social tap targets */
  .socials a { width:42px; height:42px; }
  .socials svg { width:17px; height:17px; }
  /* collapsible (accordion) nav dropdowns in the mobile menu */
  .nav-links .nav-panel { max-height:0; overflow:hidden; padding:0 0 0 1rem; transition:max-height var(--dur-base) var(--ease-out); }
  /* iOS fires :hover on tap, which would trigger the desktop dropdown transform
     (translateX(-50%)) and shove the open accordion panel off-screen left.
     Neutralise transform/position for the mobile panel regardless of hover/focus. */
  .nav-links .nav-dd:hover .nav-panel,
  .nav-links .nav-dd:focus-within .nav-panel { transform:none; position:static; }
  .nav-links .nav-dd.open .nav-panel { max-height:70vh; padding:0.2rem 0 0.6rem 1rem; transform:none; position:static; }
  .nav-links .nav-trigger { justify-content:space-between; }
  .nav-links .nav-trigger .caret { transition:transform var(--dur-base) var(--ease-out); }
  .nav-links .nav-dd.open .nav-trigger .caret { transform:rotate(180deg); }
}

/* ---- Goal wall (Goals set. Goals achieved.) — member goals tracked in TitanOS ---- */
.goal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1.25rem; margin-top:var(--sp-6); }
.goal-card { background:var(--bg-raised); border:1px solid var(--border-hair); border-radius:var(--r-lg); padding:1.6rem 1.8rem; display:flex; flex-direction:column; gap:0.9rem; }
.surface .goal-card { background:var(--bg-base); }
.goal-card .gc-k { font-size:0.7rem; font-weight:var(--w-bold); letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.goal-card .gc-k b { color:var(--titan-gold); }
.goal-card .gc-goal { font-size:0.92rem; line-height:1.65; color:var(--text-muted); font-weight:400; flex:1; margin:0; }
.goal-card .gc-outcome { font-size:1.4rem; font-weight:var(--w-black); color:#fff; letter-spacing:-0.01em; line-height:1.25; }
.goal-card .gc-outcome .arr { color:var(--titan-gold); }
.goal-card .gc-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem 1rem; font-size:0.85rem; color:var(--text-muted); }
.goal-card .gc-achieved { color:var(--titan-gold); font-weight:var(--w-bold); }
.goal-card .gc-achieved::before { content:"\2713 "; }
.goal-card .gc-next { font-size:0.88rem; color:var(--text-muted); border-top:1px solid var(--border-hair); padding-top:0.8rem; margin:0; }

/* ============================================================
   AI WORKSHOP CAMPAIGN — announcement bar + exit-intent popup
   Behaviour + copy live in the AI_WEBINAR block at the top of site.js.
   Bar sits ABOVE the sticky header; header/progress are offset down by
   --aibar-h only while body.has-aibar is set (clean removal on dismiss).
   ============================================================ */
body.has-aibar { --aibar-h: 46px; }
@media (max-width:640px){ body.has-aibar { --aibar-h: 44px; } }
body.has-aibar > header { top: var(--aibar-h); }
body.has-aibar #progress { top: var(--aibar-h); }
@media (max-width:900px){ body.has-aibar .nav-links { top: calc(68px + var(--aibar-h)); } }
/* blog-post sticky rail + ToC clear the banner-shifted header */
body.has-aibar .post-rail .rail-inner { top: calc(88px + var(--aibar-h)); max-height: calc(100svh - 108px - var(--aibar-h)); }
body.has-aibar .toc { top: calc(92px + var(--aibar-h)); }

.aibar { position: sticky; top: 0; z-index: 110; height: var(--aibar-h); display: flex; align-items: center; justify-content: center; gap: 0.85rem; padding: 0 2.6rem; background: var(--titan-black); border-bottom: 1px solid var(--border-gold); box-shadow: 0 1px 0 rgba(251,184,37,0.08); }
.aibar-link { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; color: var(--text-strong); text-decoration: none; font-size: 0.875rem; line-height: 1; }
.aibar-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72vw; color: rgba(255,255,255,0.92); }
.aibar-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--titan-gold); box-shadow: 0 0 0 0 rgba(251,184,37,0.55); animation: aibar-pulse 2.2s var(--ease-standard) infinite; }
.aibar-cta { flex: none; background: var(--titan-gold); color: var(--titan-black); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; padding: 0.42rem 0.85rem; border-radius: var(--r-sm); white-space: nowrap; transition: background var(--dur-fast); }
.aibar-link:hover .aibar-cta { background: var(--titan-gold-dark); }
.aibar-x { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: var(--r-sm); transition: color var(--dur-fast); }
.aibar-x:hover { color: #fff; }
.aibar-d { display: inline; }
.aibar-m { display: none; }
@media (max-width:640px){
  .aibar { gap: 0.5rem; padding: 0 2.2rem 0 0.7rem; }
  .aibar-d { display: none; }
  .aibar-m { display: inline; }
  .aibar-link { font-size: 0.75rem; gap: 0.45rem; }
  .aibar-dot { display: none; } /* reclaim width so the full short copy + CTA fit on narrow phones */
  .aibar-txt { max-width: 72vw; }
  .aibar-cta { font-size: 0.64rem; padding: 0.36rem 0.58rem; }
}
@keyframes aibar-pulse { 0%{ box-shadow:0 0 0 0 rgba(251,184,37,0.5);} 70%{ box-shadow:0 0 0 7px rgba(251,184,37,0);} 100%{ box-shadow:0 0 0 0 rgba(251,184,37,0);} }
@media (prefers-reduced-motion:reduce){ .aibar-dot { animation: none; } }

.aipop-ov { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(1rem,4vw,2rem); background: rgba(0,0,0,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: aipop-fade var(--dur-base) var(--ease-out); }
.aipop { position: relative; width: min(100%,560px); max-height: 92vh; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-gold); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: clamp(1.75rem,4vw,2.75rem); animation: aipop-rise var(--dur-base) var(--ease-out); }
.aipop-x { position: absolute; top: 0.75rem; right: 0.85rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-soft); background: rgba(17,17,17,0.5); color: #fff; font-size: 1.5rem; line-height: 1; border-radius: 50%; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast); }
.aipop-x:hover { color: var(--titan-gold); border-color: var(--border-gold); }
.aipop-eyebrow { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--text-gold); font-weight: var(--w-semi); margin: 0 0 0.6rem; }
.aipop-h { font-size: clamp(1.4rem,3.2vw,1.85rem); line-height: var(--lh-snug); color: var(--text-strong); margin: 0 0 0.75rem; max-width: 24ch; }
.aipop-b { font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-body); margin: 0 0 1.1rem; }
.aipop .ticks { margin: 0 0 1.2rem; }
.aipop-date { font-size: var(--t-sm); color: var(--text-gold); font-weight: var(--w-semi); margin: 0 0 1.2rem; }
.aipop-go { width: 100%; }
.aipop-decline { display: block; width: 100%; margin-top: 0.7rem; padding: 0.5rem; border: 0; background: transparent; color: var(--text-muted); font-family: inherit; font-size: var(--t-sm); cursor: pointer; transition: color var(--dur-fast); }
.aipop-decline:hover { color: var(--text-body); text-decoration: underline; }
@keyframes aipop-fade { from{ opacity:0; } to{ opacity:1; } }
@keyframes aipop-rise { from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform: none; } }
@media (max-width:640px){
  .aipop-ov { align-items: flex-end; padding: 0; }
  .aipop { width: 100%; max-height: 88vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
}
@media (prefers-reduced-motion:reduce){ .aipop-ov, .aipop { animation: none; } }