/* ==========================================================================
   Scalia · the forms (/start/ the project brief, /join/ the application)
   in Scalia OS's look (the client space's), on <body class="page-os">.
   On top of join.css (and demarrer.css), which keep the layout and the
   behaviour: the system type, the iOS colours in light and dark (automatic,
   or the choice kept on this device: html[data-theme]), the soft wallpaper,
   one frosted-glass card holding the brief, one tint (system blue). Gold
   only in the Scalia logo, which stays at the top as on the site.
   ========================================================================== */
.page-os {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --fg: #1D1D1F; --fg-2: rgba(60, 60, 67, 0.66); --fg-3: rgba(60, 60, 67, 0.44);
  --tint: #007AFF; --tint-ink: #0066CC; --tint-soft: rgba(0, 122, 255, 0.1);
  --st-solid: #FFFFFF;
  --st-fill: rgba(118, 118, 128, 0.12);
  --st-line: rgba(60, 60, 67, 0.13); --st-line-2: rgba(60, 60, 67, 0.22);
  --st-input: rgba(255, 255, 255, 0.66); --st-input-line: rgba(16, 24, 64, 0.14);
  --st-card: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.44));
  --st-bar: rgba(250, 250, 253, 0.62);
  --st-ok: #248A3D; --st-err: #D70015; --st-err-bg: rgba(215, 0, 21, 0.08);
  --st-shadow: 0 0 0 0.5px rgba(16, 24, 64, 0.06), 0 1px 2px rgba(16, 24, 64, 0.05), 0 22px 50px -26px rgba(16, 24, 64, 0.32);
  --st-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5));
  --st-glass-hi: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.62));
  --st-glass-shadow: 0 1px 2px rgba(16, 24, 64, 0.06), 0 8px 22px -14px rgba(16, 24, 64, 0.3);
  --st-glass-shadow-hi: 0 2px 4px rgba(16, 24, 64, 0.06), 0 18px 34px -16px rgba(16, 24, 64, 0.36);
  --st-sheen: rgba(255, 255, 255, 0.95);
  --st-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0.12) 70%, rgba(255, 255, 255, 0.35) 100%);
  --st-wall: radial-gradient(55% 55% at 0% 0%, rgba(160, 198, 255, 0.7), transparent 72%),
             radial-gradient(50% 50% at 100% 0%, rgba(206, 188, 255, 0.62), transparent 72%),
             radial-gradient(60% 55% at 80% 100%, rgba(170, 228, 214, 0.55), transparent 72%),
             radial-gradient(50% 45% at 8% 100%, rgba(255, 212, 196, 0.45), transparent 72%),
             #EEF0F5;
  /* the brief's own names, pointed at this palette */
  --jn-bg: transparent; --jn-card: var(--st-input); --jn-line: var(--st-line); --jn-line-2: var(--st-input-line);
  --jn-tint: var(--tint-soft); --jn-err: var(--st-err);
  --champagne: var(--tint); --champagne-lo: var(--tint); --champagne-hi: var(--tint); --scalia-gold: var(--tint); --copper: var(--fg-2);
  --ivory: var(--st-fill); --ivory-2: var(--st-fill);
  font-family: var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
  color: var(--fg); background: transparent; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-os {
    --fg: #F5F5F7; --fg-2: rgba(235, 235, 245, 0.64); --fg-3: rgba(235, 235, 245, 0.38);
    --tint: #0A84FF; --tint-ink: #409CFF; --tint-soft: rgba(10, 132, 255, 0.2);
    --st-solid: #1C1C1E; --st-fill: rgba(118, 118, 128, 0.24);
    --st-line: rgba(255, 255, 255, 0.1); --st-line-2: rgba(255, 255, 255, 0.18);
    --st-input: rgba(255, 255, 255, 0.07); --st-input-line: rgba(255, 255, 255, 0.13);
    --st-card: linear-gradient(180deg, rgba(60, 60, 68, 0.55), rgba(30, 30, 36, 0.45));
    --st-bar: rgba(22, 22, 26, 0.62);
    --st-ok: #30D158; --st-err: #FF6961; --st-err-bg: rgba(255, 105, 97, 0.14);
    --st-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 22px 50px -26px rgba(0, 0, 0, 0.85);
    --st-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    --st-glass-hi: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06));
    --st-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px -14px rgba(0, 0, 0, 0.8);
    --st-glass-shadow-hi: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 34px -16px rgba(0, 0, 0, 0.9);
    --st-sheen: rgba(255, 255, 255, 0.14);
    --st-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.08) 100%);
    --st-wall: radial-gradient(55% 55% at 0% 0%, rgba(10, 80, 200, 0.38), transparent 72%), radial-gradient(50% 50% at 100% 0%, rgba(94, 60, 200, 0.32), transparent 72%), radial-gradient(60% 55% at 80% 100%, rgba(20, 120, 110, 0.22), transparent 72%), #000000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .page-os {
  --fg: #F5F5F7; --fg-2: rgba(235, 235, 245, 0.64); --fg-3: rgba(235, 235, 245, 0.38);
  --tint: #0A84FF; --tint-ink: #409CFF; --tint-soft: rgba(10, 132, 255, 0.2);
  --st-solid: #1C1C1E; --st-fill: rgba(118, 118, 128, 0.24);
  --st-line: rgba(255, 255, 255, 0.1); --st-line-2: rgba(255, 255, 255, 0.18);
  --st-input: rgba(255, 255, 255, 0.07); --st-input-line: rgba(255, 255, 255, 0.13);
  --st-card: linear-gradient(180deg, rgba(60, 60, 68, 0.55), rgba(30, 30, 36, 0.45));
  --st-bar: rgba(22, 22, 26, 0.62);
  --st-ok: #30D158; --st-err: #FF6961; --st-err-bg: rgba(255, 105, 97, 0.14);
  --st-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 22px 50px -26px rgba(0, 0, 0, 0.85);
  --st-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  --st-glass-hi: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06));
  --st-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px -14px rgba(0, 0, 0, 0.8);
  --st-glass-shadow-hi: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 34px -16px rgba(0, 0, 0, 0.9);
  --st-sheen: rgba(255, 255, 255, 0.14);
  --st-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.08) 100%);
  --st-wall: radial-gradient(55% 55% at 0% 0%, rgba(10, 80, 200, 0.38), transparent 72%), radial-gradient(50% 50% at 100% 0%, rgba(94, 60, 200, 0.32), transparent 72%), radial-gradient(60% 55% at 80% 100%, rgba(20, 120, 110, 0.22), transparent 72%), #000000;
  color-scheme: dark;
}
html:has(> body.page-os) { background: #EEF0F5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):has(> body.page-os) { background: #000; } }
:root[data-theme="dark"]:has(> body.page-os) { background: #000; }
.page-os::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--st-wall); pointer-events: none; }
.page-os :focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 55%, transparent); outline-offset: 2px; }

