/*
 * The October 2026 redesign — the layer over style.css
 * =====================================================
 * Loaded only when the site's `redesign` switch is on (apps/api/src/siteFlags.ts). It carries the
 * boards' look (the ChatGPT pack's boards 01–10 and the three the owner sent on 18 Oct 2026): a cream
 * page, forest type, white cards with a faint line, sage for the suggested choice, peach for its small
 * badge and terracotta for the ONE main action of a screen. And the owner's note of 18 Oct 2026: the
 * apps adopt Apple's concentric corners, so nested shapes share one centre (inner radius = outer −
 * inset) and the sticky total floats as an island, not a bar glued to the edge.
 *
 * Everything here is additive: it styles the `.rd-*` classes the redesigned pages use and re-tunes
 * style.css's own tokens and components on `.rd` pages. Nothing in it touches the classic pages.
 */
:root {
  --rd-cream: #F6F4EC;
  --rd-cream-2: #EFECE2;
  --rd-cream-3: #F9F8F3;
  --rd-forest: #073D31;
  --rd-forest-ink: #0B2E27;
  --rd-sage: #EAF0EA;
  --rd-sage-2: #DCE6DC;
  --rd-sage-ink: #2F5D50;
  --rd-terracotta: #B65332;
  --rd-terracotta-ink: #9F452A;
  --rd-peach: #F5DFD1;
  --rd-peach-2: #FBEDE4;
  --rd-line: rgba(7, 61, 49, 0.12);
  --rd-line-strong: rgba(7, 61, 49, 0.28);
  --rd-muted: #4A5F58;
  --rd-white: #FFFFFF;
  --rd-ok: #2F7A4F;
  --rd-warn: #A8551F;
  /* Concentric corners: a child inset by P inside a radius-R box uses R − P. */
  --rd-r-card: 22px;
  --rd-r-card-lg: 28px;
  --rd-r-ctl: 12px;
  --rd-r-field: 14px;
  --rd-r-pill: 999px;
  --rd-pad-card: 22px;
  --rd-shadow: 0 1px 2px rgba(7, 61, 49, 0.04), 0 6px 20px rgba(7, 61, 49, 0.05);
  --rd-shadow-lift: 0 2px 4px rgba(7, 61, 49, 0.05), 0 14px 34px rgba(7, 61, 49, 0.10);
  /* Motion (pack 03): pressed 120 ms, controls 180 ms, panels 220 ms, ease-out, no bounce. */
  --rd-ease: cubic-bezier(.2, .8, .2, 1);
  --rd-t-press: 120ms;
  --rd-t-ctrl: 180ms;
  --rd-t-panel: 220ms;
  /* THE PAGE'S WIDTH (owner, 19 Oct 2026, night, from his ~910px-wide window: "make the website narrower so it never goes
     wider than the second screen"). Every redesigned page — header, hero, store, sections, footer — draws at most
     --page-max wide, centred; a wider window adds cream at the sides and nothing else. --rd-vw is the viewport unit the
     fluid sizes use, capped at the same width, so a page in a 1440 or 2560px window is exactly the page at 910px. Below
     910px both are the window's own, so nothing there changes. (The header's background still spans the window: its
     padding is measured on the real calc(50 * var(--rd-vw)).) */
  --page-max: 910px;
  --rd-vw: min(1vw, calc(var(--page-max) / 100));
  --rd-width: var(--page-max);
  --rd-gutter: 32px;
  --rd-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Manrope (SIL Open Font License, fonts/MANROPE-OFL.txt), one variable file per script, so a page loads
   only the alphabets it prints. Thai, Arabic, Devanagari, Gurmukhi and CJK keep the system's own faces. */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/app/fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/app/fonts/manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/app/fonts/manrope-cyrillic.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-display: swap; font-weight: 200 800; src: url(/app/fonts/manrope-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/app/fonts/manrope-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* ================================================================ base */
html.rd, body.rd { background: var(--rd-cream); }
body.rd, body.rd button, body.rd input, body.rd select, body.rd textarea { font-family: var(--rd-font); }
body.rd {
  color: var(--rd-forest-ink); font-size: 17px; line-height: 1.5; --font: var(--rd-font);
  --bg: var(--rd-cream); --ink: var(--rd-forest-ink); --muted: var(--rd-muted); --line: rgba(7, 61, 49, 0.14);
  --accent: var(--rd-forest); --accent-text: var(--rd-forest); --radius: var(--rd-r-field); --page: var(--rd-width);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.rd .wrap.shop, body.rd .wrap { max-width: var(--rd-width); --page: var(--rd-width); padding-left: var(--rd-gutter); padding-right: var(--rd-gutter); }
/* Phones: 16px each side, the same on both (owner's phone, 18 Oct 2026, evening). */
@media (max-width: 760px) { body.rd { --rd-gutter: 16px; --gutter: 16px; } }
.rd h1, .rd h2, .rd h3, .rd h4 { color: var(--rd-forest); letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.rd p { line-height: 1.55; }
.rd .rd-kicker { font-size: 15px; font-weight: 600; color: var(--rd-forest); margin: 0 0 14px; letter-spacing: 0; }
.rd .rd-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-sage-ink); margin: 0 0 14px; }
.rd .rd-muted { color: var(--rd-muted); }
.rd a.rd-text-link, .rd .rd-text-link { color: var(--rd-forest); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.rd a.rd-text-link:hover { text-decoration-thickness: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rd :focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }

/* buttons — one primary (terracotta) per screen, the rest outline or quiet */
.rd-btn, .rd-btn-outline, .rd-btn-dark, .rd-btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--rd-r-ctl); font: inherit; font-weight: 650; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: background-color var(--rd-t-ctrl) var(--rd-ease), border-color var(--rd-t-ctrl) var(--rd-ease), transform var(--rd-t-press) var(--rd-ease);
  white-space: nowrap;
}
.rd-btn { background: var(--rd-terracotta); color: #fff; border: 1.5px solid var(--rd-terracotta); }
.rd-btn:hover { background: var(--rd-terracotta-ink); border-color: var(--rd-terracotta-ink); }
.rd-btn-dark { background: var(--rd-forest); color: #fff; border: 1.5px solid var(--rd-forest); }
.rd-btn-dark:hover { background: #0B5241; }
.rd-btn-outline { background: var(--rd-white); color: var(--rd-forest); border: 1.5px solid var(--rd-line-strong); }
.rd-btn-outline:hover { border-color: var(--rd-forest); background: var(--rd-cream-3); }
.rd-btn-quiet { background: transparent; color: var(--rd-forest); border: 0; text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
.rd-btn:active, .rd-btn-outline:active, .rd-btn-dark:active { transform: translateY(1px); }
.rd-btn[disabled], .rd-btn-outline[disabled], .rd-btn-dark[disabled] { opacity: .5; cursor: not-allowed; }

/* the white card every board uses */
.rd-panel { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: clamp(20px, calc(3 * var(--rd-vw)), 30px); box-shadow: var(--rd-shadow); }
.rd-panel > h2:first-child, .rd-panel > h3:first-child { margin-top: 0; }
.rd-panel.rd-sage { background: var(--rd-sage); border-color: var(--rd-sage-2); box-shadow: none; }
.rd-panel.rd-peach { background: var(--rd-peach-2); border-color: var(--rd-peach); box-shadow: none; }

/* ================================================================ header (the boards) */
body.rd header.rd-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(20px, calc(3.4 * var(--rd-vw)), 48px);
  min-height: 72px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid transparent; box-shadow: none;
  padding-left: max(var(--rd-gutter), calc(50vw - var(--scrollbar, 0px) / 2 - var(--rd-width) / 2 + var(--rd-gutter)));
  padding-right: max(var(--rd-gutter), calc(50vw - var(--scrollbar, 0px) / 2 - var(--rd-width) / 2 + var(--rd-gutter)));
  background: color-mix(in srgb, var(--rd-cream) 90%, transparent);
  transition: border-color var(--rd-t-ctrl) var(--rd-ease);
}
body.rd header.rd-head > .logo { grid-column: 1; justify-self: start; }
body.rd header.rd-head .wordmark {
  /* THE EXISTING LOGO (owner, 18 Oct 2026, evening: the stacked mark — big "Flex", small "Lempart" under it on the right —
     not a typed "Lempart Flex"). The very file the classic header masks (style.css `.logo .wordmark`), at its own
     574:264, tinted forest: one logo in both looks, and a new logo is one file to swap (/app/brand-wordmark.png). */
  --h: 44px;
  display: block; height: var(--h); width: calc(var(--h) * 2.1742); aspect-ratio: auto; background: var(--rd-forest);
  -webkit-mask: url(/app/brand-wordmark.png) left center / contain no-repeat;
  mask: url(/app/brand-wordmark.png) left center / contain no-repeat;
}
body.rd header.rd-head > nav {
  grid-column: 2; justify-self: start; display: flex; align-items: center; gap: clamp(18px, calc(2.4 * var(--rd-vw)), 32px); flex-wrap: nowrap; min-width: 0;
}
body.rd header.rd-head nav a, body.rd header.rd-head nav a:hover, body.rd header.rd-head nav a.here, body.rd header.rd-head nav a.here:hover {
  border: 0; background: transparent; color: var(--rd-forest); font-weight: 500; font-size: 15px; padding: 10px 0; border-radius: 0;
  text-decoration: none; line-height: 1.2; order: 0;
}
body.rd header.rd-head nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
body.rd header.rd-head nav a.here { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
body.rd header.rd-head nav::after { display: none; }
body.rd header.rd-head .rd-menu-only { display: none; }
body.rd header.rd-head .rd-head-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(14px, calc(2 * var(--rd-vw)), 26px); }
body.rd header.rd-head .rd-my { color: var(--rd-forest); font-weight: 500; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; white-space: nowrap; padding: 10px 0; }
body.rd header.rd-head .rd-my.here, body.rd header.rd-head .rd-my:hover { text-decoration-thickness: 2px; }
/* EN · USD — the two existing controls (language, currency), shown as their codes in one quiet line. */
body.rd header.rd-head .pill-stack { display: inline-flex; flex-direction: row; align-items: center; gap: 0; }
body.rd header.rd-head .lang-code {
  border: 0; background: transparent; padding: 8px 2px; font-size: 14px; font-weight: 500; color: var(--rd-forest); gap: 6px; max-width: none; border-radius: 8px;
}
body.rd header.rd-head .lang-code[data-code] > .name, body.rd header.rd-head .lang-code[data-code] > .qualifier { display: none; }
body.rd header.rd-head .lang-code[data-code]::before { content: attr(data-code); }
body.rd header.rd-head .pill-stack > .lang-wrap:first-child .lang-code::after { display: none; }
body.rd header.rd-head .pill-stack > .lang-wrap + .lang-wrap::before { content: "·"; color: var(--rd-forest); padding: 0 6px; font-weight: 600; align-self: center; }
body.rd header.rd-head .lang-wrap:hover .lang-code { color: var(--rd-forest); text-decoration: underline; text-underline-offset: 4px; }
body.rd header.rd-head .lang-wrap:focus-within .lang-code { outline: 3px solid var(--rd-terracotta); outline-offset: 1px; }
body.rd header.rd-head .rd-menu-btn { display: none; }
/* lfFitHeader's two-line fallback is not wanted here: the redesign header has room by design. */
body.rd header.rd-head.tight { grid-template-columns: auto minmax(0, 1fr) auto; }
body.rd header.rd-head.tight > nav { justify-self: start; justify-content: flex-start; flex-wrap: nowrap; }
body.rd header.rd-head.tight > nav > a { order: 0; font-size: 15px; padding: 10px 0; }
body.rd header.rd-head.tight .lang-code { font-size: 14px; padding: 8px 2px; }

@media (max-width: 899px) {
  body.rd header.rd-head, body.rd header.rd-head.tight { grid-template-columns: auto minmax(0, 1fr); padding-top: 10px; padding-bottom: 10px; position: sticky; }
  body.rd header.rd-head .wordmark { --h: 38px; }
  body.rd header.rd-head .rd-head-end { grid-column: 2; gap: 12px; }
  body.rd header.rd-head .rd-my { font-size: 14px; }
  body.rd header.rd-head .rd-menu-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 0; background: transparent; border-radius: 12px; cursor: pointer; color: var(--rd-forest);
  }
  @media (hover: hover) { body.rd header.rd-head .rd-menu-btn:hover { background: var(--rd-sage); } }
  .rd-burger, .rd-burger::before, .rd-burger::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform var(--rd-t-ctrl) var(--rd-ease), opacity var(--rd-t-ctrl) var(--rd-ease); }
  .rd-burger::before, .rd-burger::after { content: ""; position: absolute; left: 0; }
  .rd-burger::before { top: -6px; }
  .rd-burger::after { top: 6px; }
  body.rd header.rd-head.rd-open .rd-burger { background: transparent; }
  body.rd header.rd-head.rd-open .rd-burger::before { transform: translateY(6px) rotate(45deg); }
  body.rd header.rd-head.rd-open .rd-burger::after { transform: translateY(-6px) rotate(-45deg); }
  /*
   THE MENU OPENS FROM ITS BUTTON (owner, 18 Oct 2026, night: it "opens in a random spot"). It is the header's own links in a
   card that grows down out of the ☰/✕ corner, the way the store field's list opens out of the field: anchored under the
   header, its outer edge on the button's outer edge (both on the page's gutter), a short scale-and-fade from that corner
   (none with reduced motion), the links left-aligned in one column in the header's link type. It was placed in the
   header's middle grid column (style.css `header > nav { grid-column: 2 }`), which an absolutely positioned grid child
   takes as its box — hence a narrow card in the middle with the words centred. Right to left, it opens from the left.
  */
  body.rd header.rd-head > nav {
    display: none; position: absolute; grid-column: auto; grid-row: auto; z-index: 40;
    top: calc(100% + 6px); inset-inline-end: var(--rd-gutter); inset-inline-start: auto;
    width: max-content; min-width: min(232px, calc(100% - 2 * var(--rd-gutter))); max-width: calc(100% - 2 * var(--rd-gutter));
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 8px;
    background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); box-shadow: var(--rd-shadow-lift);
    transform-origin: top right; outline: none;
  }
  html[dir="rtl"] body.rd header.rd-head > nav { transform-origin: top left; }
  body.rd header.rd-head.rd-open > nav { display: flex; animation: rd-menu-in 180ms var(--rd-ease) both; }
  body.rd header.rd-head > nav a, body.rd header.rd-head > nav a:hover, body.rd header.rd-head > nav a.here {
    font-size: 15px; font-weight: 500; line-height: 1.2; padding: 13px 16px; min-height: 44px; box-sizing: border-box;
    border-radius: calc(var(--rd-r-card) - 8px); text-decoration: none; text-align: start; white-space: nowrap; overflow: visible;
  }
  body.rd header.rd-head > nav a:hover, body.rd header.rd-head > nav a.here { background: var(--rd-sage); }
  /* The ring only for the keyboard: a tap opens the menu with the card itself focused (redesign.js), never a link. */
  body.rd header.rd-head > nav:focus, body.rd header.rd-head > nav:focus-visible { outline: none; }
  body.rd header.rd-head > nav a:focus:not(:focus-visible) { outline: none; }
  body.rd header.rd-head > nav a:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: -3px; }
  body.rd header.rd-head .rd-menu-only { display: block; }
}
@media (max-width: 380px) {
  body.rd header.rd-head .wordmark { --h: 34px; }
  body.rd header.rd-head .rd-head-end { gap: 8px; }
  body.rd header.rd-head .rd-my { font-size: 13.5px; }
}
@keyframes rd-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.rd header.rd-head.rd-open > nav { animation: none; } }
/* The language strip some pages print under the header stays, quieter. */
body.rd .langbar { background: var(--rd-white); border-color: var(--rd-line); }

/* ================================================================ footer */
body.rd footer.sitefoot { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rd-line); display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); grid-template-areas: "mark cols" "line line"; column-gap: 48px; }
body.rd footer.sitefoot > .footcols { grid-area: cols; }
body.rd footer.sitefoot > .footmark { grid-area: mark; margin: 0; align-self: start; }
body.rd footer.sitefoot > .footline { grid-area: line; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rd-line); }
body.rd .rd-foot-tag { margin: 10px 0 0; font-size: 14px; color: var(--rd-muted); max-width: 260px; }
@media (max-width: 760px) {
  body.rd footer.sitefoot { grid-template-columns: 1fr; grid-template-areas: "mark" "cols" "line"; row-gap: 28px; }
}
body.rd .footcol h3 { font-size: 12.5px; letter-spacing: .08em; color: var(--rd-sage-ink); font-weight: 700; }
body.rd .footcol a { color: var(--rd-forest-ink); font-size: 14.5px; }
body.rd .footmark { margin: 36px 0 14px; }
body.rd .footmark .wordmark {
  /* The same logo file as the header and as the classic footer. */
  --h: 56px; height: var(--h); width: calc(var(--h) * 2.1742); aspect-ratio: auto; background: var(--rd-forest); opacity: 1;
  -webkit-mask: url(/app/brand-wordmark.png) left center / contain no-repeat;
  mask: url(/app/brand-wordmark.png) left center / contain no-repeat;
}
body.rd .footline { font-size: 13px; color: var(--rd-muted); }

/* ================================================================ the cookie question, as an island */
body.rd .consent {
  max-width: 640px; border-radius: var(--rd-r-card); padding: 16px 16px 16px 22px; background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--rd-line); box-shadow: var(--rd-shadow-lift);
  display: flex; align-items: center; gap: 16px; color: var(--rd-forest-ink);
}
body.rd .consent p { margin: 0; flex: 1; font-size: 13.5px; }
body.rd .consent .consent-actions { flex: none; }
body.rd .consent .btn { min-width: 0; padding: 10px 18px; border-radius: calc(var(--rd-r-card) - 12px); }
@media (max-width: 600px) {
  body.rd .consent { flex-direction: column; align-items: stretch; padding: 16px; }
  body.rd .consent .consent-actions { justify-content: stretch; }
  body.rd .consent .btn { flex: 1; }
}

/* ================================================================ page heroes (every inner board) */
.rd-page-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px;
  min-height: clamp(300px, calc(33 * var(--rd-vw)), 440px); margin: 0;
}
.rd-page-hero .rd-hero-copy { position: relative; z-index: 1; padding: 28px 0; max-width: 560px; }
.rd-page-hero h1 { font-size: clamp(36px, calc(4.6 * var(--rd-vw)), 58px); line-height: 1.05; margin: 0 0 16px; }
.rd-page-hero .rd-lead { font-size: clamp(17px, calc(1.6 * var(--rd-vw)), 20px); color: var(--rd-forest-ink); margin: 0 0 22px; max-width: 520px; }
/* The picture stays INSIDE the page (owner, 18 Oct 2026, afternoon, on the help pages: "move it to the left and make
   it slightly fading … realigned with the entire page"): its right edge is the header's and the cards' right edge, it
   reaches a little under the words (its left side is the faded part), and every edge melts into the ivory. */
