/* =========================================================================
   Lupineo — Closed Beta landing page
   Ported from the Claude Design export (styles.css). Artboard: 1440px,
   fluid to 360px. Breakpoints: 1040px, 900px, 640px.
   Loaded only on the front page / "Landing page" template (see functions.php).
   ========================================================================= */

:root {
  /* ---- Color: navy primary scale ---------------------------------------- */
  --navy-900: #2a3254;
  --navy-800: #34426d;
  --navy-700: #3b4c7a;
  --navy-600: #435686;
  --navy-500: #4a5e8f;
  --navy-400: #64759d;
  --navy-300: #808eae;
  --navy-200: #a2aec6;
  --navy-100: #c6cddd;
  --navy-050: #e9ebf1;
  --navy-inputBorder: #435686;

  /* ---- Color: accent / amber scale ------------------------------------- */
  --accent-900: #e56c1d;
  --accent-800: #e78825;
  --accent-700: #e9972a;
  --accent-600: #eaa92e;
  --accent-500: #ecb532;
  --accent-400: #eebf44;
  --accent-300: #f0cb65;
  --accent-200: #F3D991;
  --accent-100: #f8e8bb;
  --accent-050: #fcf6e4;





  /* ---- Color: neutrals / surfaces ------------------------------------- */
  --white:      #ffffff;
  --grey-050:   #f7faff;
  --grey-100:   #f3f4f6;
  --grey-200:   #e9ebf1;
  --grey-300:   #dcdfe8;
  --dot-idle:   #cfd5e2;
  --link:       #3488c6;

  /* ---- Type ---------------------------------------------------------- */
  --font-head: "Montserrat", Helvetica, Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --h1-size: clamp(40px, 6vw, 74px);
  --h1-line: 1.0;
  --h1-weight: 600;
  --h1-tracking: -0.035em;
  --h2-size: clamp(30px, 3.6vw, 46px);
  --h2-line: 1.06;
  --h2-weight: 600;
  --h2-tracking: -0.025em;
  --h2cta-size: clamp(32px, 4.2vw, 54px);
  --h2cta-line: 1.04;
  --h3-size: 21px;
  --h3-line: 1.25;
  --h3-weight: 600;
  --body-size: 16px;
  --body-line: 1.6;
  --lede-size: 17px;
  --lede-line: 1.6;
  --herolede-size: clamp(17px, 1.5vw, 21px);
  --herolede-line: 1.55;
  --small-size: 14px;
  --xsmall-size: 13px;
  --eyebrow-size: 12px;
  --eyebrow-tracking: 0.14em;
  --heroEyebrow-size: clamp(15px, 1.4vw, 19px);
  --heroEyebrow-tracking: 0.16em;
  --faqQ-size: 18px;
  --faqQ-weight: 500;

  /* ---- Spacing ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 52px;
  --sectionPadY: clamp(64px, 7vw, 110px);
  --sectionPadX: clamp(20px, 4vw, 40px);
  --gridGap: clamp(16px, 2vw, 28px);
  --aimsGapRow: clamp(26px, 3vw, 44px);
  --aimsGapCol: clamp(32px, 4vw, 64px);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 30px;

  --shadow-sm:    0 1px 4px rgba(42, 50, 84, 0.10);
  --shadow-panel: 0 6px 24px rgba(42, 50, 84, 0.12);
  --shadow-hero:  0 -20px 60px rgba(0, 0, 0, 0.35);

  --container: 1200px;
  --container-narrow: 860px;
  --container-hero: 900px;
  --container-heroShot: 1060px;
  --header-h: 90px;

  --t-fast: 0.2s ease-in-out;
  --t-base: 0.3s ease;
  --t-reveal: 0.7s ease-in-out;
  --t-slide: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================== base (landing only) ======================== */
html:has(body.is-landing) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.is-landing) { scroll-behavior: auto; }
}

