/* Public site pages (home, country pages and /countries, the Ambassador program, the Sponsor
   landing, the explainer, legal pages, photo credits), in the "Caribbean light" look and
   Ambassador-first. Builds on the base.css tokens and components; this file holds only what these
   pages need beyond them. Every rule is scoped to a class, because the coming-soon page loads this
   file too (for its footer links) and must otherwise look exactly as before: never style a bare
   element or .eyebrow, .mark, .sun, .line, .stage, .sea, .horizon or .foot here.
   Logical properties only (the css-logical gate). */

/* ==== Shared pieces ============================================================================ */

/* Red-coral words keep AA on shell, sand, foam and white (base.css), not on the peach glow of the
   /ambassadors hero: there the eyebrow turns lagoon (no drawn sun in front of it: the owner's logo
   leads the header, and a second mark just under it would compete). */
.amb-hero .eyebrow { margin-inline: auto; font-size: 1rem; color: var(--lagoon-deep); }

/* Breadcrumb: Home › Countries › Canada */
.crumbs { padding-block-start: var(--space-2xs); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; list-style: none; padding: 0; font: 700 1rem/1.3 var(--display); color: var(--ink-soft); }
.crumbs li { display: flex; align-items: center; gap: 0.6rem; max-inline-size: none; }
.crumbs li + li::before { content: "›"; font-size: 1.3rem; color: var(--field); }
.crumbs a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* A small drawing (site/_art.twig). */
.art { display: block; inline-size: 100%; block-size: auto; }

/* Flags (site/_flag.twig): a small drawn flag, or a neutral tag with the country's code. */
.flag {
  position: relative;
  display: block;
  flex: none;
  inline-size: 2.85rem;
  block-size: 1.9rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px -6px rgb(18 52 61 / 0.55);
}
.flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(18 52 61 / 0.16); }
.flag svg { display: block; inline-size: 100%; block-size: 100%; }
.flag-sm { inline-size: 1.9rem; block-size: 1.27rem; border-radius: 5px; }
.flag-lg { inline-size: 4.1rem; block-size: 2.75rem; border-radius: 12px; }
.flag-code {
  display: grid;
  place-items: center;
  background: var(--sand);
  box-shadow: none;
  font: 900 0.8rem/1 var(--display);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.flag-code::after { box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.flag-sm.flag-code { font-size: 0.6rem; }
.flag-lg.flag-code { font-size: 1.15rem; }

/* The empty round frame of a person still to come (never a face before M3). */
.empty-frame { position: relative; display: block; inline-size: 5.9rem; block-size: 5.9rem; }
.empty-frame > .art {
  inline-size: 100%;
  block-size: 100%;
  padding: 4px;
  border: 3px dashed var(--lagoon);
  border-radius: 50%;
  background: var(--white);
}
.empty-frame .flag { position: absolute; inset-inline-end: -0.4rem; inset-block-end: 0; inline-size: 2.4rem; block-size: 1.6rem; box-shadow: 0 0 0 3px var(--white), 0 6px 12px -6px rgb(18 52 61 / 0.6); }
.empty-frame-large { inline-size: 13rem; block-size: 13rem; }
.empty-frame-large > .art { padding: 9px; border: 4px dashed var(--coral-deep); }
.empty-frame-large .flag { inline-size: 4.1rem; block-size: 2.75rem; inset-inline-end: 0; inset-block-end: 0.6rem; box-shadow: 0 0 0 5px var(--white), 0 10px 18px -10px rgb(18 52 61 / 0.7); }
.empty-frame-small { inline-size: 4.8rem; block-size: 4.8rem; }
.medal {
  position: absolute;
  inset-inline-end: -0.4rem;
  inset-block-start: -0.2rem;
  display: grid;
  place-items: center;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  border-radius: 50%;
  background: linear-gradient(165deg, #ffd66e, var(--coral) 78%);
  box-shadow: 0 0 0 3px var(--white);
  font: 900 0.9rem/1 var(--display);
  color: var(--ink);
}
/* A star, never a number: people are featured, countries are never ranked. */
.medal .icon { inline-size: 1.5rem; block-size: 1.5rem; }
:is(.medal, .one-badge) .icon .icon-accent-gold { fill: var(--white); }

/* "Coming soon" and "Draft" tags */
.soon-tag, .draft-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  inline-size: fit-content;
  padding-block: 0.15rem;
  padding-inline: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 1.5px var(--gold-line);
  font: 800 0.95rem/1.3 var(--display);
  color: var(--ink);
}
.draft-tag { border-radius: 8px; margin: 0; }
.draft-tag .icon { inline-size: 1.1rem; block-size: 1.1rem; }

/* The big round icon beside a title (rules, legal pages) */
.big-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 6.3rem;
  block-size: 6.3rem;
  border-radius: 50%;
  background: var(--foam);
  box-shadow: inset 0 0 0 2px var(--foam-deep);
  color: var(--ink);
}
.big-icon .icon { inline-size: 3.4rem; block-size: 3.4rem; stroke-width: 1.5; }

/* Lists with a mark: a tick in a disc (yes) or a cross in a coral disc (never). */
.marks { list-style: none; padding: 0; display: grid; gap: var(--space-xs); margin-block-start: var(--space-s); }
.marks li { position: relative; padding-inline-start: 2.4rem; line-height: 1.45; }
.marks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  border-radius: 50%;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-disc-check) center / contain no-repeat;
  mask: var(--icon-disc-check) center / contain no-repeat;
}
.marks-no li::before {
  background: var(--coral-ink);
  -webkit-mask: none;
  mask: none;
}
.marks-no li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.42rem;
  inset-block-start: 0.42rem;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  background: linear-gradient(45deg, transparent 43%, var(--white) 43%, var(--white) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--white) 43%, var(--white) 57%, transparent 57%);
}
.dots { list-style: none; padding: 0; display: grid; gap: 0.4rem; margin-block-start: var(--space-2xs); }
.dots li { position: relative; padding-inline-start: 1.3rem; line-height: 1.45; }
.dots li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--lagoon); }

