/* Partner onboarding page (on.radicalstorage.com).
   The website's theme, tw-ds V2 (style update 2026-10-12, from the radical-context kit's DESIGN.md,
   itself copied from `global-v2.css` in the frontend monorepo): Sora for titles, kickers and
   figures, Hanken Grotesk for everything else; one blue for actions, links and focus; navy for the
   earnings boards; aqua only on navy; a light ground with the sheet as a white card from 680px;
   pills for buttons, 8px fields, 12px cards. Mobile first, one column, 560px content width.
   Motion: opacity, transform, colour and shadow only. */

/* theme:start · Radical Storage tw-ds V2 · copied from DESIGN.md, edit there */
:root{
  --background:#f6fbfe; --foreground:#13283e;
  --card:#ffffff; --card-foreground:#13283e; --popover:#ffffff; --popover-foreground:#13283e;
  --muted:#ebf4f9; --secondary:#ebf4f9; --accent:#ebf4f9; --input:#ebf4f9; --border:#d8e1e7;
  --secondary-foreground:#415263; --muted-foreground:#60707f; --subtle-foreground:#7d8ea1;
  --placeholder:#60707f; --dark-muted-foreground:#c9d6e2;
  --brand:#3d7ede; --primary:#3d7ede; --primary-strong:#3673d4; --primary-foreground:#ffffff;
  --primary-active:rgba(61,126,222,.15); --accent-foreground:#2b62bd; --link:#2b62bd;
  --link-border:#c8e0ff; --ring:#c8e0ff; --brand-blue-800:#0d2b42;
  --accent-aqua:#55dae1; --accent-teal:#00778d; --accent-orange:#ff832b;
  --success:#edfdf8; --success-foreground:#00778d; --success-border:#b4ecec;
  --warning:#fff8eb; --warning-foreground:#ff832b; --info:#ffffff; --info-foreground:#32cccc;
  --verified:#ecfdfd; --destructive:#db3b28; --destructive-foreground:#fef1f2;
  --label-green:#199d42; --label-yellow:#e5a500; --label-yellow-foreground:#fefefe;
  --star:#ffb800; --star-inactive:#dfe7ee; --backdrop:rgba(13,43,66,.5);
  --footer:#0b1d30; --footer-foreground:#c3cedb; --footer-body-foreground:#a6b4c4;
  --footer-meta-foreground:#91a1b3; --footer-divider:#24384f;

  --font-body:"Hanken Grotesk","Open Sans",ui-sans-serif,sans-serif,system-ui;
  --font-display:"Sora","Open Sans",ui-sans-serif,sans-serif,system-ui;

  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:24px; --radius-full:999px;
  --shadow-xs:0 1px 2px rgb(19 40 62 / 6%);
  --shadow-sm:0 1px 3px rgb(19 40 62 / 10%),0 1px 2px -1px rgb(19 40 62 / 8%);
  --shadow-md:0 4px 8px -2px rgb(19 40 62 / 10%),0 2px 4px -2px rgb(19 40 62 / 8%);
  --shadow-lg:0 12px 28px -6px rgb(19 40 62 / 14%),0 6px 12px -4px rgb(19 40 62 / 8%);
  --shadow-primary:0 10px 22px color-mix(in srgb,var(--primary) 32%,transparent);
  --ease:cubic-bezier(0.4,0,0.2,1); --duration:200ms; --duration-fast:150ms; --scale-active:.96;

  --display-xl:800 37px/39px var(--font-display); --display-xl-ls:-0.04em;
  --display-lg:800 33px/34px var(--font-display); --display-lg-ls:-0.035em;
  --display-md:800 32px/32px var(--font-display); --display-md-ls:-0.035em;
  --display-sm:800 29px/32px var(--font-display); --display-sm-ls:-0.035em;
  --heading-2xl:700 24px/26px var(--font-display); --heading-2xl-ls:-0.03em;
  --heading-xl:800 22px/35px var(--font-display); --heading-xl-ls:-0.03em;
  --heading-lg:700 20px/24px var(--font-display); --heading-lg-ls:-0.025em;
  --heading-md:700 17px/23px var(--font-display); --heading-md-ls:-0.015em;
  --heading-sm:700 16px/19px var(--font-display); --heading-sm-ls:-0.02em;
  --heading-xs:700 15px/25px var(--font-display); --heading-xs-ls:-0.02em;
  --body-lg:400 17px/27px var(--font-body); --body-md:400 15.5px/25px var(--font-body);
  --body-sm:400 15px/24px var(--font-body); --body-xs:400 14px/22px var(--font-body);
  --label-lg:700 15.5px/25px var(--font-display); --label-md:600 15px/24px var(--font-body);
  --label-sm:600 14.5px/23px var(--font-body); --label-xs:600 14px/22px var(--font-body);
  --action-lg:700 18px/26px var(--font-body); --action-md:700 16px/24px var(--font-body);
  --action-sm:700 14px/21px var(--font-body);
  --overline:700 12px/19px var(--font-display); --overline-ls:1.68px;
  --caption:400 13px/21px var(--font-body);
}
@media (min-width:768px){ :root{
  --display-xl:800 48px/51px var(--font-display); --display-lg:800 41px/43px var(--font-display);
  --display-md:800 37px/41px var(--font-display); --display-sm:800 32px/32px var(--font-display);
}}
@media (min-width:992px){ :root{
  --display-xl:800 58px/61px var(--font-display); --display-lg:800 52px/55px var(--font-display);
  --display-md:800 48px/53px var(--font-display); --display-sm:800 46px/46px var(--font-display);
  --heading-2xl:800 30px/48px var(--font-display); --heading-xl:700 24px/26px var(--font-display);
}}
/* theme:end */

/* The page's own tokens: geometry, and two names the script and the navy boards read. */
:root {
  --navy: #13283e;               /* the signature ink: page.js reads --navy (the theme's --foreground) */
  --white: #ffffff;              /* the theme's white (--card, --primary-foreground) as text on navy */
  --gutter: clamp(20px, 5vw, 64px);
  --column: 560px;
}

/* Japanese, Korean and Chinese: the Latin faces have no CJK glyphs. The templates load Noto Sans JP / KR / SC / TC
   only on a ja / ko_kr / zh_cn / zh_tw page (`lang` is the BCP 47 tag: ja-JP, ko-KR, zh-CN, zh-TW); the stacks keep
   Sora and Hanken first (numbers, brand names) and fall to Noto for the rest. Korean wraps between words, not between
   syllables. Greek and Cyrillic fall to the system's sans-serif after the Latin faces. */
:root:lang(ja) {
  --font-display: "Sora", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
}

:root:lang(ko) {
  --font-display: "Sora", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
}

:root:lang(zh-CN) {
  --font-display: "Sora", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
}

:root:lang(zh-TW) {
  --font-display: "Sora", "Noto Sans TC", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Noto Sans TC", ui-sans-serif, system-ui, sans-serif;
}