body.is-landing {
  margin: 0;
  background: var(--navy-900);
  color: var(--navy-900);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-landing .lp h1,
body.is-landing .lp h2,
body.is-landing .lp h3 { font-family: var(--font-head); margin: 0; }
.lp p { margin: 0; }
.lp ul, .lp ol { margin: 0; padding: 0; list-style: none; }
.lp img { max-width: 100%; display: block; }
.lp a { color: var(--link); text-decoration: none; transition: color var(--t-fast); }
.lp a:hover { color: var(--navy-900); }

.lp .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lp .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--navy-900); padding: var(--space-3) var(--space-4);
}
.lp .skip-link:focus { left: var(--space-3); top: var(--space-3); }

.lp .container { max-width: var(--container); margin: 0 auto; }
.lp .container--narrow { max-width: var(--container-narrow); }

/* The page is built from core blocks (wp:group / heading / paragraph / …).
   Core's flow-layout "block gap" adds a 1.2rem margin between every child;
   it is wrapped in :where() (zero specificity), so these low-specificity
   rules cancel it and the section-specific margins below take over.
   `.lp > *` covers the direct children of the root group (header / main /
   footer) — the fixed header otherwise inherits a 1.2rem top margin that
   shows as empty space above it once it slides in.
   Keep this ABOVE every component rule so source order lets them win. */
.lp > *,
.lp .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.lp .wp-block-group { margin-block: 0; }

/* =========================== shared bits ================================ */
.lp .eyebrow {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  font-weight: bold;
  color: var(--navy-400);
}
.lp .eyebrow--onDark { color: var(--navy-150); }

.lp .section-title {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  color: var(--navy-900);
  text-wrap: balance;
}
.lp .section-title--onDark { color: var(--white); }

.lp .section-lede {
  font-size: var(--lede-size);
  line-height: var(--lede-line);
  color: var(--navy-500);
  max-width: 40em;
  text-wrap: pretty;
}
.lp .section-lede--onDark { color: var(--navy-100); font-size: var(--body-size); max-width: 34em; }

.lp .section-head > .section-title { margin-top: var(--space-3); }
.lp .section-head > .section-lede { margin-top: var(--space-4); }
.lp .section-head { max-width: 760px; }
.lp .section-head--split {
  max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: flex-end; justify-content: space-between;
}
.lp .section-head--split > div { max-width: 640px; }

.lp .chip {
  display: inline-flex; align-items: center;
  height: 1.6rem; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-100); color: var(--accent-600);
  font-size: var(--eyebrow-size); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: bold;
  white-space: nowrap;
}
.lp .chip--onDark { background: rgba(255, 255, 255, 0.12); color: var(--accent-050); }

.lp .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--space-8);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--body-size); font-weight: 400;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lp .btn:active { transform: scale(0.98); }
.lp .btn--sm { height: 38px; padding: 0 var(--space-6); font-size: 15px; }
.lp .btn--primary {
  background: var(--accent-500); border-color: var(--accent-500);
  color: var(--white); box-shadow: var(--shadow-sm);
}
.lp .btn--primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: var(--white); }
.lp .btn--secondary { background: transparent; border-color: var(--navy-900); color: var(--navy-900); }
.lp .btn--secondary:hover { background: var(--navy-900); color: var(--white); }
.lp .btn--ghost { background: transparent; border-color: transparent; color: var(--accent-050); }
.lp .btn--ghost:hover { color: var(--white); }

/* Core button block (wp:buttons / wp:button) styled to match .btn.
   The custom class on the wrapper (btn--primary / btn--ghost) picks the variant. */
.lp .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--space-8);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--body-size); font-weight: 400;
  line-height: 1; cursor: pointer; white-space: nowrap;
  background: var(--accent-500); color: var(--white); box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lp .wp-block-button__link:active { transform: scale(0.98); }
.lp .wp-block-button.btn--primary .wp-block-button__link:hover {
  background: var(--accent-600); border-color: var(--accent-600); color: var(--white);
}
.lp .wp-block-button.btn--ghost .wp-block-button__link {
  background: transparent; border-color: transparent; color: var(--accent-050); box-shadow: none;
}
.lp .wp-block-button.btn--ghost .wp-block-button__link:hover { color: var(--white); }