/* ---------------------------------------------------------------- bar -- */
.page-os .jn-nav {
  background: var(--st-bar); box-shadow: inset 0 -0.5px 0 var(--st-line-2);
  -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%);
}
.st-back {
  position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 14px 0 10px; border-radius: 17px;
  font: 600 14px/1 var(--font); color: var(--tint); text-decoration: none;
  background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 0.5px rgba(16, 24, 64, 0.12), 0 1px 2px rgba(16, 24, 64, 0.06);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease;
}
.st-back::after { content: ""; position: absolute; inset: -5px; }   /* 44px touch target */
.st-back:active { transform: scale(0.96); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-back { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); } }
:root[data-theme="dark"] .st-back { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
@media (max-width: 599px) {
  .st-back { width: 34px; padding: 0; justify-content: center; }
  .st-back__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.st-ctrl { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.st-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, 0.14); }
.st-seg button {
  height: 28px; min-width: 36px; padding: 0 7px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--fg-2); font: 600 12px/1 var(--font); letter-spacing: 0.02em;
  display: grid; place-items: center;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.st-seg--theme button { width: 32px; min-width: 0; padding: 0; }
.st-seg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st-seg button[aria-pressed="true"] { background: var(--st-solid); color: var(--fg); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-seg button[aria-pressed="true"] { background: #636366; box-shadow: none; } }
:root[data-theme="dark"] .st-seg button[aria-pressed="true"] { background: #636366; box-shadow: none; }
.st-seg button:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .st-seg button[aria-pressed="false"]:hover { color: var(--fg); } }
/* Phones: the logo keeps the centre; the appearance follows the phone's. */
@media (max-width: 599px) {
  .st-seg--theme { display: none; }
  .st-seg button { min-width: 32px; padding: 0 5px; }
}

/* ------------------------------------------------------- the card -- */
.page-os .jn { padding-top: clamp(20px, 4vw, 48px); }
.page-os .jn-wrap {
  position: relative; isolation: isolate;
  width: min(860px, 100% - 2 * var(--gutter));
  padding: clamp(24px, 4.5vw, 48px) clamp(20px, 4.5vw, 52px) clamp(24px, 4vw, 44px);
  border-radius: 28px; background: var(--st-card);
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  box-shadow: var(--st-shadow);
}
.page-os .jn-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--st-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (max-width: 599px) { .page-os .jn-wrap { width: calc(100% - 20px); border-radius: 24px; } }

/* ------------------------------------------------------------ type -- */
.page-os .dm-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-2); }
.page-os .dm-title, .page-os .jn-q, .page-os .dm-sending__title, .page-os .jn-done__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
}
.page-os .dm-title { font-size: clamp(28px, 1.1rem + 2.2vw, 42px); }
.page-os .jn-q { font-size: clamp(24px, 1rem + 1.7vw, 34px); }
.page-os .jn-lede, .page-os .jn-done__text { color: var(--fg-2); }
.page-os .jn-count { color: var(--fg-2); font-weight: 500; }