body:lang(ko) { word-break: keep-all; }

/* ───────── Base ───────── */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--background);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font: var(--body-lg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, dl, dd, fieldset, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-border);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

/* The theme's focus ring (--ring) is 1.35:1 on white: this page gives it the 2px blue inner edge
   DESIGN.md prescribes for forms. Buttons keep tw-ds's own 4px ring (see .btn). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--ring);
  border-radius: var(--radius-sm);
}
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

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

.skip {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 1000;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: var(--label-md);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease);
}
.skip:focus-visible { transform: none; }

/* ───────── Header ───────── */

/* On the ground, no bar: the logo, the fee chip, the language select. */
.top { background: var(--background); }

.top__in {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  min-height: 72px;
}

.top__logo { width: 132px; height: auto; flex: none; }

.lang { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.lang__select {
  appearance: none;
  -webkit-appearance: none;
  height: 48px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2360707F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  color: var(--secondary-foreground);
  font: var(--label-md);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.lang__select:hover { border-color: var(--primary-strong); color: var(--foreground); }
.lang__select:focus-visible { border-radius: var(--radius-full); }
.lang__field { position: relative; display: flex; min-width: 0; }
.lang__face { display: none; }

/* On a phone the menu wears its face, as the Radical Friends pages do: the same pill with Lucide's languages icon and
   the short label (EN, 简体), never wider than the label, so twenty native names never crowd the logo. The native
   select lies over it, transparent, at the face's full size: a tap opens the native picker of the names, and the face
   takes the focus ring while the select has the focus. */
@media (max-width: 559px) {
  .lang__face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--card);
    box-shadow: var(--shadow-xs);
    color: var(--secondary-foreground);
    font: var(--label-md);
    white-space: nowrap;
    transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  }
  .lang__icon {
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E") center / 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E") center / 18px no-repeat;
  }
  .lang__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
  }
  .lang__field:hover .lang__face { border-color: var(--primary-strong); color: var(--foreground); }
  .lang__field:focus-within .lang__face {
    border-color: var(--primary-strong);
    color: var(--foreground);
    outline: 2px solid var(--primary-strong);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--ring);
  }
  .lang__select:focus-visible { outline: none; box-shadow: none; }
}

@media (forced-colors: active) {
  .lang__icon { forced-color-adjust: none; background: CanvasText; }
}

/* The fee rides in the header on every stop: a navy pill, the amount in aqua (aqua lives on navy
   only). On a phone it takes its own row. */
.earn-chip {
  order: 3;
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--brand-blue-800);
  color: var(--white);
  font: var(--label-sm);
}
.earn-chip b {
  color: var(--accent-aqua);
  font: var(--label-lg);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 560px) {
  .top__in { flex-wrap: nowrap; }
  .earn-chip { order: 0; margin: 0 0 0 auto; }
  .earn-chip:not([hidden]) + .lang { margin-left: 0; }
}

/* ───────── Page column ───────── */

.page {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter) calc(64px + env(safe-area-inset-bottom));
}

/* From 680px the page is the sheet: a white card on the ground. */
@media (min-width: 680px) {
  .top__in { max-width: calc(var(--column) + 96px); padding-inline: 0; }
  .page {
    max-width: calc(var(--column) + 96px);
    margin: 8px auto 72px;
    padding: 40px 48px 48px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }
}

/* ───────── The route (three numbered stops) ───────── */

.route {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  margin: 0 0 32px;
  counter-reset: route;
}

.route__stop {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 28px auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  min-width: 0;
  counter-increment: route;
}
.route__stop:last-child { grid-template-columns: auto; }
.route__stop .pin { grid-row: 1; grid-column: 1; }
.route__stop:not(:last-child)::after {
  content: "";
  grid-row: 1;
  grid-column: 2;
  border-top: 2px solid var(--border);
  margin-right: 8px;
}
.route__name {
  grid-row: 2;
  grid-column: 1 / -1;
  font: var(--label-xs);
  color: var(--muted-foreground);
  padding-right: 8px;
}
.route__stop[aria-current="step"] .route__name { color: var(--foreground); }

/* The numbered stops: a 28px circle each (the .pin span stays: page.html and the tests name it).
   Done: the blue tint with a tick. Current: filled blue. Ahead: white with a hairline. */
.route__stop .pin {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  transform: none;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--muted-foreground);
  font: var(--label-xs);
}
.route__stop .pin::before { content: counter(route); }
.route__stop:has(~ [aria-current="step"]) .pin { background: var(--primary-active); box-shadow: none; color: var(--accent-foreground); }
.route__stop:has(~ [aria-current="step"]) .pin::before { content: "✓"; }
.route__stop:has(~ [aria-current="step"])::after { border-top-color: var(--primary); }
.route__stop[aria-current="step"] .pin {
  background: var(--primary-strong);
  box-shadow: none;
  color: var(--white);
}

/* A done stop is a way back: a button over its name and the circle above it (page.js shows it). */
.route__stop:has(.route__go:not([hidden])) .route__name { position: relative; justify-self: start; }
.route__go {
  position: absolute;
  inset: -34px -6px -6px -6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}
.route__stop:has(.route__go:not([hidden])) .route__name {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-border);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.route__stop:has(.route__go:hover) .route__name { text-decoration-color: currentColor; }

/* ───────── The pin motif (the results list, the map, the inactive-link page) ───────── */

.pin {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--primary);
}
.pin--next { background: var(--primary-active); box-shadow: inset 0 0 0 1.5px var(--primary); }
.pin--todo { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--border); }
.pin--hollow { background: var(--primary-active); box-shadow: inset 0 0 0 1.5px var(--accent-foreground); }
.pin--big { width: 28px; height: 28px; }

/* ───────── Views ───────── */

.view:not([hidden]) { animation: view-in var(--duration) var(--ease) both; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* The title: heading-2xl (24px on a phone, 30px from 992px). */
.view__title {
  font: var(--heading-2xl);
  letter-spacing: var(--heading-2xl-ls);
  color: var(--foreground);
  text-wrap: balance;
  hyphens: auto;
}
.view__lead {
  margin-top: 12px;
  max-width: 34em;
  color: var(--secondary-foreground);
  text-wrap: pretty;
}

/* The overline: Sora, uppercase, tracked. The navy boards recolour theirs aqua. */
.kicker,
.earn-line__kicker,
.earn-board__kicker {
  font: var(--overline);
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
  color: var(--accent-foreground);
}
.kicker + .view__title { margin-top: 8px; }

/* ───────── Rep card ───────── */

.rep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 8px 20px 8px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  width: fit-content;
  max-width: 100%;
}
.rep__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary-active);
  color: var(--accent-foreground);
  font: var(--label-lg);
}
.rep__text { display: flex; flex-direction: column; min-width: 0; }
.rep__name { font: var(--label-md); color: var(--foreground); }
.rep__role { font: var(--caption); color: var(--muted-foreground); }

