/* ==========================================================================
   Moreplan — design system
   Rebuilt from Figma "Moreplan website" (1512px desktop / 390px mobile frames)
   ========================================================================== */

:root{
  /* Colour */
  --ink:            #111110;
  --offwhite:       #FFFEFB;
  --cream:          #EFECDD;
  --warmgray:       #C9C7BC;
  --blue:           #2463EB;
  --blue-eyebrow:   #1F54C8;
  --blue-soft:      #5B84F2;
  --error:          #B42318;
  --numeral:        #EEEEEE;
  --white:          #FFFFFF;

  --ink-70:  rgba(255,255,255,.70);
  --ink-55:  rgba(255,255,255,.55);
  --line-dark: rgba(255,255,255,.14);
  --line-light: rgba(17,17,16,.12);

  /* Type */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: 56px;   /* h1 */
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;
  --lh-body:    24px;

  /* Layout */
  --frame:      1512px;
  --gutter:     160px;   /* desktop section side padding */
  --container:  1192px;  /* 1512 - 160*2 */
  --radius:     8px;
  --radius-lg:  12px;
  --header-h:   72px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  /* the slack `main` leaves on a short page sits directly above the footer,
     so paint it the footer's colour rather than a white band */
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{ display:block; max-width:100%; }
main{ flex:1 0 auto; }  /* pushes .footer to the bottom of short pages */
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul{ margin:0; }
ul{ padding:0; list-style:none; }

/* ---------- helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
}
.section{ padding-inline:var(--gutter); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* placeholder frame behind every photo, so layout holds before assets land */
.ph{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(17,17,16,.10), rgba(17,17,16,.03) 45%, rgba(17,17,16,.12));
  background-color:var(--warmgray);
}
.ph > img,
.ph > picture{ width:100%; height:100%; object-fit:cover; display:block; }
.ph > picture > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- type ---------- */
.display{
  font-size:var(--fs-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
}
/* size modifiers must follow .display — same specificity, so source order decides */
.display--md{ font-size:36px; }
.display--lg{ font-size:48px; }
.h2{
  font-size:var(--fs-h2);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
}
.h3{
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
}
.lede{ font-size:var(--fs-body); font-weight:500; line-height:var(--lh-body); }
.body{ font-size:var(--fs-body); font-weight:400; line-height:var(--lh-body); }
.muted{ color:rgba(17,17,16,.66); }
.on-dark{ color:var(--white); }
.on-dark .muted{ color:var(--ink-70); }

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue-eyebrow);
}
.on-dark .eyebrow{ color:var(--blue-soft); }

.step-no{
  font-size:64px;
  font-weight:700;
  line-height:1;
  color:var(--numeral);
  letter-spacing:-.02em;
}
.on-dark .step-no{ color:rgba(255,255,255,.16); }
/* neutral grey disappears on the cream band — warm it up */
.feature--cream .step-no{ color:#DFDDCF; }
.feature--gray .step-no{ color:#BCBAB0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:56px; padding:10px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-size:var(--fs-body); font-weight:600; line-height:36px;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--blue); color:var(--white); }
.btn--primary:hover{ background:#1B4FD1; }
.btn--light{ background:var(--white); color:var(--ink); }
.btn--light:hover{ background:#ECEBE6; }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line-light); }
.btn--outline:hover{ border-color:rgba(17,17,16,.35); }
.btn--outline-light{ background:transparent; color:var(--white); border-color:var(--line-dark); }
.btn--outline-light:hover{ border-color:rgba(255,255,255,.45); }
.btn--sm{ height:40px; padding:8px 16px; line-height:24px; font-size:var(--fs-sm); }
.btn--block{ width:100%; }

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo__mark{ display:block; width:24px; height:16px; }
.logo__word{ font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--white); }
.logo--ink .logo__word{ color:var(--ink); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:60;
  background:var(--ink);
  height:var(--header-h);
  display:flex; align-items:center;
  padding-inline:var(--gutter);
}
.header__inner{
  width:100%; max-width:var(--container); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-70);
  transition:color .18s ease;
}
.nav a:hover{ color:var(--white); }
.nav a[aria-current="page"]{ color:var(--blue-soft); }
.header__cta{ display:flex; align-items:center; gap:24px; }
/* Secondary action: reads as a nav link, not a second button competing with
   "Book a demo". Matches .nav a so the two sit on one optical line. */
.header__login{
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-70);
  white-space:nowrap;
  transition:color .18s ease;
}
.header__login:hover{ color:var(--white); }

.burger{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
}
.burger span{
  display:block; width:20px; height:1.5px; background:var(--white);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--white);
  transition:transform .2s ease, opacity .2s ease;
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  display:none;
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:55;
  background:var(--ink);
  padding:24px;
  border-top:1px solid var(--line-dark);
}
.mobile-nav.is-open{ display:block; }
/* scoped to the nav links — an unscoped `a` also hit the CTA button below,
   overriding its inline-flex centring and horizontal padding */