/* progress: five rounded segments, done in blue */
.page-os .jn-bars { gap: 6px; }
.page-os .jn-bars li { height: 4px; border-radius: 2px; background: var(--st-fill); }
.page-os .jn-bars li.is-done { background: var(--tint); }
.page-os .jn-bars li.is-current { background: var(--fg); }

/* ---------------------------------------------------------- fields -- */
.page-os .jn-field > label, .page-os .jn-label { font-size: 13px; font-weight: 500; color: var(--fg-2); padding-left: 2px; }
.page-os .jn-opt { color: var(--fg-3); }
.page-os .jn-field input:not([type="checkbox"]):not([type="file"]),
.page-os .jn-field select, .page-os .jn-field textarea,
.page-os .dm-reveal input, .page-os .dm-refs input, .page-os .pf-cc {
  border: 0; border-radius: 12px; background: var(--st-input); color: var(--fg);
  box-shadow: inset 0 0 0 0.5px var(--st-input-line), inset 0 1px 1px rgba(16, 24, 64, 0.04);
  font-family: var(--font);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.page-os .jn-field input:not([type="checkbox"]):not([type="file"]), .page-os .jn-field select,
.page-os .dm-reveal input, .page-os .dm-refs input, .page-os .pf-cc { height: 48px; }
.page-os .jn-field input:focus, .page-os .jn-field select:focus, .page-os .jn-field textarea:focus,
.page-os .dm-reveal input:focus, .page-os .dm-refs input:focus,
.page-os .pf-cc[aria-expanded="true"], .page-os .pf-cc:focus-visible {
  outline: none; background: var(--st-solid);
  box-shadow: inset 0 0 0 0.5px var(--tint), 0 0 0 3.5px color-mix(in srgb, var(--tint) 25%, transparent);
}
.page-os .jn-field [aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--st-err) !important; }
.page-os .pf-cc svg { color: var(--fg-2); }
.page-os .jn-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.page-os .jn-err { color: var(--st-err); }
.page-os .jn-fail { background: var(--st-err-bg); color: var(--st-err); }
.page-os .jn-consent input { accent-color: var(--tint); }
.page-os .jn-privacy { color: var(--tint); text-decoration: none; }