/* ───────── Fields ───────── */

.field { margin-top: 24px; }
.search .field:first-child { margin-top: 28px; }

.field__label {
  display: block;
  margin-bottom: 8px;
  font: var(--label-md);
  color: var(--foreground);
}

.field__hint {
  margin-top: 8px;
  font: var(--body-sm);
  color: var(--muted-foreground);
}
.field__hint--assure,
.assure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.assure-icon {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 4px;
  color: var(--primary);
}

/* The theme's field: 56px, the quiet fill, a hairline; white with the blue edge on focus. */
.input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--input);
  color: var(--foreground);
  font: var(--body-lg);              /* 17px: no iOS zoom */
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
/* A hint longer than a 320px phone's field (German, Greek) ends in an ellipsis rather than a hard cut. */
input.input { text-overflow: ellipsis; }
.input:hover,
.phone-input__country:hover + .phone-input__label { border-color: var(--primary); }
/* `background-color`, never the shorthand: a field's own background image (the search icon, the select's chevron)
   stays on focus and in the invalid state. */
.input:focus-visible,
.phone-input__country:focus-visible + .phone-input__label {
  background-color: var(--card);
  border-color: var(--primary-strong);
  outline: 2px solid var(--primary-strong);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--ring);
  border-radius: var(--radius-md);
}
.input:disabled { color: var(--muted-foreground); cursor: not-allowed; }
.input[aria-invalid="true"] {
  background-color: var(--card);
  border-color: var(--destructive);
  box-shadow: inset 0 0 0 1px var(--destructive);
}

/* Lucide's `search`, stroked in --primary (#3D7EDE): a data URI cannot read a CSS variable, so the token's hex is
   written in it. */
.input--search {
  padding-left: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D7EDE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
}
.input--search::-webkit-search-decoration { -webkit-appearance: none; }

.input--code { text-transform: uppercase; letter-spacing: 0.03em; }
.input--code::placeholder { text-transform: none; letter-spacing: 0; }
.input--time,
.input--date { font-variant-numeric: tabular-nums; min-height: 48px; padding-block: 10px; }
.input--time::-webkit-date-and-time-value,
.input--date::-webkit-date-and-time-value { text-align: left; }

.select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2360707F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font: var(--label-sm);
  color: var(--destructive);
}
.field-error::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ───────── Buttons (the DsButton contract: pills, Hanken 700) ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  font: var(--action-lg);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), scale var(--duration-fast) var(--ease);
}
.btn:focus-visible { outline: 4px solid var(--ring); outline-offset: 0; box-shadow: none; border-radius: var(--radius-full); }
.btn:active:not(:disabled) { scale: var(--scale-active); }
.btn:disabled { background: var(--muted); color: var(--muted-foreground); box-shadow: none; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Primary: the blue fill, white label, the blue shadow. Darker on hover. */
.btn--primary {
  width: 100%;
  background: var(--primary-strong);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover { background: var(--accent-foreground); color: var(--primary-foreground); }
.btn--primary:active:not(:disabled) { background: var(--accent-foreground); }

/* Ghost: the theme's secondary. White, a blue border, the blue label. */
.btn--ghost {
  border-color: var(--primary-strong);
  background: var(--card);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-lg);
}
.btn--ghost:hover { background: var(--secondary); color: var(--accent-foreground); }

.btn--small { min-height: 40px; padding: 0 16px; font: var(--action-sm); }

/* Text: the theme's link button. The quiet fill on hover. */
.btn--text {
  min-height: 48px;
  padding: 0 8px;
  margin-inline: -8px;
  justify-content: flex-start;
  text-align: left;
  color: var(--accent-foreground);
  font: var(--action-md);
}
.btn--text:hover { background: var(--accent); color: var(--accent-foreground); }

/* Inline actions inside a sentence or a board row (Change, Edit, Clear, Not you?). */
.btn--inline {
  display: inline-flex;
  min-height: 44px;
  margin: -12px -6px;
  padding: 0 6px;
  font: var(--label-sm);
  color: var(--accent-foreground);
  text-decoration: underline;
  text-decoration-color: var(--link-border);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  vertical-align: baseline;
}
.btn--inline:hover { text-decoration-color: currentColor; }
.btn--inline:focus-visible { border-radius: var(--radius-sm); outline: 2px solid var(--primary-strong); box-shadow: 0 0 0 6px var(--ring); }

/* The three account buttons: equal weight, outlined, provider named. */
.btn--account {
  width: 100%;
  min-height: 56px;
  border-color: var(--border);
  background: var(--card);
  color: var(--foreground);
  font: var(--action-md);
  box-shadow: var(--shadow-xs);
}
.btn--account:hover { border-color: var(--primary-strong); }
.btn--account[aria-expanded="true"] { border-color: var(--primary-strong); }
.btn__icon { width: 22px; height: 22px; flex: none; }

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 32px;
}
.actions .btn--text { align-self: flex-start; }
/* A primary directly followed by another button drops its shadow (the DsButton rule). */
.actions .btn--primary + .btn { box-shadow: none; }

@media (min-width: 560px) {
  .btn--primary { width: auto; min-width: 280px; }
  .actions { align-items: flex-start; }
}

/* ───────── Stop 1: search ───────── */

.status { min-height: 0; }
.status:not(:empty) { margin-top: 8px; font: var(--body-sm); color: var(--secondary-foreground); }

.results {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 64px;
  padding: 14px 16px;
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background-color var(--duration-fast) var(--ease);
}
.result:first-child { border-top: 0; }
.result .pin { margin-top: 8px; width: 12px; height: 12px; }
.result__text { display: flex; flex-direction: column; min-width: 0; }
.result__name { font: var(--label-md); color: var(--foreground); }
.result__address { font: var(--body-xs); color: var(--muted-foreground); }
.result:hover { background: var(--muted); }
.result[aria-selected="true"] { background: var(--primary-active); }
.result[aria-selected="true"] .result__address { color: var(--secondary-foreground); }
/* "My shop is not on Google": always the last row of the list */
.result--alt .pin { background: var(--primary-active); box-shadow: inset 0 0 0 1.5px var(--accent-foreground); }
.result--alt .result__name { color: var(--accent-foreground); }
.result--skeleton { cursor: default; }
.result--skeleton:hover { background: transparent; }

