/* hjl.solutions on Bubi: Bubi's parts dressed in the site's own look. */
/* A video's frame (Bubi writes it into the page, the video's shape with its thumbnail in it; the player goes inside):
   only its corners are ours. */
[data-bubi-video] > [data-bubi-frame],
[data-bubi-webinar] > [data-bubi-frame] { border-radius: 12px; }
.funnel-video-part { width: 100%; }
[data-bubi-countdown-done] .funnel-next { margin-top: 1rem; }
[hidden] { display: none !important; }

/* The AI trading pages' header stays at the top as the page scrolls — on step 2 and the training room, and the landing
   page's on a computer (on a phone it scrolls away with the page; its bar at the bottom carries the button). Once the page has scrolled, the landing
   header's icon button becomes the full "Watch the free training" button (the class is set by site.js). It keeps one
   height either way, so nothing below it jumps. */
.webinar-topbar { position: sticky; top: 0; z-index: 50; min-height: 76px; background: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax -1px); transition: box-shadow .3s var(--ease); }
.webinar-topbar[data-scrolled="true"] { box-shadow: 0 0 0 100vmax var(--ink), 0 1px 0 100vmax var(--hair); }
.webinar-icon-btn-label { display: none; }
.webinar-topbar[data-scrolled="true"] .webinar-icon-btn { display: inline-flex; gap: 6px; width: auto; min-width: 0; height: auto; min-height: 0; padding: 5px 12px; border: 1px solid var(--white); border-radius: 6px; font-size: .8rem; line-height: 1.4; }
.webinar-topbar[data-scrolled="true"] .webinar-icon-btn .webinar-icon-wrap,
.webinar-topbar[data-scrolled="true"] .webinar-icon-btn .webinar-icon-wrap svg { width: 14px; height: 14px; }
.webinar-topbar[data-scrolled="true"] .webinar-icon-btn-label { display: inline; }
/* The logo's mark just taller than the HJL.SOLUTIONS capitals, here and in every page's footer. */
.webinar-topbar .logo svg, .footer .logo svg { width: 20px; height: 20px; }
/* A phone: overflow-x: clip in place of hidden, which would stop step 2's and the training room's header sticking; the
   header is just the logo on the left (the landing page's button lives in the bar at the bottom instead) — the full
   logo on the landing page, only its mark, larger, on step 2 and the training room. */
@media (max-width: 640px) {
  .ai-trading-landing { overflow-x: clip; }
  .webinar-topbar { min-height: 56px; margin-bottom: 8px; justify-content: flex-start; }
  .webinar-topbar .funnel-brand { margin-inline: 0; }
  .webinar-topbar .logo svg { width: 17px; height: 17px; }
  .webinar-topbar .logo-type { font-size: .94rem; }
  .ai-trading-bar .logo svg { width: 24px; height: 24px; }
  .ai-trading-bar .logo-type { display: none; }
  .webinar-topbar[data-scrolled="true"] .webinar-icon-btn { display: none; }
}

/* The AI trading hero fills the first screen under the header, centred in it: the label, the headline, the
   line beneath it and the button. The headline is three lines, five on a phone (sized so its longest line fits). */
@media (min-width: 641px) {
  .webinar-topbar { min-height: 72px; margin-bottom: 8px; }
  .webinar-topbar .webinar-icon-btn { width: 32px; min-width: 32px; height: 32px; min-height: 0; padding: 0; }
  .webinar-topbar .webinar-icon-btn .webinar-icon-wrap,
  .webinar-topbar .webinar-icon-btn .webinar-icon-wrap svg { width: 24px; height: 24px; }
  .ai-trading-hero { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 88px); }
  .ai-trading-hero-copy { padding: 0 0 clamp(24px, 6vh, 64px); }
  .ai-trading-hero .ai-trading-kicker { margin-bottom: clamp(14px, 2.4vh, 22px); }
  .ai-trading-hero .webinar-title { font-size: clamp(2rem, min(4.2vw, 8vh), 3.6rem); line-height: 1.04; margin-bottom: clamp(16px, 2.6vh, 26px); }
  .ai-trading-hero .lead { margin-bottom: 0; font-size: clamp(1rem, 2.6vh, 1.25rem); }
  .ai-trading-hero .webinar-cta { margin-top: clamp(24px, 4vh, 40px); }
}
@media (max-width: 640px) {
  .ai-trading-hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 76px); }
  .ai-trading-hero-copy { padding: 0 0 6vh; }
  .ai-trading-hero .ai-trading-kicker { margin-bottom: 20px; }
  .ai-trading-hero .webinar-title { font-size: clamp(1.5rem, min(8.2vw, 4.6vh), 2.15rem); line-height: 1.08; margin-bottom: 22px; }
  .ai-trading-hero .webinar-title span { white-space: nowrap; }
  .ai-trading-hero .lead { font-size: 1.1rem; line-height: 1.5; }
  .ai-trading-hero .webinar-cta { margin-top: 32px; }
}
/* "The opportunity" sits just below the fold, so it comes into view as soon as the reader scrolls. */
.webinar-funnel.ai-trading-funnel .ai-trading-hero { margin-bottom: 0 !important; }
.webinar-funnel.ai-trading-funnel .ai-trading-space--hero { height: 32px; }
/* A phone: tighter gaps, matching the space under the hero's button. */
@media (max-width: 640px) {
  .webinar-funnel.ai-trading-funnel .ai-trading-space--hero { height: 0; }
}
/* The headline's middle line in silver, painted a little below the line so the tails of g and p are silver
   too, without moving the line under it. */
