/* Generated by bin/port-chrome.php from home.css — do not edit.
 * The shared site header and footer, lifted out of the homepage stylesheet
 * so every page carries the same chrome. Re-run the porter after a design
 * re-import. Root tokens are scoped to .masthead/.foot/.chrome so they do
 * not leak into pages styled by app.css. */

.masthead, .foot, .chrome {
  color-scheme: dark;

  --bg:            #070b10;
  --bg-sunk:       #05080c;
  --surface-1:     #0d141c;
  --surface-2:     #121c26;
  --surface-3:     #18242f;
  --line:          #223140;
  --line-soft:     #16212c;

  --text:          #e9eff5;
  --text-2:        #9fb0c0;
  --text-3:        #8396a8;

  --accent:        #2fe3a0;
  --accent-hi:     #5cf0b8;
  --accent-ink:    #04180f;
  --accent-wash:   rgba(47, 227, 160, 0.11);
  --accent-line:   rgba(47, 227, 160, 0.28);

  --violet:        #8b5cf6;
  --cyan:          #22d3ee;
  --warn:          #f5a524;
  --danger:        #ff5f5f;

  /* Elevation: hairline + cast shadow. On dark, the hairline does most
     of the work; the shadow just separates planes. */
  --e1: 0 0 0 1px var(--line-soft);
  --e2: 0 0 0 1px var(--line-soft), 0 2px 8px rgba(0, 0, 0, 0.4);
  --e3: 0 0 0 1px var(--line), 0 14px 40px rgba(0, 0, 0, 0.55);
  --e4: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 6px 26px rgba(47, 227, 160, 0.26);

  --masthead-bg: rgba(7, 11, 16, 0.72);
  --aurora-op-1: 0.16;
  --aurora-op-2: 0.11;
  --aurora-op-3: 0.09;
  --flag-rest: saturate(0.42) brightness(0.86);

  /* Type. System stack only — no webfont may be requested. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 ratio, fluid only where it earns it (hero, band
     headings). Body sizes are fixed so translations stay predictable. */
  --t-hero: clamp(2.15rem, 4.4vw + 0.9rem, 4.1rem);
  --t-h2:   clamp(1.55rem, 1.9vw + 0.85rem, 2.5rem);
  --t-h3:   1.0625rem;
  --t-body: 0.9375rem;
  --t-sm:   0.8125rem;
  --t-xs:   0.6875rem;

  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Springy but engineered — overshoots slightly, never bounces. */
  --spring: cubic-bezier(0.16, 0.9, 0.24, 1.02);
  --ease:   cubic-bezier(0.32, 0.72, 0.24, 1);
}
[data-theme="light"] .masthead, [data-theme="light"] .foot, [data-theme="light"] .chrome {
  color-scheme: light;
  --bg: #eceff4; --bg-sunk: #e4e9ef;
  --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f4f7fa;
  --line: #d3dce5; --line-soft: #e3e9ef;
  --text: #0d1620; --text-2: #4b5c6e; --text-3: #596a7b;
  --accent: #0b7f56; --accent-hi: #096b48; --accent-ink: #ffffff;
  --accent-wash: rgba(11, 127, 86, 0.09); --accent-line: rgba(11, 127, 86, 0.24);
  --violet: #6d3fd4; --cyan: #0e7f96; --warn: #a35a00; --danger: #c22f2f;
  --e1: 0 0 0 1px var(--line-soft);
  --e2: 0 1px 2px rgba(13, 22, 32, 0.07), 0 4px 12px rgba(13, 22, 32, 0.06), 0 0 0 1px var(--line-soft);
  --e3: 0 1px 2px rgba(13, 22, 32, 0.08), 0 10px 28px rgba(13, 22, 32, 0.1), 0 0 0 1px var(--line-soft);
  --e4: 0 2px 4px rgba(13, 22, 32, 0.08), 0 24px 60px rgba(13, 22, 32, 0.16), 0 0 0 1px var(--line-soft);
  --glow-accent: 0 2px 4px rgba(11, 127, 86, 0.2), 0 10px 24px rgba(11, 127, 86, 0.22);
  --masthead-bg: rgba(236, 239, 244, 0.86);
  --aurora-op-1: 0.1; --aurora-op-2: 0.07; --aurora-op-3: 0.06;
  --flag-rest: saturate(0.5) brightness(0.98);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .masthead, :root:not([data-theme="dark"]) .foot, :root:not([data-theme="dark"]) .chrome {
  color-scheme: light;
  --bg: #eceff4; --bg-sunk: #e4e9ef;
  --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f4f7fa;
  --line: #d3dce5; --line-soft: #e3e9ef;
  --text: #0d1620; --text-2: #4b5c6e; --text-3: #596a7b;
  --accent: #0b7f56; --accent-hi: #096b48; --accent-ink: #ffffff;
  --accent-wash: rgba(11, 127, 86, 0.09); --accent-line: rgba(11, 127, 86, 0.24);
  --violet: #6d3fd4; --cyan: #0e7f96; --warn: #a35a00; --danger: #c22f2f;
  --e1: 0 0 0 1px var(--line-soft);
  --e2: 0 1px 2px rgba(13, 22, 32, 0.07), 0 4px 12px rgba(13, 22, 32, 0.06), 0 0 0 1px var(--line-soft);
  --e3: 0 1px 2px rgba(13, 22, 32, 0.08), 0 10px 28px rgba(13, 22, 32, 0.1), 0 0 0 1px var(--line-soft);
  --e4: 0 2px 4px rgba(13, 22, 32, 0.08), 0 24px 60px rgba(13, 22, 32, 0.16), 0 0 0 1px var(--line-soft);
  --glow-accent: 0 2px 4px rgba(11, 127, 86, 0.2), 0 10px 24px rgba(11, 127, 86, 0.22);
  --masthead-bg: rgba(236, 239, 244, 0.86);
  --aurora-op-1: 0.1; --aurora-op-2: 0.07; --aurora-op-3: 0.06;
  --flag-rest: saturate(0.5) brightness(0.98);
}
}