.numbered { list-style: none; padding: 0; display: grid; gap: var(--space-s); counter-reset: numbered; }
.numbered li { counter-increment: numbered; position: relative; min-block-size: 2.6rem; padding-inline-start: 3.4rem; padding-block-start: 0.35rem; font-size: var(--text-l); line-height: 1.5; }
.numbered li::before {
  content: counter(numbered);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(165deg, #ffd66e, var(--coral) 78%);
  color: var(--ink);
  font: 900 1.15rem/1 var(--display);
}

/* ---- "Where are you moving from?" ------------------------------------------------------------ */

.picker {
  position: relative;
  z-index: 2;
  padding-block: 1.5rem;
  padding-inline: clamp(1rem, 3vw, 1.7rem);
  border-radius: 32px;
  background: var(--white);
  box-shadow: var(--shadow-l);
}
.picker-flat { box-shadow: var(--shadow); }
.picker-title { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); font-weight: 900; letter-spacing: -0.015em; }
.picker-title .icon { inline-size: 1.8rem; block-size: 1.8rem; color: var(--lagoon-deep); }
.flag-tiles { list-style: none; padding: 0; display: grid; gap: 0.65rem; margin-block-start: var(--space-s); grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: none; }
.flag-tiles li { max-inline-size: none; }
@media (min-width: 48rem) {
  .flag-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.flag-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  block-size: 100%;
  min-block-size: 4.1rem;
  padding-block: 0.6rem;
  padding-inline: 0.75rem;
  border: 2px solid var(--sand-deep);
  border-radius: 20px;
  background: var(--shell);
  color: var(--ink);
  font: 800 1.05rem/1.2 var(--display);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}
.flag-tile:hover { border-color: var(--lagoon-deep); background: var(--white); color: var(--ink); transform: translateY(-2px); }
.flag-tile-all { background: var(--foam); border-color: var(--foam-deep); color: var(--lagoon-deep); }
.flag-tile-all:hover { color: var(--lagoon-deep); }
.flag-globe { display: grid; place-items: center; flex: none; inline-size: 2.85rem; block-size: 1.9rem; }
.flag-globe .icon { inline-size: 1.75rem; block-size: 1.75rem; }
.flag-tile-all::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  background: currentColor;
  -webkit-mask: var(--icon-more) center / contain no-repeat;
  mask: var(--icon-more) center / contain no-repeat;
}
[dir="rtl"] .flag-tile-all::after { transform: scaleX(-1); }
/* On a phone: two tiles per row, the flag above the name. */
@media (max-width: 34rem) {
  .flag-tile { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.5rem; min-block-size: 5.5rem; }
  .flag-tile-all::after { display: none; }
}

/* ---- The ticket: a program window (site/_window.twig) ------------------------------------------ */

.window-card {
  --notch: var(--shell);
  position: relative;
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--shadow-l);
}
.band-foam .window-card { --notch: var(--foam); }
.band-sand .window-card { --notch: var(--sand); }
.window-sky { block-size: 7rem; overflow: hidden; border-start-start-radius: 30px; border-start-end-radius: 30px; }
.window-sky .frame { block-size: 100%; aspect-ratio: auto; border-radius: 0; }
.window-top { display: grid; gap: var(--space-2xs); padding-block: 1.3rem 1.4rem; padding-inline: clamp(1.1rem, 3vw, 1.7rem); }
.window-title { margin: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 900; letter-spacing: -0.02em; }
.window-card .countdown-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: fit-content;
  padding-block: 0.45rem;
  padding-inline: 0.8rem 1rem;
  border-radius: 22px;
  background: var(--foam);
  box-shadow: inset 0 0 0 1.5px var(--foam-deep);
  font: 800 1.1rem/1.25 var(--display);
  color: var(--lagoon-deep);
}
.window-card .countdown-status::before {
  content: "";
  flex: none;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  background: currentColor;
  -webkit-mask: var(--countdown-calendar, var(--icon-info)) center / contain no-repeat;
  mask: var(--countdown-calendar, var(--icon-info)) center / contain no-repeat;
}
.window-card .countdown-open .countdown-status { color: var(--ok); background: var(--ok-tint); box-shadow: inset 0 0 0 1.5px #9ccfae; }
.window-prize { display: flex; align-items: flex-start; gap: 0.6rem; margin-block-start: var(--space-2xs); font: 800 1.05rem/1.4 var(--display); }
.window-prize .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.window-bottom {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding-block: 1.4rem 1.1rem;
  padding-inline: clamp(1.1rem, 3vw, 1.7rem);
  border-block-start: 3px dashed var(--sand-deep);
  text-align: center;
}
/* The ticket's notches, cut in the colour of the band behind it. */
.window-bottom::before, .window-bottom::after {
  content: "";
  position: absolute;
  inset-block-start: -0.95rem;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  border-radius: 50%;
  background: var(--notch);
}
.window-bottom::before { inset-inline-start: -0.9rem; }
.window-bottom::after { inset-inline-end: -0.9rem; }
.window-bottom .hint { margin: 0; }
.window-bottom p + p { margin-block-start: 0; }
/* The actions stack full width inside the ticket. */
.window-bottom .early-actions { inline-size: 100%; justify-items: center; }
.window-bottom .early-buttons { flex-direction: column; inline-size: 100%; }
.window-bottom .early-action { inline-size: 100%; }
.window-bottom .early-buttons .button { inline-size: 100%; }
/* At 320 px a little less padding, so three equal tiles still hold the unit words. */
@media (max-width: 22.5rem) {
  .window-top, .window-bottom { padding-inline: 0.9rem; }
}

/* ---- Path cards (site/_path_cards.twig) ------------------------------------------------------------ */

.path-cards { list-style: none; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); margin-block-start: var(--space-l); max-inline-size: none; }
.path-cards li { max-inline-size: none; }
.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.path-card:hover { border-color: var(--lagoon-line); color: var(--ink); transform: translateY(-3px); }
.path-art { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.path-art img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.path-body {
  display: grid;
  gap: 0.25rem;
  padding-block: 1rem 1.2rem;
  padding-inline: 1.2rem 3.8rem;
  position: relative;
  flex: 1;
}
.path-body::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-more) center / contain no-repeat;
  mask: var(--icon-more) center / contain no-repeat;
}
.path-card:hover .path-body::after { -webkit-mask-image: var(--icon-more-on); mask-image: var(--icon-more-on); }
[dir="rtl"] .path-body::after { transform: scaleX(-1); }
.path-name { font: 800 1.25rem/1.25 var(--display); color: var(--ink); }
.path-summary { color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
@media (max-width: 34rem) {
  .path-art { aspect-ratio: 2 / 1; }
}

/* ---- Community groups (site/_groups.twig) ------------------------------------------------------------ */

.community { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 48rem) {
  .community { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); }
}
.community-art { display: block; inline-size: 100%; max-inline-size: 24rem; justify-self: center; }
.community-photo { inline-size: 100%; max-inline-size: 22rem; justify-self: center; }
.community-links { list-style: none; padding: 0; display: grid; gap: var(--space-xs); margin-block: var(--space-m); max-inline-size: none; }
.community-links li { max-inline-size: none; }
.community-link {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-block-size: 4.4rem;
  padding-block: 0.75rem;
  padding-inline: 0.75rem 3.4rem;
  border: 2px solid transparent;
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
.community-link::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.9rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-more) center / contain no-repeat;
  mask: var(--icon-more) center / contain no-repeat;
}
[dir="rtl"] .community-link::after { transform: scaleX(-1); }
.community-link:hover { border-color: var(--lagoon-line); color: var(--ink); }
.community-icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--coral-tint); color: var(--ink); }
.community-icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.community-text { display: grid; gap: 0.1rem; }
.community-name { font: 800 1.15rem/1.3 var(--display); color: var(--lagoon-deep); text-decoration: underline 2px var(--lagoon-line); text-underline-offset: 0.2em; }
.community-link:hover .community-name { text-decoration-color: currentColor; }
.community-platform { color: var(--ink-soft); font-size: 0.95rem; }
.community-description { color: var(--ink); font-size: 0.98rem; line-height: 1.45; }