.lp [data-reveal].is-hidden,
.lp .is-reveal.is-hidden { opacity: 0; transform: translateY(18px); }
.lp [data-reveal],
.lp .is-reveal { transition: opacity var(--t-reveal), transform var(--t-reveal); }

/* =========================== site header =============================== */
.lp .site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(42, 50, 84, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0; transform: translateY(-100%); pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base), box-shadow 0.25s ease;
}
.lp .site-header.is-visible {
  opacity: 1; transform: none; pointer-events: auto;
  box-shadow: var(--shadow-sm);
}
.no-js .lp .site-header { opacity: 1; transform: none; pointer-events: auto; }
.admin-bar .lp .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .lp .site-header { top: 46px; } }

.lp .site-header__inner {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-2) var(--sectionPadX);
  display: flex; align-items: center; gap: var(--space-7);
}
.lp .site-header__logo { display: flex; align-items: center; flex-shrink: 0; min-height: 24px; }
.lp .site-header__logo img { height: 17px; width: auto; }
.lp .site-header__chip { font-size: 10px; letter-spacing: 0.08em; flex-shrink: 0; }

.lp .site-nav__list { display: flex; align-items: center; gap: var(--space-6); font-size: 15px; }
.lp .site-nav__list a { color: rgba(255, 255, 255, 0.86); }
.lp .site-nav__list a:hover { color: var(--white); }

.lp .site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.lp .site-header__signin { font-size: 15px; color: rgba(255, 255, 255, 0.86); white-space: nowrap; }
.lp .site-header__signin:hover { color: var(--white); }

.lp .site-header__toggle {
  display: none; margin-left: auto;
  height: 38px; padding: 0 var(--space-5);
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 15px; cursor: pointer;
}

.lp .mobile-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--navy-900);
  padding: var(--space-4) var(--sectionPadX) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.lp .mobile-nav[hidden] { display: none; }
.lp .mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-4); }
.lp .mobile-nav__list a { color: rgba(255, 255, 255, 0.86); font-size: var(--body-size); }
.lp .mobile-nav .btn { align-self: flex-start; }

/* =========================== hero ===================================== */
.lp .site-hero {
  background: var(--navy-900); color: var(--white);
  padding: clamp(56px, 6vw, 96px) var(--sectionPadX) 0;
}
.lp .site-hero__intro { max-width: var(--container-hero); margin: 0 auto; text-align: center; }
.lp .site-hero__logo {
  height: clamp(40px, 70vh, 200px); width: auto;
  margin: clamp(60px, 9vw, 150px) auto var(--space-8);
}
.lp .site-hero__eyebrow {
  font-family: var(--font-head); font-weight: 400;
  font-size: var(--heroEyebrow-size);
  letter-spacing: var(--heroEyebrow-tracking);
  text-transform: uppercase; color: var(--navy-150);
  margin-bottom: var(--space-6);
}
.lp .site-hero__chipline { margin-bottom: var(--space-5); }
.lp .site-hero__title {
  font-size: var(--h1-size); line-height: var(--h1-line);
  font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking);
  text-wrap: balance;
}
.lp .site-hero__body {
  font-size: var(--herolede-size); line-height: var(--herolede-line);
  color: var(--navy-100); margin: var(--space-6) auto 0;
  max-width: 34em; text-wrap: pretty;
}
.lp .site-hero__meta { font-size: var(--small-size); color: var(--navy-200); margin-top: var(--space-4); }

.lp .signup-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: clamp(28px, 3vw, 34px);
}
.lp .signup-form__input {
  font-family: var(--font-body); font-size: 15px;
  padding: 0 var(--space-4); height: 44px; min-width: min(100%, 280px);
  border-radius: var(--radius); border: 1px solid var(--navy-inputBorder);
  background: var(--grey-050); color: var(--navy-900);
}
.lp .signup-form__input:focus { outline: 2px solid var(--accent-500); outline-offset: 4px; }

.lp .site-hero__shot {
  display: block;
  max-width: var(--container-heroShot);
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.lp .site-hero__shot img {
  width: 100%; height: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-hero);
  background: var(--grey-100);
}