/* While the list is open, its last row is the way out; the standing button would repeat it. */
.view:has(#shop-results:not([hidden])) #not-on-google { display: none; }

.ways { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.way {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.way:hover { border-color: var(--primary-strong); box-shadow: var(--shadow-md); }
.way:focus-visible { border-radius: var(--radius-lg); }
.way__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.way__title { font: var(--label-md); color: var(--foreground); }
.way__hint { font: var(--body-xs); color: var(--muted-foreground); }
.way__chevron { width: 20px; height: 20px; flex: none; color: var(--primary); }

/* Proof board: the quiet fill, under the search. */
.proof {
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--muted);
}
.proof .kicker { margin-bottom: 8px; }

/* ───────── Dot leaders (label … value) ───────── */

.facts { display: flex; flex-direction: column; }

.fact {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
}
.fact dt {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  font: var(--body-md);
  color: var(--secondary-foreground);
}
.fact dt::after {
  content: "";
  flex: 1 1 20px;
  min-width: 20px;
  margin-left: 8px;
  border-bottom: 2px dotted var(--border);
  transform: translateY(-6px);
}
.fact dd {
  flex: 0 1 auto;
  max-width: 64%;
  text-align: right;
  font: var(--label-lg);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.fact__multi { white-space: pre-line; }
/* Google has no hours for the listing: a plain sentence, not a value. */
.fact__note { font: var(--body-md); color: var(--secondary-foreground); }

.facts--dark .fact dt { color: var(--dark-muted-foreground); }
.facts--dark .fact dt::after { border-bottom-color: var(--footer-divider); }
.facts--dark .fact dd { color: var(--accent-aqua); font: var(--heading-md); letter-spacing: var(--heading-md-ls); }

/* ───────── Stop 2: the summary board ───────── */

.board {
  position: relative;
  margin-top: 24px;
  padding: 24px 24px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.board__name {
  margin-bottom: 8px;
  font: var(--heading-lg);
  letter-spacing: var(--heading-lg-ls);
  color: var(--foreground);
}
.board .fact dd { font: var(--label-md); color: var(--foreground); }
.board .fact dt { font: var(--body-sm); }
/* A value too long for its line drops under its label, right-aligned, and the leader runs the full row. */
.board .fact { flex-wrap: wrap; row-gap: 2px; }
.board .fact dt { flex: 1 1 9em; }
.board .fact dd { max-width: 100%; margin-left: auto; }
#summary-phone { white-space: nowrap; }
.board .fact__multi { white-space: pre; }
.board[aria-busy="true"] .board__content,
.board:not([aria-busy="true"]) .board__skeleton,
.board:not([aria-busy="true"]) [data-board-loading] { display: none; }
.board__skeleton { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 12px; }
.board__after { margin-top: 8px; }

/* Skeleton bars (CSS only). */
.skel {
  display: block;
  height: 12px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--muted);
  animation: pulse 1100ms ease-in-out infinite alternate;
}
.skel--title { height: 20px; width: 58%; margin-bottom: 4px; }
.board__skeleton .skel:nth-child(3) { width: 88%; }
.board__skeleton .skel:nth-child(4) { width: 72%; }
.board__skeleton .skel:nth-child(5) { width: 80%; }
.skel--name { width: 60%; height: 14px; margin: 3px 0 8px; }
.skel--address { width: 85%; height: 11px; }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }

/* ───────── Opening hours editor ───────── */

.hours-slot:empty { display: none; }
[data-hours-slot="confirm"] .hours { margin-top: 20px; }

.hours {
  padding: 16px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.hours > legend { float: left; width: 100%; margin-bottom: 4px; }
.hours > legend + * { clear: both; }

.switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  font: var(--label-md);
}
.switch__input {
  position: absolute;
  opacity: 0;
  width: 44px; height: 26px;
  margin: 0;
  pointer-events: none;
}
.switch__track {
  position: relative;
  flex: none;
  width: 44px; height: 26px;
  border-radius: var(--radius-full);
  background: var(--border);
  transition: background-color var(--duration-fast) var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease);
}
.switch__input:checked + .switch__track { background: var(--primary-strong); }
.switch__input:checked + .switch__track::after { transform: translateX(18px); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--primary-strong); outline-offset: 0; box-shadow: 0 0 0 6px var(--ring); }
.switch__input:disabled + .switch__track { opacity: 0.45; }
.switch__label { line-height: 1.35; }

.hours__days { margin-top: 6px; }
.hours:has(#hours-247:checked) .hours__days,
.hours:has(#hours-247:checked) #hours-copy { display: none; }

.day {
  display: grid;
  grid-template-columns: 1fr;
  padding: 6px 0 10px;
  border-top: 1px solid var(--border);
}
.day__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
}
.day__name { flex: 1; min-width: 0; font: var(--label-md); color: var(--foreground); }
.day__state { order: 2; min-width: 4.5em; text-align: right; font: var(--body-sm); color: var(--muted-foreground); }
.day__head .switch__track { order: 3; }
.day__closed { display: none; }
.day:has([data-day-open]:not(:checked)) .day__open { display: none; }
.day:has([data-day-open]:not(:checked)) .day__closed { display: inline; }
.day:has([data-day-open]:not(:checked)) .day__times { display: none; }
.day:has([data-day-open]:not(:checked)) .day__name { color: var(--muted-foreground); }

/* One line per day: [from] to [to]. The "from" word is read, not shown; "to" sits between the inputs. */
.day__times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.day__time { display: contents; }
.day__time:first-child .day__time-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.day__time-label { font: var(--body-sm); color: var(--muted-foreground); }
.day .field-error { grid-column: 1 / -1; }

/* A lunch break: the second range sits under the first on the same grid; the toggle under both. */
.day__times--break { margin-top: 8px; }
.day__break { display: flex; justify-content: flex-start; min-height: 32px; align-items: center; margin-top: 4px; }
.day__break .btn--inline { margin-block: -6px; }
.day:has([data-day-open]:not(:checked)) .day__break { display: none; }

.hours__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* In stop 1b the editor is always open: nothing to close. */
[data-hours-slot="manual"] #hours-done { display: none; }

@media (min-width: 480px) {
  .day { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 16px; align-items: center; padding: 8px 0; }
  .day__times--break,
  .day__break { grid-column: 2; }
}

/* ───────── Bags (five equal choices) ───────── */

.choices { margin-top: 32px; }
.choices__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.choices__input,
.segmented__input,
.check__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.choices__label {
  display: grid;
  place-items: center;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--secondary-foreground);
  font: var(--label-lg);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), scale var(--duration-fast) var(--ease);
}
.choices__label:hover { border-color: var(--primary); color: var(--foreground); }
.choices__input:active + .choices__label { scale: var(--scale-active); }
.choices__input:checked + .choices__label {
  border-color: var(--primary-strong);
  background: var(--primary-active);
  box-shadow: none;
  color: var(--accent-foreground);
}
.choices__input:focus-visible + .choices__label { outline: 2px solid var(--primary-strong); outline-offset: 0; box-shadow: 0 0 0 6px var(--ring); }
.choices[aria-invalid="true"] .choices__label { border-color: var(--destructive); }

/* The navy example line under the bags. */
.earn-line {
  margin-top: 16px;
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  background: var(--brand-blue-800);
  color: var(--white);
}
.earn-line__kicker { color: var(--accent-aqua); margin-bottom: 4px; }
.earn-line__text { font: var(--body-lg); color: var(--dark-muted-foreground); text-wrap: pretty; }
.earn-line__text b { font: var(--heading-md); letter-spacing: var(--heading-md-ls); color: var(--white); white-space: nowrap; }