.mobile-nav nav a{
  display:block; padding:14px 0;
  font-size:18px; font-weight:600; color:var(--white);
  border-bottom:1px solid var(--line-dark);
}
/* Full white, like the nav items above it: at 70% in a dark drawer it read as
   a disabled link. Separation comes from the missing divider, not from dimming. */
.mobile-nav__login{
  display:block; margin-top:22px;
  font-size:18px; font-weight:600; color:var(--white);
}
.mobile-nav__login:hover{ color:var(--blue-soft); }
/* .mobile-nav__login already supplies the gap when present */
.mobile-nav .btn{ margin-top:16px; }

/* ==========================================================================
   Hero — home
   ========================================================================== */
.hero{
  background:var(--offwhite);
  display:flex; align-items:center;
  min-height:608px;
  padding-left:var(--gutter);
  gap:80px;
}
.hero__copy{ flex:1 1 0; max-width:540px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.hero__media{ flex:0 0 732px; align-self:stretch; }
.hero__media .ph{ height:100%; min-height:608px; }

/* Hero — centered variant (Platform, About, Pricing) */
.hero-center{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:24px;
  padding-block:96px;
}
/* the Platform hero is a top-level section, so it needs its own background —
   on About and Pricing .hero-center is a child of a dark section and must stay
   transparent, which is why this is a separate class, not a rule on .hero-center */
.hero-center--light{ background:var(--offwhite); }
.hero-center .display{ max-width:760px; }
.hero-center p{ max-width:640px; }
.hero-center__actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats{
  background:var(--ink); color:var(--white);
  padding:80px 112px;
  text-align:center;
}
.stats__inner{ max-width:1288px; margin-inline:auto; display:flex; flex-direction:column; gap:16px; align-items:center; }
.stats p{ max-width:820px; color:var(--ink-70); }
.stats__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  width:100%; max-width:820px; margin-top:40px; gap:24px;
}
.stat__num{ font-size:32px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.stat__label{ font-size:var(--fs-xs); color:var(--ink-55); margin-top:4px; }

/* Stats on a light hero (About page uses dark; Platform light) */
.stats--plain{ background:transparent; color:inherit; padding:0; }

/* ==========================================================================
   Feature rows (numbered story sections + platform rows)
   ========================================================================== */
.feature{
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:80px;
  min-height:568px;
}
.feature__copy{ flex:1 1 0; display:flex; flex-direction:column; gap:16px; }
.feature__copy p{ max-width:540px; }
.feature__media{ flex:1 1 0; }
.feature--reverse{ flex-direction:row-reverse; }
.feature--light{ background:var(--offwhite); }
.feature--dark{ background:var(--ink); color:var(--white); }
.feature--cream{ background:var(--cream); }
.feature--gray{ background:var(--warmgray); }

.feature__label{ display:flex; align-items:center; gap:16px; }

.feature__media .ph{ border-radius:var(--radius); aspect-ratio:4/3.3; }
/* composite artwork — show it whole rather than cover-cropping the card off */
.feature__media--full .ph{ aspect-ratio:1512/1024; }
/* generic: composite art shown whole — pass the asset ratio as --ratio */
.feature__media--native .ph{ aspect-ratio:var(--ratio); background:none; }
/* device mockup — native ratio, own corner radius, CSS shadow */
/* chat composite — flattened onto the row background, shown at native ratio */
/* taller than the row's 568px min-height, so it needs its own breathing room
   — without this the composite sits flush to the section edges */
.feature__media--chat{ padding-block:56px; }
.feature__media--chat .ph{ aspect-ratio:2506/2757; background:none; }
.feature__media--device .ph{
  /* native ratio of whatever export is in the slot, so nothing cover-crops */
  aspect-ratio:var(--ratio, 2184/1178);
  background:none;
  border-radius:12px;
  box-shadow:
    0 10px 24px -8px rgba(13,13,13,.16),
    0 30px 70px -20px rgba(13,13,13,.18);
}

/* checklist */
.checks{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.checks li{ display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); line-height:20px; }
.checks svg{ flex:0 0 16px; margin-top:2px; }
.checks b{ font-weight:600; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta{
  position:relative;
  min-height:512px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:96px var(--gutter);
  color:var(--white);
  background:#2A2622;
  overflow:hidden;
}
.cta__bg{ position:absolute; inset:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,8,.55), rgba(10,9,8,.65));
}
.cta__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; max-width:470px; }
/* short headings shouldn't drop a one-word widow onto line two */
.cta__inner--wide{ max-width:680px; }
.cta__inner--wide p{ max-width:470px; }
.cta__inner h2{ font-size:36px; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.cta__inner p{ color:rgba(255,255,255,.82); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--ink); color:var(--white);
  padding:40px var(--gutter) 56px;
}
.footer__inner{ max-width:var(--container); margin-inline:auto; display:flex; flex-direction:column; gap:20px; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:20px; }
.footer__nav a{ font-size:var(--fs-xs); color:var(--ink-70); }
.footer__nav a:hover{ color:var(--white); }
.footer p{ font-size:var(--fs-xs); line-height:18px; color:var(--ink-55); max-width:520px; }