/* The headline is five lines on a phone (the breaks are .ai-trading-br), worded "How to turn your Claude & ChatGPT
   into AI trading partners...", and three on a wider screen ("...into your AI trading partners"). */
.ai-trading-hero .webinar-title .ai-trading-phone-only, .vx-bottom-cta h2 .ai-trading-phone-only { display: none; }
.ai-trading-hero .webinar-title .ai-trading-wide-only, .ai-trading-hero .lead .ai-trading-wide-only, .vx-bottom-cta .ai-trading-wide-only { display: inline; }
@media (min-width: 641px) { .ai-trading-br { display: none; } }
@media (max-width: 640px) {
  .ai-trading-hero .webinar-title .ai-trading-phone-only, .vx-bottom-cta h2 .ai-trading-phone-only { display: inline; }
  .ai-trading-hero .webinar-title .ai-trading-wide-only, .ai-trading-hero .lead .ai-trading-wide-only, .vx-bottom-cta .ai-trading-wide-only { display: none; }
}
.ai-trading-silver { padding-bottom: .16em; margin-bottom: -.16em; background: linear-gradient(180deg, #f1f3f5 0%, #b9bec6 55%, #8a9099 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The eyebrow dot: still, in silver; smaller between "FREE TRAINING" and "AI TRADING" in the hero's label. */
.webinar-eyebrow-dot { width: 7px; height: 7px; animation: none; background: linear-gradient(180deg, #f1f3f5, #8a9099); box-shadow: 0 0 0 3px #ffffff14; }
.ai-trading-kicker .webinar-eyebrow-dot { flex: none; width: 5px; height: 5px; border-radius: 999px; box-shadow: 0 0 0 2px #ffffff14; }
@media (max-width: 359px) { .ai-trading-hero .ai-trading-kicker { gap: 10px; letter-spacing: .2em; white-space: nowrap; } }
/* The line under the headline: centred, its lines balanced; on a phone it spans the headline's full width and
   stops after "partner!" (the rest is .ai-trading-wide-only). */
.ai-trading-hero .lead { max-width: 54rem; margin-inline: auto; text-align: center; text-wrap: balance; }
@media (max-width: 640px) { .ai-trading-hero .lead { width: 100%; max-width: 22.5rem; text-wrap: pretty; } }
@media (max-width: 390px) { .ai-trading-hero .lead { max-width: 20.5rem; } }

/* The AI trading pages' buttons in silver, the pop-up form's own button and step 2's included. */
.ai-trading-funnel .webinar-cta, .ai-trading-funnel .webinar-cta:hover, .ai-trading-funnel .webinar-cta:hover:not(:disabled),
.ai-trading-funnel .funnel-next, .ai-trading-funnel .funnel-next:hover,
.webinar-topbar[data-scrolled="true"] .webinar-icon-btn, .webinar-topbar[data-scrolled="true"] .webinar-icon-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f4f5f7 0%, #ccd0d6 55%, #9ea4ac 100%); color: var(--ink); border-color: #e4e7eb; box-shadow: inset 0 1px 0 #ffffffb3, 0 8px 24px #00000040;
}
.ai-trading-funnel .webinar-cta:hover:not(:disabled), .ai-trading-funnel .funnel-next:hover, .webinar-topbar[data-scrolled="true"] .webinar-icon-btn:hover:not(:disabled) { filter: brightness(1.06); }
/* The note under the last button. */
.ai-trading-cta-note { margin: 12px 0 0; font-size: .85rem; line-height: 1.5; color: var(--tone); }
@media (max-width: 640px) { .ai-trading-cta-note { text-align: center; } }

/* The section labels (above "What you'll learn" and the FAQ), centred: a short silver line, then spaced
   white capitals. */
.ai-trading-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 clamp(64px, 9vh, 96px); font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--white); }
.ai-trading-kicker::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #8a9099, #e4e7eb); }
.ai-trading-kicker + .ai-trading-split-stack { margin-top: 0; }
/* A phone: the agent face beside "What you'll learn" is left out. */
@media (max-width: 640px) { .ai-trading-icon-art { display: none; } }

/* One gap between the sections ("What you'll learn" to the FAQ, the FAQ to the closer). It grows with the
   screen's height as the space under the hero's button does, so all three breaks read the same. */
.ai-trading-funnel { --ai-trading-gap: clamp(96px, calc(41.3vh - 97px), 320px); }
@media (max-width: 640px) { .ai-trading-funnel { --ai-trading-gap: clamp(80px, calc(41.3vh - 175px), 240px); } }
.webinar-funnel.ai-trading-funnel .ai-trading-split-stack { margin-bottom: 0; }
.ai-trading-faq { width: min(100%, 44rem); margin: var(--ai-trading-gap) auto 0; padding: 0; text-align: left; }
@media (max-width: 760px) { .ai-trading-faq { width: min(100%, 22rem); } }
.ai-trading-faq-title { margin: 0 0 40px; font-weight: 700; font-size: clamp(1.55rem, 2.8vw, 2rem); line-height: 1.15; text-align: center; }
.ai-trading-faq-item { border-top: 1px solid var(--hair-lit); }
.ai-trading-faq-item:first-of-type { border-top: 0; }
.ai-trading-faq-item:last-of-type { border-bottom: 1px solid var(--hair-lit); }
.ai-trading-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; line-height: 1.35; }
.ai-trading-faq-item summary::-webkit-details-marker { display: none; }
.ai-trading-faq-item summary::after { content: "+"; flex: none; font-weight: 400; color: var(--tone); transition: transform .3s var(--ease); }
.ai-trading-faq-item[open] summary::after { transform: rotate(45deg); }
.ai-trading-faq-item p { margin: 0 0 20px; color: #d8dbe0; font-size: .92rem; line-height: 1.6; }

/* The closing section under the FAQ: the last word and the last button, with a measured gap to the footer. */
.ai-trading-closer { width: min(100%, 46rem); margin: var(--ai-trading-gap) auto 0; text-align: center; }
/* Desktop: the closer sits closer to the FAQ than the other breaks. */
@media (min-width: 641px) { .ai-trading-closer { margin-top: calc(var(--ai-trading-gap) * .6); } }
.ai-trading-closer-title { margin: 0; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.ai-trading-closer-lead { margin: 24px auto 0; max-width: 40rem; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; color: #c4c8ce; }
.ai-trading-closer-sign { margin: 24px 0 0; color: var(--tone); }
.ai-trading-closer .webinar-cta { display: flex; width: min(100%, 340px); margin: 40px auto 0; padding: 15px 28px; font-size: 1.1rem; }
.ai-trading-closer .webinar-cta .webinar-icon-wrap, .ai-trading-closer .webinar-cta .webinar-icon-wrap svg { width: 22px; height: 22px; }
.ai-trading-closer .ai-trading-cta-note { text-align: center; }
.ai-trading-closer ~ .ai-trading-space--footer { height: 0; }
.webinar-funnel.ai-trading-funnel { padding-bottom: clamp(24px, 3vh, 40px); }

/* The sign-up pop-up: its close is a plain centred ×, its title may wrap on a phone, and every layer of the
   form shrinks to the box (a field's own default width, or a grid's minimum, would push it past a narrow
   screen's edge). */
.webinar-modal-close { display: flex; align-items: center; justify-content: center; border: 0; text-decoration: none; font-size: 26px; opacity: .7; transition: opacity .2s var(--ease); }
.webinar-modal-close:hover, .webinar-modal-close:focus-visible { opacity: 1; }
.webinar-modal-title { margin-bottom: 6px; white-space: normal; }
.ai-trading-form-sub { margin: 0 0 22px; text-align: center; font-size: .9rem; color: var(--tone); }
.ai-trading-form-small { margin: 4px 0 0; font-size: .78rem; line-height: 1.5; text-align: center; color: var(--tone); }
.webinar-modal .field-optional { font-weight: 400; color: var(--tone); }
.webinar-modal .webinar-form, .webinar-modal .webinar-fields, .webinar-modal .field, .webinar-modal .ai-trading-phone, .webinar-modal .check { min-width: 0; max-width: 100%; }
.webinar-modal .webinar-fields { grid-template-columns: minmax(0, 1fr); }
.webinar-modal .field input { width: 100%; min-width: 0; box-sizing: border-box; }
/* The form's phone: a small country code box (flag and code; the list behind it names every country)
   beside the number, in the same dark field style. site.js sends the two as one international number. */
.ai-trading-phone { display: flex; gap: 8px; }
.ai-trading-phone input { flex: 1; min-width: 0; }
.ai-trading-phone-code { position: relative; flex: none; display: flex; align-items: center; min-height: 42px; padding: 0 30px 0 12px; border: 1px solid var(--hair); border-radius: 10px; background: var(--ink-raised); color: var(--white); white-space: nowrap; transition: border-color .3s var(--ease); }
.ai-trading-phone-code::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.ai-trading-phone-code:focus-within { border-color: var(--white); }
.ai-trading-phone-code select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* The offer under the training (H, 2026-10-13): when the broadcast reaches it, a white page opens below the film, laid
   out as a webinar offer page — the call to action with its countdown first, then the three plans (each a plan button,
   kit members 0016), how it works, the questions, and the call again. Once the window has closed the whole page stays, marked expired (below). */
.ai-trading-training-page:has([data-bubi-offer-panel]:not([hidden])) { padding-bottom: 0; }
.ai-trading-training-page .offer-page { --o-ink: #0b0c0e; --o-muted: #5b6068; --o-hair: #e5e7eb; --o-soft: #f5f6f8; margin: clamp(48px, 7vh, 80px) 0 0; padding: 0; border: 0; border-radius: 0; position: relative; background: #fff; border-image: linear-gradient(#fff 0 0) fill 0 / 0 / 0 100vmax; color: var(--o-ink); text-align: center; }
/* A black point where the film's section meets the white offer page, centred, cutting into the white; it starts a
   touch above the white's edge so no hairline shows between them (the white reaches the screen's sides, never above). */
.ai-trading-training-page .offer-page::before { content: ""; position: absolute; top: -2px; left: 50%; width: 120px; height: 42px; transform: translateX(-50%); background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.offer-page-body > section { max-width: 1040px; margin: 0 auto; padding: clamp(56px, 8vh, 88px) 0; }
.offer-kicker { margin: 0 0 14px; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--o-muted); }
.offer-title { margin: 0 auto 16px; max-width: 18em; font-size: clamp(1.7rem, 4.4vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; color: var(--o-ink); text-wrap: balance; }
.offer-lead { margin: 0 auto 30px; max-width: 34em; color: var(--o-muted); font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.55; text-wrap: pretty; }
.offer-heading { margin: 0 auto 36px; max-width: 22em; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--o-ink); text-wrap: balance; }
.offer-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; width: min(100%, 360px); padding: 16px 28px; border: 0; border-radius: 12px; background: var(--o-ink); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 10px 28px #0b0c0e33; transition: transform .2s, box-shadow .2s; }
.offer-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px #0b0c0e40; }
.offer-timer { margin: 16px 0 0; color: var(--o-muted); font-size: .95rem; }
.offer-secure { margin: 10px 0 0; color: var(--o-muted); font-size: .82rem; }
.offer-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; text-align: left; }
.offer-plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border: 1px solid var(--o-hair); border-radius: 18px; background: #fff; }
.offer-plan--featured { border: 2px solid var(--o-ink); box-shadow: 0 18px 48px #0b0c0e1f; }
.offer-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--o-ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.offer-plan-name { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--o-ink); }
.offer-plan-who { margin: 6px 0 18px; min-height: 2.9em; color: var(--o-muted); font-size: .92rem; line-height: 1.45; }
.offer-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.offer-plan-price s { color: var(--o-muted); font-size: 1.05rem; }
.offer-plan-price strong { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; color: var(--o-ink); }
.offer-plan-price span { color: var(--o-muted); }
.offer-plan-save { align-self: flex-start; margin: 8px 0 22px; padding: 3px 10px; border-radius: 999px; background: #e9f7ee; color: #146c3a; font-size: .8rem; font-weight: 700; }
.offer-plan .offer-cta { width: 100%; }
.offer-plan:not(.offer-plan--featured) .offer-cta { border: 1.5px solid var(--o-ink); background: #fff; color: var(--o-ink); box-shadow: none; }
.offer-plan-lead { margin: 24px 0 10px; color: var(--o-ink); font-size: .92rem; font-weight: 600; }
.offer-plan-list { margin: 0; padding: 0; list-style: none; }
.offer-plan-list li { position: relative; padding: 7px 0 7px 26px; color: #2b2f35; font-size: .93rem; line-height: 1.4; }
.offer-plan-list li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 11px; height: 6px; border-left: 2px solid var(--o-ink); border-bottom: 2px solid var(--o-ink); transform: rotate(-45deg); }
/* The offer's opening: its headline on two lines on every screen, its first line on two lines on a computer. */
.offer-hero .offer-title { max-width: 11.5em; }
@media (min-width: 641px) { .offer-hero .offer-lead { max-width: 44em; text-wrap: balance; } }
/* The offer's countdowns: hours, minutes and seconds each in a clean outlined box, its name above it. */
.offer-countdown { display: flex; justify-content: center; gap: 10px; margin: 12px 0 0; }
/* The last section: its heading close above its countdown, the button below. */
.offer-final .offer-heading { margin-bottom: 12px; }
.offer-final .offer-countdown { margin: 0 0 26px; }
/* More room under the last section's small print before the footer. */
.offer-page-body > section.offer-final { padding-bottom: clamp(112px, 16vh, 176px); }
.offer-countdown-unit { display: grid; justify-items: center; gap: 6px; }
.offer-timer:has(.offer-countdown) { color: #3d4249; }
.offer-countdown-unit small { font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: #2a2e34; }
.offer-countdown-unit span { display: block; width: clamp(64px, 15vw, 84px); padding: 12px 0; border: 1.5px solid #6f747c; border-radius: 12px; background: #fff; color: var(--o-ink); font-family: var(--mono); font-size: clamp(1.5rem, 3.6vw, 2rem); font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.offer-steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; text-align: left; }
.offer-steps li { counter-increment: step; padding: 26px; border-radius: 16px; background: var(--o-soft); }
.offer-steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; border-radius: 999px; background: var(--o-ink); color: #fff; font-weight: 700; }
.offer-steps strong, .offer-steps span { display: block; }
.offer-steps strong { margin-bottom: 6px; color: var(--o-ink); font-size: 1.05rem; }
.offer-steps span { color: var(--o-muted); font-size: .95rem; line-height: 1.5; }
.offer-faq { max-width: 720px; margin: 0 auto; text-align: left; }
.offer-faq details { border-top: 1px solid var(--o-hair); }
.offer-faq details:last-child { border-bottom: 1px solid var(--o-hair); }
.offer-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; color: var(--o-ink); font-weight: 600; }
.offer-faq summary::-webkit-details-marker { display: none; }
.offer-faq summary::after { content: "+"; flex: none; color: var(--o-muted); transition: transform .3s; }
.offer-faq details[open] summary::after { transform: rotate(45deg); }
.offer-faq p { margin: 0 0 18px; color: var(--o-muted); font-size: .95rem; line-height: 1.6; }
.offer-fine { max-width: 60ch; margin: 28px auto 0; color: var(--o-muted); font-size: .78rem; line-height: 1.5; }
.offer-ended { padding: clamp(56px, 8vh, 88px) 0; }
/* Once the offer window has closed (H, 2026-10-18) the whole offer page stays: the countdowns sit at 00, the headings
   above them say "Offer has expired", the intro says the price was for 24 hours, and every button says "Offer expired"
   and can no longer be clicked or reached with the keyboard (the button is hidden; its label draws the button). */
.offer-page:has(.offer-ended:not([hidden])) .offer-ended { display: none; }
.offer-page:has(.offer-ended:not([hidden])) :is(.offer-timer, .offer-final .offer-heading, .offer-hero .offer-lead) { font-size: 0; max-width: none; }
.offer-page:has(.offer-ended:not([hidden])) .offer-timer::before { content: "Offer has expired"; display: block; font-size: .95rem; }
.offer-page:has(.offer-ended:not([hidden])) .offer-final .offer-heading::before { content: "Offer has expired"; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.offer-page:has(.offer-ended:not([hidden])) .offer-hero .offer-lead::after { content: "Unlock the power of Timo Trades, the AI-first trading platform used throughout this training, at a bonus price that was available for 24 hours after the training."; display: block; max-width: 34em; margin: 0 auto; font-size: clamp(1rem, 1.8vw, 1.15rem); }
@media (min-width: 641px) { .offer-page:has(.offer-ended:not([hidden])) .offer-hero .offer-lead::after { max-width: 44em; } }
.offer-page:has(.offer-ended:not([hidden])) [data-bubi-offer-button][hidden] { display: inline-flex !important; }
.offer-page:has(.offer-ended:not([hidden])) .offer-cta { position: relative; visibility: hidden; box-shadow: none; transform: none; }
.offer-page:has(.offer-ended:not([hidden])) .offer-cta::after { content: "Offer expired"; visibility: visible; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid #d4d7dc; border-radius: inherit; background: #eef0f2; color: #6b7079; font-size: 1.05rem; font-weight: 700; pointer-events: none; }
@media (max-width: 860px) {
  .offer-plans, .offer-steps { grid-template-columns: 1fr; }
  .offer-plans { max-width: 440px; margin: 0 auto; gap: 28px; }
  .offer-plan-who { min-height: 0; }
}

/* A phone: the "Watch now" bar along the bottom of the screen, under a thin silver line. It slides up as soon as
   "The opportunity" comes into view (site.js), opens the pop-up, and its × puts it away for the visit. A computer
   keeps the button in the header instead. */
.ai-trading-dock { display: none; }
@media (max-width: 640px) {
  .ai-trading-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) 16px; background: #08090bf2; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .4s var(--ease); }
  .ai-trading-dock::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #8a9099, #f1f3f5 50%, #8a9099); }
  .ai-trading-dock.is-shown { transform: none; }
  .ai-trading-dock-copy { flex: 1; min-width: 0; margin: 0; display: grid; gap: 2px; font-family: var(--mono); line-height: 1.3; }
  .ai-trading-dock-kicker { font-size: .74rem; color: var(--tone); }
  .ai-trading-dock-line { font-size: .84rem; color: var(--white); }
  .ai-trading-funnel a.ai-trading-dock-btn { flex: none; width: auto; min-width: 0; margin: 0; padding: 10px 18px; border-radius: 999px; font-size: .95rem; }
  .ai-trading-dock-close { flex: none; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--tone); font-size: 22px; line-height: 1; cursor: pointer; }
}

/* Every page's footer small print: the copyright line and the links all at 11px. */
.footer :is(.footer-nav a, .footer-fine) { font-size: 11px; }
@media (max-width: 640px) { .footer .footer-bottom .footer-nav { gap: 10px 18px; } }
/* Step 2 (the watch page): the countdown in a thin silver outline, clear of the video; on a phone the page fills
   the first screen, so the footer starts below it. */
.ai-trading-watch .funnel-countdown { position: relative; width: fit-content; margin: 44px auto 0; padding: 14px 30px 16px; border-radius: 14px; }
.ai-trading-watch .funnel-countdown::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(180deg, #f1f3f5 0%, #b9bec6 55%, #8a9099 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@media (max-width: 640px) { .ai-trading-watch { min-height: 100svh; } }
/* Step 2: a clear gap between the countdown (or the button and note) and the footer. */
.webinar-funnel.ai-trading-funnel.ai-trading-watch { padding-bottom: clamp(96px, 14vh, 160px); }
/* Step 2's label in silver; its headline smaller and balanced over its lines (never one word alone); at zero the countdown gives way to the button, in its
   place, with the reminder below it. */
.ai-trading-watch .funnel-training-heading .eyebrow { background: linear-gradient(180deg, #f4f5f7 0%, #ccd0d6 55%, #9ea4ac 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-trading-watch .funnel-training-heading h1 { margin-bottom: 0; font-size: clamp(1.05rem, 5.3vw, 2.6rem); line-height: 1.12; text-wrap: balance; }
/* The arrow close under the headline, the video close under the arrow. */
.ai-trading-watch .funnel-training-heading { padding-bottom: 14px; }
.ai-trading-watch .funnel-training-heading .watch-step-cue { margin: 12px 0 0; }
/* Shown only once the page knows the countdown is running: never a wrong time (or a 0:00) while it is still asking. */
.ai-trading-watch .funnel-countdown:not(:has([data-bubi-state="running"])) { visibility: hidden; }
.ai-trading-watch .funnel-countdown:has([data-bubi-state="done"]) { display: none; }
.ai-trading-watch [data-bubi-countdown-done] .funnel-next { margin-top: 44px; }

/* Step 2 and the training room: the landing page's header bar, the logo on the left and, once there is somewhere to
   go, one button on the right — step 2's "Start the training" once its countdown is over (a part shown at zero), the
   training room's offer with its countdown once the offer is open (shown only while that countdown runs). Bubi sends
   both as they stand, so a reload shows them at once. The header takes the space the headline sat below. */
.webinar-topbar.ai-trading-bar { justify-content: space-between; flex-wrap: nowrap; gap: 12px; }
.webinar-topbar .funnel-brand { display: flex; align-items: center; } /* the box hugs the logo, so the logo itself is centred in the bar */
.ai-trading-bar .funnel-brand { margin-inline: 0; }
.ai-trading-bar .ai-trading-bar-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 0; height: auto; min-height: 0; padding: 5px 12px; border: 1px solid #e4e7eb; border-radius: 6px; font-size: .8rem; line-height: 1.4; white-space: nowrap; background: linear-gradient(180deg, #f4f5f7 0%, #ccd0d6 55%, #9ea4ac 100%); color: var(--ink); box-shadow: inset 0 1px 0 #ffffffb3, 0 8px 24px #00000040; }
.ai-trading-bar .ai-trading-bar-btn:hover { filter: brightness(1.06); }
.ai-trading-bar .ai-trading-bar-btn .webinar-icon-wrap, .ai-trading-bar .ai-trading-bar-btn .webinar-icon-wrap svg { width: 14px; height: 14px; }
/* The training room's offer button: a gift on the left, a thin divider, then "CLAIM YOUR OFFER!" over "Ends in:" and
   its countdown (the time a little bolder). The countdown line spans exactly the width of the line above. Smaller on a phone. */
.ai-trading-bar .ai-trading-bar-offer { gap: 10px; padding: 5px 13px 5px 10px; text-align: left; }
.ai-trading-bar-offer-text { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding-left: 10px; border-left: 1px solid #0b0c0e40; }
.ai-trading-bar-offer-title { font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1.15; }
.ai-trading-bar-offer-time { display: flex; justify-content: space-between; gap: 6px; font-size: .74rem; font-weight: 400; letter-spacing: .09em; line-height: 1.2; }
.ai-trading-bar-offer-time [data-bubi-countdown] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }
.ai-trading-bar-gift { flex: none; width: 28px; height: 28px; }
@media (max-width: 640px) {
  .ai-trading-bar .ai-trading-bar-offer { gap: 8px; padding: 4px 10px 4px 8px; }
  .ai-trading-bar-offer-text { padding-left: 8px; }
  .ai-trading-bar-offer-title { font-size: .64rem; }
  .ai-trading-bar-offer-time { font-size: .66rem; }
  .ai-trading-bar-gift { width: 22px; height: 22px; }
}
.ai-trading-bar-offer:not(:has([data-bubi-state="running"])) { display: none !important; }
.ai-trading-watch .funnel-training-heading { padding-top: max(0px, calc(clamp(64px, 11vh, 126px) - 64px)); }
@media (min-width: 641px) { .ai-trading-watch .funnel-training-heading { padding-top: max(0px, calc(clamp(64px, 11vh, 126px) - 80px)); } }
.ai-trading-training-page #offer-plans { scroll-margin-top: 88px; }
/* On a computer: step 2's video a little narrower; the training room's as wide as its header, its edges in line with
   the logo and the header's button. A phone's videos already run edge to edge with the header. */
@media (min-width: 641px) {
  .ai-trading-watch .funnel-training-stage { max-width: 820px; }
  .ai-trading-training-page .funnel-training-stage { max-width: none; }
}
/* The landing page's header is sticky on a computer and not on a phone (there the bar that pops up at the bottom carries
   the button), and sits at the very top as on step 2 and the training room, above the page's content in its own column;
   the space that sat above it now sits below it, so the hero stays where it was. */
.webinar-landing.ai-trading-landing { padding-top: 0; }
.webinar-topbar.ai-trading-landing-bar { position: relative; width: min(100% - 32px, 1180px); margin: 0 auto calc(8px + clamp(14px, 2.5vh, 30px)); }
@media (min-width: 641px) { .webinar-topbar.ai-trading-landing-bar { position: sticky; margin-bottom: 16px; } }
/* On a computer the header runs as wide as the footer (its logo and button where the footer's logo and links are), on
   every AI trading page — step 2's and the training room's whole column with it (their content keeps its own width, the
   training room's video as wide as the header). */
@media (min-width: 761px) {
  .webinar-topbar.ai-trading-landing-bar, .webinar-funnel.ai-trading-watch, .webinar-funnel.ai-trading-training-page { width: min(100% - 112px, 1704px); }
}
/* On a phone (up to the footer's own 760px) the header sits where the footer's and the main site's header do: 22px in
   from the screen's edges — step 2's and the training room's inside their page's column (16px in), the landing's on its own. */
@media (max-width: 760px) {
  .webinar-topbar.ai-trading-landing-bar { width: calc(100% - 44px); }
  .webinar-topbar.ai-trading-bar { margin-inline: 6px; }
}
/* Step 2's video a little narrower on a phone too, centred; its countdown, button and note keep their width. */
@media (max-width: 640px) { .ai-trading-watch .funnel-video-part { width: 88%; margin-inline: auto; } }
/* The main site's header (every page but the AI trading funnel's) matches the AI trading pages' header: the same
   height, the same logo size, its logo and buttons centred in it — 72px with a 20px mark on a computer, 56px with a
   17px mark on a phone. */
.site-header .header-inner { min-height: 72px; padding-top: 0; padding-bottom: 0; }
.site-header .logo svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .site-header .header-inner { min-height: 56px; }
  .site-header .logo svg { width: 17px; height: 17px; }
  .site-header .logo-type { font-size: .94rem; }
}

/* Its menu button and its "Meet The Family" box sized to the small mark: a 20px menu with fine lines, a 32px box. */
.site-header .site-nav a:last-child { min-height: 32px; padding: 0 14px; font-size: .88rem; }
.site-header .nav-toggle { width: 20px; height: 20px; gap: 4px; }
.site-header .nav-toggle span { width: 20px; height: 2px; }
/* The main site's free-training section (home and learn) says what the AI trading landing page's hero says, a size
   smaller: its headline (the middle line silver, five lines on a phone) and the grey line under it; its button
   white like the main site's other buttons. */
.vx-bottom-cta h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.04; letter-spacing: -.035em; }
.vx-bottom-cta h2 span { display: inline; white-space: nowrap; }
.vx-bottom-cta p { max-width: 48rem; color: #ffffffdb; font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.25; text-wrap: balance; }
.vx-bottom-cta .webinar-cta { width: min(100%, 260px); min-width: 0; margin-top: 14px; justify-content: center; }
.vx-bottom-cta .webinar-cta, .vx-bottom-cta .webinar-cta:hover { padding-inline: 20px; border: 0; border-radius: 3px; background: var(--white); color: var(--ink); font-weight: 750; }
.vx-bottom-cta .webinar-cta:hover:not(:disabled) { background: #ffffffe0; color: var(--ink); }
@media (max-width: 640px) {
  .vx-bottom-cta h2 { font-size: clamp(1.4rem, 7.2vw, 1.9rem); line-height: 1.08; }
  .vx-bottom-cta p { max-width: 21rem; font-size: 1rem; line-height: 1.25; text-wrap: pretty; }
  .vx-bottom-cta .webinar-cta { width: min(100%, 300px); margin-top: 16px; }
}
/* The page's own link in the shared header (/_parts/header.html): Bubi marks it aria-current="page" as each page is
   sent. Lit like a hovered link; "Meet The Family" keeps its own white button. */
.site-nav a[aria-current="page"]:not(:last-child) { color: var(--white); }
.site-nav a[aria-current="page"]:after { right: 0; }

/* Sherlock's step 2 (/sherlock, H 2026-10-26): the page a person reaches from the "Build my Jarvis" pop-up, open only
   to those who sent its form. What Sherlock is, the three steps, and where their install line appears. */
/* Sherlock (H 2026-10-27): the orb leads; the heading, the words and the steps are small and quiet beside it. */
.sherlock-hero { width: min(720px, 100%); margin: 0 auto; padding-top: clamp(8px, 3vh, 28px); display: grid; justify-items: center; text-align: center; }
/* The orb's canvas is square and the sphere fills its middle 58%: its empty edges are pulled in so the words sit close. */
.sherlock-orb { --orb: min(420px, 86vw); display: block; width: var(--orb); aspect-ratio: 1; margin: calc(var(--orb) * -.12) auto calc(var(--orb) * -.14); }
.sherlock-orb-small { --orb: min(300px, 70vw); }
/* On /sherlock the orb leads the page, sized so the whole page is in view without scrolling. */
.sherlock-orb-hero { --orb: clamp(170px, 31vh, 300px); }
@media (max-width: 520px) { .sherlock-orb-hero { --orb: clamp(140px, 20vh, 190px); } .sherlock-page .sherlock-lead { font-size: .88rem; } .sherlock-how li { padding: 9px 12px; font-size: .84rem; } }
.sherlock-title { margin: 0; color: var(--white); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.15; letter-spacing: .01em; text-wrap: balance; }
.sherlock-lead { max-width: 38rem; margin: 8px auto 0; color: #ffffffb8; font-size: .95rem; line-height: 1.5; text-align: center; text-wrap: balance; }
.sherlock-body { width: min(560px, 100%); margin: 14px auto clamp(40px, 8vh, 90px); display: grid; gap: 10px; }
.sherlock-how-title { margin: 6px 0 0; color: #8a9099; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-align: center; }
.sherlock-how { margin: 0; padding: 0; list-style: none; counter-reset: sherlock; display: grid; gap: 8px; }
.sherlock-how li { counter-increment: sherlock; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid #ffffff1a; border-radius: 6px; background: #ffffff06; color: #b7bcc3; font-size: .88rem; line-height: 1.45; }
.sherlock-how li::before { content: counter(sherlock); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--white); color: var(--ink); font-size: .78rem; font-weight: 800; }
.sherlock-how strong { color: var(--white); }

/* The survey: one question at a time, a bar that fills, answers that light up as they are picked. */
.sherlock-install-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: min(100%, 280px); margin-top: 4px; }
.sherlock-modal { width: min(520px, calc(100vw - 32px)); }
.sherlock-orb-modal { --orb: 150px; margin: -34px auto -30px; }
.quest-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.quest-count { flex: none; color: #8a9099; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.quest-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: #ffffff14; }
.quest-bar span { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #9ea4ac, #f4f5f7); box-shadow: 0 0 12px #ffffff66; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.quest-form { margin: 0; }
.quest-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.quest-step legend { padding: 0; margin-bottom: 14px; color: var(--white); font-size: 1.05rem; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.quest-hint { margin: -8px 0 12px; color: #8a9099; font-size: .82rem; }
.quest-pop { animation: quest-rise .42s cubic-bezier(.2, .8, .2, 1); }
@keyframes quest-rise { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.quest-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quest-option { position: relative; cursor: pointer; }
.quest-option input { position: absolute; opacity: 0; pointer-events: none; }
.quest-option span { display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border: 1px solid #ffffff24; border-radius: 6px; background: #ffffff05; color: #d6dade; font-size: .92rem; line-height: 1.3; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.quest-option:hover span { border-color: #ffffff59; transform: translateY(-1px); }
.quest-option input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.quest-option input:checked + span { border-color: var(--white); background: #ffffff1c; color: var(--white); box-shadow: 0 0 0 1px #ffffff40, 0 0 22px #ffffff26; animation: quest-pick .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes quest-pick { 40% { transform: scale(1.04); } }
.quest-step textarea { width: 100%; min-height: 92px; padding: 12px 14px; resize: vertical; font: inherit; font-size: .95rem; color: var(--white); background: var(--ink); border: 1px solid #ffffff2e; border-radius: 6px; }
.quest-step textarea:focus { outline: none; border-color: var(--white); }
.quest-next { display: block; width: min(100%, 220px); margin: 14px auto 0; padding: 11px 18px; border: 0; border-radius: 4px; background: var(--white); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 800; letter-spacing: .06em; cursor: pointer; transition: opacity .2s, transform .2s; }
.quest-next:disabled { opacity: .3; cursor: default; }
.quest-next:not(:disabled):hover { transform: translateY(-1px); }
.quest-send { margin-top: 16px; }
.quest-back { display: block; margin: 12px auto 0; padding: 4px 8px; border: 0; background: none; color: #8a9099; font: inherit; font-size: .8rem; cursor: pointer; }
.quest-back:hover { color: var(--white); }
@media (max-width: 520px) { .quest-options { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .quest-pop, .quest-option input:checked + span { animation: none; } .quest-bar span { transition: none; } }
.sherlock-install { padding: 16px 18px; border: 1px solid #ffffff38; border-radius: 6px; background: #ffffff0d; text-align: center; }
.sherlock-install-label { margin: 0 0 8px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; background: linear-gradient(180deg, #f4f5f7 0%, #ccd0d6 55%, #9ea4ac 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sherlock-install-soon { margin: 0; color: #c9ced4; font-size: .88rem; line-height: 1.5; text-wrap: pretty; }

/* Educate With H uses the home page's full-height opening and the shared
   showcase spacing, so the first card enters at the same scroll position. */
.education-page > .education-hero {
  min-height: 100vh;
  min-height: 100svh;
}

/* The free HJL Newsletter: the site's own showcase, a silver inbox illustration,
   and a native dialog around Bubi's form. */
.vx-venture--newsletter h2 { font-size: clamp(1.95rem, 3.8vw, 4.1rem); }
.vx-venture--newsletter .vx-venture-visual {
  background: radial-gradient(ellipse at 55% 38%, #ffffff14, transparent 65%), linear-gradient(135deg,#13161b,#07080a 65%,#181b20);
}
.newsletter-art { display:block; width:min(100%, 660px); height:auto; max-height:100%; object-fit:contain; position:relative; z-index:1; }
.newsletter-button-icon { flex:none; width:19px; height:19px; }
.vx-venture-copy > p.newsletter-note { margin:14px 0 0; font-size:.8rem; line-height:1.4; color:var(--tone); }
body.newsletter-open { overflow:hidden; }
.newsletter-modal { position:fixed; inset:0; margin:auto; box-sizing:border-box; width:min(500px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:32px; border:1px solid var(--hair-lit); border-radius:18px; background:var(--ink-raised); color:var(--white); box-shadow:0 30px 110px #00000085; }
.newsletter-modal::backdrop { background:#030405c9; backdrop-filter:blur(6px); }
.newsletter-modal .webinar-modal-close { display:flex; justify-content:center; align-items:center; }
.newsletter-modal-mark { display:grid; place-items:center; margin:3px 0 24px; }
.newsletter-modal-mark svg { width:38px; height:38px; }
.newsletter-eyebrow { margin:0 0 14px; text-align:center; font-family:var(--mono); font-size:.65rem; font-weight:600; letter-spacing:.2em; color:var(--tone); }
.newsletter-modal h2 { margin:0; text-align:center; font-size:clamp(2rem,5.5vw,2.7rem); line-height:1; letter-spacing:-.055em; }
#newsletter-description { margin:20px auto 26px; text-align:center; max-width:37ch; font-size:.92rem; line-height:1.5; color:#b8bdc6; }
.newsletter-form,.newsletter-form .webinar-fields,.newsletter-form .field { min-width:0; max-width:100%; }
.newsletter-form .webinar-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.newsletter-form .field input { box-sizing:border-box; width:100%; min-width:0; min-height:46px; font-size:16px; }
.newsletter-form [data-bubi-consent] { margin:18px 0; font-size:.76rem; line-height:1.5; color:#b8bdc6; }
.newsletter-form [data-bubi-consent] label { display:flex; gap:10px; align-items:flex-start; }
.newsletter-form [data-bubi-consent] input { flex:none; width:17px; height:17px; margin:3px 0 0; accent-color:#fff; }
.newsletter-form [data-bubi-consent] a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.newsletter-submit { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:13px 16px; border:0; border-radius:5px; background:linear-gradient(180deg,#fff,#d4d8de); color:#08090b; font:inherit; font-size:.84rem; font-weight:800; cursor:pointer; }
.newsletter-submit:hover:not(:disabled) { filter:brightness(1.06); }
.newsletter-submit:disabled { opacity:.6; cursor:wait; }
.newsletter-form-note { margin:14px 0 0; text-align:center; font-size:.75rem; color:var(--tone); }
.newsletter-form .bubi-error { color:#ffb1b1; font-size:.8rem; }
.newsletter-form [data-bubi-state="sending"] { opacity:.7; }
.newsletter-thanks { min-height:calc(100svh - 73px); display:grid; place-items:center; padding:64px 22px; text-align:center; }
.newsletter-thanks-inner { max-width:610px; }
.newsletter-thanks h1 { font-size:clamp(2.8rem,7vw,5rem); line-height:.98; letter-spacing:-.065em; margin:22px 0; }
.newsletter-thanks p { color:var(--tone); font-size:1rem; line-height:1.6; }
.newsletter-thanks .vx-company-link { margin-top:24px; }
@media (max-width:760px) {
  .vx-venture--newsletter h2 { font-size:clamp(2.05rem,10.5vw,3.25rem); }
}
@media (max-width:640px) {
  .newsletter-modal { padding:28px 22px 24px; }
  .newsletter-thanks { min-height:calc(100svh - 57px); }
}