/* Page-specific styles for home (from inline \3c style>, shadowified). */
.hero { position: relative; padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); overflow: hidden; text-align: center; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(50% 38% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
  linear-gradient(180deg, var(--accent-faint), #fff 58%); }
.hero h1 { font-size: clamp(40px, 6.4vw, 82px); line-height: 1.0; max-width: 30ch; margin: 0 auto; }
.hero .lead { max-width: 56ch; margin: 24px auto 0; }
.hero .btn-row { justify-content: center; margin-top: 34px; }
.hero__notes { justify-content: center; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.hero__shot { margin-top: clamp(40px, 6vw, 72px); position: relative; }
.hero__shot .float { display: block; }
.float-card { background:#fff; border-radius:16px; border:1px solid var(--line-200); box-shadow: 0 24px 50px -24px rgba(33,56,86,0.4); padding: 13px 15px; }
.h-float-1 { position:absolute; top: 8%; left: -14px; width: 215px; z-index: 5; }
.h-float-2 { position:absolute; bottom: 12%; right: -14px; width: 220px; z-index: 5; }
.mini-h { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink-300); text-transform:uppercase; letter-spacing:.06em; }
.mini-h .ic{ width:14px;height:14px;color:var(--accent); }

/* loop / journey bento */
.loop { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.loop__card { background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-card); position:relative; transition: box-shadow var(--dur-base), transform var(--dur-base); display:block; }
.loop__card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.loop__ic { width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;margin-bottom:16px; }
.loop__ic .ic{ width:22px;height:22px; }
.loop__card h4 { font-size:18px; font-weight:600; color:var(--ink-900); }
.loop__card p { margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink-400); }
.loop__more { margin-top:14px; font-size:13px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:5px; }
.loop__more .ic{ width:14px;height:14px; }
.loop__step { position:absolute; top:18px; right:20px; font-family:var(--display-font); font-weight:700; font-size:14px; color:var(--ink-200); }

.section-head { max-width: 760px; margin: 0 auto clamp(40px,5vw,60px); text-align:center; }
.section-head h2 { font-size: clamp(30px, 4.2vw, 50px); margin-top:16px; }
.section-head .eyebrow { margin: 0 auto; }
.section-head .lead { margin: 18px auto 0; }

/* feature row media - reuse shot patterns */
.fakeshot { padding: 18px; background: var(--surface-50); }
.chip2 { font-size:12.5px; font-weight:500; color:var(--ink-700); background:#fff; border:1px solid var(--line-200); border-radius:999px; padding:7px 12px; display:inline-flex; align-items:center; gap:6px; }
.chip2 .ic{ width:13px;height:13px;color:var(--accent); }
.cmp-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cmp-coach { display:flex; gap:11px; padding:13px; border-radius:13px; background:var(--accent-faint); border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); }
.cmp-coach .av{ flex:none;width:30px;height:30px;border-radius:999px;background:var(--accent);color:#fff;display:grid;place-items:center; }
.cmp-coach .av .ic{ width:16px;height:16px; }
.cmp-coach .txt{ font-size:13px;line-height:1.45;color:var(--ink-700); }
.cmp-coach .txt b{ color:var(--ink-900); }
.row-card { background:#fff;border:1px solid var(--line-200);border-radius:13px;padding:13px;margin-bottom:11px; }
.row-card__top{ display:flex;align-items:center;gap:10px;margin-bottom:9px; }
.row-card__av{ width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-bright));flex:none; }
.row-card__top b{ font-size:13px;color:var(--ink-900); } .row-card__top small{ display:block;font-size:11px;color:var(--ink-300); }
.row-card__body{ font-size:13px;line-height:1.5;color:var(--ink-700); } .row-card__body .hk{ font-weight:700;color:var(--ink-900); }
.row-card__stats{ display:flex;gap:14px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line-100);font-size:12px;color:var(--ink-400); }
.row-card__stats span{ display:flex;align-items:center;gap:5px; } .row-card__stats .ic{ width:13px;height:13px; }

.cal { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.cal__col { display:flex; flex-direction:column; gap:8px; }
.cal__d { font-size:11px; color:var(--ink-300); text-align:center; font-weight:600; }
.cal__slot { height:34px; border-radius:8px; background:var(--surface-100); border:1px solid var(--line-200); }
.cal__slot.is-on { background:var(--accent-tint); border-color:color-mix(in srgb,var(--accent) 22%,transparent); }
.cal__slot.is-now { background:var(--accent); }

.barchart{ display:flex;align-items:flex-end;gap:10px;height:130px; }
.barchart .bar{ flex:1;border-radius:7px 7px 0 0;background:var(--accent-tint); }
.barchart .bar.is-hi{ background:var(--accent); }

.testi-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.tcard{ background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-card); }
.tcard p{ font-size:15px;line-height:1.55;color:var(--ink-700); }
.tcard .who{ display:flex;align-items:center;gap:11px;margin-top:20px; }
.tcard .who .av{ width:44px;height:44px;border-radius:999px;object-fit:cover;flex:none;background:var(--line-100); } .tcard .who img.av{ object-fit:cover; } .tcard-li{ width:20px;height:20px;margin-left:auto;flex:none; }
.tcard .who b{ font-size:14px;color:var(--ink-900);display:block; } .tcard .who small{ font-size:12px;color:var(--ink-300); }
.tcard .stars{ color:#F5A623;display:flex;gap:2px;margin-bottom:13px; } .tcard .stars .ic, .tcard .stars svg{ width:16px;height:16px;fill:currentColor;stroke:currentColor; }

@media (max-width:900px){ .loop{ grid-template-columns:1fr 1fr; } .testi-grid{ grid-template-columns:1fr; } .h-float-1,.h-float-2{ display:none; } }
@media (max-width:560px){ .loop{ grid-template-columns:1fr; } }

/* ----- Masterclasses & playbooks ----- */
.mc-band{ background:var(--ink-900); color:#fff; }
.mc-band .section-head h2{ color:#fff; }
.mc-band .eyebrow{ color:#fff; }
.mc-band .eyebrow::before{ background:#fff; }
.mc-band .section-head .lead{ color:rgba(255,255,255,0.7); }
.mc-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:24px; align-items:stretch; }
.mc-feature{ position:relative; border-radius:var(--radius-2xl); overflow:hidden; background:#000; display:flex; flex-direction:column; min-height:420px; }
.mc-feature__cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mc-feature__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,20,0.15) 0%, rgba(10,12,20,0.35) 45%, rgba(10,12,20,0.92) 100%); z-index:1; }
.mc-feature__top{ position:relative; z-index:2; padding:22px; display:flex; gap:10px; }
.mc-feature__body{ position:relative; z-index:2; margin-top:auto; padding:28px; }
.mc-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:7px 13px; border-radius:999px; background:var(--accent); color:#fff; }
.mc-pill .ic{ width:14px; height:14px; }
.mc-pill--ghost{ background:rgba(255,255,255,0.16); backdrop-filter:blur(8px); }
.mc-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; }
.mc-play span{ width:74px; height:74px; border-radius:999px; background:rgba(255,255,255,0.92); display:grid; place-items:center; box-shadow:0 12px 40px rgba(0,0,0,0.4); transition:transform var(--dur-base); }
.mc-feature:hover .mc-play span{ transform:scale(1.08); }
.mc-play .ic{ width:30px; height:30px; color:var(--accent); margin-left:3px; }
.mc-author{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.mc-author image-slot, .mc-author .av{ width:42px; height:42px; border-radius:999px; flex:none; border:2px solid rgba(255,255,255,0.5); }
.mc-author b{ display:block; font-size:14px; color:#fff; }
.mc-author small{ font-size:12px; color:rgba(255,255,255,0.65); }
.mc-feature__body h3{ font-family:var(--display-font); font-weight:700; font-size:clamp(24px,2.6vw,32px); line-height:1.12; color:#fff; margin:0 0 14px; max-width:18ch; }
.mc-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.mc-chip{ font-size:12.5px; font-weight:600; color:#fff; background:rgba(255,255,255,0.14); border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px; }
.mc-chip .ic{ width:13px; height:13px; }
.mc-list{ display:flex; flex-direction:column; gap:14px; }
.mc-row{ display:flex; align-items:center; gap:16px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-xl); padding:14px; text-decoration:none; transition:background var(--dur-base), border-color var(--dur-base), transform var(--dur-base); flex:1; }
.mc-row:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.22); transform:translateX(3px); }
.mc-row__thumb{ position:relative; width:92px; height:68px; border-radius:12px; flex:none; overflow:hidden; }
.mc-row__thumb .mc-row__play{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.mc-row__thumb .mc-row__play span{ width:30px; height:30px; border-radius:999px; background:rgba(255,255,255,0.92); display:grid; place-items:center; }
.mc-row__thumb .mc-row__play .ic{ width:14px; height:14px; color:var(--accent); margin-left:1px; }
.mc-row__c{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mc-row__tag{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-bright); }
.mc-row__t{ font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1.25; color:#fff; margin:3px 0 5px; }
.mc-row__by{ font-size:12px; color:rgba(255,255,255,0.6); }
.mc-row__arrow{ flex:none; width:34px; height:34px; border-radius:999px; background:rgba(255,255,255,0.1); display:grid; place-items:center; color:#fff; }
.mc-row__arrow .ic{ width:17px; height:17px; }
.mc-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; flex-wrap:wrap; }
.mc-cta p{ font-family:var(--display-font); font-weight:700; font-size:clamp(20px,2.2vw,26px); color:#fff; margin:0; }
@media (max-width:900px){ .mc-grid{ grid-template-columns:1fr; } .mc-feature{ min-height:360px; } }

/* ----- Hero feature tabs ----- */
.hero-stagewrap{ width:100%; margin-top:clamp(22px,3vw,38px); }
.hero-tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.hero-tab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink-400); background:#fff; border:1px solid var(--line-200); border-radius:999px; padding:9px 15px; cursor:pointer; transition:background .15s,color .15s,border-color .15s,box-shadow .15s; }
.hero-tab svg,.hero-tab .ic{ width:16px; height:16px; }
.hero-tab:hover{ color:var(--ink-900); border-color:var(--line-300); }
.hero-tab{ position:relative; overflow:hidden; }
.hero-tab.is-active{ background:#fff; border-color:var(--line-300); color:var(--ink-900); box-shadow:0 6px 18px -10px rgba(33,56,86,.18); }
.hero-tab__bar{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--accent); border-radius:0 3px 3px 0; }
.hero-tab.is-active .hero-tab__bar{ animation:heroTabBar 5s linear forwards; }
@keyframes heroTabBar{ from{width:0} to{width:100%} }
.hero-stage{ position:relative; max-width:1000px; margin:0 auto; text-align:left; }
.hero-panel{ display:none; }
.hero-panel.is-active{ display:block; animation:heroPanelIn .45s var(--ease-out); }
@keyframes heroPanelIn{ from{opacity:0;transform:translateY(12px) scale(.99)} to{opacity:1;transform:none} }
.hero .typed::after{ content:"▍"; color:var(--accent); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }
.hero .cmp-post{ font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--ink-900); }
.hero .cmp-post .hk{ font-weight:700; }
.thumb{ width:46px; aspect-ratio:4/5; border-radius:7px; flex:none; outline:2px solid transparent; transition:outline-color .35s, box-shadow .35s; }
.status{ padding:4px 9px; font-size:11px; border-radius:999px; font-weight:600; display:inline-flex; align-items:center; gap:5px; flex:none; }
.status .ic,.status svg{ width:11px; height:11px; }
.status--accepted{ background:var(--accent-tint); color:var(--accent); }
.status--sent{ background:color-mix(in srgb,var(--success-500) 16%,white); color:var(--success-500); }
.status--req{ background:var(--surface-100); color:var(--ink-400); }
.metric{ background:#fff; border:1px solid var(--line-200); border-radius:12px; padding:13px; }
.metric .l{ font-size:11px; color:var(--ink-300); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.metric .v{ font-family:var(--display-font); font-weight:700; font-size:20px; color:var(--ink-900); margin-top:4px; }
.metric .d{ font-size:11px; color:var(--success-500); font-weight:600; display:flex; align-items:center; gap:3px; margin-top:3px; }
.metric .d .ic,.metric .d svg{ width:12px; height:12px; }
.spark{ display:flex; align-items:flex-end; gap:4px; height:54px; }
.spark span{ flex:1; border-radius:4px 4px 0 0; background:var(--accent-tint); }
.spark span.hi{ background:var(--accent); }
@media (max-width:560px){ .hero-tab{ font-size:13px; padding:8px 12px; } }

/* ----- Home fixes ----- */
:host, :host, .tap-landing{ --accent-pink:#EC6181; }
/* Hero flows naturally (no fixed height / inner scroll) and lets the glow bleed out. */
.hero, .hero--home, .hero__stage{ overflow:visible; height:auto; }
.hero-shot{ position:relative; }
/* Merged hero + proof: one blue glow sits behind the tabs/video and BLEEDS DOWN into
   the proof strip below (they're now the same component, so no section border clips it). */
.hero__stage{ position:relative; margin-top:clamp(22px,3vw,38px); }
.hero__stage-inner, .hero__proof{ position:relative; z-index:1; }
.hero__proof{ padding-top:clamp(34px,4vw,54px); padding-bottom:clamp(40px,5vw,74px); }
.hero__glow{ position:absolute; left:50%; top:-4%; transform:translateX(-50%);
  width:min(1260px,98%); height:120%; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 50% at 50% 44%, color-mix(in srgb,var(--brand-500) 42%, transparent), transparent 74%),
    radial-gradient(44% 46% at 22% 30%, color-mix(in srgb,#5B7BF0 32%, transparent), transparent 68%),
    radial-gradient(48% 48% at 80% 60%, color-mix(in srgb,var(--brand-500) 32%, transparent), transparent 68%),
    linear-gradient(180deg, transparent 52%, color-mix(in srgb,var(--brand-500) 14%, transparent) 80%, transparent 100%);
  filter:blur(50px); }
@media (prefers-reduced-motion:no-preference){ .hero__glow{ animation:heroGlow 9s ease-in-out infinite alternate; } }
@keyframes heroGlow{ from{transform:translate(-52%,1%) scale(1); opacity:.85;} to{transform:translate(-48%,-3%) scale(1.1); opacity:1;} }
/* inside the hero visual: neutralize functional accents to a light grayscale (keeps the brand logo) */
.hero-shot .shot{ --brand-700:#9097A3; --brand-600:#A8AEB9; --brand-500:#C2C7CF; --brand-bright:#A8AEB9; --brand-50:#F1F2F5; --brand-25:#F8F9FB; }
/* Z-pattern checkmarks use the pink accent color */
.featrow .checklist .ic{ color:var(--accent-pink); }
/* last Z-pattern (Lead Gen): the active "Sequences" tab highlighted in grayscale */
#leads .featrow__media .taptab.is-active{ background:#3C424B; border-color:#3C424B; }
/* Masterclasses band: animated blue gradient instead of black */
.mc-band{ background:linear-gradient(125deg,#2C49E6 0%,#3A63FF 42%,#7AA0FF 100%); background-size:260% 260%; }
@media (prefers-reduced-motion:no-preference){ .mc-band{ animation:mcBand 11s ease-in-out infinite; } }
@keyframes mcBand{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.mc-band .mc-pill{ background:rgba(255,255,255,0.18); color:#fff; }
.mc-band .mc-row__tag{ color:#C9D4FF; }
.mc-band .mc-play .ic, .mc-band .mc-row__play .ic{ color:#26408F; }
/* proof-strip avatars + support card */
.pf-avatars{ display:flex; justify-content:center; margin:0 0 14px; }
.pf-avatars image-slot{ width:46px; height:46px; border-radius:999px; border:3px solid #fff; margin-left:-12px; box-shadow:var(--shadow-card); background:var(--surface-100); overflow:hidden; }
.pf-avatars image-slot:first-child{ margin-left:0; }
.pf-sub{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-300); margin:0 0 30px; }
.support-card{ max-width:760px; margin:44px auto 0; display:flex; align-items:center; gap:22px; background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-xl); padding:20px 26px; box-shadow:var(--shadow-card); }
.support-card__avs{ display:flex; flex:none; }
.support-card__avs image-slot{ width:48px; height:48px; border-radius:999px; border:3px solid #fff; margin-left:-14px; background:var(--surface-100); box-shadow:var(--shadow-card); overflow:hidden; }
.support-card__avs image-slot:first-child{ margin-left:0; }
.support-card__txt{ flex:1; min-width:0; }
.support-card__txt b{ display:block; font-family:var(--display-font); font-weight:700; font-size:17px; color:var(--ink-900); }
.support-card__txt p{ margin:4px 0 0; font-size:15px; line-height:1.45; color:var(--ink-400); }
.support-card .btn{ flex:none; }
@media (max-width:600px){ .support-card{ flex-direction:column; text-align:center; align-items:stretch; } .support-card__avs{ justify-content:center; } }