/* ============================================================
   0. Outfit — self-hosted variable font (one file covers 300–800)
   ============================================================ */
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   1. Tokens
   ============================================================ */
:root{
  --pink:#E8557B;
  --pink-dark:#C63D62;
  --pink-tint:#FDEEF2;
  --pink-tint-2:#FFF7F9;
  --ink:#1A1A1A;
  --ink-2:#6B6B6B;
  --ink-3:#A3A3A3;
  --bg:#FFFFFF;
  --bg-2:#FAF7F8;
  --line:#EFE9EB;

  /* spacing scale — every gap on the page comes from here */
  --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:36px; --s6:52px;
  --gutter:20px;
  --sec-y:clamp(56px, 7.5vw, 104px);
  --nav-h:64px;

  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
  --shadow-sm:0 1px 2px rgba(26,26,26,.04), 0 6px 18px rgba(26,26,26,.05);
  --shadow-md:0 2px 6px rgba(26,26,26,.05), 0 16px 36px rgba(26,26,26,.08);
  --shadow-lg:0 26px 60px rgba(198,61,98,.15), 0 8px 20px rgba(26,26,26,.07);
  --ease:cubic-bezier(.22,.75,.28,1);
  --sy:0;
}
@media (min-width:600px){ :root{ --gutter:32px; --nav-h:76px } }
@media (min-width:1024px){ :root{ --gutter:40px } }

/* ============================================================
   2. Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
html,body{overflow-x:hidden; max-width:100%}
img,svg{display:block; max-width:100%}
/* Every <img> carries width/height attributes so the browser can reserve space and
   avoid layout shift. Those attributes also set a presentational `height`, which would
   otherwise beat `aspect-ratio` (it only computes a height when height is auto) and
   render images at their full intrinsic pixel height. height:auto hands control back to
   the stylesheet; class-scoped rules like .brand img{height:40px} still win on specificity. */
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:6px}
::selection{background:var(--pink); color:#fff}

/* ============================================================
   3. Layout primitives
   ============================================================ */
.wrap{width:100%; max-width:1140px; margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y); position:relative}
.section--flush{padding-top:0}

.eyebrow{
  display:inline-flex; align-items:center; background:var(--pink-tint); color:var(--pink);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; line-height:1;
}
.h2{font-size:clamp(25px,4.4vw,38px); font-weight:700; line-height:1.2; letter-spacing:-.022em; text-wrap:balance}
.h2 em{font-style:normal; color:var(--pink)}
.lead{color:var(--ink-2); font-size:clamp(14.5px,2.6vw,16.5px)}
.sec-head{display:flex; flex-direction:column; align-items:center; gap:var(--s3); text-align:center; margin-bottom:var(--s6)}
.sec-head .lead{max-width:56ch}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.icon{width:24px; height:24px; flex:none}
.med{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--pink-tint); color:var(--pink)}
.med .icon{width:23px; height:23px}

/* ============================================================
   4. The one button
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:12px; font-weight:600; font-size:15px; line-height:1.2;
  background:var(--pink); color:#fff; box-shadow:0 8px 22px rgba(232,85,123,.28);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s;
  will-change:transform;
}
.btn:hover{background:var(--pink-dark); box-shadow:0 14px 32px rgba(232,85,123,.36)}
.btn .icon{width:20px; height:20px}
.btn--block{width:100%}
@media (max-width:400px){ .btn{font-size:14px; padding:14px 18px; gap:8px} }

/* ============================================================
   5. Reduced motion — global
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; animation-delay:0s !important; transition-delay:0s !important;
  }
}