/* =========================== core features ============================ */
.lp .section-core { padding: var(--sectionPadY) var(--sectionPadX); background: var(--white); }
.lp .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--gridGap);
  margin-top: clamp(32px, 4vw, 52px);
}
.lp .feature-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.lp .feature-card__icon {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--grey-200); color: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
}
.lp .feature-card__icon--accent { background: var(--accent-100); color: var(--accent-600); }
.lp .feature-card__title {
  font-size: var(--h3-size); line-height: var(--h3-line);
  font-weight: var(--h3-weight); color: var(--navy-900);
  margin-top: var(--space-5);
}
.lp .feature-card__body {
  font-size: var(--body-size); line-height: var(--body-line);
  color: var(--navy-500); margin-top: 10px; text-wrap: pretty;
}

/* =========================== aims (goals) ============================= */
.lp .section-aims {
  padding: var(--sectionPadY) var(--sectionPadX);
  background: var(--grey-100);
  scroll-margin-top: var(--header-h);
}
.lp .aims-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--aimsGapRow) var(--aimsGapCol);
  margin-top: clamp(34px, 4vw, 54px);
}
.lp .aim {
  display: flex; gap: var(--space-5); align-items: flex-start;
  border-top: 1px solid var(--grey-300);
  padding-top: clamp(20px, 2.2vw, 28px);
}
.lp .aim__num {
  font-family: var(--font-head); font-weight: 600; font-size: var(--small-size);
  color: var(--accent-500); padding-top: 5px; flex-shrink: 0;
}
.lp .aim__title {
  font-size: var(--h3-size); line-height: var(--h3-line);
  font-weight: var(--h3-weight); color: var(--navy-900);
}
.lp .aim__body {
  font-size: var(--body-size); line-height: var(--body-line);
  color: var(--navy-500); margin-top: 10px; max-width: 34em; text-wrap: pretty;
}

/* =========================== product tour / carousel ================= */
.lp .section-tour {
  padding: var(--sectionPadY) var(--sectionPadX);
  background: var(--navy-900); color: var(--white);
  scroll-margin-top: var(--header-h);
}
.lp .carousel { margin-top: clamp(28px, 3vw, 40px); }

/* Slides are editable blocks. Before landing.js runs (and in the editor) they
   just stack; landing.js then builds the frame / arrows / dots around them. */
.lp .carousel__slides { display: grid; gap: var(--space-5); }
.lp .carousel__slide { min-width: 0; }
.lp .carousel__figure { margin: 0; }
.lp .carousel__figure img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  background: var(--grey-200);
}
.lp .carousel__caption {
  font-size: 15px; line-height: var(--body-line);
  color: var(--navy-100); text-wrap: pretty;
  margin-top: var(--space-3);
}
.lp .carousel__caption strong { color: var(--white); }

/* Interactive state, added by landing.js once the frame is built. */
.lp .carousel.is-ready .carousel__frame {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel); overflow: hidden;
}
.lp .carousel.is-ready .carousel__viewport { overflow: hidden; }
.lp .carousel.is-ready .carousel__track {
  display: flex; gap: 0;
  transition: transform var(--t-slide);
}
.lp .carousel.is-ready .carousel__slide {
  flex: 0 0 100%;
  padding: clamp(14px, 2vw, 22px);
}
.lp .carousel.is-ready .carousel__controls {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 clamp(14px, 2vw, 22px) clamp(16px, 2vw, 22px);
}
.lp .carousel__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius); border: 1px solid var(--grey-200);
  background: var(--white); color: var(--navy-700); cursor: pointer;
  transition: border-color var(--t-fast);
}
.lp .carousel__arrow:hover { border-color: var(--navy-200); }
.lp .carousel__arrow svg { display: block; }
.lp .carousel__dots { display: flex; align-items: center; gap: 7px; }
.lp .carousel__dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--dot-idle); cursor: pointer;
  transition: background var(--t-fast);
}
.lp .carousel__dot.is-active { background: var(--navy-900); }
.lp .carousel__counter {
  font-size: var(--xsmall-size); color: var(--navy-200);
  margin-left: auto; white-space: nowrap;
}
.lp .carousel.is-ready .carousel__captions { margin-top: var(--space-5); max-width: 56em; }
.lp .carousel.is-ready .carousel__caption { display: none; margin-top: 0; }
.lp .carousel.is-ready .carousel__caption.is-active { display: block; }

