/* =====================================================================
   AnchorWorks — Strategy-Session Funnel (stripped chrome)
   Loaded ALONGSIDE styles-kk.css. New file; does not affect other pages.
   Reuses brand tokens/components from styles-kk.css.
   ===================================================================== */

/* Micro announcement bar */
.microbar { background: var(--charcoal-2); border-bottom: 1px solid var(--hairline-2); text-align: center;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; padding-block: .55rem; }

/* Stripped header — logo only, no nav, no CTA */
.funnel-header { padding-block: 1.05rem; border-bottom: 1px solid var(--hairline-2); background: rgba(15,18,20,.55); }
.funnel-header .container { display: flex; justify-content: center; align-items: center; }
.funnel-header img { height: 32px; width: auto; }

/* VSL / video frame (16:9) with a clearly-marked placeholder */
.vsl { max-width: 880px; margin-inline: auto; }
.vsl__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--hairline); background: linear-gradient(180deg, var(--ocean-2), var(--charcoal)); box-shadow: var(--shadow-card); }
.vsl__frame iframe, .vsl__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vsl__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; }
.vsl__ph .play { width: 72px; height: 72px; border-radius: 50%; background: var(--gold-tint); border: 1px solid rgba(198,166,106,.4);
  display: grid; place-items: center; margin: 0 auto 1rem; }
.vsl__ph .play svg { width: 26px; height: 26px; fill: var(--gold); margin-left: 4px; }
.vsl__ph .tag { display: inline-block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: var(--charcoal); background: var(--gold); padding: .3rem .6rem; border-radius: 5px; margin-bottom: .7rem; }
.vsl__ph p { color: var(--bone-dim); font-size: .9rem; margin: .2rem 0; }
.vsl__ph code { color: var(--gold-bright); font-size: .82rem; }

/* Progress bar (Step X of 3) */
.progress { max-width: 640px; margin: 0 auto 2.4rem; }
.progress__label { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; letter-spacing: .03em; color: var(--bone-dim); margin-bottom: .55rem; }
.progress__label strong { color: var(--gold); font-weight: 600; }
.progress__track { height: 10px; border-radius: 100px; background: var(--hairline); overflow: hidden; }
.progress__fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: width .6s var(--ease); }

/* Confirmation visuals */
.confirm-check { width: 78px; height: 78px; border-radius: 50%; background: rgba(198,166,106,.15);
  border: 1px solid rgba(198,166,106,.4); display: grid; place-items: center; margin: 0 auto 1.4rem; }
.confirm-check svg { width: 38px; height: 38px; stroke: var(--gold); fill: none; }
.banner-ok { display: inline-flex; align-items: center; gap: .6rem; background: rgba(120,170,118,.12);
  border: 1px solid rgba(120,170,118,.45); color: #c2e3c0; border-radius: 100px; padding: .65rem 1.25rem; font-size: .9rem; font-weight: 600; }
.banner-ok svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }

/* Minimal funnel footer */
.funnel-footer { background: var(--charcoal-2); border-top: 1px solid var(--hairline); padding-block: 2.2rem; text-align: center; }
.funnel-footer__links { display: flex; gap: 1.3rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.funnel-footer__links a { color: var(--bone-dim); font-size: .84rem; transition: color .3s var(--ease); }
.funnel-footer__links a:hover { color: var(--gold); }
.funnel-footer__copy { font-size: .8rem; color: var(--bone-faint); margin-bottom: 1.1rem; }
.funnel-footer__legal { max-width: 900px; margin-inline: auto; }
.funnel-footer__legal p { font-size: .68rem; line-height: 1.55; color: var(--bone-faint); margin-bottom: .6rem; }

/* Tighten section rhythm on funnel pages */
.funnel-main .section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.funnel-cta { text-align: center; }

/* Cinematic hero variants for funnel (reuses homepage .hero / .hero__bg / .hero__grain) */
.hero--compact { padding-block: clamp(2.4rem, 1.5rem + 3vw, 4.2rem) clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }
.hero--compact .hero__bg img { opacity: .22; }
.hero .vsl { margin-inline: auto; }
.hero__qualifier { color: var(--bone-faint); font-size: .88rem; font-style: italic; max-width: 58ch; margin: 1.1rem auto 0; }

/* ---- Above-the-fold tightening (funnel pages only) ---- */
.topbar__inner { padding-block: .42rem; }
.funnel-header { padding-block: .65rem; }
.funnel-header img { height: 28px; }
.hero--funnel { padding-block: clamp(1.1rem, .5rem + 1.6vw, 2rem) clamp(1.3rem, .7rem + 1.6vw, 2.3rem); }
.hero--funnel .progress { margin: 0 auto 1rem; }
.hero--funnel .hero__sub { margin-top: .5rem; margin-bottom: 0; max-width: 60ch; }
.vsl--hero { max-width: 680px; }
.hero--funnel .form-ph { margin-top: 1.2rem; }

/* =====================================================================
   Webinar funnel (HVAC War Room) — registration, gold modal, confirmation
   ===================================================================== */
.live-badge { display:inline-block; vertical-align:middle; background:#c0392b; color:#fff;
  font-family:var(--sans); font-weight:800; font-size:.34em; letter-spacing:.12em;
  padding:.28em .6em; border-radius:7px; margin-left:.4em; transform:translateY(-.22em);
  box-shadow:0 0 22px rgba(192,57,43,.55); }

/* value row (3-up, icon + heading + text) */
.vicon { width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-tint); border:1px solid rgba(198,166,106,.35); margin:0 auto 1.1rem; }
.vicon svg { width:26px; height:26px; stroke:var(--gold); fill:none; }
.valuerow .ocard { text-align:center; }