/* ---- People and businesses (site/_people_business.twig, the explainer) --------------------------------- */

.compare { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); margin-block: var(--space-m); }
.compare-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2xs) var(--space-m);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  background: var(--white);
  box-shadow: var(--shadow);
}
/* People are round and soft; businesses are square. The two programs never look alike. */
.compare-ambassador { border-radius: var(--radius-xl); }
.compare-sponsor { border-radius: var(--radius-s); }
.compare-body > :first-child { margin-block-start: 0; }
.compare-body > * + * { margin-block-start: var(--space-xs); }
.compare-body h2, .compare-body h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); font-weight: 900; margin-block-end: var(--space-2xs); }
.compare-look { display: flex; align-items: center; gap: 0.5rem; margin-block-start: var(--space-2xs); font: 700 1rem/1.3 var(--display); color: var(--ink-soft); }
.compare-look .icon { inline-size: 1.3rem; block-size: 1.3rem; color: var(--lagoon-deep); }
.shape { display: inline-grid; place-items: center; flex: none; inline-size: 5.4rem; block-size: 5.4rem; }
.shape .icon { inline-size: 2.6rem; block-size: 2.6rem; }
.shape-round { border-radius: 50%; background: var(--foam); color: var(--ink); box-shadow: 0 0 0 5px var(--coral-tint); }
.shape-square { border-radius: 6px; background: var(--sand); color: var(--ink-soft); border: 2px dashed var(--field); }
@media (max-width: 30rem) {
  .compare-card { grid-template-columns: minmax(0, 1fr); }
  .compare-card .shape { inline-size: 4.4rem; block-size: 4.4rem; }
}
.sponsor-chip {
  display: inline-block;
  padding-block: 0.35rem;
  padding-inline: 0.8rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  font: 800 0.98rem/1.25 var(--display);
}
.label-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: var(--space-s); max-inline-size: none; }
.label-list li { max-inline-size: none; }
.trustline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
  padding-block: 0.8rem;
  padding-inline: 1.2rem;
  border-radius: 22px;
  background: var(--foam);
}
.trustline p { display: flex; align-items: center; gap: 0.6rem; margin: 0; font: 800 1.1rem/1.35 var(--display); }
.trustline p .icon { inline-size: 1.7rem; block-size: 1.7rem; color: var(--lagoon-deep); }
.trustline .more { margin-inline-start: auto; }
@media (max-width: 40rem) {
  .trustline .more { margin-inline-start: 0; }
}

/* ==== Home ===================================================================================== */

.home-hero { position: relative; padding-block-end: var(--space-xs); }
.home-hero-stage { position: relative; }
.home-hero-photo { block-size: clamp(16rem, 52vw, 37rem); aspect-ratio: auto; border-radius: 0; background: #cfdcde; }
.home-hero-photo img { object-position: 0% 38%; }
.home-hero-photo .photo-note { inset-block: 0.9rem auto; inset-inline-start: 0.9rem; font-style: normal; font-family: var(--display); font-weight: 700; }
.home-hero-media { position: relative; }
.home-hero-media > .wave { position: absolute; inset-inline: 0; inset-block-end: -1px; z-index: 1; block-size: clamp(1.8rem, 1rem + 3vw, 3.4rem); }
.home-hero-copy { padding-block: var(--space-m) 0; padding-inline: max(var(--gutter), (100% - var(--content)) / 2); }
.home-hero-copy .display { margin-block: var(--space-2xs) 0; max-inline-size: none; font-size: clamp(2rem, 1rem + 2.6vw, 3.2rem); }
.home-hero-copy .lead { color: var(--ink); max-inline-size: 34ch; margin-block-end: 0; }
.hero-program { margin-block: var(--space-xs) 0; max-inline-size: none; }
.hero-program .more { gap: 0.55rem; }
.hero-program .icon { flex: none; inline-size: 1.45rem; block-size: 1.45rem; }
.home-picker { padding-inline: max(var(--gutter), (100% - var(--content)) / 2); margin-block-start: var(--space-l); }
.home-hero-alt { margin-block-start: var(--space-s); text-align: center; max-inline-size: none; }
/* Wide screens: the words sit on the photo's calm side, and the picker overlaps its bottom. */
@media (min-width: 56rem) {
  .home-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(270deg, rgb(255 250 243 / 0.95) 0, rgb(255 250 243 / 0.82) 32%, rgb(255 250 243 / 0.25) 54%, rgb(255 250 243 / 0) 64%);
  }
  [dir="rtl"] .home-hero-photo::after { background: linear-gradient(90deg, rgb(255 250 243 / 0.95) 0, rgb(255 250 243 / 0.82) 32%, rgb(255 250 243 / 0.25) 54%, rgb(255 250 243 / 0) 64%); }
  .home-hero-photo .photo-note { z-index: 1; }
  .home-hero-copy {
    position: absolute;
    z-index: 1;
    inset-block-start: clamp(2rem, 5vw, 4rem);
    inset-inline-end: max(var(--gutter), (100% - var(--content)) / 2);
    inline-size: min(31rem, 46%);
    padding: 0;
  }
  .home-picker { margin-block-start: -7.5rem; position: relative; z-index: 2; }
}

/* The Ambassador program's launch moment (home; the card is reused in the /ambassadors hero): the
   countdown leads, centred on a white card that warms to coral tint at the top (the big tiles of
   program/_countdown.twig and the two actions, equal width, primary first); below it what an
   Ambassador does, who can become one and how members vote (three across on a computer), then the
   empty frames of "Be the first Ambassador for your country" with their caption. The top of the
   card is coral tint at its strongest, so the small red-coral eyebrow keeps AA (4.6:1; 5.4:1 on
   white). */