/* ==========================================================================
   Cards (About principles, Pricing)
   ========================================================================== */
.principles{ background:var(--ink); color:var(--white); padding:80px var(--gutter) 96px; }
.principles__head{ max-width:var(--container); margin:0 auto 40px; display:flex; flex-direction:column; gap:8px; }
.cards2{ max-width:var(--container); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:24px;
  display:flex; flex-direction:column; gap:10px;
}
.card h3{ font-size:18px; font-weight:600; }
.card p{ font-size:var(--fs-xs); line-height:19px; color:var(--ink-70); }

/* quote */
.quote{
  background:var(--cream);
  padding:96px var(--gutter);
  text-align:center;
}
.quote blockquote{
  margin:0 auto; max-width:760px;
  font-size:24px; font-weight:500; line-height:1.4; letter-spacing:-.01em;
}
.quote cite{ display:block; margin-top:24px; font-size:var(--fs-xs); font-style:normal; color:rgba(17,17,16,.55); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing{ background:var(--ink); color:var(--white); padding:0 var(--gutter) 96px; }
.plans{
  max-width:1030px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;
}
.plan{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  display:flex; flex-direction:column; gap:20px;
}
.plan--featured{
  background:#101B3D;
  border-color:var(--blue);
}
.plan__name{ font-size:var(--fs-sm); font-weight:600; }
.plan--featured .plan__name{ color:var(--blue-soft); }
.plan__price{ font-size:48px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.plan__meta{ font-size:var(--fs-xs); color:var(--ink-70); margin-top:8px; }
.plan__list{ display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid var(--line-dark); }
.plan__list li{ position:relative; padding-left:14px; font-size:var(--fs-sm); color:rgba(255,255,255,.88); }
.plan__list li::before{ content:""; position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }
.plan .btn{ margin-top:auto; }
.pricing__note{ text-align:center; font-size:var(--fs-xs); color:var(--ink-55); margin-top:32px; }
.pricing__note a{ color:var(--blue-soft); text-decoration:underline; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background:var(--offwhite); padding:96px var(--gutter); }
.faq__inner{ max-width:var(--container); margin-inline:auto; display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:80px; }
.faq__intro{ display:flex; flex-direction:column; gap:12px; }
.faq__list{ display:flex; flex-direction:column; }
.faq__item{ border-bottom:1px solid var(--line-light); }
.faq__q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; text-align:left;
  font-size:var(--fs-sm); font-weight:500;
}
.faq__q svg{ flex:0 0 16px; transition:transform .22s ease; }
.faq__item.is-open .faq__q svg{ transform:rotate(180deg); }
.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s cubic-bezier(.2,.7,.3,1);
}
.faq__a-inner{
  overflow:hidden;
  font-size:var(--fs-sm); line-height:22px; color:rgba(17,17,16,.66); max-width:640px;
}
.faq__a-inner p + p{ margin-top:12px; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__item.is-open .faq__a-inner{ padding-bottom:18px; }

/* ==========================================================================
   Contact split
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:820px; background:var(--white); }
.split__media{
  position:relative; display:flex; align-items:center;
  padding:80px 72px; color:var(--white); overflow:hidden; background:#2A2622;
}
.split__media .ph{ position:absolute; inset:0; }
.split__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,8,.55), rgba(10,9,8,.72)); }
.split__media-inner{ position:relative; z-index:2; display:flex; flex-direction:column; gap:20px; max-width:460px; }
.split__media h1{ font-size:36px; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.split__media p{ color:rgba(255,255,255,.82); font-size:var(--fs-sm); }
.split__form{ background:var(--white); padding:80px 72px; display:flex; align-items:center; }
.form{ width:100%; max-width:420px; margin-inline:auto; display:flex; flex-direction:column; gap:16px; }
.form__head{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:var(--fs-xs); font-weight:600; }
.field input{
  height:44px; padding:0 12px;
  border:1px solid var(--line-light); border-radius:var(--radius);
  background:var(--white); font-size:var(--fs-sm);
}
.field input::placeholder{ color:rgba(17,17,16,.38); }
.field input:focus{ outline:2px solid rgba(36,99,235,.35); outline-offset:1px; border-color:var(--blue); }

/* submit status */
.form__status{
  margin:0; font-size:13px; line-height:20px; color:rgba(17,17,16,.72);
}
.form__status.is-error{ color:var(--error); }

/* validation */
.field__error{
  margin:0; font-size:12px; line-height:16px; color:var(--error);
}
.field.is-invalid input{ border-color:var(--error); }
.field.is-invalid input:focus{
  border-color:var(--error);
  outline-color:rgba(180,35,24,.35);
}
.legal{ font-size:11px; line-height:16px; color:rgba(17,17,16,.55); }
.legal a{ text-decoration:underline; }
.consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12px; line-height:18px;
  color:rgba(17,17,16,.92);          /* deliberately darker than the legal line — it needs a decision */
  font-weight:500;
  cursor:pointer;
}
.consent input{
  flex:0 0 16px; width:16px; height:16px; margin:1px 0 0;
  accent-color:var(--blue);
  cursor:pointer;
}
/* .field label sets 600 — too heavy for a whole paragraph, so win on specificity */
.field--consent{ gap:8px; }
.field--consent .consent{ font-weight:500; }
.field--consent.is-invalid .consent{ color:var(--error); }
.field--consent.is-invalid .consent input{ outline:2px solid var(--error); outline-offset:2px; }