.rd-page-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.rd-page-hero .rd-hero-pic { position: relative; align-self: stretch; margin: 0 0 0 clamp(-56px, calc(-3 * var(--rd-vw)), -16px); min-height: 240px; }
.rd-page-hero .rd-hero-pic img, .rd-page-hero .rd-hero-pic picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.rd-page-hero .rd-hero-pic img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.rd-page-hero .rd-search { max-width: 460px; }
@media (max-width: 860px) {
  .rd-page-hero { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .rd-page-hero .rd-hero-copy { padding: 18px 0 8px; order: 2; }
  .rd-page-hero .rd-hero-pic { order: 1; margin: 0 calc(-1 * var(--gutter)); min-height: 0; height: 180px; }
  .rd-page-hero .rd-hero-pic img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%); -webkit-mask-composite: source-over; mask-image: linear-gradient(to top, transparent 0, #000 30%); mask-composite: add; }
}

/* a search field like the boards' (help, directory) */
.rd-search { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; background: var(--rd-white); border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-field); box-shadow: var(--rd-shadow); }
.rd-search:focus-within { border-color: var(--rd-forest); box-shadow: 0 0 0 3px rgba(7, 61, 49, 0.12); }
.rd-search svg { width: 20px; height: 20px; flex: none; color: var(--rd-forest); }
.rd-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--rd-forest-ink); padding: 12px 0; }
.rd-search input::placeholder { color: #6E7F79; }
.rd-search button { all: unset; cursor: pointer; font-weight: 650; color: var(--rd-forest); padding: 8px 6px; }

/* ================================================================ home hero (board 01/02) */
/* ONE FLUID HERO FROM 1440 DOWN TO 360 (owner, 18 Oct 2026, night: "make the slogan letters smaller and the picture
   smaller, gradually as the screen gets smaller; text and picture closer; they may overlap slightly — the letters may reach
   over the buildings and palm trees at the picture's left, but must never touch the woman herself"). The words left, the
   approved woman right, at every width — no jump at 760px; every size is a clamp() of the screen.
   The picture's width W (--rd-art-w) follows the screen's width (vw, so the page's gutter changing at 760px moves nothing). In the artwork (1280 × 1026) the woman starts 23% in from
   its left edge (her hair at x ≈ 295; her sleeve and bag further in) — before her are skyline and palms, faded under the
   words. The words may run over the first 19% of the picture (--rd-art-over) and stop there: at least 4% of W clear of
   her, at every width and in all eighteen languages (redesignHero.browser.test.ts measures the text's own lines against
   her box). Right to left, the grid mirrors and so does the picture, so she stays on the far side of the words.
   The words' block is not a box of its own here (display: contents): on a computer the kicker, the headline, the support
   line and the Trustpilot line with the app badges are the middle rows of the hero's grid, centred beside the picture (an
   empty row above and below takes up whatever height the picture has beyond them); on a phone see below. */
.rd-hero {
  --rd-art-w: clamp(140px, calc(calc(40.56 * var(--rd-vw)) + 4px), 600px);
  --rd-art-over: calc(var(--rd-art-w) * .19);
  display: grid; position: relative; padding: 0; align-items: start;
  grid-template-columns: [words-start] minmax(0, 1fr) [art-start] var(--rd-art-over) [words-end] calc(var(--rd-art-w) - var(--rd-art-over)) [art-end];
  grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
  /* Slightly compressed (owner, 18 Oct 2026, night, from a ~1000px-wide screen: the gaps above and below the hero were too
     big): both about half of what they were, still fluid — 42px above / 36px below at 1440, 27 / 16 at 1024, 17 / 12 at 761.
     Phones keep theirs exactly (10px above; below, the store's own 16px wins), so their first-screen rule is unchanged. */
  margin: clamp(10px, calc(calc(3.7 * var(--rd-vw)) - 11px), 42px) 0 clamp(0px, calc(calc(4.75 * var(--rd-vw)) - 33px), 36px);
}
/* On a computer the gap under the hero is the hero's own margin alone (the store's 22px used to win on tablets), never
   under 12px. */
@media (min-width: 761px) { .rd-hero { margin-bottom: clamp(12px, calc(calc(4.75 * var(--rd-vw)) - 33px), 36px); } .rd-hero + .rd-store { margin-top: 0; } }
.rd-hero > .rd-hero-words { display: contents; }
.rd-hero > .rd-hero-words > * { grid-column: words-start / words-end; position: relative; z-index: 1; min-width: 0; }
.rd-hero > .rd-hero-words > .rd-kicker { grid-row: 2; }
.rd-hero > .rd-hero-words > h1 { grid-row: 3; }
.rd-hero > .rd-hero-words > .rd-support { grid-row: 4; }
.rd-hero > .rd-hero-words > .rd-hero-more { grid-row: 5; margin: clamp(12px, calc(1.8 * var(--rd-vw)), 26px) 0 0; }
.rd-hero > .rd-hero-art { grid-column: art-start / art-end; grid-row: 1 / -1; align-self: center; position: relative; margin: 0; line-height: 0; pointer-events: none; }
.rd-hero-art picture { display: contents; }
.rd-hero-art img, .rd-hero-art .band-art { position: static; display: block; width: 100%; height: auto; max-width: none; object-fit: contain; margin: 0; border-radius: 0; }
.rd-hero-art img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 21%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 21%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%);
  mask-composite: intersect;
}
html[dir="rtl"] .rd-hero-art img { transform: scaleX(-1); }
.rd-hero h1 { font-size: clamp(26px, calc(13.3px + calc(3.52 * var(--rd-vw))), 64px); line-height: 1.1; margin: 0 0 clamp(6px, calc(1.1 * var(--rd-vw)), 16px); font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.rd-hero h1 .rd-underline { position: relative; white-space: nowrap; }
.rd-hero h1 .rd-underline::after { content: ""; position: absolute; left: -0.02em; right: -0.04em; bottom: -0.07em; height: 0.15em; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3 10 C 40 3, 90 2, 197 8' fill='none' stroke='%23B65332' stroke-width='4.5' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%; pointer-events: none; }
/* The kicker keeps the classic pages' sign in front of it: the small lime-and-forest dot (style.css .ed-hero .eyebrow). */
.rd-hero .rd-kicker { display: flex; align-items: center; gap: clamp(7px, calc(.7 * var(--rd-vw)), 10px); font-size: clamp(13px, calc(11px + calc(.56 * var(--rd-vw))), 19px); font-weight: 600; margin: 0 0 clamp(6px, calc(1.25 * var(--rd-vw)), 18px); letter-spacing: -0.005em; }
.rd-hero .rd-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: color-mix(in srgb, #D9FC57 62%, var(--rd-forest)); box-shadow: 0 0 0 4px rgba(217, 252, 87, .28); }
.rd-hero .rd-support { font-size: clamp(15px, calc(12.3px + calc(.74 * var(--rd-vw))), 23px); line-height: 1.35; color: var(--rd-forest-ink); margin: 0; letter-spacing: -0.01em; overflow-wrap: break-word; }
.rd-hero-more .rd-trust { margin: 0 0 26px; font-size: clamp(16px, calc(1.65 * var(--rd-vw)), 19px); }
.rd-hero-more .rd-trust a { font-weight: 500; text-underline-offset: 4px; }
.rd-hero-more .rd-badges, .rd-hero-more .rd-badges .store-buttons { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.rd-hero-more .rd-badges img { height: clamp(46px, calc(5 * var(--rd-vw)), 54px); width: auto; display: block; margin: 0; }
.rd-hero-more .rd-badges a { border-radius: 10px; display: inline-block; line-height: 0; }
/* The second copy of the line and the badges, after the store: phones only (below). */
.rd-hero-more-after { display: none; }
@media (min-width: 761px) and (max-width: 1100px) {
  .rd-hero-more .rd-badges img { height: 44px; }
}
/* PHONES (owner, 18 Oct 2026, evening: on a small screen "Where are you going?" must be on the first screen without
   scrolling; night: the picture stays, beside the words, the fluid sizes above). Below 761px the Trustpilot line and the
   badges run across the whole width under the words and the picture, then the store. Checked at 360 × 740, 375 × 667 and
   393 × 852 with the cookie question showing (redesignStore.browser.test.ts). */
@media (max-width: 760px) {
  /* Kicker, headline and support line beside the picture, centred against it; the Trustpilot line and the badges under
     both, across the whole width. */
  .rd-hero { grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto; }
  .rd-hero > .rd-hero-art { grid-row: 1 / 6; }
  .rd-hero > .rd-hero-words > .rd-hero-more { grid-column: words-start / art-end; grid-row: 6; }
  /* The Trustpilot line and the two badges sit ABOVE the panel (owner, 18 Oct 2026, evening): between the support line and
     "Where are you going?", the line on the headline's left edge, the badges centred as a pair. The copy after the store is
     not shown on phones any more; the whole field still fits the first screen with the cookie question (redesignStore test). */
  .rd-hero > .rd-hero-words .rd-hero-more { display: block; margin: 12px 0 0; }
  .rd-hero > .rd-hero-words .rd-hero-more .rd-trust { margin: 0 0 10px; font-size: 16px; text-align: start; }
  .rd-hero > .rd-hero-words .rd-hero-more .rd-badges, .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-buttons { justify-content: center; gap: 10px; }
  .rd-hero > .rd-hero-words .rd-hero-more .rd-badges img { height: 42px; }
  .rd-hero-more-after { display: none; }
  /*
   THE STORE AS ITS OWN PLACE (owner, 18 Oct 2026, evening, on his phone: "when the picture disappears, can you highlight
   somehow that region or separate it"). Below the pitch, the search sits in the apps' green "wall": a rounded sage panel
   with a hairline and a soft shadow, inset by the page's gutter. One left edge for everything — the headline, the
   panel, its heading, the "Popular destinations" label, the tiles, the Trustpilot line and the badges. The hint under
   the field said the placeholder again word for word, so on a phone it is kept for screen readers only.
  */
  .rd-hero + .rd-store { margin: 16px 0 0; padding: 18px 14px 16px; background: var(--rd-sage); border: 1px solid rgba(7, 61, 49, .10); border-radius: var(--rd-r-card); box-shadow: 0 1px 2px rgba(7, 61, 49, .04), 0 10px 26px rgba(7, 61, 49, .07); }
  .rd-hero + .rd-store > h2 { font-size: 22px; line-height: 1.2; margin: 0 0 12px; text-align: start; }
  .rd-hero + .rd-store .rd-combobox { max-width: none; }
  .rd-hero + .rd-store .rd-combobox .rd-field { box-shadow: 0 1px 2px rgba(7, 61, 49, .06); }
  .rd-hero + .rd-store .rd-combobox .rd-field input { font-size: 16px; }
  .rd-hero + .rd-store .rd-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .rd-hero + .rd-store .rd-popular-label { text-align: start; margin: 16px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-sage-ink); }
  /* The tiles as chips sized to their names, wrapping from the start edge: every name on ONE line beside its flag, in every
     language ("Соединённые Штаты", "Reino Unido", Arabic right to left) — a two-column grid broke the long ones in two. */
  .rd-hero + .rd-store .rd-popular { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 8px 0 0; max-width: none; }
  .rd-hero + .rd-store .rd-popular .rd-pop { justify-content: flex-start; text-align: start; white-space: nowrap; gap: 8px; padding: 8px 12px 8px 9px; font-size: 15px; line-height: 1.3; max-width: 100%; box-shadow: 0 1px 2px rgba(7, 61, 49, .05); }
  .rd-hero + .rd-store .rd-popular .rd-pop img { width: 24px; height: 18px; flex: none; }
  .rd-hero-more-after { text-align: start; margin: 22px 0 0; }
  .rd-hero-more-after .rd-badges, .rd-hero-more-after .rd-badges .store-buttons { justify-content: flex-start; }
}
/* A PHONE (560px and under): the picture is beside the headline only (the headline centred against it); the kicker runs
   across the top and the support line under both, each on the whole width (one line where the column beside her would
   take two), then the Trustpilot line and the badges — so the whole field stays on the first screen. */
@media (max-width: 560px) {
  .rd-hero { grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto; }
  .rd-hero > .rd-hero-words > .rd-kicker { grid-column: words-start / art-end; grid-row: 1; }
  .rd-hero > .rd-hero-art { grid-row: 2 / 5; }
  .rd-hero > .rd-hero-words > h1 { grid-row: 3; }
  .rd-hero > .rd-hero-words > .rd-support { grid-column: words-start / art-end; grid-row: 5; margin-top: 6px; }
  .rd-hero > .rd-hero-words > .rd-hero-more { grid-row: 6; }
}
/* A SHORT PHONE (iPhone SE 375 × 667, a small Android 360 × 740): with the picture beside it the headline takes a line more,
   and the longer languages (Russian, Ukrainian, Polish, Filipino) and their cookie question are taller still, so the picture
   is a little narrower (the headline's column a little wider), the headline 2px smaller, and the hero's spacing and line
   heights tighten until the whole search field is above the cookie question — nothing is dropped
   (redesignHero.browser.test.ts, all eighteen languages). */
@media (max-width: 760px) and (max-height: 760px) {
  .rd-hero { --rd-art-w: clamp(120px, calc(calc(34 * var(--rd-vw)) + 4px), 600px); }
  .rd-hero .rd-kicker { line-height: 1.25; margin-bottom: 4px; }
  .rd-hero h1 { font-size: clamp(24px, calc(11.3px + calc(3.52 * var(--rd-vw))), 64px); line-height: 1.05; margin-bottom: 4px; }
  .rd-hero .rd-support { line-height: 1.25; }
  .rd-hero > .rd-hero-words .rd-hero-more { margin-top: 8px; }
  .rd-hero > .rd-hero-words .rd-hero-more .rd-trust { margin-bottom: 6px; }
  .rd-hero + .rd-store { margin-top: 10px; padding-top: 12px; }
  .rd-hero + .rd-store > h2 { font-size: 20px; margin-bottom: 8px; }
}

/* ================================================================ the store (home + destination) */
.rd-store { margin: 22px auto 0; text-align: center; }
.rd-store > h2 { font-size: clamp(30px, calc(3.6 * var(--rd-vw)), 44px); margin: 0 0 18px; }
.rd-combobox { position: relative; max-width: 720px; margin: 0 auto; text-align: start; }
.rd-combobox label { display: block; font-size: 14px; color: var(--rd-muted); margin: 0 0 6px 4px; }
.rd-combobox .rd-field { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 8px 6px 18px; background: var(--rd-white); border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-field); box-shadow: var(--rd-shadow); transition: border-color var(--rd-t-ctrl) var(--rd-ease), box-shadow var(--rd-t-ctrl) var(--rd-ease); }
.rd-combobox .rd-field:focus-within { border-color: var(--rd-forest); box-shadow: 0 0 0 3px rgba(7, 61, 49, 0.12); }
.rd-combobox .rd-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; color: var(--rd-forest-ink); padding: 8px 0; }
.rd-combobox .rd-field input::placeholder { color: #6E7F79; }
/* Everything chosen sits inside the field and wraps there (owner, 18 Oct 2026, afternoon): the chips, then the one
   dashed "+ Add a country" (only its "+" once two countries are in), then room to type. */
.rd-field-box { position: relative; }
.rd-field-box > .rd-listbox { top: calc(100% + 6px); }
.rd-field-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0; }
.rd-field-main .rd-chip-host { display: contents; }
.rd-combobox .rd-field-main input { flex: 1 1 140px; }
.rd-combobox .rd-field.rd-has-chips .rd-field-main input { flex: 1 1 0px; min-width: 0; }
/* Room for the words only while something is typed — never on focus alone: a field that grew and shrank with the focus
   moved everything under it between a press and its release, and the press on "Change plan" landed on nothing. */
.rd-combobox .rd-field.rd-has-chips.rd-typing .rd-field-main input { flex-basis: 120px; min-width: 120px; }
.rd-chip { display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; min-height: 38px; padding: 4px 4px 4px 9px; font-size: 15.5px; background: var(--rd-sage); border-radius: 10px; font-weight: 600; color: var(--rd-forest); white-space: nowrap; flex: none; max-width: 100%; min-width: 0; }
.rd-chip-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rd-chip img, .rd-chip .flag { flex: none; width: 24px; height: 17px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(7, 61, 49, .08); }
.rd-chip .rd-ico { flex: none; }
.rd-chip button { all: unset; flex: none; cursor: pointer; width: 30px; height: 30px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--rd-forest); font-size: 17px; line-height: 1; }
.rd-chip button:hover { background: var(--rd-sage-2); }
.rd-chip button:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 0; }
.rd-add { all: unset; box-sizing: border-box; flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px 0 11px; border: 1px dashed var(--rd-line-strong); border-radius: 10px; color: var(--rd-forest); font-weight: 600; white-space: nowrap; transition: background-color var(--rd-t-ctrl) var(--rd-ease), border-color var(--rd-t-ctrl) var(--rd-ease); }
.rd-add .rd-ico { width: 18px; height: 18px; }
.rd-add:hover { background: var(--rd-sage); border-style: solid; }
.rd-add:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-add.rd-add-icon { width: 38px; padding: 0; }
@media (max-width: 600px) {
  /* A phone keeps the chips on as few lines as it can: each chip has its own ×, so the clear-all and the magnifier step aside. */
  .rd-combobox .rd-field { padding-left: 12px; gap: 6px; }
  .rd-combobox .rd-field.rd-has-chips > .rd-icon, .rd-combobox .rd-field.rd-has-chips > .rd-ctl.rd-clear { display: none; }
  .rd-chip { font-size: 15px; gap: 6px; padding-left: 8px; }
  .rd-chip button { width: 28px; height: 28px; }
  .rd-add { font-size: 15px; padding: 0 12px 0 9px; }
}
.rd-combobox .rd-icon { color: var(--rd-forest); width: 22px; height: 22px; flex: none; }
.rd-combobox .rd-ctl { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--rd-forest); font-size: 18px; flex: none; }
.rd-combobox .rd-ctl:hover { background: var(--rd-sage); }
.rd-combobox .rd-ctl.rd-toggle { border-left: 1px solid var(--rd-line); border-radius: 0 10px 10px 0; }
.rd-combobox .rd-help { font-size: 14px; color: var(--rd-muted); margin: 10px 0 0; text-align: center; }
.rd-listbox { position: absolute; left: 0; right: 0; top: calc(100% - 30px); z-index: 20; margin: 0; padding: 8px; list-style: none; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); box-shadow: var(--rd-shadow-lift); max-height: min(60vh, 440px); overflow: auto; }
.rd-listbox[hidden] { display: none; }
.rd-listbox .rd-group { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-muted); padding: 10px 12px 4px; font-weight: 700; }
.rd-listbox li[role="option"] { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: calc(var(--rd-r-card) - 8px); cursor: pointer; }
.rd-listbox li[role="option"][aria-selected="true"], .rd-listbox li[role="option"]:hover { background: var(--rd-sage); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-name { font-weight: 600; color: var(--rd-forest-ink); }
.rd-listbox li .rd-opt-sub { font-size: 13px; color: var(--rd-muted); margin-left: auto; text-align: right; white-space: nowrap; }
.rd-listbox li .flag { width: 28px; height: 20px; border-radius: 4px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(7, 61, 49, .08); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-ico { width: 22px; height: 22px; color: var(--rd-forest); flex: none; }
.rd-listbox .rd-empty { padding: 14px 12px; color: var(--rd-muted); }
.rd-listbox .rd-empty a { color: var(--rd-forest); }
/* The plans that cover every chosen country, at the top of the list; the cheapest wears the word. */
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover { align-items: center; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover .rd-opt-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-line { font-size: 13px; color: var(--rd-muted); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-price { flex: none; margin-left: auto; font-weight: 700; color: var(--rd-forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-tick { flex: none; width: 22px; text-align: center; color: var(--rd-forest); font-weight: 700; }
.rd-listbox li.rd-picked { box-shadow: inset 0 0 0 1.5px var(--rd-forest); }
.rd-cheapest { display: inline-block; background: var(--rd-peach); color: var(--rd-terracotta-ink); font-size: 12px; font-weight: 700; line-height: 1.2; padding: 3px 9px; border-radius: var(--rd-r-pill); white-space: nowrap; }
/* Popular destinations under an empty field (pack 01 §5 "a restrained set of existing popular destinations"). */
.rd-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px auto 0; max-width: 820px; }
.rd-popular[hidden] { display: none; }
.rd-popular .rd-pop { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-ctl); box-shadow: var(--rd-shadow); font-weight: 600; color: var(--rd-forest); transition: border-color var(--rd-t-ctrl) var(--rd-ease), transform var(--rd-t-press) var(--rd-ease); }
.rd-popular .rd-pop:hover { border-color: var(--rd-forest); }
.rd-popular .rd-pop:active { transform: translateY(1px); }
.rd-popular .rd-pop:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-popular .rd-pop img { width: 26px; height: 19px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(7, 61, 49, .08); }
.rd-popular .rd-pop small { font-weight: 500; color: var(--rd-muted); font-size: 13px; }
.rd-popular-label { font-size: 13px; color: var(--rd-muted); margin: 22px 0 0; letter-spacing: .02em; }
@media (max-width: 600px) {
  .rd-popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rd-popular .rd-pop { padding: 10px 10px; font-size: 15px; min-width: 0; }
  .rd-popular .rd-pop small { display: none; }
  .rd-popular .rd-pop:nth-child(n+7) { display: none; }
}
.rd-popular-label[hidden] { display: none; }
/* The smallest phones: one popular destination per row, so a long name ("Великобритания") never pushes the page sideways. */
@media (max-width: 360px) { .rd-popular { grid-template-columns: minmax(0, 1fr); } }
/* The row that used to hold the extra countries under the field stays empty: everything chosen is in the field. */
.rd-chosen:empty { display: none; }
/* Several countries, a plan picked in the field: whose trip it is, and the way back to the other plans. */
.rd-trip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; margin: 18px 0 0; font-size: 15.5px; font-weight: 600; color: var(--rd-forest); }
.rd-trip .rd-change { all: unset; cursor: pointer; color: var(--rd-forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; display: inline-flex; align-items: center; padding: 0 4px; }
.rd-trip .rd-change:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; border-radius: 6px; }
.rd-state.rd-state-short { padding: 14px 20px; }

/* tabs: a segmented control, concentric (outer 14, inset 4 → inner 10) */
.rd-tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 4px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: 14px; margin: 24px auto 0; min-width: min(100%, 380px); }
.rd-tabs [role="tab"] { all: unset; cursor: pointer; padding: 10px 26px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; color: var(--rd-forest); transition: background-color var(--rd-t-ctrl) var(--rd-ease), color var(--rd-t-ctrl) var(--rd-ease); }
.rd-tabs [role="tab"][aria-selected="true"] { background: var(--rd-forest); color: var(--rd-cream); }
.rd-tabs [role="tab"]:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-tabs [role="tab"][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.rd-days { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 18px 0 0; }
.rd-days .rd-days-label { font-size: 15px; color: var(--rd-forest-ink); margin-right: 6px; }
.rd-days button { all: unset; cursor: pointer; min-width: 48px; min-height: 44px; padding: 0 12px; box-sizing: border-box; display: inline-grid; place-items: center; background: var(--rd-white); border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-ctl); font-weight: 600; color: var(--rd-forest); font-variant-numeric: tabular-nums; transition: background-color var(--rd-t-ctrl) var(--rd-ease), color var(--rd-t-ctrl) var(--rd-ease), border-color var(--rd-t-ctrl) var(--rd-ease), transform var(--rd-t-press) var(--rd-ease); }
.rd-days button:hover { border-color: var(--rd-forest); }
.rd-days button:active { transform: translateY(1px); }
.rd-days button[aria-pressed="true"] { background: var(--rd-forest); color: var(--rd-cream); border-color: var(--rd-forest); }
.rd-days button:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-context { margin: 16px 0 0; font-size: 16px; font-weight: 700; color: var(--rd-forest); }
.rd-context .rd-muted { display: block; font-size: 13.5px; font-weight: 400; margin-top: 2px; }

/* the cards */
.rd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px auto 0; text-align: left; max-width: 1080px; }
.rd-cards.rd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.rd-cards.rd-one { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
.rd-card { position: relative; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: var(--rd-pad-card); display: flex; flex-direction: column; gap: 8px; min-height: 100%; box-sizing: border-box; box-shadow: var(--rd-shadow); transition: border-color var(--rd-t-ctrl) var(--rd-ease), box-shadow var(--rd-t-ctrl) var(--rd-ease); }
.rd-card:hover { box-shadow: var(--rd-shadow-lift); }
.rd-card.rd-suggested { background: linear-gradient(180deg, #EEF4EE 0%, #F4F8F3 100%); border-color: var(--rd-sage-2); }
.rd-card .rd-badge { position: absolute; top: 18px; right: 18px; background: var(--rd-peach); color: var(--rd-terracotta-ink); font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--rd-r-pill); }
.rd-card .rd-label { font-size: 18px; font-weight: 700; color: var(--rd-forest); margin: 0; padding-right: 96px; letter-spacing: -0.01em; }
.rd-card .rd-price { font-size: 40px; font-weight: 750; color: var(--rd-forest); line-height: 1; margin: 6px 0 0; min-height: 40px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rd-card .rd-term { font-size: 15px; color: var(--rd-forest-ink); margin: 0; }
/* Under the price: the place the plan is for; a bundle's name opens its page with this plan chosen (owner, 20 Oct 2026). */
.rd-card .rd-term.rd-place { font-size: 13.5px; color: var(--rd-muted); }
.rd-card .rd-place-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rd-card hr { border: 0; border-top: 1px solid var(--rd-line); margin: 10px 0 6px; }
.rd-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--rd-forest-ink); }
.rd-card ul li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
.rd-card ul li .rd-ico, .rd-ico { width: 20px; height: 20px; flex: none; color: var(--rd-forest); }
.rd-card ul li .rd-ico { margin-top: 0; }
.rd-card .rd-details { margin: 8px 0 4px; font-size: 15px; align-self: flex-start; }
.rd-card .rd-buy { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: var(--rd-r-ctl); border: 1.5px solid var(--rd-line-strong); color: var(--rd-forest); background: var(--rd-white); font-weight: 700; font-size: 16px; text-decoration: none; transition: background-color var(--rd-t-ctrl) var(--rd-ease), border-color var(--rd-t-ctrl) var(--rd-ease), transform var(--rd-t-press) var(--rd-ease); }
.rd-card .rd-buy:hover { border-color: var(--rd-forest); background: var(--rd-cream-3); }
.rd-card .rd-buy-short { display: none; } /* the phone's "Buy now" (the ≤760px block) */
.rd-card.rd-suggested .rd-buy { background: var(--rd-terracotta); border-color: var(--rd-terracotta); color: #fff; }
.rd-card.rd-suggested .rd-buy:hover { background: var(--rd-terracotta-ink); border-color: var(--rd-terracotta-ink); }
.rd-card .rd-buy:active { transform: translateY(1px); }
.rd-card .rd-buy:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 3px; }
.rd-card.rd-on { border-color: var(--rd-forest); box-shadow: 0 0 0 1.5px var(--rd-forest) inset, var(--rd-shadow-lift); }
@media (max-width: 900px) {
  .rd-cards, .rd-cards.rd-two, .rd-cards.rd-one { grid-template-columns: 1fr; max-width: 560px; gap: 14px; }
  /* A phone shows the card as the mobile board does: words left, the price and Buy right. */
  .rd-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price" "list term" "list buy" "details buy"; column-gap: 14px; row-gap: 6px; padding: 18px; }
  .rd-card .rd-label { grid-area: label; font-size: 17px; padding-right: 0; align-self: center; }
  .rd-card .rd-badge { position: static; justify-self: start; grid-area: label; margin-left: calc(100% - 0px); display: none; }
  .rd-card.rd-suggested .rd-label::after { content: attr(data-badge); margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--rd-terracotta-ink); background: var(--rd-peach); padding: 3px 8px; border-radius: 999px; vertical-align: 2px; }
  .rd-card .rd-price { grid-area: price; font-size: 28px; margin: 0; text-align: right; min-height: 0; }
  .rd-card .rd-term { grid-area: term; text-align: right; font-size: 14px; align-self: start; }
  .rd-card hr { display: none; }
  .rd-card ul { grid-area: list; gap: 8px; font-size: 14.5px; }
  .rd-card .rd-details { grid-area: details; margin: 4px 0 0; font-size: 14px; }
  .rd-card .rd-buy { grid-area: buy; align-self: end; min-height: 44px; padding: 0 14px; font-size: 15px; }
}
.rd-more { margin: 18px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rd-more a, .rd-more button { all: unset; cursor: pointer; color: var(--rd-forest); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
.rd-more a:focus-visible, .rd-more button:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; border-radius: 8px; }
.rd-more .rd-also { font-size: 14px; color: var(--rd-muted); }
.rd-quiet-links { display: flex; gap: 10px 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 16px 0 0; font-size: 15px; }
/* style.css narrows a section's own paragraphs (section > p, 68ch); a centred row of links is not a paragraph. */
section > p.rd-quiet-links { max-width: none; }
.rd-quiet-links a { color: var(--rd-forest); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 8px; }
.rd-quiet-links a .rd-ico { width: 18px; height: 18px; }
.rd-quiet-links .rd-sep { width: 1px; height: 22px; background: var(--rd-line-strong); }
.rd-note { font-size: 13.5px; color: var(--rd-muted); margin: 12px 0 0; }
.rd-state { padding: 40px 20px; color: var(--rd-muted); }
.rd-ip-explain { max-width: 720px; margin: 10px auto 0; text-align: left; }
.rd-ip-explain summary { cursor: pointer; color: var(--rd-forest); font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.rd-ip-explain summary::-webkit-details-marker { display: none; }
.rd-ip-explain p { font-size: 15px; color: var(--rd-forest-ink); background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: 16px 20px; margin: 6px 0 0; }

/* The floating island (owner, 18 Oct 2026: the apps adopt the Dynamic Island / Live Activity shape). */
.rd-island { position: sticky; bottom: 14px; z-index: 30; margin: 22px auto 0; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 8px 8px 22px; background: rgba(7, 61, 49, 0.94); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--rd-r-pill); box-shadow: 0 14px 34px rgba(7, 61, 49, 0.28); text-align: left; animation: rd-rise var(--rd-t-panel) var(--rd-ease) both; }
.rd-island .rd-island-words { display: grid; gap: 1px; min-width: 0; }
.rd-island .rd-island-words .rd-sel { font-size: 13px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-island .rd-island-words .rd-total { font-size: 19px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rd-island .rd-buy { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--rd-r-pill); background: var(--rd-terracotta); color: #fff; font-weight: 700; text-decoration: none; transition: background-color var(--rd-t-ctrl) var(--rd-ease), transform var(--rd-t-press) var(--rd-ease); }
.rd-island .rd-buy:hover { background: var(--rd-terracotta-ink); }
.rd-island .rd-buy:active { transform: translateY(1px); }
.rd-island .rd-buy:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rd-island[hidden] { display: none; }
@keyframes rd-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .rd-island { margin-left: 4px; margin-right: 4px; padding-left: 16px; }
  .rd-island .rd-island-words .rd-total { font-size: 17px; }
}

/* ================================================================ sections (home and inner pages) */
.rd-section { margin: 64px auto 0; }
/* A link to a part of a page (How it works #install …) lands with the heading in view, under a sticky header. */
body.rd section[id] { scroll-margin-top: 84px; }
@media (max-width: 760px) { .rd-section { margin-top: 44px; } }
.rd-section > h2, .rd-section-head h2 { font-size: clamp(28px, calc(3.2 * var(--rd-vw)), 38px); margin: 0 0 8px; line-height: 1.12; }
.rd-section .rd-lede { color: var(--rd-forest-ink); margin: 0 0 26px; font-size: 17px; max-width: 660px; }
.rd-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.rd-section-head .rd-lede { margin-bottom: 0; }
.rd-center { text-align: center; }
.rd-center .rd-lede { margin-left: auto; margin-right: auto; }

/* how it works — three steps with drawn icons. Each step is a door to the part of the How it works page that answers
   it, still looking like a step (owner, 18 Oct 2026, afternoon); a hairline with the arrow on it parts one step from
   the next ("some line in between … slightly differentiating each section"). */
.rd-steps { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr); gap: 0 6px; align-items: stretch; text-align: center; }
.rd-steps .rd-arrow { position: relative; display: grid; place-items: center; color: var(--rd-forest); }
.rd-steps .rd-arrow::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 1px; background: var(--rd-line-strong); opacity: .7; }
.rd-steps .rd-arrow > span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -54px; border-radius: 50%; background: var(--rd-cream); }
.rd-steps .rd-arrow svg { width: 26px; height: 26px; }
a.rd-step { display: block; color: inherit; text-decoration: none; padding: 18px 14px 20px; border-radius: var(--rd-r-card); transition: background-color var(--rd-t-ctrl) var(--rd-ease); }
a.rd-step:hover { background: var(--rd-cream-3); }
a.rd-step:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.rd-step:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-step .rd-step-ico { position: relative; width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%; background: var(--rd-sage); display: grid; place-items: center; color: var(--rd-forest); }
.rd-step .rd-step-ico svg { width: 42px; height: 42px; }
.rd-step .rd-num { position: absolute; top: -4px; left: -6px; width: 30px; height: 30px; border-radius: 50%; background: #DDE8DC; color: var(--rd-forest); display: grid; place-items: center; font-weight: 700; font-size: 15px; border: 3px solid var(--rd-cream); }
.rd-step h3 { margin: 0 0 6px; font-size: 21px; }
.rd-step p { margin: 0 auto; color: var(--rd-forest-ink); font-size: 15.5px; max-width: 250px; }
@media (max-width: 760px) {
  .rd-steps { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .rd-steps .rd-arrow { display: none; }
  a.rd-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 8px; border-radius: 14px; }
  a.rd-step + .rd-arrow + a.rd-step { border-top: 1px solid var(--rd-line); border-radius: 0; }
  .rd-step .rd-step-ico { width: 64px; height: 64px; margin: 0; grid-row: span 2; }
  .rd-step .rd-step-ico svg { width: 30px; height: 30px; }
  .rd-step p { margin: 0; max-width: none; }
}

/* picture + words */
.rd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, calc(4 * var(--rd-vw)), 56px); align-items: center; }
.rd-split .rd-split-pic img, .rd-split picture img, .rd-split > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rd-r-card-lg); display: block; box-shadow: var(--rd-shadow); }
.rd-split h2 { font-size: clamp(28px, calc(3.2 * var(--rd-vw)), 40px); line-height: 1.1; margin: 0 0 14px; }
.rd-split .rd-lede { font-size: 18px; color: var(--rd-forest-ink); margin: 0 0 18px; }
@media (max-width: 860px) { .rd-split { grid-template-columns: 1fr; } }