.launch { display: grid; gap: var(--space-xl); align-items: start; }
.launch-card {
  display: grid;
  gap: var(--space-m);
  justify-items: center;
  inline-size: 100%;
  max-inline-size: 54rem;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-inline: clamp(1.1rem, 0.6rem + 2.2vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--coral-tint) 0, var(--white) 9rem), var(--white);
  box-shadow: var(--shadow-l);
  text-align: center;
}
.launch-card > * { margin: 0; }
.launch-card :is(.countdown, .early-actions) { justify-items: center; }
.launch-card .countdown-when { margin-inline: auto; }
/* The two actions: one column of equal buttons, primary first. */
.launch-card .early-buttons { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; max-inline-size: 26rem; margin-inline: auto; }
.launch-card .early-buttons .button { inline-size: 100%; }
.launch-card .early-hint { margin-inline: auto; }
/* A bigger clock where there is room for it (on a phone the tiles share the width, program.css). */
@media (min-width: 40rem) {
  .launch-card .countdown-large .countdown-tile { min-inline-size: clamp(6rem, 3rem + 8vw, 10rem); }
  .launch-card .countdown-large .countdown-num { font-size: clamp(3rem, 1.4rem + 4.8vw, 5.75rem); }
}
.launch-eyebrow { color: var(--coral-ink); }
.launch-title { font-size: var(--h2); letter-spacing: -0.02em; }
.launch-learn { display: grid; gap: var(--space-l); }
.launch-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-m); max-inline-size: none; }
@media (min-width: 48rem) {
  .launch-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
}
.launch-point { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); gap: var(--space-s); align-items: start; max-inline-size: none; }
.launch-point-icon { display: grid; place-items: center; inline-size: 3.3rem; block-size: 3.3rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-s); }
.launch-point-icon .icon { inline-size: 1.8rem; block-size: 1.8rem; }
.launch-point h3 { margin: 0; font-size: var(--h3); font-weight: 900; }
.launch-point p { margin-block: var(--space-3xs) 0; color: var(--ink-soft); }
.launch-first { display: grid; gap: var(--space-s); justify-items: center; padding-block-start: var(--space-m); border-block-start: 3px dashed var(--lagoon-line); text-align: center; }
.launch-first > * { margin: 0; }
.launch-first-title { font: 800 1rem/1.3 var(--display); color: var(--ink); }
.launch-first .waiting { margin-block-start: 0; gap: var(--space-s); justify-content: center; }
.launch-first .waiting li { inline-size: 5.6rem; font-size: 0.95rem; }
.launch-first .empty-frame { inline-size: 5rem; block-size: 5rem; }

/* /ambassadors: the same card, centred in the hero. */
.amb-launch { justify-items: center; max-inline-size: 46rem; margin-block-start: var(--space-l); margin-inline: auto; text-align: center; }
.amb-launch .countdown, .amb-launch .early-actions { justify-items: center; }
.amb-launch .early-buttons { justify-content: center; }
.become-cta { display: grid; justify-items: center; margin-block-start: var(--space-xl); text-align: center; }
.become-cta .early-buttons { justify-content: center; }

/* "Be the first Ambassador for your country": the empty frames, each with a flag */
.waiting { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-m); margin-block-start: var(--space-l); max-inline-size: none; }
.waiting li { display: grid; justify-items: center; align-content: start; gap: 0.6rem; inline-size: 6.4rem; max-inline-size: none; text-align: center; font: 800 1rem/1.25 var(--display); }
@media (max-width: 34rem) {
  .waiting { justify-content: center; gap: var(--space-s) var(--space-xs); }
  .waiting li { inline-size: 7rem; }
}

/* How it works: three drawings joined by a dotted line */
.home-how h2 { margin-block-end: var(--space-l); }
.how-steps { list-style: none; padding: 0; display: grid; gap: var(--space-l); max-inline-size: none; margin-block-end: var(--space-l); }
.how-step { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-m); row-gap: 0.25rem; align-content: start; max-inline-size: none; }
.how-step > :not(.how-art) { grid-column: 2; }
.how-step h3 { margin: 0; font-size: 1.35rem; font-weight: 900; }
.how-step p { margin: 0; color: var(--ink-soft); }
/* "Ambassador program starts {date}": plain text that wraps on a phone (a flex row would not), in
   balanced, centred lines, so a last word never sits alone on the second line and a wrapped tag
   keeps even space on both sides. */
.how-step .soon-tag { display: block; margin: 0; border-radius: var(--radius); text-align: center; text-wrap: balance; }
.how-art {
  position: relative;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, var(--white) 0, #f0faf8 45%, var(--foam) 72%);
  box-shadow: inset 0 0 0 2px var(--foam-deep);
}
.how-art .art { inline-size: 64%; }
.how-num {
  position: absolute;
  inset-inline-start: -0.3rem;
  inset-block-start: -0.3rem;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: linear-gradient(165deg, #ffd66e, var(--coral) 78%);
  box-shadow: 0 0 0 4px var(--shell);
  font: 900 1rem/1 var(--display);
  color: var(--ink);
}
.how-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 6.2rem calc(var(--space-l) * -1 + 0.4rem);
  inset-inline-start: 2.6rem;
  border-inline-start: 4px dotted var(--lagoon);
}
/* A narrow phone: the drawing sits above its words, which get the whole width (at 320 px a
   side column left about 150 px for "Ambasador" or "przeprowadzkę"). */
@media (max-width: 26rem) {
  .how-step { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; }
  .how-step > :not(.how-art) { grid-column: 1; }
  .how-art { grid-row: auto; inline-size: 4.5rem; block-size: 4.5rem; }
  .how-step h3 { font-size: 1.25rem; }
  .how-step:not(:last-child)::after { display: none; }
}
@media (min-width: 48rem) {
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  .how-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 0.4rem; }
  .how-step > :not(.how-art) { grid-column: 1; }
  .how-step p { max-inline-size: 26ch; }
  /* The tag stays on one line on a desktop: free of the words' 26ch measure, and allowed a third
     of the gap on each side (two neighbours never meet). */
  .how-step .soon-tag { max-inline-size: none; margin-inline: calc(var(--space-xl) / -3); }
  .how-art { grid-row: auto; inline-size: 8rem; block-size: 8rem; margin-block-end: var(--space-2xs); }
  .how-num { inline-size: 2.5rem; block-size: 2.5rem; font-size: 1.2rem; }
  .how-step:not(:last-child)::after {
    inset-block: 3.9rem auto;
    inset-inline-start: calc(50% + 4.8rem);
    inline-size: calc(100% - 9.6rem + var(--space-xl));
    border-inline-start: 0;
    border-block-start: 4px dotted var(--lagoon);
  }
}

