/* ==========================================================================
   Landing (webinar) page — page-scoped CSS. Loaded via a <link> HtmlEmbed so
   it overrides Webflow's compiled bundle. Tokens (--accent, --line, --ink,
   --font-*) resolve at runtime from Global Styles.
   ========================================================================== */

/* ---- Font: restore source body font (Hanken) over .tq-site's Inter ---- */
.block, .lp-nav, .lp-foot { font-family: var(--font-body); }
.lp-hero .lede, .head-split .lede, .lp-subtitle, .lp-meta span,
.lp-speaker-body p, .jrn-desc, .lp-quote .lp-q-name, .lp-quote .lp-q-role,
.lp-badge, .stat-l, .lp-form p, .lp-form .lp-fine, .lp-form .lp-field,
.ic-meta p, .cta-final p { font-family: var(--font-body); }

/* ---- Live / on-demand visibility toggle ---- */
.only-od { display: none; }
.is-ondemand .only-live { display: none; }
.is-ondemand .only-od { display: inline; }
.is-ondemand span.only-od { display: inline; }

/* ---- Section rhythm / borders (source used inline styles + .section-alt) ---- */
#top { padding-top: clamp(18px,2.4vw,34px); padding-bottom: clamp(24px,2.8vw,40px); }
#socialproof { padding-top: 0; }
#learn, #agenda, #testimonials { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- Reveal (source fade-in; overrides Webflow's flattened .reveal) ---- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================ NAV ============================ */
.lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(250,250,248,.9); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); }
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.lp-nav .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.lp-nav .brand-logo { height: 26px; width: auto; display: block; }

/* ============================ HERO ============================ */
.lp-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-hero .display { margin: 12px 0 0; }
.lp-hero .display.h1-compact { font-size: clamp(1.85rem, 3.4vw, 2.9rem); line-height: 1.12; max-width: 24ch; letter-spacing: -0.035em; text-wrap: balance; }
.lp-hero .lede { margin-top: 12px; font-size: 15.5px; line-height: 1.62; max-width: 58ch; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.lp-eyebrow .lp-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(241,90,34,.16); }
.lp-subtitle { margin-top: 12px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.02rem, 1.5vw, 1.25rem); line-height: 1.4; letter-spacing: -.015em; color: var(--ink-soft); max-width: 50ch; }
.lp-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; }
.lp-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-soft); }
.lp-meta .iconify { color: var(--accent); font-size: 17px; }
.lp-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; font-size: 14px; color: var(--ink-soft); }
.lp-badge b { color: var(--ink); font-weight: 600; }
.lp-badge .lp-faces { display: inline-flex; }
.lp-badge .lp-faces img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); object-fit: cover; margin-left: -8px; }
.lp-badge .lp-faces img:first-child { margin-left: 0; }

/* ---- Registration form ---- */
.lp-form { background: var(--card); border: 1px solid var(--line); padding: clamp(24px, 2.6vw, 34px); box-shadow: 0 30px 70px -40px rgba(14,26,46,.35); }
.lp-form h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; }
.lp-form p { color: var(--ink-mute); font-size: 13.5px; margin-top: 6px; }
.lp-form .lp-field { display: block; width: 100%; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 14.5px; color: var(--ink); height: auto; line-height: normal; }
.lp-form .lp-field:focus { outline: none; border-color: var(--accent); }
.lp-form .w-input, .lp-form .w-select { margin-bottom: 0; }
.lp-form .btn { width: 100%; justify-content: center; margin-top: 14px; }
.lp-form .lp-fine { display: block; text-align: center; color: var(--ink-mute); font-size: 12.5px; margin-top: 12px; }