/* questions — the boards' bordered rows */
.rd-faq .rd-faq-list { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); overflow: hidden; box-shadow: var(--rd-shadow); }
.rd-faq details { border-top: 1px solid var(--rd-line); }
.rd-faq details:first-child { border-top: 0; }
.rd-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 16.5px; color: var(--rd-forest); min-height: 44px; }
.rd-faq summary:hover { background: var(--rd-cream-3); }
.rd-faq summary::-webkit-details-marker { display: none; }
.rd-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--rd-forest); border-bottom: 2px solid var(--rd-forest); transform: translateY(-3px) rotate(45deg); transition: transform var(--rd-t-ctrl) var(--rd-ease); }
.rd-faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rd-faq.rd-plus summary::after { content: "+"; width: auto; height: auto; border: 0; transform: none; font-size: 24px; font-weight: 400; line-height: 1; }
.rd-faq.rd-plus details[open] summary::after { transform: rotate(45deg); }
.rd-faq details > :not(summary) { margin: 0; padding: 0 22px 18px; color: var(--rd-forest-ink); font-size: 15.5px; max-width: 820px; }
/* An open answer reads apart from its question (owner, 18 Oct 2026, afternoon: "when you open a question, it has to
   be … a contrast … it's all like one color"): the question keeps the forest ink on white with a hairline under it,
   the answer sits on its own soft tint in the quieter ink, and ends with the way to How it works. */
.rd-faq details[open] > summary { border-bottom: 1px solid var(--rd-line); }
.rd-faq details[open] > :not(summary) { max-width: none; background: #F3F6F1; padding-top: 16px; }
.rd-faq details[open] > :not(summary) p, .rd-faq details[open] > p { color: #3D564E; }
.rd-faq .rd-answer > p { max-width: 820px; }
.rd-faq .rd-answer > p.rd-faq-more { margin: 4px 0 0; }
.rd-faq .rd-faq-more a { color: var(--rd-forest); font-size: 15px; }

/* help strip — "Need a hand?" / "Still need help" / "Still have questions?" */
.rd-help-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--rd-peach-2); border: 1px solid var(--rd-peach); border-radius: var(--rd-r-card-lg); padding: 26px 30px; }
.rd-help-strip .rd-help-words { display: flex; align-items: center; gap: 18px; }
.rd-help-strip .rd-help-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--rd-peach); display: grid; place-items: center; color: var(--rd-terracotta-ink); flex: none; }
.rd-help-strip .rd-help-ico svg { width: 26px; height: 26px; }
.rd-help-strip h3 { margin: 0 0 3px; font-size: 21px; color: var(--rd-forest); }
.rd-help-strip p { margin: 0; color: var(--rd-forest-ink); font-size: 15.5px; }
@media (max-width: 600px) {
  /* A long button in a long language ("Відвідати довідковий центр") wraps instead of pushing the page sideways. */
  .rd-help-strip { padding: 22px 20px; }
  .rd-help-strip .rd-btn-outline { white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; }
}
.rd-help-strip.rd-plain { background: var(--rd-white); border-color: var(--rd-line); box-shadow: var(--rd-shadow); }
.rd-help-strip.rd-plain .rd-help-ico { background: var(--rd-sage); color: var(--rd-forest); }
.rd-help-strip.rd-scene { position: relative; overflow: hidden; min-height: 170px; background: var(--rd-cream-2); border-color: var(--rd-line); }
.rd-help-strip.rd-scene .rd-scene-pic { position: absolute; inset: 0 0 0 40%; }
.rd-help-strip.rd-scene .rd-scene-pic img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
.rd-help-strip.rd-scene > :not(.rd-scene-pic) { position: relative; }
.rd-help-strip.rd-scene h3 { font-size: clamp(24px, calc(2.6 * var(--rd-vw)), 30px); }

/* quick paths — the three cards with an icon, a title, a line and a chevron (help, contact) */
.rd-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rd-path { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 18px 18px 18px 18px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); box-shadow: var(--rd-shadow); text-decoration: none; color: var(--rd-forest-ink); transition: border-color var(--rd-t-ctrl) var(--rd-ease), box-shadow var(--rd-t-ctrl) var(--rd-ease); }
.rd-path:hover { border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow-lift); }
.rd-path .rd-path-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--rd-sage); display: grid; place-items: center; color: var(--rd-forest); }
.rd-path .rd-path-ico svg { width: 24px; height: 24px; }
.rd-path strong { display: block; font-size: 16.5px; color: var(--rd-forest); margin-bottom: 2px; }
.rd-path span.rd-path-sub { display: block; font-size: 14px; color: var(--rd-muted); line-height: 1.4; }
.rd-path .rd-chev { width: 10px; height: 10px; border-right: 2px solid var(--rd-forest); border-bottom: 2px solid var(--rd-forest); transform: rotate(-45deg); justify-self: center; }
.rd-paths.rd-stack { grid-template-columns: 1fr; }
@media (max-width: 860px) { .rd-paths { grid-template-columns: 1fr; } }

/* topic cards (help) */
.rd-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rd-topic { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: 20px 20px 18px; box-shadow: var(--rd-shadow); display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
.rd-topic .rd-topic-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--rd-forest); }
.rd-topic .rd-topic-ico svg { width: 28px; height: 28px; }
.rd-topic h3 { margin: 8px 0 8px; font-size: 17px; }
.rd-topic ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.rd-topic ul a { color: var(--rd-muted); text-decoration: none; font-size: 14.5px; line-height: 1.5; }
.rd-topic ul a:hover { color: var(--rd-forest); text-decoration: underline; }
.rd-topic .rd-all { font-size: 14px; }
.rd-topic > :not(.rd-topic-ico) { grid-column: 2; }
@media (max-width: 960px) { .rd-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rd-topics { grid-template-columns: 1fr; } }