/* Life in the Dominican Republic: arched photos with a short caption */
.life { list-style: none; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: var(--space-l); max-inline-size: none; }
.life li { max-inline-size: none; }
@media (min-width: 56rem) {
  .life { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
}
/* The column never grows past its cell: a long caption word ("Bezpośrednie" in Polish) is
   hyphenated (base.css, where the browser knows the language) or else broken, instead of widening
   the photo and scrolling a 320 px phone sideways. */
.life-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin: 0; }
.life-item .frame-arch { aspect-ratio: 3 / 4; box-shadow: 0 24px 40px -28px rgb(18 52 61 / 0.65); }
.life-item .photo-note { font-size: 0.8rem; }
.life-item > figcaption { display: flex; align-items: flex-start; gap: 0.5rem; font: 800 1.1rem/1.25 var(--display); }
.life-item > figcaption > span { min-inline-size: 0; overflow-wrap: break-word; }
.life-item > figcaption .icon { inline-size: 1.6rem; block-size: 1.6rem; }
@media (max-width: 34rem) {
  .life-item .photo-note { display: none; }
}
/* Below 360 px the icon sits above the caption, so a long word keeps the whole column. */
@media (max-width: 22.5rem) {
  .life-item > figcaption { flex-direction: column; gap: 0.2rem; font-size: 1rem; }
}

/* ==== Country pages ================================================================================ */

.country-hero { display: grid; gap: var(--space-l); align-items: center; padding-block: var(--space-s) var(--space-xl); }
@media (min-width: 48rem) {
  .country-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 3.5rem); }
}
.country-hero h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.3rem); hyphens: manual; }
.country-hero .cluster { margin-block-start: var(--space-m); }
.country-art { justify-self: center; inline-size: 100%; max-inline-size: 26rem; }
.country-art .frame-arch { aspect-ratio: 4 / 5; }
.flag-pill {
  position: absolute;
  z-index: 3;
  inset-inline-start: -0.4rem;
  inset-block-end: 22%;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-inline-size: calc(100% - 1rem);
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-l);
  font: 900 1.2rem/1.1 var(--display);
}
@media (min-width: 48rem) {
  .flag-pill { inset-inline-start: -1.2rem; inset-block: 30% auto; font-size: 1.35rem; }
}
@media (max-width: 47.99rem) {
  /* The sun behind the photo would widen a phone screen: keep it inside the column. */
  .country-hero { overflow-x: clip; }
  .country-art { order: -1; max-inline-size: 22rem; }
  .country-art .frame-arch { aspect-ratio: 1; border-radius: 50% 50% var(--radius-l) var(--radius-l) / 44% 44% var(--radius-l) var(--radius-l); }
}

/* One column on a phone that never grows past the screen (a long Polish word in a heading would
   otherwise widen an auto column: /pl/canada scrolled sideways at 320 px). From 52rem the round
   frame sits beside the Ambassador card alone (a little larger, so the two balance) and the
   movers' card runs across the whole width under them, its button at the end. */
.first-country { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); align-items: center; margin-block-start: var(--space-l); }
.first-country > .first-art { margin-block-end: var(--space-s); }
@media (min-width: 52rem) {
  .first-country { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 3.5rem); }
  .first-country > .first-art { margin-block-end: 0; }
  .first-country .empty-frame-large { inline-size: 15rem; block-size: 15rem; }
  .first-country > .mover-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-l); align-items: center; }
  .first-country > .mover-card > * { grid-column: 1; }
  .first-country > .mover-card > .mover-go { grid-column: 2; grid-row: 1 / span 2; }
  .first-country > .mover-card .button { margin-block-start: 0; }
}
.first-art { position: relative; display: grid; justify-items: center; gap: var(--space-s); isolation: isolate; }
.first-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -2rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(19rem, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd2ad 0, #ffe6cf 40%, rgb(255 238 222 / 0) 70%);
}
[dir="rtl"] .first-art::before { translate: 50% 0; }
.first-cap { margin: 0; font: 900 1.3rem/1.3 var(--display); text-align: center; }
.first-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
.mover-card { display: grid; justify-items: start; gap: var(--space-2xs); border-radius: 28px; }
.mover-card h3 { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-size: 1.4rem; font-weight: 900; }
.mover-card h3 .icon { box-sizing: content-box; flex: none; inline-size: 1.5rem; block-size: 1.5rem; padding: 0.55rem; border-radius: 50%; background: var(--coral-tint); }
.mover-card p { margin: 0; color: var(--ink-soft); }
.mover-card .button { margin-block-start: var(--space-2xs); }

.guides-band { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 48rem) {
  .guides-band { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 3.5rem); }
}
.guides-art { display: block; inline-size: 100%; max-inline-size: 22rem; justify-self: center; border-radius: var(--radius-l); }
.guides-band h2 { margin-block-start: 0; }

.country-else-band { padding-block-start: var(--space-m); }
.country-else {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  padding-block: 1.4rem;
  padding-inline: clamp(1.1rem, 3vw, 1.7rem);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.country-else h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.else-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: var(--space-2xs); }

/* /countries */
.countries-head { padding-block: var(--space-s) var(--space-l); }
.countries-head h1 { margin: 0; }
.countries-head .lead { margin-block-end: 0; }
.countries-top { padding-block-end: var(--space-xl); }
.az-letters { margin-block: var(--space-m) var(--space-l); }
.az-letters ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; max-inline-size: none; }
.az-letters li { max-inline-size: none; }
.az-letters a {
  display: grid;
  place-items: center;
  min-inline-size: var(--tap);
  min-block-size: var(--tap);
  padding-inline: 0.5rem;
  border-radius: 14px;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--sand-deep);
  font: 900 1.1rem/1 var(--display);
  color: var(--lagoon-deep);
  text-decoration: none;
}
.az-letters a:hover { box-shadow: inset 0 0 0 2px var(--lagoon-deep); color: var(--lagoon-deep); }
.az { display: grid; gap: var(--space-l); }
.az-group { scroll-margin-block-start: var(--space-m); }
.az-letter {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block: 0 var(--space-xs);
  border-radius: 50%;
  background: linear-gradient(165deg, #ffd66e, var(--coral) 78%);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
}
.az-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); max-inline-size: none; }
.az-list li { max-inline-size: none; }
.az-country {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  block-size: 100%;
  min-block-size: 3.1rem;
  padding-block: 0.45rem;
  padding-inline: 0.7rem;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font: 700 1.05rem/1.25 var(--display);
  text-decoration: none;
}
.az-country:hover { border-color: var(--lagoon-line); color: var(--ink); }

/* ==== /ambassadors =============================================================================== */