/* ───────── Stop 1b: the map ───────── */

.pinmap { margin-top: 24px; }
.pinmap__title {
  font: var(--heading-lg);
  letter-spacing: var(--heading-lg-ls);
}
.pinmap__lead { margin-top: 4px; font: var(--body-md); color: var(--secondary-foreground); }
.map-frame {
  position: relative;
  height: 240px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  overflow: hidden;
  isolation: isolate;
}
.map-frame__map { position: absolute; inset: 0; z-index: 0; }
.map-frame__pin {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(var(--shadow-sm));
}
.map-frame__pin .pin { display: block; background: var(--primary-strong); }
.map-frame__hint {
  position: absolute;
  left: 12px; bottom: 28px;   /* clear of the map attribution line */
  z-index: 2;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font: var(--label-xs);
  pointer-events: none;
}
.pinmap__address { margin-top: 12px; font: var(--label-md); }

/* ───────── Stop 3 ───────── */

.earn-board {
  margin-top: 24px;
  padding: 20px 24px 12px;
  border-radius: var(--radius-lg);
  background: var(--brand-blue-800);
  color: var(--white);
}
.earn-board__kicker { color: var(--accent-aqua); }

.assure { margin-top: 16px; font: var(--body-sm); color: var(--secondary-foreground); }
.assure--quiet { color: var(--muted-foreground); }

.part { margin-top: 32px; }
.part__lead { font: var(--label-md); color: var(--foreground); }

.account-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.account-slot { display: flex; justify-content: center; min-height: 56px; }
.account-buttons + .field,
.account-buttons + .email-form { margin-top: 8px; }
#cover-line { margin-top: 16px; }

.email-form { margin-top: 4px; }
.email-form[data-mode="login"] [data-mode-only="create"],
.email-form[data-mode="create"] [data-mode-only="login"] { display: none; }
.email-form .actions { margin-top: 24px; }

.note {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--foreground);
  font: var(--body-sm);
}

/* Signed in: the success pair, a tick dot. */
.account-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  max-width: 100%;
  padding: 8px 16px 8px 14px;
  border: 1px solid var(--success-border);
  border-radius: var(--radius-full);
  background: var(--success);
  color: var(--success-foreground);
  font: var(--label-sm);
}
.account-chip__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--success-foreground); flex: none; }
.account-chip__text { flex: 1 1 0; min-width: 10em; overflow-wrap: anywhere; }  /* keeps the dot beside the text when the email wraps */
.account-chip .btn--inline { margin-block: -10px; color: var(--success-foreground); }

.payout {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.payout__fields:empty { display: none; }

.segmented__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--muted);
}
.segmented__label {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  color: var(--secondary-foreground);
  font: var(--label-md);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.segmented__label:hover { color: var(--foreground); }
.segmented__input[hidden], .segmented__label[hidden] { display: none; }
.segmented__input:checked + .segmented__label { background: var(--card); color: var(--accent-foreground); box-shadow: var(--shadow-sm); }
.segmented__input:focus-visible + .segmented__label { outline: 2px solid var(--primary-strong); outline-offset: 0; box-shadow: 0 0 0 6px var(--ring); }
.segmented--tabs { margin-top: 16px; }
.segmented--tabs[hidden] { display: none; }
/* The payout tabs: the bank transfer is the default and the wide one, PayPal the narrow second choice. */
.segmented--tabs .segmented__row { grid-template-columns: 2fr 1fr; }
/* A payout field drawn as a segmented control (the account type): the legend is its label. */
.segmented--field[hidden] { display: none; }
.later--tab { margin-top: 16px; }

.later {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--muted);
}
.later__title {
  font: var(--heading-md);
  letter-spacing: var(--heading-md-ls);
}
.later__lead { margin-top: 4px; font: var(--body-sm); color: var(--secondary-foreground); }
.later .field { margin-top: 16px; }

/* The partner agreement (a link with an agreement version): the reader, the exclusivity box, clause approval. */
.agreement { margin-top: 24px; }
.agreement__title { font: var(--heading-md); letter-spacing: var(--heading-md-ls); margin: 0 0 4px; color: var(--foreground); }
.agreement__reader { max-height: 300px; overflow-y: auto; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--card); font: var(--body-xs); color: var(--secondary-foreground); }
.agreement__reader h3 { font: var(--heading-xs); letter-spacing: var(--heading-xs-ls); margin: 12px 0 4px; color: var(--foreground); }
.agreement__reader h3:first-child { margin-top: 0; }
.agreement__reader .agreement__doc-title { font: var(--heading-sm); letter-spacing: var(--heading-sm-ls); text-align: center; }
.agreement__reader p { margin: 0 0 8px; }
.agreement__headline { margin: 12px 0; padding: 16px; border-radius: var(--radius-md);
  background: var(--brand-blue-800); color: var(--white); }
.agreement__headline-title { margin: 0 0 4px; font: var(--overline); letter-spacing: var(--overline-ls);
  text-transform: uppercase; color: var(--accent-aqua); }
.agreement__headline-text { margin: 0; font: var(--body-md); }
/* A CMS contract: legal's HTML inside the reader (h2-h4, lists), and its "Download PDF" line. */
.agreement__cms h2, .agreement__cms h3, .agreement__cms h4 { font: var(--heading-xs); letter-spacing: var(--heading-xs-ls); margin: 12px 0 4px; color: var(--foreground); }
.agreement__cms ul, .agreement__cms ol { margin: 0 0 8px; padding-left: 1.25em; }
.agreement__cms li { margin: 0 0 4px; }
.agreement__pdf { margin: 8px 0 0; }
.agreement__clauses { background: var(--muted); border-radius: var(--radius-md); padding: 12px 16px; }
.agreement__capacity:not([hidden]) { display: block; margin-top: 8px; }
.agreement__progress { margin: 8px 0 0; font: var(--caption); color: var(--muted-foreground); }
.agreement__progress::before { content: "↓ "; }
.agreement__progress--read { color: var(--foreground); font: var(--label-xs); }
.agreement__progress--read::before { content: "✓ "; }