/* --------------------------------------------- choices (chips, cards) -- */
.page-os .dm-chip, .page-os .jn-card {
  border: 0; background: var(--st-fill); box-shadow: none; color: var(--fg);
}
.page-os .dm-chip::before { background: var(--fg-3); }
.page-os .dm-chip[aria-pressed="true"], .page-os .dm-chip[aria-checked="true"],
.page-os .jn-card[aria-checked="true"] { background: var(--tint-soft); color: var(--tint-ink); box-shadow: inset 0 0 0 1.5px var(--tint); }
.page-os .dm-chip[aria-pressed="true"]::before, .page-os .dm-chip[aria-checked="true"]::before { background: var(--tint); }
@media (hover: hover) and (pointer: fine) {
  .page-os .dm-chip:hover, .page-os .jn-card:hover { border-color: transparent; background: color-mix(in srgb, var(--st-fill) 70%, var(--fg) 7%); }
  .page-os .dm-chip[aria-pressed="true"]:hover, .page-os .dm-chip[aria-checked="true"]:hover { background: var(--tint-soft); }
}

/* -------------------------------------------------------- the drops -- */
.page-os .jn-drop {
  border: 1.5px dashed var(--st-line-2); background: var(--st-input); border-radius: 16px;
}
.page-os .jn-drop__icon { background: var(--tint-soft); color: var(--tint); }
.page-os .jn-drop__swap { background: var(--st-fill); }
.page-os .jn-drop.is-over, .page-os .jn-drop:focus-within { border-color: var(--tint); background: var(--tint-soft); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .page-os .jn-drop:hover { border-color: var(--tint); } }
.page-os .dm-file { border: 0; background: var(--st-input); box-shadow: inset 0 0 0 0.5px var(--st-input-line); }
.page-os .dm-file__icon { background: var(--st-fill); }
.page-os .dm-file.is-error { background: var(--st-err-bg); box-shadow: none; }
.page-os .dm-file__bar, .page-os .dm-progress { background: var(--st-fill); }
.page-os .dm-file__bar span, .page-os .dm-progress span { background: var(--tint); }
.page-os .dm-file.is-done .dm-file__bar span { background: var(--st-ok); }
.page-os .dm-file.is-done .dm-file__state { color: var(--st-ok); }
@media (hover: hover) and (pointer: fine) { .page-os .dm-file__remove:hover { background: var(--st-fill); } }