.amb-hero {
  padding-block: var(--space-l) var(--space-2xl);
  padding-inline: var(--gutter);
  text-align: center;
  background: radial-gradient(circle 17rem at 50% -1.5rem, #ffd2ad 0, #ffe6cf 38%, rgb(255 238 222 / 0) 70%), linear-gradient(180deg, var(--foam) 0, var(--shell) 78%);
}
.amb-hero-inner { max-inline-size: var(--content); margin-inline: auto; }
.amb-hero .display { max-inline-size: 17ch; margin-inline: auto; }
.amb-hero .lead { margin-inline: auto; max-inline-size: 40ch; }
.doors { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); max-inline-size: 54rem; margin-inline: auto; margin-block-start: var(--space-xl); text-align: start; }
.doors li { max-inline-size: none; }
@media (min-width: 44rem) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 32px;
  background: var(--white);
  box-shadow: var(--shadow-l);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.door:hover { transform: translateY(-3px); border-color: var(--lagoon-line); color: var(--ink); }
.door .frame { aspect-ratio: 16 / 10; border-radius: 0; }
.door-body { position: relative; display: grid; gap: 0.2rem; padding-block: 1.1rem 1.3rem; padding-inline: 1.3rem 5rem; }
.door-who { font: 800 1rem/1.3 var(--display); color: var(--coral-ink); }
.door-title { font: 900 clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.015em; }
.door-go { font: 800 1.05rem/1.3 var(--display); color: var(--lagoon-deep); text-decoration: underline 2px var(--lagoon-line); text-underline-offset: 0.26em; }
.door-arrow {
  position: absolute;
  inset-inline-end: 1.3rem;
  inset-block-end: 1.6rem;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 4px 0 var(--coral-deep);
  color: var(--ink);
}
.door-arrow .icon { inline-size: 1.4rem; block-size: 1.4rem; stroke-width: 3; }
[dir="rtl"] .door-arrow .icon { transform: scaleX(-1); }

.amb-why h2 { margin-block-start: 0; }
.traits { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-m); max-inline-size: none; }
.trait {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 3.1rem;
  padding-block: 0.35rem;
  padding-inline: 0.35rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow);
  font: 800 1.1rem/1.2 var(--display);
  max-inline-size: none;
}
.trait-icon { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: var(--foam); }
.trait-icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.dodont { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); }
@media (min-width: 48rem) {
  .dodont { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.do-card, .dont-card { border-radius: 30px; }
.dont-card { background: #fff5f0; box-shadow: inset 0 0 0 2px #f5c7b6; }
.do-card h3, .dont-card h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.4rem; font-weight: 900; }
.do-card h3 .icon, .dont-card h3 .icon { inline-size: 1.8rem; block-size: 1.8rem; }
.amb-find { margin-block-start: var(--space-l); }
@media (min-width: 44rem) {
  .dates.dates-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.become { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 52rem) {
  .become { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: clamp(2rem, 5vw, 4rem); }
}
.become h2 { margin-block-start: 0; }
.become-art { position: relative; justify-self: center; inline-size: 100%; max-inline-size: 22rem; }
.become-art > img { display: block; inline-size: 100%; block-size: auto; }
.mini-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  inline-size: 12.5rem;
  margin-block-start: -1.6rem;
  margin-inline: auto;
  padding-block: 1rem 0.8rem;
  padding-inline: 0.8rem;
  border-radius: 26px;
  background: var(--white);
  box-shadow: var(--shadow-l);
  text-align: center;
  rotate: -2deg;
}
.ribbon { padding-block: 0.25rem; padding-inline: 0.6rem; border-radius: 10px; background: linear-gradient(165deg, #ffd66e, var(--coral) 78%); font: 900 0.9rem/1.25 var(--display); color: var(--ink); text-wrap: balance; }
.mini-line { font: 700 0.95rem/1.3 var(--display); color: var(--ink-soft); }
.become-lists { display: grid; gap: var(--space-s); margin-block-start: var(--space-m); }
@media (min-width: 40rem) {
  .become-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.list-card { padding: 1.2rem 1.3rem; border-radius: 24px; }
.list-card h3, .get-card h3 { margin: 0; font-size: 1.3rem; font-weight: 900; }
.get-card { margin-block-start: var(--space-s); padding-block: 1.2rem; padding-inline: 1.4rem; border-radius: 26px; background: linear-gradient(160deg, #fff4dc, #ffe9df); box-shadow: inset 0 0 0 2px #f3cf86; }
.get-card ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-block-start: var(--space-2xs); }
.get-card li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; align-items: start; line-height: 1.45; }
.get-card li .icon { inline-size: 1.45rem; block-size: 1.45rem; margin-block-start: 0.1rem; color: var(--lagoon-deep); }
.get-card .get-star { margin-block-start: 0.3rem; padding-block-start: 0.7rem; border-block-start: 2px dashed #f0c98f; font: 800 1.1rem/1.4 var(--display); }
.get-card .get-star .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--ink); }
.voting-window { max-inline-size: 30rem; margin-block-start: var(--space-xl); }
.bizline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin-block-start: var(--space-m); max-inline-size: none; }
.bizline .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--ink-soft); }
.bizline a { display: inline-flex; align-items: center; min-block-size: var(--tap); font-family: var(--display); font-weight: 800; }
@media (min-width: 60rem) {
  .become-window, .voting-window { max-inline-size: none; }
  :is(.become-window, .voting-window) .window-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
  :is(.become-window, .voting-window) .window-bottom { border-block-start: 0; border-inline-start: 3px dashed var(--sand-deep); align-content: center; }
  :is(.become-window, .voting-window) .window-bottom::before { inset-block-start: -0.95rem; inset-inline-start: -1.05rem; }
  :is(.become-window, .voting-window) .window-bottom::after { inset-block: auto -0.95rem; inset-inline-start: -1.05rem; inset-inline-end: auto; }
}

.voting-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); }
.voting-head h2 { margin: 0; }
.vote-steps { list-style: none; padding: 0; display: grid; gap: 0; margin-block-start: var(--space-l); max-inline-size: none; }
/* align-content: start keeps every step's title at the same height across the row (a stretched
   row otherwise spreads a short step's number, title and words apart). */