/* forms (contact, find my eSIM) */
.rd-form { display: grid; gap: 16px; }
.rd-form label, .rd-form .rd-label-line { display: block; font-weight: 600; font-size: 15px; color: var(--rd-forest); margin: 0 0 6px; }
.rd-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), .rd-form select, .rd-form textarea {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--rd-forest-ink);
  background: var(--rd-white); border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-ctl); outline: 0;
  transition: border-color var(--rd-t-ctrl) var(--rd-ease), box-shadow var(--rd-t-ctrl) var(--rd-ease);
}
.rd-form textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.rd-form input:focus, .rd-form select:focus, .rd-form textarea:focus { border-color: var(--rd-forest); box-shadow: 0 0 0 3px rgba(7, 61, 49, 0.12); }
.rd-form .rd-hint { font-size: 13.5px; color: var(--rd-muted); margin: 6px 0 0; }
.rd-form .rd-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 620px) { .rd-form .rd-row2 { grid-template-columns: 1fr; } }
.rd-alert { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--rd-r-ctl); border: 1px solid; }
.rd-alert .rd-alert-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; }
.rd-alert strong { display: block; font-size: 15px; }
.rd-alert p { margin: 2px 0 0; font-size: 14px; }
.rd-alert.rd-ok { background: #EEF5EE; border-color: #CFE2D1; color: var(--rd-forest-ink); }
.rd-alert.rd-ok .rd-alert-ico { background: var(--rd-ok); }
.rd-alert.rd-bad { background: #FBEDE8; border-color: #F1CFC3; color: #6B2A16; }
.rd-alert.rd-bad .rd-alert-ico { background: var(--rd-terracotta); }
.rd-alert.rd-info { background: var(--rd-cream-2); border-color: var(--rd-line); color: var(--rd-forest-ink); }
.rd-alert.rd-info .rd-alert-ico { background: transparent; color: var(--rd-forest); }

/* two columns: main + aside (contact, checkout, order) */
.rd-two-col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .rd-two-col { grid-template-columns: 1fr; } }


/* the store while a new destination loads: the old cards stay, dimmed, and cannot be bought */
.rd-results.rd-loading { opacity: .45; pointer-events: none; transition: opacity var(--rd-t-ctrl) var(--rd-ease); }

/* ================================================================ selected plan details (destination page) */
.rd-plan-facts { margin: 56px auto 0; max-width: 1080px; }
.rd-plan-facts[hidden] { display: none; }
.rd-plan-facts > h2 { font-size: clamp(24px, calc(2.6 * var(--rd-vw)), 30px); margin: 0 0 4px; }
.rd-plan-facts .rd-for { margin: 0 0 16px; }
.rd-facts { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); box-shadow: var(--rd-shadow); overflow: hidden; }
.rd-fact { display: grid; grid-template-columns: 44px minmax(140px, 220px) minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 22px; border-top: 1px solid var(--rd-line); }
.rd-fact:first-child { border-top: 0; }
.rd-fact .rd-fact-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--rd-sage); display: grid; place-items: center; color: var(--rd-forest); }
.rd-fact .rd-fact-ico .rd-ico { width: 20px; height: 20px; }
.rd-fact .rd-fact-k { font-weight: 700; color: var(--rd-forest); padding-top: 9px; }
.rd-fact .rd-fact-v { padding-top: 9px; color: var(--rd-forest-ink); font-size: 15.5px; }
.rd-fine { font-size: 13.5px; color: var(--rd-muted); margin: 6px 0 0; line-height: 1.45; }
.rd-nets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rd-nets li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.rd-coverage { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--rd-line-strong); border-radius: 10px; color: var(--rd-forest); font-weight: 600; font-size: 14px; text-decoration: none; background: var(--rd-white); }
.rd-coverage:hover { border-color: var(--rd-forest); }
.rd-coverage .rd-ico { width: 15px; height: 15px; }
@media (max-width: 700px) {
  .rd-fact { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; }
  .rd-fact .rd-fact-v { grid-column: 2; padding-top: 0; }
}


/* ================================================================ destination page, under the plans */
.rd-dest-store { margin-top: 48px; }
.rd-dest-store > .rd-center h2 { font-size: clamp(28px, calc(3.2 * var(--rd-vw)), 38px); margin: 0 0 6px; }
.rd-dest-store > .rd-center .rd-lede { margin-bottom: 0; }
.rd-dest-store .rd-store { margin-top: 4px; }
.rd-card.rd-asked { box-shadow: 0 0 0 2px var(--rd-terracotta) inset, var(--rd-shadow-lift); }
/* bundles that include this destination */
.rd-bundles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rd-bundle { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 16px 18px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); box-shadow: var(--rd-shadow); text-decoration: none; color: var(--rd-forest-ink); }
.rd-bundle:hover { border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow-lift); }
.rd-bundle .rd-bundle-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--rd-sage); color: var(--rd-forest); display: grid; place-items: center; }
.rd-bundle .rd-bundle-ico svg { width: 22px; height: 22px; }
.rd-bundle strong { display: block; color: var(--rd-forest); font-size: 16px; }
.rd-bundle .rd-path-sub, .rd-path .rd-path-sub { display: block; font-size: 14px; color: var(--rd-muted); line-height: 1.4; }
.rd-chev { width: 9px; height: 9px; border-right: 2px solid var(--rd-forest); border-bottom: 2px solid var(--rd-forest); transform: rotate(-45deg); justify-self: center; }
/* a bundle's countries, searchable */
.rd-country-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.rd-country-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--rd-forest-ink); text-decoration: none; }
.rd-country-list a:hover { background: var(--rd-sage); }
.rd-country-list .flag, .rd-country-list img { width: 26px; height: 19px; border-radius: 4px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(7, 61, 49, .08); }
.rd-country-list li[hidden] { display: none; }
/* the hero's own "See All Plans" leads to the store on a redesigned destination page */
body.rd .ed-hero .cta { border-radius: var(--rd-r-ctl); }


/* ================================================================ Destinations & plans (board 08, left) */
.rd-page-hero .rd-eyebrow { margin-bottom: 12px; }
.rd-store-nav { margin: 0; text-align: left; max-width: 480px; }
.rd-store-nav .rd-combobox { max-width: none; margin: 0; }
.rd-store-nav .rd-combobox .rd-field { min-height: 54px; }
.rd-store-nav .rd-combobox .rd-field input { font-size: 16px; }
.rd-store-nav .rd-listbox { top: calc(100% + 6px); }
.rd-facts-row { list-style: none; margin: 34px 0 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); }
.rd-facts-row li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 15px; color: var(--rd-forest-ink); padding: 0 10px; }
.rd-facts-row li + li { border-left: 1px solid var(--rd-line); }
.rd-facts-row .rd-fact-mark { width: 34px; height: 34px; color: var(--rd-forest); }
.rd-facts-row .rd-fact-mark svg { width: 34px; height: 34px; }
@media (max-width: 760px) {
  .rd-facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .rd-facts-row li:nth-child(3) { border-left: 0; }
}
.rd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rd-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pic pic" "words arrow"; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); overflow: hidden; box-shadow: var(--rd-shadow); text-decoration: none; color: var(--rd-forest-ink); transition: box-shadow var(--rd-t-ctrl) var(--rd-ease), transform var(--rd-t-ctrl) var(--rd-ease); }
.rd-tile:hover { box-shadow: var(--rd-shadow-lift); }
.rd-tile:active { transform: translateY(1px); }
.rd-tile .rd-tile-pic { grid-area: pic; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rd-cream-2); }
.rd-tile .rd-tile-pic img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.rd-tile .rd-tile-words { grid-area: words; padding: 14px 16px 16px; display: grid; gap: 2px; }
.rd-tile .rd-tile-words strong { font-size: 17px; color: var(--rd-forest); }
.rd-tile .rd-tile-words span { font-size: 14px; color: var(--rd-muted); }
.rd-tile .rd-tile-arrow { grid-area: arrow; align-self: center; padding: 0 18px; color: var(--rd-forest); font-size: 18px; }
@media (max-width: 860px) { .rd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rd-tile .rd-tile-words strong { font-size: 15.5px; } .rd-tile .rd-tile-arrow { padding: 0 12px; } }
.rd-all-head { font-size: clamp(26px, calc(3 * var(--rd-vw)), 34px); margin: 72px 0 0; }
/* today's directory, under the new top: the same tabs, search, grid and bundles, in the boards' clothes */
body.rd .rd-directory .seg { display: inline-grid; grid-auto-flow: column; padding: 4px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: 14px; gap: 0; }
body.rd .rd-directory .seg button { border-radius: 10px; padding: 10px 22px; font-weight: 600; border: 0; background: transparent; color: var(--rd-forest); }
body.rd .rd-directory .seg button.on { background: var(--rd-forest); color: var(--rd-cream); }
/* Popular · Countries · Regions · Global right under the four facts (owner, 19 Oct 2026); Popular's two sections start at the tabs. */
body.rd .rd-directory .rd-dir-tabs button:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
body.rd .rd-directory #pane-popular > .rd-section:first-child { margin-top: 0; }
@media (max-width: 760px) {
  /* A phone: the four tabs share the full width, none wider than its word needs; a long language scrolls inside the bar, never the page. */
  body.rd .rd-directory .seg.rd-dir-tabs { display: flex; width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
  body.rd .rd-directory .seg.rd-dir-tabs::-webkit-scrollbar { display: none; }
  body.rd .rd-directory .seg.rd-dir-tabs button { flex: 1 0 auto; padding: 9px 10px; font-size: 15px; white-space: nowrap; }
}
body.rd .rd-directory .filter { border-radius: var(--rd-r-field); border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow); }
body.rd .rd-directory .dest { border-radius: 18px; }
body.rd .rd-directory .rows { border-radius: var(--rd-r-card); border-color: var(--rd-line); box-shadow: var(--rd-shadow); }


