/* owned by WP4 -- landing-page-only rules; everything else is components.css.
   Dark context: .lp-hero and .lp-activate are in the dark token list in tokens.css, so every rule
   below reads the same semantic tokens as the rest of the site rather than restating colours. */

/* ═══ HERO ═══════════════════════════════════════════════════════════════════════════════════
   Kept short on purpose: the top of the activation form should sit within the first screen. */
.lp-hero{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--color-navy-abyss)}
.lp-hero-media{position:absolute;inset:0;background-color:var(--color-navy-abyss);background-position:center;background-size:cover;background-repeat:no-repeat}
/* Scrim: without it the white copy loses contrast wherever the video runs bright. */
.lp-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.88) 100%)}
.lp-hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

.lp-hero-nav{position:relative;z-index:var(--z-raised);width:100%;max-width:var(--container);margin-inline:auto;padding:var(--space-4) var(--space-5)}
.lp-hero-langs{display:flex;gap:var(--space-2);margin-left:auto}

.lp-hero-inner{position:relative;z-index:var(--z-raised);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-10);width:100%;max-width:var(--container);margin:auto;padding:var(--space-5) var(--space-5) var(--space-12)}
.lp-hero-copy{flex:0 1 42%;min-width:min(100%,20rem)}
.lp-hero-pill{padding:var(--space-2) var(--space-3);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;cursor:default}
.lp-hero-copy .hero-title{margin:var(--space-4) 0 var(--space-6);font-family:var(--font-heading);font-size:clamp(2.1rem,3.4vw,3.3rem);font-weight:var(--fw-medium);line-height:1.08;letter-spacing:-.04em;color:var(--heading)}
.lp-hero-copy .hero-title>span{display:inline;color:var(--accent-fg)}
.lp-hero-cta{gap:var(--space-2-5)}

/* ═══ HERO USP CARDS ═════════════════════════════════════════════════════════════════════════ */
.lp-hero-usps{flex:1 1 52%;min-width:min(100%,20rem)}
.lp-usps-label{display:block;margin-bottom:var(--space-3);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--fg-muted)}
.lp-usp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.lp-usp{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border:var(--border-w) solid var(--line-strong);border-radius:var(--radius-lg);background:var(--bg-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lp-usp-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:var(--border-w) solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--radius-md);background:var(--accent-tint);color:var(--accent-fg)}
.lp-usp-icon svg{width:1.35rem;height:1.35rem}
.lp-usp-body{min-width:0}
.lp-usp-title{display:block;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.3;color:var(--fg-strong)}
.lp-usp-text{display:block;margin-top:var(--space-1);font-size:var(--fs-sm);line-height:1.4;color:var(--fg-muted)}

/* Dots belong to the phone slider below; hidden until then. */
.lp-usp-dots{display:none;justify-content:center;gap:var(--space-1-5);margin-top:var(--space-3)}
.lp-usp-dot{width:7px;height:7px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--line-strong);cursor:pointer;transition:width var(--dur-base) var(--ease-standard),background-color var(--dur-base)}
.lp-usp-dot.is-active{width:20px;background:var(--accent)}
.lp-usp-dot:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

/* ═══ ACTIVATION: form left, video + help right ══════════════════════════════════════════════ */
.lp-activate{background:var(--bg);padding:var(--space-10) var(--space-5) var(--space-6)}
.lp-activate-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-7)}
.lp-activate-main{flex:1 1 32rem;min-width:0}
/* clip, not hidden: overflow:hidden on an ancestor would kill the sticky aside */
.lp-activate,.lp-hero{overflow-x:clip}
.lp-activate-aside{flex:1 1 22rem;min-width:0;position:sticky;top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.lp-video-frame{position:relative;padding-top:56.25%;border:var(--border-w) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-black)}
.lp-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lp-help-card{padding:var(--space-5);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:linear-gradient(180deg,var(--accent-tint),transparent)}
.lp-help-card .card-title{margin:0 0 var(--space-1-5)}
.lp-help-card .card-text{margin:0}
.lp-help-mail{margin-top:var(--space-4)}