.vote-steps li { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-content: start; column-gap: var(--space-s); padding-block-end: var(--space-m); max-inline-size: none; }
.vote-steps li > :not(.vote-num) { grid-column: 2; }
.vote-steps h3 { margin: 0.55rem 0 0; font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.vote-steps p { margin-block-start: 0.3rem; line-height: 1.45; color: var(--ink-soft); }
.vote-steps .vote-when { font-weight: 700; color: var(--ink); }
.vote-num {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  border-radius: 50%;
  background: linear-gradient(165deg, #ffd66e, var(--coral) 78%);
  box-shadow: 0 0 0 5px var(--shell), 0 12px 22px -12px rgb(226 98 63 / 0.9);
  font: 900 1.4rem/1 var(--display);
  color: var(--ink);
}
.vote-steps li:not(:last-child)::after { content: ""; position: absolute; inset-block: 3.8rem 0.3rem; inset-inline-start: 1.45rem; border-inline-start: 4px dotted var(--lagoon); }
@media (min-width: 60rem) {
  .vote-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-s); }
  .vote-steps li { grid-template-columns: minmax(0, 1fr); padding-block-end: 0; }
  .vote-steps li > :not(.vote-num) { grid-column: 1; }
  .vote-num { grid-row: auto; }
  .vote-steps h3 { margin-block-start: var(--space-s); }
  .vote-steps li:not(:last-child)::after { inset-block: 1.5rem auto; inset-inline: 4rem -0.6rem; border-inline-start: 0; border-block-start: 4px dotted var(--lagoon); }
}
.one-box { display: grid; gap: var(--space-s) var(--space-m); align-items: center; margin-block-start: var(--space-l); padding-block: 1.4rem; padding-inline: clamp(1.1rem, 3vw, 1.7rem); border-radius: 30px; background: var(--foam); }
@media (min-width: 40rem) {
  .one-box { grid-template-columns: auto minmax(0, 1fr); }
}
.one-badge { display: grid; place-items: center; inline-size: 5rem; block-size: 5rem; border-radius: 50%; background: linear-gradient(165deg, #ffd66e, var(--coral) 78%); box-shadow: 0 0 0 7px var(--white); color: var(--ink); }
.one-badge .icon { inline-size: 2.9rem; block-size: 2.9rem; }
.one-box h3 { margin: 0; font-size: 1.4rem; font-weight: 900; }
.one-box p { margin-block-start: 0.3rem; }
.rule-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-block-start: var(--space-xs); max-inline-size: none; }
.rule-chips li { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.4rem; padding-block: 0.3rem; padding-inline: 0.45rem 0.8rem; border-radius: var(--radius-pill); background: var(--white); font: 800 1rem/1.3 var(--display); max-inline-size: none; }
.rule-chips .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--lagoon-deep); }

.dates-band { position: relative; isolation: isolate; padding-block: clamp(4rem, 3rem + 6vw, 8rem); padding-inline: var(--gutter); }
.dates-photo.frame { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; border-radius: 0; }
.dates-photo img { object-position: 50% 55%; }
.dates-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(18 52 61 / 0.12), rgb(18 52 61 / 0) 40%, rgb(18 52 61 / 0.2)); }
.dates-panel { max-inline-size: 52rem; margin-inline: auto; padding: clamp(1.1rem, 3vw, 1.9rem); border-radius: 36px; background: rgb(255 250 243 / 0.97); box-shadow: var(--shadow-l); }
.dates-panel h2 { margin-block-start: 0; }
.dates { list-style: none; padding: 0; display: grid; gap: var(--space-s); margin-block: var(--space-m) var(--space-s); max-inline-size: none; }
@media (min-width: 44rem) {
  .dates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.date { display: grid; justify-items: start; align-content: start; gap: 0.4rem; padding-block: 1.1rem 1.2rem; padding-inline: 1.1rem; border-radius: 24px; background: var(--white); box-shadow: inset 0 0 0 2px var(--sand-deep); max-inline-size: none; }
.date-label { font: 800 1.05rem/1.3 var(--display); color: var(--ink-soft); }
.date-when { font: 900 1.3rem/1.25 var(--display); }
.date-fixed { background: var(--gold-tint); box-shadow: inset 0 0 0 2px #efc970; }
.date-fixed .icon-tile { background: var(--white); }

.rules-row { display: grid; gap: var(--space-m) var(--space-l); align-items: center; }
@media (min-width: 40rem) {
  .rules-row { grid-template-columns: auto minmax(0, 1fr); }
}
.rules-row h2 { margin-block-start: 0; }
.rule-links { gap: 0.2rem var(--space-l); }

/* ==== Documents: the Ambassador rules and the legal pages ============================================ */

.doc-hero { padding-block: var(--space-l) var(--space-m); }
.doc-hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); max-inline-size: 50rem; margin-inline: auto; }
.doc-hero-inner > div { flex: 1 1 18rem; }
.doc-hero h1 { margin: 0; }
.doc-hero .lead { margin-block-end: 0; }
.doc-hero .back { margin-block-end: var(--space-2xs); }
/* One calm column: paragraphs keep base.css's 66-character measure. */
.reading { inline-size: 100%; max-inline-size: 50rem; justify-self: center; padding-block-start: var(--space-m); }
.doc-section { margin-block-start: var(--space-xl); }
.doc-section h2 { display: flex; align-items: center; gap: 0.6rem; }
.doc-section h2 .icon { inline-size: 2rem; block-size: 2rem; color: var(--lagoon-deep); }
.doc-foot { margin-block-start: var(--space-xl); }
.your-data { margin-block-start: var(--space-xl); }
.your-data h2 { margin-block-start: 0; }

.doc-meta { color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin-block-end: var(--space-s); font-family: var(--display); font-weight: 700; }
.doc-binding { margin-block: var(--space-s); }
.doc-body { font-size: 1.05rem; line-height: 1.7; }
.doc-body > * + * { margin-block-start: 1rem; }
.doc-body ul, .doc-body ol { padding-inline-start: 1.5rem; display: grid; gap: 0.4rem; }
.doc-body h2 { font-size: 1.6rem; margin-block-start: var(--space-l); }
.doc-body h3 { font-size: 1.3rem; margin-block-start: var(--space-m); }
.doc-original { margin-block: var(--space-m); }
.doc-original summary { cursor: pointer; min-block-size: var(--tap); padding-block: 0.6rem; font: 800 1rem/1.3 var(--display); color: var(--lagoon-deep); }
.doc-original .doc-body { padding-inline-start: 1rem; border-inline-start: 3px solid var(--sand-deep); }
.quote-box { margin-block-start: var(--space-s); padding-block: 1.2rem; padding-inline: 1.4rem; border-radius: var(--radius); background: var(--sand); box-shadow: inset 4px 0 0 var(--coral); }
[dir="rtl"] .quote-box { box-shadow: inset -4px 0 0 var(--coral); }
.quote-box .doc-body { font-weight: 600; }
/* The Code of Conduct is one list: give it room; the words stay exactly as written, with a plain
   marker (a tick would read as approval of "Not buy votes"). */
.conduct .doc-body ul { list-style: none; padding: 0; gap: 0.55rem; }
.conduct .doc-body li { position: relative; padding-block: 0.55rem; padding-inline: 2.2rem 1rem; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.conduct .doc-body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.9rem;
  inset-block-start: 1.15em;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: var(--lagoon);
}
.conduct + .notice { margin-block-start: var(--space-m); }