/* Agreement checkbox */
.field--check { margin-top: 32px; }
.check { position: relative; }
.check__label {
  position: relative;
  display: block;
  min-height: 48px;
  padding: 10px 0 0 40px;
  cursor: pointer;
  font: var(--body-md);
}
.check__label::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card) no-repeat center / 16px;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.check__input { left: 4px; top: 14px; }
.check__input:checked + .check__label::before {
  border-color: var(--primary-strong);
  background-color: var(--primary-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check__input:focus-visible + .check__label::before { outline: 2px solid var(--primary-strong); outline-offset: 0; box-shadow: 0 0 0 6px var(--ring); }
.check__input[aria-invalid="true"] + .check__label::before { border-color: var(--destructive); box-shadow: inset 0 0 0 1px var(--destructive); }
.check__label a { font-weight: 600; }

/* Signature */
.sign { margin-top: 32px; }
.sign__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sign__label { margin-bottom: 0; }
.sign__head .btn--inline { margin-right: 0; }
.sign__box {
  position: relative;
  height: 180px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  touch-action: none;
  overflow: hidden;
}
.sign__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.sign__line {
  position: absolute;
  left: 20px; right: 20px; bottom: 46px;
  border-bottom: 1px solid var(--border);
}
.sign__x {
  position: absolute;
  left: 20px; bottom: 50px;
  font: var(--heading-lg);
  color: var(--subtle-foreground);
}
.sign__box:has(.sign__canvas:focus-visible) { outline: 2px solid var(--primary-strong); outline-offset: 0; box-shadow: 0 0 0 6px var(--ring); }
.sign__box:has(.sign__canvas[aria-invalid="true"]) { border-color: var(--destructive); box-shadow: inset 0 0 0 1px var(--destructive); }
.sign__box[data-mode="typed"] .sign__canvas { cursor: default; }
/* The typed-name way: a keyboard and mouse alternative to drawing. */
.sign__alt { margin-top: 4px; }
.sign__typed { margin-top: 8px; }
.sign__typed-row { display: flex; flex-direction: column; gap: 8px; }
.sign__typed-row .btn { align-self: flex-start; }
@media (min-width: 560px) {
  .sign__typed-row { flex-direction: row; align-items: stretch; }
  .sign__typed-row .input { flex: 1 1 auto; min-width: 0; }
  .sign__typed-row .btn { flex: none; align-self: auto; }
}

/* A shop that cannot continue: the rep's contact under the message. */
.blocked-rep { margin-top: 12px; }
.blocked-rep .btn { width: 100%; }
.challenge { margin: 12px 0; }
.challenge__title { margin: 0 0 8px; font: var(--label-md); }
#challenge-widget { min-height: 65px; }
@media (min-width: 560px) { .blocked-rep .btn { width: auto; } }

/* Form-level error: the error fill, a dot, no stripe. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--destructive-foreground);
  color: var(--foreground);
  font: var(--label-md);
}
.callout::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-top: 7px;
  border-radius: var(--radius-full);
  background: var(--destructive);
}

/* ───────── Done ───────── */

/* "You are on the map": the hosts' pins pop up, dim, and the shop's own pin grows in with the tick
   drawn on it. `.is-playing` (page.js) restarts it; done by 0.95 s. */
.done-mark { width: min(220px, 62%); margin-bottom: 20px; }
.done-mark__art { display: block; width: 100%; height: auto; overflow: visible; }
.done-mark__hosts { opacity: 0.3; }
.done-mark__hosts g { transform-box: fill-box; transform-origin: 50% 100%; }
.done-mark__pin { transform-origin: 120px 150px; }
.done-mark__tick { stroke-dasharray: 1; }
.done-mark.is-playing .done-mark__hosts { animation: done-dim 350ms 500ms both; }
.done-mark.is-playing .done-mark__hosts g { animation: done-grow 250ms var(--ease) both; }
.done-mark.is-playing .done-mark__hosts g:nth-child(2) { animation-delay: 50ms; }
.done-mark.is-playing .done-mark__hosts g:nth-child(3) { animation-delay: 100ms; }
.done-mark.is-playing .done-mark__hosts g:nth-child(4) { animation-delay: 150ms; }
.done-mark.is-playing .done-mark__hosts g:nth-child(5) { animation-delay: 200ms; }
.done-mark.is-playing .done-mark__pin { animation: done-grow 350ms 450ms var(--ease) both; }
.done-mark.is-playing .done-mark__tick { animation: done-draw 300ms 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes done-grow { from { transform: scale(0); opacity: 0; } }
@keyframes done-dim { from { opacity: 1; } }
@keyframes done-draw { from { stroke-dashoffset: 1; } }

/* One more thing: the way in. A white card under the title. */
.arrival {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.arrival__title {
  font: var(--heading-lg);
  letter-spacing: var(--heading-lg-ls);
  color: var(--foreground);
  text-wrap: balance;
}
.arrival__lead { margin-top: 8px; font: var(--body-md); color: var(--secondary-foreground); text-wrap: pretty; }
.arrival__private { margin-top: 10px; font: var(--body-sm); color: var(--muted-foreground); }
.arrival .field { margin-top: 20px; }
.input--area { min-height: 112px; resize: vertical; }
.arrival__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.arrival__thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--muted); }
.arrival__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arrival__remove {
  position: absolute;
  top: 4px; right: 4px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--backdrop);
  color: var(--white);
  cursor: pointer;
}
.arrival__remove svg { width: 14px; height: 14px; }
.arrival__remove:hover { background: var(--brand-blue-800); }
.arrival__add { width: 100%; gap: 8px; }
/* The photo rights notice: a caption under the hint, a readable measure. */
.arrival__rights { margin-top: 12px; max-width: 60ch; font: var(--caption); color: var(--muted-foreground); text-wrap: pretty; }
@media (min-width: 560px) { .arrival__add { width: auto; } }
.arrival-sent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  background: var(--success);
}
.arrival-sent__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--success-foreground);
}
.arrival-sent__tick svg { width: 18px; height: 18px; }
.arrival-sent__text { display: flex; flex-direction: column; }
.arrival-sent__text strong { font: var(--heading-sm); letter-spacing: var(--heading-sm-ls); color: var(--foreground); }
.arrival-sent__text span { font: var(--body-sm); color: var(--secondary-foreground); }
.arrival:not([hidden]) ~ .view__lead,
.arrival-sent:not([hidden]) ~ .view__lead { margin-top: 28px; }

.done-earn {
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  background: var(--brand-blue-800);
  color: var(--dark-muted-foreground);
  font: var(--body-md);
}
.done-earn b { color: var(--accent-aqua); font: var(--heading-md); letter-spacing: var(--heading-md-ls); }

/* What happens next: numbered steps (32px circles), the first one filled blue. */
.steps { margin-top: 24px; display: flex; flex-direction: column; counter-reset: steps; }
.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 16px;
  padding-bottom: 24px;
  counter-increment: steps;
}
.steps__item .pin {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 0;
  border-radius: var(--radius-full);
  transform: none;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--muted-foreground);
  font: var(--label-sm);
}
.steps__item .pin::before { content: counter(steps); }
.steps__item--now .pin { background: var(--primary-strong); box-shadow: none; color: var(--white); }
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px; top: 36px; bottom: 4px;
  border-left: 2px solid var(--border);
}
.steps__text { display: flex; flex-direction: column; padding-top: 4px; }
.steps__text strong { font: var(--heading-md); letter-spacing: var(--heading-md-ls); color: var(--foreground); }
.steps__text span { font: var(--body-md); color: var(--secondary-foreground); }
.done-rep { margin-top: 8px; }
.done-rep .btn { width: 100%; }
@media (min-width: 560px) { .done-rep .btn { width: auto; } }