/* Tabular, precise numerals — this is a numbers product */
.mono, .fact-n, .rp-number, .rp-ring-clock, .rp-code-big, .flagcard-code, .step-n, .coverage-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.shell {
  inline-size: 100%;
  max-inline-size: 1220px;
  margin-inline: auto;
  padding-inline: clamp(14px, 3.6vw, 40px);
}
/* ─── 5. Masthead ───────────────────────────────────────────────*/
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--masthead-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.masthead.is-scrolled { border-block-end-color: var(--line-soft); }
.masthead-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  min-block-size: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
.brand:hover { color: var(--text); }
.brand-mark { inline-size: 28px; block-size: 28px; color: var(--accent); flex: none; }
.bm-ring {
  stroke-dashoffset: 0;
  animation: bm-draw 8s var(--ease) -5.4s infinite;
}
@keyframes bm-draw {
  0% { stroke-dashoffset: 75.4; }
  34% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 75.4; }
}
.bm-slot { animation: bm-slot 8s var(--ease) -5.4s infinite; transform-origin: 16px 16px; }
.brand:hover .bm-ring, .brand:hover .bm-slot { animation-duration: 2.4s; }
.brand-word { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.03em; }
.brand-tld { color: var(--text-3); }
.masthead-nav { display: none; gap: 2px; margin-inline-end: auto; }
@media (min-width: 940px) { .masthead-nav { display: flex; } }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 12px;
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 550;
  transition: color 0.2s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 12px;
  block-size: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.26s var(--spring);
}
[dir="rtl"] .nav-link::after { transform-origin: 100% 50%; }
.nav-link:hover::after { transform: scaleX(1); }
.masthead-end { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
@media (min-width: 940px) { .masthead-end { margin-inline-start: 0; } }
/* ─── 6. Buttons ────────────────────────────────────────────────*/
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding-inline: 24px;
  border-radius: var(--r-md);
  font-size: var(--t-body);
  font-weight: 650;
  letter-spacing: -0.005em;
  overflow: hidden;
  transition: transform 0.2s var(--spring), box-shadow 0.24s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-sm { min-block-size: 44px; padding-inline: 16px; font-size: var(--t-sm); }
.btn-lg { min-block-size: 52px; padding-inline: 28px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow-accent); }
.btn-primary:hover { color: var(--accent-ink); background: var(--accent-hi); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
/* Light sweeps up from the bottom edge — stays inside the clip box */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 180% at 50% 125%, rgba(255, 255, 255, 0.34), transparent 62%);
  opacity: 0;
  transform: translateY(34%);
  transition: opacity 0.3s var(--ease), transform 0.5s var(--spring);
}
.btn-primary:hover::after { opacity: 1; transform: none; }
.btn-quiet { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-quiet:hover { color: var(--text); background: var(--surface-1); box-shadow: inset 0 0 0 1.5px var(--accent-line); transform: translateY(-2px); }
/* ─── 7. Language picker ────────────────────────────────────────
   <details>-based, so it opens with zero JS; script only adds
   outside-click, Escape and arrow-key handling. */
.picker { position: relative; flex: none; }
.picker-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  min-block-size: 44px;
  padding-inline: 10px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.picker-btn::-webkit-details-marker { display: none; }
.picker-btn:hover, .picker[open] .picker-btn { color: var(--text); background: var(--surface-2); }
.picker-globe { inline-size: 18px; block-size: 18px; flex: none; }
.picker-code { font-family: var(--mono); letter-spacing: 0.02em; }
.picker-caret { inline-size: 13px; block-size: 13px; flex: none; opacity: 0.7; transition: transform 0.26s var(--spring); }
.picker[open] .picker-caret { transform: rotate(180deg); }
.picker-panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 120;
  inline-size: 268px;
  max-block-size: min(66vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  background: var(--surface-1);
  border-radius: var(--r-lg);
  box-shadow: var(--e4);
  animation: pop-in 0.22s var(--spring);
}
.picker-title {
  padding: 6px 10px 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.picker-list { display: grid; gap: 1px; }
.picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--t-body);
  transition: background-color 0.16s var(--ease);
}
.picker-item:hover { background: var(--surface-3); color: var(--text); }
.picker-native {
  flex: 1;
  min-inline-size: 0;
  font-weight: 600;
  text-align: start;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-en { flex: none; color: var(--text-3); font-size: var(--t-sm); }
.picker-check { inline-size: 15px; block-size: 15px; flex: none; color: var(--accent); }
.picker-item.is-current { background: var(--accent-wash); }
.picker-item.is-current .picker-native { color: var(--accent); }
.picker-item.is-current .picker-en { display: none; }
@media (max-width: 430px) {
  .picker-panel { position: fixed; inset-block-start: 64px; inset-inline: 10px; inline-size: auto; }
  .picker-en { display: none; }
}
@keyframes blip { 50% { opacity: 0.3; transform: scale(0.7); } }
@keyframes pulse-soft { 50% { opacity: 0.45; } }
/* ─── 17. Footer ────────────────────────────────────────────────
   Structured close: CTA strip, brand block with live stats, three
   balanced link columns, fine print, base row with language menu. */
.foot { background: var(--bg-sunk); border-block-start: 1px solid var(--line-soft); }
.foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-block-end: 1px solid var(--line-soft);
}
.foot-top-copy { min-inline-size: 0; max-inline-size: 44em; }
.foot-top-t { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.foot-top-s { color: var(--text-3); font-size: var(--t-sm); margin-block-start: 3px; text-wrap: pretty; }
.foot-top-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .foot-top { flex-direction: column; align-items: stretch; text-align: center; }
  .foot-top-actions .btn { flex: 1; }
}
.foot-grid {
  display: grid;
  gap: 30px 24px;
  padding-block: clamp(30px, 4vw, 48px) 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 800px) { .foot-brand { grid-column: auto; } }