/* ============================ SOCIAL PROOF ============================ */
.lp-trustlabel { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 clamp(24px, 3vw, 38px); }
.trust2 { display: grid; grid-template-columns: repeat(3, 1fr) 1.55fr; grid-auto-rows: minmax(120px, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: clamp(28px, 3.5vw, 44px); }
.trust2-wide { grid-template-columns: repeat(5, 1fr) 1.5fr; grid-auto-rows: minmax(104px, 1fr); }
.trust2-cell { position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: clamp(18px, 2vw, 26px); text-decoration: none; transition: background .18s ease; }
.trust2-cell:hover { background: var(--bg-2); }
.trust2-logo { height: 22px; width: auto; max-width: 118px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .22s ease, opacity .22s ease; }
.trust2-cell:hover .trust2-logo { filter: none; opacity: 1; }
.trust2-read { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; }
.trust2-read .trust2-arr { position: static; opacity: .5; font-size: 15px; color: var(--ink-mute); transition: color .2s ease, opacity .2s ease; }
.trust2-cell:hover .trust2-read .trust2-arr { opacity: 1; color: var(--accent); }
.trust2-read-t { font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--accent); white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(6px); transition: max-width .3s ease, opacity .2s ease, transform .3s ease; }
.trust2-cell:hover .trust2-read-t { max-width: 90px; opacity: 1; transform: none; }
.trust2-wide .trust2-feat { grid-column: 6; }
.trust2-feat { grid-row: 1 / span 2; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(24px, 2.4vw, 32px); text-decoration: none; color: #fff; background: linear-gradient(170deg, rgba(255,255,255,.08), transparent 42%, rgba(0,0,0,.16)), var(--brand, #16161b); overflow: hidden; }
.trust2-feat-logo { height: 20px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; filter: none; opacity: 1; }
.trust2-featbody { position: relative; z-index: 1; }
.trust2-stat { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: .95; white-space: nowrap; font-size: clamp(30px, 3.4vw, 46px); color: #fff; }
.trust2-statlabel { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.45; margin-top: 10px; max-width: 22ch; }

/* ============================ WHAT YOU'LL LEARN ============================ */
.lp-keyebrow { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 14px; }
.head-split { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(40px, 8vw, 120px); align-items: start; margin-bottom: clamp(36px, 5vw, 52px); }
.head-split .section-title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.65rem); }
.head-split .lede { margin: 0; padding-top: 5px; }
.icard { display: flex; flex-direction: column; padding: clamp(20px, 2.8vw, 40px) clamp(28px, 4vw, 60px); }
.ic-art { display: grid; place-items: center; padding: clamp(20px, 4vw, 40px) 0 clamp(28px, 4vw, 48px); }
.ic-art .iso { width: 100%; max-width: 248px; height: auto; }
.ic-meta h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; letter-spacing: -0.015em; }
.ic-meta p { color: var(--ink-soft); margin-top: 11px; font-size: 15px; line-height: 1.55; max-width: 40ch; }
/* Landing 4-up treatment (single row on desktop) */
.lp-why { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.lp-why .icard { border: 0; padding: clamp(18px, 1.8vw, 26px); border-right: 1px solid var(--line); }
.lp-why .icard:last-child { border-right: 0; }
.lp-why .ic-art { padding: 8px 0 16px; }
.lp-why .ic-art .iso { max-width: 148px; }
.lp-why .ic-meta h3 { font-size: 1.02rem; }
.lp-why .ic-meta p { font-size: 13.5px; margin-top: 8px; line-height: 1.5; }

/* SVG art (knowledge-graph / plate / lineage motifs) */
.iso path, .iso ellipse { stroke: #2B2B31; stroke-width: 1.2; stroke-opacity: .82; stroke-linejoin: round; stroke-linecap: round; }
.iso ellipse { fill: none; }
.iso .ft { fill: rgba(20,20,27,.022); }
.iso .fl { fill: rgba(20,20,27,.05); }
.iso .fr { fill: rgba(20,20,27,.085); }
.iso .kge { stroke: #2B2B31; stroke-width: 1.3; stroke-opacity: .5; stroke-linecap: round; stroke-dasharray: 3 5; transition: stroke .3s ease, stroke-opacity .3s ease; }
.iso .kgn, .iso .ln-node, .iso .ln-sub { fill: #fff; stroke: #2B2B31; stroke-width: 1.4; transition: stroke .3s ease; }
.iso .kgn-hub, .iso .ln-node-mid { fill: rgba(241,90,34,.12); stroke: var(--accent); }
.iso .beam { stroke: #2B2B31; stroke-opacity: .55; stroke-linecap: round; transition: stroke .3s ease, stroke-opacity .3s ease; }
.iso .ln-dot { fill: var(--accent); transform-box: fill-box; }
.icard:hover .iso .kge, .icard:hover .iso .beam { stroke: var(--accent); stroke-opacity: .9; }
.icard:hover .iso .kgn, .icard:hover .iso .ln-node, .icard:hover .iso .ln-sub { stroke: var(--accent); }
.iso .plate { transform-box: fill-box; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.icard:hover .iso .plate { transform: translateY(calc(var(--i,0) * -11px)); animation: none; }
.icard:hover .iso .plate-top path { stroke: var(--accent); }
.icard:hover .iso .plate-top .ft { fill: rgba(241,90,34,.10); }
@media (prefers-reduced-motion: no-preference) {
  .iso .kge { animation: kgflow 3s linear infinite; }
  .iso .kgn { transform-box: fill-box; transform-origin: center; animation: kgpulse 3.6s ease-in-out infinite; animation-delay: calc(var(--i,0) * .35s); }
  .iso .plate { animation: platefloat 4.2s ease-in-out infinite; animation-delay: calc(var(--i,0) * .5s); }
  .iso .ln-dot { animation: lntrace 2.8s ease-in-out infinite; }
}
@keyframes kgflow { to { stroke-dashoffset: -16; } }
@keyframes kgpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes platefloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes lntrace { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(108px); opacity: 0; } }

/* ============================ SPEAKERS ============================ */
.lp-speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(30px, 3.5vw, 46px); }
.lp-speaker { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.lp-speaker-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; background: var(--bg-2); border-bottom: 1px solid var(--line); display: block; }
.lp-speaker-body { padding: clamp(22px, 2.4vw, 32px); }
.lp-speaker-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.7vw, 1.55rem); letter-spacing: -.02em; }
.lp-speaker-body .role { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink, #C7440F); }
.lp-speaker-body p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin-top: 16px; }

/* ============================ AGENDA (journey timeline) ============================ */
.jrn-layout { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(40px, 8vw, 120px); align-items: start; }
.jrn-aside { position: sticky; top: clamp(96px, 13vh, 132px); }
.jrn-aside .section-title { margin: 0; }
.jrn-main .lede { margin: 0; padding-top: 5px; }
.journey { position: relative; margin-top: clamp(40px, 5vw, 64px); margin-left: 5px; }
.jrn-item { position: relative; padding: 1px 0 clamp(48px, 6vw, 88px) clamp(28px, 3.2vw, 48px); }
.jrn-item:last-child { padding-bottom: 0; }
.jrn-item::before { content: ""; position: absolute; z-index: 1; left: -5px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.jrn-item:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 4px; bottom: 0; width: 1px; background: var(--line-strong); }
.jrn-year { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--accent-ink,#C7440F); }
.jrn-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.32rem); letter-spacing: -.015em; margin: 8px 0 0; }
.jrn-desc { font-size: .96rem; color: var(--ink-soft); line-height: 1.62; margin-top: 9px; max-width: 52ch; }

/* ============================ TRUST STATS ============================ */
.statframe { margin-top: clamp(48px, 6vw, 84px); }
.statframe--plain { border: 0; background: none; margin-top: clamp(40px, 5vw, 72px); }
.srow { display: grid; }
.srow.stats { grid-template-columns: repeat(4, 1fr); }
.statframe--plain .cell { border: 0; padding: clamp(16px, 2vw, 28px) clamp(16px, 2vw, 30px); text-align: center; }
.stat-n { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.3rem); letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.statframe--plain .stat-n { color: var(--accent); }
.statframe--plain .stat-l { color: var(--ink-soft); font-size: 15px; margin-top: 14px; max-width: 22ch; margin-left: auto; margin-right: auto; }

/* ============================ TESTIMONIALS ============================ */
.lp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.lp-quote { display: flex; flex-direction: column; border: 0; background: var(--ink); padding: clamp(24px, 2.6vw, 32px); }
.lp-quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; line-height: 1.45; letter-spacing: -.01em; color: #fff; margin: 0; padding: 0; border: 0; flex: 1; }
.lp-quote .lp-q-who { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.lp-quote .lp-q-who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.lp-quote .lp-q-name { display: block; font-weight: 600; font-size: 14.5px; color: #fff; }
.lp-quote .lp-q-role { display: block; font-size: 13px; color: rgba(255,255,255,.62); margin-top: 1px; }

/* ============================ CLOSING CTA ============================ */
.cta-footer { padding-top: 0; padding-bottom: 0; }
.cta-final { position: relative; border-radius: 0; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(54px,8vw,100px) clamp(28px,5vw,72px); text-align: center; }
.cta-final .callout-glow { display: none; }
.cta-final .callout-inner { position: relative; z-index: 1; }
.cta-final .eyebrow.plain { display: inline-block !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cta-final h2 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,5vw,3.6rem); max-width: 18ch; margin: 16px auto 0; letter-spacing: -.03em; }
.cta-final p { color: rgba(255,255,255,.78); margin: 22px auto 0; max-width: 50ch; font-size: 1.12rem; }
.cta-final .hero-actions { justify-content: center; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cta-final .btn-ghost { background: transparent; box-shadow: none; color: #fff; border-color: rgba(255,255,255,.32); }
.cta-final .btn-ghost:hover { border-color: #fff; }

/* ============================ FOOTER ============================ */
.lp-foot { border-top: 1px solid var(--line); padding: clamp(26px, 3.4vw, 42px) 0; }
.lp-foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-foot .brand-logo { height: 24px; width: auto; display: block; }
.lp-foot-copy { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-quotes { grid-template-columns: 1fr; }
  .jrn-layout { grid-template-columns: 1fr; }
  .head-split { grid-template-columns: 1fr; }
  .lp-speakers { grid-template-columns: 1fr; }
  .srow.stats { grid-template-columns: 1fr 1fr; }
  .trust2-wide { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(96px, 1fr); }
  .trust2-wide .trust2-feat { grid-column: 1 / span 2; grid-row: auto; }
}
@media (max-width: 1080px) {
  .lp-why { grid-template-columns: 1fr 1fr; }
  .lp-why .icard:nth-child(2n) { border-right: 0; }
  .lp-why .icard:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .lp-why { grid-template-columns: 1fr; }
  .lp-why .icard { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .lp-why .icard:last-child { border-bottom: 0 !important; }
}
@media (max-width: 560px) {
  .srow.stats { grid-template-columns: 1fr; }
  .trust2-wide { grid-template-columns: 1fr; }
  .trust2-wide .trust2-feat { grid-column: 1; }
}