/* ================================================================ How it works (board 04 + the owner's board) */
.rd-page-hero .rd-kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-sage-ink); }
.rd-steps-panel { padding: clamp(22px, calc(3 * var(--rd-vw)), 32px); }
.rd-step-cards { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); gap: 8px; align-items: start; }
.rd-step-card { position: relative; display: grid; gap: 8px; }
.rd-step-card .rd-step-num { position: absolute; top: 0; left: 0; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: #DDE8DC; color: var(--rd-forest); display: grid; place-items: center; font-weight: 750; font-size: 17px; border: 3px solid var(--rd-white); }
.rd-step-card h3 { margin: 6px 0 0; font-size: 21px; }
.rd-step-card p { margin: 0; color: var(--rd-forest-ink); font-size: 15.5px; }
.rd-step-card .rd-text-link { font-size: 14.5px; margin-top: 2px; }
.rd-step-art { margin: 20px 0 6px 20px; height: 140px; border-radius: 18px; background: radial-gradient(circle at 70% 30%, var(--rd-peach) 0 26px, transparent 27px), linear-gradient(180deg, #F3F1E8, var(--rd-sage)); display: grid; place-items: center; color: var(--rd-forest); position: relative; overflow: hidden; }
.rd-step-art::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30px; height: 70px; border-radius: 50%; background: #D3E2D2; }
.rd-step-art svg { width: 56px; height: 56px; position: relative; z-index: 1; background: rgba(255,255,255,.85); border-radius: 50%; padding: 14px; box-sizing: content-box; box-shadow: var(--rd-shadow); }
.rd-step-arrow { align-self: center; margin-top: 40px; color: var(--rd-forest); justify-self: center; }
.rd-step-arrow svg { width: 26px; height: 26px; }
@media (max-width: 860px) {
  .rd-step-cards { grid-template-columns: 1fr; gap: 22px; }
  .rd-step-arrow { display: none; }
  .rd-step-art { height: 110px; margin-left: 16px; }
}
.rd-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rd-guide { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); box-shadow: var(--rd-shadow); text-decoration: none; color: var(--rd-forest-ink); }
.rd-guide:hover { border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow-lift); }
.rd-guide .rd-guide-ico { width: 52px; height: 52px; display: grid; place-items: center; color: #111; }
.rd-guide .rd-guide-ico svg { width: 34px; height: 34px; }
.rd-guide .rd-guide-words { display: grid; gap: 6px; }
.rd-guide strong { font-size: 17px; color: var(--rd-forest); }
.rd-guide .rd-guide-words > span:not(.rd-text-link) { font-size: 14px; color: var(--rd-muted); line-height: 1.45; }
.rd-word-mark { font: 800 11px/1 var(--rd-font); letter-spacing: .08em; color: #1428A0; }
.rd-g-mark { font: 800 30px/1 var(--rd-font); background: conic-gradient(from -45deg, #EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 860px) { .rd-guides { grid-template-columns: 1fr; } }
/* the phone check */
.rd-check { display: grid; gap: 12px; position: relative; }
.rd-check .rd-search { max-width: 640px; }
.rd-check .rd-model-list { position: static; max-width: 640px; margin-top: -4px; }
.rd-check-market { max-width: 360px; }
.rd-check-market[hidden] { display: none; }
.rd-check-market select { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-ctl); background: var(--rd-white); color: var(--rd-forest-ink); }
.rd-result { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: var(--rd-r-ctl); border: 1px solid; max-width: 760px; }
.rd-result .rd-result-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; }
.rd-result .rd-result-head { display: block; font-size: 19px; margin-bottom: 2px; }
.rd-result .rd-result-model { margin: 0 0 8px; font-weight: 600; color: var(--rd-muted); }
.rd-result p { margin: 0 0 6px; }
.rd-result.rd-supported { background: #EEF5EE; border-color: #CFE2D1; }
.rd-result.rd-supported .rd-result-ico { background: var(--rd-ok); }
.rd-result.rd-supported .rd-result-head { color: var(--rd-forest); }
.rd-result.rd-unsupported { background: #FBEDE8; border-color: #F1CFC3; }
.rd-result.rd-unsupported .rd-result-ico { background: var(--rd-terracotta); }
.rd-result.rd-unsupported .rd-result-head { color: #7A2F17; }
.rd-result.rd-check { background: #EEF2F7; border-color: #D5DFEA; }
.rd-result.rd-check .rd-result-ico { background: #47698F; }
.rd-result.rd-check .rd-result-head { color: #22405F; }
.rd-check-lock { max-width: 760px; }
/* what can go wrong, beside the first-day words */
.rd-trouble { display: grid; gap: 12px; }
.rd-trouble-item { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: 16px 18px; box-shadow: var(--rd-shadow); }
.rd-trouble-item h3 { margin: 0 0 4px; font-size: 16.5px; }
.rd-trouble-item p { margin: 0; font-size: 15px; color: var(--rd-forest-ink); }


/* ================================================================ Help centre, articles, contact (board 05, owner's boards, board 10) */
.rd-help-search { max-width: 520px; margin: 4px 0 0; }
.rd-help-search .rd-hint { margin: 10px 2px 0; font-size: 13.5px; color: var(--rd-muted); }
.rd-paths-first { margin-top: 28px; }
.rd-topic h3 a { color: var(--rd-forest); text-decoration: none; }
.rd-topic h3 a:hover { text-decoration: underline; }
.rd-faq .rd-answer { padding: 0 22px 18px; }
.rd-faq .rd-answer p { margin: 0 0 10px; color: var(--rd-forest-ink); font-size: 15.5px; max-width: 820px; }
.rd-faq details > .rd-answer { padding: 0 22px 18px; }
.rd-article { max-width: 820px; margin: 18px 0 0; }
.rd-article h1 { font-size: clamp(32px, calc(4 * var(--rd-vw)), 48px); line-height: 1.1; margin: 0 0 18px; }
.rd-article .rd-kicker a { color: var(--rd-sage-ink); text-decoration: none; }
.rd-article-body { font-size: 17px; }
.rd-article-body p { margin: 0 0 14px; }
.rd-article-body p:last-child { margin-bottom: 0; }
.rd-back { margin: 30px 0 0; font-size: 15px; }
.rd-empty-state { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; }
.rd-empty-state .rd-empty-pic { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; background: var(--rd-sage); color: var(--rd-forest); display: grid; place-items: center; }
.rd-empty-state .rd-empty-pic svg { width: 40px; height: 40px; }
.rd-hero-short { min-height: clamp(240px, calc(26 * var(--rd-vw)), 330px); }
.rd-contact { align-items: start; }
.rd-contact h2 { font-size: 26px; margin: 0 0 16px; }
.rd-contact .rd-btn { width: 100%; }
.rd-before h2 { margin-bottom: 4px; }
.rd-before .rd-paths { margin: 16px 0 18px; }
.rd-before .rd-path { padding: 14px; grid-template-columns: 44px minmax(0, 1fr) 16px; }
.rd-before .rd-path .rd-path-ico { width: 44px; height: 44px; }
.rd-before hr { border: 0; border-top: 1px solid var(--rd-line); margin: 18px 0; }
.rd-before h3 { font-size: 19px; margin: 0 0 4px; }


/* ================================================================ My eSIM (owner's "Find your eSIM" / "Welcome back", board 05) */
.rd-myesim-cards { display: grid; gap: 22px; max-width: 700px; margin: -40px 0 0; position: relative; z-index: 1; }
.rd-myesim-cards h2 { font-size: 26px; margin: 0 0 6px; }
.rd-myesim-cards .rd-sub { font-size: 18px; margin: 0 0 12px; color: var(--rd-forest-ink); }
.rd-signin h1 { font-size: 26px !important; margin: 0 0 6px !important; }
.rd-signin .muted { color: var(--rd-muted); }
.rd-signin .idps { display: grid; gap: 12px; max-width: 420px; margin: 18px auto 10px; }
body.rd .rd-signin .idp { min-height: 52px; border-radius: 12px; font-weight: 650; font-size: 16px; }
body.rd .rd-signin .idp-google { background: var(--rd-white); border: 1.5px solid var(--rd-line-strong); color: #1f1f1f; }
body.rd .rd-signin .idp-apple { background: #000; color: #fff; border: 0; }
.rd-signin .linkish { color: var(--rd-forest); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.rd-signin .agree { font-size: 14.5px; }
.rd-find .rd-form { margin: 14px 0; }
.rd-find .rd-btn { width: 100%; }
.rd-find .rd-alert.rd-info .rd-alert-ico { color: var(--rd-forest); background: transparent; }
@media (max-width: 860px) { .rd-myesim-cards { margin-top: 0; } }
/* signed in: the rail and the panes as the boards draw them */
body.rd .acct-head h1 { font-size: clamp(32px, calc(4 * var(--rd-vw)), 44px); }
body.rd .acct { gap: 22px; }
@media (min-width: 900px) { body.rd .acct { grid-template-columns: 240px minmax(0, 1fr); } }
body.rd .acct-nav { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: 8px; box-shadow: var(--rd-shadow); }
@media (min-width: 900px) { body.rd .acct-nav { flex-direction: column; overflow: visible; position: sticky; top: 96px; } }
body.rd .acct-nav .acct-tab { border-radius: calc(var(--rd-r-card) - 8px); padding: 11px 14px; color: var(--rd-forest-ink); }
body.rd .acct-nav .acct-tab.on { background: var(--rd-sage); color: var(--rd-forest); font-weight: 700; }
body.rd .acct-pane > div { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: clamp(18px, calc(2.4 * var(--rd-vw)), 26px); box-shadow: var(--rd-shadow); }
body.rd .acct-tile { border-radius: 16px; border-color: var(--rd-line); background: var(--rd-cream-3); }
body.rd .acct-quick .btn, body.rd .acct-two .btn { border-radius: var(--rd-r-ctl); }


/* ================================================================ plan details, checkout, order (board 06) */
body.rd .wrap.shop .rd-checkout, body.rd .wrap.shop .rd-order, body.rd .wrap.shop .rd-plan, body.rd .wrap.shop .rd-myesim { width: 100%; }
.rd-co-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 0; padding: 0; }
.rd-co-steps li { display: inline-flex; align-items: center; gap: 10px; color: var(--rd-muted); font-weight: 600; font-size: 15px; }
.rd-co-steps li + li::before { content: ""; width: 34px; height: 1px; background: var(--rd-line-strong); margin-right: 4px; }
.rd-co-steps .rd-co-n { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--rd-line-strong); display: grid; place-items: center; color: var(--rd-forest); font-weight: 700; }
.rd-co-steps li.on { color: var(--rd-forest); }
.rd-co-steps li.on .rd-co-n { background: var(--rd-forest); border-color: var(--rd-forest); color: #fff; }
.rd-co { margin-top: 26px; }
.rd-co h2, .rd-order h2, .rd-plan h2 { font-size: 24px; margin: 0 0 14px; }
.rd-co-dest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0 16px; border-bottom: 1px solid var(--rd-line); }
.rd-co-dest .flag, .rd-co-dest img { width: 54px; height: 40px; border-radius: 10px; object-fit: cover; font-size: 34px; line-height: 40px; }
.rd-co-dest strong { display: block; font-size: 20px; color: var(--rd-forest); }
.rd-co-dest .rd-muted { font-size: 14px; }
.rd-co-line { display: grid; grid-template-columns: 30px 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rd-line); }
.rd-co-line .rd-co-ico { color: var(--rd-forest); display: grid; place-items: center; }
.rd-co-line .rd-co-k { color: var(--rd-muted); font-size: 15px; }
.rd-co-line .rd-co-v { font-weight: 650; color: var(--rd-forest-ink); }
.rd-co-email { margin-top: 18px; }
body.rd .rd-co-email span { display: block; font-weight: 650; color: var(--rd-forest); margin-bottom: 6px; }
body.rd .rd-checkout input[type="email"], body.rd .rd-checkout input[type="text"] { min-height: 50px; border-radius: var(--rd-r-ctl); border: 1px solid var(--rd-line-strong); padding: 12px 14px; font: inherit; font-size: 16px; width: 100%; box-sizing: border-box; background: var(--rd-white); }
.rd-co-refund { margin: 16px 0 0; }
.rd-co-total .rows { box-shadow: none; border-radius: 16px; }
.rd-co-total .rd-co-sum .price { font-size: 30px; font-weight: 750; color: var(--rd-forest); }
.rd-co-secure { margin: 16px 0; padding: 14px 16px; background: var(--rd-cream-3); border: 1px solid var(--rd-line); border-radius: 14px; }
.rd-co-secure strong { color: var(--rd-forest); }
.rd-co-secure p { margin: 6px 0 0; }
body.rd .rd-co-total .btn.wide { width: 100%; min-height: 54px; border-radius: var(--rd-r-ctl); background: var(--rd-terracotta); border-color: var(--rd-terracotta); color: #fff; font-weight: 700; font-size: 17px; }
body.rd .rd-co-total .btn.wide:hover { background: var(--rd-terracotta-ink); }
@media (min-width: 901px) { .rd-co-total, .rd-plan .rd-co-total { position: sticky; top: 96px; } }
/* plan details */
.rd-plan-head { margin: 10px 0 22px; }
.rd-plan-head h1 { font-size: clamp(30px, calc(3.6 * var(--rd-vw)), 44px); margin: 0 0 8px; line-height: 1.1; }
.rd-plan .rows { box-shadow: none; }
.rd-pd-sub { font-size: 18px; margin: 22px 0 6px; }
.rd-pd-line { margin: 0 0 8px; color: var(--rd-forest-ink); font-size: 15px; }
.rd-pd-price { font-size: 40px; font-weight: 750; color: var(--rd-forest); line-height: 1; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
/* order */
.rd-order-status { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 18px; }
.rd-order-status .rd-order-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 800; }
.rd-order-status.rd-tone-ok { background: #EEF5EE; border-color: #CFE2D1; }
.rd-order-status.rd-tone-ok .rd-order-mark { background: var(--rd-ok); }
.rd-order-status.rd-tone-bad { background: #FBEDE8; border-color: #F1CFC3; }
.rd-order-status.rd-tone-bad .rd-order-mark { background: var(--rd-terracotta); }
.rd-order-status.rd-tone-info .rd-order-mark { background: #47698F; }
.rd-order-status strong { font-size: 22px; color: var(--rd-forest); display: block; }
.rd-order-ref { display: grid; justify-items: end; gap: 2px; text-align: right; }
.rd-order-ref .mono { font-size: 16px; }
.rd-order-cols { margin-top: 22px; }
.rd-order-main, .rd-order-side { display: grid; gap: 18px; align-content: start; }
/* the order page's own cards (email, top-up, hand-over) take the panel's look here, unwrapped */
body.rd .rd-order-main > .block.card { margin: 0; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: clamp(20px, calc(3 * var(--rd-vw)), 30px); box-shadow: var(--rd-shadow); }
body.rd .rd-order-main > .block.card[hidden] { display: none; }
body.rd .rd-order-main > .block.card h2, body.rd .rd-order-main > .block.card h3 { font-size: 22px; line-height: 1.2; margin: 0 0 10px; }
body.rd .rd-install .btn.wide, body.rd .rd-install a.cta { background: var(--rd-terracotta); border-color: var(--rd-terracotta); color: #fff; border-radius: var(--rd-r-ctl); min-height: 52px; font-weight: 700; }
body.rd .rd-install .btn.wide:hover, body.rd .rd-install a.cta:hover { background: var(--rd-terracotta-ink); }
@media (max-width: 700px) { .rd-order-status { grid-template-columns: 48px minmax(0, 1fr); } .rd-order-ref { grid-column: 1 / -1; justify-items: start; text-align: left; } }


/* the checkout's own consent cards sit flat inside the Total card */
.rd-co-total .block.card { border: 0; box-shadow: none; padding: 0; background: transparent; margin: 14px 0; }
.rd-co-total .block.card h2 { font-size: 17px; margin: 0 0 6px; }
.rd-co-total .stack-h { flex-wrap: nowrap; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.rd-co-total .stack-h input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rd-forest); }
.rd-co-total .notice { border-radius: 12px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rd *, .rd *::before, .rd *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* A quiet reveal for appended cards (pack 03: small opacity/translate, natural height). */
@keyframes rd-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rd-card.rd-new { animation: rd-reveal var(--rd-t-panel) var(--rd-ease) both; }

/* ================================================================ Partners · About · policies · 404 (boards 07 and 10) */
.rd-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.rd-pt-ico { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--rd-sage); color: var(--rd-forest); display: grid; place-items: center; }
.rd-pt-ico svg { width: 24px; height: 24px; }
.rd-pt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.rd-pt-steps li { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.rd-pt-steps li strong { display: block; font-size: 17px; color: var(--rd-forest); margin: 4px 0 4px; }
.rd-pt-steps li span:not(.rd-pt-ico) { display: block; font-size: 15px; color: var(--rd-muted); line-height: 1.45; }
.rd-pt-steps code, .rd-feed code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }
.rd-pt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 8px; }
.rd-pt-facts.rd-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-pt-fact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10px 18px; }
.rd-pt-fact + .rd-pt-fact { border-left: 1px solid var(--rd-line); }
.rd-pt-fact strong { color: var(--rd-forest); font-size: 16.5px; margin-top: 4px; }
.rd-pt-fact span:not(.rd-pt-ico) { color: var(--rd-muted); font-size: 14.5px; line-height: 1.45; }
section.rd-section > .rd-pt-facts.rd-three { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: 22px 8px; box-shadow: var(--rd-shadow); }
.rd-feed { margin: 14px 0 0; }
.rd-feed-line { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 16px; border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-field); background: var(--rd-cream-3, #FBFAF5); }
.rd-feed-line code { flex: 1; min-width: 0; color: var(--rd-forest-ink); font-size: 15px; }
.rd-feed p { margin: 6px 2px 0; font-size: 14.5px; }
.rd-copy { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--rd-forest); display: grid; place-items: center; cursor: pointer; }
.rd-copy:hover { background: var(--rd-sage); }
.rd-copy svg { width: 20px; height: 20px; }
.rd-copy.rd-copied { background: var(--rd-sage); color: var(--rd-sage-ink); }
.rd-pt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 10px; }
.rd-pt-tiles > div { border: 1px solid var(--rd-line); border-radius: var(--rd-r-field); background: var(--rd-white); padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rd-pt-tiles > div > span:first-child { color: var(--rd-forest); }
.rd-pt-tiles > div > span:first-child svg { width: 24px; height: 24px; }
.rd-pt-tiles strong { font-size: 26px; color: var(--rd-forest); line-height: 1.2; }
.rd-pt-tiles span:last-child { font-size: 13.5px; color: var(--rd-muted); }
.rd-pt-end h2 { font-size: clamp(22px, calc(2.4 * var(--rd-vw)), 28px); }
.rd-pt-end h3 { font-size: 18px; margin: 18px 0 6px; }
@media (max-width: 900px) {
  .rd-pt-steps { grid-template-columns: 1fr; gap: 16px; }
  .rd-pt-facts, .rd-pt-facts.rd-three { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .rd-pt-fact:nth-child(odd) { border-left: 0; }
}
@media (max-width: 560px) {
  .rd-pt-facts, .rd-pt-facts.rd-three { grid-template-columns: 1fr; }
  .rd-pt-fact { flex-direction: row; text-align: left; align-items: flex-start; flex-wrap: wrap; column-gap: 14px; padding: 12px 6px; }
  .rd-pt-fact + .rd-pt-fact { border-left: 0; border-top: 1px solid var(--rd-line); }
  .rd-pt-fact strong { margin-top: 12px; flex: 1; }
  .rd-pt-fact span:not(.rd-pt-ico) { flex-basis: 100%; }
  .rd-pt-tiles { grid-template-columns: 1fr 1fr; }
}

/* About */
body.rd-page-about .rd-panel > h2, body.rd-page-partners .rd-panel > h2, body.rd-page-about .rd-mission h2 { font-size: clamp(22px, calc(2.3 * var(--rd-vw)), 27px); line-height: 1.2; margin-bottom: 8px; }
body.rd-page-about .rd-compare h2 { font-size: clamp(22px, calc(2.3 * var(--rd-vw)), 27px); }
.rd-mission { display: flex; gap: 22px; align-items: flex-start; }
.rd-mission-ico { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--rd-sage); color: var(--rd-forest); display: grid; place-items: center; }
.rd-mission-ico svg { width: 32px; height: 32px; }
.rd-mission h2 { margin: 6px 0 10px; font-size: clamp(24px, calc(2.6 * var(--rd-vw)), 30px); }
.rd-mission .rd-lede { margin: 0; }
@media (max-width: 560px) { .rd-mission { flex-direction: column; gap: 12px; } .rd-mission-ico { width: 56px; height: 56px; } }
.rd-facts-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15.5px; background: transparent; border: 0; border-radius: 0; }
.rd-facts-table td, .rd-facts-table td:last-child { white-space: normal; font-weight: 400; font-size: 15.5px; text-align: left; }
.rd-facts-table tbody tr:hover { background: transparent; }
.rd-facts-table th, .rd-facts-table td { text-align: left; vertical-align: middle; padding: 14px 12px; border-top: 1px solid var(--rd-line); }
.rd-facts-table tbody tr:first-child th, .rd-facts-table tbody tr:first-child td { border-top: 0; }
.rd-facts-table th, .rd-compare table.versus th { text-transform: none; letter-spacing: 0; }
.rd-facts-table thead th { font-size: 13.5px; font-weight: 700; color: var(--rd-forest); background: var(--rd-cream-3, #FBFAF5); border-top: 0; }
.rd-facts-table tbody th { font-weight: 650; color: var(--rd-forest); width: 34%; white-space: nowrap; font-size: 15.5px; }
.rd-facts-table tbody th .rd-fact-mark { display: inline-grid; vertical-align: middle; place-items: center; width: 28px; height: 28px; margin-right: 12px; color: var(--rd-forest); }
.rd-facts-table tbody th .rd-fact-mark svg { width: 22px; height: 22px; }
.rd-facts-table td { color: var(--rd-muted); }
.rd-facts-table.rd-fields { border: 1px solid var(--rd-line); border-radius: var(--rd-r-field); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--rd-white); }
.rd-fields tbody tr:first-child th, .rd-fields tbody tr:first-child td { border-top: 1px solid var(--rd-line); }
@media (max-width: 640px) {
  .rd-facts-table, .rd-facts-table tbody, .rd-facts-table tr { display: block; width: 100%; min-width: 0; }
  .rd-facts-table tr + tr { border-top: 1px solid var(--rd-line); }
  .rd-facts-table tbody th, .rd-facts-table tbody tr:first-child th { white-space: normal; width: auto; display: block; padding: 12px 10px 2px; border-top: 0; }
  .rd-facts-table tbody td, .rd-facts-table tbody tr:first-child td { display: block; border-top: 0; padding: 0 10px 12px 50px; }
  .rd-facts-table thead { display: none; }
  .rd-fields tbody tr:first-child th, .rd-fields tbody tr:first-child td { border-top: 0; }
}
.rd-approach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 8px; }
.rd-approach > div { display: flex; gap: 16px; align-items: flex-start; padding: 18px 18px 18px 0; }
.rd-approach > div:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--rd-line); }
.rd-approach > div:nth-child(n+3) { border-top: 1px solid var(--rd-line); }
.rd-approach strong { display: block; color: var(--rd-forest); font-size: 16.5px; margin: 6px 0 4px; }
.rd-approach p { margin: 0; color: var(--rd-muted); font-size: 15px; }
@media (max-width: 760px) {
  .rd-approach { grid-template-columns: 1fr; }
  .rd-approach > div, .rd-approach > div:nth-child(even) { padding: 16px 0; border-left: 0; }
  .rd-approach > div + div { border-top: 1px solid var(--rd-line); }
}
.rd-compare h2 { margin-top: 0; font-size: clamp(22px, calc(2.4 * var(--rd-vw)), 28px); }
.rd-compare .tablewrap { overflow-x: auto; }
.rd-compare table.versus { width: 100%; border-collapse: collapse; font-size: 15px; }
.rd-compare table.versus th, .rd-compare table.versus td { padding: 12px 12px; border-top: 1px solid var(--rd-line); text-align: left; }
.rd-compare table.versus thead th { border-top: 0; color: var(--rd-forest); font-size: 14px; }
.rd-compare table.versus .mine { background: var(--rd-sage); }
.rd-compare small { color: var(--rd-muted); }

/* Policies — board 10, left */
.rd-policy { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, calc(4 * var(--rd-vw)), 56px); margin: 22px 0 8px; align-items: start; }
.rd-policy.rd-policy-plain { grid-template-columns: minmax(0, 1fr); }
.rd-policy-side { position: sticky; top: 96px; border-right: 1px solid var(--rd-line); padding-right: 20px; min-height: 120px; }
.rd-toc-h { font-weight: 700; color: var(--rd-forest); margin: 4px 0 12px; font-size: 15px; }
.rd-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rd-line); }
.rd-toc li a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--rd-muted); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.rd-toc li a:hover { color: var(--rd-forest); }
.rd-toc li a.rd-here, .rd-toc li a[aria-current="true"] { border-left-color: var(--rd-terracotta); color: var(--rd-forest); font-weight: 600; }
.rd-policy-side { text-align: left; }
nav.rd-toc { display: block; }
article.rd-policy-doc { max-width: 720px; white-space: normal; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.rd-toc li a { border-radius: 0; }
.rd-policy-doc h1 { font-size: clamp(34px, calc(4.4 * var(--rd-vw)), 52px); line-height: 1.06; margin: 0 0 12px; }
.rd-policy-doc > .rd-muted { margin: 0 0 8px; font-size: 15px; }
.rd-policy-part { padding: 26px 0 4px; border-top: 1px solid var(--rd-line); margin-top: 22px; scroll-margin-top: 96px; }
.rd-policy-doc > .rd-policy-part:first-of-type { margin-top: 26px; }
.rd-policy-part h2 { font-size: clamp(22px, calc(2.3 * var(--rd-vw)), 27px); margin: 0 0 10px; }
.rd-policy-part p { white-space: pre-line; margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; color: var(--rd-forest-ink); }
@media (max-width: 860px) {
  .rd-policy { grid-template-columns: 1fr; gap: 10px; }
  .rd-policy-side { position: static; border-right: 0; padding: 0; min-height: 0; order: 2; }
  .rd-policy-doc { order: 1; }
  .rd-policy-side { display: none; }
}

/* 404 — board 10, right */
.rd-404 { padding-top: clamp(28px, calc(5 * var(--rd-vw)), 56px); padding-bottom: clamp(40px, calc(6 * var(--rd-vw)), 72px); max-width: 760px; }
.rd-compare > section { margin: 0; }
.rd-404-art { display: flex; justify-content: center; margin: 0 0 18px; }
.rd-404-art svg { width: min(340px, calc(80 * var(--rd-vw))); height: auto; }
.rd-404 h1 { font-size: clamp(32px, calc(4.6 * var(--rd-vw)), 52px); line-height: 1.08; margin: 0 0 14px; }
.rd-404 .rd-lead { font-size: 18px; color: var(--rd-forest-ink); margin: 0 auto 26px; max-width: 600px; }
.rd-404-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; margin: 0; }

/* ================================================================ the signed-in account (board 05, "Welcome back") */
.rd-acct .rd-acct-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.rd-btn-outline.rd-small { min-height: 38px; padding: 0 14px; font-size: 14.5px; }
.rd-acct-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 22px 0 18px; padding: 0 0 2px; border-bottom: 1px solid var(--rd-line); scrollbar-width: none; justify-content: flex-start; flex-wrap: nowrap; }
.rd-acct-tabs::-webkit-scrollbar { display: none; }
.rd-acct-tabs a { border-radius: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 12px; color: var(--rd-muted); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rd-acct-tabs a:hover { color: var(--rd-forest); }
.rd-acct-tabs a.on { color: var(--rd-forest); border-bottom-color: var(--rd-terracotta); }
.rd-acct-note { font-size: 12.5px; background: var(--rd-sage); color: var(--rd-sage-ink); border-radius: 999px; padding: 1px 8px; }
.rd-acct-overview { display: grid; gap: 20px; }
.rd-acct-overview .rd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.rd-acct-overview h2, .rd-acct-pane h2 { font-size: clamp(22px, calc(2.3 * var(--rd-vw)), 26px); margin: 0 0 12px; }
.rd-acct-cards, body.rd .rd-acct .rows { display: grid; gap: 12px; background: transparent; border: 0; box-shadow: none; }
.rd-acct-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); background: var(--rd-white); }
.rd-acct-card.rd-done { background: var(--rd-cream-3); }
.rd-acct-pic { width: 76px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--rd-sage); display: grid; place-items: center; color: var(--rd-forest); }
.rd-acct-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-acct-words h3 { font-size: 17px; line-height: 1.3; margin: 0 0 6px; color: var(--rd-forest); }
.rd-acct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 14px; }
.rd-state { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--rd-cream-3); border: 1px solid var(--rd-line); color: var(--rd-forest-ink); font-size: 13px; font-weight: 600; }
.rd-state.rd-ok { background: #E3F0E4; border-color: #CFE2D1; color: #1F5A3A; }
.rd-state.rd-bad { background: #FBEDE8; border-color: #F1CFC3; color: #8E3A20; }
.rd-acct-card .rd-btn, .rd-acct-card .rd-btn-outline { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (max-width: 640px) {
  .rd-acct-card { grid-template-columns: 56px minmax(0, 1fr); }
  .rd-acct-pic { width: 56px; height: 44px; }
  .rd-acct-card > a { grid-column: 1 / -1; width: 100%; }
}
.rd-table-wrap { overflow-x: auto; border: 1px solid var(--rd-line); border-radius: var(--rd-r-field); }
table.rd-bill { width: 100%; border-collapse: collapse; border: 0; border-radius: 0; background: var(--rd-white); font-size: 15px; }
table.rd-bill th, table.rd-bill td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--rd-line); white-space: normal; font-weight: 400; }
table.rd-bill th { border-top: 0; background: var(--rd-cream-3); color: var(--rd-forest); font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
table.rd-bill td:first-child, table.rd-bill td:nth-child(3) { white-space: nowrap; }
table.rd-bill td a { color: var(--rd-forest); }
table.rd-bill tbody tr:hover { background: transparent; }
@media (max-width: 640px) {
  table.rd-bill thead { display: none; }
  table.rd-bill, table.rd-bill tbody, table.rd-bill tr, table.rd-bill td { display: block; width: 100%; }
  table.rd-bill tr { padding: 10px 14px; border-top: 1px solid var(--rd-line); }
  table.rd-bill tr:first-child { border-top: 0; }
  table.rd-bill td { border: 0; padding: 2px 0; }
}
.rd-paths.rd-stack { display: grid; gap: 10px; }
.rd-acct-pane .acct-field { margin: 0 0 16px; }
.rd-acct-pane .acct-label { font-weight: 650; color: var(--rd-forest); margin: 0 0 4px; }
body.rd .rd-acct-pane .acct-input { min-height: 46px; border-radius: var(--rd-r-ctl); border: 1px solid var(--rd-line-strong); padding: 10px 12px; font: inherit; background: var(--rd-white); }

/* ================================================================ the store, 18 Oct 2026 evening */
/* The field's list (owner: "slight lines … it should not be one big white background … lines actually lines, buttons
   actually buttons, and the cheapest one highlighted with a subtle beautiful green"): a tinted tray; countries and
   regions as rows parted by hairlines; the plans that cover every chosen country as cards you press, the cheapest in
   the apps' sage green with a forest "Cheapest". */
.rd-listbox { background: var(--rd-cream-3); padding: 6px; }
.rd-listbox .rd-group { padding: 12px 12px 6px; }
.rd-listbox li[role="option"] { border-radius: 10px; }
.rd-listbox li[role="option"]:not(.rd-opt-cover) + li[role="option"]:not(.rd-opt-cover) { box-shadow: inset 0 1px 0 var(--rd-line); border-radius: 0; }
.rd-listbox li[role="option"]:not(.rd-opt-cover)[aria-selected="true"], .rd-listbox li[role="option"]:not(.rd-opt-cover):hover { background: var(--rd-white); border-radius: 10px; box-shadow: none; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover { background: var(--rd-white); border: 1px solid var(--rd-line-strong); border-radius: 14px; margin: 0 0 8px; padding: 12px 12px 12px 14px; box-shadow: 0 1px 2px rgba(7, 61, 49, .05); transition: border-color var(--rd-t-ctrl) var(--rd-ease), box-shadow var(--rd-t-ctrl) var(--rd-ease), background-color var(--rd-t-ctrl) var(--rd-ease); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover:hover, .rd-listbox li.rd-opt-cover[aria-selected="true"] { background: var(--rd-white); border-color: var(--rd-forest); box-shadow: 0 4px 14px rgba(7, 61, 49, .10); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover:active { transform: translateY(1px); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover.rd-is-cheapest { background: linear-gradient(180deg, #EEF5EE 0%, var(--rd-sage) 100%); border-color: rgba(47, 122, 79, .55); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover.rd-is-cheapest:hover, .rd-listbox li.rd-opt-cover.rd-is-cheapest[aria-selected="true"] { background: var(--rd-sage-2); border-color: var(--rd-ok); }
.rd-listbox li.rd-picked { box-shadow: inset 0 0 0 1.5px var(--rd-forest); }
:is(.rd-listbox, .rd-cover-list) .rd-cheapest { background: var(--rd-ok); color: #fff; letter-spacing: .01em; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-month { flex: none; margin-left: auto; display: grid; justify-items: end; gap: 1px; text-align: right; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-month .rd-opt-price { margin: 0; font-size: 17px; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-basis { font-size: 12.5px; color: var(--rd-muted); white-space: nowrap; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover .rd-opt-tick { color: var(--rd-sage-ink); font-size: 20px; font-weight: 600; width: 18px; }
.rd-listbox li.rd-picked .rd-opt-tick { color: var(--rd-forest); font-size: 16px; font-weight: 700; }
.rd-listbox .rd-cover-note { list-style: none; padding: 2px 12px 10px; font-size: 12.5px; line-height: 1.45; color: var(--rd-muted); border-bottom: 1px solid var(--rd-line); margin: 0 0 4px; }
@media (max-width: 560px) {
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover { flex-wrap: wrap; row-gap: 6px; }
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)) .rd-opt-basis { white-space: normal; }
}

/* "Choose your IP" — after the day buttons, the same height, a pin and a caret; its menu drops below it. */
.rd-days-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.rd-days-row > .rd-days { margin: 0; }
.rd-ip { position: relative; display: inline-block; }
.rd-ip-btn { all: unset; cursor: pointer; box-sizing: border-box; min-height: 44px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--rd-white); border: 1px dashed var(--rd-line-strong); border-radius: var(--rd-r-ctl); font-weight: 600; color: var(--rd-forest); transition: border-color var(--rd-t-ctrl) var(--rd-ease), background-color var(--rd-t-ctrl) var(--rd-ease); }
.rd-ip-btn .rd-ico { width: 18px; height: 18px; }
.rd-ip-btn:hover { border-color: var(--rd-forest); }
.rd-ip-btn.rd-on { border-style: solid; border-color: var(--rd-forest); background: var(--rd-sage); }
.rd-ip-btn:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-ip-chev { font-size: 12px; opacity: .7; }
.rd-ip-menu { position: absolute; z-index: 25; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 300px; max-width: min(360px, calc(100vw - 32px)); padding: 6px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: 14px; box-shadow: var(--rd-shadow-lift); text-align: start; }
.rd-ip-menu[hidden] { display: none; }
.rd-ip-opt { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--rd-forest-ink); }
.rd-ip-opt + .rd-ip-opt { box-shadow: inset 0 1px 0 var(--rd-line); }
.rd-ip-opt:hover, .rd-ip-opt:focus-visible { background: var(--rd-sage); box-shadow: none; }
.rd-ip-opt:focus-visible { outline: 2px solid var(--rd-terracotta); outline-offset: -2px; }
.rd-ip-opt[aria-checked="true"] { font-weight: 700; }
.rd-ip-opt .flag { width: 26px; height: 19px; border-radius: 4px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(7, 61, 49, .08); }
.rd-ip-opt .rd-ico { width: 22px; height: 22px; color: var(--rd-forest); flex: none; }
.rd-ip-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ip-sub { font-size: 13px; color: var(--rd-muted); white-space: nowrap; }
.rd-ip-opt .rd-opt-tick { width: 16px; text-align: center; color: var(--rd-forest); font-weight: 700; flex: none; }

/* The currency beside "Total prices in …": a small pill with the code, the same list as the header's menu. */
.rd-context .rd-prices-in { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.rd-cur-pick { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--rd-forest); background: var(--rd-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23073D31' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 8px center / 9px 6px; border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-pill); padding: 3px 24px 3px 10px; min-height: 26px; cursor: pointer; line-height: 1.2; }
.rd-cur-pick:hover { border-color: var(--rd-forest); }
.rd-cur-pick:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }

/* The search field's placeholder on the narrowest phones (owner's iPhone SE, 18 Oct 2026, evening: "Search countries and
   region|" was cut). Under 400px a little less padding and a slightly smaller placeholder — the typed text stays 16px so
   iOS does not zoom in — and a placeholder that still cannot fit ends in an ellipsis, never a hard cut. */
.rd-combobox .rd-field input, .rd-combobox .rd-field input::placeholder { text-overflow: ellipsis; }
@media (max-width: 400px) {
  .rd-hero + .rd-store { padding-left: 12px; padding-right: 12px; }
  .rd-combobox .rd-field { padding: 6px 4px 6px 12px; gap: 8px; }
  .rd-combobox .rd-ctl { width: 40px; }
  .rd-combobox .rd-field input::placeholder { font-size: 14px; }
}

/* ================================================================ the store: a bundle's name and its countries (18 Oct 2026, evening) */
/* "Global · 54 countries", big, first in what the store shows once a bundle is picked; "54 countries" is a button that
   opens every country in it. The line "One eSIM for … · Change plan" and the "place · days" line above the prices are
   gone (owner): the field above holds the countries and the plans, the day button and the cards say the length. */
.rd-plan-title { position: relative; margin: 26px 0 0; text-align: center; }
.rd-plan-name { font-size: clamp(26px, calc(3.2 * var(--rd-vw)), 38px); line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
.rd-plan-sep { color: var(--rd-muted); font-weight: 600; }
.rd-countries-btn { all: unset; cursor: pointer; color: var(--rd-forest); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: rgba(7, 61, 49, .35); border-radius: 6px; }
.rd-countries-btn::after { content: ""; display: inline-block; width: .32em; height: .32em; margin: 0 0 .14em .3em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.rd-countries-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -.02em; }
.rd-countries-btn:hover { text-decoration-color: var(--rd-forest); }
.rd-countries-btn:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 3px; }
.rd-countries-panel { position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); top: calc(100% + 10px); width: min(540px, calc(100vw - 32px)); max-height: min(60vh, 460px); overflow: auto; box-sizing: border-box; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: 18px; box-shadow: var(--rd-shadow-lift); padding: 0 8px 10px; text-align: start; }
.rd-countries-panel[hidden] { display: none; }
.rd-countries-head { position: sticky; top: 0; z-index: 1; background: var(--rd-white); display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 8px 10px; color: var(--rd-forest); }
.rd-countries-close { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-size: 24px; line-height: 1; color: var(--rd-forest); }
.rd-countries-close:hover { background: var(--rd-sage); }
.rd-countries-close:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 1px; }
.rd-countries-find { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--rd-line-strong); border-radius: 12px; font: inherit; font-size: 16px; color: var(--rd-forest-ink); background: var(--rd-white); }
.rd-countries-find:focus { outline: 0; border-color: var(--rd-forest); box-shadow: 0 0 0 3px rgba(7, 61, 49, .12); }
.rd-countries-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.rd-countries-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-top: 1px solid var(--rd-line); color: var(--rd-forest-ink); }
.rd-countries-list li[hidden] { display: none; }
.rd-countries-list li .flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(7, 61, 49, .08); }
.rd-countries-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-countries-none { margin: 10px; }
@media (max-width: 480px) { .rd-countries-list { grid-template-columns: minmax(0, 1fr); } .rd-plan-name { font-size: 26px; } }

/* ================================================================ checkout: buy goes straight to pay (owner, 18 Oct 2026, evening)
   The checkout fork's own block — Stripe's fields on the page from the start, one consent tick, "Have a code?" as a link. */
.rd-checkout-one .rd-co-head { margin: 8px 0 0; }
.rd-checkout-one .rd-co-head h1 { font-size: clamp(30px, calc(3.4 * var(--rd-vw)), 42px); margin: 2px 0 0; line-height: 1.1; color: var(--rd-forest); }
.rd-checkout-one .rd-co { margin-top: 18px; }
.rd-checkout-one .rd-co-plan { margin-top: 0; }
.rd-co-facts { display: none; margin: 0; font-size: 14px; line-height: 1.45; color: var(--rd-muted); }
.rd-checkout-one .rd-co-total .rows { margin-bottom: 4px; }
.rd-co-codelink { margin: 2px 0 10px; }
.rd-co-codelink .linkish { font-weight: 650; color: var(--rd-forest); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-size: 15px; }
.rd-checkout-one .partner-code { margin: 0 0 6px; }
.rd-checkout-one .rd-co-email { margin-top: 10px; }
.rd-co-pay { margin: 14px 0 6px; }
.rd-co-wallets { margin-bottom: 12px; }
.rd-co-card { min-height: 46px; }
.rd-co-nostripe { margin: 0; padding: 14px 16px; border: 1px dashed var(--rd-line-strong); border-radius: 12px; background: var(--rd-cream-3, #FBFAF5); }
/* The clickwrap (owner, 18 Oct 2026, night): no box — one short line right above the buttons that pay (the wallets, and
   again "Pay $x"), and for a buyer with the 14-day right the waiver under it. Read, not filled in: small, close to the
   button it belongs to. */
.rd-co-consent { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--rd-forest-ink); }
.rd-co-consent[hidden] { display: none; }
.rd-co-consent p { margin: 0; }
.rd-co-consent p + p { margin-top: 4px; }
.rd-co-consent a { color: var(--rd-forest); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.rd-co-consent-pay { margin-top: 14px; }
.rd-co-waiver { color: var(--rd-muted); }
.rd-co-nonref { font-weight: 650; }
.rd-co-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--rd-muted); }
.rd-co-fine a { color: var(--rd-forest); }
.rd-co-lock { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--rd-forest); }
@media (max-width: 760px) {
  .rd-checkout-one .rd-co-head { margin: 0; }
  .rd-checkout-one .rd-co-head .rd-kicker { display: none; }
  .rd-checkout-one .rd-co-head h1 { font-size: 24px; }
  .rd-checkout-one .rd-co-plan h2 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .rd-checkout-one .rd-co-line { display: none; }
  .rd-checkout-one .rd-co-facts { display: block; }
  .rd-checkout-one .rd-co-dest { border-bottom: 0; padding-bottom: 4px; }
  .rd-checkout-one .rd-co { margin-top: 12px; gap: 12px; }
  .rd-checkout-one .rd-co-plan { padding: 14px 16px; }
  .rd-checkout-one .rd-co-plan h2 { font-size: 18px; margin: 0 0 4px; }
  .rd-checkout-one .rd-co-dest { padding: 6px 0 10px; }
  .rd-checkout-one .rd-co-dest .flag, .rd-checkout-one .rd-co-dest img { width: 40px; height: 30px; }
  .rd-checkout-one .rd-co-dest strong { font-size: 17px; }
  .rd-checkout-one .rd-co-line { padding: 9px 0; grid-template-columns: 26px 96px minmax(0, 1fr) auto; }
  .rd-checkout-one .rd-co-total { padding: 14px 16px; }
  .rd-checkout-one .rd-co-total .rd-co-sum .price { font-size: 26px; }
}