/* --------------------------------------------------------- buttons -- */
.page-os .btn { font-family: var(--font); letter-spacing: -0.01em; border-radius: 980px; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms ease, background-color 200ms ease; }
.page-os .btn:active { transform: scale(0.97); }
.page-os .btn--primary {
  background: #0A7CFF; color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 0.5px rgba(0, 50, 140, 0.25), 0 1px 2px rgba(0, 60, 160, 0.2), 0 6px 14px -8px rgba(0, 110, 255, 0.55);
}
.page-os .btn--primary::before, .page-os .btn--primary::after { display: none; }
@media (hover: hover) and (pointer: fine) { .page-os .btn--primary:hover { filter: brightness(1.07); background: #0A7CFF; color: #FFFFFF; } }
.page-os .btn--secondary { background: var(--st-fill); color: var(--tint); box-shadow: none; }
.page-os .jn-prev { color: var(--tint); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .page-os .jn-prev:hover { color: var(--tint-ink); } }

/* The application's answer cards: smart glass. Frosted, a bright rim, a
   soft light that follows the pointer (--gx / --gy, set by the form), a lift
   on hover, a press. Picked: the glass turns blue, the letter key pops. */
.page-os .jn-card {
  --gx: 50%; --gy: 0%;
  isolation: isolate; overflow: hidden; min-height: 72px; border: 0; border-radius: 18px;
  background: var(--st-glass); color: var(--fg);
  -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: var(--st-glass-shadow);
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 220ms ease, background-color 220ms ease;
}
.page-os .jn-card::before {   /* the rim */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--st-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 220ms ease;
}
.page-os .jn-card::after {    /* the light */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(160px circle at var(--gx) var(--gy), var(--st-sheen), transparent 70%);
  opacity: 0; transition: opacity 260ms ease;
}
.page-os .jn-card > * { position: relative; z-index: 2; }
.page-os .jn-card > .jn-card__check { position: absolute; }
.page-os .jn-card__k {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--st-solid); color: var(--fg-2); font-weight: 650;
  box-shadow: 0 0 0 0.5px var(--st-line-2), 0 2px 6px -2px rgba(16, 24, 64, 0.18);
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.page-os .jn-card__check { color: var(--tint); }
@media (hover: hover) and (pointer: fine) {
  .page-os .jn-card:hover { transform: translateY(-2px); background: var(--st-glass-hi); box-shadow: var(--st-glass-shadow-hi); }
  .page-os .jn-card:hover::after { opacity: 1; }
  .page-os .jn-card:hover .jn-card__k { color: var(--tint); }
}
.page-os .jn-card:active { transform: scale(0.98); transition-duration: 120ms; }
.page-os .jn-card[aria-checked="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 16%, transparent), color-mix(in srgb, var(--tint) 8%, transparent)), var(--st-glass);
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--tint), 0 10px 28px -14px color-mix(in srgb, var(--tint) 65%, transparent);
}
.page-os .jn-card[aria-checked="true"]::before { opacity: 0.5; }
.page-os .jn-card[aria-checked="true"] .jn-card__k { background: var(--tint); color: #FFFFFF; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tint) 80%, transparent); animation: st-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes st-pop { 0% { transform: scale(0.82); } 100% { transform: none; } }
.page-os .jn-q { max-width: none; }
.page-os .jn-next { color: var(--tint); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .page-os .jn-next:hover { color: var(--tint-ink); } .page-os .jn-bars li:has(.jn-bar:hover) { filter: none; background: color-mix(in srgb, var(--tint) 55%, var(--st-fill)); } }
.page-os .jn-bar:focus-visible { outline-color: var(--tint); }
@media (prefers-reduced-motion: reduce) { .page-os .jn-card, .page-os .jn-card::after { transition: none; } .page-os .jn-card[aria-checked="true"] .jn-card__k { animation: none; } }

/* ----------------------------------------------------------- sent -- */
.page-os .jn-done__mark { border: 0; background: var(--tint); color: #FFFFFF; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--tint) 70%, transparent); }
.page-os .jn-done__link { color: var(--tint); text-decoration: none; }

/* ------------------------------------------------- country picker -- */
.page-os .pf-box { background: var(--st-solid); color: var(--fg); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-os .pf-box { background: color-mix(in srgb, var(--st-solid) 86%, transparent); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); }
}
.page-os .pf-search { background: var(--st-fill); }
.page-os .pf-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--tint); }
.page-os .pf-opt[aria-current="true"] { background: var(--tint-soft); }
.page-os .pf-check { color: var(--tint); }
@media (hover: hover) and (pointer: fine) { .page-os .pf-opt:hover { background: var(--st-fill); } }
.page-os .pf-grab { background: var(--st-line-2); }
@media (min-width: 760px) { .page-os .pf-box { border: 0; box-shadow: 0 0 0 0.5px var(--st-line-2), 0 24px 60px -20px rgba(16, 24, 64, 0.4); } }

/* ------------------------------------- appearance: from the button -- */
:root[data-vt="theme"]::view-transition-old(root) { animation: none; }
:root[data-vt="theme"]::view-transition-new(root) { animation: st-vt-reveal 640ms cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes st-vt-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); } }
@media (prefers-reduced-motion: reduce) { .st-seg button, .st-back { transition: none; } }
.page-os .jn-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--tint) 40%, transparent); outline-offset: 3px; }