/* ==========================================================================
   Floorplan / mock cards used inside feature media
   ========================================================================== */
/* section 01 floorplan card — export is trimmed to the card body; shadow is CSS */
.feature__media--card{ display:flex; align-items:center; justify-content:center; }
.feature__media--card picture{ display:block; }
.feature__media--card img{
  display:block;
  width:100%; height:auto;
  max-width:397px;                 /* the card body at 1:1 — export is 794px @2x */
  border-radius:14px;              /* matches the card's own corner radius */
  box-shadow:
    0 18px 36px -12px rgba(13,13,13,.20),
    0 48px 120px -24px rgba(13,13,13,.18);
}

.badge-card{
  position:absolute; left:-24px; top:24px;
  min-width:min(280px, 82%);          /* runs well past its text, as in the frame */
  background:var(--white); border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(17,17,16,.18);
  padding:14px 18px;
}
.badge-card small{ display:block; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:rgba(17,17,16,.5); }
.badge-card b{ font-size:20px; font-weight:700; }
.badge-card i{ font-style:normal; color:rgba(17,17,16,.5); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1280px){
  :root{ --gutter:80px; }
  .hero__media{ flex-basis:46%; }
  .feature{ gap:56px; }
}

@media (max-width:1024px){
  :root{ --gutter:48px; --fs-display:44px; --fs-h2:28px; }
  .cta__inner h2{ font-size:32px; }
  .faq__inner{ grid-template-columns:1fr; gap:32px; }
  .plans{ grid-template-columns:1fr; max-width:520px; }
  .split{ grid-template-columns:1fr; min-height:0; }
  .split__media,.split__form{ padding:64px 48px; }
  .split{ min-height:0; }
}