/* ================================================================ the store: what each covering plan sells (18 Oct 2026, late night, second look) */
/* THE LINEUP, as the owner corrected it (every screen, every list that draws these rows): the name with its count and, at
   the right edge of the same line, the badge(s) — side by side, or one under the other — or, when they do not fit
   there, right-aligned on the line under the name, above the prices; then the FIXED line ([FIXED DATA] or …) and the
   UNLIMITED line ([UNLIMITED · speeds]), each tag as wide as its words, the unlimited one never narrower than the fixed
   one (redesign.js tagsLineUp); the prices in one right-hand column — "from" and "/GB" small, the amount big. Every row
   is the same white card; only the tags, badges and prices carry colour: FIXED the site's green, UNLIMITED its
   terracotta, no blue. Every text ≥ 5.6:1 (measured). Tags are labels: no pointer, no hover, no focus. */
:root {
  --rd-fix-bg: #DDEBE1; --rd-fix-ink: #0B4A38; --rd-fix-solid: var(--rd-forest);
  --rd-unl-bg: #FBE3D5; --rd-unl-ink: #8A3A21; --rd-unl-price: #9A4126; --rd-unl-solid: #A9472A;
}
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover .rd-opt-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 7px; align-items: center; min-width: 0; flex: 1; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover .rd-opt-name { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover .rd-opt-title { flex: 0 1 auto; min-width: 0; }
:is(.rd-listbox, .rd-cover-list) .rd-badges { margin-inline-start: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 6px; }
.rd-kind { display: contents; }
.rd-kind-tag { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 13px; }
.rd-kind > .rd-rate { grid-column: 2; justify-self: end; text-align: end; }
.rd-tag { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 2px 8px; border-radius: 12px; font: inherit; font-size: 13px; line-height: 1.45; cursor: inherit; pointer-events: none; user-select: none; }
.rd-tag-kind { text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.rd-tag-speed { white-space: nowrap; } /* a long speed list breaks between speeds only; 12px corners = a pill on one line, a soft box on two */
.rd-tag-fix { background: var(--rd-fix-bg); color: var(--rd-fix-ink); }
.rd-tag-unl { background: var(--rd-unl-bg); color: var(--rd-unl-ink); }
.rd-tag-or { color: var(--rd-muted); font-size: 13px; }
.rd-rate { font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rd-rate b { font-size: 23px; font-weight: 750; letter-spacing: -0.01em; }
.rd-rate-fix { color: var(--rd-fix-ink); }
.rd-rate-unl { color: var(--rd-unl-price); }
:is(.rd-listbox, .rd-cover-list) .rd-cheapest.rd-badge-fixed { background: var(--rd-fix-solid); color: #fff; }
:is(.rd-listbox, .rd-cover-list) .rd-cheapest.rd-badge-unlimited { background: var(--rd-unl-solid); color: #fff; }
/* Every row the same white card (winners are told by their badges alone). */
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover:is(.rd-is-cheapest, .rd-is-cheapest-fixed, .rd-is-cheapest-both) { background: var(--rd-white); border-color: var(--rd-line-strong); }
:is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover:is(.rd-is-cheapest, .rd-is-cheapest-fixed, .rd-is-cheapest-both):hover { background: var(--rd-white); border-color: var(--rd-forest); }
/* A phone: the globe goes (every row had the same one); the prices a step smaller, still big. */
@media (max-width: 560px) {
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover { flex-wrap: nowrap; column-gap: 10px; }
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover > .rd-ico { display: none; }
  /* …and the "›" too (the whole row is the button), so a tag keeps its one line wherever it can. */
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover > .rd-opt-tick:not(:empty) { display: none; }
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover.rd-picked > .rd-opt-tick { display: inline-block; }
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover .rd-opt-main { column-gap: 10px; }
  .rd-rate b { font-size: 21px; }
  :is(.rd-listbox, .rd-cover-list) .rd-cheapest { font-size: 11px; padding: 3px 7px; }
}
/* The narrowest phones: a little tighter, so "UNLIMITED · 1 Mbps" keeps its one line. */
@media (max-width: 380px) {
  :is(.rd-listbox li, .rd-cover-list > :is(a, div)).rd-opt-cover .rd-opt-main { column-gap: 8px; }
  .rd-tag { padding: 2px 7px; }
  .rd-tag-kind { letter-spacing: .02em; }
  .rd-rate b { font-size: 20px; }
}

/* ================================================================ "Plan details" as a sheet over the page, with its FCC label (18 Oct 2026, night) */
/* The classic shop's Package details panel (style.css .sheet), in the redesign's look: a card over the dimmed page on a
   computer, a sheet from the bottom on a phone. "Broadband Facts" folds at its foot and opens in place; a US plan's card
   names it beside "Plan details". */
.rd-card .rd-card-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 8px 0 4px; }
.rd-card .rd-card-links .rd-details, .rd-card .rd-card-links .rd-label-link { margin: 0; font-size: 15px; }
html.rd-sheet-open { overflow: hidden; }
.rd-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(7, 46, 37, .46); }
.rd-sheet-panel { width: min(640px, 100%); max-height: min(88vh, 920px); display: flex; flex-direction: column; background: var(--rd-white); border-radius: var(--rd-r-card); box-shadow: 0 24px 64px rgba(7, 46, 37, .28); overflow: hidden; color: var(--rd-forest-ink); text-align: start; }
@supports (height: 1svh) { .rd-sheet-panel { max-height: min(88svh, 920px); } }
@media (prefers-reduced-motion: no-preference) {
  .rd-sheet { animation: rd-sheet-fade 160ms var(--rd-ease); }
  .rd-sheet-panel { animation: rd-sheet-rise 220ms var(--rd-ease); }
}
@keyframes rd-sheet-fade { from { opacity: 0; } }
@keyframes rd-sheet-rise { from { transform: translateY(14px); opacity: .6; } }
.rd-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 14px; border-bottom: 1px solid var(--rd-line); }
.rd-sheet-head h2 { margin: 0; font-size: 24px; line-height: 1.2; color: var(--rd-forest); }
.rd-sheet-plan { margin: 6px 0 0; font-size: 14.5px; color: var(--rd-muted); }
.rd-sheet-plan:empty { display: none; }
.rd-sheet-x { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--rd-line-strong); color: var(--rd-forest); font-size: 16px; background: var(--rd-white); }
.rd-sheet-x:hover { border-color: var(--rd-forest); background: var(--rd-cream-3); }
.rd-sheet-x:focus-visible, .rd-bbf-toggle:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-sheet-body { overflow: auto; overscroll-behavior: contain; padding: 4px 22px 22px; }
.rd-sheet-row { padding: 14px 0; border-bottom: 1px solid var(--rd-line); }
.rd-sheet-row h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--rd-muted); font-weight: 700; }
.rd-sheet-row p, .rd-sheet-notes { margin: 0; font-size: 15.5px; line-height: 1.55; }
.rd-sheet-notes { padding-left: 18px; }
.rd-sheet-failed { margin: 16px 0; color: var(--rd-muted); }
.rd-sheet-wait { display: grid; gap: 10px; padding: 18px 0; }
.rd-sheet-wait span { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--rd-cream-2), var(--rd-cream-3), var(--rd-cream-2)); background-size: 200% 100%; }
.rd-sheet-wait span:nth-child(2) { width: 82%; } .rd-sheet-wait span:nth-child(3) { width: 64%; }
@media (prefers-reduced-motion: no-preference) { .rd-sheet-wait span { animation: rd-sheet-shimmer 1.2s linear infinite; } }
@keyframes rd-sheet-shimmer { to { background-position: -200% 0; } }
/* Broadband Facts: folded under the details, opened in place. */
.rd-bbf { margin: 18px 0 0; border: 1px solid var(--rd-line-strong); border-radius: 16px; background: var(--rd-cream-3); }
.rd-bbf-head { margin: 0; }
.rd-bbf-toggle { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; }
.rd-bbf-words { display: grid; gap: 2px; }
.rd-bbf-title { font-size: 17px; font-weight: 800; color: var(--rd-forest-ink); }
.rd-bbf-sub { font-size: 13px; color: var(--rd-muted); font-weight: 500; }
.rd-bbf-chev { font-size: 20px; line-height: 1; color: var(--rd-forest); transition: transform var(--rd-t-ctrl) var(--rd-ease); }
.rd-bbf-toggle[aria-expanded="true"] .rd-bbf-chev { transform: rotate(180deg); }
.rd-bbf-panel { padding: 0 16px 16px; }
.rd-bbf-panel[hidden] { display: none; }
.rd-bbf-intro, .rd-bbf-none { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--rd-muted); }
/* Each label in the FCC's own plain form: a ruled box, the price and data first and bold. */
.rd-bbf-label { margin: 0; background: var(--rd-white); border: 2px solid var(--rd-forest-ink); border-radius: 8px; padding: 14px 14px 10px; }
.rd-bbf-label + .rd-bbf-label { margin-top: 14px; }
.rd-bbf-label h4 { margin: 0; font-size: 19px; font-weight: 800; color: #111; padding-bottom: 6px; border-bottom: 6px solid #111; }
.rd-bbf-who { margin: 6px 0 4px; font-size: 13.5px; color: var(--rd-muted); }
.rd-bbf-line { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid #c9c9c9; font-size: 15px; }
.rd-bbf-line > span:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.rd-bbf-line.rd-strong { font-weight: 800; color: #111; }
.rd-bbf-para { padding: 8px 0; border-bottom: 1px solid #e3e3e3; }
.rd-bbf-para:last-child { border-bottom: 0; }
.rd-bbf-para h5 { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #111; }
.rd-bbf-para p { margin: 0; font-size: 14px; line-height: 1.5; color: #333; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .rd-card .rd-card-links { grid-area: details; margin: 4px 0 0; gap: 2px 14px; }
  .rd-card .rd-card-links .rd-details, .rd-card .rd-card-links .rd-label-link { font-size: 14px; }
}
/* A phone: the sheet rises from the bottom, the whole width, the page dimmed above it. */
@media (max-width: 600px) {
  /* At most ~85% of what Safari leaves visible (owner, 18 Oct 2026, night, on his iPhone: the top and ✕ hid under the
     address bar at 92vh — vh is the height with the bars hidden). svh is the height with them shown, so the title and
     ✕ stay on screen either way; the safe areas are kept clear; the title row stays, the details scroll under it. */
  .rd-sheet { align-items: flex-end; padding: env(safe-area-inset-top, 0) 0 0; }
  .rd-sheet-panel { width: 100%; max-height: 85vh; max-height: 85svh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0); }
  .rd-sheet-head { flex: none; }
  .rd-sheet-head { padding: 18px 16px 12px; }
  .rd-sheet-head h2 { font-size: 21px; }
  .rd-sheet-body { padding: 2px 16px 20px; }
  .rd-bbf-toggle { padding: 12px 14px; }
  .rd-bbf-panel { padding: 0 10px 12px; }
}

/* ================================================================ /plans: the Global tab's rows (18 Oct 2026, night) */
/* Every global plan on the Pro Store's Global tab is a covering-plan row (redesign.js globalTab → coverRow; the rules
   above, widened to `.rd-cover-list > a`), each its own card on the page instead of a line in one box. Regions and
   Countries keep their rows. */
body.rd .rd-directory .rd-cover-list { margin: 0 0 14px; }
body.rd .rd-directory .rd-cover-list > :is(a, div).rd-opt-cover { min-height: 0; margin: 0 0 10px; }

/* ================================================================ phones: smaller store controls, bigger prices (18 Oct 2026, night) */
/* Owner, from his phone: the day chips, "Choose your IP" and the Unlimited / Fixed data toggle were too big; the card
   prices too small. ≤760px only — larger screens unchanged. Every control stays a touch target of at least 32px; the
   chips sit closer, so 1–30 takes fewer rows; "Choose your IP" is the chips' height. Logical margins, so RTL mirrors. */
@media (max-width: 760px) {
  .rd-tabs { padding: 3px; border-radius: 12px; }
  .rd-tabs [role="tab"] { min-height: 32px; padding: 4px 18px; font-size: 15px; border-radius: 9px; }
  .rd-days-row { gap: 8px 10px; margin: 14px 0 0; }
  .rd-days { gap: 6px; margin: 14px 0 0; }
  .rd-days-row > .rd-days { margin: 0; }
  .rd-days .rd-days-label { font-size: 14px; margin: 0; margin-inline-end: 2px; }
  .rd-days button { min-width: 36px; min-height: 34px; padding: 0 7px; font-size: 14px; border-radius: 10px; }
  .rd-ip { max-width: 100%; }
  .rd-ip-btn { min-height: 34px; max-width: 100%; padding: 0 11px 0 9px; gap: 6px; font-size: 14px; border-radius: 10px; }
  .rd-ip-btn > span:not(.rd-ip-chev) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rd-ip-btn .rd-ico { width: 16px; height: 16px; flex: none; }
  /* The price: the card's whole first line from the label's end (it no longer widens the right-hand column, so the
     words on the left keep their room), fluid, ~44px at 393px; redesign.js priceFit shrinks a row of long prices to fit. */
  /* The label and its "Suggested" may part onto two lines (a flex row can wrap; the text and the badge had no break
     between them, so a long label ran under the price). */
  .rd-card .rd-label { justify-self: start; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .rd-card.rd-suggested .rd-label::after { margin: 0; }
  .rd-card .rd-price { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: center; white-space: nowrap; font-size: var(--rd-price-fs, clamp(30px, calc(11.2 * var(--rd-vw)), 46px)); line-height: 1.05; }
  /* Prices too long to grow beside the label (e.g. "Rp 176,000" next to "Everyday · Suggested"): today's place and size. */
  .rd-cards.rd-price-col .rd-card .rd-price { grid-column: 2; font-size: 28px; }
  /* The card's full width below its first line (owner, 18 Oct 2026, late night: the price column reserved the right side
     all the way down, so "500 MB a day at full / speed" wrapped): the name left and the price right on the first line,
     "7 days total" under the price; then the plan's lines across the whole card; then "Plan details" / "Broadband Facts"
     with Buy on the right of the last line. */
  /* No empty middle (owner, 19 Oct 2026: "make it narrower on a small screen … just cut off an empty space in middle"):
     "7 days total" sits under the name, the big price beside both, so the plan's lines start right under them — the
     tall price no longer leaves a blank line on the left and a lone "7 days total" on the right. */
  .rd-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price" "term price" "list list" "foot foot"; row-gap: 2px; }
  .rd-card .rd-label { grid-area: label; align-self: end; }
  .rd-card .rd-price { grid-area: price; grid-column: 2; grid-row: 1 / span 2; }
  .rd-card .rd-term { grid-area: term; justify-self: start; text-align: start; align-self: start; margin: 0; }
  .rd-card ul { grid-area: list; margin: 10px 0 6px; }
  /* The last line is the card's whole width: "Plan details" on the left, Buy on the right of the same line (one cell, the
     price's column no longer narrows it). */
  .rd-card .rd-card-links { grid-area: foot; justify-self: start; align-self: center; margin: 0; }
  .rd-card .rd-buy { grid-area: foot; align-self: center; }
  /* redesign.js priceFit: where Buy would run into the links (a long "Buy …"), it takes the whole width at the bottom. */
  .rd-card.rd-buy-row { grid-template-areas: "label price" "term price" "list list" "foot foot" "buy buy"; }
  .rd-card.rd-buy-row .rd-buy { grid-area: buy; }
  .rd-card.rd-buy-row .rd-buy { justify-self: end; }
  /* Buy about half as wide (owner, 18 Oct 2026, night, on the live site): "Buy now →", compact, on the right of the
     "Plan details" line; the plan's lines a touch smaller only where one would wrap (redesign.js priceFit). */
  .rd-card .rd-buy-long { display: none; }
  .rd-card .rd-buy-short { display: inline; }
  .rd-card .rd-buy { justify-self: end; min-height: 44px; padding: 0 16px; white-space: nowrap; }
  .rd-card ul { font-size: var(--rd-line-fs, 14.5px); }
  .rd-card .rd-card-links a { white-space: nowrap; } /* "Plan details →" never breaks before its arrow; where it and Buy cannot share the line, Buy takes the next one (rd-buy-row) */
}

/* ================================================================ /plans: Regions as rows, Countries as one search and A to Z (18 Oct 2026, night) */
/* Coordinator's order: the Regions tab is the covering-plan rows (the rules above, `.rd-cover-list > a`) with no field and
   no chips; the Countries tab is one countries-only search (the same field as the top's) and the reader's alphabet —
   letters as buttons, each opening its own plain list of country links in place. */
.rd-az { display: grid; gap: 18px; text-align: start; }
.rd-store.rd-country-search { margin: 0; text-align: start; max-width: 560px; width: 100%; }
.rd-country-search .rd-combobox { max-width: none; margin: 0; }
.rd-country-search .rd-combobox .rd-field { min-height: 54px; }
.rd-country-search .rd-combobox .rd-field input { font-size: 16px; }
.rd-country-search .rd-listbox { top: calc(100% + 6px); }
.rd-az-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-az-letter { all: unset; box-sizing: border-box; cursor: pointer; min-width: 42px; height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--rd-line-strong); background: var(--rd-white); color: var(--rd-forest); font-weight: 700; font-size: 17px; line-height: 1; transition: background-color var(--rd-t-ctrl) var(--rd-ease), border-color var(--rd-t-ctrl) var(--rd-ease); }
.rd-az-letter:hover { border-color: var(--rd-forest); }
.rd-az-letter[aria-expanded="true"] { background: var(--rd-forest); border-color: var(--rd-forest); color: var(--rd-cream); }
.rd-az-letter:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-az-panel { background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: var(--rd-r-card); padding: 12px 18px; }
.rd-az-panel[hidden] { display: none; }
.rd-az-list { list-style: none; margin: 0; padding: 0; columns: 3 190px; column-gap: 28px; }
.rd-az-list li { break-inside: avoid; margin: 0; padding: 7px 0; }
.rd-az-list a { color: var(--rd-forest-ink); text-decoration: none; font-size: 16px; line-height: 1.35; }
.rd-az-list a:hover { color: var(--rd-forest); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .rd-az-letter { min-width: 40px; height: 40px; font-size: 16px; padding: 0 8px; }
  .rd-az-panel { padding: 8px 14px; }
  .rd-az-list { columns: 2 140px; column-gap: 18px; }
}

/* ================================================================ the field's list scrolls inside itself (18 Oct 2026, late night) */
/* A popular country is in almost every plan: the list is capped (redesign.js capList: about three and a half plan rows,
   less where the screen has less room) and scrolls inside itself without moving the page behind it; its header stays at
   the top; a soft fade at the bottom says there are more rows, until the last one is in view. */
.rd-listbox { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: 36px; }
.rd-listbox > .rd-group { position: sticky; top: -6px; z-index: 3; background: var(--rd-cream-3); margin: -6px -6px 0; padding-left: 18px; padding-right: 18px; }
.rd-listbox > .rd-list-fade { position: sticky; bottom: -6px; height: 36px; margin: -36px -6px -6px; list-style: none; pointer-events: none; background: linear-gradient(to bottom, rgba(249, 248, 243, 0), var(--rd-cream-3) 85%); }
/* ================================================================ /plans: the Regions tab by continent (18 Oct 2026, night) */
/* One closed row per continent — its name, how many plans, from the cheapest — that opens its covering-plan rows below
   it (redesign.js `continents`); one open at a time. */
.rd-continents { display: grid; gap: 10px; }
.rd-cont { margin: 0; border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-card); background: var(--rd-white); overflow: hidden; }
.rd-cont.rd-open { border-color: var(--rd-forest); box-shadow: var(--rd-shadow); }
.rd-cont-h { margin: 0; font: inherit; }
.rd-cont-head { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; min-height: 60px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 14px 18px; text-align: start; }
.rd-cont-head:hover { background: var(--rd-cream-3); }
.rd-cont-head:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: -3px; }
.rd-cont-name { font-size: 18px; font-weight: 700; color: var(--rd-forest-ink); }
.rd-cont-count { font-size: 14.5px; color: var(--rd-muted); }
.rd-cont-from { margin-inline-start: auto; font-weight: 700; color: var(--rd-forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-cont-count + .rd-cont-chev { margin-inline-start: auto; }
.rd-cont-chev { flex: none; width: 9px; height: 9px; margin: -4px 4px 0 8px; border-right: 2px solid var(--rd-forest); border-bottom: 2px solid var(--rd-forest); transform: rotate(45deg); transition: transform var(--rd-t-ctrl) var(--rd-ease); }
.rd-cont-head[aria-expanded="true"] .rd-cont-chev { transform: rotate(-135deg); margin-top: 4px; }
body.rd .rd-directory .rd-cont-panel { margin: 0; padding: 10px 12px 2px; background: var(--rd-cream-3); border: 0; border-top: 1px solid var(--rd-line); border-radius: 0; box-shadow: none; }
.rd-cont-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rd-cont-chev { transition: none; } }
@media (max-width: 560px) {
  .rd-cont-head { padding: 12px 14px; min-height: 54px; }
  .rd-cont-name { font-size: 17px; }
  body.rd .rd-directory .rd-cont-panel { padding: 8px 8px 0; }
}

/* ================================================================ /plans: cards, the tab's field, the filters (18 Oct 2026, night) */
/* A covering plan on a /plans tab is a card (div.row.rd-row, redesign.js coverCard) whose NAME is the link, stretched over
   the whole card, and whose count is its own button that opens the plan's countries in place — two controls side by
   side, neither inside the other. (The row rules above match `.rd-cover-list > :is(a, div)` for it.) */
.rd-cover-list > .rd-row { position: relative; cursor: pointer; }
.rd-row .rd-row-link { color: inherit; text-decoration: none; }
.rd-row .rd-row-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rd-row .rd-row-link:focus-visible { outline: none; }
.rd-cover-list > .rd-row:has(.rd-row-link:focus-visible) { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-row .rd-count-btn, .rd-row .rd-countries-panel, .rd-row .rd-cheapest { position: relative; z-index: 1; }
.rd-row .rd-count-btn { text-underline-offset: 5px; }
.rd-row .rd-plan-sep { color: var(--rd-muted); }
/* With its countries open, the globe and the arrow stay beside the name, not halfway down the list. */
.rd-cover-list > .rd-row:has(.rd-countries-inplace:not([hidden])) { align-items: flex-start; }
.rd-cover-list > .rd-row:has(.rd-countries-inplace:not([hidden])) > :is(.rd-ico, .rd-opt-tick) { margin-top: 2px; }
.rd-countries-panel.rd-countries-inplace { position: relative; left: auto; top: auto; transform: none; width: auto; max-height: 340px; grid-column: 1 / -1; margin: 4px 0 0; box-shadow: none; cursor: auto; font-weight: 400; }
/* "Where are you going?" at the top of the Regions and Global tabs: the home's field, the width of the tab. */
.rd-store.rd-tab-field { margin: 0 0 14px; text-align: start; max-width: 720px; }
.rd-tab-field-h { margin: 0 0 8px; font-size: 18px; color: var(--rd-forest-ink); }
.rd-tab-field .rd-combobox { max-width: none; margin: 0; }
.rd-tab-field .rd-combobox .rd-field { min-height: 54px; }
.rd-tab-field .rd-combobox .rd-field input { font-size: 16px; }
.rd-tab-field .rd-listbox { top: calc(100% + 6px); }
/* The filters: a speed is an unlimited plan's, so with "Fixed data" chosen the speeds are greyed out. */
body.rd .rd-directory .bundle-filters .chip:disabled { opacity: .45; cursor: not-allowed; }
.rd-filters-none { margin: 4px 0 14px; }
/* On a phone each group of chips is one line that scrolls sideways inside itself (the page never does): three short lines
   instead of seven before the first plan. */
@media (max-width: 560px) {
  body.rd .rd-directory .bundle-filters.rd-filters { display: grid; gap: 8px; min-width: 0; }
  body.rd .rd-directory .bundle-filters.rd-filters .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; scroll-padding-inline: 16px; }
  body.rd .rd-directory .bundle-filters.rd-filters .chips::-webkit-scrollbar { display: none; }
  body.rd .rd-directory .bundle-filters.rd-filters .chip { flex: none; white-space: nowrap; }
}
.rd-tab-matches .rd-state { margin: 0 0 14px; }

/* ================================================================ the directory's field: "Go to France →" (18 Oct 2026, night) */
/* With one country in the top field of "Destinations & plans", the list opens on the country's own page, then the plans. */
.rd-listbox > li.rd-opt-goto { font-weight: 700; color: var(--rd-forest); }
.rd-listbox > li.rd-opt-goto .rd-opt-name { color: inherit; font-weight: 700; }
/* The chips wrap inside the top field as they do in the home's (its markup has no .rd-field-main): France and "+ Add a
   country" never make the field wider than its column on a phone. */
.rd-store-nav .rd-combobox .rd-field { flex-wrap: wrap; min-width: 0; }
.rd-store-nav .rd-chip-host { display: contents; }
.rd-store-nav .rd-combobox .rd-field.rd-has-chips input { flex: 1 1 0px; min-width: 0; }
.rd-store-nav .rd-combobox .rd-field.rd-has-chips.rd-typing input { flex-basis: 120px; min-width: 120px; }

/* ================================================================ destination pages: a more compact top (18 Oct 2026, night) */
/* Owner, from France at ~1000px: "more compact and neat, not crowded, still aligned" — the gaps above the hero, around the
   "Unlimited data options · Choose your speed · No registration" strip and before "<Country> eSIM plans" were about twice what
   they need to be, and the hero's own spacing a little loose. Every country, region and global page (one template). Roughly
   half the gaps, fluid; the hero's lines a little closer; on a computer the picture is the words' height — its top on the
   kicker line, its bottom on the network line — cropped to fit (cover), never stretched. On a 1440 × 900 laptop the
   Unlimited / Fixed toggle and the day buttons are now on the first screen. The lower half of the page is not touched, nor the
   About and How it works pages, whose tops are built the same way (hence #shop-screen, the destination pages' own box). */
/* Owner, 19 Oct 2026, night: "I MEANT TO BRING SHIT UP - NOT TO COMPRESS IT VERTICALLY" — the picture-cropping and the hero's
   inner tightening are REMOVED: the hero (words and picture, at the picture's own proportions) is exactly as before; only the
   empty space above it and between it and the plans is smaller, so everything sits higher. */
@media (min-width: 761px) {
  body.rd #shop-screen .ed-hero { margin-top: clamp(12px, calc(1.8 * var(--rd-vw)), 26px); padding-top: clamp(6px, calc(1.2 * var(--rd-vw)), 17px); }
  body.rd #shop-screen p.trust-row { margin-top: clamp(12px, calc(1.6 * var(--rd-vw)), 23px); padding: 12px 0; }
  body.rd .rd-dest-store { margin-top: clamp(14px, calc(1.7 * var(--rd-vw)), 24px); }
}
@media (min-width: 761px) and (max-width: 900px) {
  body.rd #shop-screen .ed-hero { gap: 20px; }
}
/* Phones: the same reduction where there is slack, the words still easy to read. */
@media (max-width: 760px) {
  body.rd #shop-screen .ed-hero { margin-top: 20px; padding-top: 8px; padding-bottom: 4px; gap: 16px; }
  body.rd #shop-screen .ed-hero .eyebrow { margin-bottom: 10px; }
  body.rd #shop-screen .ed-hero .lede { margin-top: 12px; }
  body.rd #shop-screen .ed-hero .price-pill { margin-top: 14px; }
  body.rd #shop-screen .ed-hero .actions.ed-actions { margin-top: 18px; }
  body.rd #shop-screen .ed-hero .kicker { margin-top: 14px; }
  body.rd #shop-screen p.trust-row { margin-top: 16px; padding: 12px 0; }
  body.rd .rd-dest-store { margin-top: 24px; }
  body.rd .rd-dest-store > .rd-center h2 { line-height: 1.2; }
  body.rd .rd-dest-store .rd-tabs { margin-top: 14px; }
}

/* ================================================================ phones: the app badges as wide as the panel (18 Oct 2026, night) */
/* Owner, on the live site on his iPhone: the App Store and Google Play badges a little bigger, the pair as wide as the green
   "Where are you going?" panel under it, centred, a small gap between them — the official artwork at its own proportions;
   and the Trustpilot line a little further above them ("before too much space, now too close, barely more"): +8px.
   Each badge's share of the row is its artwork's width at the same height (App Store 119.66 × 40, or its language's
   width; Google Play 504 × 150 = 134.4 × 40), so the two come out the same height and fill the row exactly. Never wider
   than 400px (a large phone held sideways, a small tablet). The whole field still fits the first screen with the cookie
   question on an iPhone SE, an iPhone 15 and a small Android, in all eighteen languages (redesignHero.browser.test.ts). */
@media (max-width: 760px) {
  body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-trust { margin-bottom: 18px; }
  body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges { display: block; }
  body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-buttons { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; width: 100%; max-width: 400px; margin: 0 auto; }
  body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-badge { flex: 119.66 1 0; min-width: 0; }
  body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-badge.play { flex: 134.4 1 0; }
  body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges img { width: 100%; height: auto; }
  /* Apple's artwork is narrower in Japanese and Chinese, wider in Canadian French and Korean. */
  html:lang(ja) body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-badge:not(.play),
  html:lang(zh) body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-badge:not(.play) { flex-grow: 108.85; }
  html:lang(fr) body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-badge:not(.play) { flex-grow: 126.51; }
  html:lang(ko) body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-badges .store-badge:not(.play) { flex-grow: 129.7; }
}
/* A short phone (iPhone SE, a small Android): the line +8px too (6 → 14px); the bigger badges and that space are paid for
   with small cuts elsewhere — the Trustpilot line's own line height, 4px above the panel and 2px from each of the gaps above the hero, above
   the line, inside the panel's top and under its heading — so the whole field stays above the cookie
   question in the longest languages (Russian, Ukrainian, Filipino). */
@media (max-width: 760px) and (max-height: 760px) {
  body.rd .rd-hero { margin-top: 8px; }
  body.rd .rd-hero > .rd-hero-words .rd-hero-more { margin-top: 6px; }
  body.rd .rd-hero > .rd-hero-words .rd-hero-more .rd-trust { margin-bottom: 14px; line-height: 1.2; }
  body.rd .rd-hero + .rd-store { margin-top: 6px; padding-top: 10px; }
  body.rd .rd-hero + .rd-store > h2 { margin-bottom: 6px; }
}

/* ================================================================ the page's width cap (19 Oct 2026, night) */
/* A window wider than --page-max draws the page it draws at 910px (see :root): the fluid sizes use --rd-vw, capped at that
   width (here and, through var(--rd-vw, 1vw), in style.css — the classic pages, which never load this file, keep 1vw).
   What is left are the few rules that change above 910px on a media query of their own: each is held at its 910px
   value here. */
@media (min-width: 911px) {
  /* The home's app badges: their 761–1100px size. */
  body.rd .rd-hero-more .rd-badges img { height: 44px; }
  /* Help's topics: two columns, as under 960px. */
  .rd-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ Log in / Sign up: the two buttons (19 Oct 2026, night) */
/* Owner's screenshot: "Continue with Apple" was a white box inside a wider black one (on a phone in dark mode Apple's
   own picture came white, inside our black capsule; app.js now always asks for the black one on these pages), and both
   buttons were centred, to the right of the heading's edge. Now: one solid button each, Apple's black with its white mark
   and words (Apple's picture, centred on the same black, so there is no box inside), Google's white with a hairline and
   its "G"; the same width (the column, at most 400px), height and corners; on the heading's edge, 12px apart; a ring only
   for the keyboard. Log in and Sign up, every language, right to left too. */
body.rd .idps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: 400px; margin: 18px 0 10px; }
body.rd .idps .idp { width: 100%; min-height: 52px; margin: 0; padding: 0 18px; border: 1.5px solid transparent; border-radius: 12px; font-size: 16px; font-weight: 650; }
body.rd .idps .idp-apple, body.rd .idps .idp-apple.has-face { background: #000; border-color: #000; color: #fff; overflow: hidden; }
body.rd .idps .idp-apple.has-face { padding: 0; }
body.rd .idps .idp-apple.has-face .idp-face { width: 300px; max-width: 100%; height: auto; margin: 0 auto; }
body.rd .idps .idp-google { background: #fff; border-color: var(--rd-line-strong); color: #1f1f1f; }
body.rd .idps .idp-apple:hover { border-color: #000; }
body.rd .idps .idp-google:hover { border-color: var(--rd-forest); }
body.rd .idps .idp:focus { outline: none; }
body.rd .idps .idp:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 3px; }

/* ================================================================ "Pick a plan" in My eSIM (owner, 19 Oct 2026) */
/* The home's own field, opened inside the empty "Your eSIMs" card by its one button (redesign.js pickPlan): the home's
   look, with a heading sized for a card, not for a page. Once it opens, the dashed box around "Nothing bought yet" steps
   back and the card's sides narrow a little, so the three cards have the room they have on the home (the 910px page). */
.rd-acct .acct-empty .rd-pick-store { margin: 4px 0 0; }
.rd-acct .acct-empty:has(.rd-pick-store) { padding: 4px 0 0; border: 0; background: none; color: var(--rd-forest-ink); }
.rd-acct .rd-panel:has(.rd-pick-store) { padding-left: clamp(16px, 2vw, 22px); padding-right: clamp(16px, 2vw, 22px); }
.rd-acct .rd-pick-store > h2 { font-size: clamp(19px, 2vw, 22px); margin: 0 0 12px; color: var(--rd-forest); }
.rd-acct .rd-pick-store .rd-results:empty { display: none; }
/* The card never grows to the field's widest line (two popular chips side by side made it 24px wider than a phone). */
.rd-acct-overview { grid-template-columns: minmax(0, 1fr); }
.rd-acct .rd-pick-store { min-width: 0; max-width: 100%; }
.rd-acct .rd-pick-store .rd-combobox { min-width: 0; max-width: min(720px, 100%); }
.rd-acct .rd-pick-store .rd-popular .rd-pop { box-sizing: border-box; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Owner, 19 Oct 2026, night, with the ORIGINAL design as the reference ("it was initially like this … then i asked you to make
   app buttons aligned with the bottom of the picture. then asked to make it smaller so the pic doesnt go on second line on
   small screen"): the hero keeps its original composition (big picture beside a three-line headline, page capped at 910px).
   The height-based shrinking tried earlier that night is GONE — never shrink the hero by window height again. On a computer
   the words sit at the foot of the hero, so the app badges' bottom lines up with the picture's bottom. */
@media (min-width: 761px) { .rd-hero { grid-template-rows: minmax(0, 1fr) auto auto auto auto 0; } }

/* Owner, 19 Oct 2026, night (Destinations & plans field, screenshot of its open list): "it's too thick … or just increase the width
   of the field", then: "entering field can stay same width as it is now - but the field below can be wider". On a computer the
   typing field keeps its width; only the list under it is 640px wide (over the picture), so each plan row fits on fewer lines. */
@media (min-width: 761px) { .rd-page-hero .rd-store-nav { position: relative; z-index: 6; } .rd-page-hero .rd-store-nav .rd-listbox { width: 640px; max-width: calc(100vw - 2 * var(--rd-gutter, 16px)); right: auto; } }

/* Owner, 19 Oct 2026, night, from a small iPhone: "bring that sentence 'save with...' higher to the bigger slogan - put it in
   two lines to fit. but there has to be a space between slogan and trustpilot". On a phone the support line sits right under
   the headline, beside the picture (two lines), and the Trustpilot line keeps a clear gap under the picture. */
@media (max-width: 560px) {
  .rd-hero { grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto; }
  .rd-hero > .rd-hero-art { grid-row: 2 / 6; }
  .rd-hero > .rd-hero-words > h1 { grid-row: 3; }
  .rd-hero > .rd-hero-words > .rd-support { grid-column: words-start / words-end; grid-row: 4; margin-top: 6px; }
  body.rd .rd-hero > .rd-hero-words > .rd-hero-more { grid-row: 6; margin-top: 18px; }
}


/* Owner, 19 Oct 2026, night, on the checkout: "why one field is thick and create a lot of empty space, and another half is narrow
   and long and you have to scroll half a mile? can you make it so all on one page?". On a computer the plan card is the narrower
   column and the payment column the wider one (Stripe lays its card fields side by side, so it is much shorter); the plan rows
   use a tighter label column so their values do not stack word by word. */
@media (min-width: 761px) {
  .rd-two-col.rd-co { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* both cards the same width (owner, 20 Oct 2026) */
  .rd-co-plan .rd-co-line { grid-template-columns: 26px 78px minmax(0, 1fr) auto; column-gap: 10px; }
  .rd-co-plan .rd-co-v { font-size: 16px; }
}

/* Owner, 19 Oct 2026, night: less space on country/region pages, the plan choice higher; the hero lines under the name. */
@media (min-width: 761px) { body.rd .rd-dest-store { margin-top: 6px; } }
body.rd #shop-screen .ed-hero .kicker { display: block; margin-top: 8px; }
body.rd #shop-screen .ed-hero .rd-hotspot { margin-top: 4px; }
body.rd #shop-screen .rd-hero-countries { margin: 4px 0 0; }
body.rd #shop-screen .rd-hero-countries > summary { cursor: pointer; display: inline-block; font-size: 18px; font-weight: 600; color: var(--rd-forest); text-decoration: underline; text-underline-offset: 4px; list-style: none; }
body.rd #shop-screen .rd-hero-countries > summary::-webkit-details-marker { display: none; }
body.rd #shop-screen .rd-hero-countries[open] .countries { margin-top: 10px; max-height: 260px; overflow: auto; padding: 12px; background: var(--rd-white); border: 1px solid var(--rd-line); border-radius: 14px; position: relative; z-index: 3; }

/* Owner, 19 Oct 2026, night (home hero): "keep it as it is, just put back a wider version of this pic" — on a computer the picture
   is wider again (50 units instead of 40.56), the headline beside it wraps as in the original design. Phones unchanged. */
@media (min-width: 761px) { .rd-hero { --rd-art-w: clamp(140px, calc(calc(50 * var(--rd-vw)) + 4px), 600px); } }

/* Owner, 19 Oct 2026, night (home, computer): "bring this slogan slightly higher so there is a space between it and trustpilot". */
@media (min-width: 761px) { .rd-hero > .rd-hero-words > .rd-hero-more { margin-top: clamp(22px, calc(3.4 * var(--rd-vw)), 40px); } }

/* Owner, 19 Oct 2026, night (home, computer), with the original design again: "keep all the same, just insert a full, not cropped
   picture". On a computer the whole picture shows (no faded edges), as wide as in the original (~56% of the page). */
@media (min-width: 761px) {
  .rd-hero { --rd-art-w: clamp(140px, calc(calc(52 * var(--rd-vw)) + 4px), 600px); }
  .rd-hero-art img { -webkit-mask-image: none; mask-image: none; }
}

/* Owner, 19 Oct 2026, night: English headline always three lines on a computer ("speed" on the first), and no re-wrapping of the
   words while the window is resized, so the hero only scales smoothly. Phones: the breaks are hidden. */
.rd-hero h1 .rd-br { display: none; }
@media (min-width: 761px) {
  .rd-hero h1 .rd-br { display: inline; }
  .rd-hero h1:has(.rd-br) { white-space: nowrap; }
  html[lang="en"] .rd-hero .rd-support { white-space: nowrap; }
}

/* Owner, 19 Oct 2026, night, from his iPhone: "on smaller screens you can make picture bigger. text and pic can slightly intersect".
   Phones (560px and under): the picture ~28% bigger (44 units instead of 34) and the words may run over its first 26%; the English
   headline stays three lines (measured at 393 and 375 wide). */
@media (max-width: 560px) { .rd-hero { --rd-art-w: clamp(120px, calc(calc(44 * var(--rd-vw)) + 4px), 600px); --rd-art-over: calc(var(--rd-art-w) * .26); } }

/* Owner, 19 Oct 2026, night, from his iPhone: "put \"that fit your needs\" on second line when screen gets smaller" (English). */
.rd-hero .rd-br-ph { display: none; }
@media (max-width: 560px) { .rd-hero .rd-br-ph { display: inline; } }

/* The deals (owner, 20 Oct 2026): Marketing's banner behind real promoted plans; words on the left 55%. */
.rd-deals{margin:18px 0 6px}
.rd-deal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;border-radius:18px}
.rd-deal-track::-webkit-scrollbar{display:none}
.rd-deal-slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:10/3;min-height:128px;border:0;border-radius:18px;padding:14px 16px;cursor:pointer;text-align:left;color:#fff;display:flex;align-items:center;
  background:#b0203f url('/app/home/banners/banner_deal-1200.jpg') right center/cover no-repeat;font:inherit}
@media (min-resolution:2dppx){.rd-deal-slide{background-image:url('/app/home/banners/banner_deal.jpg')}}
.rd-deal-words{display:flex;flex-direction:column;gap:2px;max-width:55%;min-width:0}
/* As the apps (20 Oct 2026): "Until" beside the tag; place, plan and prices one line each, the banner's left 55% calm. */
.rd-deal-top{display:flex;align-items:center;gap:6px;min-width:0}
.rd-deal-place,.rd-deal-plan,.rd-deal-top .rd-deal-until{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rd-deal-tag{align-self:flex-start;background:#fff;color:#a81a3d;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 9px}
.rd-deal-place{font-size:18px;line-height:1.2}
.rd-deal-plan{font-size:14px;opacity:.92}
.rd-deal-prices{display:flex;align-items:baseline;gap:8px}
.rd-deal-price{font-size:24px;font-weight:800}
.rd-deal-was{opacity:.8;font-size:14px}
.rd-deal-until{font-size:12px;font-weight:600;opacity:.92}
.rd-deal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.rd-deal-dots{display:flex;gap:6px}
.rd-deals-more{border:0;background:none;color:var(--forest,#0b3d2e);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:4px 0}
.rd-deal-slide{text-decoration:none}
.rd-deal-dots span{width:7px;height:7px;border-radius:50%;background:var(--line,#d9ded6)}
.rd-deal-dots span.on{background:var(--forest,#0b3d2e)}
.rd-deals-all{width:min(640px,calc(100vw - 32px));max-height:85vh;border:0;border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.rd-deals-all::backdrop{background:rgba(11,61,46,.35)}
.rd-deals-head{display:flex;justify-content:space-between;align-items:center}
.rd-deals-head h2{margin:0;font-size:20px}
.rd-deals-close{border:0;background:none;font-size:26px;cursor:pointer;line-height:1}
.rd-deals-q{width:100%;margin:12px 0;padding:10px 14px;border:1px solid var(--line,#cfd6cc);border-radius:12px;font:inherit}
.rd-deals-group h3{margin:14px 0 8px;font-size:16px}
.rd-deals-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line,#e2e6df);border-radius:12px;margin-bottom:8px;color:inherit;text-decoration:none}
.rd-deals-row .rd-deal-until{color:#c2185b;opacity:1}
.rd-deals-row .rd-deal-price{font-size:17px}
/* Phones: the apps' sizes (place 15, plan 12, price 22), so a slide never runs past its banner. */
@media (max-width:560px){.rd-deal-slide{padding:10px 12px}.rd-deal-place{font-size:15px}.rd-deal-plan{font-size:12px}.rd-deal-slide .rd-deal-price{font-size:22px}.rd-deal-slide .rd-deal-was{font-size:12px}.rd-deal-tag{font-size:10px;padding:2px 7px}}
.rd-deals-row .rd-deal-was{color:#6b7280}
.rd-deals-row-words{display:flex;flex-direction:column}
.rd-deals-none{color:#6b7280}
/* Promotions marked as in the apps (owner, 20 Oct 2026): the old price crossed above (only where the server gives one), the
   price in the promotion's colour, "Until 20 Nov" in the PROMOTION tag's colours; the same one-word tag on a bundle's row. */
.rd-card .rd-price .rd-promo-line { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-bottom: 3px; line-height: 1.2; }
.rd-card .rd-price .rd-was { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--rd-muted, #6b7a72); text-decoration: line-through; white-space: nowrap; }
@media (max-width: 760px) { .rd-card .rd-price .rd-promo-line { justify-content: flex-end; } }
.rd-card .rd-price .rd-now { display: block; }
.rd-card .rd-price.rd-promo-price .rd-now { color: #bf2966; }
.rd-card .rd-price .rd-promo-until { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #fff; padding: 2px 7px; border-radius: 999px; background: linear-gradient(90deg, #6b299e, #db387a); white-space: nowrap; }
.rd-promo-tag { display: inline-block; vertical-align: middle; margin-inline-start: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; color: #fff; padding: 1px 6px; border-radius: 999px; background: linear-gradient(90deg, #6b299e, #db387a); white-space: nowrap; }
/* "Sort by" under the top cards, only while all the options are open (owner, 20 Oct 2026). */
.rd-cards > .rd-sort { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 4px 2px -4px; font-size: 14px; color: var(--rd-muted, #5f6f66); }
.rd-cards > .rd-sort select { font: inherit; font-weight: 600; color: var(--rd-forest); background: #fff; border: 1px solid var(--rd-line, #d9ded6); border-radius: 999px; padding: 6px 30px 6px 12px; cursor: pointer; }
/* Computers: the promotion's date and old price stacked small BESIDE the big price, so the card is no taller (owner, 20 Oct 2026). */
@media (min-width: 761px) {
  .rd-card .rd-price.rd-promo-price { display: flex; align-items: center; gap: 10px; }
  .rd-card .rd-price.rd-promo-price .rd-now { order: 1; }
  .rd-card .rd-price.rd-promo-price .rd-promo-line { order: 2; flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; }
}

/* THE SPEED FILTER in "Plans that cover all of them" (owner, 23 Oct 2026): a small button like "Choose your IP", options under the line. */
.rd-group-speed { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rd-speed-btn { all: unset; cursor: pointer; box-sizing: border-box; min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--rd-white); border: 1px dashed var(--rd-line-strong); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--rd-forest); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.rd-speed-btn:hover { border-color: var(--rd-forest); }
.rd-speed-btn.rd-on { border-style: solid; border-color: var(--rd-forest); background: var(--rd-sage); }
.rd-speed-btn:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: 2px; }
.rd-speed-opts { list-style: none; padding: 2px 12px 10px; }
/* "a small neat field uncovers, not new buttons" (owner, 23 Oct 2026): one bordered box, a row per speed, the chosen one ticked. */
.rd-speed-opts > div { display: flex; flex-direction: column; margin-inline-start: auto; width: min(100%, 300px); border: 1px solid var(--rd-line-strong); border-radius: var(--rd-r-ctl); background: var(--rd-white); overflow: hidden; }
.rd-speed-opt { all: unset; cursor: pointer; box-sizing: border-box; min-height: 38px; padding: 6px 12px 6px 30px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--rd-forest); font-size: 14px; line-height: 1.2; }
.rd-speed-opt + .rd-speed-opt { border-top: 1px solid var(--rd-line); }
.rd-speed-opt:hover { background: var(--rd-cream-3); }
.rd-speed-opt[aria-checked="true"] { background: var(--rd-sage); }
.rd-speed-opt[aria-checked="true"]::before { content: "✓"; position: absolute; inset-inline-start: 11px; font-weight: 700; }
.rd-speed-opt:focus-visible { outline: 3px solid var(--rd-terracotta); outline-offset: -3px; }
.rd-speed-name { font-weight: 600; }
.rd-speed-from { font-size: 12px; color: var(--rd-muted); white-space: nowrap; }
.rd-speed-from b { font-size: 14px; font-weight: 700; color: var(--rd-forest); }
/* A covering row that lists several speeds, each with its own price: smaller figures so the row stays short. */
.rd-kind-multi > .rd-rate b { font-size: 18px; }