.lp-form-card{padding:var(--space-9)}
.lp-form-card .form label{font-size:var(--fs-base);font-weight:var(--fw-bold);letter-spacing:normal;text-transform:none;color:var(--color-navy)}
.lp-form-card .form :is(input:not([type="hidden"]):not([type="checkbox"]),textarea,select){border-color:var(--color-gray-200);font-size:var(--fs-base);padding:var(--space-2-5)}
.lp-form-card .form :is(input,textarea,select):focus-visible{border-color:var(--accent-fg)}
/* Pill buttons, as on the legacy page. */
.lp-step-actions .btn{border-radius:var(--radius-pill);padding:var(--space-3-5) var(--space-8)}
/* Sulu's bookkeeping fields (locale, typeId, checksum, honeypot) -- posted, never seen. */
.lp-form-rest{display:contents}

/* ═══ PROGRESS BAR ═══════════════════════════════════════════════════════════════════════════ */
.lp-progress{margin:0 0 var(--space-7)}
.lp-progress-track{height:6px;border-radius:var(--radius-pill);background:var(--color-gray-100);overflow:hidden}
.lp-progress-fill{width:33.333%;height:100%;border-radius:var(--radius-pill);background:var(--accent);transition:width var(--dur-slow) var(--ease-standard)}
.lp-progress-steps{display:flex;gap:var(--space-2-5);margin:var(--space-4) 0 0;padding:0;list-style:none}
.lp-progress-steps li{flex:1 1 0;display:flex;align-items:center;gap:var(--space-2);min-width:0;font-size:var(--fs-sm);line-height:1.3;color:var(--color-gray-400)}
.lp-progress-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border:var(--border-w) solid var(--line-strong);border-radius:var(--radius-full);background:var(--bg);font-size:var(--fs-xs);font-weight:var(--fw-black);color:var(--color-gray-400);transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.lp-progress-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-progress-steps li.is-current{color:var(--heading);font-weight:var(--fw-bold)}
.lp-progress-steps li.is-current .lp-progress-num{border-color:var(--accent);background:var(--accent);color:var(--color-navy)}
.lp-progress-steps li.is-done{color:var(--heading)}
.lp-progress-steps li.is-done .lp-progress-num{border-color:var(--heading);background:var(--heading);color:var(--color-white)}

/* ═══ STEPS ══════════════════════════════════════════════════════════════════════════════════ */
.lp-step{border:0;margin:0;padding:0;min-width:0}   /* min-width:0: a fieldset will not shrink otherwise */
.lp-step[hidden]{display:none}
.lp-step legend{padding:0;margin-bottom:var(--space-2);font-size:1.45rem;font-weight:var(--fw-bold);line-height:1.2;color:var(--color-navy)}
.lp-step-note{margin:0 0 var(--space-5);font-size:var(--fs-sm);color:var(--fg-muted)}
/* Step 1 asks for one thing and its legend already names it, so the field label is for screen
   readers only rather than printed twice. */
.lp-step-fields--labelless label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-step-actions{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.lp-step-actions .btn{flex:1 1 auto;margin-top:0}
.lp-step-actions .lp-step-back{flex:0 0 auto}

.lp-step .choice{display:flex;align-items:flex-start;gap:var(--space-2-5)}
.lp-step .choice input[type="checkbox"]{flex:0 0 auto;width:1.05rem;height:1.05rem;margin:.2rem 0 0;accent-color:var(--accent-fg)}
.lp-step .choice label{font-size:var(--fs-sm);font-weight:var(--fw-regular);letter-spacing:normal;text-transform:none;line-height:var(--lh-body);color:var(--fg)}
.lp-step .choice a{color:var(--accent-fg);text-decoration:underline}
/* Consent sits closer to the button than to the optional fields above it. */
.lp-step .form-field:has(.choice){gap:0}
.lp-step .form-field:has(.choice)+.form-field:has(.choice){margin-top:calc(var(--space-2) * -1)}

/* ═══ PROGRESSIVE INPUTS (competitors / keywords / prompts) ══════════════════════════════════ */
.lp-repeat{display:grid;gap:var(--space-2)}
.lp-repeat-item{min-width:0}
.lp-repeat-item[hidden]{display:none}
.lp-repeat-count{display:block;text-align:right;font-size:var(--fs-xs);color:var(--fg-muted)}
.lp-field-hint{font-size:var(--fs-xs);color:var(--fg-muted);line-height:1.4}
.form-error{font-size:var(--fs-xs);line-height:1.35;color:var(--error)}
.form-error:empty{display:none}
.form :is(input,textarea)[aria-invalid="true"]{border-color:var(--error)}

/* The closing text sections read as one block of small print, so they share one gap rather than
   stacking their own top and bottom padding against each other, and they run at the legacy page's
   modest heading scale rather than the homepage's display scale. */
.lp-activate ~ .section--tight .section-title{font-size:1.5rem;font-weight:var(--fw-medium);letter-spacing:-.04em;line-height:1.15;margin-bottom:var(--space-4)}
.lp-activate ~ .section--tight .section-lead{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--fg-muted)}
.lp-activate ~ .section--tight{padding-block:var(--space-8) 0}
.lp-activate ~ .section--tight:last-child{padding-bottom:var(--space-12)}

