/* =========================================================================
   Xara: style.css

   Rebuilt from the reference renders at a 1377 x 1015 CSS viewport, so the
   numbers are measured rather than guessed: the shell gutter is 64px, the
   hero headline is ~84px on a 1.0 leading, section headings ~44px, and the
   three security cards are 403px on a 21px gap. Anything that has to hold
   that proportion is written against that viewport (84/1377 = 6.1vw) and
   clamped at both ends.

   Tokens come from the original stylesheet where it declared them:
   --color-primary #1b161d, --color-secondary #090d12,
   --color-kashmir-blue #655f58, and #092C11 / #1E9E45 for the brand blue.

   Order: tokens · reset · primitives · nav · hero · phone · features ·
          security · steps · voices · community · faq · block · cta ·
          footer · motion · responsive
   ========================================================================= */

:root {
  --brand: #092C11;
  --brand-lift: #1E9E45;
  --brand-deep: #080f1b;

  --navy: #1b161d;          /* every heading on the page */
  --ink: #1b161d;           /* --color-primary */
  --muted: #655f58;         /* --color-kashmir-blue */
  --dark: #1b161d;          /* the closing section */

  --paper: #ffffff;
  --tint: #f5efe6;
  --tint-2: #f5efe6;
  --lav: #DDF3DC;
  --mint: #7CF17E;          /* the icon's letters */
  --line: #dfd8cd;
  --line-soft: #eee7dd;

  --shell: 1400px;
  --gutter: 64px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Switzer, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, figure, figcaption { margin: 0; }
ol, ul { list-style: none; padding: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 104px 0; }

/* ============================= primitives =============================== */

.badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  line-height: 1;
}
.badge--onlav { border-color: #DDF3DC; }

.h2 {
  margin-top: 26px;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.h2--tight { font-weight: 700; letter-spacing: -0.035em; }

/* heading left, one short paragraph parked on the right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  align-items: end;
  gap: 40px;
}
.split_aside {
  padding-bottom: 8px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 440px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              filter 200ms linear;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { height: 40px; padding: 0 18px; }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; border-radius: 12px; }

/* the diagonal weave both filled buttons carry */
.btn--blue, .btn--dark { color: #fff; }
.btn--blue::after, .btn--dark::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.075) 0 1px, transparent 1px 7px);
}
.btn--blue {
  background: var(--k-purple);
  box-shadow: 0 1px 0 rgba(255,255,255,.34) inset,
              0 8px 20px -8px rgba(20, 96, 36, .7);
}
.btn--blue:hover { box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 12px 26px -8px rgba(20, 96, 36,.8); }
.btn--dark {
  background: var(--k-purple);
  box-shadow: 0 1px 0 rgba(255,255,255,.13) inset,
              0 8px 20px -10px rgba(8, 41, 15, .8);
}
.btn--white {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px -10px rgba(27, 22, 29, .5);
}

