/* Display face, self-hosted and preloaded. font-display: optional means it is used when it arrives in time (preload + cache make that the normal case) and never swaps in late, so the headline cannot shift. The fallback below is metric-matched (measured: 88% size gives the same line count and block height), so even the fallback looks and sizes the same. */
@font-face { font-family: "PJS Fallback"; src: local("Segoe UI Bold"), local("Segoe UI"), local("Arial Bold"), local("Arial"); font-weight: 600 800; size-adjust: 88%; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: optional; src: url("/static/fonts/plus-jakarta-sans.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ══════════════════════════════════════════════════════════════════════
   SponsorApply — design system v8 "EDITORIAL CAREER INTELLIGENCE"
   One coherent layer (replaces the v5→v7 override stack).

   Character: premium · global · calm · precise · editorial · data-rich.
   Palette:  midnight navy (structure) · international blue (action)
             emerald (verified evidence) · amber (uncertainty)
             coral (blocking only) · cool white / soft slate (surfaces).
   Type:     Fraunces (editorial display) · Inter (UI) · JetBrains Mono (data).
   Colour always carries meaning — green is never decoration.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --paper:   #F8F9FB;      /* cool white canvas */
  --card:    #FFFFFF;
  --slate:   #EEF1F5;      /* soft slate secondary */
  --line:    #B9C3D1;   /* card and divider borders: clearly visible on white */
  --line-2:  #8592A6;   /* form controls: stronger than cards */

  /* structure */
  --navy:    #0F1E33;      /* midnight navy — nav, footer, premium bands */
  --navy-2:  #16283F;
  --navy-3:  #1E3350;

  /* ink */
  --ink:     #111B2B;
  --ink-2:   #263142;   /* secondary text: 13:1 on white */
  --muted:   #475467;   /* supporting text: 7.6:1 on white */
  --faint:   #667085;   /* placeholders and hints: 5:1 on white */

  /* meaning */
  --blue:       #1A56DB;   /* the ONE action colour: 6.4:1 on white, 6.0:1 on slate */
  --blue-deep:  #164FC5;
  --blue-soft:  rgba(26,86,219,.08);
  --blue-bright:#2F6BFF;   /* gradients and dark backgrounds only (4.49:1 on white: not for text) */
  --violet:     #8B5CF6;   /* accent, gradients only */
  --mint:       #22D3A6;   /* accent, gradients only */
  --emerald:      #05603A; /* verified positive evidence ONLY: 7.4:1 on white */
  --emerald-deep: #05603A;
  --emerald-soft: rgba(6,118,71,.08);
  --amber:      #92400E;   /* uncertainty: 7.1:1 on white */
  --amber-soft: rgba(180,83,9,.09);
  --coral:      #D92D20;   /* blocking problems ONLY */

  /* semantic aliases (use these in new CSS) */
  --bg: var(--paper); --surface: var(--card); --fg: var(--ink); --fg-muted: var(--muted);
  --primary: var(--blue); --primary-fg: #FFFFFF; --border: var(--line); --border-strong: var(--line-2);
  --success: var(--emerald); --warning: var(--amber); --error: var(--coral);
  --focus-ring: 0 0 0 3px rgba(26,86,219,.35);

  /* shape and size scale */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --control-h: 44px; --control-h-sm: 36px;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --coral-soft: rgba(217,45,32,.07);

  /* legacy token aliases (older views still reference these) */
  --brand: var(--blue); --brand-deep: var(--blue-deep); --brand-soft: var(--blue-soft);
  --signal: var(--emerald); --signal-deep: var(--emerald-deep); --signal-soft: var(--emerald-soft);
  --danger: var(--coral); --iris: var(--blue); --data: var(--blue);

  --radius:    12px;
  --radius-lg: 16px;
  --shadow:    0 1px 2px rgba(15,30,51,.05), 0 6px 20px -12px rgba(15,30,51,.12);
  --shadow-lg: 0 2px 4px rgba(15,30,51,.05), 0 18px 44px -18px rgba(15,30,51,.22);
  --glow:      0 6px 18px -8px rgba(26,86,219,.45);
  --ease:      cubic-bezier(.22,.68,.24,1);

  --font:    "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif;
  --display: "Fraunces", "Georgia", serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body > * { position: relative; z-index: 1; }

main { max-width: 1080px; margin: 0 auto; padding: 2.6rem 1.5rem 5rem; }
main.wide { max-width: 1240px; }
@media (max-width: 640px) { main { padding: 1.6rem 1.1rem 3.5rem; } }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }
::selection { background: rgba(26,86,219,.18); }

/* ── typography — editorial display over disciplined UI text ─────────── */
h1, h2 { font-family: var(--display); font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.05; letter-spacing: -.02em; margin: .4rem 0 0; }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5rem; }
h3 { font-weight: 650; font-size: 1.05rem; letter-spacing: -.012em; margin: 0 0 .35rem; color: var(--ink); }
h4 { font-weight: 650; font-size: .95rem; margin: 0 0 .3rem; color: var(--ink); }
p  { margin: .55rem 0; }

.gradient { color: var(--blue); background: none; }  /* editorial: no rainbow text */
.lede {
  color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.65; max-width: 62ch; margin: 1rem auto 0;
}
.micro { color: var(--muted); font-size: .84rem; }
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); margin: 0;
}
.eyebrow::before { content: ''; width: 16px; height: 1.5px; background: var(--blue); }
@media (max-width: 480px) { .eyebrow { font-size: .62rem; letter-spacing: .13em; } }

/* ── navigation — midnight navy command bar ──────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem 1.4rem;
  background: var(--navy); color: #E7ECF4;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand .logo-tile { width: 27px; height: 27px; flex: 0 0 auto; border-radius: 7px; }
.brand .wordmark { font-weight: 700; letter-spacing: -.025em; color: #fff; font-size: 1.06rem; }
.brand .wordmark b { color: #7EA4F4; font-weight: 700; }

.navsearch { display: flex; flex: 0 1 250px; }
.navsearch input {
  width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #E7ECF4; border-radius: 8px; padding: .42rem .8rem; font: inherit; font-size: .86rem;
}
.navsearch input::placeholder { color: #8C99AD; }
.navsearch input:focus { outline: none; border-color: #5F8BEA; background: rgba(255,255,255,.12); }
@media (max-width: 980px) { .navsearch { display: none; } }

.nav-items { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nitem {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem; border-radius: 8px; text-decoration: none;
  color: #B9C3D3; font-size: .89rem; font-weight: 550; line-height: 1;
  transition: color .15s, background .15s;
}
.nitem:hover { color: #fff; background: rgba(255,255,255,.07); }
.nitem svg { width: 16px; height: 16px; opacity: .8; }
.nitem span { white-space: nowrap; }
.nav-divider { width: 1px; height: 22px; background: rgba(255,255,255,.14); margin: 0 .5rem; }

.credits {
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  background: rgba(126,164,244,.14); color: #A8C2F5;
  border: 1px solid rgba(126,164,244,.3); padding: .22rem .65rem; border-radius: 99px;
  white-space: nowrap;
}
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--blue); color: #fff; font-weight: 700; font-size: .82rem;
}
.signin {
  border: 1px solid rgba(255,255,255,.3); color: #fff !important; font-weight: 600; font-size: .88rem;
  border-radius: 8px; padding: .45rem 1.05rem; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.signin:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.join {
  background: var(--blue); color: #fff !important; font-weight: 650; font-size: .88rem;
  padding: .48rem 1.1rem; text-decoration: none; white-space: nowrap; border-radius: 8px;
}
.join:hover { background: var(--blue-deep); }
.nav .micro { color: #8C99AD; }
.nav .micro:hover { color: #fff; }

@media (max-width: 800px) {
  .nav { flex-wrap: wrap; row-gap: .35rem; padding: .5rem .9rem; }
  .nav-items {
    order: 2; width: 100%; justify-content: flex-start; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
  }
  .nav-items::-webkit-scrollbar { display: none; }
  .nav-items > * { flex: 0 0 auto; }
  .nitem { padding: .45rem .65rem; font-size: .84rem; }
  .nav-divider { display: none; }
  .join { order: -1; margin-right: .3rem; }
}

/* ── buttons — rectangles, one action colour, no shimmer ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--blue); color: #fff !important; border: 0; border-radius: 10px;
  padding: .78rem 1.55rem; font: inherit; font-size: .95rem; font-weight: 650; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, var(--glow);
  transition: background .18s, transform .15s var(--ease), box-shadow .2s;
}
.btn:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled, .btn[disabled] { background: var(--slate); color: var(--faint) !important; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-lg { padding: .95rem 2.1rem; font-size: 1.02rem; border-radius: 12px; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; border-radius: 8px; box-shadow: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--ink) !important; text-decoration: none; font-weight: 600; font-size: .92rem;
  border: 1px solid var(--line-2); border-radius: 10px; padding: .74rem 1.4rem; background: #fff;
  transition: border-color .18s, background .18s;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue) !important; background: var(--blue-soft); }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #fff; color: var(--ink) !important; text-decoration: none; font-weight: 600;
  padding: .74rem 1.2rem; border-radius: 10px; font-size: .95rem; width: 100%;
  border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s;
}
.btn-google:hover { border-color: var(--ink-2); box-shadow: var(--shadow); }
.ordivider { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--muted); font-size: .76rem; }
.ordivider::before, .ordivider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── evidence language — the honest chips (colour = meaning) ─────────── */
.badge, .ev {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .76rem; font-weight: 600; padding: .2rem .6rem; border-radius: 6px;
  background: var(--emerald-soft); color: var(--emerald); border: 1px solid rgba(6,118,71,.22);
}
.badge.unverified, .ev-none {
  background: var(--slate); color: var(--muted); border-color: var(--line);
}
.ev-mention { background: var(--blue-soft); color: var(--blue-deep); border-color: rgba(26,86,219,.22); }
.ev-warn    { background: var(--amber-soft); color: var(--amber); border-color: rgba(180,83,9,.24); }
.ev-no      { background: var(--coral-soft); color: var(--coral); border-color: rgba(217,45,32,.22); }

/* Share bar for tool results (partials/share.ejs) */
.sharebar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0 .2rem; }
.sharebar .btn-sm { padding: .3rem .8rem; font-size: .8rem; }
.datatable th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .5rem .4rem; }
.datatable td { padding: .45rem .4rem; vertical-align: top; }
.datatable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sponsorship Verdict — level chip + explained reasons (verdict.js) */
.vchips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0 0; }
.vchip {
  display: inline-flex; align-items: center; font-size: .76rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--slate); color: var(--muted);
}
.vchip.v-ok      { background: var(--emerald-soft); color: var(--emerald); border-color: rgba(6,118,71,.25); }
.vchip.v-mention { background: var(--blue-soft); color: var(--blue-deep); border-color: rgba(26,86,219,.22); }
.vchip.v-warn    { background: var(--amber-soft); color: var(--amber); border-color: rgba(180,83,9,.24); }
.vchip.v-no      { background: var(--coral-soft); color: var(--coral); border-color: rgba(217,45,32,.22); }
.verdict-panel { border-left: 4px solid var(--line); }
.verdict-panel.v-ok { border-left-color: var(--emerald); }
.verdict-panel.v-mention { border-left-color: var(--blue); }
.verdict-panel.v-warn { border-left-color: var(--amber); }
.verdict-panel.v-no { border-left-color: var(--coral); }
.verdict-panel h2 { margin: .1rem 0 .3rem; font-size: 1.25rem; }
.vreasons { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .55rem; }
.vreasons li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; align-items: start; }
.vreasons .vi { font-weight: 800; text-align: center; line-height: 1.4; }
.vreasons .s-ok .vi { color: var(--emerald); }
.vreasons .s-mid .vi { color: var(--amber); }
.vreasons .s-bad .vi { color: var(--coral); }
.vreasons .s-unknown .vi { color: var(--muted); }
.vreasons b { display: block; font-size: .92rem; }
.vreasons small { color: var(--muted); font-size: .8rem; }

/* verdict tags — WHERE CAN I GO labels (never fake percentages) */
.vd { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
      padding: .24rem .6rem; border-radius: 5px; white-space: nowrap; }
.vd-EXCELLENT { background: var(--emerald); color: #fff; }
.vd-STRONG    { background: var(--emerald-soft); color: var(--emerald); border: 1px solid rgba(6,118,71,.3); }
.vd-GOOD      { background: var(--blue-soft); color: var(--blue-deep); border: 1px solid rgba(26,86,219,.25); }
.vd-POSSIBLE  { background: var(--slate); color: var(--ink-2); border: 1px solid var(--line-2); }
.vd-DIFFICULT { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(180,83,9,.24); }
.vd-INSUFFICIENT { background: none; color: var(--faint); border: 1px dashed var(--line-2); }

/* application status chips */
.status-submitted, .status-ready { background: var(--emerald-soft); color: var(--emerald); border-color: rgba(6,118,71,.25); }
.status-failed { background: var(--coral-soft); color: var(--coral); border-color: rgba(217,45,32,.22); }
.status-prepared, .status-approved { background: var(--amber-soft); color: var(--amber); border-color: rgba(180,83,9,.24); }

/* ── cards & panels — objects get cards; sections use whitespace ─────── */
.card {
  position: relative; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.card.link { text-decoration: none; color: inherit; display: block; }
.card h3 { display: flex; align-items: center; gap: .6rem; }
.card p { color: var(--ink-2); font-size: .95rem; }
.hico { display: inline-grid; place-items: center; flex: none; }
.hico svg { width: 17px; height: 17px; color: var(--blue); }

.panel { position: relative; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; }
.panel .ptitle {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .17em; font-weight: 650;
  color: var(--muted); margin: 0 0 1rem; display: flex; justify-content: space-between; align-items: center;
}
.panel .ptitle i { color: var(--emerald); font-style: normal; font-size: .7rem; }

.tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.featrow { max-width: 1040px; margin-inline: auto; }
.feat p { font-size: .92rem; line-height: 1.6; }
.strip { text-align: center; }
.strip .tri { max-width: 940px; margin-inline: auto; }

.ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; margin-bottom: .85rem;
  background: var(--blue-soft); border: 1px solid rgba(26,86,219,.14);
}
.ico svg { width: 18px; height: 18px; color: var(--blue); }
.ico.v2 { background: var(--emerald-soft); border-color: rgba(6,118,71,.15); }
.ico.v2 svg { color: var(--emerald); }
.ico.v3 { background: var(--slate); border-color: var(--line); }
.ico.v3 svg { color: var(--ink-2); }
.glow-card { border-color: rgba(26,86,219,.35); }
.glow-card::after { display: none; }

.hr { height: 1px; border: 0; margin: 0; background: var(--line); }

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding: 3.4rem 0 1rem; text-align: center; }
.section > .lede { margin-inline: auto; }
.shead { max-width: 780px; margin: 0 auto 1.7rem; }
.shead h2 { margin-top: .7rem; }
@media (max-width: 640px) { .section { padding: 2.6rem 0 .6rem; } }

/* ── OPPORTUNITY RING — signature segmented indicator ────────────────── */
/* Not a progress circle: five labelled segments (career/visa/sponsor/move/
   ready), each coloured by evidence state, gaps between segments. */
.oring { display: inline-grid; place-items: center; position: relative; width: 92px; height: 92px; flex: none; }
.oring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.oring .seg { fill: none; stroke-width: 7; stroke-linecap: butt; }
.oring .seg.ok   { stroke: var(--emerald); }
.oring .seg.mid  { stroke: var(--blue); }
.oring .seg.warn { stroke: var(--amber); }
.oring .seg.off  { stroke: var(--line-2); }
.oring .olabel { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.oring .olabel b { font-family: var(--mono); font-size: .95rem; letter-spacing: -.02em; }
.oring .olabel span { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.oring-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .74rem; color: var(--ink-2); }
.oring-legend i { font-style: normal; display: inline-flex; align-items: center; gap: .32rem; }
.oring-legend i::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--dot, var(--line-2)); }
.oring-legend i.ok::before { background: var(--emerald); }
.oring-legend i.mid::before { background: var(--blue); }
.oring-legend i.warn::before { background: var(--amber); }
.oring-legend i.off::before { background: var(--line-2); }

/* classic single-value ring (dashboard match score) */
.ring {
  --p: 80; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; position: relative; flex: none;
  background: conic-gradient(var(--emerald) calc(var(--p) * 1%), var(--slate) 0);
}
.ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.ring b { position: relative; font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--emerald); }
.ring.landed { animation: ringpulse .8s ease-out 1; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(6,118,71,.35); } 100% { box-shadow: 0 0 0 14px rgba(6,118,71,0); } }

/* ── SPONSOR RADAR — evidence panel ──────────────────────────────────── */
.radar { border-left: 3px solid var(--emerald); }
.radar .ptitle i { letter-spacing: 0; }
.rditem { display: flex; gap: .85rem; padding: .7rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.rditem:last-child { border-bottom: 0; }
.rditem .rdflag { font-size: 1.15rem; line-height: 1.3; flex: none; }
.rditem b { font-size: .92rem; font-weight: 600; color: var(--ink); display: block; }
.rditem .rdsrc { font-size: .76rem; color: var(--muted); margin-top: .15rem; line-height: 1.5; }
.rdnote {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--muted); line-height: 1.6;
}

/* ── WHY NOT APPLY panel ─────────────────────────────────────────────── */
.whynot { border-left: 3px solid var(--amber); }
.wnitem { display: flex; gap: .7rem; padding: .55rem 0; align-items: baseline; }
.wnitem .wntag { flex: none; font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 5px; }
.wntag.skip { background: var(--coral-soft); color: var(--coral); }
.wntag.review, .wntag.gap { background: var(--amber-soft); color: var(--amber); }
.wntag.unknown { background: var(--slate); color: var(--muted); }
.wnitem p { margin: 0; font-size: .88rem; color: var(--ink-2); }

/* source attribution row on job details */
.srcmeta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .8rem; color: var(--muted); padding: .8rem 0 0; }
.srcmeta b { color: var(--ink-2); font-weight: 600; }

/* ── hero — editorial, search-first ──────────────────────────────────── */
.hero, .phero { position: relative; text-align: center; padding: 2.6rem 0 .8rem; }
.phero h1 { max-width: 17em; margin-inline: auto; }
.phero .sub { color: var(--ink-2); margin: .9rem auto 1.5rem; max-width: 56ch; font-size: 1.05rem; }
.hero::before, .phero::before {
  content: ''; position: absolute; inset: -2.6rem -50vw auto -50vw; height: 480px; z-index: -1;
  background:
    radial-gradient(720px 380px at 24% 0%, rgba(26,86,219,.07), transparent 62%),
    radial-gradient(720px 380px at 76% 0%, rgba(6,118,71,.05), transparent 62%);
}
.heroactions { display: flex; gap: .8rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: 1.8rem 0 .9rem; }
.trustrow { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; color: var(--muted); font-size: .84rem; }
.trustrow span { display: inline-flex; align-items: center; gap: .4rem; }
.trustrow svg { width: 14px; height: 14px; color: var(--emerald); flex: none; }