/* ───────── Inactive link ───────── */

.gone { padding: 24px 0 12px; }
.gone .pin { margin: 0 0 24px 8px; }

/* ───────── The join page (body.join: on.radicalstorage.com/join/, the inbound link) ─────────
   A hero above the route (the page's one h1), three more views (the doors, "tell me more", the
   WhatsApp ending), the pitch below the panel and the phone's sticky bar. Phones: today's column, the
   hero on top, the pitch after the panel. From 680px the sheet (route and views) is the card; from
   961px two columns, the hero copy left and the sheet right, the pitch full width below. Every rule
   is scoped under .join (the token page is untouched) and built from the tokens above: no new font,
   colour or gradient. */

.join .page {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.join .intro {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter) 64px;
}

.join .hero { padding: 8px 0 32px; }
.join .hero__title {
  margin-top: 8px;
  font: var(--display-md);
  letter-spacing: var(--display-md-ls);
  color: var(--foreground);
  text-wrap: balance;
}
.join .hero__em { color: var(--accent-foreground); }
.join .hero__lead {
  margin-top: 16px;
  max-width: 34em;
  font: var(--body-lg);
  color: var(--secondary-foreground);
  text-wrap: pretty;
}
.join .hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  font: var(--body-sm);
  color: var(--secondary-foreground);
}
.join .hero__proof li { display: inline-flex; align-items: baseline; gap: 6px; }
.join .hero__proof strong { font: var(--label-lg); color: var(--foreground); font-variant-numeric: tabular-nums; }
.join .hero__star { color: var(--star); }

/* The views: their titles are h2 under the hero's h1, a step smaller. */
.join .view__title { font: var(--heading-xl); letter-spacing: var(--heading-xl-ls); }
.join .view .kicker + .view__title { margin-top: 8px; }

/* The doors (choose): sign now (the primary one), read first; WhatsApp as a line under them. */
.join .doors { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.join .door {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
  padding: 20px 20px 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  text-align: left;
  box-shadow: var(--shadow-xs);
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), scale var(--duration-fast) var(--ease);
}
.join .door:hover { border-color: var(--primary-strong); box-shadow: var(--shadow-md); }
.join .door:active { scale: var(--scale-active); }
.join .door:focus-visible { border-radius: var(--radius-lg); }
.join .door__title {
  grid-column: 1;
  font: var(--heading-md);
  letter-spacing: var(--heading-md-ls);
}
.join .door__text { grid-column: 1; font: var(--body-sm); color: var(--secondary-foreground); }
.join .door__meta { grid-column: 1; font: var(--label-xs); color: var(--muted-foreground); }
.join .door__chevron { grid-column: 2; grid-row: 1 / span 3; width: 20px; height: 20px; color: var(--primary); }
.join .door--go {
  border-color: var(--primary-strong);
  background: var(--primary-active);
  box-shadow: inset 0 0 0 1px var(--primary-strong);
}
.join .door--go .door__meta,
.join .door--go .door__chevron { color: var(--accent-foreground); }
.join .door-talk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  margin-top: 16px;
  color: var(--secondary-foreground);
}

/* "Tell me more": what happens after signing, the fee in the shop's currency, walk-in, the questions. */
.join .info__head {
  margin: 32px 0 0;
  font: var(--heading-md);
  letter-spacing: var(--heading-md-ls);
  color: var(--foreground);
}
.join .info__head + .steps { margin-top: 16px; }
.join .info__earn .earn-board { margin-top: 12px; }
.join .earn-board__note {
  margin: 4px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--footer-divider);
  font: var(--body-sm);
  color: var(--dark-muted-foreground);
}
.join .info__para { margin-top: 16px; font: var(--body-md); color: var(--secondary-foreground); }
.join .info__para strong { color: var(--foreground); }
.join .steps__item--done .pin { background: var(--primary-active); box-shadow: none; color: var(--accent-foreground); }
.join .steps__item--done .pin::before { content: "✓"; }

/* The questions: native <details>, a chevron that turns. */
.join .faq { border-top: 1px solid var(--border); }
.join .info__head + .faq { margin-top: 12px; }
.join .faq__item { border-bottom: 1px solid var(--border); }
.join .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 2px;
  font: var(--heading-sm);
  letter-spacing: var(--heading-sm-ls);
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
}
.join .faq__q::-webkit-details-marker { display: none; }
.join .faq__q::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--primary-strong);
  border-bottom: 2px solid var(--primary-strong);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--duration) var(--ease);
}
.join .faq__item[open] > .faq__q::after { transform: translateY(2px) rotate(-135deg); }
.join .faq__q:hover { color: var(--accent-foreground); }
.join .faq__q:focus-visible { border-radius: var(--radius-sm); }
.join .faq__a { max-width: 40em; padding: 0 2px 20px; font: var(--body-md); color: var(--secondary-foreground); }

/* The WhatsApp ending. */
.join .tick {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: var(--radius-full);
  background: var(--primary-active);
  color: var(--accent-foreground);
}
.join .tick svg { width: 26px; height: 26px; }
.join .contact-again { margin-top: 4px; }

/* The pitch: full-width bands, the content in a 1200px column. */
.join .pitch__in {
  max-width: calc(1200px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 64px var(--gutter);
}
.join .why,
.join .how { background: var(--card); }
.join .control,
.join .close { background: var(--brand-blue-800); color: var(--white); }
.join .pitch__title {
  margin-top: 8px;
  max-width: 22ch;
  font: var(--display-sm);
  letter-spacing: var(--display-sm-ls);
  text-wrap: balance;
}
.join .pitch__lead { margin-top: 16px; max-width: 38em; font: var(--body-lg); color: var(--secondary-foreground); text-wrap: pretty; }
.join .control .kicker { color: var(--accent-aqua); }
.join .control .pitch__lead,
.join .close .pitch__lead { color: var(--dark-muted-foreground); }

/* What a shop gets out of it: three items divided by hairlines (one column on a phone). */
.join .triad { display: grid; margin-top: 32px; border-top: 1px solid var(--border); }
.join .triad__item { padding: 24px 0 20px; border-bottom: 1px solid var(--border); }
.join .triad__item:last-child { padding-bottom: 0; border-bottom: 0; }
.join .triad__title {
  margin: 0 0 8px;
  font: var(--heading-xl);
  letter-spacing: var(--heading-xl-ls);
  color: var(--accent-foreground);
}
.join .triad__item p { max-width: 34ch; font: var(--body-md); color: var(--secondary-foreground); }

/* Day to day: the navy band, three promises with aqua marks, two white notices. */
.join .control__in,
.join .numbers__in,
.join .faqsec__in { display: grid; gap: 40px; }
.join .control__list { display: flex; flex-direction: column; gap: 16px; max-width: 40em; margin-top: 24px; }
.join .control__list li { position: relative; padding-left: 24px; font: var(--body-md); color: var(--dark-muted-foreground); }
.join .control__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--accent-aqua);
}
.join .control__list strong { color: var(--white); font-weight: 700; }
.join .notices { display: grid; justify-items: start; }
.join .notice {
  position: relative;
  z-index: 1;
  width: min(400px, calc(100% - 12px));
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-lg);
}
.join .notice--back {
  z-index: 0;
  margin-top: -10px;
  opacity: 0.94;
  transform: translateX(12px) scale(0.96);
  transform-origin: top center;
}
.join .notice__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font: var(--overline);
  letter-spacing: var(--overline-ls);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.join .notice__title { font: var(--heading-sm); letter-spacing: var(--heading-sm-ls); }