.table-scroll { overflow-x: auto; margin-block: var(--space-s); border-radius: var(--radius); }
.table-scroll:focus-visible { outline: var(--focus); outline-offset: 3px; }
.cookie-table { border-collapse: collapse; inline-size: 100%; min-inline-size: 40rem; background: var(--white); }
.cookie-table caption { text-align: start; font: 800 1rem/1.3 var(--display); padding-block-end: 0.5rem; }
.cookie-table th, .cookie-table td {
  text-align: start;
  vertical-align: top;
  padding: 0.75rem;
  border: 1px solid var(--sand-deep);
}
.cookie-table thead th { background: var(--sand); font-family: var(--display); }
.cookie-table code { font-size: 0.95rem; overflow-wrap: anywhere; }
.cookie-table tbody th { min-inline-size: 9.5rem; }
.cookie-kind { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; margin-block-start: 0.25rem; }

/* On a phone the table becomes one card per cookie, each field with its own label: nobody has to
   scroll sideways through a table. */
@media (max-width: 40rem) {
  .table-scroll { overflow: visible; }
  .cookie-table { min-inline-size: 0; background: transparent; }
  .cookie-table, .cookie-table caption, .cookie-table tbody, .cookie-table tr, .cookie-table th, .cookie-table td { display: block; }
  .cookie-table thead {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .cookie-table tr {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-s);
    margin-block-end: 1rem;
    padding: 0.5rem 0.25rem;
  }
  .cookie-table th, .cookie-table td { border: 0; padding-block: 0.4rem; }
  .cookie-table td::before { content: attr(data-label); display: block; font-family: var(--display); font-weight: 800; }
}

/* ==== The explainer (/ambassadors-and-sponsors) ======================================================= */

.explainer-head { padding-block: var(--space-m) var(--space-s); }
.explainer-head h1 { max-inline-size: 18ch; margin-inline: auto; }
.shapes-mark { display: flex; justify-content: center; gap: var(--space-s); margin-block-end: var(--space-m); max-inline-size: none; }
.explainer-compare { margin-block-end: var(--space-xl); }
.apart { margin-block-start: var(--space-m); }
.apart-item { display: grid; justify-items: start; align-content: start; gap: var(--space-xs); }
.apart-item p { margin: 0; font-size: var(--text-l); line-height: 1.5; }
.both { display: grid; gap: var(--space-m) var(--space-l); align-items: center; }
@media (min-width: 44rem) {
  .both { grid-template-columns: auto minmax(0, 1fr); }
}
.both h2 { margin-block-start: 0; }
.both-mark { display: flex; align-items: center; gap: 0.6rem; max-inline-size: none; }
.both-plus { font: 900 2rem/1 var(--display); color: var(--coral-ink); }
.disclosure-example { padding-block: 0.8rem; padding-inline: 1.1rem; border-radius: var(--radius); background: var(--sand); font-style: italic; }

/* ==== The Sponsor landing (/sponsors/apply) ============================================================ */

.sponsors-hero { padding-block: var(--space-s) var(--space-xl); }
.sponsors-hero h1 { margin-block: var(--space-2xs) 0; }
.status-card {
  margin-block: var(--space-m) 0;
  padding-block: 1.3rem 1.4rem;
  padding-inline: 1.5rem;
  border-radius: var(--radius-l);
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 2px #f6d189;
}
.status-card h2 { display: flex; align-items: center; gap: 0.6rem; margin-block-start: 0; font-size: 1.45rem; }
.status-card h2 .icon { inline-size: 1.7rem; block-size: 1.7rem; }
.status-open { background: var(--ok-tint); box-shadow: inset 0 0 0 2px #9ccfae; }
.sponsors-art { display: grid; place-items: center; }
/* A business card as Sponsors appear: a square logo, lines of text, the label. No real company. */
.biz-sample {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem 1.1rem;
  align-items: center;
  inline-size: min(100%, 25rem);
  padding: 1.8rem;
  border-radius: var(--radius-s);
  background: var(--white);
  box-shadow: var(--shadow-l);
  rotate: 2deg;
}
.biz-logo { grid-row: span 2; display: grid; place-items: center; inline-size: 6rem; block-size: 6rem; border-radius: 6px; border: 2px dashed var(--field); background: var(--sand); color: var(--ink-soft); }
.biz-logo .icon { inline-size: 2.6rem; block-size: 2.6rem; }
.biz-lines { display: grid; gap: 0.45rem; }
.biz-lines i { display: block; block-size: 0.7rem; border-radius: var(--radius-pill); background: var(--sand-deep); }
.biz-lines i + i { inline-size: 65%; background: var(--sand); }
.biz-sample .sponsor-chip { justify-self: start; }
.service-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-block-start: var(--space-s); max-inline-size: none; }
.service-list li { display: flex; align-items: center; gap: 0.75rem; max-inline-size: none; font: 700 1.05rem/1.35 var(--display); }
.receive { margin-block-start: var(--space-m); }
.receive .card { display: grid; justify-items: start; align-content: start; gap: var(--space-xs); }
.receive .card p { margin: 0; }
.plans-line { margin-block-start: var(--space-l); }
.plans-line h3 { margin-block-start: 0; }
.apart-card { border-radius: var(--radius-s); }
.apart-card h2 { display: flex; align-items: center; gap: 0.6rem; margin-block-start: 0; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); }
.apart-card h2 .icon { inline-size: 1.8rem; block-size: 1.8rem; color: var(--lagoon-deep); }
.sponsor-steps { margin-block: var(--space-m); }

/* ==== Photo credits (/credits) ===================================================================== */

.credits-head { padding-block: var(--space-s) 0; }
.credits-head .icon-tile { margin-block-end: var(--space-2xs); }
.credits-list { list-style: none; padding: 0; margin-block: var(--space-m) var(--space-xl); }
.credit { max-inline-size: none; }
.credit .frame { margin-block-end: var(--space-s); }
.credit-place { margin: 0; font-size: 1.25rem; }
.credit p { margin-block-start: var(--space-3xs); }
.credit .more { font-size: 0.98rem; }
.credits-notes h2 { margin-block-start: 0; font-size: 1.5rem; }

/* ---- Coming-soon page footer (the page's own stylesheet is a verbatim port and stays untouched) ---- */

.foot-links { margin-block-end: 0.5rem; }
.foot-links a { color: var(--ink-soft); text-underline-offset: 0.2em; }
.foot-links a:hover { color: var(--ink); }

@media print {
  .picker, .home-picker, .window-sky, .dates-photo, .doors, .az-letters { display: none !important; }
}