/* ═══ CAMPAIGN FOOTER ════════════════════════════════════════════════════════════════════════ */
.lp-footer{padding:var(--space-5) var(--space-5);border-top:var(--border-w) solid var(--line-strong)}
.lp-footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3) var(--space-6);font-size:var(--fs-xs)}
.lp-footer-location{margin:0;color:var(--fg-muted)}
.lp-footer .footer-legal a{color:var(--fg-strong);text-decoration:underline}

/* ═══ SECTIONS BELOW THE FOLD ════════════════════════════════════════════════════════════════ */
.hero-microcopy{max-width:var(--measure-sm);margin:var(--space-3) 0 0;color:var(--fg-faint);font-size:var(--fs-sm);line-height:1.5}
.section--panel .section-title span,.section--light .section-title span{color:var(--accent-fg)}
.engine-tile{min-height:15.5rem}
.engine-tile-label{display:block;margin:var(--space-2-5) 0 var(--space-2);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1.3;color:var(--fg-strong)}
.freestart-copy{max-width:48rem}
.freestart-details{max-width:50rem;margin:var(--space-5) 0 0;color:var(--fg-muted);font-size:var(--fs-md);line-height:1.7}
.freestart-details p{margin:0 0 var(--space-3-5)}
.freestart-details a{color:var(--accent);font-weight:var(--fw-bold)}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════════════════════════ */
/* Two form columns once the card is wide enough for them -- container queries so this follows the
   card, not the viewport (the card is ~58% of the page on desktop but full width on a tablet). */
@supports (container-type:inline-size){
  .lp-form-card{container-type:inline-size}
  @container (min-width:34rem){
    .lp-step>.form{grid-template-columns:1fr 1fr}
    .lp-step .form-field--wide{grid-column:1/-1}
    .lp-repeat--grid{grid-template-columns:1fr 1fr}
  }
}
@media(max-width:1024px){
  /* Stack the two columns; the aside stops sticking or it would trail an empty screen. */
  .lp-activate-aside{position:static}
}
@media(max-width:900px){
  /* nowrap matters: a *wrapping column* container sizes its line to the widest item's max-content
     and stretches both children to that, which the USP row (a scroll strip of four cards) pushed
     far past the viewport. With one unwrapped line the children take the container width. */
  .lp-hero-inner{flex-flow:column nowrap;align-items:stretch;gap:var(--space-8)}
  .lp-hero-copy,.lp-hero-usps{flex:1 1 auto;width:100%;min-width:0}
}
@media(max-width:700px){
  /* USP cards become a swipeable strip: four stacked cards would push the form off-screen. */
  .lp-usp-grid{display:flex;gap:var(--space-3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--space-5) * -1);padding:0 var(--space-5) var(--space-1);scroll-padding-left:var(--space-5);cursor:grab}
  .lp-usp-grid::-webkit-scrollbar{display:none}
  .lp-usp{flex:0 0 72%;scroll-snap-align:start;padding:var(--space-3-5)}
  .lp-usp-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
  .lp-usp-grid.is-dragging .lp-usp{pointer-events:none}
  .lp-usp-dots{display:flex}
  .lp-usp-icon{width:2.4rem;height:2.4rem}
  .lp-usp-icon svg{width:1.2rem;height:1.2rem}
}
@media(max-width:640px){
  .lp-hero-inner{padding:var(--space-4) var(--space-5) var(--space-8)}
  .lp-activate{padding:var(--space-8) var(--space-5) var(--space-5)}
  .lp-form-card{padding:var(--space-5)}
  /* Only the step being filled keeps its label; the other two shrink to their number. */
  .lp-progress-steps li{flex:0 0 auto}
  .lp-progress-steps li.is-current{flex:1 1 auto}
  .lp-progress-steps li:not(.is-current) .lp-progress-label{display:none}
  .lp-step-actions{flex-wrap:wrap}
  .lp-step-actions .btn,.lp-step-actions .lp-step-back{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  /* The poster image stays; only the motion goes. */
  .lp-hero-video{display:none}
}