.ico {
  flex: none;
  width: 18px; height: 18px;
  background: no-repeat 50% / contain;
}
.ico--whatsapp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.04 2C6.6 2 2.2 6.4 2.2 11.84c0 1.74.46 3.44 1.32 4.94L2.1 22l5.35-1.4a9.8 9.8 0 0 0 4.59 1.16h.01c5.43 0 9.84-4.4 9.84-9.84 0-2.63-1.02-5.1-2.88-6.96A9.77 9.77 0 0 0 12.04 2Zm0 1.79c2.15 0 4.17.84 5.69 2.36a7.99 7.99 0 0 1 2.36 5.69c0 4.45-3.62 8.06-8.06 8.06a8.1 8.1 0 0 1-4.11-1.13l-.3-.17-3.05.8.81-2.98-.19-.31a8.03 8.03 0 0 1-1.23-4.27c0-4.45 3.62-8.05 8.08-8.05Zm-2.6 3.86c-.15 0-.4.06-.62.29-.21.23-.81.79-.81 1.93s.83 2.24.95 2.4c.11.15 1.61 2.46 3.9 3.45.55.24.97.38 1.3.48.55.18 1.05.15 1.44.09.44-.06 1.35-.55 1.55-1.09.19-.53.19-.99.13-1.08-.05-.1-.2-.15-.42-.27-.23-.11-1.35-.66-1.55-.74-.21-.08-.36-.11-.51.12-.15.22-.58.73-.71.88-.13.15-.26.17-.49.06-.22-.12-.95-.36-1.82-1.13a6.8 6.8 0 0 1-1.26-1.56c-.13-.23-.01-.35.1-.46.1-.1.23-.27.34-.4.11-.14.15-.23.23-.38.07-.16.03-.29-.02-.4-.06-.12-.5-1.24-.7-1.7-.18-.44-.37-.38-.51-.39h-.44Z'/%3E%3C/svg%3E");
}
.ico--chat  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23146024'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.ico--wave  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7B90' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2 11v2M5.4 8v8M8.8 4.5v15M12.2 8.5v7M15.6 6v12M19 9v6M22 11v2'/%3E%3C/svg%3E"); }
.ico--chart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7B90' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.4'/%3E%3Cpath d='M6.6 14.6l3.2-3.6 2.5 2.2 4.9-5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico--bill  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7B90' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2.4'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.ico--lang  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7B90' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v13H9l-6 4V4Z'/%3E%3Cpath d='M8 10.5h8M12 7.5v6'/%3E%3C/svg%3E"); }
.ico--support { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7B90' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E"); }

/* ================================= nav ================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  transition: box-shadow 300ms linear, background 300ms linear;
}
.nav.is-stuck { box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px -22px rgba(27, 22, 29,.4); }

.nav_inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 84px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.logo { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); }
.logo_mark { width: 22px; height: 22px; color: var(--brand); }
.logo_mark svg { width: 100%; height: 100%; }
.logo_word { font-size: 27px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.logo_dot { color: var(--brand); }
.logo--light { color: #fff; }
.logo--light .logo_mark { color: #7CF17E; }

/* the pill is the moving part: it slides, the labels stay put */
.seg { position: relative; display: flex; align-items: center; gap: 4px; margin-left: 16px; padding: 3px; }
.seg_pill {
  position: absolute;
  top: 3px; bottom: 3px;
  left: var(--px, 3px);
  width: var(--pw, 0px);
  border-radius: 9px;
  background: #EEF9F0;
  transition: left 420ms var(--ease), width 420ms var(--ease);
}
.seg_opt {
  position: relative;
  padding: 7px 16px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  color: #a6adbe;
  transition: color 260ms linear;
}
.seg_opt.is-active { color: var(--navy); }

.nav_links {
  display: flex;
  align-items: center;
  gap: 23px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.nav_links a { position: relative; padding: 6px 0; transition: color 220ms linear; }
.nav_links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms var(--ease);
}
.nav_links a:hover { color: var(--brand); }
.nav_links a:hover::after { transform: scaleX(1); }

.nav_cta { height: 42px; padding: 0 22px; }

.nav_burger { display: none; width: 26px; height: 18px; position: relative; }
.nav_burger i {
  position: absolute; left: 0; right: 0; height: 2px;
  border-radius: 2px; background: var(--navy);
  transition: transform 320ms var(--ease), opacity 200ms linear;
}
.nav_burger i:nth-child(1) { top: 3px; }
.nav_burger i:nth-child(2) { bottom: 3px; }

/* ================================ hero ================================== */

.hero { position: relative; padding-top: 94px; overflow: hidden; }

/* the faint technical grid behind the top of the page */
.hero_grid {
  position: absolute;
  inset: 0 0 auto 0;
  height: 760px;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(27, 22, 29,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 22, 29,.055) 1px, transparent 1px),
    linear-gradient(45deg, rgba(27, 22, 29,.035) 1px, transparent 1px);
  background-size: 62px 62px, 62px 62px, 62px 62px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 22%, #000 20%, transparent 78%);
          mask-image: radial-gradient(90% 70% at 50% 22%, #000 20%, transparent 78%);
}

.hero_inner { position: relative; z-index: 2; text-align: center; }

.hero_pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px -20px rgba(27, 22, 29, .55);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.hero_pill strong { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.hero_pill_dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(20, 96, 36, .5);
  animation: pip 2.4s var(--ease-soft) infinite;
}
@keyframes pip {
  0%   { box-shadow: 0 0 0 0 rgba(20, 96, 36, .45); }
  70%  { box-shadow: 0 0 0 8px rgba(20, 96, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 96, 36, 0); }
}

.hero_title {
  margin-top: 31px;
  font-size: clamp(40px, 6.1vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.042em;
  color: var(--navy);
}

.hero_sub {
  max-width: 570px;
  margin: 28px auto 0;
  font-size: clamp(17px, 1.46vw, 20px);
  line-height: 1.5;
  color: var(--muted);
}

.hero_cta { margin-top: 32px; height: 46px; padding: 0 24px; font-size: 16px; }

/* The device: pushed below the fold, tilted back, lit from underneath. The
   mask fades it into the page: without it the hero's overflow cuts the phone
   with a hard horizontal edge that reads as a bug. */
.hero_stage {
  position: relative;
  margin-top: 74px;
  height: 590px;
  perspective: 1500px;
  -webkit-mask-image: linear-gradient(#000 62%, rgba(0,0,0,.35) 88%, transparent 100%);
          mask-image: linear-gradient(#000 62%, rgba(0,0,0,.35) 88%, transparent 100%);
}
.hero_glow {
  position: absolute;
  left: 50%; bottom: -140px;
  width: 1400px; height: 620px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 62%, rgba(232, 244, 168, .5) 0%, rgba(232, 244, 168, 0) 68%),
    radial-gradient(70% 60% at 50% 74%, rgba(226, 245, 230, .55) 0%, rgba(226, 245, 230, 0) 72%);
}
.hero_device { position: absolute; left: 50%; top: 0; transform: translateX(-50%); transform-style: preserve-3d; }
.phone--tilt { transform: rotateX(15deg) rotateZ(-1.6deg); transform-origin: 50% 0%; }

/* ================================ phone =================================
   The device and the WhatsApp thread inside it are DOM, not screenshots:
   authored against --pw so one number rescales the whole mock, and every
   type size inside is expressed in em of that. Chat markup is built by
   chat.js.
   ======================================================================== */

.phone {
  --pw: 520px;
  position: relative;
  width: var(--pw);
  aspect-ratio: 430 / 880;
  padding: calc(var(--pw) * 0.023);
  border-radius: calc(var(--pw) * 0.125);
  background: #2b2630;
  box-shadow:
    0 2px 3px rgba(255, 255, 255, .35) inset,
    0 60px 90px -40px rgba(19, 52, 26, .55),
    0 20px 44px -26px rgba(19, 52, 26, .5);
}
.phone_screen {
  position: relative;
  height: 100%;
  border-radius: calc(var(--pw) * 0.104);
  overflow: hidden;
  background: #0a0f17;
  font-size: calc(var(--pw) / 430 * 16);
  display: flex;
  flex-direction: column;
}

.ph_status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85em 1.6em 0.2em;
  color: #fff; font-size: 0.95em; font-weight: 600;
}
.ph_status_r { display: flex; align-items: center; gap: 0.35em; }
.ph_bars, .ph_wifi { width: 1.1em; height: 0.8em; background: no-repeat 50% / contain; }
.ph_bars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='white'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' y='.5' width='3' height='11.5' rx='1'/%3E%3C/svg%3E"); }
.ph_wifi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='white'%3E%3Cpath d='M8 11.4 5.6 8.6a3.6 3.6 0 0 1 4.8 0L8 11.4Zm4.1-4.8a7.2 7.2 0 0 0-8.2 0L2.3 4.8a9.6 9.6 0 0 1 11.4 0l-1.6 1.8Z'/%3E%3C/svg%3E"); }
.ph_batt { min-width: 2em; padding: 0.05em 0.4em; border-radius: 0.35em; background: #f5c944; color: #1a1400; font-size: 0.78em; font-weight: 800; text-align: center; }

.ph_notch {
  position: absolute;
  top: 0.55em; left: 50%;
  width: 7.4em; height: 2.1em;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.ph_notch::after {
  content: "";
  position: absolute; right: 0.75em; top: 50%;
  width: 0.62em; height: 0.62em;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #10151c;
  box-shadow: inset 0 0 0 1px #222a37;
}

.ph_head { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 1em 0.7em 0.7em; background: #0e1620; }
.ph_back { display: flex; align-items: center; gap: 0.3em; padding: 0.28em 0.62em 0.28em 0.42em; border-radius: 999px; background: #222a36; color: #fff; font-size: 0.95em; font-weight: 600; }
.ph_back svg { width: 0.7em; height: 0.9em; }
.ph_av { width: 2.4em; height: 2.4em; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; }
.ph_av svg { width: 1.35em; height: 1.35em; }
.ph_who { min-width: 0; line-height: 1.15; }
.ph_who b { display: block; color: #fff; font-size: 1.05em; font-weight: 700; }
.ph_who span { display: flex; align-items: center; gap: 0.3em; color: #8b9aa4; font-size: 0.82em; }
.ph_tick { width: 0.85em; height: 0.85em; border-radius: 50%; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7CFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat 50% / 0.55em; }

.ph_thread {
  position: relative;
  flex: 1; min-height: 0;
  padding: 0.7em 0.7em 1em;
  display: flex; flex-direction: column; gap: 0.55em;
  background: #0a0f17;
  overflow: hidden;
}
.ph_thread::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.055;
  background-image: url("/assets/img/doodle.svg");
  background-size: 260px 260px;
}
.ph_thread > * { position: relative; }

.ph_sys { align-self: center; padding: 0.28em 0.85em; border-radius: 0.5em; background: #161c25; color: #8b9aa4; font-size: 0.8em; font-weight: 600; }
.ph_menu { display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.8em; border-radius: 0.55em; background: #1c232f; color: #4fc3a1; font-size: 1em; font-weight: 600; }

.ph_msg { max-width: 82%; padding: 0.45em 0.7em 0.35em; border-radius: 0.6em; color: #e9edef; font-size: 1em; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.28); }
.ph_msg--out { align-self: flex-end; background: var(--bubble); color: #fff; border-top-right-radius: 0; }
.ph_msg--in  { align-self: flex-start; background: #1c232f; border-top-left-radius: 0; }
.ph_meta { display: flex; align-items: center; justify-content: flex-end; gap: 0.28em; margin-top: 0.1em; color: rgba(255,255,255,.7); font-size: 0.72em; font-weight: 500; }
.ph_msg--in .ph_meta { color: #8b9aa4; }
.ph_checks { width: 1em; height: 0.7em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.6 4.4 10 11 2'/%3E%3Cpath d='M8 6.6 11.4 10 18 2'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_amount { color: #fff; font-weight: 700; }
.ph_acct { color: #53bdeb; text-decoration: underline; }
.ph_cta { margin-top: 0.4em; padding: 0.62em 0; border-top: 1px solid rgba(255,255,255,.13); color: #53bdeb; font-size: 1em; font-weight: 500; text-align: center; }
.ph_photo { width: 100%; border-radius: 0.4em; overflow: hidden; background: #0e141c; }
.ph_photo img { width: 100%; display: block; }
.ph_msg--photo { padding: 0.22em 0.22em 0.3em; max-width: 74%; }
.ph_fwd { position: absolute; left: -2.4em; top: 42%; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: #222a36; }
.ph_fwd svg { width: 0.9em; height: 0.9em; }

/* =============================== features =============================== */

.features .h2 { max-width: 640px; }

.feat_panel {
  position: relative;
  margin-top: 46px;
  min-height: 806px;
  border-radius: 24px;
  overflow: hidden;
  background: #EEF9F0;
}
.feat_pattern {
  position: absolute; inset: 0;
  background-image: url("/assets/img/weave.svg");
  background-size: 1200px 900px;
  background-position: right top;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.feat_list {
  position: relative;
  z-index: 2;
  width: 471px;
  margin: 41px 0 41px 33px;
  padding: 30px 33px 8px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px -40px rgba(27, 22, 29, .45);
}

.feat_item { position: relative; }
.feat_item + .feat_item { border-top: 1px solid var(--line-soft); }

.feat_head {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 26px 0;
  text-align: left;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #827d76;
  transition: color 260ms linear;
}
.feat_item.is-open .feat_head { padding-bottom: 14px; color: var(--brand); }
.feat_head:hover { color: var(--navy); }
.feat_icon { width: 20px; height: 20px; }
.feat_item:not(.is-open) .feat_icon { opacity: .8; }

/* collapse by grid rows, so the height animates without a measured px value */
.feat_body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--ease); }
.feat_item.is-open .feat_body { grid-template-rows: 1fr; }
.feat_body_in { overflow: hidden; }
.feat_body_in p { max-width: 400px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.feat_body_in .btn { margin: 22px 0 26px; }

.feat_progress { height: 2px; background: var(--line-soft); opacity: 0; transition: opacity 300ms linear; }
.feat_item.is-open .feat_progress { opacity: 1; }
.feat_progress span { display: block; width: 0; height: 100%; background: #1A3620; }
.feat_item.is-open .feat_progress span { animation: feat-run var(--dwell, 7s) linear forwards; }
@keyframes feat-run { from { width: 0 } to { width: 100% } }

.feat_device { position: absolute; right: 60px; bottom: -130px; z-index: 2; }
.feat_device .phone { --pw: 430px; }

/* =============================== security =============================== */

.sec_cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; margin-top: 52px; }
.sec_card {
  position: relative;
  min-height: 476px;
  padding: 28px 26px 26px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #EEF9F0;
  display: flex;
  flex-direction: column;
}
.sec_card h3 { position: relative; z-index: 3; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: #092C11; }

.sec_art { position: relative; flex: 1; margin: 0 -26px; }

/* card 1: the keypad */
.sec_art--pin { display: grid; place-items: end center; }
.pin_card { width: 214px; padding-bottom: 84px; border-radius: 14px 14px 0 0; overflow: hidden; background: #E6F7EA; text-align: center; }
.pin_card_top { height: 46px; background: #DDF3DC; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px); }
.pin_dots { padding: 44px 0 34px; color: #fff; font-size: 30px; letter-spacing: .3em; font-weight: 700; }
.pin_keys { display: flex; justify-content: space-around; color: #7CF17E; font-size: 22px; font-weight: 500; }

/* card 2: the shield */
.sec_art--ndpc { display: grid; place-items: center; }
.sec_art--ndpc .ndpc_block { position: absolute; right: 0; top: 22%; width: 62%; height: 46%; background: #1E9E45; }
.sec_art--ndpc .ndpc_disc { position: absolute; left: 50%; top: 50%; width: 232px; height: 232px; transform: translate(-52%, -50%); border-radius: 50%; background: #E6F7EA; }
.sec_art--ndpc img { position: relative; width: 158px; }

/* card 3: the padlock */
.sec_art--lock { display: grid; place-items: center end; padding-right: 26px; }
.sec_art--lock img { width: 232px; }

/* the white slab that carries the words, floated over the art */
.sec_slab {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: auto;
  padding: 18px 18px 18px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 40px -30px rgba(27, 22, 29, .55);
}
.sec_slab p { font-size: 15px; line-height: 1.45; color: var(--ink); }
.sec_arrow {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") no-repeat 50% / 20px;
  transition: transform 320ms var(--ease);
}
.sec_card:hover .sec_arrow { transform: rotate(45deg); }

/* ================================ steps =================================
   Four steps that climb as they go right. The track slides left with the
   section's own scroll progress (main.js writes --shift), so it reads as a
   horizontal move without hijacking the page scroll.
   ======================================================================== */

.steps { padding-bottom: 40px; overflow: hidden; }
.steps .split { margin-bottom: 8px; }

.steps_track { margin-top: 54px; }
.steps_row {
  display: flex;
  gap: 0;
  padding-left: var(--gutter);
  transform: translate3d(calc(var(--shift, 0) * -1px), 0, 0);
  will-change: transform;
}
.step {
  position: relative;
  flex: none;
  width: 354px;
  padding-right: 40px;
  /* lift 0 sits lowest; each one after it rises a step */
  margin-top: calc((3 - var(--lift)) * 55px);
}
.step::after {
  content: "";
  position: absolute;
  right: 0; top: 6px;
  width: 1px; height: 250px;
  background: linear-gradient(#dfd8cd, rgba(223, 216, 205, 0));
}
.step:last-child::after { display: none; }

.step_top { display: flex; align-items: flex-start; gap: 14px; }
.step h3 { font-size: 34px; font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: var(--navy); }
.step_tag { margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: #DDF3DC; color: var(--brand); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.step p { max-width: 250px; margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--muted); }

.steps_rules { position: relative; height: 74px; margin-top: 64px; }
.steps_rules span { position: absolute; height: 3px; border-radius: 2px; background: #eee7dd; }
.steps_rules span:nth-child(1) { left: 14%; width: 34%; top: 8px; }
.steps_rules span:nth-child(2) { left: 58%; width: 24%; top: 8px; background: #1E9E45; }
.steps_rules span:nth-child(3) { left: 14%; width: 72%; top: 24px; background: #eee7dd; }
.steps_rules span:nth-child(4) { left: 27%; width: 6%;  top: 40px; background: #092C11; }
.steps_rules span:nth-child(5) { left: 14%; width: 72%; top: 56px; background: #eee7dd; }

/* ============================== testimonials ============================
   A full-bleed blue field. The cluster defines the section's height and the
   copy is centred inside it, which is why the middle cells of the grid are
   deliberately left empty. Below 900px they give up and stack.
   ======================================================================== */

.voices {
  position: relative;
  padding: 96px var(--gutter) 110px;
  overflow: hidden;
  background: #092C11;
  isolation: isolate;
}
.voices_pattern {
  position: absolute; inset: 0;
  z-index: -2;
  background-image: url("/assets/img/mesh.svg");
  background-size: 46px 46px;
  opacity: .55;
}
.voices_wires {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(#ffffff14, #ffffff14) 4% 12% / 190px 150px no-repeat,
    linear-gradient(#ffffff10, #ffffff10) 20% 6% / 130px 110px no-repeat,
    linear-gradient(#ffffff0f, #ffffff0f) 92% 14% / 220px 180px no-repeat,
    linear-gradient(#ffffff12, #ffffff12) 2% 82% / 240px 200px no-repeat,
    linear-gradient(#ffffff0d, #ffffff0d) 84% 88% / 180px 160px no-repeat;
  filter: blur(0.5px);
}

.voices_title {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #fff;
}

.bubbles {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 52px;
  gap: 0;
  max-width: var(--shell);
  margin: 0 auto;
  pointer-events: none;
}
.bubble {
  grid-column: var(--c) / span var(--w);
  grid-row: var(--r) / span 3;
  position: relative;
  align-self: start;
  padding: 17px 18px 15px;
  border-radius: 11px;
  pointer-events: auto;
  box-shadow: 0 24px 50px -30px rgba(27, 22, 29, .6);
}
/* the tail: a square rotated under the bubble's lower-left corner */
.bubble::after {
  content: "";
  position: absolute;
  left: 34px; bottom: -13px;
  width: 26px; height: 26px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bubble p { font-size: 15px; line-height: 1.42; }
.bubble figcaption { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.bubble figcaption img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.bubble figcaption b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.bubble figcaption i { font-style: normal; font-size: 12.5px; opacity: .68; }

.bubble--pink { background: #DDF3DC; color: #1b161d; }
.bubble--pink p { font-size: 11.5px; }
.bubble--pink .bubble_extra { margin: 8px 0 0 46px; }
.bubble--sky  { background: #eee7dd; color: #1b161d; }
.bubble--mid  { background: #092C11; color: #fff; }
.bubble--navy { background: #080f1b; color: #fff; }

/* ============================== community =============================== */

.community .h2 { max-width: 780px; }

.cluster { position: relative; margin-top: 40px; aspect-ratio: 1200 / 620; }
.cluster_links {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: #E6F7EA;
  stroke-width: 34;
  stroke-linecap: round;
}
.cl {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background: #EEF9F0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ring, #E6F7EA);
  transition: transform 500ms var(--ease);
}
.cl:hover { transform: scale(1.03); }
.cl img { width: 100%; height: 100%; object-fit: cover; }

.cl--a { left: 22%;  top: 3%;  width: 20%; aspect-ratio: 1; --ring: #DDF3DC; }
.cl--b { left: 4%;   top: 45%; width: 11%; aspect-ratio: 1; }
.cl--c { left: 1%;   top: 71%; width: 11%; aspect-ratio: 1; }
.cl--d { left: 21%;  top: 47%; width: 21%; aspect-ratio: 1; --ring: #C7ECCF; }
.cl--e { left: 44%;  top: 17%; width: 26%; aspect-ratio: 1; --ring: #1E9E45; }
.cl--f { left: 76%;  top: 12%; width: 14%; aspect-ratio: 1; }
.cl--g { left: 90%;  top: 8%;  width: 12%; aspect-ratio: 1; }
.cl--h { left: 82%;  top: 46%; width: 18%; aspect-ratio: 1; --ring: #C7ECCF; }
.cl--i { left: 62%;  top: 72%; width: 12%; aspect-ratio: 1; }
.cl--j { left: 72%;  top: 57%; width: 13%; aspect-ratio: 1; }

/* ================================= faq ================================== */

.faq_grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 642px);
  justify-content: space-between;
  gap: 60px;
}
.faq_intro { position: relative; }
.faq_lede { margin-top: 22px; font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 380px; }
.faq_mark { width: 370px; margin-top: 44px; }

.faq_item { border-radius: 12px; background: #f5efe6; overflow: hidden; transition: background 300ms linear; }
.faq_item + .faq_item { margin-top: 14px; }
.faq_item.is-open { background: #eee7dd; }

.faq_head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
  padding: 22px 22px 22px 26px;
  text-align: left;
  font-size: 20px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--navy);
}
.faq_chev {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat 50% / 15px;
  transition: transform 420ms var(--ease);
}
.faq_item.is-open .faq_chev { transform: rotate(180deg); }

.faq_body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease); }
.faq_item.is-open .faq_body { grid-template-rows: 1fr; }
.faq_body_in { overflow: hidden; }
.faq_body_in p { padding: 0 60px 26px 26px; font-size: 15px; line-height: 1.65; color: #655f58; }

.faq_all {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  padding: 14px 22px;
  border-radius: 10px;
  background: #f5efe6;
  color: var(--brand);
  font-size: 15px; font-weight: 600;
  transition: background 240ms linear, gap 300ms var(--ease);
}
.faq_all:hover { background: #dfd8cd; gap: 14px; }

/* ============================= instant block ============================ */

.block_card {
  position: relative;
  padding: 62px 40px 0;
  border-radius: 24px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #E6F7EA 0%, #f5efe6 46%, #ffffff 100%);
}
.block_waves { position: absolute; inset: 0; pointer-events: none; background: url("/assets/img/waves.48ac9f9e.svg") no-repeat 50% 42% / 120% auto; opacity: .55; }
.block_card > * { position: relative; z-index: 2; }

.block_title { margin-top: 30px; font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; color: var(--navy); }
.block_copy { max-width: 640px; margin: 24px auto 0; font-size: 17px; line-height: 1.55; color: #655f58; }
.block_actions { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }
.block_trust { margin-top: 62px; font-size: 14px; font-weight: 600; color: #827d76; }

/* one strip duplicated once and moved by exactly half its width, the seam
   lands where the copy begins, so it never shows and never resets */
.marquee {
  margin: 22px -40px 0;
  padding-bottom: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee_row { display: flex; gap: 12px; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee_row { animation-play-state: paused; }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

.bank {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dfd8cd;
  font-size: 15px; font-weight: 500; color: #655f58;
  white-space: nowrap;
}
.bank img { width: 20px; height: 20px; }

/* ====================== the closing field + footer ======================
   The call to action and the footer are one continuous surface: near-black
   where the CTA sits, easing to the brand blue at the foot, with the wordmark
   set enormous and cropped by the page edge as a sign-off.
   ======================================================================== */

.closing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1b161d 0%, #1b161d 42%, #135D23 78%, #092C11 100%);
  color: #fff;
}

.cta { position: relative; z-index: 2; padding: 130px var(--gutter) 96px; text-align: center; }
.cta_title { font-size: clamp(32px, 3.9vw, 54px); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; color: #fff; }
.cta_copy { margin-top: 22px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.cta .btn--dark {
  margin-top: 34px;
  background: linear-gradient(180deg, #14431E, #0e1723 70%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 14px 30px -14px #000;
}

.footer { position: relative; z-index: 2; padding-bottom: 150px; }

.footer_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-top: 44px;
  padding-bottom: 64px;
}
.footer_brand p { margin-top: 20px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.55); max-width: 34ch; }
.footer_col { display: flex; flex-direction: column; gap: 14px; }
.footer_col h4 { margin-bottom: 4px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.45); }
.footer_col a { font-size: 15px; color: rgba(255,255,255,.88); transition: color 200ms linear; }
.footer_col a:hover { color: #fff; }

.footer_base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 15px;
  color: rgba(255, 255, 255, .62);
}
.socials { display: flex; flex-wrap: wrap; gap: 26px; }
.socials a { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 15px; transition: opacity 200ms linear; }
.socials a:hover { opacity: .7; }
.soc { width: 18px; height: 18px; background: no-repeat 50% / contain; }
.soc--li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0 0-5zM3 9h4v12H3zM9.5 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.75-1.95 4 0 4.75 2.5 4.75 5.75V21h-4v-5.6c0-1.35-.03-3.1-1.9-3.1s-2.2 1.47-2.2 3v5.7h-4z'/%3E%3C/svg%3E"); }
.soc--x  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.9 2H22l-7.1 8.1L23.3 22h-6.6l-5.2-6.8L5.6 22H2.5l7.6-8.7L1.9 2h6.8l4.7 6.2L18.9 2Zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20Z'/%3E%3C/svg%3E"); }
.soc--ig { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='white' stroke='none'/%3E%3C/svg%3E"); }
.soc--fb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7h-2.5V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.45 2.9h-2.35v7A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E"); }

/* the sign-off: cropped by the page edge on purpose */
.footer_watermark {
  position: absolute;
  left: 50%; bottom: -0.34em;
  z-index: 1;
  width: 120%;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(120px, 21vw, 300px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: .8;
  color: rgba(255, 255, 255, .07);
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}

/* ================================ motion ================================
   Three entrances, all driven by one IntersectionObserver in main.js adding
   `.is-in`. Lines slide up out of their own clipping box, blocks fade up,
   and the security cards come in from the side.
   ======================================================================== */

.line {
  display: block;
  overflow: hidden;
  /* the box clips, so it has to be a little taller than the line or
     descenders and accents get shaved off */
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.line_in { display: block; transform: translateY(112%); transition: transform 1000ms var(--ease); }
.reveal-lines.is-in .line_in { transform: none; }
.reveal-lines .line:nth-child(2) .line_in { transition-delay: 90ms; }
.reveal-lines .line:nth-child(3) .line_in { transition-delay: 180ms; }

.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 760ms var(--ease), transform 940ms var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.fade-up.is-in { opacity: 1; transform: none; }
.hero_sub.fade-up { --d: 260; }
.hero_cta.fade-up { --d: 400; }

.gibbit {
  opacity: 0;
  transform: scale(.92) translateY(30px);
  transition: opacity 820ms var(--ease), transform 1020ms var(--ease);
  transition-delay: calc(var(--gi, 0) * 110ms);
}
.gibbit.is-in { opacity: 1; transform: none; }
.sec_cards .gibbit:nth-child(2) { --gi: 1; }
.sec_cards .gibbit:nth-child(3) { --gi: 2; }

/* ============================== responsive ==============================
   Below 901px the two columns become one, the steps become a scroll-snap
   row, and the quote cluster gives up and stacks.
   ======================================================================== */

@media (max-width: 1240px) {
  :root { --gutter: 40px; }
  .nav_links { gap: 18px; font-size: 14.5px; }
  .seg { margin-left: 6px; }
  .feat_list { width: 420px; }
  .feat_device { right: 24px; }
  .faq_grid { gap: 40px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
}

@media (max-width: 1040px) {
  .section { padding: 78px 0; }
  .split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .split_aside { padding-bottom: 0; max-width: 560px; }

  /* the panel stops being a stage and becomes a stack */
  .feat_panel { min-height: 0; }
  .feat_list { width: auto; margin: 26px; }
  .feat_device { position: static; display: flex; justify-content: center; padding: 0 26px 26px; }
  .feat_device .phone { --pw: 320px; }
  .feat_pattern { background-size: cover; }

  .sec_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec_card:last-child { grid-column: span 2; min-height: 400px; }

  .faq_grid { grid-template-columns: minmax(0, 1fr); }
  .faq_mark { display: none; }

  .hero_stage { height: 420px; }
  .phone { --pw: 400px; }
}

@media (max-width: 900px) {
  :root { --gutter: 22px; }
  .nav_links, .nav_cta { display: none; }
  .nav_burger { display: block; margin-left: auto; }
  .nav_inner { height: 68px; gap: 12px; }

  .hero { padding-top: 52px; }
  .hero_pill { font-size: 13px; padding: 6px 12px; }
  .hero_title { letter-spacing: -0.035em; }
  .hero_stage { margin-top: 46px; height: 340px; }
  .phone--tilt { transform: rotateX(11deg); }
  .phone { --pw: min(330px, 84vw); }

  .sec_cards { grid-template-columns: minmax(0, 1fr); }
  .sec_card, .sec_card:last-child { grid-column: auto; min-height: 420px; }

  .step { width: 280px; margin-top: 0; }
  .step h3 { font-size: 27px; }
  .steps_row { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .step { scroll-snap-align: start; }
  .steps_rules { display: none; }

  /* the cluster's arms have nowhere to go on a phone, so the quotes stack */
  .voices { padding: 88px var(--gutter) 96px; }
  .voices_title { position: static; transform: none; margin-bottom: 8px; }
  .bubbles {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 44px auto 0;
    max-width: 460px;
  }
  .bubble { grid-column: auto; grid-row: auto; }

  .cluster { aspect-ratio: 1 / 1.05; }
  .cl--b, .cl--c, .cl--g, .cl--i, .cl--j { display: none; }
  .cl--a { left: 4%;  top: 2%;  width: 34%; }
  .cl--e { left: 44%; top: 8%;  width: 46%; }
  .cl--d { left: 6%;  top: 46%; width: 38%; }
  .cl--h { left: 52%; top: 58%; width: 38%; }
  .cl--f { left: 24%; top: 82%; width: 22%; }
  .cluster_links { display: none; }

  .block_card { padding: 44px 20px 0; }
  .block_actions { flex-direction: column; align-items: stretch; }
  .marquee { margin: 22px -20px 0; }

  .cta { padding: 88px var(--gutter) 96px; }
  .footer_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer_base { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* justify-items would take grid items off `stretch` and size them to
     max-content, which lets the headline set the column width and run off
     the right edge: centre the children instead */
  .section { text-align: center; }
  .description, .split { justify-items: center; }
  .split_aside, .feat_list, .faq_intro { text-align: left; }
}

@media (max-width: 560px) {
  .h2, .block_title { font-size: 30px; }
  .feat_list { margin: 16px; padding: 22px 20px 6px; }
  .feat_head { font-size: 17px; padding: 20px 0; }
  .sec_card { padding: 22px 18px 18px; }
  .sec_art { margin: 0 -18px; }
  .faq_head { font-size: 17px; padding: 18px; }
  .faq_body_in p { padding: 0 18px 20px; }
  .footer_grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .line_in, .fade-up, .gibbit { opacity: 1 !important; transform: none !important; }
  .steps_row { transform: none !important; }
}

/* ===================== the voice thread's extra parts ===================
   Only the Voice Notes panel uses these, a note bubble with a waveform, a
   response card, a receipt slip, and the composer bar at the foot.
   ======================================================================== */

.ph_voice { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .5em; max-width: 88%; }
.ph_voice_av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #cfa07a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='%234a3020'/%3E%3Cpath d='M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8z' fill='%234a3020'/%3E%3C/svg%3E") no-repeat 50% / cover; }
.ph_voice_play { width: 1em; height: 1.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 3.5 20 12 6 20.5z'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_voice_wave { display: flex; align-items: center; gap: .13em; height: 1.5em; }
.ph_voice_wave i { flex: 1; height: var(--h); border-radius: 1px; background: rgba(255,255,255,.55); }
.ph_voice_wave i:first-child { background: #fff; }
.ph_voice_time { grid-column: 3; grid-row: 2; font-size: .72em; color: #8fa6a0; }
.ph_voice .ph_meta { grid-column: 4; grid-row: 2; }

.ph_doc_row { display: flex; align-items: center; gap: .6em; }
.ph_doc_icon { width: 2.1em; height: 2.1em; flex: none; border-radius: .4em; background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") no-repeat 50% / 1.1em; }
.ph_doc_row b { display: block; font-size: 1em; font-weight: 600; }
.ph_doc_row i { font-style: normal; font-size: .82em; color: #b9d9cf; }
.ph_cta--green { color: #b9f0d8; }

.ph_receipt {
  align-self: flex-start;
  width: 74%;
  padding: .8em .9em;
  border-radius: .5em;
  background: #fff;
  color: #0a0f17;
  text-align: center;
}
.ph_receipt b { display: block; font-size: 1.2em; font-weight: 800; color: #092C11; }
.ph_receipt i { display: block; font-style: normal; font-size: .66em; color: #827d76; margin-top: .1em; }
.ph_receipt span { display: block; margin-top: .7em; font-size: .72em; text-align: left; border-top: 1px solid #f5efe6; padding-top: .5em; }
.ph_receipt em { font-style: normal; color: #827d76; }

.ph_bar { display: flex; align-items: center; gap: .55em; padding: .5em .7em .7em; background: #0a0f17; }
.ph_bar_plus { width: 1.2em; height: 1.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat 50% / contain; }
.ph_bar_field { flex: 1; height: 2.1em; border-radius: 999px; background: #1c232f; }
.ph_bar_ico { width: 1.2em; height: 1.2em; background: no-repeat 50% / contain; }
.ph_bar_ico--sticker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa4' stroke-width='2'%3E%3Cpath d='M14 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h6l9-9V6a3 3 0 0 0-3-3z'/%3E%3Cpath d='M12 21v-6h6'/%3E%3C/svg%3E"); }
.ph_bar_ico--cam { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa4' stroke-width='2'%3E%3Crect x='2.5' y='6' width='19' height='14' rx='3'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3Cpath d='M8 6l1.6-2.5h4.8L16 6'/%3E%3C/svg%3E"); }
.ph_bar_ico--mic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b9aa4'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0' fill='none' stroke='%238b9aa4' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 18v4' stroke='%238b9aa4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* the swap: the screen dips out and back rather than snapping */
/* superseded by the push transition at the end of this file */

@media (max-width: 1040px) {
  .footer_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer_brand { grid-column: span 3; }
}
@media (max-width: 900px) {
  .cta { padding: 88px var(--gutter) 64px; }
  .footer { padding-bottom: 110px; }
  .footer_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer_brand { grid-column: span 2; }
  .footer_base { flex-direction: column; align-items: flex-start; gap: 18px; }
  .socials { gap: 18px; }
}
@media (max-width: 560px) {
  .footer_grid { grid-template-columns: minmax(0, 1fr); }
  .footer_brand { grid-column: auto; }
}

/* =========================================================================
   KUDA LAYER
   Kuda's design system applied over Milo's structure. Ported from
   kuda.com's own custom properties, so the values are theirs, not guesses.

   The character of it: a warm paper ground rather than white, near-square
   4px corners rather than soft ones, one loud purple, and a display face set
   in caps at a 1.0 leading. It reads as printed matter, not as an app.
   ========================================================================= */

:root {
  --k-cream:      #fcf7f2;   /* --color-neutral-100, the page */
  --k-sand:       #f5efe6;   /* --color-neutral-200, cards */
  --k-sand-2:     #eee7dd;   /* --color-neutral-300, card hover */
  --k-sand-3:     #dfd8cd;   /* --color-neutral-400 */
  --k-ink:        #1b161d;   /* --color-primary */
  --k-purple:     #092C11;   /* --color-purple */
  --k-lavender:   #DDF3DC;   /* pale mint tint of #7CF17E, for buttons + tiles */
  --k-lav-800:    #1E9E45;   /* --color-lavender-800, rings + logo */
  --k-purple-600: #7CF17E;

  /* the sent bubble: iMessage blue, and its tail drawn as a shape so it
     holds over a photograph as well as over the page */
  --bubble: #0A7CFF;
  --tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='%230b141a' fill-opacity='.13' d='M5.188 1H0v11.193l6.467-8.625C7.526 2.156 6.958 1 5.188 1z'/%3E%3Cpath fill='%230A7CFF' d='M5.188 0H0v11.193l6.467-8.625C7.526.156 6.958 0 5.188 0z'/%3E%3C/svg%3E");
  --k-gray:       #655f58;   /* --color-gray, labels */

  --k-r-sm: 4px;             /* --radius-sm, dominant, 48 uses on their page */
  --k-r-md: 6px;             /* --radius-md */

  --font-display: Archivo, "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ── ground ──────────────────────────────────────────────────────────── */
html, body { background: var(--k-cream); color: var(--k-ink); }
.section:nth-of-type(even), .features, .security, .steps, .community, .faq, .block { background: transparent; }

/* ── display face: caps, heavy, 1.0 leading ──────────────────────────── */
.hero_title, .h2, .block_title, .cta_title, .voices_title, .step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--k-ink);
}
.hero_title { font-size: clamp(34px, 5.4vw, 76px); }
.hero_pill { background: var(--k-sand); border-color: var(--k-sand-3); color: var(--k-gray); border-radius: 999px; }
.hero_pill strong { color: var(--k-ink); }
.hero_pill_dot { background: var(--k-lav-800); }
.hero_sub, .split_aside, .faq_lede, .block_copy, .step p, .feat_body_in p, .sec_slab p { color: var(--k-gray); }

/* ── near-square corners, everywhere ─────────────────────────────────── */
.btn, .badge, .feat_list, .feat_item, .sec_card, .sec_slab, .faq_item, .faq_all,
.block_card, .bank, .feat_panel, .step_tag, .scr, .cl { border-radius: var(--k-r-sm); }
.sec_arrow, .faq_chev, .hero_pill, .hero_pill_dot, .cl { border-radius: 100%; }
.feat_panel, .block_card { border-radius: var(--k-r-md); }

/* ── buttons: lavender on plum, not blue on white ────────────────────── */
.btn--blue, .btn--dark {
  background: var(--k-lavender);
  color: var(--k-ink);
  box-shadow: none;
  border: 0;
}
.btn--blue::after, .btn--dark::after { display: none; }
.btn--blue:hover, .btn--dark:hover { background: #C7ECCF; box-shadow: none; }
.btn--white { background: #fff; color: var(--k-ink); border: 1px solid var(--k-sand-3); }

/* ── surfaces ────────────────────────────────────────────────────────── */
.badge { background: var(--k-sand); border-color: var(--k-sand-3); color: var(--k-gray); }
.feat_panel { background: var(--k-sand); border: 0; }
.feat_pattern { display: none; }
.feat_list { background: var(--k-cream); box-shadow: none; border: 1px solid var(--k-sand-3); }
.feat_item + .feat_item { border-top-color: var(--k-sand-3); }
.feat_head { color: var(--k-gray); font-family: var(--font-display); text-transform: uppercase; font-size: 15px; letter-spacing: .01em; }
.feat_item.is-open .feat_head { color: var(--k-purple); }

/* cards lift by warming, the way Kuda's product cards do */
.sec_card, .faq_item, .bank { background: var(--k-sand); border: 0; transition: background 300ms var(--ease); }
.sec_card:hover, .faq_item:hover, .bank:hover { background: var(--k-sand-2); transform: none; }
.sec_card h3 { color: var(--k-purple); font-family: var(--font-display); text-transform: uppercase; font-size: 17px; }
.sec_slab { background: var(--k-cream); box-shadow: none; }
.sec_arrow { background-color: var(--k-lavender); }
.sec_arrow, .faq_chev { filter: none; }
.faq_chev { background-color: var(--k-lavender); }
.faq_item.is-open { background: var(--k-sand-2); }
.faq_head { color: var(--k-ink); }
.faq_all { background: var(--k-sand); color: var(--k-purple); border: 0; }
.step_tag { background: var(--k-lavender); color: var(--k-purple); }
.block_card { background: var(--k-purple); }
.block_card .block_title, .block_card .badge { color: var(--k-cream); }
.block_card .badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.block_copy { color: var(--k-purple-600); }
.block_waves { opacity: .08; }

/* ── the pin illustration, re-tinted ─────────────────────────────────── */
.pin_card { background: var(--k-purple); }
.pin_card_top { background: var(--k-lavender); }
.pin_keys { color: var(--k-purple-600); }
.ndpc_disc, .sec_art--ndpc .ndpc_disc { background: radial-gradient(circle, rgba(27, 127, 49,.22), transparent 70%); }

/* ── marquee: gradient masks at both edges, the second one mirrored ──── */
.marquee::before, .marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 44px;
  width: 120px; z-index: 2;
  background: linear-gradient(90deg, var(--k-cream), rgba(252,247,242,0));
}
.marquee { position: relative; }
.marquee::after { right: 0; left: auto; transform: scaleX(-1); }

/* ── closing + footer, in plum ───────────────────────────────────────── */
.closing { background: var(--k-ink); }
.cta_title, .footer .logo_word { color: var(--k-cream); }
.cta_copy, .footer_brand p, .footer_col h4 { color: var(--k-gray); }
.footer_watermark { color: rgba(217, 242, 222,.07); font-family: var(--font-display); }
.footer_col a, .socials a { color: var(--k-sand); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav { background: rgba(252,247,242,.86); }
.nav.is-stuck { box-shadow: 0 1px 0 var(--k-sand-3); }
.logo_word, .nav_links { color: var(--k-ink); }
.logo_mark, .logo_dot { color: var(--k-purple); }
.nav_links a::after { background: var(--k-purple); }
.nav_links a:hover { color: var(--k-purple); }
.seg_pill { background: var(--k-lavender); border-radius: var(--k-r-sm); }
.seg_opt { border-radius: var(--k-r-sm); color: var(--k-gray); }
.seg_opt.is-active { color: var(--k-ink); }

/* =========================== the hero intro =============================
   Phase 1: the letters rise out of frame, staggered 0.12s apart.
   Phase 2: the purple ground dissolves and the page is revealed beneath.
   Phase 3: every transition is stripped so nothing can replay.
   ======================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--k-purple);
  transition: background-color .8s var(--ease), visibility 0s .8s;
}
.intro_letters {
  display: flex;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 13vw, 190px);
  line-height: .84;
  letter-spacing: -0.045em;
  color: var(--k-lavender);
}
.intro_letters i { font-style: normal; display: block; }

@keyframes letterUp { from { transform: translateY(0); } to { transform: translateY(-100%); } }

.intro.is-animating .intro_letters i { animation: letterUp .8s forwards; }
.intro.is-animating .intro_letters i:nth-child(1) { animation-delay: 0s; }
.intro.is-animating .intro_letters i:nth-child(2) { animation-delay: .12s; }
.intro.is-animating .intro_letters i:nth-child(3) { animation-delay: .24s; }
.intro.is-animating .intro_letters i:nth-child(4) { animation-delay: .36s; }
.intro.is-animating .intro_letters i:nth-child(5) { animation-delay: .48s; }
.intro.is-animating .intro_letters i:nth-child(6) { animation-delay: .60s; }
.intro.is-animating .intro_letters i:nth-child(7) { animation-delay: .72s; }

.intro.is-animating-step-2 { background-color: transparent; pointer-events: none; }
.intro.is-complete { visibility: hidden; transition-property: none; }

/* the page is held still, and its own entrance held back, until the
   curtain has lifted */
body.is-intro { overflow: hidden; }
body.is-intro .nav, body.is-intro .hero_inner { opacity: 0; }
.nav, .hero_inner { transition: opacity .5s var(--ease) .1s; }

/* ── the carousel's progress becomes a ring, as on Kuda's phone slider ── */
.feat_ring { position: absolute; right: 0; top: 22px; width: 40px; height: 40px; }
.feat_ring circle { fill: none; stroke-width: 2; }
.feat_ring .track { stroke: var(--k-sand-3); }
.feat_ring .bar {
  stroke: var(--k-lav-800);
  stroke-linecap: round;
  stroke-dasharray: 119.38;
  stroke-dashoffset: 119.38;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.feat_item.is-open .feat_ring .bar { animation: ring-fill var(--dwell, 7s) linear forwards; }
@keyframes ring-fill { to { stroke-dashoffset: 0; } }
.feat_progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-intro) .intro { display: none; }
  body.is-intro { overflow: auto; }
  body.is-intro .nav, body.is-intro .hero_inner { opacity: 1; }
}
.feat_head { position: relative; padding-right: 52px; }

/* =========================================================================
   FIX PASS
   Four things: the steps section read as scattered, the ground was flat,
   body copy sat too light on cream to read, and the primary action was
   lavender on cream which is not enough contrast to be a call to action.
   ========================================================================= */

/* ── steps: four across, aligned, no scrub ───────────────────────────── */
.steps { padding-bottom: 132px; overflow: visible; }
.steps_track { margin-top: 56px; }
.steps_row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-left: 0;
  transform: none;
}
.step {
  width: auto;
  margin-top: 0;
  padding: 30px 26px 32px;
  background: var(--k-sand);
  border-radius: var(--k-r-sm);
  transition: background 300ms var(--ease);
}
.step:hover { background: var(--k-sand-2); }
.step::after { display: none; }
.step_top { display: block; }
.step_num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 22px;
  border-radius: 100%;
  background: var(--k-purple);
  color: var(--k-lavender);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}
.step h3 { font-size: 22px; line-height: 1.05; }
.step h3 br { display: none; }
.step p { max-width: none; margin-top: 12px; font-size: 15.5px; color: var(--k-gray); }

/* ── ground: warm paper, not a flat fill ─────────────────────────────── */
body {
  background:
    radial-gradient(120% 62% at 50% -10%, rgba(217, 242, 222, .5), transparent 62%),
    radial-gradient(80% 40% at 92% 22%, rgba(27, 127, 49, .10), transparent 70%),
    var(--k-cream);
  background-attachment: fixed;
}
/* the grain donut-web uses, at a fraction of the strength, so large flat
   areas of cream do not band on 8-bit displays */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.nav, .hero, .section, .voices, .closing { position: relative; z-index: 1; }

/* sections alternate so they read as distinct bands rather than one sheet */
.security, .community, .faq { background: rgba(245, 239, 230, .55); }
.hero_grid { opacity: .28; }

/* ── legibility ──────────────────────────────────────────────────────── */
body, .hero_sub, .split_aside, .faq_lede, .block_copy, .step p,
.feat_body_in p, .sec_slab p, .faq_body_in p, .bubble p {
  color: #4f4a45;                     /* 8.1:1 on cream, was 4.0:1 */
}
.hero_sub { font-size: clamp(17px, 1.5vw, 20px); }
.feat_head { font-size: 16px; letter-spacing: .015em; }
.feat_item.is-open .feat_head { color: var(--k-purple); }
.faq_head, .sec_card h3, .step h3, .h2, .hero_title { color: var(--k-ink); }
.badge { color: #5a544d; }

/* the primary action is purple, not lavender: lavender on cream is 1.3:1 */
.btn--blue, .btn--dark, .nav_cta {
  background: var(--k-purple);
  color: var(--k-cream);
}
.btn--blue:hover, .btn--dark:hover, .nav_cta:hover { background: #146526; }
.sec_arrow { background-color: var(--k-purple); }
.faq_chev { background-color: var(--k-purple); }
.block_card .btn--blue { background: var(--k-lavender); color: var(--k-purple); }
.block_card .btn--white { background: rgba(255,255,255,.1); color: var(--k-cream); border-color: rgba(255,255,255,.25); }

/* ── smoothness ──────────────────────────────────────────────────────── */
/* one easing and one duration family across the page, so nothing feels
   like it belongs to a different site */
.btn, .step, .sec_card, .faq_item, .bank, .feat_head, .cl {
  transition-timing-function: var(--ease);
  transition-duration: 280ms;
}
.btn:hover, .sec_card:hover { transform: translateY(-2px); }
.cl:hover { transform: scale(1.03); }
/* promote only what actually moves on scroll */
.gibbit, .fade-up, .line_in { will-change: transform, opacity; }
.gibbit.is-in, .fade-up.is-in { will-change: auto; }

/* the hard magenta slab behind the shield was doing nothing but shouting */
.ndpc_block, .sec_art--ndpc .ndpc_block { display: none; }
.ndpc_disc, .sec_art--ndpc .ndpc_disc {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(27, 127, 49,.30), rgba(217, 242, 222,.12) 55%, transparent 72%);
}
.badge { color: #4f4a45; border-color: #d6cec2; }
.sec_art img { width: 190px; filter: none; }

/* ── steps: heading order and spacing ────────────────────────────────── */
.step h3 br { display: revert; }
.step_num { margin-bottom: 18px; }
.steps_rules { display: none; }

/* ── testimonials: the field went purple, so the copy on it must go light.
   The blanket legibility rule above darkened every .bubble p, which is
   right on the pale bubbles and wrong on the dark ones. ──────────────── */
.voices { background: linear-gradient(180deg, #092C11, #080f1b 55%, #092C11); }
.voices_title { color: var(--k-cream); }
.voices_pattern { opacity: .18; }
.voices_wires { background: radial-gradient(42% 42% at 50% 50%, rgba(27, 127, 49,.28), transparent 70%); }

.bubble--sky  { background: var(--k-cream); }
.bubble--pink { background: var(--k-lavender); }
.bubble--sky p, .bubble--pink p { color: #4f4a45; }
.bubble--sky b, .bubble--pink b { color: var(--k-ink); }

.bubble--navy { background: #1b161d; border: 0; }
.bubble--mid  { background: #156827; }
.bubble--navy p, .bubble--mid p { color: rgba(252, 247, 242, .92); }
.bubble--navy b, .bubble--mid b { color: #fff; }
.bubble--navy i, .bubble--mid i { color: rgba(255, 255, 255, .6); }

/* the copy sits in the middle of the cluster, so it needs to clear it */
.voices_title { text-shadow: 0 2px 30px rgba(19, 91, 35, .8); }

/* =========================================================================
   KUDA, PROPERLY
   The previous pass kept washes, grain and a device on the page. Kuda has
   none of that: a flat cream sheet, one enormous caps headline, and a
   photograph that runs the full width. Everything below removes rather than
   adds.
   ========================================================================= */

/* ── flat. No gradients anywhere. ────────────────────────────────────── */
body { background: var(--k-cream); background-attachment: initial; }
body::before { display: none; }
.hero_aura, .hero_grid, .feat_pattern, .block_waves, .voices_wires,
.voices_pattern, .noise-overlay { display: none; }
.security, .community, .faq { background: transparent; }
.voices { background: var(--k-purple); }
.closing { background: var(--k-ink); }
.block_card { background: var(--k-purple); }
.feat_panel { background: var(--k-sand); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { padding: 120px 0 0; text-align: center; min-height: 0; overflow: visible; }
.hero_inner { position: relative; z-index: 1; }
.hero_eyebrow {
  font-size: 17px;
  font-weight: 600;
  color: #8b857d;
  letter-spacing: -0.005em;
}
.hero_title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 7.4vw, 104px);
  line-height: .92;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  color: var(--k-ink);
}
.hero_sub {
  max-width: 30ch;
  margin: 26px auto 0;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.45;
  color: #4f4a45;
}
.hero_cta { margin-top: 30px; height: 52px; padding: 0 28px; font-size: 16px; }

/* the photograph, edge to edge with a hairline margin, as Kuda frames it */
.hero_photo {
  margin: 78px var(--gutter) 0;
  border-radius: var(--k-r-sm);
  overflow: hidden;
  background: var(--k-sand);
}
.hero_photo img {
  width: 100%;
  height: clamp(420px, 64vw, 840px);
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

/* ── everything else gets more air and less decoration ───────────────── */
.section { padding: 120px 0; }
.h2 { font-weight: 900; letter-spacing: -0.025em; font-size: clamp(30px, 4vw, 58px); line-height: .95; }
.badge {
  background: transparent;
  border: 0;
  padding: 0;
  color: #8b857d;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.badge::before { display: none; }

.sec_card, .step, .faq_item, .bank, .feat_list { box-shadow: none; }
.sec_card:hover, .step:hover, .faq_item:hover { transform: none; }
.btn:hover { transform: none; filter: brightness(1.06); }

/* the phone stays in the features panel, where a product shot belongs */
.feat_device .phone { --pw: 400px; }

@media (max-width: 860px) {
  .hero { padding-top: 96px; }
  .hero_photo { margin: 48px 16px 0; }
  .hero_photo img { height: 62vh; }
}

/* =========================================================================
   MOBILE, LAST
   Every rule added after the original media queries was overriding them,
   because source order beats media-query specificity. This block sits at the
   end of the file on purpose, so the small-screen layout is the final word.
   ========================================================================= */

/* the ring belongs to the panel that is actually running, not to every row */
.feat_ring { opacity: 0; transition: opacity 240ms var(--ease); }
.feat_item.is-open .feat_ring { opacity: 1; }

/* nothing may exceed the viewport. `clip` rather than `hidden`, so it never
   becomes a scroll container and vertical scrolling is untouched. */
html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  /* nav */
  .nav_inner { padding-right: 20px; gap: 10px; }
  .nav_burger { margin-right: 0; }
  .seg { display: none; }

  /* hero */
  .hero { padding-top: 92px; }
  .hero_title { font-size: clamp(32px, 10.4vw, 52px); line-height: .94; }
  .hero_eyebrow { font-size: 15px; }
  .hero_sub { font-size: 16px; max-width: 34ch; }
  .hero_photo { margin: 40px var(--gutter) 0; }
  .hero_photo img { height: 58vh; min-height: 340px; }

  /* the features panel becomes a stack, and the device comes back to a
     size that fits the screen */
  .feat_panel { min-height: 0; }
  .feat_list { width: auto; margin: 16px; padding: 20px 18px 6px; }
  .feat_head { font-size: 15px; padding: 18px 44px 18px 0; }
  .feat_ring { width: 30px; height: 30px; top: 14px; }
  .feat_body_in p { font-size: 15px; }
  .feat_device { position: static; display: flex; justify-content: center; padding: 0 16px 24px; right: auto; bottom: auto; }
  .feat_device .phone { --pw: min(280px, 74vw); }

  /* one column everywhere a grid was fixed */
  .steps_row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .step { padding: 24px 20px 26px; }
  .sec_cards { grid-template-columns: minmax(0, 1fr); }
  .sec_card, .sec_card:last-child { grid-column: auto; min-height: 0; padding: 22px 18px 18px; }
  .sec_art { min-height: 220px; margin: 0 -18px; }
  .sec_art img { width: 150px; }
  .faq_grid, .split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .footer_grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .footer_brand { grid-column: auto; }
  .block_actions { flex-direction: column; }
  .block_actions .btn { width: 100%; }

  /* headings */
  .h2 { font-size: clamp(26px, 8vw, 36px); }
  .section { padding: 64px 0; }

  /* things that are deliberately wider than the screen must be clipped by a
     parent rather than allowed to drag the page */
  .marquee, .voices, .closing, .footer, .hero, .feat_panel { overflow: hidden; }
  .footer_watermark { width: 100%; font-size: 22vw; }

  /* the intro's seven letters have to fit */
  .intro_letters { font-size: clamp(34px, 12vw, 64px); }
}

@media (max-width: 420px) {
  .hero_title { font-size: 30px; }
  .feat_head { font-size: 14px; }
  .step h3, .sec_card h3 { font-size: 17px; }
}

/* =========================================================================
   PASS: read the page as a visitor would
   The cluster of invented faces, the missing nav on small screens, and the
   testimonial section opening on an empty gap were the three things that
   made this look unfinished. All three are structural, not cosmetic.
   ========================================================================= */

/* ── the nav must exist on a phone ───────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(252, 247, 242, .92);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
}
.nav_inner { display: flex; align-items: center; height: 66px; }

/* ── community: one number, nothing else ─────────────────────────────── */
.community { padding: 128px 0; }
.community_inner { text-align: center; }
.community_lead { font-size: 19px; font-weight: 600; color: #8b857d; }
.community_stat {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(52px, 12vw, 168px);
  line-height: .86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--k-purple);
}
.community_note { margin-top: 26px; font-size: 15px; color: #8b857d; }

/* ── testimonial avatars: initials, in the palette ───────────────────── */
.ava {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 100%;
  background: var(--k-purple);
  color: var(--k-lavender);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.bubble--navy .ava, .bubble--mid .ava { background: var(--k-lavender); color: var(--k-purple); }

/* ── the quotes section opened on dead space ─────────────────────────── */
.voices { padding: 92px var(--gutter) 100px; }
.voices_title {
  position: static;
  transform: none;
  width: auto;
  margin: 0 auto 44px;
  max-width: 14ch;
  text-shadow: none;
  font-size: clamp(30px, 7vw, 58px);
}
.bubbles { margin-top: 0; }
.bubble--pink p { font-size: 15px; }

/* the cluster grid only makes sense with room for it */
@media (max-width: 1080px) {
  .bubbles {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 560px;
    margin-inline: auto;
  }
  .bubble { grid-column: auto; grid-row: auto; }
}

/* ── final mobile word ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav_inner { height: 60px; padding-inline: 20px; }
  .logo_word { font-size: 19px; }
  .nav_cta { display: none; }
  .nav_burger { display: block; margin-left: auto; }

  .community { padding: 76px 0; }
  .community_stat { font-size: clamp(46px, 15vw, 72px); }
  .community_lead { font-size: 17px; }

  .voices { padding: 68px var(--gutter) 76px; }
  .voices_title { margin-bottom: 30px; }
  .bubble { padding: 18px 18px 16px; }
  .bubble p { font-size: 15px; line-height: 1.5; }
  .bubble--pink p { font-size: 15px; }
}

/* =========================================================================
   ALIGNMENT
   An old mobile rule centred whole sections. That left number tiles, icons
   and chevrons on the left while their text sat in the middle, which is
   what read as scattered. Centring is for the three places that are
   genuinely centrepieces; everything else reads left.
   ========================================================================= */

.section, .features, .security, .steps, .faq, .block { text-align: left; }

/* the centrepieces, and only these */
.hero_inner,
.community_inner,
.voices_title,
.block_card,
.cta { text-align: center; }

/* content blocks read left on every screen */
.step, .step h3, .step p,
.feat_list, .feat_head, .feat_body_in,
.sec_card, .sec_card h3, .sec_slab,
.faq_item, .faq_head, .faq_body_in, .faq_body_in p,
.faq_intro, .split, .split_aside,
.bubble, .bubble p, .bubble figcaption,
.footer_grid, .footer_col, .footer_brand { text-align: left; }

/* the block card's own copy stays centred, its buttons stack full-width */
.block_card .badge, .block_title, .block_copy, .block_trust { text-align: center; }

@media (max-width: 900px) {
  /* the step's number and its words belong on the same axis */
  .step { padding: 22px 20px 24px; }
  .step_num { margin-bottom: 14px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 15px; margin-top: 8px; }

  .faq_head { padding: 18px 16px 18px 18px; gap: 14px; font-size: 16px; }
  .faq_chev { width: 32px; height: 32px; background-size: 13px; }
  .faq_body_in p { padding: 0 18px 20px; font-size: 15px; line-height: 1.6; }
  .faq_intro { margin-bottom: 8px; }
  .faq_lede { font-size: 16px; max-width: none; }

  .sec_slab { padding: 14px; gap: 12px; }
  .sec_slab p { font-size: 14px; }
  .sec_arrow { width: 38px; height: 38px; background-size: 16px; }

  .split_aside { font-size: 16px; padding-bottom: 0; }
  .badge { font-size: 14px; }
  .h2 { margin-top: 14px; }
}

/* =========================================================================
   MOBILE HERO
   A hard `font-size: 30px` was overriding the clamp, so the headline came
   out at 30px on a 390px screen while desktop got 102px. Small screens need
   proportionally MORE display size, not the same ratio: the headline has to
   fill the column edge to edge to carry any authority at all.
   ========================================================================= */

@media (max-width: 900px) {
  .hero { padding-top: 60px; }

  .hero_eyebrow { font-size: 16px; }

  .hero_title {
    margin-top: 16px;
    /* 13vw fills the column at any phone width; the floor and ceiling only
       catch very small and very large handsets */
    font-size: clamp(40px, 13vw, 62px);
    line-height: .88;
    letter-spacing: -0.035em;
  }

  .hero_sub {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.45;
    max-width: 30ch;
  }

  .hero_cta {
    margin-top: 26px;
    height: 56px;
    padding: 0 34px;
    font-size: 17px;
  }

  .hero_photo { margin-top: 44px; }
  .hero_photo img { height: 66vh; min-height: 380px; }

  /* section headings need the same treatment, for the same reason */
  .h2, .block_title { font-size: clamp(30px, 9.4vw, 44px); line-height: .94; }
  .community_stat { font-size: clamp(52px, 18vw, 88px); }
  .voices_title { font-size: clamp(32px, 10vw, 48px); }
  .cta_title { font-size: clamp(30px, 9.4vw, 44px); line-height: .96; }
}

/* the 420px block previously pinned the headline to 30px; keep only the
   adjustments that genuinely need a smaller screen */
@media (max-width: 420px) {
  .hero_title { font-size: 13vw; }
  .feat_head { font-size: 14px; }
  .step h3, .sec_card h3 { font-size: 17px; }
}

/* =========================================================================
   THE CURTAIN, RE-ASSERTED
   .intro had been swept into a `position: relative; z-index: 1` rule meant
   for page sections, which turned the loading screen into an ordinary block
   in the flow. It is a curtain: it must sit above everything, cover the
   viewport, and leave without a trace.
   ========================================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background: var(--k-purple);
  will-change: opacity;
  transition: opacity .55s var(--ease), visibility 0s .55s;
}
/* step two fades the whole curtain out rather than only its background, so
   the letters cannot linger over the page beneath */
.intro.is-animating-step-2 { opacity: 0; pointer-events: none; }
.intro.is-complete { opacity: 0; visibility: hidden; transition-property: none; }

.intro_letters {
  display: flex;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 13vw, 190px);
  line-height: .84;
  letter-spacing: -0.045em;
  color: var(--k-lavender);
}

/* the page must not scroll behind the curtain, and must not jump when the
   scrollbar returns */
body.is-intro { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-intro) .intro { display: none; }
  body.is-intro { overflow: auto; }
}

/* =========================================================================
   THE CURTAIN RUNS ON CSS
   Raised by a class already in the markup, so it covers the page on the very
   first paint. It lowers itself on a keyframe timeline, so neither a slow
   script nor a broken one can leave the reader stranded behind it. JavaScript
   only decides whether to skip it for a returning visitor.
   ========================================================================= */

html.is-intro, html.is-intro body { overflow: hidden; height: 100%; }

/* nothing to see until the script has had its say about skipping */
.intro { animation: intro-out 2.5s forwards; }

@keyframes intro-out {
  0%, 56%   { opacity: 1; visibility: visible; }
  92%, 100% { opacity: 0; visibility: hidden; }
}

/* the letters climb on the same timeline */
.intro_letters i { animation: letterUp .8s forwards; }
.intro_letters i:nth-child(1) { animation-delay: .10s; }
.intro_letters i:nth-child(2) { animation-delay: .22s; }
.intro_letters i:nth-child(3) { animation-delay: .34s; }
.intro_letters i:nth-child(4) { animation-delay: .46s; }
.intro_letters i:nth-child(5) { animation-delay: .58s; }
.intro_letters i:nth-child(6) { animation-delay: .70s; }
.intro_letters i:nth-child(7) { animation-delay: .82s; }

/* a returning visitor never sees it at all */
html:not(.is-intro) html:not(.force-intro) .intro { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.is-intro:not(.force-intro), html.is-intro:not(.force-intro) body { overflow: auto; height: auto; }
  html:not(.force-intro) .intro { display: none; }
}

/* ?intro is a review tool: it has to beat the global reduced-motion rule that
   flattens every animation to 0.01ms, otherwise the curtain finishes before
   it is visible and the cleanup tears it out. Only ever active when the query
   string asks for it, so a real visitor's motion preference is untouched. */
@media (prefers-reduced-motion: reduce) {
  html.force-intro .intro,
  html.force-intro .intro_letters i {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
    transition-duration: revert !important;
  }
  html.force-intro .intro { animation: intro-out 2.5s forwards !important; }
  html.force-intro .intro_letters i { animation: letterUp .8s forwards !important; }
}

/* =========================================================================
   THE MARK
   It was 22px next to a 27px wordmark set in the body face, which left it
   quieter than the nav links beside it. The wordmark now uses the display
   family the rest of the page shouts in, and both grow.
   ========================================================================= */

.logo { gap: 10px; }
.logo_mark { width: 30px; height: 30px; }
.logo_mark svg { stroke-width: 4.4; }
.logo_word {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.logo_dot { color: var(--k-purple); }

/* the nav bar has to grow with it or the mark crowds the edges */
.nav_inner { height: 76px; }

@media (max-width: 900px) {
  .nav_inner { height: 64px; }
  .logo { gap: 8px; }
  .logo_mark { width: 26px; height: 26px; }
  .logo_word { font-size: 27px; }
}
@media (max-width: 420px) {
  .logo_mark { width: 24px; height: 24px; }
  .logo_word { font-size: 24px; }
}

/* the footer mark matches, in cream */
.footer .logo_mark { color: var(--k-lavender); }
.footer .logo_dot { color: var(--k-lavender); }

/* =========================================================================
   CONVERSION + MOTION
   Every piece here is doing a job: the sticky bar puts the action in thumb
   reach, the magnet makes a button feel alive under the cursor, the thread
   types itself so the phone demonstrates the product instead of describing
   it, and the hairline says how much page is left.
   ========================================================================= */

/* the running total, above the fold */
.hero_eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.hero_eyebrow strong { color: var(--k-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── the bar that follows a phone reader ─────────────────────────────── */
.sticky_cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(252, 247, 242, .94);
  border-top: 1px solid rgba(27, 22, 29, .08);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  transform: translateY(110%);
  transition: transform .42s var(--ease);
}
.sticky_cta.is-up { transform: none; }
.sticky_cta .btn { width: 100%; height: 54px; font-size: 17px; }
.sticky_cta_note { font-size: 12.5px; color: #8b857d; }
@media (max-width: 900px) { .sticky_cta { display: flex; } }

/* ── magnetic buttons ────────────────────────────────────────────────── */
.btn {
  --mx: 0px; --my: 0px;
  position: relative;
  overflow: visible;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .28s var(--ease), background .22s linear, filter .2s linear, box-shadow .3s var(--ease);
}
.btn::after {
  content: "";
  display: block;
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--sheen, 0);
  background: radial-gradient(38% 60% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.34), transparent 70%);
  transition: opacity .3s linear;
}
.btn--white::after, .btn--ghost::after {
  background: radial-gradient(38% 60% at var(--gx,50%) var(--gy,50%), rgba(20, 96, 36,.14), transparent 70%);
}

/* ── cards track the cursor with a soft highlight ────────────────────── */
.sec_card, .step { position: relative; isolation: isolate; }
.sec_card::before, .step::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--lit, 0);
  background: radial-gradient(38% 60% at var(--cx, 50%) var(--cy, 50%), rgba(20, 96, 36, .10), transparent 72%);
  transition: opacity .35s linear;
}

/* ── the chat types itself out ───────────────────────────────────────── */
.ph_thread > .is-typing { opacity: 0; transform: translateY(8px) scale(.98); }
.ph_thread > .is-said  { animation: msg-in .42s var(--ease) forwards; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.ph_dots {
  align-self: flex-start;
  display: inline-flex; gap: .28em;
  padding: .78em .85em;
  border-radius: .6em;
  border-top-left-radius: 0;
  background: #1c232f;
}
.ph_dots i { width: .42em; height: .42em; border-radius: 50%; background: #8b9aa4; animation: dot 1.1s ease-in-out infinite; }
.ph_dots i:nth-child(2) { animation-delay: .18s; }
.ph_dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%,60%,100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

/* ── a hairline that tracks reading progress ─────────────────────────── */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 250;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--k-purple), var(--k-lav-800));
  pointer-events: none;
}

/* =========================================================================
   DECORATION
   Flat marks only: dots and message chips. The cream ground is the brand,
   so anything laid over it has to read as a mark, never a haze.
   ========================================================================= */

.hero { position: relative; }
.hero_deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero_deco::before {
  /* a patch of dots at each shoulder, faded out toward the headline */
  content: "";
  position: absolute;
  inset: 74px 0 auto;
  height: 300px;
  background-image: radial-gradient(circle, rgba(20, 96, 36, .15) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 26%, transparent 74%, #000),
                      linear-gradient(#000, transparent);
          mask-image: linear-gradient(90deg, #000, transparent 26%, transparent 74%, #000),
                      linear-gradient(#000, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero_inner, .hero_photo { position: relative; z-index: 1; }

/* ── the drifting command chips ──────────────────────────────────────── */
.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit_chip {
  position: absolute;
  padding: 11px 16px;
  border-radius: var(--k-r-md);
  background: #fff;
  border: 1px solid rgba(27, 22, 29, .08);
  box-shadow: 0 10px 26px -14px rgba(27, 22, 29, .35);
  color: var(--k-ink);
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  animation: chip-in .7s var(--ease) forwards, float-y 7s ease-in-out infinite;
}
.orbit_chip::after {
  /* the tail that makes it read as a message, not a badge */
  content: "";
  position: absolute;
  bottom: -5px; left: 20px;
  width: 10px; height: 10px;
  background: #fff;
  border-right: 1px solid rgba(27, 22, 29, .08);
  border-bottom: 1px solid rgba(27, 22, 29, .08);
  transform: rotate(45deg);
}
@keyframes chip-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes float-y {
  0%, 100% { translate: 0 0; rotate: var(--tilt, 0deg); }
  50%      { translate: 0 -11px; rotate: calc(var(--tilt, 0deg) * -1); }
}
.orbit_chip--a { --tilt: -2.5deg; left: 4%;  top: 65%; animation-delay: .5s, .9s; }
.orbit_chip--b { --tilt:  3deg;   left: 11%; top: 80%; animation-delay: .75s, 1.4s; }
.orbit_chip--c { --tilt:  2deg;   right: 5%; top: 64%; animation-delay: .62s, .5s; }
.orbit_chip--d { --tilt: -3deg;   right: 9%; top: 79%; animation-delay: .88s, 1.9s; }
@media (max-width: 1180px) {
  .orbit_chip--b, .orbit_chip--d { display: none; }
  .orbit_chip--a { left: 2%; top: 66%; }
  .orbit_chip--c { right: 2%; top: 64%; }
}
@media (max-width: 900px) {
  .orbit { display: none; }
  .hero_deco::before { inset: 40px 0 auto; height: 220px; }
}

/* =========================================================================
   THE CTA: glow, sweep, glitter
   Three effects on three clocks so they never resolve into one obvious loop.
   ========================================================================= */

.btn--blue, .btn--dark, .nav_cta {
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px -14px rgba(20, 96, 36,.70);
}
.btn--blue:hover, .btn--dark:hover, .nav_cta:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
              0 18px 40px -14px rgba(20, 96, 36,.82),
              0 0 0 1px rgba(27, 127, 49,.45);
  filter: brightness(1.04);
}

/* the buttons that actually convert get a bloom that breathes. blur, not
   spread: a spread ring has a hard outer edge and reads as a border */
.hero_cta, .sticky_cta .btn, .cta_inner .btn { animation: halo 3.6s ease-in-out infinite; }
@keyframes halo {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
                         0 12px 28px -14px rgba(20, 96, 36,.70),
                         0 0 16px -3px rgba(27, 127, 49,.26); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.30) inset,
                         0 16px 36px -14px rgba(20, 96, 36,.78),
                         0 0 40px 3px rgba(27, 127, 49,.52); }
}

/* the specular sweep. the band sits at the middle of a double-width image,
   so it crosses the button exactly while the position runs 100% → 0% */
.btn--blue::before, .btn--dark::before, .nav_cta::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(104deg,
    transparent 40%,
    rgba(255,255,255,.11) 45%,
    rgba(255,255,255,.40) 50%,
    rgba(255,255,255,.11) 55%,
    transparent 60%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 200% 0;
  animation: sweep 4.6s cubic-bezier(.42, 0, .3, 1) infinite;
}
@keyframes sweep {
  0%        { background-position: 200% 0; }
  42%, 100% { background-position: -100% 0; }
}
.btn--white::before, .btn--ghost::before {
  background-image: linear-gradient(104deg, transparent 40%, rgba(20, 96, 36,.10) 50%, transparent 60%);
}
.btn > * { position: relative; z-index: 2; }

/* ── the glitter ─────────────────────────────────────────────────────── */
:root {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.6 4.7 10.6 11.3 11.3C16.7 12 12.7 16 12 22.6 11.3 16 7.3 12 .7 11.3 7.3 10.6 11.3 6.6 12 0z' fill='%23fff'/%3E%3C/svg%3E");
}
.glint {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(10px * var(--s, 1));
  aspect-ratio: 1;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: currentColor;
  -webkit-mask: var(--star) no-repeat center / contain;
          mask: var(--star) no-repeat center / contain;
  animation: twinkle 3.1s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.btn--blue .glint, .btn--dark .glint, .nav_cta .glint { color: #EBF8EE; }
.btn--white .glint, .btn--ghost .glint { color: var(--k-lav-800); }
/* Each spark used to be dark for two thirds of its cycle, so with five of
   them on random offsets the button was often showing none at all. Every
   spark is lit for most of its cycle now, and the offsets are dealt out
   evenly rather than at random, so several are always up. */
@keyframes twinkle {
  0%, 100% { opacity: 0;   transform: scale(.2)  rotate(-40deg); }
  18%      { opacity: 1;   transform: scale(1)   rotate(0deg); }
  38%      { opacity: .45; transform: scale(.62) rotate(30deg); }
  58%      { opacity: .95; transform: scale(.92) rotate(60deg); }
  80%      { opacity: .3;  transform: scale(.5)  rotate(95deg); }
}

/* =========================================================================
   POLISH: warmer elevation, and a lavender rule under every eyebrow
   ========================================================================= */

.sec_card, .step, .faq_item, .quote {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s linear;
}
.sec_card, .step { box-shadow: 0 2px 4px -2px rgba(27,22,29,.05), 0 12px 28px -22px rgba(27,22,29,.3); }
.sec_card:hover, .step:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 96, 36,.22);
  box-shadow: 0 4px 8px -3px rgba(27,22,29,.07), 0 26px 50px -26px rgba(20, 96, 36,.4);
}
.faq_item:hover { border-color: rgba(20, 96, 36,.2); }

.badge { position: relative; padding-bottom: 10px; }
.badge::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--k-lav-800);
  transition: width .5s var(--ease);
}
.section:hover .badge::after { width: 46px; }

.bank { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.bank:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -14px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  .ph_dots i, .orbit_chip { animation: none; }
  .orbit_chip { opacity: 1; }
  .btn { transform: none; }
  .sticky_cta { transition: none; }
  .ph_thread > .is-typing { opacity: 1; transform: none; }
  .hero_cta, .sticky_cta .btn, .cta_inner .btn { animation: none; }
  .btn--blue::before, .btn--dark::before, .nav_cta::before { animation: none; background-image: none; }
  .glint { display: none; }
}

/* =========================================================================
   WHATSAPP: the message types the real threads use
   Reconstructed from the product screenshots: quoted replies, the tappable
   button rows under a confirmation, bulleted breakdowns, and the unread
   jump-to-bottom button. Colours are WhatsApp's own; only the brand marks
   inside the conversation are Milo's.
   ========================================================================= */

/* a quoted reply, the bar-and-name block WhatsApp stacks above your text */
.ph_quote {
  display: block;
  margin-bottom: .35em;
  padding: .42em .6em;
  border-radius: .35em;
  border-left: .28em solid #cfa658;
  background: rgba(0, 0, 0, .22);
  font-size: .92em;
  line-height: 1.3;
}
.ph_msg--in .ph_quote { background: rgba(255, 255, 255, .06); border-left-color: var(--k-lav-800); }
.ph_quote b { display: block; margin-bottom: .12em; color: #cfa658; font-weight: 600; }
.ph_msg--in .ph_quote b { color: var(--k-lav-800); }
.ph_quote span { color: #b9c8c2; }
.ph_msg--in .ph_quote span { color: #8b9aa4; }

/* the tappable rows under a confirmation. each is its own hairline-topped
   band, so two of them read as a choice rather than one long button */
.ph_btns { margin-top: .4em; }
.ph_btn {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  padding: .6em 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: #4fc3a1;
  font-size: .98em;
  font-weight: 500;
}
.ph_btn::before {
  content: "";
  width: .95em; height: .95em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-1a5 5 0 0 0-5-5H4'/%3E%3C/svg%3E") no-repeat 50% / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-1a5 5 0 0 0-5-5H4'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

/* a spending breakdown */
.ph_list { margin: .5em 0 .1em; padding-left: .2em; list-style: none; }
.ph_list li { position: relative; padding-left: .95em; margin-bottom: .42em; }
.ph_list li::before { content: "\2022"; position: absolute; left: 0; color: #8b9aa4; }
.ph_list b { color: #fff; font-weight: 700; }

/* jump to the newest message */
.ph_fab {
  position: absolute;
  right: .7em; bottom: .7em;
  width: 2.3em; height: 2.3em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1c232f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.ph_fab::before {
  content: "";
  width: 1em; height: 1em;
  background: #8b9aa4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat 50% / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat 50% / contain;
}
.ph_fab i {
  position: absolute; top: -.25em; right: -.15em;
  min-width: 1.35em; height: 1.35em;
  display: grid; place-items: center;
  padding: 0 .3em;
  border-radius: 999px;
  background: #25d366;
  color: #0a0f17;
  font-size: .62em; font-style: normal; font-weight: 800;
}

/* the receipt card grew rows, so each line is a label/value pair now */
.ph_receipt span { display: flex; justify-content: space-between; gap: 1em; }
.ph_receipt span + span { border-top: 0; padding-top: .3em; margin-top: .3em; }

/* Snap to Pay needs a camera in the same monoline family as the other icons */
.ico--camera { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146024' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2a1.5 1.5 0 0 0 1.28-.72l.86-1.4A1.5 1.5 0 0 1 10.12 4h3.76a1.5 1.5 0 0 1 1.28.88l.86 1.4A1.5 1.5 0 0 0 17.3 7h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E"); }

/* The device deliberately runs off the bottom of the features panel, which
   clips roughly the last 130px of the screen, the composer and the tail of
   the newest bubble. So the thread is anchored to the bottom and held clear
   of the clip line: the newest message lands exactly at the panel's edge and
   older ones run off the top, which is what an open chat actually looks like.
   On a phone the whole device is visible, so it only needs ordinary padding. */
.ph_thread {
  justify-content: flex-end;
  padding-bottom: var(--thread-pad, 9.4em);
}
@media (max-width: 900px) { .ph_thread { --thread-pad: 1em; } }

/* =========================================================================
   THE DEVICE: a whole phone, not a crop
   It used to hang 130px past the bottom of the features panel, so the
   composer and the tail of the last bubble were cut away by the panel's own
   overflow. The panel is tall enough to hold it outright now, and the device
   stands on the panel's own ground with nothing behind it.
   ========================================================================= */

.feat_panel { min-height: 872px; }
.feat_device {
  position: absolute;
  right: 46px;
  top: 41px;
  bottom: 41px;
  width: min(470px, calc(100% - 560px));
  display: grid;
  place-items: center;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.feat_device .phone { --pw: 372px; position: relative; z-index: 1; }

/* =========================================================================
   iPHONE 17 PRO
   Built to the real proportions: 402 × 874pt, a 55pt corner, a 125 × 36pt
   Dynamic Island. Everything is a fraction of --pw, so one number scales the
   whole device.

   What sells a metal edge is not its colour but the order of its highlights:
   a hard specular line at the rim, a dark band just inside it where the
   chamfer turns away, then the flat of the rail. Both long sides get that
   mirrored, which is why the frame gradient has eleven stops and not three.
   ========================================================================= */

.phone {
  aspect-ratio: 402 / 874;
  padding: calc(var(--pw) * 0.0155);
  border-radius: calc(var(--pw) * 0.137);
  background:
    linear-gradient(90deg,
      #6d6560 0%, #cfc7bf 0.7%, #f4efe9 2.0%, #a49a91 4.2%, #7c736c 7.5%,
      #8b827a 50%,
      #7c736c 92.5%, #a49a91 95.8%, #f4efe9 98.0%, #cfc7bf 99.3%, #6d6560 100%);
  box-shadow:
    0 calc(var(--pw) * 0.0022) 0 rgba(255, 255, 255, .55) inset,
    0 calc(var(--pw) * -0.0022) 0 rgba(0, 0, 0, .38) inset,
    0 calc(var(--pw) * 0.02)  calc(var(--pw) * 0.03) calc(var(--pw) * -0.02) rgba(30, 22, 16, .45),
    0 calc(var(--pw) * 0.11)  calc(var(--pw) * 0.17) calc(var(--pw) * -0.09) rgba(30, 22, 16, .34),
    0 calc(var(--pw) * 0.26)  calc(var(--pw) * 0.34) calc(var(--pw) * -0.16) rgba(30, 22, 16, .26);
}
/* the antenna bands */
.phone::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(11% - 1px), rgba(58,52,46,.5) 11%, transparent calc(11% + 2px)),
    linear-gradient(180deg, transparent calc(89% - 1px), rgba(58,52,46,.5) 89%, transparent calc(89% + 2px));
}
/* the black gasket the glass sits in */
.phone::after {
  content: "";
  position: absolute;
  inset: calc(var(--pw) * 0.0155);
  border-radius: calc(var(--pw) * 0.1215);
  pointer-events: none;
  box-shadow: 0 0 0 calc(var(--pw) * 0.0045) #18782D,
              0 0 0 calc(var(--pw) * 0.008) rgba(0, 0, 0, .5);
}

.phone_screen {
  border-radius: calc(var(--pw) * 0.1215);
  font-size: calc(var(--pw) / 402 * 15.4);
  background: #000;
}

/* ── the Dynamic Island ──────────────────────────────────────────────── */
.ph_island {
  position: absolute;
  top: calc(var(--pw) * 0.030);
  left: 50%;
  width: calc(var(--pw) * 0.311);
  height: calc(var(--pw) * 0.0896);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  z-index: 6;
}
.ph_lens {
  position: absolute;
  right: calc(var(--pw) * 0.022);
  top: 50%;
  width: calc(var(--pw) * 0.035);
  height: calc(var(--pw) * 0.035);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #283548 0 20%, #0e141c 46%, #040609 80%);
  box-shadow: 0 0 0 1px rgba(41, 100, 54, .15),
              inset 0 0 calc(var(--pw) * 0.006) rgba(24, 118, 45, .32);
}

/* ── the rails ───────────────────────────────────────────────────────── */
.ph_hw { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.ph_hw i {
  position: absolute;
  border-radius: calc(var(--pw) * 0.005);
  /* a button is the same metal, only proud of the rail: dark at the seam,
     bright across its own face */
  background: linear-gradient(90deg, #4f4842, #b3a99f 32%, #ded7ce 50%, #8b8279 76%, #46403b);
  box-shadow: 0 0 calc(var(--pw) * 0.004) rgba(0, 0, 0, .45);
}
.ph_hw_action  { left:  calc(var(--pw) * -0.0072); top: 15.4%; width: calc(var(--pw) * 0.0145); height: 3.4%; }
.ph_hw_vol--up { left:  calc(var(--pw) * -0.0072); top: 22.6%; width: calc(var(--pw) * 0.0145); height: 5.6%; }
.ph_hw_vol--dn { left:  calc(var(--pw) * -0.0072); top: 30.2%; width: calc(var(--pw) * 0.0145); height: 5.6%; }
.ph_hw_side    { right: calc(var(--pw) * -0.0072); top: 25.4%; width: calc(var(--pw) * 0.0145); height: 8.2%; }
.ph_hw_cam     { right: calc(var(--pw) * -0.0060); top: 38.6%; width: calc(var(--pw) * 0.0120); height: 4.6%;
                 background: linear-gradient(90deg, #37332e, #9a9189 38%, #d4cdc4 54%, #6f6862 80%, #37332e); }

/* ── the display glass ───────────────────────────────────────────────── */
.ph_home {
  position: absolute;
  left: 50%; bottom: calc(var(--pw) * 0.022);
  width: 35%;
  height: calc(var(--pw) * 0.0128);
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(252, 247, 242, .92);
  z-index: 5;
}
.ph_glass {
  /* one broad, very low-contrast reflection. anything stronger stops reading
     as glass and starts reading as a gradient laid over the top */
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(126deg,
    rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 17%,
    rgba(252,247,242,0) 34%, rgba(252,247,242,0) 74%,
    rgba(255,255,255,.022) 92%, rgba(255,255,255,.05) 100%);
}

/* the status bar clears the island; the thread clears the home indicator */
.ph_status { padding: calc(var(--pw) * 0.036) calc(var(--pw) * 0.064) calc(var(--pw) * 0.012); }
.ph_thread { --thread-pad: 0.8em; }
.ph_bar    { padding-bottom: calc(var(--pw) * 0.058) !important; }

@media (max-width: 1180px) {
  .feat_device { width: min(420px, calc(100% - 500px)); right: 28px; }
  .feat_device .phone { --pw: 328px; }
  .feat_panel { min-height: 796px; }
}
@media (max-width: 900px) {
  .feat_device { position: static; width: auto; padding: 8px 0 30px; }
  .feat_device .phone { --pw: min(320px, 78vw); }
  .feat_panel { min-height: 0; }
}

/* =========================================================================
   WHATSAPP, MADE HONEST
   Three things gave the mock away, in this order of severity.

   The type. It was inheriting the site's own display face, and no amount of
   correct colour survives the wrong letterforms, WhatsApp on iOS is SF, and
   nothing else looks like it.

   The tails. Squaring off one corner is a shorthand for a tail; it is not a
   tail. A real bubble has a small wedge that breaks the silhouette, and the
   eye reads its absence immediately even when it cannot name it.

   The timestamp. It sits inside the text block, floated to the bottom right,
   with the last line of copy wrapping around it, never on a line of its own.
   ========================================================================= */

.phone_screen {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.012em;
}

/* WhatsApp's own dark palette, to the letter */
.ph_thread { background: #0a0f17; }
.ph_msg { color: #e9edef; border-radius: 7.5px; box-shadow: 0 1px .5px rgba(10, 15, 23, .13); }
.ph_msg--out { background: var(--bubble); color: #fff; border-top-right-radius: 0; }
.ph_msg--in  { background: #1c232f; border-top-left-radius: 0; }
.ph_meta     { color: rgba(233, 237, 239, .6); }
.ph_msg--in .ph_meta { color: #8696a0; }
.ph_head { background: #1c232f; }
.ph_bar  { background: #1c232f; }
.ph_bar_field { background: #262e3b; }

/* the tails */
.ph_msg--out::after,
.ph_msg--in::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0; height: 0;
  border-style: solid;
}
.ph_msg--out::after {
  right: -0.5em;
  border-width: 0 0 0.62em 0.52em;
  border-color: transparent transparent transparent var(--bubble);
}
.ph_msg--in::after {
  left: -0.5em;
  border-width: 0 0.52em 0.62em 0;
  border-color: transparent #1c232f transparent transparent;
}
/* only the bubble that starts a run gets one */
.ph_msg--out + .ph_msg--out::after,
.ph_msg--in  + .ph_msg--in::after { display: none; }
.ph_msg--out + .ph_msg--out { border-top-right-radius: 7.5px; }
.ph_msg--in  + .ph_msg--in  { border-top-left-radius: 7.5px; }

/* the timestamp lives inside the copy, not under it */
.ph_msg { padding: 0.4em 0.62em 0.42em; }
.ph_meta {
  float: right;
  margin: 0.32em 0 -0.14em 0.62em;
  font-size: 0.688em;
  line-height: 1;
}
/* a bubble with a button underneath still needs the float cleared first */
.ph_cta, .ph_btns { clear: both; }
.ph_msg--photo .ph_meta, .ph_voice .ph_meta, .ph_doc .ph_meta { float: none; margin: 0.1em 0 0; }

.ph_checks { width: 1.05em; height: 0.72em; }
.ph_acct { color: #53bdeb; }

/* =========================================================================
   THE THREADS ARE STILLS
   The type-out was a nice idea and a bad one: it made the panel jump every
   seven seconds, and a conversation that assembles itself in front of you is
   the one thing a real screenshot never does. Every thread is simply there,
   the way it is when you open the app.
   ========================================================================= */

.ph_thread > .is-typing { display: block; opacity: 1; transform: none; }
.ph_dots { display: none; }

/* WhatsApp's wallpaper: dense, small, and barely there. Too strong and it
   competes with the bubbles; absent and the ground reads as flat paint. */
.ph_thread::before {
  opacity: .043;
  background-size: calc(var(--pw) * 0.72) calc(var(--pw) * 0.72);
}

/* =========================================================================
   THE TIMESTAMP FITS
   Floating the time to the bottom right is right, but a float contributes
   nothing to a shrink-to-fit box, so a short bubble sized itself to the text
   alone and clipped the time off its own edge, "Send 10k to praise 15:2".

   The fix is the one every chat client uses: an inline spacer at the end of
   the copy, the width of the time, which does count toward intrinsic width.
   The float then lands in space that was reserved for it. The tail moves to
   ::before to free ::after for the spacer.
   ========================================================================= */

.ph_msg--out::after, .ph_msg--in::after { content: none; }

.ph_msg--out::before,
.ph_msg--in::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0; height: 0;
  border-style: solid;
}
.ph_msg--out::before {
  right: -0.5em;
  border-width: 0 0 0.62em 0.52em;
  border-color: transparent transparent transparent var(--bubble);
}
.ph_msg--in::before {
  left: -0.5em;
  border-width: 0 0.52em 0.62em 0;
  border-color: transparent #1c232f transparent transparent;
}
.ph_msg--out + .ph_msg--out::before,
.ph_msg--in  + .ph_msg--in::before { display: none; }

/* the reserved run at the end of the copy */
.ph_msg::after {
  content: "";
  display: inline-block;
  width: 3.5em;
  height: 0;
}
.ph_msg--out::after { width: 4.4em; }   /* the ticks need the extra room */
.ph_msg--photo::after, .ph_voice::after, .ph_doc::after { content: none; }

/* =========================================================================
   THE SCREEN, TO SCALE
   Measured against iOS at 402pt wide, where the status bar is 54pt, the chat
   header 46pt, the composer 50pt and body copy is 17pt on a 22pt line. The
   header was running half again too tall and the composer a quarter over,
   which is what made the whole screen feel wrong without being nameable, 
   the parts were right, the proportions were not.

   Everything is a fraction of --pw rather than a stack of paddings, so the
   ratios survive whatever size the device is drawn at.
   ========================================================================= */

.phone_screen { font-size: calc(var(--pw) / 402 * 16.4); }

.ph_status {
  height: calc(var(--pw) * 0.132);
  padding: 0 calc(var(--pw) * 0.062);
  align-items: center;
  flex: none;
}
.ph_head {
  height: calc(var(--pw) * 0.126);
  padding: 0 calc(var(--pw) * 0.030);
  gap: calc(var(--pw) * 0.022);
  flex: none;
}
.ph_av { width: 2.28em; height: 2.28em; }
.ph_back { padding: 0.26em 0.6em 0.26em 0.4em; font-size: 0.92em; }
.ph_who b { font-size: 1.02em; line-height: 1.2; }
.ph_who span { font-size: 0.8em; line-height: 1.25; }

.ph_bar {
  height: calc(var(--pw) * 0.178);
  padding: 0 calc(var(--pw) * 0.032) calc(var(--pw) * 0.052) !important;
  align-items: center;
  flex: none;
}

.ph_msg { line-height: 1.294; padding: 0.38em 0.6em 0.4em; }
.ph_thread { padding: 0.62em 0.62em 0.5em; gap: 0.5em; }

/* =========================================================================
   SWITCHING DEMOS
   Pushing between chats, not cross-fading a photograph of one. The thread
   leaves to the left; the next arrives from the right a beat at a time, so
   the eye is led down the new conversation instead of being handed all of it
   at once. The frame is untouched throughout, a phone does not move when
   you change what is on it.
   ========================================================================= */

.ph_thread > * {
  transition: opacity .19s var(--ease), transform .19s var(--ease);
}
.phone.is-out .ph_thread > * {
  opacity: 0;
  transform: translateX(-8%);
}
.phone.is-in .ph_thread > * {
  animation: beat-in .44s cubic-bezier(.22, 1, .3, 1) both;
  animation-delay: calc(var(--n, 0) * 42ms);
}
@keyframes beat-in {
  from { opacity: 0; transform: translateX(11%) scale(.975); }
  to   { opacity: 1; transform: none; }
}
/* the chrome of the screen stays put while the conversation changes */
.phone.is-out .ph_head, .phone.is-out .ph_bar,
.phone.is-out .ph_status, .phone.is-in .ph_head { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .phone.is-in .ph_thread > *, .ph_thread > * { animation: none; transition: none; opacity: 1; transform: none; }
}

/* =========================================================================
   THE PREMIUM PASS
   Same page, same type, same cream. What changes is what a visitor gets
   shown and in what order: photographs of the places people actually pay,
   the banks straight under the promise, the product on screen while you
   choose a feature on a phone, and a closing that ends on the curtain's own
   plum and lavender. Everything that loops runs only while it is on screen.
   ========================================================================= */

/* the hero photograph now arrives as a <picture>; it must not add an inline
   gap under the image. The img rules above still govern the box. */
.hero_photo picture { display: block; }

/* ── the running total: phones only, exactly as it first shipped ──────── */
.hero_eyebrow { display: none; }
@media (max-width: 900px) { .hero_eyebrow { display: inline-flex; } }

/* one line of reassurance under the action, where the thumb already is */
.hero_note { margin-top: 14px; font-size: 14px; font-weight: 600; color: #8b857d; }
.hero_note.fade-up { --d: 520; }

/* ── the banks, straight under the promise ───────────────────────────── */
.trust { position: relative; z-index: 1; padding: 60px 0 0; text-align: center; }
.trust_label { font-size: 15px; font-weight: 600; color: #8b857d; }
.trust .marquee { margin: 18px 0 0; padding-bottom: 0; }
.trust .marquee::before, .trust .marquee::after { bottom: 0; }
.block_card { padding-bottom: 64px; }

/* loops idle until they are on screen (main.js adds .is-playing) */
.marquee_row { animation-play-state: paused; }
.marquee.is-playing .marquee_row { animation-play-state: running; }
@media (hover: hover) { .marquee:hover .marquee_row { animation-play-state: paused; } }

/* ── everyday Nigeria ─────────────────────────────────────────────────── */
.everyday { overflow: hidden; }
.reel { margin-top: 56px; display: grid; gap: 18px; }
.reel_row {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: slide 70s linear infinite;
  animation-play-state: paused;
}
.reel_row--b { animation-duration: 84s; animation-direction: reverse; }
.reel.is-playing .reel_row { animation-play-state: running; }
@media (hover: hover) { .reel:hover .reel_row { animation-play-state: paused; } }

.shot {
  position: relative;
  flex: none;
  width: 300px;
  aspect-ratio: 4 / 5;
  border-radius: var(--k-r-md);
  overflow: hidden;
  background: var(--k-sand);
}
.reel_row--b .shot { width: 240px; aspect-ratio: 3 / 4; }
.shot picture, .shot img { display: block; width: 100%; height: 100%; }
.shot img { object-fit: cover; transition: transform 1.4s var(--ease); }
@media (hover: hover) { .shot:hover img { transform: scale(1.045); } }

/* the message, as WhatsApp draws one you have sent */
.shot_msg {
  position: absolute;
  right: 16px; bottom: 16px;
  max-width: calc(100% - 40px);
  padding: 8px 10px 7px 11px;
  border-radius: 8px;
  border-top-right-radius: 0;
  background: var(--bubble);
  color: #fff;
  font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  box-shadow: 0 1px .5px rgba(10, 15, 23, .13), 0 14px 28px -14px rgba(0, 0, 0, .5);
}
.shot_msg::before {
  content: "";
  position: absolute;
  top: 0; right: -7px;
  border-style: solid;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent transparent var(--bubble);
}
.shot_ticks {
  display: inline-block;
  width: 16px; height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.6 4.4 10 11 2'/%3E%3Cpath d='M8 6.6 11.4 10 18 2'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

/* ── features, on a phone: tabs over the device ──────────────────────── */
.feat_tabs, .feat_caption { display: none; }
@keyframes tab-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── steps arrive one after another ──────────────────────────────────── */
.steps_row .gibbit:nth-child(2) { --gi: 1; }
.steps_row .gibbit:nth-child(3) { --gi: 2; }
.steps_row .gibbit:nth-child(4) { --gi: 3; }

/* ── the closing, in the curtain's colours ───────────────────────────── */
.closing { background: var(--k-purple); }
.cta_title { color: var(--k-lavender); }
.cta_copy { color: rgba(217, 242, 222, .74); }
.closing .btn--dark { background: var(--k-lavender); color: var(--k-purple); }
.closing .btn--dark:hover { background: #EBF8EE; }
.closing .btn--dark .ico--whatsapp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23146024'%3E%3Cpath d='M12.04 2C6.6 2 2.2 6.4 2.2 11.84c0 1.74.46 3.44 1.32 4.94L2.1 22l5.35-1.4a9.8 9.8 0 0 0 4.59 1.16h.01c5.43 0 9.84-4.4 9.84-9.84 0-2.63-1.02-5.1-2.88-6.96A9.77 9.77 0 0 0 12.04 2Zm0 1.79c2.15 0 4.17.84 5.69 2.36a7.99 7.99 0 0 1 2.36 5.69c0 4.45-3.62 8.06-8.06 8.06a8.1 8.1 0 0 1-4.11-1.13l-.3-.17-3.05.8.81-2.98-.19-.31a8.03 8.03 0 0 1-1.23-4.27c0-4.45 3.62-8.05 8.08-8.05Zm-2.6 3.86c-.15 0-.4.06-.62.29-.21.23-.81.79-.81 1.93s.83 2.24.95 2.4c.11.15 1.61 2.46 3.9 3.45.55.24.97.38 1.3.48.55.18 1.05.15 1.44.09.44-.06 1.35-.55 1.55-1.09.19-.53.19-.99.13-1.08-.05-.1-.2-.15-.42-.27-.23-.11-1.35-.66-1.55-.74-.21-.08-.36-.11-.51.12-.15.22-.58.73-.71.88-.13.15-.26.17-.49.06-.22-.12-.95-.36-1.82-1.13a6.8 6.8 0 0 1-1.26-1.56c-.13-.23-.01-.35.1-.46.1-.1.23-.27.34-.4.11-.14.15-.23.23-.38.07-.16.03-.29-.02-.4-.06-.12-.5-1.24-.7-1.7-.18-.44-.37-.38-.51-.39h-.44Z'/%3E%3C/svg%3E");
}
.closing .glint { color: var(--k-lav-800); }
.footer_brand p, .footer_col h4, .footer_base { color: rgba(217, 242, 222, .62); }
.footer_col a, .socials a { color: var(--k-cream); }

/* the sign-off: the curtain's letters, rising back into frame */
.footer_watermark {
  display: flex;
  justify-content: center;
  color: var(--k-lavender);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.045em;
}
.footer_watermark i {
  display: block;
  font-style: normal;
  transform: translateY(110%);
  transition: transform .9s var(--ease);
}
.footer_watermark.is-in i { transform: none; }
.footer_watermark i:nth-child(2) { transition-delay: .12s; }
.footer_watermark i:nth-child(3) { transition-delay: .24s; }
.footer_watermark i:nth-child(4) { transition-delay: .36s; }
.footer_watermark i:nth-child(5) { transition-delay: .48s; }
.footer_watermark i:nth-child(6) { transition-delay: .60s; }
.footer_watermark i:nth-child(7) { transition-delay: .72s; }

/* The blanket legibility rule darkened .block_copy to #4f4a45, which is
   right on cream and all but invisible on the purple card it lives on. */
.block_card .block_copy { color: rgba(217, 242, 222, .8); }

/* "NIGERIANS" at 18vw ran off the right edge of a 390px screen; 14vw sets
   the widest word inside the column */
@media (max-width: 900px) { .community_stat { font-size: clamp(40px, 14vw, 88px); } }

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* the menu the burger opens: the links drop down under the bar */
  .nav_links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 4px var(--gutter) 18px;
    background: rgba(252, 247, 242, .98);
    border-bottom: 1px solid var(--k-sand-3);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .26s var(--ease), transform .36s var(--ease), visibility 0s .36s;
  }
  .nav_links a { padding: 14px 0; border-top: 1px solid var(--k-sand-3); }
  .nav_links a:first-child { border-top: 0; }
  .nav_links a::after { display: none; }
  body.is-menu-open .nav_links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .26s var(--ease), transform .36s var(--ease);
  }
  body.is-menu-open .nav_links a { animation: menu-in .5s var(--ease) both; }
  body.is-menu-open .nav_links a:nth-child(2) { animation-delay: .04s; }
  body.is-menu-open .nav_links a:nth-child(3) { animation-delay: .08s; }
  body.is-menu-open .nav_links a:nth-child(4) { animation-delay: .12s; }
  body.is-menu-open .nav_links a:nth-child(5) { animation-delay: .16s; }
  body.is-menu-open .nav_burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
  body.is-menu-open .nav_burger i:nth-child(2) { bottom: 8px; transform: rotate(-45deg); }

  .hero_note { font-size: 13.5px; margin-top: 12px; }

  .trust { padding-top: 36px; }
  .trust_label { font-size: 14px; }

  /* features: tabs, one line of copy, then the device */
  .feat_list { display: none; }
  .feat_tabs {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 16px 16px 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .feat_tabs::-webkit-scrollbar { display: none; }
  .feat_tab {
    position: relative;
    flex: none;
    height: 40px;
    padding: 0 15px;
    overflow: hidden;
    border-radius: var(--k-r-sm);
    border: 1px solid var(--k-sand-3);
    background: var(--k-cream);
    color: var(--k-gray);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    scroll-snap-align: center;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  }
  .feat_tab.is-active { background: var(--k-purple); border-color: var(--k-purple); color: var(--k-lavender); }
  .feat_tab_bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--k-lav-800);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .feat_tab.is-active .feat_tab_bar { animation: tab-run var(--dwell, 7s) linear forwards; }
  .is-manual .feat_tab_bar { display: none; }
  .feat_caption {
    display: block;
    min-height: 4.5em;
    margin: 14px 20px 6px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #4f4a45;
  }
  .feat_caption.is-swap { animation: cap-in .42s var(--ease); }
  .feat_device { padding-top: 10px; }

  /* the reel is smaller, not shorter-lived */
  .reel { margin-top: 36px; gap: 12px; }
  .reel_row { gap: 12px; }
  .shot { width: 200px; }
  .reel_row--b .shot { width: 168px; }
  .shot_msg { right: 12px; bottom: 12px; max-width: calc(100% - 30px); padding: 6px 8px 5px 9px; font-size: 12.5px; }

  /* security and the quotes become swipeable rows: the page is a third
     shorter on a phone, and the next card peeking in says there is more */
  .sec_cards, .bubbles {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    pointer-events: auto;
  }
  .sec_cards::-webkit-scrollbar, .bubbles::-webkit-scrollbar { display: none; }
  .sec_card, .sec_card:last-child { flex: 0 0 84%; min-height: 430px; scroll-snap-align: start; }
  .bubbles { align-items: flex-start; padding-bottom: 26px; }
  .bubble { flex: 0 0 84%; scroll-snap-align: start; }

  .block_card { padding-bottom: 44px; }
}

@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* the ticks ride the last line of the message instead of wrapping below it */
.shot_msg { display: flex; align-items: flex-end; gap: 6px; }
.shot_ticks { flex: none; margin: 0 0 2px; }

/* The left fade was an inline pseudo in a centred strip, so its static
   position was the middle of the row and it washed out whichever bank sat
   there. Pinned to the edge like its mirror. */
.trust .marquee::before { left: 0; }

@media (max-width: 900px) {
  /* the menu is a sheet, not a veil: nothing of the hero shows through */
  .nav_links { background: var(--k-cream); }

  /* the heading comes before the quotes it introduces */
  .voices { display: flex; flex-direction: column; }
  .voices_title { order: -1; }

  /* link columns pair up; the brand and the contact lines keep full width */
  .footer_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .footer_brand, .footer_col:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .reel_row, .marquee_row { animation: none; }
  .reel { overflow-x: auto; }
  .footer_watermark i { transform: none; transition: none; }
  .feat_caption.is-swap, body.is-menu-open .nav_links a { animation: none; }
}

/* =========================================================================
   THE MESSAGES
   The things people say to Milo are the page's best idea, so they are
   drawn properly everywhere they appear: as WhatsApp's own sent bubble,
   light green with ticks, and on the photographs with the reply that comes
   back: the payment made, the bill settled, the day carrying on. White
   chips on cream had no edge to them; the green carries a hairline and a
   real shadow, so it holds against any ground.
   ========================================================================= */

/* ── the hero's drifting chips become sent messages ──────────────────── */
.orbit_chip {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  padding: 9px 11px 8px 13px;
  border: 0;
  border-radius: 9px;
  border-top-right-radius: 0;
  background: var(--bubble);
  color: #fff;
  font: 500 15px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(4, 58, 122, .18),
              0 2px 3px rgba(10, 15, 23, .10),
              0 18px 34px -14px rgba(27, 22, 29, .45);
}
.orbit_chip::after {
  top: 0; right: -7px;
  bottom: auto; left: auto;
  width: 0; height: 0;
  background: none;
  border-style: solid;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent transparent var(--bubble);
  transform: none;
}

/* ── phones: the same messages, running under the call to action ─────── */
.says { display: none; }
.says.fade-up { --d: 640; }
.says_msg {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  margin-right: 8px;              /* the tail sits in this gap */
  padding: 8px 10px 7px 12px;
  border-radius: 9px;
  border-top-right-radius: 0;
  background: var(--bubble);
  color: #fff;
  font: 500 14.5px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(4, 58, 122, .18), 0 10px 20px -12px rgba(27, 22, 29, .45);
}
.says_msg::before {
  content: "";
  position: absolute;
  top: 0; right: -7px;
  border-style: solid;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent transparent var(--bubble);
}
@media (max-width: 900px) {
  .says {
    display: block;
    margin: 24px calc(var(--gutter) * -1) 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .says_row {
    display: flex;
    gap: 6px;
    width: max-content;
    padding: 3px 0 16px;          /* room for the shadow */
    animation: slide 48s linear infinite;
    animation-play-state: paused;
  }
  .says.is-playing .says_row { animation-play-state: running; }
  .hero_photo { margin-top: 24px; }
}

/* ── the photographs carry the whole exchange ────────────────────────── */
.shot_chat {
  position: absolute;
  left: 12px; right: 12px; bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shot_chat .shot_msg {
  position: relative;
  right: auto; bottom: auto;
  align-self: flex-end;
  max-width: 94%;
  margin-right: 7px;
  transform-origin: 100% 100%;
}
.shot_reply {
  position: relative;
  align-self: flex-start;
  max-width: 94%;
  margin-left: 7px;
  padding: 7px 11px;
  border-radius: 8px;
  border-top-left-radius: 0;
  background: #fff;
  color: #0f151e;
  font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  box-shadow: 0 1px .5px rgba(10, 15, 23, .13), 0 14px 28px -14px rgba(0, 0, 0, .5);
  transform-origin: 0 100%;
}
.shot_reply::before {
  content: "";
  position: absolute;
  top: 0; left: -7px;
  border-style: solid;
  border-width: 0 8px 10px 0;
  border-color: transparent #fff transparent transparent;
}

/* the exchange plays once, card by card: sent, ticks turn blue, reply */
@keyframes bub-in {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.reel_row--b .shot { --off: .45s; }
.reel.is-armed .shot_msg, .reel.is-armed .shot_reply { opacity: 0; }
.reel.is-armed .shot_ticks { filter: grayscale(1) brightness(.85); }
.reel.is-seen .shot_msg {
  animation: bub-in .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * .2s + var(--off, 0s));
}
.reel.is-seen .shot_ticks {
  filter: none;
  transition: filter .3s linear;
  transition-delay: calc(var(--i, 0) * .2s + var(--off, 0s) + .8s);
}
.reel.is-seen .shot_reply {
  animation: bub-in .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * .2s + var(--off, 0s) + 1.15s);
}

@media (max-width: 900px) {
  .shot_chat { left: 8px; right: 8px; bottom: 10px; gap: 5px; }
  .shot_chat .shot_msg, .shot_reply { padding: 6px 8px 5px 9px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .says_row { animation: none; }
  .says { overflow-x: auto; }
}

/* =========================================================================
   THE QUOTES, IN ORDER
   The cluster overlapped its own cards and left holes where the heading was
   meant to sit, so on anything wider than a phone it read as scattered. The
   heading leads now, and the five quotes sit on one grid: the longest one
   featured down the left, the other four paired on the right, every edge
   aligned and every row the same height. Phones keep the swipeable row.
   ========================================================================= */

@media (min-width: 901px) {
  .voices {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 112px var(--gutter) 124px;
  }
  .voices_title { order: -1; max-width: none; margin: 0 auto 60px; }
  .bubbles {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    pointer-events: auto;
  }
  .bubble {
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 22px;
    border-radius: 12px;
  }
  .bubble p { font-size: 16px; line-height: 1.5; }
  .bubble figcaption { margin-top: auto; padding-top: 22px; }
  .bubble:first-child { grid-row: span 2; padding: 36px 36px 30px; }
  .bubble:first-child p { font-size: 22px; line-height: 1.42; letter-spacing: -0.015em; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bubble:first-child { grid-column: 1 / -1; grid-row: auto; }
}
.bubbles .gibbit:nth-child(2) { --gi: 1; }
.bubbles .gibbit:nth-child(3) { --gi: 2; }
.bubbles .gibbit:nth-child(4) { --gi: 3; }
.bubbles .gibbit:nth-child(5) { --gi: 4; }

/* ── the banks carry their real marks now, so the marks get room ─────── */
.bank { gap: 11px; padding: 0 18px 0 12px; }
.bank img {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 22, 29, .08);
}

/* =========================================================================
   THE 45,000
   The number was alone on the page. Now the people it counts sit above it:
   eight faces, smiling and laughing, in one row set along a shallow curve, 
   the row itself smiles. They rise into place one after another on the
   curtain's own 0.12s stagger, each photograph settling from a slight zoom,
   and on a phone they close up into a tidy four-by-two grid.
   ========================================================================= */

.smiles {
  display: flex;
  justify-content: center;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto 64px;
}
.smile {
  flex: 1 1 0;
  max-width: 138px;
  aspect-ratio: 3 / 4;
  margin-top: var(--dy, 0px);
  border-radius: var(--k-r-md);
  overflow: hidden;
  background: var(--k-sand);
  box-shadow: 0 18px 36px -22px rgba(27, 22, 29, .45);
}
.smile picture, .smile img { display: block; width: 100%; height: 100%; }
.smile img { object-fit: cover; }

/* the curve: highest at the ends, lowest in the middle */
.smile:nth-child(2), .smile:nth-child(7) { --dy: 24px; }
.smile:nth-child(3), .smile:nth-child(6) { --dy: 40px; }
.smile:nth-child(4), .smile:nth-child(5) { --dy: 48px; }

/* the rise, armed by main.js so without it the faces are simply there */
.smiles.is-armed .smile { opacity: 0; transform: translateY(46px); }
.smiles.is-armed .smile img { transform: scale(1.14); }
.smiles.is-in .smile {
  opacity: 1;
  transform: none;
  transition: opacity .6s linear, transform 1s var(--ease);
  transition-delay: calc(var(--n, 0) * .12s);
}
.smiles.is-in .smile img {
  transform: none;
  transition: transform 1.8s var(--ease);
  transition-delay: calc(var(--n, 0) * .12s);
}
@media (hover: hover) {
  .smiles.is-in .smile:hover { transform: translateY(-6px); transition-delay: 0s; }
}

@media (max-width: 900px) {
  .smiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 40px;
  }
  .smile { max-width: none; --dy: 0px; }
  /* the same smile, two rows of it */
  .smile:nth-child(4n+2), .smile:nth-child(4n+3) { --dy: 14px; }
  .community { padding-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .smiles.is-armed .smile, .smiles.is-armed .smile img { opacity: 1; transform: none; }
}

/* Two leftovers that the new layouts inherited:
   - the old quote cluster fixed every grid row at 52px, which crushed the
     new grid's cards into two short rows and stacked their text on top of
     each other; rows size to their content now
   - the desktop curve's nth-child offsets outrank a plain .smile, so faces
     four and five kept their 48px drop inside the phone grid; reset at the
     same weight, then each row of four gets its own small curve */
@media (min-width: 901px) { .bubbles { grid-auto-rows: auto; } }

/* Between the phone layout and a full desktop, logo + toggle + five links +
   button do not fit: "How it works" broke onto three lines and the button
   ran off the right edge. The Personal/Business toggle steps out first,
   the gaps close up, and no link is ever allowed to wrap. */
.nav_links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1120px) {
  .seg { display: none; }
  .nav_inner { gap: 16px; }
  .nav_links { gap: 16px; font-size: 14.5px; }
  .nav_cta { padding: 0 16px; }
}

/* =========================================================================
   THE PHONE HERO, QUIETER
   Three things on a small screen: the running total was sitting at headline
   weight when it is a footnote, the bloom behind the buttons breathed in the
   corner of the reader's eye the whole way down the page, and the headline
   started a long way below the bar. The glitter stays, that is the part
   that is meant to catch the light.
   ========================================================================= */

@media (max-width: 900px) {
  .hero { padding-top: 26px; }
  .hero_eyebrow { gap: 6px; font-size: 12.5px; }
  .hero_title { margin-top: 13px; }
  .hero_cta, .sticky_cta .btn, .cta_inner .btn { animation: none; }
}
@media (max-width: 900px) {
  .smiles .smile { --dy: 0px; }
  .smiles .smile:nth-child(4n+2), .smiles .smile:nth-child(4n+3) { --dy: 14px; }
}


/* =========================================================================
   BIGGER MESSAGES
   The WhatsApp bubbles are the thing people remember, so they grow to read
   as real messages at a glance: beside the headline on desktop, and in the
   row under the button on a phone. The headline keeps its full size.
   ========================================================================= */


.orbit_chip {
  gap: 8px;
  padding: 13px 16px 12px 18px;
  border-radius: 12px;
  border-top-right-radius: 0;
  font-size: 20px;
}
.orbit_chip::after { right: -10px; border-width: 0 0 14px 11px; }
.orbit_chip .shot_ticks { width: 21px; height: 13px; margin-bottom: 4px; }

@media (max-width: 900px) {
  .says_row { gap: 8px; padding: 4px 0 22px; }
  .says_msg {
    gap: 8px;
    margin-right: 11px;
    padding: 12px 15px 11px 17px;
    border-radius: 12px;
    border-top-right-radius: 0;
    font-size: 18.5px;
  }
  .says_msg::before { right: -10px; border-width: 0 0 14px 11px; }
  .says_msg .shot_ticks { width: 20px; height: 12px; margin-bottom: 4px; }
}

/* =========================================================================
   FOUR BUBBLES, IN BLUE
   All four bubbles stay at every desktop width, each in its own lane beside
   the sub-head and button, two a side, staggered in from the edge. Between
   901px and 1180px they step down a size and move to the very edges so the
   copy keeps its space.

   The bubbles are WhatsApp's own sent message, to the detail: its curved
   tail, its corner and padding, and the time and blue ticks in the corner.
   They use WhatsApp's dark-mode green with bold light text, so against the
   cream they are the highest-contrast thing in the hero after the headline.
   ========================================================================= */

.orbit_chip, .says_msg {
  align-items: flex-end;
  gap: 0;
  padding: .36em .44em .4em .64em;   /* WhatsApp Web: 6px 7px 8px 9px at 14.2px */
  border-radius: .53em;                /* 7.5px at 14.2px */
  border-top-right-radius: 0;
  background: var(--bubble);
  color: #fff;
  font-weight: 700;
  line-height: 1.34;
  box-shadow: 0 1px .5px rgba(10, 15, 23, .2),
              0 18px 34px -14px rgba(0, 40, 30, .55);
}
/* the same curved wedge the bubble always had, drawn in blue */
.orbit_chip::after, .says_msg::before {
  content: "";
  position: absolute;
  top: 0; right: -.56em;
  bottom: auto; left: auto;
  width: .56em; height: .92em;
  border: 0;
  transform: none;
  background: var(--tail) no-repeat 0 0 / 100% 100%;
}
/* time then read ticks, bottom right, the way a sent message signs off */
.wa_meta {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin: 0 0 -.1em .75em;
  font-size: .62em;
  line-height: 1;
  color: rgba(255, 255, 255, .72);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.orbit_chip .wa_meta .shot_ticks, .says_msg .wa_meta .shot_ticks {
  width: 1.5em; height: 1em; margin: 0; filter: none; opacity: 1;
}

@media (min-width: 901px) {
  .orbit .orbit_chip--b, .orbit .orbit_chip--d { display: inline-flex; }
  .orbit_chip--a { left: 4%;  right: auto; top: 58%; }
  .orbit_chip--b { left: 10%; right: auto; top: 80%; }
  .orbit_chip--c { right: 4%; left: auto;  top: 61%; }
  .orbit_chip--d { right: 8%; left: auto;  top: 82%; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .orbit_chip { font-size: 17px; }
  .orbit_chip--a { left: 2%;  top: 60%; }
  .orbit_chip--b { left: 3%;  top: 83%; }
  .orbit_chip--c { right: 2%; top: 57%; }
  .orbit_chip--d { right: 2%; top: 81%; }
}



/* Phones: size the headline by its longest word ("EVERYTHING", about 7.3em
   wide in Archivo 900) so it can never run off the screen. */
@media (max-width: 640px) {
  .hero_title { font-size: min(13vw, calc((100vw - 40px) / 7.4)); }
}

/* =========================================================================
   THE MARK, FINAL
   The owner's squircle icon beside the MILO wordmark. The wordmark is not a
   font: its letters were traced from the icon itself (inline SVG symbols
   #wm and #wm-M/I/L/O), so every glyph is exactly the icon's own. The caps
   are 56% of the icon's height and centred on it; the curtain and the footer
   sign-off use the same traced letters.
   ========================================================================= */
.logo { gap: 11px; align-items: center; }
/* the mark is inline SVG, so its own squircle carries the corners */
.logo_icon { width: 40px; height: 40px; display: block; flex: none; filter: drop-shadow(0 5px 10px rgba(2,91,28,.28)); }
/* the wordmark takes the icon's own green, so the logo reads as one object */
.logo_word { display: block; height: 22.4px; width: auto; aspect-ratio: 4418.8 / 1000; color: #025B1C; }
.footer .logo_word { color: var(--k-cream); }
.footer .logo_icon { filter: none; }
.intro_letters { gap: .1em; line-height: 1; }
.intro_letters svg, .footer_watermark svg { display: block; height: .72em; width: auto; }
.footer_watermark { display: flex; justify-content: center; gap: .1em; }
.footer_watermark i { font-style: normal; display: block; }
@media (max-width: 900px) {
  .logo { gap: 9px; }
  .logo_icon { width: 32px; height: 32px; }
  .logo_word { height: 18px; }
  .intro_letters { font-size: 21vw; }
}