.join .notice__text { margin-top: 4px; font: var(--label-md); font-variant-numeric: tabular-nums; }
.join .notice__text--muted { font: var(--body-sm); color: var(--secondary-foreground); }

/* The numbers: the page's dot leaders on a white board, the source line, the quote. */
.join .numbers__board {
  padding: 8px 24px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.join .numbers__board .fact dd { font: var(--heading-md); letter-spacing: var(--heading-md-ls); }
.join .numbers__src { margin-top: 4px; font: var(--caption); color: var(--muted-foreground); }
.join .quote { margin-top: 24px; }
.join .quote__text { margin: 0; font: var(--body-lg); color: var(--foreground); }
.join .quote__cite { margin-top: 8px; font: var(--body-sm); color: var(--muted-foreground); }

/* Three stops: the page's numbered steps, every number filled (a row from 961px). */
.join .how .steps { margin-top: 32px; }
.join .how .steps__item .pin { background: var(--primary-strong); box-shadow: none; color: var(--white); }
.join .how .steps__text strong { font: var(--heading-lg); letter-spacing: var(--heading-lg-ls); }

/* The close: navy, the secondary "Find my shop". */
.join .close .pitch__title { margin-top: 0; max-width: 18ch; }
.join .close__in { display: grid; gap: 24px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.join .close__btn { justify-self: start; }

/* The phone's sticky bar: the shop, a line, the view's primary action. Hidden while a field has the
   focus (the on-screen keyboard is up); the close band grows under it so nothing stays covered. */
.join .bar { display: none; }

@media (max-width: 679px) {
  .join .bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-lg);
  }
  .join .bar__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
  .join .bar__shop,
  .join .bar__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .join .bar__shop { font: var(--label-md); color: var(--foreground); }
  .join .bar__sub { font: var(--caption); color: var(--muted-foreground); }
  .join .bar__go { flex: none; width: auto; min-width: 0; max-width: 64%; min-height: 48px; padding: 0 20px; font: var(--action-md); }
  .join:has(> .bar:not([hidden])) .close__in { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .join:has(.page :is(input, select, textarea):focus) > .bar { display: none; }
}

@media (min-width: 680px) {
  .join .intro { max-width: calc(var(--column) + 96px); padding: 8px 0 72px; }
  .join .sheet {
    padding: 40px 48px 48px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }
}

@media (min-width: 961px) {
  .join .top__in { max-width: calc(1200px + 2 * var(--gutter)); padding-inline: var(--gutter); }
  .join .intro {
    display: grid;
    /* The hero keeps 340px at the narrow end; the sheet gives way below its 656px (961px to ~1200px). */
    grid-template-columns: minmax(340px, 1fr) minmax(0, calc(var(--column) + 96px));
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
    max-width: calc(1200px + 2 * var(--gutter));
    padding: 24px var(--gutter) 96px;
  }
  .join .sheet { padding-inline: clamp(28px, 3.4vw, 48px); }
  .join .hero { position: sticky; top: 24px; padding: 48px 0 0; }
  .join .hero__lead { margin-top: 24px; }
  .join .hero__proof { margin-top: 32px; font: var(--body-md); }
  .join .pitch__in { padding-block: 120px; }
  .join .triad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .join .triad__item { margin-right: 32px; padding: 32px 32px 8px 0; border-right: 1px solid var(--border); border-bottom: 0; }
  .join .triad__item:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
  .join .control__in,
  .join .numbers__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); }
  .join .control__in { align-items: center; }
  .join .faqsec__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .join .notices { justify-items: end; }
  .join .notice--back { transform: translateX(-24px) scale(0.96); }
  .join .how .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .join .how .steps__item { grid-template-columns: 1fr; align-content: start; row-gap: 16px; padding-bottom: 0; }
  .join .how .steps__item:not(:last-child)::after { top: 15px; bottom: auto; left: 44px; right: -36px; border-left: 0; border-top: 2px solid var(--border); }
  .join .close__in { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; padding-bottom: 120px; }
  .join .close__btn { justify-self: end; }
}

/* ───────── Reduced motion: everything visible and still ───────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .view:not([hidden]) { animation: none; }
  .done-mark.is-playing * { animation: none !important; }
  .skel { animation: none; opacity: 0.8; }
  .btn[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

/* ───────── Cookiebot consent banner (radicalstorage.com's, see consent.js) ─────────
   The website's compact mobile dialog (frontend `cookiebotCompactMobileStyle`): a bottom
   sheet whose text is clamped to two lines until tapped. The website's rem are on a 10px
   root; this page keeps the browser's 16px, so the values are its px. */
@media (max-width: 767px) {
  #CybotCookiebotDialog {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 72vh !important;
    max-height: 72svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #CybotCookiebotDialog,
  #CybotCookiebotDialogBody,
  #CybotCookiebotDialogTabContent,
  #CybotCookiebotDialogBodyContent {
    max-height: 100% !important;
    overflow: visible !important;
  }

  #CybotCookiebotDialogBodyContent { padding-block: 12px !important; }

  #CybotCookiebotDialogBodyContentText {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 100% !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    cursor: pointer;
  }

  #CybotCookiebotDialogBodyInternalAlias,
  .CybotCookiebotDialogBodyInternalAlias { font-size: 11px !important; }

  #CybotCookiebotDialogBodyEdgeMoreDetails { margin: 11px 15px 4px 0 !important; }

  #CybotCookiebotDialog.CybotCookiebotDialogTextExpanded #CybotCookiebotDialogBodyContentText {
    display: block !important;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible !important;
    cursor: text;
  }

  #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,
  #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton {
    min-height: 44px !important;
    padding-block: 8px !important;
  }
}

/* One phone number, with an explicit international prefix and accessible country names. */
.phone-input { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; }
.phone-input .input { min-width: 0; }
.phone-input__prefix { position: relative; min-width: 0; }
/* Keep the native picker and its full country names over the compact visual label. */
.phone-input__country { position: absolute; inset: 0; height: 100%; opacity: 0; z-index: 1; }
.phone-input__label { padding-inline: 12px 32px; background-position: right 12px center; white-space: nowrap; pointer-events: none; }
.agreement__external-frame { display: block; width: 100%; height: 65vh; min-height: 20rem; border: 1px solid var(--border); border-radius: .5rem; }