.foot-tag { margin-block-start: 14px; max-inline-size: 26em; color: var(--text-3); font-size: var(--t-sm); text-wrap: pretty; }
.foot-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 600;
}
.foot-status-dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none;
  background: var(--accent);
  animation: blip 3.1s ease-in-out infinite;
}
.foot-stats { display: flex; gap: 22px; margin: 18px 0 0; padding-block-start: 16px; border-block-start: 1px solid var(--line-soft); }
.foot-stats dt { font-size: var(--t-body); font-weight: 700; color: var(--text); }
.foot-stats dd { margin: 2px 0 0; color: var(--text-3); font-size: var(--t-xs); }
.foot-col { display: grid; gap: 1px; align-content: start; justify-items: start; }
.foot-h { margin-block-end: 10px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.foot-col a {
  padding-block: 7px;
  color: var(--text-2);
  font-size: var(--t-sm);
  transition: color 0.18s var(--ease), transform 0.2s var(--spring);
}
.foot-col a:hover { color: var(--accent); transform: translateX(2px); }
[dir="rtl"] .foot-col a:hover { transform: translateX(-2px); }
.foot-fine {
  padding-block: 18px;
  border-block-start: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: var(--t-xs);
  line-height: 1.65;
}
.foot-fine p { text-wrap: pretty; }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px 20px;
  border-block-start: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: var(--t-sm);
}
.foot-copyright { font-size: var(--t-sm); }
.foot-base-end { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.foot-base-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 10px;
  color: var(--text-3);
  font-size: var(--t-sm);
  transition: color 0.18s var(--ease);
}
.foot-base-link:hover { color: var(--accent); }
/* Footer language menu opens upward */
.picker-up .picker-panel {
  inset-block-start: auto;
  inset-block-end: calc(100% + 8px);
  animation: pop-up 0.22s var(--spring);
}
.picker-up[open] .picker-caret { transform: rotate(0deg); }
.picker-up .picker-caret { transform: rotate(180deg); }
/* ─── 20. Narrow devices: 280px folding phones ──────────────────*/
@media (max-width: 400px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-facts { gap: 14px 20px; }
  .rp-timer { gap: 12px; }
  .rp-ring-wrap { inline-size: 62px; block-size: 62px; }
  .flagcard { min-inline-size: 66px; }
  .marquee { -webkit-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
}
@media (max-width: 320px) {
  .replay-body { padding: 12px; }
  .rp-cost { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .btn-lg { padding-inline: 18px; }
  .tile-link { padding: 13px; gap: 11px; }
  .tile-ic { inline-size: 34px; block-size: 34px; }
  .tile-price { display: none; }
}

/* Masthead logo size on EVERY public page. It lived only in products.css
   (landing), so pricing and legal rendered the kit SVG at its intrinsic 224 px
   and the mobile masthead overflowed (found 2026-10-11 during the icon
   verification). */
.brand-logo img, .otp-brand { display: block; inline-size: 128px; block-size: auto; aspect-ratio: 224 / 64; flex: none; }
@media (max-width: 620px) { .brand-logo img, .otp-brand { inline-size: 112px; } }