.herosearch {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: .45rem;
  max-width: 780px; margin: 0 auto;
}
.herosearch input[type=search] { flex: 1 1 240px; border: 0; background: transparent; padding: .75rem 1rem; font-size: 1rem; }
.herosearch input[type=search]:focus { outline: none; border: 0; }
.herosearch .ac-wrap { border-left: 1px solid var(--line); flex: 0 1 200px; }
.herosearch .countryinput { flex: 0 1 200px; }
@media (max-width: 640px) {
  .herosearch { border-radius: 14px; }
  .herosearch .ac-wrap { border-left: 0; flex-basis: 100%; }
  .herosearch input[type=search] { flex-basis: 100%; }
  .herosearch .btn { width: 100%; }
}
.chiprow { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.chip {
  font-size: .82rem; font-weight: 550; padding: .34rem .85rem; border-radius: 99px; text-decoration: none;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line-2);
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.logostrip { margin: 1.5rem auto 0; max-width: 800px; text-align: center; font-weight: 600; color: var(--ink-2); font-size: .93rem; line-height: 1.9; }
.logostrip .lsl { color: var(--muted); font-weight: 500; font-size: .78rem; }

/* ── stats ───────────────────────────────────────────────────────────── */
.statbar { display: flex; justify-content: center; gap: 2.8rem; flex-wrap: wrap; margin: 2rem 0; }
.stat { text-align: center; }
.stat .num { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.stat .num em { color: var(--blue); font-style: normal; }
.stat .lbl { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.proof-num { font-family: var(--mono); font-size: 1.8rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); margin: .3rem 0 .5rem; }
.big { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; margin: .1rem 0; }
.kpi { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.kpi:last-child { border-bottom: 0; }
.kpi .kv { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.kpi .kv em { color: var(--emerald); font-style: normal; }
.kpi .kl { font-size: .76rem; color: var(--muted); }
.kpi .bar { height: 3px; background: var(--slate); border-radius: 99px; margin-top: .5rem; overflow: hidden; }
.kpi .bar b { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--blue); transition: width 1.6s var(--ease); }
.kpi .bar.lit b { width: var(--w, 70%); }
.country-row { display: flex; justify-content: space-between; font-size: .84rem; padding: .38rem 0; color: var(--ink-2); }
.country-row .cc, .cc {
  font-family: var(--mono); font-style: normal; font-size: .64rem; font-weight: 700;
  color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px;
  padding: .05rem .3rem; margin-right: .45rem; letter-spacing: .04em; vertical-align: 2px;
}
.country-row .on { color: var(--emerald); font-weight: 600; font-size: .72rem; letter-spacing: .1em; }
.country-row .soon { color: var(--muted); font-size: .72rem; letter-spacing: .1em; }

/* ── WHERE CAN I GO — destination board ──────────────────────────────── */
.wcig { display: flex; flex-direction: column; gap: 0; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.wcrow { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: .95rem 1.25rem; border-bottom: 1px solid var(--line); text-align: left; }
.wcrow:last-child { border-bottom: 0; }
.wcrow:hover { background: var(--paper); }
.wcflag { font-size: 1.5rem; line-height: 1; }
.wcrow h3 { margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wcrow .wcnums { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.wcrow .wcnums b { color: var(--ink-2); font-family: var(--mono); font-weight: 600; }
.wcwhy { grid-column: 1 / -1; margin: 0; padding: 0 0 .2rem 2.55rem; font-size: .84rem; color: var(--ink-2); line-height: 1.6; }
.wcwhy li { margin: .15rem 0; }
@media (max-width: 560px) { .wcrow { grid-template-columns: auto 1fr; } .wcrow .vd { grid-column: 2; justify-self: start; } .wcwhy { padding-left: 0; } }

/* coverage tiles (anonymous world view + countries index) */
.covgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .9rem; margin: 1.4rem 0; }
.covtile {
  display: flex; flex-direction: column; gap: .3rem; text-align: left; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem;
  color: inherit; transition: border-color .15s, box-shadow .2s;
}
.covtile:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.covtile .cthead { display: flex; align-items: center; gap: .55rem; font-weight: 650; font-size: .96rem; }
.covtile .ctflag { font-size: 1.25rem; }
.covtile .ctnums { font-size: .8rem; color: var(--muted); }
.covtile .ctnums b { font-family: var(--mono); color: var(--ink-2); }
.tier { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .12em; padding: .16rem .45rem; border-radius: 4px; margin-left: auto; }
.tier-FULL { background: var(--emerald-soft); color: var(--emerald); }
.tier-GROWING { background: var(--blue-soft); color: var(--blue-deep); }
.tier-BASIC { background: var(--slate); color: var(--muted); }

/* ── ticker ──────────────────────────────────────────────────────────── */
.ticker, .band { margin-inline: calc(50% - 50vw); }
.ticker {
  overflow: hidden; padding: .85rem 0; background: #fff; border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker + .ticker { border-top: 0; }
.ticker-track { display: inline-flex; gap: 3rem; white-space: nowrap; animation: ticker 90s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker.rev .ticker-track { animation-direction: reverse; animation-duration: 120s; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.tick b { color: var(--ink-2); font-weight: 600; }
.tick .ok { color: var(--emerald); }

/* ── stories / reviews ───────────────────────────────────────────────── */
.sgrid, .rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1rem; max-width: 1180px; margin: 0 auto; text-align: left; }
.story, .review {
  position: relative; display: flex; flex-direction: column; gap: .85rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow);
}
.squote { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink); flex: 1; }
.swho { display: flex; gap: .8rem; align-items: center; }
.swho b { font-size: .93rem; font-weight: 600; }
.swho .micro { margin: 0; font-size: .79rem; }
.savatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .84rem; color: #fff; }
.sg-1 { background: #1A56DB; } .sg-2 { background: #067647; } .sg-3 { background: #0F1E33; }
.sg-4 { background: #B45309; } .sg-5 { background: #444CE7; } .sg-6 { background: #175CD3; }
.smeta { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .85rem; border-top: 1px solid var(--line); }
.stag { font-family: var(--mono); font-size: .68rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: .16rem .5rem; }
.sdisc { font-size: .7rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.sdisc.verified { color: var(--emerald); font-weight: 600; }
.stars { color: var(--amber); letter-spacing: .16em; font-size: .78rem; }
.review p { font-size: .93rem; color: var(--ink-2); margin: .3rem 0; }
.review .who { font-size: .78rem; color: var(--muted); font-family: var(--mono); margin-top: auto; padding-top: .6rem; }
.avatar { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem; border: 1px solid var(--line); background: var(--paper); }
.avatar svg { width: 20px; height: 20px; color: var(--blue); }
.av-you { color: var(--muted); font-weight: 700; font-size: 1.4rem; flex: none; }
.beta-note { font-size: .76rem; color: var(--muted); margin-top: 1.3rem; line-height: 1.65; }
.beta-invite { display: flex; gap: 1rem; align-items: center; max-width: 580px; margin: 1.5rem auto 0; text-align: left; background: #fff; border: 1px dashed rgba(26,86,219,.4); border-radius: var(--radius); padding: 1.05rem 1.3rem; }

.founder { display: flex; gap: 1.4rem; align-items: center; max-width: 680px; margin: 0 auto; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; box-shadow: var(--shadow); }
.founder .favatar { width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; color: #fff; background: var(--navy); }
.founder h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.founder p { margin: .25rem 0; font-size: .93rem; color: var(--ink-2); }

/* ── closing band — the one navy moment ──────────────────────────────── */
.band {
  position: relative; text-align: center; padding: 4.6rem 1.5rem 5rem;
  background: var(--navy); color: #E7ECF4;
}
.band h2 { color: #fff; margin-bottom: 1.4rem; }
.band .lede { color: #B9C3D3; }
.band .micro { color: #8C99AD; }
main:has(.band) { padding-bottom: 0; }

/* the registry section: premium navy band */
.command {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
  margin: 2.2rem 0 0; align-items: stretch;
  background: var(--navy); border-radius: 20px; padding: 1.4rem;
  box-shadow: 0 24px 60px -28px rgba(15,30,51,.5);
}
.command .panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); box-shadow: none; display: flex; flex-direction: column; }
.command .panel .terminal { flex: 1; }
.command .panel .ptitle { color: #8C99AD; }
.command .panel .ptitle i { color: #34D399; }
.command .kpi { border-color: rgba(255,255,255,.08); }
.command .kpi .kv { color: #fff; }
.command .kpi .kv em { color: #34D399; }
.command .kpi .kl { color: #8C99AD; }
.command .bar { background: rgba(255,255,255,.08); }
.command .country-row { color: #D3DBE7; border-color: rgba(255,255,255,.08); }
.command .country-row .cc { background: rgba(255,255,255,.08); color: #AEBACB; border-color: transparent; }
.command .country-row .on { color: #34D399; }
.command .country-row .soon { color: #8C99AD; }
.command .micro { color: #8C99AD; }
.command .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #D3DBE7; }
.command .chip:hover { border-color: #34D399; color: #34D399; }

/* ── interior pages ──────────────────────────────────────────────────── */
.page { padding: 1.2rem 0 2rem; }
.page > h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.page > .lede { margin-bottom: 1.5rem; }
.page:not(.centered):not(.quiz):not(.pricing):not(.nf) > .lede { margin-inline: 0; }
.page.centered { text-align: center; }
.page.centered .row, .page.centered form { max-width: 660px; margin-inline: auto; }
.page.centered .cardlist, .page.centered .card { text-align: left; }
.crumb { font-size: .8rem; color: var(--muted); margin: 0 0 .4rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--blue); }

/* ── forms ───────────────────────────────────────────────────────────── */
.row { display: flex; gap: .6rem; margin: 1.2rem 0; }
.row input { flex: 1; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=tel], input[type=number], textarea, select {
  width: 100%; box-sizing: border-box; min-height: var(--control-h); padding: .6rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
/* Native selects: the popup list inherits color on Windows, so it must never
   be white (white-on-white was the reported flash). Light scheme always. */
select { color-scheme: light; color: var(--ink); background-color: #fff; appearance: none; -webkit-appearance: none; padding-right: 2.3rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233D4859' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; }
select option { color: var(--ink); background: #fff; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
/* Keyboard focus is always visible, mouse clicks stay clean. */
a:focus-visible, button:focus-visible, [role=button]:focus-visible, summary:focus-visible, label.option:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
input:disabled { opacity: .5; }
textarea { resize: vertical; line-height: 1.6; }
.auth-panel { position: relative; }
input[type=search] { padding: .62rem .85rem; }
.stack { display: flex; flex-direction: column; gap: .9rem; }
.stack label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; color: var(--muted); }
.stack input, .stack textarea, .stack select { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: .7rem .9rem; }
.stack input:focus, .stack textarea:focus, .stack select:focus { outline: none; border-color: var(--blue); }
.chk { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.chk input { accent-color: var(--blue); width: auto; }

.dropzone {
  display: flex; gap: 1rem; align-items: center; cursor: pointer;
  border: 1.5px dashed rgba(26,86,219,.4); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: .8rem; background: var(--blue-soft);
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--blue); background: rgba(26,86,219,.12); }
.dz-icon { display: grid; place-items: center; flex: none; }
.dz-icon svg { width: 26px; height: 26px; color: var(--blue); }
.filelabel { color: var(--blue); cursor: pointer; text-decoration: underline; }

/* ── quiz ────────────────────────────────────────────────────────────── */
.quiz { max-width: 600px; margin: 0 auto; text-align: center; }
.progress { height: 5px; background: var(--slate); border-radius: 99px; margin: 1.4rem 0 .4rem; overflow: hidden; }
.progress .bar { height: 100%; border-radius: 99px; transition: width .5s var(--ease); background: var(--blue); }
.options { display: flex; flex-direction: column; gap: .6rem; margin: 1.5rem 0; }
.options.row2 { flex-direction: row; }
.options.row2 .option { flex: 1; }
.option {
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: .9rem 1.1rem; font: inherit; font-size: 1rem; cursor: pointer; text-align: center;
  color: var(--ink); box-shadow: var(--shadow);
  transition: border-color .15s, background .15s;
}
.option:hover { border-color: var(--blue); background: var(--blue-soft); }
.option.check { display: flex; gap: .65rem; align-items: center; text-align: left; }
.option.check input { accent-color: var(--blue); width: auto; }
.statement {
  font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--ink); line-height: 1.6;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 1.35rem 1.5rem; margin: 1.2rem 0;
}
.compute { margin: 1.4rem 0; }
.checkrow {
  display: flex; justify-content: space-between;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem 1.05rem; margin: .5rem 0; opacity: .3; transform: translateX(-6px);
  transition: opacity .45s, transform .45s, border-color .45s;
}
.checkrow.done { opacity: 1; transform: none; border-color: rgba(6,118,71,.4); }
.checkrow span { color: var(--emerald); font-weight: 700; }
.scanline { height: 1px; background: linear-gradient(90deg, transparent, rgba(26,86,219,.4), transparent); animation: scan 1.5s ease-in-out infinite; margin: 1rem 0; }
@keyframes scan { 0%,100% { transform: translateX(-28%); opacity: .3 } 50% { transform: translateX(28%); opacity: 1 } }

/* ── lists, banners, docs ────────────────────────────────────────────── */
.cardlist { display: flex; flex-direction: column; gap: .85rem; margin: 1.3rem 0; }
.sponsor-row { display: flex; justify-content: space-between; gap: 1.2rem; align-items: flex-start; }
.sponsor-row .right { text-align: right; min-width: 130px; }
.autorow { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; font-size: .78rem; color: var(--ink-2); margin-bottom: .45rem; cursor: pointer; }
.autorow input { accent-color: var(--blue); width: auto; }
.autonote { margin: .4rem 0 0; font-size: .72rem; }
.warn { background: var(--coral-soft); border: 1px solid rgba(217,45,32,.24); color: #912018; padding: .8rem 1.1rem; border-radius: 10px; }
.okbanner {
  background: var(--emerald-soft); border: 1px solid rgba(6,118,71,.3); color: var(--emerald);
  padding: .72rem 1.1rem; border-radius: 10px; font-weight: 600;
  animation: okpop .5s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes okpop { from { transform: translateY(-8px); opacity: 0; } }
.blurred { filter: blur(6px); user-select: none; }
.quotebox { margin: .9rem 0; padding: .8rem 1.1rem; font-size: .95rem; color: var(--ink); background: var(--paper); border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; }
.doc {
  white-space: pre-wrap; font-family: var(--mono); font-size: .81rem; line-height: 1.7;
  background: var(--paper); border: 1px solid var(--line); padding: 1.1rem; border-radius: 10px;
  max-height: 440px; overflow: auto; text-align: left; color: var(--ink-2);
}
.sharecard { background: linear-gradient(160deg, rgba(26,86,219,.05), rgba(6,118,71,.05)), #fff; border: 1px solid rgba(26,86,219,.3); text-align: left; }
.statrow { display: flex; align-items: baseline; gap: .8rem; padding: .4rem 0; }
.statrow .big { color: var(--blue); }

/* ── terminal — deliberate dark contrast block ───────────────────────── */
.terminal {
  text-align: left; background: #0D1524; border: 1px solid #1D2A40; border-radius: 12px;
  padding: 1rem 1.1rem; font-family: var(--mono); font-size: .78rem; line-height: 1.85;
  color: #86D3A8; min-height: 220px; display: flex; flex-direction: column;
}
.terminal .tbar { display: flex; gap: .4rem; margin-bottom: .8rem; }
.terminal .tbar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.terminal .tbar i:first-child { background: #FF6058; }
.terminal .tbar i:nth-child(2) { background: #FFC55C; }
.terminal .tbar i:nth-child(3) { background: #34D399; }
.terminal .tbody { flex: 1; overflow: hidden; }
.terminal .tline .ok { color: #34D399; }
.terminal .tline .dim { color: #64748B; }
.terminal .caret { display: inline-block; width: 7px; height: 13px; background: #34D399; vertical-align: -2px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── pricing ─────────────────────────────────────────────────────────── */
.pricing { text-align: center; }
.pricing .lede { margin-inline: auto; }
.packs { align-items: stretch; margin-top: 2.2rem; }
.pack { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.9rem 1.6rem; text-align: center; }
.pack .poptag {
  position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; border: 0;
  font-weight: 650; font-size: .7rem; letter-spacing: .06em; padding: .26rem .85rem; border-radius: 99px;
}
.pack.featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow-lg); }
.pack h3 { justify-content: center; font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 650; }
.pack .badge { align-self: center; }
.pack .price { margin: .4rem 0 0; line-height: 1; }
.pack .price .cur { font-size: 1.2rem; vertical-align: 1.4rem; color: var(--muted); }
.pack .price .amt { font-family: var(--display); font-size: 3.2rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.pack .price .once { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-top: .5rem; }
.pack .perapp { color: var(--emerald); font-size: .88rem; margin: .5rem 0 .1rem; }
.perklist { list-style: none; margin: 1rem 0 1.3rem; padding: 0; text-align: left; flex: 1; }
.perklist li { position: relative; padding: .38rem 0 .38rem 1.5rem; font-size: .89rem; color: var(--ink-2); }
.perklist li::before {
  content: ''; position: absolute; left: 0; top: .76rem; width: 8px; height: 5px;
  border-left: 1.6px solid var(--emerald); border-bottom: 1.6px solid var(--emerald); transform: rotate(-45deg);
}
.pack .btn { margin-top: auto; justify-content: center; }
.paynote { margin-top: 2rem; }
.paynote .micro { margin: .25rem 0; }
.autopilot-card { max-width: 640px; margin: 2rem auto 0; }
.autopilot-card .perklist { text-align: left; }
.apday { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 2rem 0 1.5rem; counter-reset: apstep; }
.apstep { position: relative; padding: 1.4rem 1.4rem; }
.apstep .aptime { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 .5rem; }
.apstep h4 { margin: 0 0 .4rem; font-size: 1rem; }
.apstep p { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.55; }
.apstep::before {
  counter-increment: apstep; content: counter(apstep, decimal-leading-zero);
  position: absolute; top: 1.1rem; right: 1.2rem;
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
}
.autopilot-status {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: 1.2rem 0; border-color: rgba(26,86,219,.35);
  background: linear-gradient(120deg, rgba(26,86,219,.05), rgba(6,118,71,.04));
}
.autopilot-status h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .25rem; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(6,118,71,.4); animation: pulseDot 2.2s ease-out infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(6,118,71,.4); } 70% { box-shadow: 0 0 0 9px rgba(6,118,71,0); } 100% { box-shadow: 0 0 0 0 rgba(6,118,71,0); } }

/* ── job search — filters rail, result rows, intelligence pane ───────── */
.jobswrap { display: grid; grid-template-columns: 240px 1fr; gap: 1.1rem; align-items: start; text-align: left; }
@media (max-width: 860px) {
  /* mobile is results-first: filters drop below the list */
  .jobswrap { grid-template-columns: 1fr; }
  .jobswrap > aside:first-child { order: 2; }
  .filters { position: static; }
}
.filters { position: sticky; top: 66px; display: flex; flex-direction: column; gap: .75rem; padding: 1.05rem 1.1rem 1.15rem; }
.filters h4 { margin: 0 0 .1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.filters .chk { font-size: .89rem; }
.results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.jobrow { display: flex; gap: .95rem; padding: 1.02rem 1.15rem; align-items: flex-start; }
.jobrow:hover { border-color: var(--blue); }
.javatar {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 1.1rem;
}
.jobrow h3 { margin: 0 0 .1rem; font-size: 1.01rem; }
.jobrow h3 a { color: var(--ink); text-decoration: none; }
.jobrow h3 a:hover { color: var(--blue); text-decoration: underline; }
.jobrow .meta { margin: 0 0 .3rem; font-size: .85rem; color: var(--muted); }
.jobrow .snippet { margin: 0 0 .4rem; font-size: .84rem; color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jobrow .ago { color: var(--emerald); font-weight: 600; }
.jobrow .actions { margin-left: auto; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; flex: 0 0 auto; }
.jobrow .actions form { margin: 0; }
@media (max-width: 640px) {
  .jobrow { flex-wrap: wrap; }
  .jobrow .actions { flex-direction: row; margin-left: 0; }
}
.salchip { display: inline-block; margin: 0 0 .35rem; padding: .16rem .6rem; border-radius: 6px; background: var(--emerald-soft); color: var(--emerald); font-size: .82rem; font-weight: 650; font-family: var(--mono); }
.jtag-easy { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 650; padding: .18rem .6rem; border-radius: 6px; background: var(--blue-soft); color: var(--blue-deep); margin-left: .45rem; }
.alertbar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .65rem 1rem; margin: 1rem 0 0; box-shadow: var(--shadow); font-size: .9rem;
}
.alertbar input[type=email] { flex: 0 1 220px; padding: .5rem .8rem; border-radius: 8px; }
.alertbar .btn-sm { margin-left: auto; }
@media (min-width: 1100px) {
  .jobswrap.split { grid-template-columns: 225px minmax(360px, 46fr) minmax(400px, 54fr); }
  .jobdetail { position: sticky; top: 66px; max-height: calc(100vh - 86px); overflow-y: auto; padding: 1.35rem 1.5rem; text-align: left; }
  .jobrow.sel { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
}
@media (max-width: 1099px) { .jobdetail { display: none; } }
.jobembed h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
.jobembed .lede { font-size: .95rem; margin: .2rem 0 .5rem; }
.jobembed .card { box-shadow: none; margin: .8rem 0; }

/* tabs, meters */
.tabstrip { display: flex; gap: .3rem; flex-wrap: wrap; margin: 0 0 1.3rem; border-bottom: 1px solid var(--line); }
.tab { padding: .55rem .95rem; font-size: .9rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.meter-card { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.2rem; }
.meter-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.meter { height: 8px; border-radius: 99px; background: var(--slate); overflow: hidden; }
.meter span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--blue); transition: width .6s var(--ease); }
.meter-card .btn-ghost { align-self: flex-start; }

/* country autocomplete panel */
.ac-wrap { position: relative; }
.ac-wrap input { width: 100%; }
.ac-panel {
  position: absolute; top: calc(100% + 5px); left: 0; min-width: 100%; z-index: 70;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); overflow: hidden; text-align: left;
}
.ac-panel button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  width: 100%; padding: .55rem .85rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--ink);
}
.ac-panel button span { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.ac-panel button:hover { background: var(--blue-soft); color: var(--blue); }

/* hero tracker demo */
.trackdemo { max-width: 760px; margin: 2rem auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.15rem 1.3rem; text-align: left; }
.tdhead { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tdrow { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .92rem; flex-wrap: wrap; }
.tdrow .javatar { width: 34px; height: 34px; flex-basis: 34px; font-size: .95rem; border-radius: 7px; }
.tdrow .tdrole { color: var(--muted); flex: 1; min-width: 140px; }
.tdrow .tdscore { font-family: var(--mono); font-weight: 700; color: var(--emerald); }
.tdstatus { font-size: .76rem; font-weight: 650; padding: .2rem .7rem; border-radius: 99px; white-space: nowrap; }
.tdstatus.ok { background: var(--emerald-soft); color: var(--emerald); }
.tdstatus.ready { background: var(--blue-soft); color: var(--blue-deep); }
.tdstatus.work { background: var(--amber-soft); color: var(--amber); }
.tdago { font-size: .78rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .tdrow .tdago { display: none; } }

/* showcase fan (marketing) */
.showcase { position: relative; margin: 3rem auto 0; max-width: 1060px; perspective: 1600px; }
.fan { display: flex; justify-content: center; align-items: flex-end; gap: 0; transform-style: preserve-3d; }
.jobcard {
  --tilt: 0deg; --lift: 0px; --z: 0;
  width: 232px; flex: none; margin-inline: 9px; padding: 1.05rem 1.1rem;
  text-align: left; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 30px -16px rgba(15,30,51,.3);
  transform: rotate(var(--tilt)) translateY(var(--lift)) scale(var(--s, .92));
  z-index: var(--z); transition: transform .4s var(--ease), box-shadow .4s;
}
.jobcard.lead { --s: 1.06; width: 264px; z-index: 9; border-color: rgba(26,86,219,.35); box-shadow: 0 0 0 1px rgba(26,86,219,.12), 0 28px 60px -24px rgba(26,86,219,.35); }
.jobcard.dim { opacity: .75; }
.showcase:hover .jobcard { --lift: -6px; }
.jchead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .85rem; }
.jclogo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--blue); background: var(--blue-soft); }
.jcscore { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--emerald); background: conic-gradient(var(--emerald) calc(var(--p,90) * 1%), var(--slate) 0); position: relative; }
.jcscore::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.jcscore b { position: relative; font-weight: 700; }
.jobcard h4 { margin: 0; font-size: .96rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
.jcsub { margin: .18rem 0 .7rem; font-size: .78rem; color: var(--muted); }
.jctags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.jctag { font-size: .68rem; font-weight: 550; padding: .2rem .5rem; border-radius: 6px; background: var(--slate); border: 1px solid var(--line); color: var(--ink-2); display: inline-flex; align-items: center; gap: .3rem; }
.jctag.ok { background: var(--emerald-soft); border-color: rgba(6,118,71,.25); color: var(--emerald); }
.jcpay { font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--ink); margin: 0 0 .8rem; }
.jcbtn { display: flex; align-items: center; justify-content: center; gap: .35rem; background: var(--blue); color: #fff; border-radius: 8px; padding: .45rem 0; font-size: .8rem; font-weight: 650; }
.jobcard.dim .jcbtn { background: var(--slate); color: var(--ink-2); }
@media (max-width: 900px) {
  .fan { flex-wrap: nowrap; overflow-x: auto; padding: 1.4rem .8rem 1.8rem; gap: .7rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fan::-webkit-scrollbar { display: none; }
  .jobcard { --tilt: 0deg !important; --s: 1 !important; margin-inline: 0; width: 220px; scroll-snap-align: center; }
  .jobcard.lead { width: 230px; }
}

/* live match demo */
.demo { display: flex; gap: 1.5rem; align-items: center; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.7rem 1.9rem; max-width: 660px; margin: 0 auto; flex-wrap: wrap; }
.demo .ring { width: 92px; height: 92px; margin: 0; flex: none; }
.demo .ring b { font-size: 1.4rem; }
.demo .dtext { flex: 1 1 280px; min-height: 82px; }
.demo .dtext h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.demo .dtext p { margin: 0; color: var(--ink-2); font-size: .93rem; }

/* ── profile ─────────────────────────────────────────────────────────── */
.profile { max-width: 780px; margin: 0 auto; }
.profileform { display: flex; flex-direction: column; gap: 1.05rem; margin-top: 1.5rem; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; margin-top: .9rem; }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } }
.profileform label { display: block; font-size: .78rem; color: var(--muted); text-align: left; }
.profileform label input, .profileform label select { margin-top: .35rem; }
.profileform textarea { margin-top: .5rem; }
.profileform .btn { align-self: center; }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.nf { text-align: center; max-width: 640px; margin: 0 auto; }
.nf code { background: var(--slate); border: 1px solid var(--line); border-radius: 6px; padding: .12rem .5rem; color: var(--amber); font-family: var(--mono); font-size: .9em; }
.nf-scope { position: relative; width: 220px; height: 120px; margin: 2rem auto 1rem; overflow: hidden; }
.nf-ring { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border: 1px solid rgba(26,86,219,.25); border-radius: 50%; }
.nf-ring.r1 { width: 70px; height: 70px; }
.nf-ring.r2 { width: 140px; height: 140px; }
.nf-ring.r3 { width: 210px; height: 210px; }
.nf-sweep { position: absolute; left: 50%; bottom: 0; width: 105px; height: 1px; background: linear-gradient(90deg, rgba(26,86,219,.7), transparent); transform-origin: left center; animation: nfsweep 3.4s linear infinite; }
@keyframes nfsweep { from { transform: rotate(180deg); } to { transform: rotate(360deg); } }

/* ── admin stats ─────────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 2rem 0; }
.stat-card { display: flex; flex-direction: column; gap: .2rem; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; background: #fff; box-shadow: var(--shadow); }
.stat-n { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--blue); line-height: 1.15; }
.stat-l { color: var(--ink); font-size: .92rem; }
.stat-sub { color: var(--muted); font-size: .8rem; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; margin: 1.2rem 0 2.2rem; border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; overflow-x: auto; }
.bars .bar { flex: 1 1 0; min-width: 14px; max-width: 56px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bars .bar span { width: 100%; background: var(--blue); opacity: .75; border-radius: 3px 3px 0 0; }
.bars .bar:hover span { opacity: 1; }
.bars .bar em { position: absolute; bottom: -1.3rem; font-size: .62rem; color: var(--muted); font-style: normal; }
.tbl { width: 100%; border-collapse: collapse; margin: .8rem 0 2rem; font-size: .93rem; text-align: left; }
.tbl th { color: var(--muted); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.tbl th, .tbl td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.tbl .num { text-align: right; }
.tbl code { font-family: var(--mono); font-size: .86em; color: var(--ink); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; text-align: left; }
@media (max-width: 720px) { .cols2 { grid-template-columns: 1fr; } }

/* ── footer — midnight navy, mirrors the nav ─────────────────────────── */
.foot { background: var(--navy); border-top: 0; padding: 3.2rem 1.6rem 2.4rem; color: #8C99AD; font-size: .85rem; }
.footgrid { display: flex; gap: 3rem; flex-wrap: wrap; max-width: 1100px; margin: 0 auto 2rem; text-align: left; justify-content: space-between; }
.footgrid .fcol { min-width: 150px; }
.footgrid .fbrand { max-width: 290px; }
.footgrid .fbrand b { color: #E7ECF4; font-size: 1rem; letter-spacing: -.02em; }
.footgrid h4 { margin: 0 0 .7rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .18em; color: #66748B; font-weight: 650; }
.footgrid a { display: block; color: #9AA7BA; text-decoration: none; padding: .22rem 0; transition: color .15s; }
.footgrid a:hover { color: #fff; }
.foot .legalline { max-width: 84ch; margin: 1rem auto 0; font-size: .74rem; text-align: center; color: #9AA7B8; line-height: 1.7; }
.foot .copyline { text-align: center; margin-top: .8rem; font-size: .8rem; color: #9AA7B8; }

/* ── reveal on scroll ────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }
.stagger > .reveal { transition-duration: .55s; }

/* retired chrome (kept as no-ops so old markup can't leak back) */
.rail, .railtrack, .aurora, #spotlight { display: none !important; }

/* ── auth welcome modal — layered over a visible page, never a wall ──── */
.am-overlay {
  position: fixed; inset: 0; z-index: 200;
  /* Fully opaque welcome ground (page behind never visible) — midnight navy
     with faint global route arcs + destination points: the mobility motif. */
  background-color: #0F1E33;
  background-image:
    radial-gradient(900px 480px at 50% -10%, rgba(26,86,219,.28), transparent 65%),
    radial-gradient(700px 420px at 85% 105%, rgba(6,118,71,.16), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-40,760 Q360,240 880,420 T1500,180' stroke='%237EA4F4' stroke-opacity='.14' stroke-width='1.5'/%3E%3Cpath d='M-60,520 Q420,640 820,300 T1520,420' stroke='%2334D399' stroke-opacity='.11' stroke-width='1.5'/%3E%3Cpath d='M120,940 Q520,480 1060,660 T1560,520' stroke='%237EA4F4' stroke-opacity='.09' stroke-width='1.2'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='140' cy='688' r='4' fill='%2334D399' fill-opacity='.55'/%3E%3Ccircle cx='140' cy='688' r='10' fill='none' stroke='%2334D399' stroke-opacity='.22'/%3E%3Ccircle cx='880' cy='420' r='3.5' fill='%237EA4F4' fill-opacity='.55'/%3E%3Ccircle cx='1348' cy='236' r='4' fill='%2334D399' fill-opacity='.5'/%3E%3Ccircle cx='1348' cy='236' r='11' fill='none' stroke='%2334D399' stroke-opacity='.18'/%3E%3Ccircle cx='300' cy='583' r='3' fill='%237EA4F4' fill-opacity='.45'/%3E%3Ccircle cx='820' cy='300' r='3.5' fill='%2334D399' fill-opacity='.45'/%3E%3Ccircle cx='1240' cy='598' r='3' fill='%237EA4F4' fill-opacity='.4'/%3E%3Ccircle cx='520' cy='560' r='2.5' fill='%23AEBACB' fill-opacity='.35'/%3E%3Ccircle cx='1060' cy='660' r='3' fill='%2334D399' fill-opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
/* the class display beats the [hidden] UA default — restore it explicitly */
.am-overlay[hidden] { display: none; }
/* Pre-paint takeover: <head> script adds .am-open before anything renders, so
   the very first frame is the navy welcome — the page never flashes first.
   Page chrome is hidden (not removed) and restored the instant it's closed. */
html.am-open body { overflow: hidden; background: var(--navy); }
html.am-open header.nav, html.am-open main, html.am-open footer.foot { visibility: hidden; }
html.am-open .am-overlay, html.am-open .am-overlay[hidden] { display: flex; }
.am-col { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; width: 100%; max-width: 460px; }
/* explore row on the navy ground — LinkedIn-style logged-out entry points */
.am-explore { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.am-ex {
  font-size: .84rem; font-weight: 550; padding: .42rem .95rem; border-radius: 99px;
  text-decoration: none; color: #D3DBE7;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .15s, color .15s, background .15s;
}
.am-ex:hover { border-color: #34D399; color: #fff; background: rgba(52,211,153,.1); }
.am-card {
  position: relative; width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 70px -20px rgba(15,30,51,.55);
  padding: 2rem 2rem 1.4rem; text-align: center;
  animation: amIn .3s var(--ease);
}
@keyframes amIn { from { transform: translateY(10px); opacity: 0; } }
.am-logo { width: 40px; height: 40px; border-radius: 10px; margin-bottom: .8rem; }
.am-card h2 { font-size: 1.45rem; margin: 0 0 .4rem; }
.am-sub { color: var(--ink-2); font-size: .93rem; line-height: 1.6; margin: 0 0 1.2rem; }
.am-close {
  position: absolute; top: .8rem; right: .8rem; width: 34px; height: 34px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font-size: 1rem; cursor: pointer;
}
.am-close:hover { background: var(--slate); color: var(--ink); }
.am-form { text-align: left; }
.am-browse {
  border: 0; background: none; color: var(--muted); font: inherit; font-size: .86rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: .4rem;
}
.am-browse:hover { color: var(--ink); }
.am-legal { font-size: .7rem; color: var(--muted); line-height: 1.6; margin: .8rem 0 0; }
.am-legal a { color: var(--muted); }
.am-trust { color: var(--emerald); font-weight: 550; }
@media (max-width: 640px) {
  /* bottom sheet, not a shrunken desktop modal */
  .am-overlay { align-items: flex-end; padding: 0; }
  .am-col { max-width: none; gap: .8rem; }
  .am-explore { order: -1; padding: 0 1rem; }
  .am-card {
    max-width: none; border-radius: 20px 20px 0 0; border-bottom: 0;
    padding: 1.6rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    max-height: 92dvh; overflow-y: auto;
    animation: amUp .3s var(--ease);
  }
  @keyframes amUp { from { transform: translateY(30%); opacity: .4; } }
  .am-card h2 { font-size: 1.3rem; }
  .am-card .btn, .btn-google { padding-block: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .am-card { animation: none; } }

/* bare auth shell (login / focused pages) */
.nav-bare { justify-content: center; }
.foot-bare { padding: 1.6rem; }
.foot-bare .copyline { margin: 0; }
.authcard {
  max-width: 440px; margin: 2.5rem auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 2rem; text-align: center;
}
.authcard h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.authcard .lede { font-size: .93rem; margin: 0 auto 1.3rem; }
.authcard form { text-align: left; }

/* ── accessibility ───────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track, .scanline, .nf-sweep, .terminal .caret, .okbanner, .ring.landed, .pulse-dot { animation: none !important; }
  .btn:hover, .jobrow:hover { transform: none; }
}

/* ── fix: nav Ask search went dark-on-dark when focused (v5 translucent bg
   survived under v6's dark ink). Solid white pill, LinkedIn-style. ── */
.navsearch input { background: #fff; border-color: rgba(255,255,255,.25); color: #111b2b; }
.navsearch input::placeholder { color: #77839a; }
.navsearch input:focus { background: #fff; border-color: #5F8BEA; color: #111b2b; box-shadow: 0 0 0 3px rgba(95,139,234,.28); }

/* ══════════════════════════════════════════════════════════════════════
   v9 "CORPORATE" — Fortune-500 clarity layer (Oct 2026).
   One sans family, white chrome, deep navy hero, one blue action colour.
   Overrides v8 tokens; the x-* blocks are the new homepage system.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --paper: #FFFFFF;
  --slate: #F4F6FA;
  --navy: #0B1F3A; --navy-2: #102A4C; --navy-3: #17365F;
  --ink: #0B1526; --ink-2: #263142; --muted: #475467;   /* darker supporting text: readable on white */
  --blue: #1A56DB; --blue-deep: #164FC5; --blue-soft: rgba(26,86,219,.08);   /* one action blue site-wide: 6.4:1 on white */
  --display: var(--font);
  --radius: 10px; --radius-lg: 14px;
}
h1, h2 { font-family: var(--font); font-weight: 750; letter-spacing: -.03em; }
h1 { line-height: 1.04; }
h2 { letter-spacing: -.025em; }

/* header: white, quiet, sticky */
.nav {
  background: rgba(255,255,255,.92); color: var(--ink);
  backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line); padding: .7rem max(1.4rem, calc((100vw - 1200px) / 2));
}
.brand .wordmark { color: var(--ink); font-size: 1.1rem; }
.brand .wordmark b { color: var(--blue); }
.nitem { color: var(--ink-2); font-weight: 550; }
.nitem:hover { color: var(--ink); background: var(--slate); }
.nav-divider { background: var(--line); }
.signin { color: var(--ink) !important; border-color: var(--line-2); }
.signin:hover { border-color: var(--ink); background: transparent; }
.join { border-radius: 8px; margin-left: .4rem; }
.credits { background: var(--blue-soft); color: var(--blue); border-color: rgba(11,95,255,.25); }
.nav .micro { color: var(--muted); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; padding: .6rem 1rem; }
  .nav-toggle { display: block; }
  .nav-items { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: .1rem; padding: .5rem 0 .3rem; overflow: visible; }
  .nav-items.open { display: flex; }
  .nav-items .nitem { padding: .7rem .4rem; font-size: 1rem; }
  .nav-divider { display: none; }
  .signin, .join { text-align: center; padding: .7rem 1rem; margin: .3rem 0 0; order: 0; }
}

/* footer: deep navy, generous */
.foot { background: #081729; border-top: 1px solid rgba(255,255,255,.06); }

/* full-bleed pages */
main.bleed { max-width: none; padding: 0; }

/* ── homepage system ─────────────────────────────────────────────────── */
.x-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.x-narrow { max-width: 820px; }
@media (max-width: 640px) { .x-wrap { padding: 0 1rem; } }

.x-hero {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(11,95,255,.35), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(52,211,153,.12), transparent 60%),
    var(--navy);
  color: #DCE5F2; padding: 5.5rem 0 5rem;
}
.x-hero-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 3.5rem; align-items: center; }
@media (max-width: 960px) { .x-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .x-hero { padding: 3.5rem 0; } }
.x-kicker { font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #8FB2FF; margin: 0 0 1.1rem; }
.x-h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; margin: 0; max-width: 15ch; }
.x-lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: #B7C4D8; max-width: 56ch; margin: 1.4rem 0 2rem; }
.x-lede b { color: #fff; font-weight: 650; }

.x-search {
  display: flex; gap: .5rem; background: #fff; padding: .45rem; border-radius: 12px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.55); max-width: 660px;
}
.x-search input, .x-search select { border: 0; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; padding: .8rem .9rem; min-width: 0; }
.x-search input { flex: 1.6; }
.x-search select { flex: 1; border-left: 1px solid var(--line); cursor: pointer; }
.x-search input:focus, .x-search select:focus { outline: none; }
.x-search button { background: var(--blue); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 650; padding: 0 1.5rem; cursor: pointer; white-space: nowrap; }
.x-search button:hover { background: var(--blue-deep); }
@media (max-width: 640px) {
  .x-search { flex-direction: column; }
  .x-search select { border-left: 0; border-top: 1px solid var(--line); }
  .x-search button { padding: .9rem; }
}
.x-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.x-quick a { color: #C9D5E8; text-decoration: none; font-size: .87rem; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: .35rem .85rem; transition: background .15s, border-color .15s; }
.x-quick a:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.x-promise { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .9rem; color: #9FB0C8; }
.x-promise li::before { content: '✓'; color: #34D399; font-weight: 700; margin-right: .45rem; }

.x-proof {
  background: #fff; color: var(--ink); border-radius: 16px; padding: 1.6rem;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
.x-proof-tag { margin: 0 0 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.x-proof-co { display: flex; align-items: center; gap: .8rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.x-proof-co div { display: flex; flex-direction: column; line-height: 1.25; }
.x-proof-co b { font-size: 1.1rem; }
.x-proof-co span { font-size: .84rem; color: var(--muted); }
.x-logo { width: 42px; height: 42px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--navy); color: #fff; font-weight: 750; font-size: 1.1rem; flex: none; }
.x-logo.sm { width: 30px; height: 30px; border-radius: 8px; font-size: .85rem; margin-right: .75rem; vertical-align: middle; }
.x-badge-ok { margin-left: auto; background: var(--emerald-soft); color: var(--emerald) !important; font-size: .76rem !important; font-weight: 700; padding: .3rem .65rem; border-radius: 99px; white-space: nowrap; }
.x-proof-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.2rem 0; }
.x-proof-nums b { display: block; font-size: 2rem; font-weight: 750; letter-spacing: -.03em; }
.x-proof-nums span { font-size: .84rem; color: var(--muted); }
.x-proof-roles { margin: 0; font-size: .9rem; color: var(--ink-2); }
.x-proof-src { margin: .9rem 0 0; font-size: .74rem; color: var(--faint); }

.x-stats { border-bottom: 1px solid var(--line); background: #fff; }
.x-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.x-stats-grid div { padding: 2rem 1.2rem; border-left: 1px solid var(--line); }
.x-stats-grid div:first-child { border-left: 0; padding-left: 0; }
.x-stats-grid b { display: block; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
.x-stats-grid span { font-size: .88rem; color: var(--muted); }
@media (max-width: 760px) {
  .x-stats-grid { grid-template-columns: 1fr 1fr; }
  .x-stats-grid div { padding: 1.3rem .9rem; border-left: 0; border-top: 1px solid var(--line); }
  .x-stats-grid div:nth-child(-n+2) { border-top: 0; }
  .x-stats-grid div:first-child { padding-left: .9rem; }
}

.x-sec { padding: 6rem 0; }
.x-sec-alt { background: var(--slate); }
@media (max-width: 640px) { .x-sec { padding: 3.8rem 0; } }
.x-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 .8rem; }
.x-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; max-width: 22ch; margin: 0 0 1rem; }
.x-sub { color: var(--ink-2); font-size: 1.08rem; max-width: 62ch; margin: 0 0 2.4rem; }
.x-note { font-size: .86rem; color: var(--muted); margin-top: 1.2rem; max-width: 80ch; }
.x-link { font-weight: 650; text-decoration: none; }

.x-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
@media (max-width: 900px) { .x-paths { grid-template-columns: 1fr; } }
.x-path {
  display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.x-path:hover { border-color: var(--blue); box-shadow: 0 18px 40px -22px rgba(11,95,255,.45); transform: translateY(-3px); color: var(--ink); }
.x-path-n { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--blue); }
.x-path h3 { font-size: 1.45rem; font-weight: 750; letter-spacing: -.02em; margin: 1rem 0 .6rem; }
.x-path p { color: var(--ink-2); margin: 0 0 1.6rem; flex: 1; }
.x-path-cta { font-weight: 650; color: var(--blue); }

.x-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.x-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.x-table th { text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); background: #FAFBFD; }
.x-table td { padding: .95rem 1.3rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.x-table tr:last-child td { border-bottom: 0; }
.x-table tbody tr:hover { background: #FAFBFD; }
.x-table .r { text-align: right; }
.x-table .num { font-family: var(--font); font-weight: 650; font-variant-numeric: tabular-nums; }
.x-table a { font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) { .x-table .hide-sm { display: none; } .x-table th, .x-table td { padding: .8rem .7rem; } }

.x-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 2.6rem; }
@media (max-width: 900px) { .x-steps { grid-template-columns: 1fr; gap: 1.8rem; } }
.x-steps span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; }
.x-steps h3 { font-size: 1.2rem; font-weight: 700; margin: 1rem 0 .4rem; }
.x-steps p { color: var(--ink-2); margin: 0; }

.x-countries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; }
@media (max-width: 900px) { .x-countries { grid-template-columns: 1fr 1fr; } }
.x-countries a { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.x-countries a:hover { border-color: var(--blue); color: var(--ink); }
.x-countries b { font-size: 1.05rem; }
.x-countries span:last-child { font-size: .84rem; color: var(--muted); }
.x-cc { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--blue); }

.x-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .x-prices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .x-prices { grid-template-columns: 1fr; } }
.x-price { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 1.8rem 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 14px 34px -22px rgba(16,24,40,.28); }
.x-price-hot { border: 2px solid var(--blue); box-shadow: 0 24px 50px -28px rgba(11,95,255,.5); }
.x-pop { position: absolute; top: -.75rem; left: 1.5rem; background: var(--blue); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .7rem; border-radius: 99px; }
.x-price h3 { font-size: 1rem; font-weight: 650; color: var(--ink-2); margin: 0; }
.x-amt { font-size: 2.6rem; font-weight: 750; letter-spacing: -.03em; margin: .4rem 0 1rem; color: var(--ink); }
.x-amt small { font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.x-price ul { list-style: none; padding: 0; margin: 0 0 1.6rem; flex: 1; font-size: .93rem; color: var(--ink-2); }
.x-price li { padding: .35rem 0 .35rem 1.5rem; position: relative; }
.x-price li::before { content: '✓'; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }

.x-btn { display: inline-block; text-align: center; background: var(--blue); color: #fff !important; font-weight: 650; text-decoration: none; padding: .8rem 1.4rem; border-radius: 8px; border: 1px solid var(--blue); transition: background .15s; }
.x-btn:hover { background: var(--blue-deep); }
.x-btn-ghost { background: #fff; color: var(--ink) !important; border-color: var(--line-2); }
.x-btn-ghost:hover { background: var(--slate); }
.x-btn-light { background: #fff; color: var(--navy) !important; border-color: #fff; }
.x-btn-light:hover { background: #E8EEF8; }
.x-btn-outline { background: transparent; border-color: rgba(255,255,255,.4); }
.x-btn-outline:hover { background: rgba(255,255,255,.08); }

.x-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 900px) { .x-quotes { grid-template-columns: 1fr; } }
.x-quotes figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; }
.x-quotes blockquote { margin: 0 0 1rem; font-size: 1.02rem; color: var(--ink); }
.x-quotes figcaption { font-size: .88rem; color: var(--muted); }

.x-faq { margin-top: 2rem; border-top: 1px solid var(--line); }
.x-faq details { border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.x-faq summary { cursor: pointer; font-weight: 650; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--muted); }
.x-faq details[open] summary::after { content: '–'; }
.x-faq p { color: var(--ink-2); margin: .8rem 0 0; max-width: 70ch; }

.x-cta { background: var(--navy); color: #fff; text-align: center; padding: 5.5rem 0; }
.x-cta h2 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 3rem); max-width: 22ch; margin: 0 auto 1rem; }
.x-cta p { color: #B7C4D8; font-size: 1.1rem; margin: 0 0 2rem; }
.x-cta-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* freelance hub */
.x-hero-sm { padding: 4.5rem 0 4rem; }
.fl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .fl-grid { grid-template-columns: 1fr; } }
.fl-form, .fl-out { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; }
.fl-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 1rem; color: var(--ink); }
.fl-form textarea, .fl-form select, .fl-calc input {
  display: block; width: 100%; margin-top: .4rem; font: inherit; font-size: .95rem; font-weight: 400; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px; padding: .7rem .8rem; background: #fff; resize: vertical;
}
.fl-form textarea:focus, .fl-form select:focus, .fl-calc input:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
.fl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fl-form .x-btn { width: 100%; font-size: 1rem; cursor: pointer; }
.fl-form .x-btn:disabled { opacity: .6; cursor: wait; }
.fl-meta { font-size: .85rem; color: var(--muted); margin: .9rem 0 0; }
.fl-out { min-height: 320px; position: sticky; top: 5rem; }
.fl-empty b { display: block; font-size: 1.05rem; margin-bottom: .4rem; }
.fl-empty p { color: var(--ink-2); }
.fl-empty .x-btn { margin: .4rem .4rem 0 0; }
.fl-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.fl-result-head .x-btn { padding: .4rem .9rem; font-size: .85rem; cursor: pointer; }
.fl-text { white-space: pre-wrap; font-family: var(--font); font-size: .95rem; line-height: 1.65; background: var(--slate); border-radius: 10px; padding: 1.1rem; margin: 0 0 1rem; color: var(--ink); }
.fl-result h4 { margin: 1rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fl-result ul { margin: 0; padding-left: 1.2rem; color: var(--ink-2); }
.fl-calc { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 1rem; align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; }
@media (max-width: 900px) { .fl-calc { grid-template-columns: 1fr; } }
.fl-calc label { font-weight: 600; font-size: .9rem; }
.fl-calc-out { background: var(--navy); color: #B7C4D8; border-radius: 10px; padding: 1rem 1.2rem; display: flex; flex-direction: column; }
.fl-calc-out b { color: #fff; font-size: 2.2rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.fl-calc-out span { font-size: .84rem; }
@media (min-width: 721px) { .hide-lg { display: none; } }

/* country grid (homepage + /countries) */
.x-reg { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--emerald); background: var(--emerald-soft); border-radius: 99px; padding: .12rem .45rem; vertical-align: middle; }
.cg-tabs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.4rem; }
.cg-tabs button { font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .5rem 1rem; cursor: pointer; }
.cg-tabs button span { color: var(--muted); font-weight: 500; margin-left: .2rem; }
.cg-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cg-tabs button[aria-selected="true"] span { color: #9FB0C8; }
.cg-find { margin-left: auto; font: inherit; font-size: .9rem; border: 1px solid var(--line-2); border-radius: 99px; padding: .5rem 1rem; min-width: 200px; background: #fff; }
.cg-find:focus { outline: none; border-color: var(--blue); }
@media (max-width: 640px) { .cg-find { margin-left: 0; width: 100%; } }
.cg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
@media (max-width: 1000px) { .cg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .cg-grid { grid-template-columns: 1fr; } }
.cg-tile { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .1rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.cg-tile[hidden] { display: none; }
.cg-tile:hover { border-color: var(--blue); box-shadow: 0 10px 24px -18px rgba(11,95,255,.6); color: var(--ink); }
.cg-tile img { grid-row: 1 / span 2; width: 28px; height: 21px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.cg-name b { font-size: .98rem; }
.cg-num { font-size: .82rem; color: var(--muted); }
.cg-more { margin-top: 1.2rem; cursor: pointer; }
.cg-empty { color: var(--muted); }

/* changelog */
.cl-entry { padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.cl-entry:first-child { padding-top: 0; }
.cl-meta { display: flex; gap: .8rem; align-items: center; font-size: .88rem; color: var(--muted); }
.cl-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); background: var(--blue-soft); padding: .2rem .55rem; border-radius: 99px; }
.cl-entry h2 { font-size: 1.6rem; margin: .6rem 0 .8rem; }
.cl-entry ul { margin: 0; padding-left: 1.2rem; color: var(--ink-2); }
.cl-entry li { margin: .45rem 0; }

/* sponsor finder (ads funnel) */
.fd-hero { padding: 5rem 0 4.5rem; }
.fd-wrap { max-width: 880px; }
.fd-h1 { max-width: 18ch; }
.fd-h1 span { color: #7EA8FF; }
.fd-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: .6rem; align-items: end; background: #fff; border-radius: 14px; padding: .8rem; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
.fd-field { display: flex; flex-direction: column; gap: .2rem; padding: .25rem .5rem; }
.fd-field span { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fd-field input, .fd-field select { border: 0; font: inherit; font-size: 1.05rem; color: var(--ink); padding: .35rem 0; background: transparent; }
.fd-field input:focus, .fd-field select:focus { outline: none; }
.fd-country { border-left: 1px solid var(--line); padding-left: .9rem; }
.fd-form button { background: var(--blue); color: #fff; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 1.02rem; padding: 1rem 1.5rem; cursor: pointer; white-space: nowrap; }
.fd-form button:hover { background: var(--blue-deep); }
@media (max-width: 720px) { .fd-form { grid-template-columns: 1fr; } .fd-country { border-left: 0; border-top: 1px solid var(--line); padding: .6rem .5rem 0; } }
.fd-popular { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: 1.1rem; font-size: .87rem; color: #9FB0C8; }
.fd-popular a { color: #C9D5E8; text-decoration: none; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: .3rem .8rem; }
.fd-popular a:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.fd-top { background: var(--navy); padding: 1rem 0; }
.fd-form-sm { grid-template-columns: 1.6fr 1fr auto; box-shadow: none; padding: .4rem; }
.fd-form-sm input, .fd-form-sm select { border: 0; font: inherit; font-size: 1rem; padding: .7rem .8rem; min-width: 0; }
.fd-form-sm select { border-left: 1px solid var(--line); }
.fd-form-sm input:focus, .fd-form-sm select:focus { outline: none; }
.fd-form-sm button { padding: .75rem 1.3rem; }
@media (max-width: 720px) { .fd-form-sm { grid-template-columns: 1fr 1fr; } .fd-form-sm input { grid-column: 1 / -1; } .fd-form-sm select { border-left: 0; } }
.fd-res { padding-top: 3rem; }
.fd-big { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.12; max-width: 28ch; margin: 0 0 1.4rem; }
.fd-big b { color: var(--blue); }
.fd-match { max-width: 72ch; margin: -.4rem 0 1.8rem; padding: .8rem 1rem; border-left: 3px solid var(--blue); background: var(--blue-soft); border-radius: 0 8px 8px 0; font-size: .95rem; color: var(--ink-2); }
.fd-match p { margin: 0; }
.fd-match p + p { margin-top: .45rem; }
.fd-match ul { display: flex; flex-wrap: wrap; gap: .4rem .9rem; list-style: none; padding: 0; margin: .45rem 0 0; }
.fd-match a { font-weight: 650; }
.fd-match small { color: var(--muted); }
.fd-kpis { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-bottom: 2rem; }
.fd-kpis b { display: block; font-size: 1.8rem; font-weight: 750; letter-spacing: -.03em; }
.fd-kpis span { font-size: .86rem; color: var(--muted); }
.fd-table { position: relative; }
.fd-locked td { filter: blur(5px); user-select: none; pointer-events: none; opacity: .75; }
.fd-gate {
  position: relative; margin-top: -9rem; padding: 6rem 1.5rem 2rem; text-align: center;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 38%);
}
.fd-gate-n { font-weight: 700; color: var(--blue); margin: 0 0 .3rem; }
.fd-gate h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); max-width: 30ch; margin: 0 auto .8rem; }
.fd-gate p { color: var(--ink-2); max-width: 56ch; margin: 0 auto 1rem; }
.fd-email { display: flex; gap: .5rem; max-width: 460px; margin: 0 auto; }
.fd-email input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; border: 1px solid var(--line-2); border-radius: 8px; padding: .8rem .9rem; }
.fd-email input:focus { outline: none; border-color: var(--blue); }
.fd-email button { background: var(--blue); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 700; padding: 0 1.3rem; cursor: pointer; }
@media (max-width: 480px) { .fd-email { flex-direction: column; } .fd-email button { padding: .85rem; } }
.fd-or { font-size: .92rem; margin-top: 1rem !important; }
.fd-buy { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.fd-buy small { font-weight: 500; color: var(--blue); margin-left: .3rem; }
.x-finder-link { margin: 1rem 0 0; }
.x-finder-link a { color: #8FB2FF; font-weight: 600; text-decoration: none; }
.x-finder-link a:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   v9 INNER PAGES (ip-*, jb-*, co-*, pr-*) — Oct 2026.
   Carries the corporate homepage system onto every inner page: navy hero
   band (x-hero ip-hero), white body sections (ip-sec), clean cards/tiles,
   no dashed eyebrows, real flag images instead of emoji.
   ══════════════════════════════════════════════════════════════════════ */

/* global polish for legacy components still used inside pages */
.eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .14em; }
.eyebrow::before { display: none; }
.card, .panel { border-radius: 12px; box-shadow: none; }
.card:hover { box-shadow: 0 12px 30px -22px rgba(11,31,58,.45); }
.panel .ptitle { font-size: .74rem; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.btn { border-radius: 8px; box-shadow: none; }
.btn:hover { transform: none; }
.btn-lg { border-radius: 10px; }
.btn-ghost { border-radius: 8px; }
.page > h1, .tool > h1 { font-weight: 750; letter-spacing: -.03em; }
@media (max-width: 640px) { main { padding-left: 1rem; padding-right: 1rem; } }

/* flag images (emoji flags render as letters on Windows) */
.flag-img { display: inline-block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); margin-right: .35rem; }

/* hero band for inner pages */
.ip-hero { padding: 3.4rem 0 3.2rem; }
.ip-hero .x-h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 22ch; }
.ip-hero .x-lede { margin: 1.1rem 0 0; }
.ip-hero .x-cta-btns { justify-content: flex-start; margin-top: 1.6rem; }
.ip-hero .eyebrow, .ip-hero .x-kicker { display: block; color: #8FB2FF; font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.ip-hero .crumb, .ip-crumb { font-size: .86rem; color: #9FB0C8; margin: 0 0 1rem; }
.ip-hero .crumb a, .ip-crumb a { color: #C9D5E8; text-decoration: none; }
.ip-hero .crumb a:hover, .ip-crumb a:hover { color: #fff; text-decoration: underline; }
.ip-hero .micro, .ip-hero .muted { color: #9FB0C8; }
.ip-hero a:not(.x-btn):not(.btn):not(.btn-ghost) { color: #C9D5E8; }
@media (max-width: 640px) { .ip-hero { padding: 2.4rem 0 2.2rem; } }

/* body sections */
.ip-sec { padding: 3rem 0 4.5rem; }
.ip-sec.x-sec-alt { padding: 3.5rem 0; }
.ip-narrow { max-width: 880px; }
.ip-h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 750; letter-spacing: -.025em; margin: 0 0 1rem; }
.ip-sub { color: var(--ink-2); max-width: 66ch; margin: -.4rem 0 1.4rem; }
.ip-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; }
.ip-card + .ip-card { margin-top: 1rem; }
.ip-card h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; }
.ip-card p { color: var(--ink-2); }
.ip-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.ip-grid-2 { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .ip-grid-2 { grid-template-columns: 1fr; } }
.ip-link { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ip-link:hover { border-color: var(--blue); color: var(--ink); box-shadow: 0 16px 36px -24px rgba(11,95,255,.55); transform: translateY(-2px); }
.ip-link h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; }
.ip-link p { color: var(--ink-2); font-size: .94rem; margin: 0 0 1rem; flex: 1; }
.ip-link .ip-go { font-weight: 650; color: var(--blue); font-size: .92rem; }
.ip-tag { display: inline-block; align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--emerald); background: var(--emerald-soft); border-radius: 99px; padding: .15rem .55rem; margin-bottom: .6rem; }
.ip-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; }
.ip-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; }
.ip-tile b { display: block; font-size: 1.85rem; font-weight: 750; letter-spacing: -.03em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ip-tile span { font-size: .86rem; color: var(--muted); }
.ip-list { list-style: none; padding: 0; margin: 0; }
.ip-list li { padding: .7rem 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; }
.ip-list li:last-child { border-bottom: 0; }
.ip-note { font-size: .86rem; color: var(--muted); margin-top: 1.2rem; max-width: 80ch; }
.ip-empty { background: #fff; border: 1px dashed var(--line-2); border-radius: 14px; padding: 2rem; text-align: center; color: var(--ink-2); }
.ip-search { display: flex; gap: .5rem; background: #fff; padding: .4rem; border-radius: 12px; max-width: 560px; box-shadow: 0 20px 50px -22px rgba(0,0,0,.55); margin-top: 1.6rem; }
.ip-search input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 1rem; color: var(--ink); padding: .7rem .8rem; background: transparent; }
.ip-search input:focus { outline: none; }
.ip-search button { background: var(--blue); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 650; padding: 0 1.3rem; cursor: pointer; }
.ip-search button:hover { background: var(--blue-deep); }

/* generic v9 form fields (app pages) */
.ip-form label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); margin: 0 0 1rem; }
.ip-form input[type=text], .ip-form input[type=email], .ip-form input[type=url], .ip-form input[type=number], .ip-form input[type=search], .ip-form select, .ip-form textarea {
  display: block; width: 100%; margin-top: .4rem; font: inherit; font-size: .95rem; font-weight: 400; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px; padding: .7rem .8rem; background: #fff;
}
.ip-form input:focus, .ip-form select:focus, .ip-form textarea:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }

/* ── /jobs ─────────────────────────────────────────────────────────── */
.jb-top { background: var(--navy); padding: 1.6rem 0 1.4rem; color: #B7C4D8; }
.jb-top h1 { color: #fff; font-size: clamp(1.45rem, 2.8vw, 2rem); margin: 0 0 .25rem; letter-spacing: -.03em; }
.jb-top .jb-count { margin: 0 0 1rem; font-size: .95rem; }
.jb-top .jb-count b { color: #fff; }
.jb-search { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: .4rem; background: #fff; border-radius: 12px; padding: .4rem; }
.jb-search input { border: 0; font: inherit; font-size: 1rem; color: var(--ink); padding: .7rem .8rem; min-width: 0; background: transparent; }
.jb-search input + input { border-left: 1px solid var(--line); }
.jb-search input:focus { outline: none; }
.jb-search button { background: var(--blue); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 650; padding: .7rem 1.4rem; cursor: pointer; }
.jb-search button:hover { background: var(--blue-deep); }
@media (max-width: 760px) {
  .jb-search { grid-template-columns: 1fr 1fr; }
  .jb-search input:first-child { grid-column: 1 / -1; }
  .jb-search input + input { border-left: 0; border-top: 1px solid var(--line); }
  .jb-search input:nth-child(3) { border-left: 1px solid var(--line); }
  .jb-search button { grid-column: 1 / -1; padding: .85rem; }
}
.jb-toggles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.jb-toggles a { color: #C9D5E8; text-decoration: none; font-size: .88rem; font-weight: 600; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: .38rem .9rem; }
.jb-toggles a:hover { color: #fff; border-color: rgba(255,255,255,.55); }
.jb-toggles a.on { background: #fff; color: var(--navy); border-color: #fff; }
.jb-body { padding: 1.6rem 0 4rem; background: var(--slate); }
.jb-wrap { max-width: 1320px; }
.jb-body .jobswrap { margin-top: 0; }
.jb-body .chiprow { margin: 0 0 .8rem; }
.jb-body .alertbar, .jb-body .okbanner { margin: 0 0 1rem; }
.jb-filters { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.jb-filters summary { display: none; }
.jb-filters .filters { border: 0; padding: 1.1rem 1.15rem 1.2rem; box-shadow: none; position: static; }
.jb-filters .filters:hover { box-shadow: none; }
.jb-filters .chk { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.jb-filters .chk.hot { font-weight: 650; color: var(--ink); }
.jb-filters .btn { width: 100%; }
@media (min-width: 901px) { .jobswrap > aside:first-child { position: sticky; top: 76px; } }
@media (max-width: 900px) {
  .jobswrap > aside:first-child { order: 0 !important; }
  .jb-filters summary { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; font-weight: 650; cursor: pointer; list-style: none; }
  .jb-filters summary::-webkit-details-marker { display: none; }
  .jb-filters summary::after { content: '+'; font-size: 1.3rem; color: var(--muted); line-height: 1; }
  .jb-filters[open] summary::after { content: '–'; }
  .jb-filters[open] summary { border-bottom: 1px solid var(--line); }
}
.jb-body .jobrow { background: #fff; border-radius: 12px; padding: 1.1rem 1.2rem; }
.jb-body .jobrow:hover { border-color: var(--blue); }
.jb-body .javatar { background: var(--navy); color: #fff; border-radius: 10px; border: 0; }
.jb-body .jobrow h3 { font-size: 1.04rem; font-weight: 700; }
.jb-body .jobrow .meta .ago { color: var(--muted); font-weight: 500; }
.jb-body .jobrow .meta .co { color: var(--ink-2); font-weight: 600; }
.jb-body .salchip { font-family: var(--font); }
.jb-body .vchip { font-size: .78rem; border-radius: 99px; padding: .2rem .7rem; }
.jb-body .badge { border-radius: 99px; }
.jb-body .jobdetail { background: #fff; border-radius: 12px; }
.jb-pager { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: 1.6rem 0 0; }
.jb-upsell { margin-top: 1.4rem; background: var(--navy); color: #B7C4D8; border-radius: 14px; padding: 1.6rem; text-align: center; }
.jb-upsell h3 { color: #fff; font-size: 1.2rem; margin: 0 0 .4rem; }
.jb-upsell p { margin: 0 auto 1.1rem; max-width: 56ch; font-size: .95rem; }
@media (max-width: 640px) { .jb-body .jobrow .actions { width: 100%; } }

/* ── /job/:id ──────────────────────────────────────────────────────── */
.jb-hero { padding: 2.6rem 0 2.4rem; }
.jb-head { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.jb-head .x-logo { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 12px; background: #fff; color: var(--navy); }
.jb-co { margin: 0; font-size: 1rem; font-weight: 650; }
.jb-co a { color: inherit; text-decoration: none; }
.jb-co a:hover { text-decoration: underline; }
.jb-title { margin: .2rem 0 .5rem; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.03em; overflow-wrap: anywhere; }
.jb-hero .jb-title { color: #fff; }
.jb-hero .jb-co a { color: #fff !important; }
.jb-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; font-size: .93rem; color: var(--muted); }
.jb-hero .jb-meta { color: #B7C4D8; }
.jb-meta .sal { color: #34D399; font-weight: 650; }
.jb-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.5rem; }
.jb-actions form { margin: 0; }
.jb-actions .x-btn { font-size: 1.02rem; padding: .9rem 1.6rem; cursor: pointer; font-family: inherit; }
.jb-actions .x-btn-sm { font-size: .9rem; padding: .6rem 1rem; }
.jb-actions .jb-hint { flex-basis: 100%; font-size: .84rem; color: #9FB0C8; margin: .2rem 0 0; }
.jb-actions .okbanner { margin: 0; }
@media (max-width: 560px) { .jb-head { grid-template-columns: 1fr; } .jb-head .x-logo { width: 44px; height: 44px; font-size: 1.15rem; } .jb-actions .x-btn, .jb-actions form { flex: 1 1 100%; } .jb-actions form .x-btn { width: 100%; } }
.jb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.6rem; align-items: start; }
@media (max-width: 980px) { .jb-grid { grid-template-columns: minmax(0, 1fr); } }
.jb-main > * + * { margin-top: 1.2rem; }
.jb-side > * + * { margin-top: 1rem; }
@media (min-width: 981px) { .jb-side { position: sticky; top: 80px; } }
.jb-grid .panel, .jobembed .panel { margin: 0; border-radius: 14px; padding: 1.4rem 1.5rem; }
.verdict-panel { border-left-width: 1px; border-top: 4px solid var(--line); }
.verdict-panel.v-ok { border-top-color: var(--emerald); border-left-color: var(--line); }
.verdict-panel.v-mention { border-top-color: var(--blue); border-left-color: var(--line); }
.verdict-panel.v-warn { border-top-color: var(--amber); border-left-color: var(--line); }
.verdict-panel.v-no { border-top-color: var(--coral); border-left-color: var(--line); }
.jb-verdict h2 { font-size: 1.5rem; font-weight: 750; letter-spacing: -.025em; margin: .1rem 0 .35rem; }
.jb-verdict .jb-vsum { color: var(--ink-2); margin: 0; }
.jb-verdict .vreasons { gap: .7rem; margin-top: 1.1rem; }
.jb-verdict .vreasons b { font-size: .97rem; }
.jb-verdict .vreasons small { display: block; font-size: .88rem; color: var(--ink-2); line-height: 1.5; margin-top: .1rem; }
.jb-verdict .vreasons .vi { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: .8rem; background: var(--slate); }
.jb-verdict .vreasons .s-ok .vi { background: var(--emerald-soft); }
.jb-verdict .vreasons .s-mid .vi { background: var(--amber-soft); }
.jb-verdict .vreasons .s-bad .vi { background: var(--coral-soft); }
.jb-details { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.jb-details summary { cursor: pointer; font-weight: 650; font-size: .92rem; color: var(--blue); }
.jb-details dl { margin: .8rem 0 0; }
.jb-details dt { font-weight: 650; font-size: .88rem; margin-top: .8rem; }
.jb-details dd { margin: .2rem 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.jb-details .rdnote { margin-top: .9rem; }
.jb-desc h2 { font-size: 1.3rem; font-weight: 750; margin: 0 0 .8rem; }
.jb-desc .jb-text { white-space: pre-line; color: var(--ink-2); font-size: .97rem; line-height: 1.7; overflow-wrap: anywhere; }
.jb-sim { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.jb-sim a { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); }
.jb-sim a:hover { border-color: var(--blue); color: var(--ink); }
.jb-sim b { display: block; font-size: .96rem; }
.jb-sim span.m { display: block; font-size: .84rem; color: var(--muted); margin-top: .15rem; }
.jb-sim .x-logo.sm { margin-right: 0; }
.jobembed .jb-head .x-logo { background: var(--navy); color: #fff; }
.jobembed .jb-title { color: var(--ink); font-size: 1.5rem; }
.jobembed .jb-actions .jb-hint { color: var(--muted); }
.jobembed .jb-meta .sal { color: var(--emerald); }
.jobembed > * + * { margin-top: 1rem; }
.jobembed .jb-head { grid-template-columns: 1fr; gap: .6rem; }
.jobembed .jb-head .x-logo { width: 42px; height: 42px; font-size: 1.1rem; }

/* ── companies / company ───────────────────────────────────────────── */
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; margin: 0; }
.co-grid .covtile { display: grid; grid-template-columns: 44px 1fr; gap: .2rem .9rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem 1.2rem; text-decoration: none; color: var(--ink); box-shadow: none; }
.co-grid .covtile:hover { border-color: var(--blue); box-shadow: 0 16px 36px -24px rgba(11,95,255,.55); }
.co-grid .x-logo { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 1.1rem; }
.co-grid .co-name { font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.co-grid .co-jobs { font-size: .86rem; color: var(--muted); }
.co-grid .co-jobs b { color: var(--ink); }
.co-grid .co-ev { grid-column: 1 / -1; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); display: flex; align-items: center; gap: .45rem; }
.co-ev .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.co-ev.ok .dot { background: var(--emerald); }
.co-ev.ok { color: var(--emerald); font-weight: 600; }
.co-head { display: flex; gap: 1.2rem; align-items: center; }
.co-head .x-logo { width: 64px; height: 64px; font-size: 1.7rem; border-radius: 14px; background: #fff; color: var(--navy); }
.co-head .x-h1 { margin: 0; }
@media (max-width: 560px) { .co-head { align-items: flex-start; } .co-head .x-logo { width: 48px; height: 48px; font-size: 1.25rem; } }
.co-countries { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .7rem 0 0; color: #B7C4D8; font-size: .92rem; }
.co-tiles { margin-top: -2.2rem; position: relative; }
.co-tiles .ip-tile { box-shadow: 0 18px 40px -28px rgba(11,31,58,.5); }
.co-roles { display: grid; gap: .6rem; }
.co-roles a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .95rem 1.15rem; text-decoration: none; color: var(--ink); }
.co-roles a:hover { border-color: var(--blue); color: var(--ink); }
.co-roles b { display: block; font-size: .97rem; }
.co-roles .m { display: block; font-size: .84rem; color: var(--muted); margin-top: .1rem; }
@media (max-width: 560px) { .co-roles a { flex-direction: column; align-items: flex-start; } }
.radar .rditem { gap: .8rem; }
.rdflag img { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); margin-top: .2rem; }

/* ── pricing ───────────────────────────────────────────────────────── */
.pr-prices { margin-top: -3.5rem; position: relative; }
.pr-prices .x-price { box-shadow: 0 24px 50px -34px rgba(11,31,58,.5); }
.pr-prices .x-price-hot { box-shadow: 0 24px 50px -28px rgba(11,95,255,.5); }
.pr-perday { font-size: .85rem; color: var(--muted); margin: -.6rem 0 1rem; }
.pr-soon { opacity: .55; cursor: not-allowed; }
.pr-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.8rem; list-style: none; padding: 0; margin: 2.2rem 0 0; font-size: .92rem; color: var(--ink-2); }
.pr-trust li::before { content: '✓'; color: var(--emerald); font-weight: 700; margin-right: .45rem; }
.pr-alert { margin: 0 0 1.2rem; }

/* ── v9 inner pages: ip2 ── */
.jb-hero .okbanner { background: rgba(52,211,153,.14); color: #6EE7B7; border-color: rgba(52,211,153,.3); }
.jb-hero .okbanner a { color: #fff !important; }
.jb-via { margin: -.15rem 0 .35rem; font-size: .78rem; color: var(--muted); }
.jb-src { font-size: .85rem; color: #9FB0C8; }
.jb-src b { color: #DCE5F2; font-weight: 600; }
.jobembed .jb-src { color: var(--muted); }
.jobembed .jb-src b { color: var(--ink-2); }

/* ── v9 inner pages: css-A ── */
/* ── v9 tools / checker / scanner / H-1B pages (ta-*) ─────────────── */
.ip-grid > .ip-card + .ip-card, .ip-grid-2 > .ip-card + .ip-card { margin-top: 0; }
.ip-sec .tform { margin: 0 0 1.5rem; }
.ta-h2 { margin-top: 2.4rem; }
.ta-result { margin: 1.4rem 0; border-radius: 14px; padding: 1.4rem 1.5rem; }
.ta-block { margin: 1.6rem 0; }
.ta-block .ip-h2 { margin-bottom: .6rem; }
.ta-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.ta-scroll .x-table th, .ta-scroll .x-table td { white-space: nowrap; }
.ta-scroll .x-table td:first-child { white-space: normal; min-width: 10rem; }
.ta-table-sm { font-size: .92rem; }
.ta-links { line-height: 1.9; color: var(--ink-2); }
.ta-links a { font-weight: 600; text-decoration: none; }
.ta-more { margin-top: 1.2rem; }
.ta-btns { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.ta-btn-sm { padding: .5rem .95rem; font-size: .88rem; }
.ta-submit { margin-top: .4rem; font: inherit; font-weight: 650; cursor: pointer; }
.ta-alert { margin: 1rem 0; border-left: 3px solid var(--amber); }
.ta-cta { margin: 2rem 0 1rem; }
.ta-faq .x-faq { margin-top: 1rem; }
.ta-chips { margin: 0 0 1rem; }
.ta-locked { margin-top: 1rem; border-left: 4px solid var(--blue); }
.ta-locked p { margin: .4rem 0 .9rem; }
.ta-list { padding: .4rem 1.5rem; }
.ta-results { display: grid; gap: 1rem; }
.ta-results > .ip-card + .ip-card { margin-top: 0; }
.ta-co { display: flex; justify-content: space-between; gap: 1.2rem; align-items: flex-start; }
.ta-co h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.ta-co .badge { margin: 0 0 .4rem; }
.ta-co .micro { margin: .2rem 0 0; }
.ta-co-main { min-width: 0; flex: 1; }
.ta-co-side { text-align: right; flex: none; }
.ta-co-side .ta-btns { justify-content: flex-end; flex-direction: column; align-items: flex-end; margin-top: .8rem; }
.ta-big { font-size: 2rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .ta-co { flex-direction: column; }
  .ta-co-side { text-align: left; width: 100%; border-top: 1px solid var(--line); padding-top: .9rem; }
  .ta-co-side .ta-btns { flex-direction: row; justify-content: flex-start; align-items: center; }
  .ta-result { padding: 1.1rem 1rem; }
}

/* ── v9 inner pages: css-B ── */
/* ── v9 inner pages, batch B (world, country, pathways, trust, stats,
   contact, refunds, legal, notfound, postjob) ─────────────────────── */
.tb-mt { margin-top: 1.6rem; }
.tb-mt-sm { margin-top: 1.2rem !important; }
.tb-muted { color: var(--muted); }
.tb-small { font-size: .86rem; }
.tb-relative { position: relative; }
.tb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.x-table-wrap.tb-scroll { overflow-x: auto; }
.tb-scroll .x-table { min-width: 460px; }
.tb-btn-sm { padding: .5rem 1rem; font-size: .88rem; white-space: nowrap; }
.tb-btn-block { display: block; width: 100%; font-size: 1rem; cursor: pointer; font-family: inherit; }
.tb-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.tb-prompt { max-width: 620px; }
.tb-h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .4rem; }

/* world */
.tb-wcig { margin: 0; border-radius: 14px; }
.tb-wcig .wcflag { display: inline-flex; align-items: center; }
.tb-wcig .wcflag .flag-img { width: 24px; height: 18px; margin: 0; }
.tb-wcig .wcwhy { padding-left: 2.6rem; }
@media (max-width: 560px) {
  .tb-wcig .wcrow { grid-template-columns: auto 1fr; padding: .9rem 1rem; }
  .tb-wcig .wcrow > .x-btn { grid-column: 1 / -1; justify-self: start; }
  .tb-wcig .wcwhy { padding-left: 0; }
}
.tb-covgrid { margin: 0; }
.tb-covgrid .covtile { border-radius: 12px; box-shadow: none; }
.tb-covgrid .ctflag { display: inline-flex; }
.tb-covgrid .ctflag .flag-img { margin: 0; }

/* country */
.tb-country-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; max-width: none !important; }
.tb-flag-lg { width: 36px !important; height: 27px !important; border-radius: 4px; margin: 0 !important; vertical-align: middle; }
.tb-tier { margin-left: 0 !important; font-size: .7rem; align-self: center; }
.tb-go { white-space: nowrap; }

/* pathways */
.tb-pathway h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.tb-pathway h3 .flag-img { margin-right: 0; }
.tb-inline-tag { margin: 0; align-self: center; }
.tb-route { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.tb-route h4 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; }
.tb-route p { margin: 0 0 .5rem; }
.tb-route ol { margin: .3rem 0 .6rem 1.2rem; padding: 0; color: var(--ink-2); font-size: .92rem; }
.tb-route ol li { margin: .2rem 0; }

/* contact / post a job */
.tb-contact, .tb-postjob { grid-template-columns: 1.4fr 1fr; align-items: start; }
@media (max-width: 860px) { .tb-contact, .tb-postjob { grid-template-columns: 1fr; } }
.tb-contact .ip-card h3 { margin-bottom: .6rem; }
.tb-contact .fgrid { margin-top: 0; }
.tb-checks { list-style: none; padding: 0; margin: 0; color: var(--ink-2); font-size: .95rem; }
.tb-checks li { position: relative; padding: .4rem 0 .4rem 1.5rem; }
.tb-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }

/* legal / refunds readable text column */
.tb-prose { font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); }
.tb-prose h2 { color: var(--ink); font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; margin: 2.4rem 0 .7rem; }
.tb-prose h2:first-child { margin-top: 0; }
.tb-prose p { margin: 0 0 1rem; max-width: 72ch; }
.tb-prose ul, .tb-prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; max-width: 72ch; }
.tb-prose li { margin: .45rem 0; }
.tb-prose b { color: var(--ink); }

/* notfound */
.tb-code { background: rgba(255,255,255,.1); border-radius: 6px; padding: .1rem .45rem; color: #fff; font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }

/* ── v9 inner pages: app pages (tc-*) ── */
/* ── v9 app pages (tc-*): dashboard, profile, tracker, application, upload,
   onboarding, quiz, checkout, share, login, signup ─────────────────────── */
.tc-hero { padding: 2.6rem 0 2.4rem; }
.tc-hero .x-h1 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); max-width: 26ch; overflow-wrap: anywhere; }
.tc-hero .x-lede { font-size: 1.02rem; max-width: 62ch; }
.tc-hero .x-cta-btns { margin-top: 1.3rem; }
.tc-hero .badge { margin: .9rem 0 0; }
@media (max-width: 640px) { .tc-hero { padding: 2rem 0 1.9rem; } }

.tc-body { padding: 2.2rem 0 4rem; }
.tc-narrow { max-width: 760px; }
.tc-mid { max-width: 960px; }
.tc-stack { display: flex; flex-direction: column; gap: .9rem; margin: 0 0 1.2rem; }
.tc-stack .ip-card + .ip-card { margin-top: 0; }
.tc-stack > p { margin: 0; }
.tc-sec-h { font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em; margin: 1.8rem 0 .8rem; }
.tc-sec-h:first-child { margin-top: 0; }
.tc-muted { color: var(--muted); font-size: .88rem; }
.tc-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.tc-actions form { margin: 0; }

/* buttons: x-btn on <button> elements */
.tc-btn { font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.3; cursor: pointer; }
.tc-btn-full { width: 100%; }
.tc-btn-sm { font-size: .88rem; padding: .55rem 1rem; }
.tc-btn:disabled, .tc-btn[disabled] { background: var(--slate); color: var(--faint) !important; border-color: var(--line); cursor: not-allowed; }

/* list rows (matches, tracker) */
.tc-row { display: flex; justify-content: space-between; gap: 1.2rem; align-items: flex-start; }
.tc-row > div:first-child { flex: 1; min-width: 0; }
.tc-row h3 { overflow-wrap: anywhere; }
.tc-row .right { text-align: right; min-width: 130px; }
.tc-row .right form { margin: .5rem 0 0; }
@media (max-width: 560px) {
  .tc-row { flex-direction: column; gap: .8rem; }
  .tc-row .right { text-align: left; min-width: 0; width: 100%; }
  .tc-row .right .ring { margin: 0; }
}
.tc-outcome { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.tc-outcome select, .tc-outcome input[type=text] { width: auto; padding: .45rem .7rem; font-size: .86rem; border-radius: 8px; }
.tc-outcome input[type=text] { flex: 1 1 160px; max-width: 280px; min-width: 0; }

/* tiles inside cards */
.tc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.tc-tiles .ip-tile { padding: .9rem 1rem; }
.tc-tiles .ip-tile b { font-size: 1.5rem; }
.tc-card-title { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; }

/* dashboard tab strip on slate */
.tc-tabs { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 .6rem; margin: 0 0 1.4rem; overflow-x: auto; flex-wrap: nowrap; }
.tc-tabs .tab { white-space: nowrap; padding: .8rem .9rem; }

/* forms (app pages) */
.tc-form .ip-card h3 { display: flex; align-items: center; gap: .55rem; }
.tc-form label:not(.chk):not(.dropzone):not(.option) { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); text-align: left; }
.tc-form label:not(.chk):not(.option) input, .tc-form label select { margin-top: .4rem; }
.tc-form textarea { margin-top: .6rem; width: 100%; }
.tc-form .fgrid { margin-top: 1rem; }
.tc-form .option.check { font-weight: 500; }
.tc-form > .x-btn { align-self: flex-start; }
.tc-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blue); color: #fff; font-size: .82rem; font-weight: 700; flex: none; }

/* quiz */
.tc-quiz { max-width: 640px; margin: 0 auto; }
.tc-quiz .ip-card { padding: 1.8rem; }
.tc-quiz .options { margin: 0 0 1.2rem; }
.tc-quiz .option { background: #fff; border-radius: 10px; }
.tc-quiz form > input[type=text], .tc-quiz form > textarea { width: 100%; margin: 0 0 1rem; }
.tc-progress { height: 6px; background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; margin: 0 0 .7rem; max-width: 420px; }
.tc-progress .bar { height: 100%; background: #34D399; border-radius: 99px; transition: width .5s; }
.tc-quiz .statement { margin: 0 0 1.2rem; }
@media (max-width: 480px) { .tc-quiz .ip-card { padding: 1.3rem 1.1rem; } }

/* focused auth / onboarding (bare layout) */
body:has(.tc-auth), body:has(.tc-bare) { background: var(--slate); }
.tc-auth { max-width: 440px; margin: .5rem auto 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 2.2rem 2rem; box-shadow: 0 24px 50px -36px rgba(11,31,58,.45); }
.tc-auth h1 { font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .5rem; }
.tc-auth .lede { font-size: .97rem; color: var(--ink-2); margin: 0 0 1.4rem; text-align: left; }
.tc-auth .tc-label { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); margin: 0 0 .4rem; }
.tc-auth input[type=email] { width: 100%; }
.tc-auth .x-btn { margin-top: .8rem; }
.tc-auth .warn { text-align: left; margin: 0 0 1rem; }
.tc-auth-back { text-align: center; margin: 1.4rem 0 0; font-size: .9rem; }
.tc-auth-back a { color: var(--ink-2); text-decoration: none; }
.tc-auth-back a:hover { color: var(--blue); }
@media (max-width: 480px) { .tc-auth { padding: 1.6rem 1.2rem; } }
.tc-bare { max-width: 680px; margin: 0 auto; }
.tc-bare-head { margin: 0 0 1.4rem; }
.tc-bare-head .x-eyebrow { margin-bottom: .5rem; }
.tc-bare-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 .6rem; }
.tc-bare-head .lede { margin: 0; text-align: left; }

/* application docs, share card, checkout */
.tc-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 0 0 1.4rem; }
.tc-docs .ip-card { margin: 0; min-width: 0; }
.tc-share .statrow { border-bottom: 1px solid var(--line); padding: .8rem 0; }
.tc-share .statrow:last-of-type { border-bottom: 0; }
.tc-share .statrow .big { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-price { font-size: 2.4rem; font-weight: 750; letter-spacing: -.03em; color: var(--ink); margin: .2rem 0 .4rem; }
.tc-form label.dropzone { display: flex; font-weight: 400; font-size: 1rem; margin: 0 0 1rem; }
.tc-form label.dropzone .micro { font-weight: 400; }
.tc-quiz .compute { margin: 0 0 1.2rem; background: var(--slate); border-radius: 10px; padding: 1rem 1.2rem; }
.tc-quiz .micro { margin: 0 0 1rem; }
.tc-form .ip-card + .ip-card { margin-top: 0; }
.tc-form .ip-card > .micro:first-of-type { margin: 0 0 .2rem; }
.tc-form .wrights { border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem 1rem; margin: 1.1rem 0 0; min-width: 0; }
.tc-form .wrights legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }
.tc-form .chk { font-weight: 500; }
.tc-body .okbanner, .tc-body .alertbar, .tc-body .x-wrap > .warn { margin: 0 0 1rem; }
.tc-body .profileform { margin-top: 0; }

/* jobs on phones: results first — trim the header and keep chip rows to one swipeable line */
@media (max-width: 720px) {
  .jb-top { padding-top: 1.1rem; padding-bottom: 1rem; }
  .jb-top h1 { font-size: 1.45rem; margin-bottom: .6rem; }
  .jb-count, .jb-popular { display: none; }
  .jb-body .chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .jb-body .chiprow::-webkit-scrollbar { display: none; }
  .jb-body .chiprow > * { flex: 0 0 auto; }
  .jb-toggles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .jb-toggles::-webkit-scrollbar { display: none; }
  .jb-toggles > * { flex: 0 0 auto; }
}
@media (max-width: 720px) {
  /* the single column must never grow to its widest child (swipe rows, long text) */
  .jobswrap, .jobswrap.split { grid-template-columns: minmax(0, 1fr) !important; }
  .jobswrap > * { min-width: 0; }
}

/* remote region label on job cards */
.rg { font-weight: 600; white-space: nowrap; }
.rg-any { color: var(--emerald); }
.rg-lim { color: var(--ink-2); }
.jb-hero .rg-any, .job-hero .rg-any { color: #34D399; }
.jb-hero .rg-lim, .job-hero .rg-lim { color: #C9D5E8; }

/* ══════════════════════════════════════════════════════════════════════
   GROWTH TOOLS (gc-*, gr-aff-*) — share cards (/cards), WhatsApp post
   (/cards/whatsapp) and the disclosed affiliate block. Oct 2026.
   ══════════════════════════════════════════════════════════════════════ */
.gc-hero { padding: 3.5rem 0 3rem; }
.gc-h1 { max-width: 20ch; }
.gc-links { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }
.gc-links a { color: #fff; font-weight: 650; }
.gc-ref { color: #B7C4D8; font-size: .9rem; }
.gc-ref b { color: #fff; font-family: "JetBrains Mono", monospace; }
.gc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem 1.6rem; padding-top: 2.5rem; padding-bottom: 4rem; }
.gc-empty { color: var(--muted); grid-column: 1 / -1; }
.gc-item { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.gc-frame { position: relative; width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 18px 40px -22px rgba(11,31,58,.55); height: 420px; background: var(--navy); }
/* The card is laid out at full 1080px size and scaled to fit the frame. */
.gc-card {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1350px; transform-origin: 0 0; box-sizing: border-box;
  padding: 84px 84px 72px; display: flex; flex-direction: column; color: #DCE5F2; font-family: var(--font);
  background:
    radial-gradient(900px 600px at 95% -5%, rgba(11,95,255,.45), transparent 60%),
    radial-gradient(700px 500px at -10% 105%, rgba(52,211,153,.14), transparent 60%),
    #0B1F3A;
}
.gc-card.is-square { height: 1080px; padding: 60px 72px 52px; }
.gc-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.gc-brand { display: inline-flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
.gc-brand svg { width: 48px; height: 48px; }
.gc-brand b { color: #7EA4F4; }
.gc-kick { font-size: 21px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #8FB2FF; text-align: right; }
.gc-title { color: #fff; font-size: 64px; line-height: 1.05; letter-spacing: -.035em; font-weight: 800; margin: 52px 0 0; }
.gc-card.is-square .gc-title { font-size: 52px; margin-top: 34px; }
.gc-big { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.gc-big b { font-size: 108px; line-height: 1; font-weight: 800; color: #fff; letter-spacing: -.04em; }
.gc-big span { font-size: 25px; line-height: 1.3; color: #9FB0C8; max-width: 22ch; }
.gc-card.is-square .gc-big { margin-top: 20px; }
.gc-card.is-square .gc-big b { font-size: 76px; }
.gc-card.is-square .gc-big span { font-size: 22px; }
.gc-rows { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow: hidden; }
.gc-card.is-square .gc-rows { margin-top: 24px; gap: 10px; }
.gc-rows li { display: flex; align-items: center; gap: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 26px; }
.gc-rank { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #0B5FFF; color: #fff; font-weight: 800; font-size: 25px; display: grid; place-items: center; }
.gc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gc-name b { color: #fff; font-size: 32px; line-height: 1.2; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-name small { color: #9FB0C8; font-size: 21px; line-height: 1.25; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-val { flex: none; color: #fff; font-size: 42px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gc-card.is-square .gc-rows li { padding: 9px 22px; }
.gc-card.is-square .gc-rank { width: 42px; height: 42px; font-size: 21px; }
.gc-card.is-square .gc-name b { font-size: 28px; }
.gc-card.is-square .gc-name small { font-size: 18px; }
.gc-card.is-square .gc-val { font-size: 36px; }
/* the 8–10 row lists need tighter rows */
.gc-list .gc-rows { gap: 8px; }
.gc-list .gc-rows li { padding: 5px 22px; border-radius: 14px; }
.gc-list .gc-rank { width: 40px; height: 40px; font-size: 20px; }
.gc-list .gc-name b { font-size: 26px; }
.gc-list .gc-name small { font-size: 18px; }
.gc-list .gc-val { font-size: 34px; }
.gc-card.is-square.gc-list .gc-rows { gap: 6px; }
.gc-card.is-square.gc-list .gc-rows li { padding: 4px 18px; border-radius: 10px; }
.gc-card.is-square.gc-list .gc-name b { font-size: 22px; }
.gc-card.is-square.gc-list .gc-name small { font-size: 15px; }
.gc-card.is-square.gc-list .gc-rank { width: 30px; height: 30px; font-size: 15px; }
.gc-card.is-square.gc-list .gc-val { font-size: 26px; }
/* 8-row lists (biggest sponsors) */
.gc-mid .gc-rows { gap: 10px; }
.gc-mid .gc-rows li { padding: 8px 26px; }
.gc-card.is-square.gc-mid .gc-rows { gap: 7px; }
.gc-card.is-square.gc-mid .gc-rows li { padding: 4px 20px; }
.gc-card.is-square.gc-mid .gc-name b { font-size: 25px; }
.gc-card.is-square.gc-mid .gc-name small { font-size: 16px; }
.gc-card.is-square.gc-mid .gc-rank { width: 34px; height: 34px; font-size: 17px; }
.gc-card.is-square.gc-mid .gc-val { font-size: 30px; }
.gc-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.gc-card.is-square .gc-foot { margin-top: 22px; padding-top: 20px; }
.gc-src { font-size: 20px; color: #9FB0C8; line-height: 1.35; flex: 1; min-width: 0; }
.gc-url { flex: none; font-size: 28px; font-weight: 750; color: #fff; background: #0B5FFF; border-radius: 99px; padding: 14px 28px; white-space: nowrap; }
.gc-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.gc-size { display: inline-flex; border: 1px solid var(--line-2, #D5DBE5); border-radius: 8px; overflow: hidden; }
.gc-size button { font: inherit; font-size: .82rem; border: 0; background: transparent; color: var(--ink-2); padding: .45rem .7rem; cursor: pointer; }
.gc-size button.on { background: var(--navy); color: #fff; }
.gc-btn { font: inherit; font-size: .88rem; font-weight: 650; border-radius: 8px; padding: .5rem .9rem; cursor: pointer; border: 1px solid var(--line-2, #D5DBE5); background: #fff; color: var(--ink); }
.gc-btn:hover { border-color: var(--ink); }
.gc-dl, .gc-btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.gc-dl:hover, .gc-btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.gc-btn:disabled { opacity: .6; cursor: progress; }
.gc-caption, .gc-wa-text { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem; line-height: 1.5; color: var(--ink-2); border: 1px solid var(--line, #E3E8EF); border-radius: 8px; padding: .6rem .7rem; resize: vertical; background: var(--slate); }
.gc-wa { max-width: 760px; padding-top: 2.5rem; padding-bottom: 4rem; }
.gc-wa h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .4rem 0 .6rem; }
.gc-wa-lede { color: var(--muted); margin: 0 0 1.4rem; }
.gc-wa-text { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .86rem; }
.gc-back a { color: var(--blue); text-decoration: none; font-weight: 600; }
@media (max-width: 640px) { .gc-gallery { grid-template-columns: 1fr; } }

/* affiliate block (partials/affiliates.ejs) */
.gr-aff { border: 1px solid var(--line, #E3E8EF); border-radius: var(--radius-lg, 14px); background: var(--slate); padding: 1rem 1.1rem; margin: 1.6rem 0; }
.gr-aff-h { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.gr-aff-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.gr-aff-list a { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; background: #fff; border: 1px solid var(--line, #E3E8EF); border-radius: 10px; padding: .7rem .85rem; color: var(--ink); height: 100%; box-sizing: border-box; }
.gr-aff-list a:hover { border-color: var(--blue); }
.gr-aff-list b { font-weight: 650; }
.gr-aff-list span { font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.gr-aff-note { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; }
/* ══ end GROWTH TOOLS ══ */

/* ══ REVENUE: partners, done-for-you, featured posts (routes/revenue.js) ══ */
.rv-wide { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 1.5rem; align-items: center; margin-top: 2rem; }
.rv-wide ul { margin: 0; }
@media (max-width: 860px) { .rv-wide { grid-template-columns: 1fr; gap: .8rem; } }
.rv-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin-top: 1rem; }
.rv-stats div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.rv-stats b { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-stats span { font-size: .82rem; color: var(--muted); }
@media (max-width: 860px) { .rv-stats { grid-template-columns: repeat(2, 1fr); } }
.rv-copy { display: flex; gap: .6rem; margin: .4rem 0 .6rem; }
.rv-copy input { flex: 1; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; background: var(--slate); }
.ip-form label.rv-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.rv-check input { margin-top: .25rem; flex: none; }
.rv-plain { padding-left: 1.1rem; margin: 0; color: var(--ink-2); font-size: .93rem; }
.rv-plain li { padding: .25rem 0; }
.rv-linkbtn { display: block; width: 100%; margin-top: .7rem; background: none; border: 0; padding: .3rem; color: var(--blue); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
/* ══ end REVENUE ══ */

/* conversion: honest trust lines */
.fd-trust { font-size: .85rem; color: var(--muted); margin: .9rem 0 0 !important; }
.pr-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 760px; margin: 2rem auto 1rem; }
.pr-compare > div { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; background: #fff; display: flex; flex-direction: column; gap: .25rem; }
.pr-compare b { font-size: .95rem; }
.pr-compare span { font-size: .9rem; color: var(--ink-2); }
.pr-compare .pr-us { border: 2px solid var(--emerald); }
.pr-compare .pr-us b { color: var(--emerald); }
@media (max-width: 640px) { .pr-compare { grid-template-columns: 1fr; } }


/* ── shared controls: one height, one baseline, everywhere ─────────────── */
.btn, .x-btn, .v-btn, .btn-ghost, .x-btn-ghost, .x-btn-light, .x-btn-outline, .btn-google, .join, .signin, .chip {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; line-height: 1.2; vertical-align: middle; }
.btn, .x-btn, .v-btn, .btn-ghost, .x-btn-ghost, .x-btn-light, .x-btn-outline, .btn-google { min-height: var(--control-h); }
.btn-sm, .x-btn-sm, .tc-btn-sm, .join, .signin, .chip { min-height: var(--control-h-sm); }
.btn-ghost.tc-btn-sm, .x-btn.tc-btn-sm, .x-btn-ghost.tc-btn-sm { min-height: var(--control-h-sm); padding-top: .4rem; padding-bottom: .4rem; }
form[style*="display:inline"] .x-btn { vertical-align: middle; }
/* Buttons that sit beside inputs share the input height exactly. */
.x-search .x-btn, .v-search .v-btn, .rv-row .x-btn, .alertbar .btn { min-height: var(--control-h); }


/* ── accessibility and touch targets ──────────────────────────────────── */
.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; }
.fcol .fh, .fcol h4 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #9AA7B8; font-weight: 700; margin: 0 0 .8rem; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--blue); margin: 0 .15rem 0 0; vertical-align: -3px; cursor: pointer; }
label.chk, label.option, label.check { cursor: pointer; }
.results-head .micro a { display: inline-block; padding: .5rem .55rem; margin: -.5rem -.1rem; border-radius: var(--r-sm); }
.jobrow h3 a { display: inline-block; padding: .15rem 0; }
/* Footer column links stay stacked (one per line); only the inline legal links get a taller hit area. */
.footgrid .fcol a { display: block; padding: .3rem 0; }
.foot .copyline a, .foot .legalline a { display: inline-block; padding: .2rem 0; }

/* ── one section rhythm for every page template ───────────────────────── */
.x-sec, .v-sec { padding: clamp(3.25rem, 7vw, 6rem) 0; }
.ip-sec { padding: clamp(2.25rem, 5vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem); }
.ip-sec.x-sec-alt { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.option { min-height: var(--control-h); box-sizing: border-box; }
/* Small inline action links keep a comfortable hit area without changing layout. */
.crumb a, .ip-crumb a, .x-table td a, .x-link { display: inline-block; padding: .45rem 0; margin: -.45rem 0; }

/* Company name sits beside its letter badge in every table, wrapping beside it, never under it. */
td > .x-logo.sm { float: left; margin-right: .65rem; }
td > .x-logo.sm + b { display: flex; align-items: center; min-height: 30px; overflow-wrap: anywhere; }
@media (max-width: 480px) { .x-table td > .x-logo.sm { display: none; } .x-table td > .x-logo.sm + b { min-height: 0; } }
/* Phone footer: two columns instead of one very long list. */
@media (max-width: 640px) {
  .footgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
  .footgrid .fbrand { grid-column: 1 / -1; max-width: none; }
  .footgrid .fcol { min-width: 0; }
  .footgrid [data-testid="foot-popular"] { grid-column: 1 / -1; max-width: none !important; order: 10; }
}

/* ══════════════════════════════════════════════════════════════════════
   SponsorApply v10 "MOTION" — loaded after style.css.
   Display type in Plus Jakarta Sans, an animated aurora behind every
   hero, glass header, spotlight cards, live ticker and a product demo.
   Every animation is off under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Aliases of the base tokens in style.css: one palette, defined once. */
  --v-ink: #0A1020;
  --v-navy: #070D1C;
  --v-blue: var(--blue);
  --v-blue-2: #5B8CFF;
  --v-violet: var(--violet);
  --v-mint: var(--mint);
  --v-amber: #F5B946;
  --v-line: rgba(255,255,255,.12);
  --display: "Plus Jakarta Sans", "PJS Fallback", "Segoe UI", Arial, sans-serif;
}
h1, h2, .x-h1, .x-h2, .v-h1, .v-h2 { font-family: var(--display); }

/* ── header: glass, compact, sticky ───────────────────────────────────── */
.nav { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
/* Glass only where it is cheap: pointer devices with wide screens. */
@media (hover: hover) and (min-width: 901px) { .nav { background: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); } }
.brand .wordmark { font-family: var(--display); font-weight: 800; }
.join { background: var(--v-ink); border-radius: 999px; padding: .55rem 1.15rem; transition: transform .2s var(--ease), background .2s; }
.join:hover { background: #000; transform: translateY(-1px); }
.signin { border-radius: 999px; }

/* ── aurora: the animated backdrop shared by every hero ───────────────── */
.x-hero, .v-hero, .jb-top, .fd-top { position: relative; isolation: isolate; overflow: hidden; background: var(--v-navy); }
.x-hero::before, .v-hero::before, .jb-top::before {
  /* Top edge in fixed units: a percentage top moved this viewport-sized
     layer whenever the hero's height changed, which counted as a large
     layout shift (CLS 0.3+). With a fixed top, height changes shift nothing. */
  content: ''; position: absolute; top: -14rem; left: -20%; right: -20%; height: calc(100% + 14rem); z-index: -1;
  background:
    radial-gradient(55% 50% at 20% 30%, rgba(47,107,255,.5) 0%, rgba(47,107,255,.18) 40%, transparent 72%),
    radial-gradient(50% 45% at 80% 20%, rgba(139,92,246,.42) 0%, rgba(139,92,246,.14) 40%, transparent 72%),
    radial-gradient(45% 45% at 60% 80%, rgba(34,211,166,.26) 0%, rgba(34,211,166,.08) 40%, transparent 72%);
  /* Softness comes from the gradients themselves: an animated filter: blur()
     on this layer cost ~6s of main-thread style work on phones. Only
     transform is animated (compositor only), and only on larger screens. */
  animation: aurora 18s ease-in-out infinite alternate;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .x-hero::before, .v-hero::before, .jb-top::before { animation: none; } }
.x-hero::after, .v-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
@keyframes aurora {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%,3%,0) rotate(6deg) scale(1.08); }
  100% { transform: translate3d(-3%,5%,0) rotate(-4deg) scale(1.02); }
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.v-btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
  padding: .95rem 1.5rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--v-blue), var(--v-violet));
  box-shadow: 0 10px 30px -10px rgba(47,107,255,.7); transition: transform .2s var(--ease), box-shadow .2s; position: relative; overflow: hidden; }
.v-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); }
.v-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(47,107,255,.85); color: #fff; }
.v-btn:hover::after { animation: shine .9s ease; }
@keyframes shine { to { transform: translateX(120%); } }
.v-btn-ghost { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.v-btn-ghost:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.x-btn { border-radius: 999px; }

/* ── homepage hero ────────────────────────────────────────────────────── */
.v-hero { color: #C9D4EA; padding: 5.5rem 0 4.5rem; text-align: center; }
.v-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
@media (max-width: 640px) { .v-wrap { padding: 0 1rem; } .v-hero { padding: 3.2rem 0 3rem; } }
.v-pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: #DCE6FF; text-decoration: none;
  padding: .4rem .9rem .4rem .45rem; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-pill b { background: var(--v-mint); color: #04221A; font-size: .72rem; padding: .18rem .5rem; border-radius: 999px; }
.v-pill:hover { color: #fff; background: rgba(255,255,255,.1); }
.v-h1 { color: #fff; font-weight: 800; font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.035em; word-spacing: .04em; margin: 1.3rem auto 0; max-width: 21ch; }
.v-rot { display: inline-grid; vertical-align: bottom; }
.v-rot > span { grid-area: 1 / 1; justify-self: center; background: linear-gradient(90deg, #7FA8FF, #B49CFF 45%, #5EEAD4); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .08em; opacity: 0; transform: translateY(45%); filter: blur(6px); white-space: nowrap;
  transition: opacity .45s var(--ease) .18s, transform .55s var(--ease) .18s, filter .45s var(--ease) .18s; }
.v-rot > span.on { opacity: 1; transform: none; filter: none; }
.v-rot > span.off { opacity: 0; transform: translateY(-45%); filter: blur(6px); transition: opacity .2s ease, transform .3s ease, filter .2s ease; }
.v-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; max-width: 60ch; margin: 1.3rem auto 2rem; color: #AFBDD6; }
.v-lede b { color: #fff; }

.v-ask { max-width: 720px; margin: 0 auto; position: relative; border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg, rgba(127,168,255,.8), rgba(180,156,255,.6), rgba(94,234,212,.6)); box-shadow: 0 30px 80px -30px rgba(47,107,255,.6); }
.v-ask form { display: flex; align-items: center; gap: .5rem; background: #0C1428; border-radius: 19px; padding: .55rem .55rem .55rem 1.1rem; }
.v-ask .ti { color: #7FA8FF; font-size: 1.3rem; }
.v-ask input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: inherit; font-size: 1.08rem; padding: .7rem .2rem; }
.v-ask input::placeholder { color: #6F7FA0; }
.v-ask input:focus { outline: none; }
.v-ask button { flex: none; padding: .8rem 1.3rem; }
@media (max-width: 560px) { .v-ask form { flex-wrap: wrap; } .v-ask button { width: 100%; justify-content: center; } }
.v-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.1rem; }
.v-chips a { color: #BFCBE3; text-decoration: none; font-size: .86rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--v-line); transition: background .2s, color .2s; }
.v-chips a:hover { color: #fff; background: rgba(255,255,255,.12); }
.v-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; list-style: none; padding: 0; margin: 1.8rem 0 0; font-size: .9rem; color: #94A3C2; }
.v-trust li::before { content: '✓'; color: var(--v-mint); font-weight: 800; margin-right: .45rem; }

/* ── path picker ──────────────────────────────────────────────────────── */
.v-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; text-align: left; }
@media (max-width: 1000px) { .v-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .v-paths { grid-template-columns: minmax(0, 1fr); } }
.v-path { position: relative; display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: #DCE6FF; padding: 1.4rem 1.3rem 1.25rem;
  border-radius: 20px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--v-line); overflow: hidden;
  transition: transform .35s var(--ease), background .3s, box-shadow .3s; }
.v-path::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(127,168,255,.22), transparent 60%); }
.v-path:hover { transform: translateY(-6px); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(127,168,255,.55), 0 24px 50px -24px rgba(47,107,255,.6); color: #fff; }
.v-path:hover::before { opacity: 1; }
.v-path .v-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; margin-bottom: .5rem; }
.v-path b { font-family: var(--display); font-size: 1.2rem; color: #fff; letter-spacing: -.02em; }
.v-path .v-num { font-size: .86rem; color: #9FB0CF; }
.v-path .v-num em { font-style: normal; color: #fff; font-weight: 700; }
.v-path .v-go { margin-top: .6rem; font-weight: 700; font-size: .9rem; color: #9DBBFF; }
.v-path:hover .v-go { color: #fff; }
.v-path.v-hot { box-shadow: inset 0 0 0 1px rgba(127,168,255,.6); background: rgba(47,107,255,.12); }
.v-tag { position: absolute; top: 1rem; right: 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #04221A; background: var(--v-mint); padding: .2rem .55rem; border-radius: 999px; }

/* ── live ticker ──────────────────────────────────────────────────────── */
.v-ticker { background: #0A1224; border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); overflow: hidden; padding: .85rem 0; }
.v-ticker-row { display: flex; gap: 2.2rem; width: max-content; animation: marquee 55s linear infinite; }
.v-ticker:hover .v-ticker-row { animation-play-state: paused; }
.v-ticker a { display: inline-flex; align-items: center; gap: .55rem; color: #C9D4EA; text-decoration: none; white-space: nowrap; font-size: .92rem; }
.v-ticker a:hover { color: #fff; }
.v-ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-mint); box-shadow: 0 0 0 4px rgba(34,211,166,.15); }
.v-ticker small { color: #7C8BA8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── sections ─────────────────────────────────────────────────────────── */
.v-sec { padding: 6.5rem 0; }
/* Off-screen homepage sections skip style/layout until they approach the
   viewport (cuts main-thread work on phones). The section with the dark demo
   panel is left out: accessibility checkers misread skipped content. */
.v-sec:not(:has(.v-window)) { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.v-sec-alt { background: #F5F7FC; }
@media (max-width: 640px) { .v-sec { padding: 4rem 0; } }
.v-eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--v-blue); margin: 0 0 .9rem; }
.v-h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; letter-spacing: -.03em; color: var(--v-ink); margin: 0 0 1rem; max-width: 20ch; }
.v-sub { font-size: 1.12rem; line-height: 1.6; color: #475569; max-width: 60ch; margin: 0 0 2.6rem; }
.v-center { text-align: center; } .v-center .v-h2, .v-center .v-sub { margin-inline: auto; }

/* stats band */
.v-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 800px) { .v-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-stat { padding: 1.6rem 1.4rem; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(10,16,32,.04), inset 0 0 0 1px var(--line); }
.v-stat b { display: block; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; color: var(--v-ink); line-height: 1; }
.v-stat span { display: block; margin-top: .5rem; color: var(--muted); font-size: .92rem; }

/* demo window */
.v-demo-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .v-demo-grid { grid-template-columns: minmax(0, 1fr); } }
.v-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.v-points li { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; align-items: start; }
.v-points .ti { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--v-blue); font-size: 1.2rem; }
.v-points b { display: block; color: var(--v-ink); font-size: 1.05rem; }
.v-points span { color: var(--muted); font-size: .95rem; }
.v-window { border-radius: 20px; background: #0B1226; box-shadow: 0 50px 100px -40px rgba(10,16,32,.55), inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; color: #C9D4EA; }
.v-window-bar { display: flex; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--v-line); }
.v-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2A3555; }
.v-window-bar i:nth-child(1) { background: #FF6B6B; } .v-window-bar i:nth-child(2) { background: #FFC24B; } .v-window-bar i:nth-child(3) { background: #3DDC97; }
.v-window-body { padding: 1.3rem 1.3rem 1.5rem; }
.v-type { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--v-line); font-size: 1rem; color: #fff; min-height: 48px; }
.v-type .ti { color: #7FA8FF; }
.v-caret { width: 2px; height: 1.1em; background: #7FA8FF; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.v-result-h { margin: 1.1rem 0 .7rem; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -.02em; opacity: 0; transition: opacity .5s; }
.v-result-h em { font-style: normal; color: #7FA8FF; }
.v-rows { display: grid; gap: .5rem; }
.v-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: .8rem; align-items: center; padding: .65rem .8rem; border-radius: 12px; background: rgba(255,255,255,.04);
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.v-row.in { opacity: 1; transform: none; }
.v-row .lg { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #1C2A4D; color: #fff; font-weight: 800; }
.v-row b { color: #fff; font-weight: 600; font-size: .95rem; }
.v-row .f { color: #9FB0CF; font-size: .85rem; text-align: right; }
.v-row .w { color: var(--v-mint); font-weight: 700; font-size: .9rem; }
.v-row.lock { filter: blur(5px); }

/* bento */
.v-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 1rem; }
.v-tile { grid-column: span 2; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: 1.5rem; border-radius: 22px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--v-ink); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.v-tile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #C9D6F5, 0 24px 50px -30px rgba(47,107,255,.5); color: var(--v-ink); }
.v-tile.wide { grid-column: span 3; } .v-tile.tall { grid-row: span 2; }
.v-tile .ti { position: absolute; top: 1.3rem; left: 1.4rem; font-size: 1.6rem; color: var(--v-blue); }
.v-tile b { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.02em; }
.v-tile span { color: var(--muted); font-size: .95rem; }
.v-tile.dark { background: #0B1226; color: #fff; box-shadow: none; }
.v-tile.dark span { color: #9FB0CF; } .v-tile.dark .ti { color: #7FA8FF; } .v-tile.dark:hover { color: #fff; }
.v-tile .big { font-family: var(--display); font-size: 3rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--v-blue); }
@media (max-width: 900px) { .v-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-tile, .v-tile.wide { grid-column: span 1; } .v-tile.tall { grid-row: span 1; } }
@media (max-width: 520px) { .v-bento { grid-template-columns: minmax(0, 1fr); } }

/* final CTA */
.v-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; margin: 0 auto; max-width: 1200px; padding: 4.5rem 2rem; text-align: center; background: var(--v-navy); color: #C9D4EA; }
.v-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(60% 70% at 15% 20%, rgba(47,107,255,.35) 0%, transparent 70%),
    radial-gradient(50% 60% at 85% 30%, rgba(139,92,246,.3) 0%, transparent 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(34,211,166,.22) 0%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.v-cta h2 { color: #fff; font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1.05; max-width: 18ch; margin: 0 auto 1rem; }
.v-cta p { margin: 0 auto 2rem; max-width: 50ch; font-size: 1.1rem; }
@media (max-width: 640px) { .v-cta { border-radius: 0; padding: 3.5rem 1.2rem; } }

/* existing inner-page heroes get the display font and a little more air */
.x-h1 { font-weight: 800; letter-spacing: -.03em; word-spacing: .04em; }
.x-h2 { font-weight: 800; letter-spacing: -.028em; }
.x-path, .x-price, .x-countries a, .cg-tile, .x-table-wrap, .fl-form, .fl-out { border-radius: 18px; }
.x-path:hover, .cg-tile:hover { transform: translateY(-4px); }

/* auto-reveal: fx.js tags section children; content stays visible without JS */
/* Scroll reveal without JavaScript: browsers with scroll-driven animations
   fade sections in as they enter; others simply show them. */
@keyframes v-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
    .v-sec .v-wrap > *, .x-sec .x-wrap > *, .v-stats > *, .v-bento > * { animation: v-reveal .6s var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-hero::before, .v-hero::before, .jb-top::before, .v-cta::before, .v-ticker-row, .v-caret { animation: none !important; }
  .v-rot > span, .v-row, .v-rv, .v-path, .v-tile, .v-btn { transition: none !important; }
  .v-rv, .v-row { opacity: 1 !important; transform: none !important; }
}

/* ── desktop nav: links centred, account actions on the right ────────── */
@media (min-width: 901px) {
  .nav-items { flex: 1; margin-left: 2rem; }
  .nav-items > .nitem:first-child { margin-left: auto; }
  .nav-items > .nav-divider { margin-left: auto; visibility: hidden; }
  .nav-items .nitem { font-weight: 600; }
}

/* ── match score ring on job cards (Jobright-style) ───────────────────── */
.mscore {
  --c: var(--v-blue); --p: 0;
  width: 64px; height: 64px; border-radius: 50%; flex: none; margin: 0 auto .5rem;
  display: grid; place-content: center; text-align: center; line-height: 1; text-decoration: none;
  background:
    radial-gradient(closest-side, #fff 78%, transparent 80% 100%),
    conic-gradient(var(--c) calc(var(--p) * 1%), #E7ECF5 0);
}
.mscore b { font-family: var(--display); font-size: 1.05rem; font-weight: 800; color: var(--v-ink); }
.mscore span { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.ms-hi { --c: #10B981; }
.ms-mid { --c: #F59E0B; }
.ms-lo { --c: #94A3B8; }
.ms-tease { --p: 100; --c: #C7D2FE; transition: transform .2s var(--ease); }
.ms-tease:hover { transform: scale(1.06); }
.ms-tease b { color: var(--v-blue); }
.mreasons { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .45rem 0 0; font-size: .8rem; color: #047857; font-weight: 600; }
.jobdetail .mscore { margin: 0 0 .75rem; }
.jb-head { position: relative; }
.jb-mscore { margin: 0 0 0 auto; align-self: center; }
.jb-head:has(.jb-mscore) { grid-template-columns: auto 1fr auto; }
@media (max-width: 560px) { .jb-head:has(.jb-mscore) { grid-template-columns: 1fr auto; } .jb-head:has(.jb-mscore) .x-logo { display: none; } }
.jobembed .jb-head:has(.jb-mscore) { grid-template-columns: 1fr auto; }
.jobembed .jb-head:has(.jb-mscore) .x-logo { display: none; }
.mreasons { gap: .2rem .7rem; font-size: .76rem; line-height: 1.35; }
.mreasons span { white-space: nowrap; }
.jb-head ~ .mreasons, .x-hero .mreasons { color: #6EE7B7; margin: .2rem 0 .9rem; }

/* ── Pro Monthly card on /pricing ─────────────────────────────────────── */
.pr-pro { position: relative; margin-top: 1.4rem; border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, var(--v-blue), var(--v-violet), var(--v-mint)) border-box; }
.pr-pro .x-pop { position: static; display: inline-block; margin-bottom: .5rem; }

/* ── /extension ───────────────────────────────────────────────────────── */
.ext-steps { counter-reset: s; list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; max-width: 760px; }
.ext-steps li { counter-increment: s; position: relative; padding: 1rem 1.1rem 1rem 3.4rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.ext-steps li::before { content: counter(s); position: absolute; left: 1rem; top: .95rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--v-blue), var(--v-violet)); }
.ext-steps code { background: #EEF2FA; padding: .05rem .35rem; border-radius: 6px; }

/* ── proof of submission screenshots ──────────────────────────────────── */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: .9rem 0; }
.proof a { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; }
.proof img { display: block; width: 100%; height: 180px; object-fit: cover; object-position: top; }
.proof span { display: block; padding: .5rem .7rem; font-size: .8rem; font-weight: 600; color: #0A1020; }
.quiz-job { display: inline-block; margin: 0 0 .6rem; padding: .45rem .8rem; border-radius: 10px; background: rgba(255,255,255,.1); color: #E4ECFF; font-size: .9rem; }
.jb-auto { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .84rem; color: #C9D6F2; }

/* ── explainable fit labels (replace numeric match scores) ─────────────── */
.fitlabels { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }
.fl { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.35; border: 1px solid transparent; }
.fl-ok { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.fl-neutral { background: #F1F5F9; color: #334155; border-color: #E2E8F0; }
.fl-warn { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.fl-no { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }
.fl-why { flex-basis: 100%; font-size: .78rem; color: var(--muted); }
.jb-head ~ .fitlabels .fl-why { color: #B8C6E0; }
.typechip { display: inline-block; margin-right: .45rem; padding: .1rem .5rem; border-radius: 6px; background: #EEF2FF; color: #3730A3; font-size: .74rem; font-weight: 700; letter-spacing: .01em; }

/* ── homepage search (role · location · mode · residence) ─────────────── */
.v-grad { background: linear-gradient(90deg, #7EA4F4, #A78BFA 55%, #5EEAD4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v-search { max-width: 880px; margin: 1.6rem auto 0; padding: .7rem; border-radius: 20px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); text-align: left; }
.v-search-row { display: flex; gap: .6rem; align-items: stretch; }
.v-field { flex: 1; display: flex; flex-direction: column; gap: .15rem; background: #fff; border-radius: 14px; padding: .45rem .9rem; min-width: 0; }
.v-field span { font-size: .7rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .06em; }
.v-field input { border: 0; outline: 0; font-size: 1rem; padding: .15rem 0; background: transparent; color: #0A1020; min-width: 0; }
.v-field:focus-within { box-shadow: 0 0 0 3px rgba(47,107,255,.45); }
.v-search .v-btn { white-space: nowrap; border-radius: 14px; padding: 0 1.3rem; }
.v-search-opts { margin-top: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.v-modes { display: flex; gap: .35rem; border: 0; margin: 0; padding: 0; flex-wrap: wrap; }
.v-modes input { position: absolute; opacity: 0; pointer-events: none; }
.v-modes span { display: inline-block; padding: .42rem .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #DCE6FF; font-size: .88rem; font-weight: 600; cursor: pointer; }
.v-modes input:checked + span { background: #fff; color: #0A1020; border-color: #fff; }
.v-modes input:focus-visible + span { outline: 2px solid #7EA4F4; outline-offset: 2px; }
.v-res { display: flex; align-items: center; gap: .5rem; color: #C9D6F2; font-size: .86rem; }
.v-res select { width: auto; min-height: var(--control-h-sm); border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.35); background-color: #fff; color: var(--ink); padding: .35rem 2.1rem .35rem .7rem; font-size: .9rem; }
.v-alt { margin: .9rem 0 0; color: #9FB3D9; font-size: .9rem; }
.v-alt a { color: #fff; font-weight: 700; text-decoration: none; margin-right: .6rem; }
@media (max-width: 720px) {
  .v-search-row { flex-direction: column; }
  .v-search .v-btn { padding: .85rem 1rem; justify-content: center; }
  .v-search-opts { align-items: flex-start; }
}
.x-pop-value { background: #047857; }  /* emerald 700: 5.5:1 with white text */
.x-pop-free { background: #0B1F3A; }
.x-prices { padding-top: .8rem; }
.pr-trial { margin: .55rem 0 0; max-width: 280px; font-size: .78rem; line-height: 1.45; color: #475569; }

/* ── Opportunity Reveal (onboarding) ──────────────────────────────────── */
.rv-list { display: grid; gap: .6rem; margin: 0 0 1.4rem; }
.rv-item { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; color: #0A1020; text-align: left; transition: border-color .15s, transform .15s; }
.rv-item:hover { border-color: #2F6BFF; transform: translateY(-1px); }
.rv-item b { font-size: 1rem; }
.rv-co { font-size: .86rem; color: #475569; }
.rv-item .fitlabels { margin-top: .3rem; }
.rv-save { border-top: 1px solid var(--line); padding-top: 1.2rem; text-align: left; }
.rv-save h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.rv-row { display: flex; gap: .5rem; margin: .7rem 0 .4rem; }
.rv-row input { flex: 1; min-width: 0; padding: .75rem .9rem; border: 1px solid #D5DCE8; border-radius: 10px; font: inherit; }
@media (max-width: 560px) { .rv-row { flex-direction: column; } }

/* ── dashboard application queue ──────────────────────────────────────── */
.q-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 860px) { .q-lanes { grid-template-columns: 1fr; } }
.q-lane { background: #F8FAFD; border: 1px solid var(--line); border-radius: 12px; padding: .8rem; }
.q-review { border-top: 3px solid #2F6BFF; }
.q-action { border-top: 3px solid #F59E0B; }
.q-submitted { border-top: 3px solid #10B981; }
.q-head { margin: 0; display: flex; justify-content: space-between; align-items: center; }
.q-n { display: inline-grid; place-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; background: #0B1F3A; color: #fff; font-size: .8rem; font-weight: 700; }
.q-item { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .65rem; margin: 0 0 .4rem; background: #fff; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; color: #0A1020; font-size: .88rem; }
.q-item span { color: var(--muted); font-size: .8rem; }
.q-item .q-why { color: #92400E; }
.q-submitted .q-item .q-why { color: #047857; }
.q-empty { color: var(--muted); }

/* ── CV gap check on job pages ────────────────────────────────────────── */
.jb-gap h2 { margin: .2rem 0 .6rem; }
.gap-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }

/* ── freelance retention: sprint, proposal tracker, earnings (.fr-) ──── */
.fr-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.ip-hero .fr-nav a { color: #C9D5E8; text-decoration: none; font-weight: 650; font-size: .9rem; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--v-line); }
.ip-hero .fr-nav a:not(.x-btn):not(.btn):hover { color: #fff; border-color: rgba(255,255,255,.3); }
.ip-hero .fr-nav a.on:not(.x-btn):not(.btn), .ip-hero .fr-nav a.on:not(.x-btn):not(.btn):hover { color: var(--v-ink); background: #fff; border-color: #fff; }
.fr-honest { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--v-amber); border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1.4rem; color: var(--ink-2); font-size: .93rem; }
.fr-honest b { color: var(--ink); }
.fr-progress { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.4rem; margin: 0 0 1.4rem; }
.fr-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; font-weight: 700; color: var(--ink); }
.fr-bar { height: 12px; border-radius: 999px; background: #EEF1F6; overflow: hidden; margin: .75rem 0 0; }
.fr-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--v-blue), var(--v-violet), var(--v-mint)); transition: width .6s var(--ease); }
.fr-days { display: grid; gap: 1rem; }
.fr-day { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; scroll-margin-top: 6rem; }
.fr-day.is-done { border-color: rgba(6,118,71,.35); background: linear-gradient(180deg, rgba(34,211,166,.06), #fff 60%); }
.fr-day.is-next { border-color: var(--v-blue); box-shadow: 0 18px 40px -30px rgba(47,107,255,.8); }
.fr-day-head { display: flex; gap: .9rem; align-items: flex-start; }
.fr-daynum { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: #fff; background: var(--v-ink); }
.fr-day.is-done .fr-daynum { background: var(--emerald, #067647); }
.fr-day.is-next .fr-daynum { background: linear-gradient(135deg, var(--v-blue), var(--v-violet)); }
.fr-day h3 { margin: 0; font-size: 1.1rem; }
.fr-day p { margin: .35rem 0 0; color: var(--ink-2); }
.fr-tip { font-size: .88rem; color: var(--muted); }
.fr-links { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 0; }
.fr-metric { display: inline-block; margin: .7rem 0 0; font-size: .86rem; font-weight: 650; color: var(--blue-deep); background: var(--blue-soft); border-radius: 999px; padding: .25rem .75rem; }
.fr-dayform { margin: 1rem 0 0; display: grid; gap: .6rem; }
.fr-dayform textarea, .fr-form input, .fr-form select, .fr-form textarea, .fr-inline select, .fr-inline textarea {
  width: 100%; font: inherit; font-size: .93rem; color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: .6rem .75rem; background: #fff; }
.fr-dayform textarea:focus, .fr-form :is(input, select, textarea):focus, .fr-inline :is(select, textarea):focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
.fr-dayform-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fr-check { color: var(--emerald, #067647); font-weight: 700; font-size: .88rem; }
.fr-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; display: grid; gap: .8rem; scroll-margin-top: 6rem; }
.fr-form label { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); }
.fr-form label > :is(input, select, textarea) { margin-top: .3rem; }
.fr-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.fr-filters { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.fr-filters a { text-decoration: none; font-size: .86rem; font-weight: 650; color: var(--ink-2); padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.fr-filters a.on { background: var(--v-ink); color: #fff; border-color: var(--v-ink); }
.fr-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.3rem; margin: 0 0 .8rem; scroll-margin-top: 6rem; }
.fr-item-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.fr-item h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.fr-item details { margin: .7rem 0 0; }
.fr-item summary { cursor: pointer; font-weight: 650; font-size: .88rem; color: var(--blue-deep); }
.fr-item pre { white-space: pre-wrap; font: inherit; font-size: .92rem; background: #F7F8FA; border-radius: 10px; padding: .8rem 1rem; margin: .6rem 0 0; }
.fr-inline { display: grid; gap: .6rem; margin: .8rem 0 0; }
.fr-inline-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fr-inline-row select { width: auto; }
.fr-status { display: inline-block; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .6rem; border-radius: 999px; background: #EEF1F6; color: var(--ink-2); }
.fr-status-sent { background: var(--blue-soft); color: var(--blue-deep); }
.fr-status-replied { background: rgba(139,92,246,.12); color: #6D28D9; }
.fr-status-won { background: rgba(34,211,166,.16); color: #067647; }
.fr-status-lost { background: rgba(217,45,32,.08); color: #912018; }
.fr-month { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin: 0 0 .6rem; }
.fr-month b { font-variant-numeric: tabular-nums; }
.fr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.6rem 0 0; }
.fr-cards a { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.3rem; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s; }
.fr-cards a:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(11,31,58,.5); }
.fr-cards b { display: block; font-family: var(--display); font-size: 1.05rem; }
.fr-cards span { display: block; color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.fr-save { margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.fr-save input, .fr-save select { width: 100%; font: inherit; font-size: .9rem; border: 1px solid var(--line-2); border-radius: 8px; padding: .55rem .7rem; }
@media (max-width: 560px) { .fr-day, .fr-form, .fr-item { padding: 1rem; } .fr-day-head { gap: .7rem; } }

/* hero CTA row (brief: primary + secondary) and inline icons */
.v-ctas { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin: 1.4rem 0 0; }
.v-ctas .v-btn { font-size: 1.02rem; padding: .95rem 1.6rem; }
.v-ctas .v-btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.v-ctas .v-btn-ghost:hover { background: rgba(255,255,255,.14); }
.svgi { display: inline-block; vertical-align: -.15em; flex: none; }
.v-ico .svgi, .v-tile .svgi { width: 1.35em; height: 1.35em; }
.v-ico-lg { display: inline-grid; place-content: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 1.3rem; margin-bottom: .6rem; }
.v-tile > .svgi { position: static; flex: none; width: 1.6rem; height: 1.6rem; margin-bottom: auto; padding-bottom: .9rem; box-sizing: content-box; color: var(--blue); }
/* Inline icons inherit the tiles the old icon font had. */
.v-points li > .svgi { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border-radius: 12px; background: var(--blue-soft); color: var(--v-blue); }
.v-type > .svgi { color: #7FA8FF; width: 1.1em; height: 1.1em; }
.v-tile.dark > .svgi { color: #7FA8FF; }
.v-h1 .v-grad { white-space: nowrap; }

/* Three equal feature cards; one column on phones. */
.v-bento-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-bento-3 > .v-tile { grid-column: auto; justify-content: flex-start; }
@media (max-width: 900px) { .v-bento-3 { grid-template-columns: 1fr; } }