/* ============================================================
   E-com Webinar Engine funnel — shared stylesheet

   Two sources, deliberately fused:

   1. STRUCTURE is Moen & Co's proven reg page, 1:1 (operator ruling
      2026-07-16: "photo-forward, Moen 1:1"). Photo-forward hero with the
      sign-up card sticky alongside it, testimonial marquee, about block,
      practical-info panel, bio block, final CTA, sticky mobile CTA bar.
      Reference build: active/websites/aimetoden-webinar-en/index.html.

   2. LOOK is the shipped Media Made Simple rebrand, ported from
      Other-Repos/mediamadesimple-site/src/styles/{tokens,base}.css.
      Cornflower is the ONLY accent. Inter 700 + EB Garamond italic is the
      display pair. Fragment Mono is metadata only. Panels are rounded,
      actions are pills, the page is light-first.

   Moen's terracotta + Hanken Grotesk + Fraunces are gone; none of that is
   ours. What we keep from them is the ORDER of the page, which is the part
   that is proven.
   ============================================================ */

/* ---- tokens: ported verbatim from mediamadesimple-site/src/styles/tokens.css ---- */
:root {
  --blue: #2468FF;
  --blue-rgb: 36, 104, 255;
  --g-50: #f7f7f7; --g-100: #f4f5f7; --g-200: #e0e2e6; --g-300: #c2c6cd; --g-400: #a1a7b2;
  --g-500: #89919f; --g-600: #6c7584; --g-700: #4b515b; --g-800: #343940; --g-850: #222529; --g-900: #131518;
  --sans: 'Inter', Arial, sans-serif;
  --mono: 'Fragment Mono', monospace;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --ls-display: -0.045em;
  --card-radius: 24px;
  --ease: cubic-bezier(.645,.045,.355,1);
  --ease-soft: cubic-bezier(.3,0,.25,1);
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
}
/* size-adjust is LOAD-BEARING. EB Garamond's x-height is 0.400em vs Instrument
   Serif's 0.510em, so at equal font-size it renders ~27% smaller and reads as a
   footnote beside Inter 700. 0.510 / 0.400 = 1.275. Do not remove; recompute,
   never guess, if the face is ever swapped. (tokens.css carries the same note.) */
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  size-adjust: 127.5%;
  src: url('/assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/fragment-mono-latin-400.woff2') format('woff2');
}

/* ---- reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* The survey groups each question in a <fieldset> for real semantics (the
   <legend> is the accessible name of the radio group). The UA default border
   drew a box around every question; min-width:0 stops the fieldset's magic
   min-content sizing from blowing out flex/grid children. */
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The live site runs a fluid `body { font-size: 1vw }` engine. It is not ported
   here on purpose: these are conversion pages whose body copy must stay at a
   readable absolute size on a 27" monitor, and 1vw drives it to ~19px there and
   keeps growing. Type scales via clamp() on the display sizes instead. */
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  background: #fff;
  color: #05060a;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ---- layout ---- */
.container { width: 100%; max-width: 74em; margin: 0 auto; padding: 0 1.5em; }
.container--narrow { max-width: 52em; }
.section { padding: 4.5em 0; }
.section--tight { padding: 2.5em 0; }

/* ---- the display type pair (base.css .display) ----
   Line one heavy grotesque, line two italic serif AT THE SAME SIZE, line-height
   1, tracking hard negative. That ratio is what makes a headline read as one
   dense typographic object rather than as lines of text. */
.display {
  display: flex; flex-direction: column; margin: 0;
  font-size: clamp(2.4em, 5.4vw, 4em);
  line-height: 1; letter-spacing: var(--ls-display); text-wrap: balance;
}
.display .l1 { font-weight: 700; }
.display .l2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -0.03em;
}
.display--sm { font-size: clamp(1.9em, 3.6vw, 2.6em); }
.display--xs { font-size: clamp(1.5em, 2.6vw, 1.9em); }
/* padding-bottom is LOAD-BEARING: EB Garamond's italic swash descenders (y, g,
   f) draw ~0.33em below the line box at line-height 1 and silently overlap
   whatever sits underneath. The layout box does not report it. See base.css. */
