/* =============================================================================
   Ulta marketing website
   =============================================================================
   Standalone: the website layout links THIS sheet only, not the app bundle.
   The Mini App's stylesheet is built around Telegram's --tg-theme-* variables
   and Tailwind's preflight; neither belongs on a public page, and keeping them
   apart means the marketing site can't be restyled by a change to the app.

   Theme: Paper (light) is the default and lives on bare :root. Night is only
   ever reached through prefers-color-scheme — there is no toggle, so a visitor
   gets the surface their OS already asked for.

   Fonts are self-hosted. Manrope is the display face in BOTH languages — it
   is Cyrillic-complete, so a Russian headline sets in the same voice as an
   English one rather than falling through to a second typeface. It comes from
   bin/vendor-manrope (shared with the app, which uses it for numerals); Plex
   Sans/Mono come from bin/vendor-fonts.
   ========================================================================== */

/* --- Display: Manrope, latin + cyrillic ---------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/manrope-latin-700-normal-777aa521.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/manrope-cyrillic-700-normal-2a5f1ef4.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/manrope-latin-800-normal-6de3e350.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/manrope-cyrillic-800-normal-73beac9d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Body: IBM Plex Sans, latin + cyrillic ------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-400-normal-64251e64.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-cyrillic-400-normal-d552caf5.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-500-normal-290aaea2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-cyrillic-500-normal-50810390.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-600-normal-99b2fa32.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-cyrillic-600-normal-343d5271.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* 700 exists for one reason: it is what Cyrillic display type resolves to. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-700-normal-8e5326da.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-cyrillic-700-normal-07015df4.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Labels: IBM Plex Mono ----------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-400-normal-d803141a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-cyrillic-400-normal-2101060c.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-latin-500-normal-3f7bbac1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-cyrillic-500-normal-d24ee299.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --surface: #f3f5ea;
  --surface-2: #e9ecdc;
  --ink: #0a0a0a;
  --muted: #666a5c;
  --rule: #dde0d0;
  --lime: #e7fc60;
  --lime-ink: #0a0a0a;

  /* The product family. Each colour means one thing and appears only there:
     sky = Ulta Mobile, violet = Ulta VPN, pink = offers, and the aura (all of
     them at once) = Ulta Global and the money CTAs. Everything else on the page
     stays ink, paper and lime — that restraint is what makes these read as
     signals rather than decoration.
     NOTE: the app track treats this :root block as the token source of truth. */
  --sky: #3db4ff;
  --violet: #7c5cff;
  --pink: #ff4fb8;
  --aura: conic-gradient(from 210deg, var(--lime), var(--sky), var(--violet), var(--pink), var(--lime));
  --ocean: rgba(10, 10, 10, .11);
  --land: #0a0a0a;

  --display: "Manrope", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f100c;
    --surface: #191b13;
    --surface-2: #22251a;
    --ink: #f2f4e8;
    --muted: #9ea391;
    --rule: #2b2e21;
    --ocean: rgba(242, 244, 232, .11);
    --land: #f2f4e8;
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 520px) { .wrap { padding: 0 20px; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Brandline ----------------------------------------------------------- */
.brandline {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding: 22px 0 12px;
}
.wordmark {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 9px;
}
.wordmark .dot {
  width: 13px; height: 13px; background: var(--lime);
  border: 1.5px solid var(--ink); border-radius: 3px; display: inline-block;
}
nav.top {
  display: flex; gap: 22px; align-items: center;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
nav.top a:hover { color: var(--ink); }
@media (max-width: 640px) {
  nav.top { gap: 14px; font-size: 11.5px; }
}

/* --- Calls to action ----------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--body);
  padding: 13px 18px; border-radius: 999px;
  border: 1.5px solid var(--ink); white-space: nowrap;
}
.cta svg { width: 18px; height: 18px; flex: none; }
.cta.primary { background: var(--lime); color: var(--lime-ink); }
.cta.ghost { background: transparent; color: var(--ink); }
.cta.small { font-size: 13px; padding: 9px 14px; }
.cta.small svg { width: 15px; height: 15px; }

/* --- Sections ------------------------------------------------------------ */
section.block {
  padding: 48px 0;
  display: flex; flex-direction: column; gap: 20px;
  border-top: 1px solid var(--rule);
}
h1 {
  font-family: var(--display); font-weight: 800;
  /* Capped at 86px, not the concept's 92px: beside a 520px globe the text
     column is 464px, and at 92px "Internet for travellers" no longer fits on
     two lines — it broke to four. 86px is the largest size that keeps the
     English headline at two lines, measured, not guessed. (Russian is four
     lines at any size in this column; it was four before the globe grew too.) */
  font-size: clamp(46px, 7vw, 86px); line-height: .96;
  letter-spacing: -0.03em; margin: 0; text-wrap: balance;
  /* break-word is the guarantee that nothing ever pushes the page sideways,
     whatever a future headline says. Hyphenation is Russian-only, below. */
  overflow-wrap: break-word;
}

/* Russian compounds are long — "путешественников" is 16 characters and does not
   fit a phone, or a desktop text column beside a 520px globe, at display size.
   Hyphenation breaks it the way Russian typesetting expects.
   Scoped to :lang(ru) deliberately: applied to everything, `text-wrap: balance`
   took it as licence to hyphenate ENGLISH headlines too, and the hero read
   "Internet / for trav- / ellers". English words are short enough that
   break-word alone never fires. */
h1:lang(ru) {
  hyphens: auto;
  /* Never strand a stub: at least 4 characters stay on each line, so the break
     is "путеше-ственников" rather than "пу-". */
  hyphenate-limit-chars: 8 4 4;
}

/* Phones only. Above this the concept's scale is untouched; below it, a fixed
   46px floor overflowed the viewport in Russian, so the headline tracks the
   screen instead of sitting on a floor that no longer fits. */
@media (max-width: 430px) {
  h1 { font-size: clamp(31px, 10vw, 46px); }
}
/* clone so a highlight that wraps gets its padding and radius on every line,
   not just the first. NOTE for the marked hero: at line-height .96 a <mark>'s
   background is taller than its line box, so a highlight on line 2 will clip
   line 1 — the headline needs more leading wherever a mark can wrap. */
h1 mark {
  background: var(--lime); color: var(--lime-ink);
  padding: 0 .12em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.03em;
  line-height: 1.08; margin: 0;
  display: flex; align-items: center; gap: 12px; text-wrap: balance;
}
h2 .emo { font-size: 26px; line-height: 1; }
.sub { color: var(--muted); margin: 0; max-width: 60ch; font-size: 15.5px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.note { font-size: 12.5px; color: var(--muted); font-family: var(--mono); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) {
  .grid3 { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
}

.box {
  background: var(--surface); border-radius: 8px; padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.box .emo { font-size: 34px; line-height: 1; height: 40px; display: flex; align-items: center; }
.box b { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.box p { margin: 0; font-size: 14.5px; color: var(--muted); }
.box .step {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.tile {
  background: var(--surface); padding: 18px 18px 16px; border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.tile .label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.tile .num {
  font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.tile .num small {
  font-family: var(--body); font-weight: 500; font-size: 15px;
  letter-spacing: 0; color: var(--muted); margin-left: 4px;
}
.tile .delta { font-size: 13.5px; color: var(--muted); }
.tile .delta b { color: var(--ink); font-weight: 600; }

.q {
  border: 1.5px solid var(--ink); border-radius: 8px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.q b { font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.q p { margin: 0; font-size: 14.5px; color: var(--muted); }

.band {
  background: var(--lime); color: var(--lime-ink);
  border: 1.5px solid var(--ink); border-radius: 10px; padding: 28px 30px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
.band h2 { color: var(--lime-ink); max-width: 26ch; }
.band .cta { background: #0a0a0a; color: #e7fc60; border-color: #0a0a0a; }
.band .eyebrow { color: rgba(10, 10, 10, .65); }

/* --- Footer -------------------------------------------------------------- */
footer.site {
  border-top: 2px solid var(--ink); margin-top: 24px; padding: 20px 0 60px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
footer.site b { color: var(--ink); font-weight: 500; }
footer.site a:hover { color: var(--ink); }
footer.site .links { display: flex; gap: 14px; flex-wrap: wrap; }
footer.site .lang { display: flex; gap: 8px; }
footer.site .lang a[aria-current="true"] {
  color: var(--lime-ink); background: var(--lime); padding: 0 6px; border-radius: 3px;
}

/* --- Long-form pages (legal, FAQ) ---------------------------------------- */
/* The terms, privacy and FAQ bodies are prose partials shared with the Mini
   App, so they arrive as bare h2/h3/p/ul with no classes. Style them by
   element inside .prose rather than editing partials the app also renders. */
.doc { padding: 40px 0 16px; max-width: 68ch; }
.doc > .eyebrow { display: block; margin-bottom: 10px; }
.doc h1 {
  font-size: clamp(32px, 5vw, 48px); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 24px;
}

.prose { font-size: 15.5px; line-height: 1.7; }
.prose h2 {
  display: block; font-size: 22px; margin: 32px 0 12px;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
}
.prose h3 {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; margin: 26px 0 8px;
}
.prose p { margin: 0 0 12px; color: var(--muted); }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; color: var(--muted); }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.prose th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }

/* FAQ topic index */
.topics { display: flex; flex-direction: column; gap: 8px; }
.topic {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 8px; background: var(--surface);
  color: var(--ink);
}
.topic:hover { background: var(--surface-2); }
.topic .emo { font-size: 24px; line-height: 1; flex: none; }
.topic .text { flex: 1; min-width: 0; }
.topic .title { display: block; font-weight: 600; font-size: 15px; }
.topic .subtitle { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.topic .chev { flex: none; width: 18px; height: 18px; color: var(--muted); }

.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
}
.backlink:hover { color: var(--ink); }
.backlink svg { width: 14px; height: 14px; }

/* --- Hero ---------------------------------------------------------------- */
/* W1 ships the plain editorial hero. The full treatment (globe, band) lands
   with the home page itself; this is the type-only baseline it builds on. */
.hero-lite {
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
  padding: 56px 0 48px;
}
@media (max-width: 860px) { .hero-lite { padding: 36px 0 32px; } }

.lede {
  font-size: 19px; line-height: 1.5; max-width: 46ch; margin: 0; color: var(--muted);
}
.lede b { color: var(--ink); font-weight: 600; }

/* --- Prose oddments shared with the Mini App ----------------------------- */
/* The legal partials open with an <h2> that repeats the page title we already
   render as the <h1> directly above it. The partials are shared with the Mini
   App, which has no <h1>, so drop the duplicate here rather than editing them. */
.doc .prose > h2:first-child { display: none; }

/* The FAQ topic partials mark iPhone/Android blocks up with these. */
.prose .device-section { margin: 14px 0 8px; }
.prose .device-label { font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* --- Ad landing ---------------------------------------------------------- */
/* One screen: the stage fills the viewport and the footer sits under it, so a
   phone shows the whole proposition without scrolling but the legal links are
   always one flick away (an ad reviewer will look for them). */
/* Grid, not a flex column: .wrap centres itself with `margin: 0 auto`, and an
   auto margin on a flex item cancels cross-axis stretch — which collapsed the
   whole page to the width of its own text. Grid rows stretch regardless. */
body.landing { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
body.landing .stage { display: flex; align-items: center; padding: 48px 0; }
/* Both wraps, the stage's and the footer's, are grid/flex items here — an
   explicit width is what keeps `margin: 0 auto` centring rather than shrinking. */
body.landing .wrap { width: 100%; }

.stage-inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  max-width: 34ch;
}
.stage-inner h1 { font-size: clamp(42px, 8vw, 76px); }
@media (max-width: 430px) { .stage-inner h1 { font-size: clamp(31px, 10vw, 76px); } }
.stage-inner .lede { font-size: 18px; max-width: 34ch; }
.stage-inner .note { max-width: 40ch; }

.wordmark.large { font-size: 30px; }
.wordmark.large .dot { width: 16px; height: 16px; }

.trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.trust li { display: flex; align-items: center; gap: 10px; }
.trust li span { font-size: 17px; font-family: var(--body); line-height: 1; }

@media (min-width: 861px) {
  .stage-inner { max-width: 46ch; }
  .stage-inner .lede { max-width: 42ch; }
  .trust { flex-direction: row; flex-wrap: wrap; gap: 8px 26px; }
}

/* --- The night band ------------------------------------------------------- */
/* Night as a PLACE, not a theme: the tokens are redefined on the band, so the
   band is dark on a paper page in light mode and simply stays dark in dark
   mode. Everything inside — including the globe, which reads --land and --ocean
   from computed style — follows without knowing where it is. */
.band-night {
  --bg: #0f100c;
  --surface: #191b13;
  --surface-2: #22251a;
  --ink: #f2f4e8;
  --muted: #9ea391;
  --rule: #2b2e21;
  /* A shade brighter than the page-level dark token: on the band the ocean
     dots are what make the sphere read as a sphere rather than as a scatter of
     land specks, so they have to stay faintly visible all the way to the limb. */
  --ocean: rgba(242, 244, 232, .14);
  --land: #f2f4e8;
  background: #0f100c;
  color: var(--ink);
  padding: 8px 0 20px;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  /* The globe gets the larger share: 1.12fr of a 1080 wrap lands it at ~520px
     at 1440, which is the size at which the dot matrix reads as a planet rather
     than a smudge. A ratio rather than a fixed 520px on purpose — between 861px
     and 1136px the wrap is still shrinking, and a fixed track would starve the
     headline. Measured against the worst case: the Russian H1's min-content is
     429px at its 92px cap, and the text column never drops below it because the
     headline is viewport-sized (7vw) everywhere the wrap is narrower. */
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 40px;
  align-items: center; padding: 56px 0 48px;
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 32px; }
}
.hero-text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.hero-text .eyebrow { margin: 0; }

h1 .wave {
  display: inline-block; width: .82em; height: .82em;
  vertical-align: -0.1em; margin-left: .1em;
}

/* The lede is Mael's second headline, so it carries the one highlight on the
   page. line-height 1.5 gives the <mark> room the H1 deliberately doesn't have. */
.lede mark {
  background: var(--lime); color: var(--lime-ink);
  padding: 0 .14em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.live {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: 14px; min-height: 40px;
}
.live .flag { font-size: 20px; line-height: 1; font-family: var(--body); }
.live mark { background: var(--lime); color: var(--lime-ink); padding: 0 5px; border-radius: 3px; }

/* --- The aura CTA -------------------------------------------------------- */
/* A black pill with the family's whole spectrum as a 3px ring, drawn by masking
   a conic gradient down to the border. On the night band the ring is the only
   thing separating a black button from a black background — it is structure,
   not ornament. */
.cta.aura {
  background: #0a0a0a; color: #ffffff; border-color: transparent;
  position: relative; z-index: 0;
}
.cta.aura::before {
  content: ""; position: absolute; inset: -3px; border-radius: 999px; padding: 3px;
  background: var(--aura);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: -1;
}
.cta.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --- Globe --------------------------------------------------------------- */
.globe-col { display: flex; justify-content: center; align-items: center; min-width: 0; }
.globe-wrap { position: relative; width: min(100%, 520px); aspect-ratio: 1; }
.globe-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.globe-wrap canvas:active { cursor: grabbing; }

.globe-label {
  position: absolute; left: 0; top: 0; transform: translate(-9999px, -9999px);
  display: grid; grid-template-columns: auto 1fr; gap: 1px 11px; align-items: center;
  background: var(--bg); border: 1.5px solid var(--ink); border-radius: 8px;
  padding: 9px 13px 9px 11px; pointer-events: none; will-change: transform;
  /* Never wider than the globe it sits on: the JS clamps the label inside the
     canvas using its own offsetWidth, which only works if that width is bounded
     by the container rather than by the longest Russian price string. */
  max-width: min(250px, 86%);
}
/* On desktop there is room for the price line to stay unbroken; the tight cap
   is a phone concession, where the label has to fit inside a 350px globe. */
@media (min-width: 861px) {
  .globe-label { max-width: 320px; }
  .globe-label .prices { white-space: nowrap; }
}
.globe-label[hidden] { display: none; }
.globe-label .flag { font-size: 25px; line-height: 1; grid-row: span 3; }
.globe-label b { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; line-height: 1.15; }
.globe-label small { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.35; }
.globe-label .count mark { background: var(--lime); color: var(--lime-ink); padding: 0 4px; border-radius: 3px; }

/* --- Where ultravellers went --------------------------------------------- */
.dest {
  display: grid; grid-template-columns: 30px 1fr auto 1fr;
  column-gap: 12px; row-gap: 10px; align-items: center;
  font-variant-numeric: tabular-nums;
}
.dest .hdr {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 4px;
}
.dest a { display: contents; }
.dest a:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.dest .flag { font-size: 22px; line-height: 1; }
.dest .name { font-size: 15.5px; }
.dest .nums { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-align: right; white-space: nowrap; }
.dest .nums b { color: var(--ink); font-weight: 500; }
.dest .dbar { height: 10px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.dest .dbar i { display: block; height: 100%; background: var(--ink); }
.dest .dbar i.top { background: var(--lime); border-right: 1.5px solid var(--ink); }
@media (max-width: 640px) {
  .dest { grid-template-columns: 26px 1fr auto; }
  .dest .dbar { display: none; }
  .dest .nums { font-size: 11.5px; white-space: normal; }
}

/* Bar widths as classes, because `style="width:42%"` is an inline style and the
   website's style-src is 'self'. A 5% ladder is finer than the eye reads. */
.dbar i.w-5   { width: 5%; }
.dbar i.w-10  { width: 10%; }
.dbar i.w-15  { width: 15%; }
.dbar i.w-20  { width: 20%; }
.dbar i.w-25  { width: 25%; }
.dbar i.w-30  { width: 30%; }
.dbar i.w-35  { width: 35%; }
.dbar i.w-40  { width: 40%; }
.dbar i.w-45  { width: 45%; }
.dbar i.w-50  { width: 50%; }
.dbar i.w-55  { width: 55%; }
.dbar i.w-60  { width: 60%; }
.dbar i.w-65  { width: 65%; }
.dbar i.w-70  { width: 70%; }
.dbar i.w-75  { width: 75%; }
.dbar i.w-80  { width: 80%; }
.dbar i.w-85  { width: 85%; }
.dbar i.w-90  { width: 90%; }
.dbar i.w-95  { width: 95%; }
.dbar i.w-100 { width: 100%; }

/* --- FAQ teaser ---------------------------------------------------------- */
a.q { color: var(--ink); }
a.q:hover { background: var(--surface); }

.box .emo .lot { width: 42px; height: 42px; }

/* --- The two coloured moments -------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

.offer, .global-card {
  border-radius: 10px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.offer h2, .global-card h2 { max-width: 18ch; }

/* Pink is the offer colour and appears nowhere else on the site. */
.offer { background: var(--pink); color: #0a0a0a; border: 1.5px solid var(--ink); }
.offer h2 { color: #0a0a0a; }
.offer .eyebrow { color: rgba(10, 10, 10, .68); }
.offer-body { margin: 0; font-size: 14.5px; color: rgba(10, 10, 10, .78); max-width: 34ch; }
.offer .cta.ink { background: #0a0a0a; color: #ffffff; border-color: #0a0a0a; }

/* Ulta Global wears the whole family as a ring — the product is all of them. */
.global-card { position: relative; background: var(--surface); border: 1.5px solid transparent; }
.global-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px; padding: 1.5px;
  background: var(--aura);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}