/* social proof bar */
.proofbar__title { font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); }
.proofbar__industries { margin-top:.7rem; color:var(--gold); font-family:var(--serif);
  font-size:clamp(1.05rem,.9rem+.6vw,1.5rem); letter-spacing:.03em; }

/* trust badges (placeholders) */
.trust-badges { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; align-items:center; }
.tbadge { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--hairline);
  border-radius:10px; padding:.55rem .85rem; font-size:.78rem; color:var(--bone-dim); background:rgba(15,18,20,.4); }
.tbadge strong { color:var(--bone); }
.tbadge .stars svg { width:12px; height:12px; }
.tbadge--ph { border-style:dashed; border-color:rgba(198,166,106,.4); }

/* ---- Modal (gold, matches mockup 02) ---- */
.modal { position:fixed; inset:0; z-index:200; display:none; }
.modal.is-open { display:block; }
.modal__overlay { position:absolute; inset:0; background:rgba(8,10,11,.82); backdrop-filter:blur(4px); }
.modal__card { position:relative; z-index:1; width:min(560px,92vw); max-height:92vh; overflow:auto;
  margin:5vh auto; background:linear-gradient(180deg,var(--charcoal),var(--charcoal-2));
  border:1px solid rgba(198,166,106,.5); border-radius:var(--radius-lg); padding:2.4rem 2.2rem;
  box-shadow:0 40px 100px -30px #000; text-align:center; }
.modal__card::before { content:""; position:absolute; inset:10px; border:1px solid rgba(198,166,106,.22);
  border-radius:16px; pointer-events:none; }
.modal__card > * { position:relative; }
.modal__close { position:absolute; top:.9rem; right:1rem; width:34px; height:34px; border-radius:8px;
  background:transparent; border:1px solid var(--hairline); color:var(--bone-dim); cursor:pointer; font-size:1.1rem; line-height:1; }
.modal__close:hover { border-color:var(--gold); color:var(--gold); }
.modal__brand { font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:.3rem 0 1.3rem; }
.modal__brand img { width:34px; height:34px; margin:0 auto .5rem; display:block; }
.modal h2 { font-size:clamp(2rem,1.4rem+2.2vw,2.9rem); color:var(--gold-bright); line-height:1.05; margin-bottom:.6rem; }
.modal__sub { color:var(--bone-dim); font-size:.95rem; margin-bottom:1.3rem; }
.modal__seclabel { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:1.3rem 0 1rem; }
.gold-field { width:100%; display:flex; align-items:center; gap:.7rem; background:rgba(15,18,20,.6);
  border:1px solid rgba(198,166,106,.35); border-radius:var(--radius); padding:.9rem 1rem; margin-bottom:.8rem;
  color:var(--bone-faint); text-align:left; font-size:.95rem; }
.gold-field svg { width:18px; height:18px; stroke:var(--gold); fill:none; flex:none; }
.modal__privacy { display:flex; gap:.6rem; align-items:flex-start; text-align:left; color:var(--bone-faint); font-size:.78rem; margin-top:1.1rem; }
.modal__privacy svg { width:16px; height:16px; stroke:var(--gold); fill:none; flex:none; margin-top:2px; }
.modal__ghl-note { font-size:.72rem; color:var(--gold-bright); border:1px dashed rgba(198,166,106,.5);
  border-radius:10px; padding:.7rem .8rem; margin-top:1rem; text-align:left; }
.modal__ghl-note code { color:var(--gold-bright); }