.display--accent .l2 { color: var(--blue); padding-bottom: 0.34em; }
.display--onblue .l2 { color: #fff; padding-bottom: 0.34em; }

.section-head { text-align: center; max-width: 40em; margin: 0 auto 3em; }
.section-head .sub { margin: 1em auto 0; max-width: 32em; font-size: 1.0625em; color: var(--g-600); }

/* ---- panels ---- */
.panel { border-radius: var(--card-radius); padding: 2.6em; overflow: hidden; }
.panel--light { background: var(--g-50); color: #05060a; }
.panel--dark  { background: #0b0d12; color: #fff; }
.panel--white { background: #fff; color: #05060a; border: 1px solid var(--g-200); }

/* ---- pills ---- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.9em 1.6em; border: 0; border-radius: 100px;
  font-family: inherit; font-size: 0.9375em; font-weight: 500; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.pill:hover { transform: translateY(-2px); }
.pill--dark  { background: #05060a; color: #fff; }
.pill--dark:hover { background: #1b1e26; }
.pill--blue  { background: var(--blue); color: #fff; }
.pill--blue:hover { background: #1450d8; }
.pill--light { background: #fff; color: #05060a; }
.pill--light:hover { background: var(--g-100); }
.pill--ghost {
  background: rgba(255,255,255,.16); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pill--ghost:hover { background: rgba(255,255,255,.28); }
.pill--quiet { background: var(--g-100); color: #05060a; }
.pill--quiet:hover { background: var(--g-200); }
.pill--lg { padding: 1.05em 2em; font-size: 1.0625em; }
.pill--block { width: 100%; }

/* ---- mono: metadata only ---- */
.mono { font-family: var(--mono); font-size: .6875em; text-transform: uppercase; letter-spacing: .09em; }

/* ============================================================
   Site chrome: header + footer + sticky mobile CTA
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--g-200);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-header__inner {
  max-width: 74em; margin: 0 auto; padding: 0 1.5em;
  height: 4.2em; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: .6em; }
.brand img { height: 1.4em; width: auto; }
.brand__mark { width: 1.1em; height: 1.1em; border-radius: 3px; background: var(--blue); }
.brand__word { font-weight: 700; letter-spacing: -.02em; font-size: .9375em; }

.site-footer { border-top: 1px solid var(--g-200); padding: 3em 0 8em; text-align: center; color: var(--g-600); font-size: .875em; }
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--blue); }
@media (min-width: 901px) { .site-footer { padding-bottom: 3em; } }

/* Moen runs a fixed sign-up bar on mobile. Kept: most traffic is paid social. */
.mobile-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  padding: .75em; border-top: 1px solid var(--g-200);
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (min-width: 901px) { .mobile-cta { display: none; } }

/* ============================================================
   Hero — Moen's photo-forward two-column, in MMS blue
   ============================================================ */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: 3.5em 0 4.5em;
  background:
    radial-gradient(120% 80% at 50% 0%, #0a1a4a 0%, transparent 60%),
    linear-gradient(180deg, #04102e 0%, #1348d8 34%, var(--blue) 52%, #6ea2ff 72%, #cddfff 88%, #fff 100%);
}
.hero__grid {
  max-width: 74em; margin: 0 auto; padding: 0 1.5em;
  display: grid; gap: 2.5em;
}
@media (min-width: 901px) {
  .hero { padding: 4.5em 0 5.5em; }
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 2em 3.5em; align-items: start; }
  .hero__copy  { grid-column: 1; grid-row: 1; }
  .hero__form  { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 5.5em; }
  .hero__photo { grid-column: 1; grid-row: 2; }
  /* Moen keeps the proof strip inside the left column, under the photo, but
     they run three press logos and we run six client marks plus a label. In a
     ~590px column that wraps to three ragged lines. Spanning the full grid
     gives it one clean line, and it lands exactly where the gradient goes
     white, which is where the dark-inked marks want to be. */
  .hero__proof { grid-column: 1 / -1; grid-row: 3; margin-top: 1.5em; }
}

/* the live badge: green core + two out-of-phase halo rings, per the live Hero */
.live-banner {
  display: inline-flex; align-items: center; gap: .7em;
  margin-bottom: 1.6em; padding: .5em 1em .5em .85em;
  border-radius: 100px; font-size: .875em;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.live-label { font-weight: 600; color: rgba(255,255,255,.95); }
.live-sep { width: 1px; height: 1.05em; background: rgba(255,255,255,.2); }
.live { position: relative; display: grid; place-items: center; width: .85em; height: .85em; }
.live-core { width: .5em; height: .5em; border-radius: 50%; background: #2fe08a; box-shadow: 0 0 8px rgba(47,224,138,.9); }
.live-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(47,224,138,.75);
  animation: livePulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.live-ring--2 { animation-delay: 1.2s; }
@keyframes livePulse {
  0%   { transform: scale(.6);  opacity: .9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
.cd {
  font-family: var(--mono); font-size: .82em; letter-spacing: .02em;
  color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums;
}
.cd b { color: #fff; font-weight: 400; }

.hero h1 { font-size: clamp(2.3em, 5vw, 3.6em); }
.hero__sub { margin-top: 1.2em; max-width: 34em; font-size: 1.0625em; color: rgba(255,255,255,.88); }
/* DARK text, not white. This caption sits below the hero photo, which is far
   enough down that the hero's gradient has already faded to near-white behind
   it: white-on-white measured ~1.2:1, i.e. effectively invisible, on BOTH hosts'
   registration pages (2026-08-12). Same trap `.ty-photo figcaption` already
   documents on the thank-you page; same fix. */
.hero__caption { margin-top: 1.4em; font-size: .9375em; font-weight: 600; color: var(--g-800); }

/* Moen's hero photo slot. Rooster's presenter photo does not exist in the repo
   yet (checked 2026-07-16), so this ships as a labelled placeholder rather than
   a stock face. Drop the real file at assets/img/rooster-hero.jpg and delete
   .photo-slot__note. */
.hero__photo .photo-slot { aspect-ratio: 16 / 9; }
.photo-slot {
  position: relative; border-radius: var(--card-radius); overflow: hidden;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; text-align: center;
  box-shadow: 0 18px 44px rgba(3,12,40,.22);
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot__note {
  padding: 1.5em; font-family: var(--mono); font-size: .6875em;
  text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.75);
}
.photo-slot--light { background: var(--g-100); border-color: var(--g-200); box-shadow: 0 8px 30px -8px rgba(0,0,0,.12); }
.photo-slot--light .photo-slot__note { color: var(--g-500); }

/* Moen's "Featured in" press strip. We have no press logos; the honest
   equivalent is the client book, which is real and already on the live site.

   TWO THINGS HERE ARE LOAD-BEARING. Both were measured, not guessed, and both
   shipped broken in the first pass:

   1. USE THE `-dark` LOGO FILES. neuflora-logo.png and
      pescador-on-the-fly-logo.png are WHITE marks on transparency (measured
      mean luminance 255.0 and 237.5), drawn for dark grounds. On this strip's
      light end of the gradient they render as literally nothing. The `-dark`
      siblings are the same marks re-inked and trimmed of transparent padding.
      (pescador-on-the-fly-logo-dark.webp is also 20KB against the white PNG's
      116KB, since that one ships at 2242x500 for a 24px slot.) The live site
      hit this exact bug in July and left the note in LogoMarquee.astro.

   2. PER-LOGO HEIGHTS, NOT ONE SHARED HEIGHT. The roster's aspect ratios run
      3.18:1 (Bella Coterie) to 17.64:1 (Naked & Thriving), a 5.5x spread. One
      shared `height: 1.5em` renders Naked & Thriving 441px wide and shatters
      the row. Height is therefore tuned per mark so the six read as one row of
      equal visual mass rather than as six competing brands. Re-measure the
      aspect ratio if a logo is ever swapped; do not just add it to the list. */
.proof-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9em 1.7em; }
.proof-strip__label { font-family: var(--serif); font-style: italic; font-size: 1.0625em; color: var(--g-500); }
.proof-strip img {
  width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .5;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.proof-strip img:hover { filter: grayscale(0); opacity: 1; }
/* aspect ratios in the comment; heights tuned against them for equal mass */
.proof-strip img[data-logo="twelve-south"] { height: 1.3em; }  /*  5.42:1 */
.proof-strip img[data-logo="neuflora"]     { height: 1.2em; }  /*  5.91:1 */
.proof-strip img[data-logo="naked"]        { height: .78em; }  /* 17.64:1 — the outlier */
.proof-strip img[data-logo="calliope"]     { height: 1.55em; } /*  3.31:1 */
.proof-strip img[data-logo="pescador"]     { height: 1.42em; } /*  4.27:1 */
.proof-strip img[data-logo="bella"]        { height: 1.55em; } /*  3.18:1 */
@media (prefers-reduced-motion: reduce) { .proof-strip img { transition: none; } }

/* ---- the sign-up card ---- */
.signup {
  background: #fff; color: #05060a; border-radius: var(--card-radius);
  padding: 1.8em; box-shadow: 0 24px 60px rgba(3,12,40,.28);
}
@media (min-width: 901px) { .signup { padding: 2.2em; } }
.signup h2 { font-size: 1.5em; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.field { margin-top: 1em; }
.field label { display: block; margin-bottom: .4em; font-size: .875em; font-weight: 500; }
/* :not(radio/checkbox) is LOAD-BEARING. Without it this rule also matched the
   session radio inside .field, stretched it to width:100%, and the radio glyph
   centred itself in that full-width box, so it rendered floating above the
   label instead of beside it. */
.field input:not([type="radio"]):not([type="checkbox"]), .field select {
  width: 100%; padding: .8em 1em; font-family: inherit; font-size: 1em;
  color: #05060a; background: #fff;
  border: 1px solid var(--g-200); border-radius: 12px;
  outline: none; transition: border-color .2s var(--ease);
}
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field select:focus { border-color: var(--blue); }
.field__hint { margin-top: .4em; font-size: .8125em; color: var(--g-600); }
.consent { margin-top: 1.1em; font-size: .75em; line-height: 1.5; color: var(--g-600); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--blue); }
.form-note { margin-top: .9em; font-size: .8125em; color: var(--g-600); text-align: center; }

/* the chosen-time radio, Moen's mechanic */
.timeslot {
  display: flex; gap: .75em; align-items: flex-start; margin-top: .5em;
  padding: .85em 1em; border: 1px solid var(--blue); border-radius: 12px;
  background: rgba(var(--blue-rgb), .05); cursor: pointer;
}
.timeslot input { flex: 0 0 auto; width: auto; margin-top: .3em; accent-color: var(--blue); }
.timeslot > span { flex: 1; }
.timeslot__when { display: block; font-weight: 600; font-size: .9375em; }
.timeslot__date { display: block; font-size: .875em; color: var(--g-600); }

/* ============================================================
   Testimonial marquee (Moen's, kept)
   ============================================================ */
.marquee { overflow: hidden; padding: 2.5em 0; border-bottom: 1px solid var(--g-200); }
.marquee__track { display: flex; gap: 3em; width: max-content; animation: marquee 68s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; max-width: 24em; }
.marquee__item p { font-size: .9375em; line-height: 1.45; color: var(--g-800); }
.marquee__item cite { display: block; margin-top: .5em; font-size: .8125em; font-weight: 600; font-style: normal; color: var(--g-500); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================
   Content primitives
   ============================================================ */
.prose > * + * { margin-top: 1em; }
.prose p { color: var(--g-800); }
.prose strong { font-weight: 600; color: #05060a; }
.lede { font-size: 1.0625em; }

/* bulleted list with a blue dot, Moen's "what we'll cover" shape */
.dotlist { list-style: none; display: grid; gap: 1.4em; }
.dotlist li { display: flex; gap: 1em; }
.dotlist li::before {
  content: ""; flex: 0 0 auto; width: .5em; height: .5em; margin-top: .55em;
  border-radius: 50%; background: var(--blue);
}
.dotlist p { color: var(--g-800); }
.dotlist b, .dotlist strong { font-weight: 600; color: #05060a; }

/* numbered stack, for the named offer */
.numlist { list-style: none; counter-reset: n; display: grid; gap: 1.1em; }
.numlist li { counter-increment: n; display: flex; gap: 1em; }
.numlist li::before {
  content: counter(n); flex: 0 0 auto;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
  font-family: var(--mono); font-size: .75em;
}
.numlist p { color: var(--g-800); }

/* checked list, for the qualification bar */
.checklist { list-style: none; display: grid; gap: .9em; }
.checklist li { display: flex; gap: .8em; color: var(--g-800); }
.checklist li::before { content: "→"; color: var(--blue); font-weight: 600; }

/* practical-info rows */
.infolist { list-style: none; }
.infolist li { display: flex; gap: 1em; align-items: baseline; padding: 1em 0; border-top: 1px solid var(--g-200); }
.infolist li:first-child { border-top: 0; padding-top: 0; }
.infolist li:last-child { padding-bottom: 0; }
.infolist__k { flex: 0 0 auto; font-family: var(--mono); font-size: .6875em; text-transform: uppercase; letter-spacing: .09em; color: var(--g-500); min-width: 7em; }
.infolist__v { color: var(--g-800); }

/* proof cards */
.proofgrid { display: grid; gap: 1em; }
@media (min-width: 700px)  { .proofgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .proofgrid { grid-template-columns: repeat(4, 1fr); } }
.proofcard { background: var(--g-50); border-radius: 18px; padding: 1.4em; }
.proofcard__name { font-family: var(--mono); font-size: .6875em; text-transform: uppercase; letter-spacing: .09em; color: var(--blue); }
.proofcard__stat { margin-top: .5em; font-size: 1.5em; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.proofcard__body { margin-top: .4em; font-size: .875em; color: var(--g-600); }

.finemark { margin-top: 1.5em; font-size: .8125em; color: var(--g-500); }

/* price block */
.price { text-align: center; }
.price__big { font-size: clamp(2.6em, 6vw, 4em); font-weight: 700; letter-spacing: var(--ls-display); line-height: 1; }
.price__unit { font-size: .9375em; color: var(--g-600); margin-top: .6em; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band .pill { margin-top: 1.5em; }

/* ============================================================
   Survey
   ============================================================ */
.q { padding: 1.8em 0; border-top: 1px solid var(--g-200); }
.q:first-of-type { border-top: 0; }
.q__title { font-size: 1.125em; font-weight: 600; letter-spacing: -.02em; }
.q__hint { margin-top: .5em; font-size: .875em; color: var(--g-600); }
.opts { margin-top: 1em; display: grid; gap: .5em; }
.opt {
  display: flex; gap: .75em; align-items: center;
  padding: .85em 1em; border: 1px solid var(--g-200); border-radius: 12px;
  cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.opt:hover { border-color: var(--g-400); }
.opt input { accent-color: var(--blue); }
.opt:has(input:checked) { border-color: var(--blue); background: rgba(var(--blue-rgb), .05); }
.fieldgrid { display: grid; gap: 1em; }
@media (min-width: 700px) { .fieldgrid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Utilities
   ============================================================ */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 2em; }
.mt-3 { margin-top: 3em; }
.stack > * + * { margin-top: 1.5em; }
.divider { height: 1px; background: var(--g-200); border: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pill { transition: none; }
  .pill:hover { transform: none; }
  .live-ring { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
  .panel { padding: 1.8em 1.4em; border-radius: 18px; }
  .section { padding: 3em 0; }
  .section-head { margin-bottom: 2em; }
}