@media (max-width:860px){
  .nav,.header__cta{ display:none; }
  .burger{ display:flex; }

  .hero{
    position:relative;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:0; min-height:520px; gap:0;
    color:var(--white); background:var(--ink);
  }
  .hero__media{ position:absolute; inset:0; flex:none; }
  .hero__media .ph{ min-height:0; height:100%; }
  .hero__media .ph > img{ object-position:50% 100%; }   /* hero3: keeps the whole laptop in frame and puts the headline on the dark room behind it */
  .hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.74) 45%, rgba(10,9,8,.92) 100%); }
  .hero__copy{ position:relative; z-index:2; max-width:none; padding:32px 24px 48px; gap:16px; }
  .hero .display{ color:var(--white); }
  .hero .lede{ color:rgba(255,255,255,.85); }

  .feature{ flex-direction:column; align-items:stretch; gap:24px; padding-block:56px; min-height:0; }
  .feature--reverse{ flex-direction:column; }
  .feature__copy p{ max-width:none; }
  .feature__media .ph{ aspect-ratio:16/11; }
  .feature__media--full .ph{ aspect-ratio:1512/1024; }
  .feature__media--native .ph{ aspect-ratio:var(--ratio-m, var(--ratio)); }
  .feature__media--device .ph{
    aspect-ratio:var(--ratio-m, var(--ratio, 2184/1178));
    /* the mobile export is composed with its own margin and shadow */
    border-radius:0; box-shadow:none;
  }
  .feature__media--chat{ padding-block:0; }
  .feature__media--chat .ph{ aspect-ratio:2506/2757; }
  .feature__media--card img{ max-width:none; border-radius:16px; }

  .cards2{ grid-template-columns:1fr; }
  .stats{ padding:56px 24px; }
  .stats__grid{ gap:12px; margin-top:28px; }
  .stat__num{ font-size:22px; }

  .hero-center{ padding-block:56px; text-align:center; }
  .hero-center__actions{ width:100%; flex-direction:column; }
  .hero-center__actions .btn{ width:100%; }

  .br-wide{ display:none; }              /* forced break is desktop-only */
  .display--md{ font-size:30px; }
  .display--lg{ font-size:40px; }
  .principles,.quote,.faq,.pricing{ padding-inline:24px; }
  .cta{ padding:72px 24px; min-height:0; }
  .footer{ padding:32px 24px 40px; }
  .split__media,.split__form{ padding:48px 24px; }
  .split__media h1{ font-size:28px; }
  .badge-card{ left:-32px; }              /* bleeds past the 24px gutter */
  .feature{ overflow-x:clip; }            /* ...without opening a scrollbar */
}