/* =========================== faq ==================================== */
.lp .section-faq {
  padding: var(--sectionPadY) var(--sectionPadX);
  background: var(--white);
  scroll-margin-top: var(--header-h);
}
/* Built from core Details blocks (wp:details → <details class="faq-item">).
   The native <details> toggle does the open/close; landing.js only enforces
   "one open at a time". */
.lp .faq-list {
  margin-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--grey-200);
}
.lp .faq-item { border-bottom: 1px solid var(--grey-200); }
.lp .faq-item > summary {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0;
  list-style: none; cursor: pointer;
  font-family: var(--font-head); font-size: var(--faqQ-size);
  font-weight: var(--faqQ-weight); color: var(--navy-900);
}
.lp .faq-item > summary::-webkit-details-marker { display: none; }
.lp .faq-item > summary::after {
  content: "+"; flex-shrink: 0;
  color: var(--navy-400); font-size: 22px; line-height: 1;
}
.lp .faq-item[open] > summary::after { content: "\2212"; }
.lp .faq-item > :not(summary) {
  font-size: var(--body-size); line-height: 1.65;
  color: var(--navy-500);
  max-width: 62ch; text-wrap: pretty;
}
.lp .faq-item > :not(summary):last-child { padding-bottom: 22px; }

/* =========================== cta band =============================== */
.lp .cta-band {
  background: var(--navy-900); color: var(--white);
  padding: var(--sectionPadY) var(--sectionPadX);
  scroll-margin-top: var(--header-h);
  text-align: center;
}
.lp .cta-band__title {
  font-size: var(--h2cta-size); line-height: var(--h2cta-line);
  font-weight: 600; letter-spacing: -0.03em; text-wrap: balance;
}
.lp .cta-band__body {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55;
  color: var(--navy-100); margin: var(--space-5) auto 0;
  max-width: 32em; text-wrap: pretty;
}
.lp .cta-band__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center; margin-top: var(--space-8);
}

/* =========================== footer ================================ */
.lp .site-footer {
  background: var(--grey-100);
  border-top: 1px solid var(--grey-200);
  padding: clamp(40px, 4.5vw, 64px) var(--sectionPadX) var(--space-7);
}
.lp .site-footer__top {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  justify-content: space-between; align-items: flex-start;
}
.lp .site-footer__brand { max-width: 26em; }
.lp .site-footer__brand img { height: 22px; width: auto; }
.lp .site-footer__brand p {
  font-size: var(--small-size); line-height: var(--body-line);
  color: var(--navy-400); margin-top: var(--space-4);
}
.lp .site-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); }
.lp .site-footer__colTitle {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size); letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: bold; color: var(--navy-700);
}
.lp .site-footer__col ul {
  display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-4);
}
.lp .site-footer__col a { font-size: var(--small-size); color: var(--navy-500); }
.lp .site-footer__legal {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--grey-200);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--xsmall-size); color: var(--navy-300);
}
.lp .site-footer__legalLinks { display: flex; flex-wrap: wrap; gap: 18px; }
.lp .site-footer__legalLinks a { color: var(--navy-300); }

/* =========================== responsive =========================== */
@media (max-width: 1040px) {
  .lp .site-header__chip { display: none; }
}
@media (max-width: 900px) {
  .lp .site-nav,
  .lp .site-header__actions { display: none; }
  .lp .site-header__toggle { display: inline-flex; align-items: center; }
  .lp .section-head--split { align-items: flex-start; }
}
@media (max-width: 640px) {
  .lp .site-hero__logo { margin-top: clamp(40px, 12vw, 80px); }
  .lp .cta-band__actions .btn,
  .lp .signup-form .btn { width: 100%; }
  .lp .site-footer__legal { flex-direction: column; gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .lp [data-reveal].is-hidden,
  .lp .is-reveal.is-hidden { opacity: 1; transform: none; }
}