/* =========================================================================
   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); }