/* =========================================================================
   Milo on this design. Loaded after styles.css, so it only says what is
   different: Milo's mark beside its wordmark, Milo's coins in the hero, the
   line that tells you what to text, and the wall of real messages.
   ========================================================================= */

/* the logo: the square mark, then the wordmark in whatever colour the bar is */
.nav_logo, .foot_logo { display: inline-flex; align-items: center; gap: 9px; }
.milo_mark { flex: none; border-radius: 22.5%; }
.milo_word { flex: none; }
.foot_logo { color: #fff; }
/* over the blue hero the wordmark is white, like the rest of the bar; on the white bar it is ink */
.nav_logo { color: var(--fg-primary); }
.nav.is-overlay .nav_logo { color: #fff; }

/* hero: the naira and the dollar, where two other countries' coins were */
.float--kenya > span { background-image: url(assets/img/milo-coin-dollar.svg); }
.float--ghana > span { background-image: url(assets/img/milo-coin-naira.svg); }

/* under each service: the words that start it */
.ask { display: flex; width: fit-content; max-width: 100%; margin-top: 14px; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 9999px; background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--fg-body); font-size: var(--t-sm, .9375rem); line-height: 1.3; letter-spacing: -.01em; }
.ask q { quotes: "“" "”"; color: var(--brand); font-weight: 600; }

/* the wall: what someone texts, and what happens next. Not a post by anyone. */
.tweet.say { gap: 10px; padding: 22px 24px; }
.say_when { color: #8b8f94; font-size: 14px; line-height: 20px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.tweet.say blockquote { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; white-space: normal; }
.say_then { color: #c9cdd2; font-size: 16px; line-height: 23px; }

/* the poster carries Milo's mark */
.poster_mark { border-radius: 22.5%; }
.faq_brand img { border-radius: 22.5%; }


/* the board behind the questions is plain: the pattern that was there was the old brand's own letter */
.faq_pattern { -webkit-mask: none; mask: none; background: transparent; }

/* the coin that drops in at the end is Milo's: same fall, same glint */
.cta-milo-glimmer { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-cta-coins="play"] .cta-coin-milo { transform-box: fill-box; transform-origin: 50%; animation: cta-coins-azza 4.6s linear both; }
  [data-cta-coins="play"] .cta-milo-glimmer { animation: cta-coins-glimmer 4.6s linear both; }
}

/* ───────────────────────── the phones ─────────────────────────
   Not screenshots: the conversation is drawn the way it looks in the real
   product (milo.js) inside Milo's own device (milo-chat.css). Each place
   sets --pw, the device's width, and everything inside scales from it. */
.mphone { flex: none; max-width: none; }
.ph_av { background: #0b7a2b; overflow: hidden; }
.ph_av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph_who b { display: flex; align-items: center; gap: .32em; }
.ph_notice { align-self: center; max-width: 94%; padding: .45em .8em; border-radius: .5em; background: #182823; color: #8ba69c; font-size: .72em; line-height: 1.3; text-align: center; }
.ph_code { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: .45em 0 .4em; padding: .5em .65em; border-radius: .45em; background: rgba(255, 255, 255, .08); color: #fff; font: 600 .95em/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.ph_code svg { flex: none; width: 1.05em; height: 1.05em; color: #8b9aa4; }
.ph_meta--cap { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .3em .35em 0 .45em; }
.ph_meta--cap > span:last-child { display: inline-flex; flex: none; align-items: center; gap: .28em; }
.ph_meta--cap > span:first-child { color: #e9edef; font-size: 1.38em; line-height: 1.25; font-weight: 500; }
.ph_msg--photo .ph_photo img { aspect-ratio: 300 / 232; object-fit: cover; }
.ph_msg--card { max-width: 76%; }
.ph_msg--card .ph_photo { background: none; }
.ph_msg--card .ph_photo img { aspect-ratio: auto; border-radius: .5em; }
.ph_bars_list { display: flex; flex-direction: column; gap: .32em; margin: .5em 0 .15em; }
.ph_bars_row { display: flex; justify-content: space-between; gap: 1em; font-size: .88em; }
.ph_bars_bar { height: 4px; overflow: hidden; border-radius: 2px; background: #2a3442; }
.ph_bars_bar i { display: block; height: 100%; border-radius: 2px; }
/* a voice note keeps its width, so the waveform has room to be one */
.ph_voice { width: 76%; }
.ph_voice_wave { min-width: 0; }

/* the conversation comes up one message at a time, like the real thing;
   what was already in the chat is simply there */
.mphone.is-armed .ph_thread > :not(.is-old) { opacity: 0; }
.mphone.is-in .ph_thread > :not(.is-old) { animation: msg-in .5s cubic-bezier(.22, 1, .3, 1) both; animation-delay: calc(var(--n, 0) * 300ms + 120ms); }
.mphone.is-in .ph_thread > .is-old { animation: none; }
@media (prefers-reduced-motion: reduce) { .mphone.is-armed .ph_thread > * { opacity: 1; } }

/* the services wheel: the whole phone shows, not its top half */
@media (min-width: 64rem) { .features_desk { align-items: center; } }
.stage { --stagew: min(518px, min(75rem, 100vw - 2 * var(--gutter)) * .4317); aspect-ratio: 518 / 792; }
.stage_phone { top: 0; left: 0; display: grid; place-items: center; width: 100%; height: 100%; }
.stage_phone .mphone { --pw: calc(var(--stagew) * .664); }
/* the same services as cards on a small screen */
.fcard_stage { height: auto; padding: 26px 0; overflow: clip; }
.fcard_stage .mphone { --pw: clamp(228px, 68vw, 284px); }
/* the three big cards: the phone is as tall as the fan */
.fan_phone { left: 71.2%; top: 0; width: auto; }
.deck_scroll .fan_phone .mphone { --fanw: min(100vw - 2 * var(--gutter), 81.25rem, (100dvh - var(--height-nav)) * 13 / 7); --pw: calc(var(--fanw) * .2477); }
.deck_fan .fan_phone .mphone { --fanw: min(100vw - 2 * var(--gutter), 81.25rem); --pw: calc(var(--fanw) * .2477); }

/* =========================================================================
   FROM milo.ng, IN THIS PAGE'S OWN DESIGN
   The hero, the logo and the buttons at milo.ng's size; its shine on the
   buttons; Personal and Business; the banks, currencies and countries; made
   for the way Nigeria pays; and the bar that keeps the button in reach.
   ========================================================================= */

/* the logo and the bar's button, as big as milo.ng's */
.nav_logo .milo_mark { width: 34px; height: 34px; }
.nav_logo .milo_word { width: 97px; height: 22px; }
@media (min-width: 64rem) { .nav_logo .milo_mark { width: 40px; height: 40px; } .nav_logo .milo_word { width: 115px; height: 26px; } }
.wa_ico { position: relative; z-index: 1; flex: none; width: 1.3em; height: 1.3em; color: #25d366; }
.nav_cta { gap: 9px; height: 54px; padding-inline: 20px 24px; font-size: 1.0625rem; font-weight: 700; }
/* the bar is 6px taller with that button in it, so the hero slides up under it by the same amount (no white line above the blue) */
@media (min-width: 30rem) { :root { --nav-h: 95px; } }
/* the bar is as wide as the page under it, so the logo and the button line up with every section's edges */
.nav_bar { --container-w: 75rem; }
.nav_left { align-items: center; gap: 28px; }
.nav_link, .nav_cta { white-space: nowrap; }
.nav_links { gap: 26px; }

/* the hero, as big as milo.ng's: the headline runs the width of the page in two lines */
.hero_copy { gap: 18px; max-width: 1280px; }
.hero_title--lg { font-size: min(clamp(5rem, .5rem + 11.2vw, 11.75rem), 20svh); }
.hero_title--lg > span { word-spacing: .14em; }
.hero_title--sm { font-size: min(100px, 25.2vw); }
.hero_sub { max-width: 660px; font-size: clamp(1.1875rem, 1.03rem + .7vw, 1.5rem); line-height: 1.34; font-weight: 600; }
.hero_cta { margin-top: 24px; }
.hero_cta .btn { gap: 12px; width: auto; height: 68px; padding-inline: 28px 36px; font-size: 1.3125rem; font-weight: 700; box-shadow: 0 18px 40px -18px rgba(5, 3, 70, .9); }
.hero_cta .wa_ico { width: 30px; height: 30px; }
/* what floats keeps clear of the bigger headline; the code to scan moves down out of its way */
.float--kenya { top: 112px; }
.float--notes-l { top: 108px; }
.qr--inline { display: none; }
@media (min-width: 64rem) { .qr--side { top: auto; bottom: 56px; } }

/* the buttons shine: a band of light glances across, and a few sparks twinkle at the edges */
.shine { position: relative; isolation: isolate; overflow: hidden; }
.shine > span { position: relative; z-index: 1; }
.shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .1) 55%, transparent 60%) no-repeat 200% 0 / 200% 100%; }
.glint { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: calc(10px * var(--s, 1)); aspect-ratio: 1; pointer-events: none; opacity: 0; background: #fff; -webkit-mask: var(--star) no-repeat center / contain; mask: var(--star) no-repeat center / contain; }
.shine { --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"); }

/* the banks, then one sentence for the money and the places */
.trust { padding: 52px 0 0; overflow: clip; background: #fff; text-align: center; }
.trust_label { color: #5c6066; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
.banks { margin-top: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.banks_row { display: flex; gap: 12px; width: max-content; padding: 4px 6px; }
.bank { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 11px; border: 1px solid #ececf1; border-radius: 9999px; background: #fff; color: var(--fg-primary); font-size: 1rem; line-height: 1; letter-spacing: -.01em; font-weight: 600; white-space: nowrap; }
.bank img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.trust_line { width: min(34rem, 100% - 2 * var(--gutter)); margin: 26px auto 0; color: var(--fg-primary); font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; }
@media (min-width: 64rem) { .trust { padding-top: 64px; } .trust_line { margin-top: 32px; font-size: 1.1875rem; } }

/* Your financial assistant: the seven things, and the phone showing the one chosen.
   No box around the list: big names on the page itself with a rule between each, the
   chosen one open with its sentence. The phone stands on a stage in the page's own
   blue, as tall as the list, so nothing is left empty. On a desk the chosen row's ring
   fills while its conversation plays, then the next opens; pointing at the list holds
   it, and choosing a row yourself stops the turning. On a phone the list is a row of
   names and nothing changes until one is tapped. */
.features_inner { gap: 22px; }
.feat { --dwell: 7.5s; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.feat_list { position: relative; display: flex; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.feat_list::-webkit-scrollbar { display: none; }
.feat_item { flex: none; }
.feat_item h3 { margin: 0; font: inherit; }
.feat_head { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 14px; overflow: hidden; border: 1px solid #e2e2e9; border-radius: 9999px; background: #fff; color: #3f434b; font-family: inherit; font-size: 1rem; line-height: 1; letter-spacing: -.015em; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
.feat_head:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.feat_ico { display: grid; flex: none; place-items: center; width: 20px; height: 20px; transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }
.feat_ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat_item.is-open .feat_head { border-color: var(--brand); background: var(--brand); color: #fff; }
.feat_ring, .feat_body { display: none; }
.feat_now p { color: #3f434b; font-size: 1.0625rem; line-height: 1.45; letter-spacing: -.015em; }
.feat_now .ask { display: none; }
.feat_stage { display: grid; place-items: center; padding: 22px 0; overflow: clip; border-radius: 24px; background: radial-gradient(120% 80% at 50% 0%, #5552f5 0%, var(--brand) 52%, #2925cf 100%); }
.feat_stage .mphone { --pw: min(100vw - 2 * var(--gutter) - 36px, 21rem); }
@media (min-width: 64rem) {
  .features_inner { gap: 40px; }
  .feat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 56px; }
  .feat_list { flex-direction: column; gap: 0; margin: 0; padding: 0; overflow: visible; border-bottom: 1px solid #e6e6ec; }
  .feat_item { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; border-top: 1px solid #e6e6ec; }
  .feat_head { display: flex; width: 100%; height: auto; gap: 18px; padding: 13px 4px; overflow: visible; border: 0; border-radius: 0; background: none; color: #74787f; font-size: 1.4375rem; letter-spacing: -.025em; text-align: left; }
  .feat_head:hover { color: var(--fg-primary); }
  .feat_ico { width: 46px; height: 46px; border-radius: 14px; background: #f1f1f5; color: #5c6066; }
  .feat_ico svg { width: 22px; height: 22px; }
  .feat_name { flex: 1; }
  .feat_item.is-open .feat_head { border: 0; background: none; color: var(--fg-primary); }
  .feat_item.is-open .feat_ico { background: var(--brand); color: #fff; }
  .feat_head:hover .feat_ico { color: var(--fg-primary); }
  .feat_item.is-open .feat_head:hover .feat_ico { color: #fff; }
  .feat_ring { display: block; flex: none; width: 26px; height: 26px; margin-right: 6px; rotate: -90deg; opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
  .feat_ring circle { fill: none; stroke: color-mix(in srgb, var(--brand) 15%, transparent); stroke-width: 2.5; }
  .feat_ring .feat_ring_run { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 69.12; stroke-dashoffset: 69.12; }
  .feat.is-running:not(.is-yours) .feat_item.is-open .feat_ring { opacity: 1; }
  .feat_body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
  .feat_body > div { min-height: 0; overflow: hidden; padding-inline: 68px 44px; }
  .feat_body > div::after { content: ""; display: block; height: 18px; }
  .feat_item.is-open .feat_body { grid-template-rows: 1fr; }
  .feat_body p { color: #5c6066; font-size: 1.0625rem; line-height: 1.5; letter-spacing: -.012em; }
  .feat_body .ask { margin-top: 12px; }
  .feat_now { display: none; }
  .feat_stage { padding: 40px clamp(48px, 6vw, 92px); border-radius: 28px; }
  .feat_stage .mphone { --pw: min(20rem, 25vw); }
}
@media (prefers-reduced-motion: no-preference) {
  .feat.is-running:not(.is-yours) .feat_item.is-open .feat_ring_run { animation: feat-ring var(--dwell) linear forwards; }
}
@media (hover: hover) { .feat_list:hover .feat_ring_run { animation-play-state: paused; } }
@keyframes feat-ring { to { stroke-dashoffset: 0; } }

/* the phones cast no shadow: nothing dark sits behind them */
.mphone { box-shadow: 0 calc(var(--pw) * .0022) 0 rgba(255, 255, 255, .55) inset, 0 calc(var(--pw) * -.0022) 0 rgba(0, 0, 0, .38) inset; }

/* The phones in daylight: WhatsApp as most people have it. Warm paper behind the
   chat, your messages in pale green, Milo's in white, every word dark and crisp, and
   a black edge to the glass. The words are the real product's; so is the look. */
.mphone { --bubble: #d9fdd3; }
.mphone::after { box-shadow: 0 0 0 calc(var(--pw) * .0045) #0c0c0e, 0 0 0 calc(var(--pw) * .008) rgba(0, 0, 0, .5); }
.mphone_screen { background: #f6f6f6; }
.ph_status { color: #111b21; }
.ph_bars, .ph_wifi { filter: invert(1); }
.ph_batt { background: #111b21; color: #fff; }
.ph_head { background: #f6f6f6; box-shadow: 0 1px 0 rgba(17, 27, 33, .09); }
.ph_back { background: #e6e7ea; color: #111b21; }
.ph_who b { color: #111b21; }
.ph_who span { color: #667781; }
.ph_tick { background-color: #d6e8ff; }
.ph_thread { background: #efe9e0; }
.ph_thread::before { opacity: .07; filter: invert(1); }
.ph_sys { background: #fff; color: #54656f; box-shadow: 0 1px .5px rgba(17, 27, 33, .13); }
.ph_notice { background: #fdf3c4; color: #54656f; }
.ph_msg { color: #111b21; box-shadow: 0 1px .5px rgba(17, 27, 33, .14); }
.ph_msg--out { background: var(--bubble); color: #111b21; }
.ph_msg--in { background: #fff; }
.ph_msg--in::after, .ph_msg--in::before { border-color: transparent #fff transparent transparent; }
.ph_meta, .ph_msg--in .ph_meta { color: #667781; }
.ph_checks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%2334b7f1' 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"); }
.ph_amount, .ph_list b { color: #111b21; }
.ph_acct { color: #027eb5; }
.ph_cta, .ph_btn { border-top-color: rgba(17, 27, 33, .1); color: #0a7cff; }
.ph_cta--green { color: #008069; }
.ph_doc_icon { background-color: rgba(0, 128, 105, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008069' 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"); }
.ph_doc_row i { color: #54656f; }
.ph_receipt { box-shadow: 0 1px .5px rgba(17, 27, 33, .14); color: #111b21; }
.ph_receipt span { border-top-color: #eceff1; }
.ph_receipt i, .ph_receipt em { color: #667781; }
.ph_code { background: #f0f2f5; color: #111b21; }
.ph_code svg { color: #667781; }
.ph_meta--cap > span:first-child { color: #111b21; }
.ph_photo { background: #dfe5e7; }
.ph_voice_play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2354656f'%3E%3Cpath d='M6 3.5 20 12 6 20.5z'/%3E%3C/svg%3E"); }
.ph_voice_wave i { background: #9dc3a6; }
.ph_voice_wave i:first-child { background: #34b7f1; }
.ph_voice_time { color: #667781; }
.ph_bars_bar { background: #e9edef; }
.ph_quote, .ph_msg--in .ph_quote { background: rgba(17, 27, 33, .06); }
.ph_quote span, .ph_msg--in .ph_quote span { color: #667781; }
.ph_dots { background: #fff; }
.ph_bar { background: #f6f6f6; }
.ph_bar_field { background: #fff; box-shadow: inset 0 0 0 1px #e3e5e8; }
.ph_home { background: #111b21; }

/* made for the way Nigeria pays: milo.ng's reel, with this page's blue for the message you send */
.everyday { overflow: clip; }
.everyday_head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.everyday_sub { max-width: 30rem; color: var(--fg-muted); font-size: var(--t-md); line-height: 1.35; letter-spacing: -.02em; }
.reel { --bubble: #3430e9; --brand: #3430e9; margin-top: 40px; }
.shot { border-radius: 20px; background: var(--sunken); }

/* on a phone the button follows the reader, as it does on milo.ng */
.chatdock { position: fixed; inset: auto 0 0; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); transform: translateY(110%); visibility: hidden; transition: transform .42s var(--ease-out), visibility 0s linear .42s; }
.chatdock.is-up { transform: none; visibility: visible; transition: transform .42s var(--ease-out), visibility 0s; }
.chatdock .btn { gap: 10px; width: 100%; max-width: 460px; height: 56px; font-size: 1.0625rem; font-weight: 700; }
.chatdock .wa_ico { width: 24px; height: 24px; }
.chatdock_note { color: #6b7280; font-size: 12.5px; line-height: 1.2; font-weight: 500; }
@media (min-width: 64rem) { .chatdock { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .shine::after { animation: shine-sweep 4.6s cubic-bezier(.42, 0, .3, 1) 1.2s infinite; }
  .glint { animation: twinkle 3.1s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .banks_row { animation: banks-slide 60s linear infinite; }
}
@keyframes shine-sweep { 0% { background-position: 200% 0; } 42%, 100% { background-position: -100% 0; } }
@keyframes banks-slide { to { transform: translate3d(-50%, 0, 0); } }
@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); }
}

/* ── One scale for the whole page ─────────────────────────────────────────────
   Every section used to bring its own sizes: titles at 32, 64, 80, 128 and 140px, text
   at 16, 17, 19, 20 and 24, gaps from 44 to 112. Now there is one size for a section's
   title, one for the line under it, one for running text and one gap between sections,
   each growing smoothly from a phone to a desk. Only the hero's headline is larger than
   a section title, and every title sits in the same place: centred, at the top. */
:root {
  --m-title: clamp(2.75rem, 1.86rem + 3.6vw, 5.25rem);     /* 44px on a phone, about 82px on a desk */
  --m-lead: clamp(1.0625rem, 1rem + .28vw, 1.25rem);       /* 17 to 20 */
  --m-body: clamp(1rem, .975rem + .1vw, 1.0625rem);        /* 16 to 17 */
  --m-gap: clamp(3rem, 2.2rem + 3.4vw, 5rem);              /* above and below every section: 48 to 80 */
}
.section { padding-block: var(--m-gap); }
.trust { padding-block: calc(var(--m-gap) * .8) 0; }
/* (the photo section's heading keeps the page's side margins: only its words are centred) */
.features_head { width: 100%; text-align: center; }
.everyday_head { text-align: center; }
.features_title, .said_title, .cta_title, .faq_heading {
  max-width: 17em; margin-inline: auto; color: var(--fg-primary); font-family: var(--font-display); text-transform: uppercase; text-align: center;
  font-size: var(--m-title); line-height: .95; letter-spacing: -.01em; font-weight: 600; text-wrap: balance;
}
/* the questions have one title like every other section: the same words, shown at every width, and not said twice */
.faq_heading { position: static; width: auto; height: auto; margin-block: 0; overflow: visible; clip-path: none; white-space: normal; }
.faq_title, .faq_brand { display: none; }
.faq_inner { --container-w: 75rem; gap: clamp(28px, 4vw, 44px); }
/* the three big cards' own headlines are no larger than a section's */
.fan_text h2 { font-size: min(max(2rem, 10.6667cqw), var(--m-title)); }
.dcard_text h2 { font-size: min(max(2rem, 18.9474cqw), var(--m-title)); }
/* the line under a title, and a card's paragraph */
.everyday_sub, .fan_text p, .dcard_text p, .cta_copy p, .trust_line { font-size: var(--m-lead); line-height: 1.4; }
.everyday_sub { max-width: 34rem; margin-inline: auto; }
.faq_q button { font-size: var(--m-lead); }
/* running text */
.trust_label, .feat_body p, .feat_now p, .faq_bubble { font-size: var(--m-body); }
/* the last call: room between the title and its line, and the same button as the first */
.cta_copy > div { gap: clamp(12px, 1.6vw, 20px); }
.cta_copy .btn--soft { gap: 12px; width: auto; height: 64px; padding-inline: 32px; background: #111; color: #fff; font-size: 1.1875rem; font-weight: 700; }
.cta_copy .btn--soft:focus-visible, .cta_copy .btn--soft:active { background: #2a2a2a; color: #fff; }

/* the features: the stage is never taller than the screen under the bar, so the phone is seen whole */
@media (min-width: 64rem) {
  .feat_stage { padding: clamp(22px, 4svh, 40px) clamp(44px, 6vw, 92px); }
  .feat_stage .mphone { --pw: min(20rem, 25vw, (100svh - 95px - 2 * clamp(22px, 4svh, 40px) - 36px) * .46); }
}
@media (min-width: 64rem) and (max-height: 820px) {
  .feat_head { gap: 14px; padding-block: 7px; font-size: 1.25rem; }
  .feat_ico { width: 40px; height: 40px; border-radius: 12px; }
  .feat_body > div { padding-inline: 58px 32px; }
  .feat_body > div::after { height: 12px; }
}
/* on a phone the demo fits between the bar at the top and the button at the bottom */
@media not all and (min-width: 64rem) {
  .feat_stage { padding: 18px 0; }
  .feat_stage .mphone { --pw: min(74vw, 19rem, (100svh - 84px - 96px - 44px) * .46); }
  .chatdock { gap: 0; padding-block: 10px calc(10px + env(safe-area-inset-bottom)); }
  .chatdock_note { display: none; }
}


/* ===== 12 Oct 2026, the owner: the cards more vibrant, the words in them way bigger, the phone way bigger, no
   WhatsApp marks; the two figures under the hero button ===== */
:root { --mint: #b8f598; --blush: #ffc2db; --lilac: #d7b4ff; }
.fan_text h2 { font-size: min(max(2.6rem, 12.6cqw), 8.5rem) !important; line-height: .92; }
.fan_text p { font-size: clamp(1.25rem, 2.35cqw, 1.9rem) !important; line-height: 1.3; font-weight: 600; max-width: 26ch; }
.dcard_text h2 { font-size: min(max(2.6rem, 21cqw), 6rem) !important; line-height: .92; }
.dcard_text p { font-size: clamp(1.2rem, 5.4cqw, 1.6rem) !important; line-height: 1.3; font-weight: 600; }
.deck_scroll .fan_phone .mphone, .deck_fan .fan_phone .mphone { --pw: calc(var(--fanw) * .31); }
.fan_phone { left: 64% !important; }
.ph_tick, .ph_notice, .ph_bar_plus, .ph_bar_ico--sticker { display: none !important; }
.hero_proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 22px; }
.hero_proof span { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 16px; border-radius: 9999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: clamp(.95rem, .9rem + .3vw, 1.125rem); font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero_proof b { font-weight: 800; }