@media (max-width:520px){
  :root{ --gutter:24px; --fs-display:34px; --fs-h2:24px; }
  .display--md{ font-size:26px; }
  .display--lg{ font-size:34px; }
  .quote blockquote{ font-size:19px; }
  .plan__price{ font-size:40px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Legal pages (privacy, terms)
   ========================================================================== */
.legal-page{ padding:80px var(--gutter) 112px; background:var(--offwhite); }
.legal-page__inner{ max-width:720px; margin-inline:auto; }
.legal-page h1{ font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.legal-page__updated{ margin-top:10px; font-size:12px; color:rgba(17,17,16,.5); }
.legal-page__lede{ margin-top:24px; font-size:17px; line-height:28px; color:rgba(17,17,16,.7); }
.legal-page h2{
  margin-top:44px; padding-top:20px;
  border-top:1px solid var(--line-light);
  font-size:20px; font-weight:600; letter-spacing:-.01em;
}
.legal-page p{ margin-top:14px; font-size:15px; line-height:26px; color:rgba(17,17,16,.78); }
.legal-page ul{
  margin-top:14px; padding-left:22px; list-style:disc;
  display:flex; flex-direction:column; gap:8px;
}
.legal-page li{ font-size:15px; line-height:26px; color:rgba(17,17,16,.78); }
.legal-page a{ text-decoration:underline; }
.legal-page strong{ color:var(--ink); font-weight:600; }

@media (max-width:860px){
  .legal-page{ padding:56px 24px 80px; }
  .legal-page h1{ font-size:30px; }
  .legal-page h2{ font-size:18px; margin-top:36px; }
}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   Everything here is gated on `html.js-anim`, which the inline head script
   adds only when the visitor has not asked for reduced motion. No JS, or
   reduced motion, means no class and the page renders fully visible.
   ========================================================================== */

/* ---------- hover and state, safe for everyone ---------- */
.btn{ transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn--primary:hover{ box-shadow:0 6px 18px -6px rgba(36,99,235,.55); }
.btn:active{ transform:translateY(1px); box-shadow:none; }

.nav a, .header__login{ position:relative; }
.nav a::after, .header__login::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after, .nav a[aria-current="page"]::after,
.header__login:hover::after{ transform:scaleX(1); }

.card, .plan{ transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s ease, background-color .25s ease; }
.card:hover, .plan:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.28); }
.plan--featured:hover{ border-color:var(--blue-soft); }

.faq__q{ transition:color .18s ease; }
.faq__q:hover{ color:var(--blue); }

.header{ transition:box-shadow .25s ease, border-color .25s ease; border-bottom:1px solid transparent; }
.header.is-scrolled{ border-bottom-color:var(--line-dark); box-shadow:0 10px 30px -18px rgba(0,0,0,.9); }

.stat__num{ font-variant-numeric:tabular-nums; }

/* ---------- scroll reveal ---------- */
/* parent qualifiers sit in :where() so none of these outrank `.is-in` below —
   `.js-anim .stats__grid .stat` (three classes) beat it and left the stats stuck */
.js-anim .feature__copy,
.js-anim .feature__media,
.js-anim :where(.stats__inner) > *,
.js-anim :where(.stats__grid) .stat,
.js-anim :where(.principles__head) > *,
.js-anim :where(.cards2) .card,
.js-anim :where(.quote) blockquote,
.js-anim :where(.quote) cite,
.js-anim :where(.plans) .plan,
.js-anim .pricing__note,
.js-anim :where(.faq__intro) > *,
.js-anim :where(.faq__list) .faq__item,
.js-anim :where(.cta__inner) > *,
.js-anim :where(.split__media-inner) > *,
.js-anim :where(.form) > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
}
.js-anim .is-in{ opacity:1; transform:none; }

/* stagger siblings so a row arrives as a group, not a block */
.js-anim .stats__grid .stat:nth-child(2),
.js-anim .cards2 .card:nth-child(2),
.js-anim .plans .plan:nth-child(2),
.js-anim .faq__list .faq__item:nth-child(2){ transition-delay:.07s; }
.js-anim .stats__grid .stat:nth-child(3),
.js-anim .cards2 .card:nth-child(3),
.js-anim .plans .plan:nth-child(3),
.js-anim .faq__list .faq__item:nth-child(3){ transition-delay:.14s; }
.js-anim .cards2 .card:nth-child(4),
.js-anim .faq__list .faq__item:nth-child(4){ transition-delay:.21s; }
.js-anim .faq__list .faq__item:nth-child(5){ transition-delay:.28s; }
.js-anim .stats__inner > p{ transition-delay:.06s; }
.js-anim .stats__inner > .stats__grid{ transition-delay:.1s; }
.js-anim .cta__inner > p{ transition-delay:.08s; }
.js-anim .cta__inner > .btn{ transition-delay:.16s; }
.js-anim .split__media-inner > p{ transition-delay:.08s; }
.js-anim .split__media-inner > .checks{ transition-delay:.16s; }

/* the media column comes in from the side it sits on */
.js-anim .feature .feature__media{ transform:translateY(18px) translateX(14px); }
.js-anim .feature--reverse .feature__media{ transform:translateY(18px) translateX(-14px); }
.js-anim .feature .feature__media.is-in{ transform:none; }

/* ---------- above the fold: play on load, don't wait for a scroll ---------- */
@keyframes mp-rise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes mp-fade{ from{ opacity:0; } to{ opacity:1; } }

.js-anim .hero__copy > *,
.js-anim .hero-center > *{
  animation:mp-rise .7s cubic-bezier(.2,.7,.3,1) both;
}
.js-anim .hero__copy > *:nth-child(2),
.js-anim .hero-center > *:nth-child(2){ animation-delay:.09s; }
.js-anim .hero__copy > *:nth-child(3),
.js-anim .hero-center > *:nth-child(3){ animation-delay:.18s; }
.js-anim .hero-center > *:nth-child(4){ animation-delay:.27s; }
.js-anim .hero-center > *:nth-child(5){ animation-delay:.36s; }
.js-anim .hero__media{ animation:mp-fade 1s ease .1s both; }
.js-anim .legal-page__inner > h1,
.js-anim .legal-page__inner > .legal-page__updated,
.js-anim .legal-page__inner > .legal-page__lede{ animation:mp-rise .6s cubic-bezier(.2,.7,.3,1) both; }
.js-anim .legal-page__inner > .legal-page__updated{ animation-delay:.07s; }
.js-anim .legal-page__inner > .legal-page__lede{ animation-delay:.14s; }

/* ---------- platform media: show the whole export, never a crop ----------
   `cover` fills the box and clips whatever doesn't fit. These two slots carry
   artwork the exports were composed around, so they use `contain` instead:
   the full image is always visible and centred, and a ratio drift of a
   fraction of a percent letterboxes invisibly rather than slicing an edge.
   overflow:visible so not even a sub-pixel rounding error can clip. */
.feature__media--device .ph,
.feature__media--native .ph{ overflow:visible; }
.feature__media--device .ph > picture > img,
.feature__media--device .ph > img,
.feature__media--native .ph > picture > img,
.feature__media--native .ph > img{
  object-fit:contain;
  object-position:center center;
}