:root {
    --ground:   #F6F3EC;
    --surface:  #FFFFFF;
    --raised:   #F1ECE1;
    --border:   #E6DFD1;
    --border-2: #D6CDBA;
    --ink:      #14241D;
    --ink-2:    #3C4A42;
    --muted:    #55635A;
    --stamp:    #15644C;
    --stamp-bg: #E7F0E9;
    --amber:    #A66A12;
    --amber-bg: #F5EAD3;
    --azure:    #2A5E77;
    --azure-bg: #E3EDF2;
    --alert:    #B23A22;
    --alert-bg: #F7E7E1;
    --shadow:   0 1px 2px rgba(20,36,29,.05), 0 14px 34px -20px rgba(20,36,29,.22);

    --display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:   #0E1512;
      --surface:  #151C18;
      --raised:   #1B231E;
      --border:   #27312B;
      --border-2: #3A463E;
      --ink:      #EDEAE0;
      --ink-2:    #C9CFC6;
      --muted:    #94A198;
      --stamp:    #5FCBA3;
      --stamp-bg: #12271F;
      --amber:    #E1B160;
      --amber-bg: #2B2214;
      --azure:    #78B9DB;
      --azure-bg: #15232C;
      --alert:    #F0937C;
      --alert-bg: #2E1813;
      --shadow:   0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
    }
  }

  :root[data-theme="dark"] {
    --ground:   #0E1512;
    --surface:  #151C18;
    --raised:   #1B231E;
    --border:   #27312B;
    --border-2: #3A463E;
    --ink:      #EDEAE0;
    --ink-2:    #C9CFC6;
    --muted:    #94A198;
    --stamp:    #5FCBA3;
    --stamp-bg: #12271F;
    --amber:    #E1B160;
    --amber-bg: #2B2214;
    --azure:    #78B9DB;
    --azure-bg: #15232C;
    --alert:    #F0937C;
    --alert-bg: #2E1813;
    --shadow:   0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
  }

  * { box-sizing: border-box; }

  /* A class-level display wins over the UA rule for [hidden], and .grid sets
     display:grid — so state this explicitly rather than relying on the host. */
  [hidden] { display: none !important; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-block: 28px 64px;
    padding-inline: 20px;
  }

  /* ---------- masthead ---------- */

  
  h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(25px, 4.2vw, 36px);
    letter-spacing: -0.024em;
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
  }
  
  .tag {
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--amber);
    background: var(--amber-bg);
    border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
    border-radius: 3px;
    padding: 3px 7px;
    white-space: nowrap;
  }

  /* ---------- tabs ---------- */

  .tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--border);
  }
  .tabs button {
    font-family: var(--display);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -0.008em;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 9px 14px;
    margin-bottom: -1px;
    cursor: pointer;
  }
  .tabs button:hover { color: var(--ink); }
  .tabs button[aria-selected="true"] {
    color: var(--ink);
    border-bottom-color: var(--stamp);
  }
  .tabs button:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }

  /* ---------- trips ---------- */

  .trip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .trip input[type="date"] {
    flex: 1;
    min-width: 0;
    font-family: var(--body);
    font-size: 12px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 6px;
  }
  .trip input:focus-visible { outline: 2px solid var(--stamp); outline-offset: 0; }
  .trip .len {
    font-family: var(--body);
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
  }
  .trip .rm {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
  }
  .trip .rm:hover { color: var(--alert); }
  .add {
    font-family: var(--body);
    font-size: 13px;
    color: var(--stamp);
    background: none;
    border: 1px dashed color-mix(in srgb, var(--stamp) 40%, transparent);
    border-radius: 5px;
    padding: 7px;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
  }
  .add:hover { background: var(--stamp-bg); }

  /* ---------- allowance readout ---------- */

  .count { transition: color .35s ease; }
  .count.lvl-warn { color: var(--amber); }
  .count.lvl-crit,
  .count.over { color: var(--alert); }
  @media (prefers-reduced-motion: reduce) { .count { transition: none; } }

  .status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 3px;
    margin-top: 12px;
  }
  .status.ok   { color: var(--stamp); background: var(--stamp-bg); }
  .status.bad  { color: var(--alert); background: var(--alert-bg); }

  /* ---------- timeline ---------- */

  .timeline { margin: 26px 0 8px; }
  .strip { display: flex; gap: 2px; align-items: stretch; }
  .strip .mon { display: flex; gap: 1px; min-width: 0; }
  .strip .d {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    border-radius: 1px;
    background: var(--border);
  }
  .strip .d.on { background: var(--stamp); }
  .strip .d.ref { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 1; }
  .ticks { display: flex; gap: 2px; margin-top: 6px; }
  .ticks .mon {
    min-width: 0;
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--muted);
    overflow: hidden;
    white-space: nowrap;
  }
  .tl-ends {
    display: flex;
    justify-content: space-between;
    font-family: var(--body);
    font-size: 11px;
    color: var(--muted);
    margin-top: 9px;
  }
  .tl-caption {
    font-size: 12.5px;
    color: var(--muted);
    margin: 14px 0 0;
    max-width: 70ch;
  }

  /* ---------- key dates ---------- */

  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    margin-top: 28px;
  }
  .fact { background: var(--surface); padding: 14px 16px; }
  .fact dt {
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .fact dd {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }
  .fact dd small {
    display: block;
    font-family: var(--body);
    font-weight: 400;
    font-size: 12.5px;
    color: var(--muted);
    letter-spacing: 0;
    margin-top: 3px;
  }
  .fact.warn dd { color: var(--alert); }

  /* ---------- layout ---------- */

  .grid {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }
  @media (max-width: 880px) {
    .grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  }

  /* ---------- control rail ---------- */

  .rail {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  @media (max-width: 880px) { .rail { position: static; } }

  .legend {
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    display: block;
    margin-bottom: 9px;
  }

  select {
    width: 100%;
    font-family: var(--body);
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 5px;
    padding: 10px 12px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .docs { display: flex; flex-direction: column; gap: 3px; }
  .doc-group {
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--muted);
    margin: 12px 0 4px;
  }
  .doc-group:first-child { margin-top: 0; }

  .doc {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .13s ease, border-color .13s ease;
  }
  .doc:hover { background: var(--raised); }
  .doc:has(input:checked) {
    background: var(--stamp-bg);
    border-color: color-mix(in srgb, var(--stamp) 30%, transparent);
  }
  .doc input { accent-color: var(--stamp); width: 15px; height: 15px; margin: 0; flex: none; }
  .doc span { font-size: 13.5px; line-height: 1.3; }
  .doc:has(input:checked) span { color: var(--stamp); font-weight: 600; }
  .doc:focus-within { outline: 2px solid var(--stamp); outline-offset: 1px; }

  .reset {
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .reset:hover { color: var(--ink); }

  .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 7px;
    line-height: 1.45;
  }

  .doc.auto { cursor: default; background: var(--azure-bg); border-color: color-mix(in srgb, var(--azure) 28%, transparent); }
  .doc.auto:hover { background: var(--azure-bg); }
  .doc.auto span { color: var(--azure); font-weight: 600; }
  .doc.auto input { accent-color: var(--azure); }
  .auto-tag {
    display: none;
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--azure);
    border: 1px solid color-mix(in srgb, var(--azure) 40%, transparent);
    border-radius: 2px;
    padding: 1px 4px;
    margin-left: auto;
    flex: none;
  }
  .doc.auto .auto-tag { display: inline-block; }

  .res-line {
    margin: 9px 0 0;
    font-size: 13.5px;
    color: var(--azure);
  }
  .res-line b { font-family: var(--body); font-weight: 600; font-variant-numeric: tabular-nums; }

  .juris {
    margin: 24px 0 30px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--azure) 30%, var(--border));
    border-radius: 12px;
    overflow: hidden;
  }
  .juris > summary {
    padding: 13px 17px;
    cursor: pointer;
    list-style: none;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--azure);
  }
  .juris > summary::-webkit-details-marker { display: none; }
  .juris > summary:focus-visible { outline: 2px solid var(--azure); outline-offset: -2px; }
  .juris ul { margin: 0; padding: 0 17px 15px 34px; }
  .juris li { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }

  
  .region.blocked .rows { border-color: color-mix(in srgb, var(--amber) 32%, var(--border)); }
  .region.blocked .badge { opacity: .55; }
  .region.blocked .who .nm { color: var(--ink-2); }
  
  

  .money {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-2);
    border-radius: 5px;
    background: var(--surface);
    overflow: hidden;
  }
  .money .cur {
    font-family: var(--body);
    font-size: 12px;
    font-weight: 600;
    
    color: var(--muted);
    padding: 0 10px;
    border-right: 1px solid var(--border);
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--raised);
  }
  .money input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--body);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    padding: 10px 12px;
  }
  .money:focus-within { outline: 2px solid var(--stamp); outline-offset: 1px; }
  .money .per {
    font-family: var(--body);
    font-size: 11px;
    color: var(--muted);
    padding-right: 11px;
  }

  .terms {
    display: none;
    grid-template-columns: 1fr auto;
    gap: 5px 7px;
    padding: 7px 9px 9px 33px;
    margin-top: -2px;
  }
  .doc-wrap.on .terms { display: grid; }
  .terms label {
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--muted);
    grid-column: 1 / -1;
    margin-top: 3px;
  }
  .terms label:first-child { margin-top: 0; }
  .terms input[type="date"], .terms select {
    font-family: var(--body);
    font-size: 11.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    width: 100%;
    grid-column: 1 / -1;
    appearance: auto;
    background-image: none;
  }
  .terms .chk {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ink-2);
    cursor: pointer;
    margin-top: 2px;
  }
  .terms .chk input { width: 14px; height: 14px; accent-color: var(--stamp); margin: 0; }
  .terms .left {
    grid-column: 1 / -1;
    font-family: var(--body);
    font-size: 10.5px;
    color: var(--muted);
  }
  .terms .left.bad { color: var(--alert); }

  .verif {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 5px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .verif.checked   { background: var(--stamp-bg); color: var(--stamp); }
  .verif.unchecked { background: var(--amber-bg); color: var(--amber); }
  .verif b { font-weight: 600; }
  .verif a { color: inherit; }

  .advise-more { margin: 10px 0 0; font-size: 14px; } .advise-more a { color: var(--brand-ink); font-weight: 600; }

  .field {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin-top: 10px; font-size: 12.5px; color: var(--ink-2);
  }
  .field-q { font-weight: 600; color: var(--ink); }
  .field button {
    min-height: 32px; padding: 0 12px; border-radius: 100px;
    border: 1px solid var(--border-2); background: var(--surface);
    font: inherit; color: var(--ink-2); cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .12s ease-out;
  }
  .field button:hover { border-color: var(--stamp); color: var(--stamp); }
  .field button:active { transform: scale(.97); }
  .field button:disabled { opacity: .5; cursor: default; }
  .field button:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
  .field a { color: var(--stamp); }
  .field-n { flex-basis: 100%; color: var(--muted); }
  .field-n:empty { display: none; }

  .coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    margin: 0 0 22px;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--amber) 5%, var(--surface));
    font-size: 12.5px;
    color: var(--muted);
  }
  .coverage b {
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--amber);
  }

  .watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 100px;
    padding: 5px 12px;
    cursor: pointer;
  }
  .watch-btn:hover { border-color: var(--stamp); color: var(--stamp); }
  .watch-btn[aria-pressed="true"] {
    background: var(--stamp-bg);
    border-color: color-mix(in srgb, var(--stamp) 40%, transparent);
    color: var(--stamp);
    font-weight: 600;
  }
  .watch-btn:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
  .watch-btn .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--border-2);
  }
  .watch-btn[aria-pressed="true"] .dot { background: var(--stamp); }

  .feed { display: flex; flex-direction: column; gap: 1px; background: var(--border);
          border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
  .item { background: var(--surface); padding: 14px 16px; }
  .item-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 5px;
  }
  .item-date {
    font-family: var(--body); font-size: 10.5px; 
    color: var(--muted); font-variant-numeric: tabular-nums;
  }
  .item-kind {
    font-family: var(--body); font-size: 12.5px;
    padding: 2px 6px; border-radius: 2px;
  }
  .item-kind.corrected { color: var(--amber); background: var(--amber-bg); }
  .item-kind.removed   { color: var(--alert); background: var(--alert-bg); }
  .item-kind.source    { color: var(--azure); background: var(--azure-bg); }
  .item-title { font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; flex: 1 1 220px; }
  .item p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 78ch; }
  .item .src { display: inline-block; margin-top: 8px; font-family: var(--body);
               font-size: 11.5px; color: var(--stamp); }
  .item.watched { background: color-mix(in srgb, var(--stamp) 6%, var(--surface)); }

  .filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
  .filters button {
    font-family: var(--body); font-size: 13px; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 100px; padding: 5px 13px; cursor: pointer;
  }
  .filters button[aria-pressed="true"] {
    background: var(--ink); color: var(--ground); border-color: var(--ink); font-weight: 500;
  }
  .filters button:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }

  .watchlist { display: flex; flex-wrap: wrap; gap: 6px; }
  .watchlist button {
    font-family: var(--body); font-size: 12.5px;
    background: var(--stamp-bg); color: var(--stamp);
    border: 1px solid color-mix(in srgb, var(--stamp) 30%, transparent);
    border-radius: 100px; padding: 4px 10px; cursor: pointer;
  }
  .watchlist button:hover { border-color: var(--alert); color: var(--alert); background: var(--alert-bg); }

  /* ---------- MRZ ---------- */

  .mrz {
    font-family: var(--body);
    font-size: clamp(10px, 1.55vw, 13px);
    
    color: var(--muted);
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 7px 10px;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 18px;
  }

  /* ---------- headline count ---------- */

  .count-block { margin-bottom: 8px; }
  .count {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(56px, 12vw, 96px);
    letter-spacing: -0.045em;
    line-height: .88;
    color: var(--stamp);
    font-variant-numeric: tabular-nums;
    display: block;
  }
  .count-label {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(16px, 2.6vw, 21px);
    letter-spacing: -0.012em;
    margin: 8px 0 0;
  }
  .count-sub {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- next-best credential ---------- */

  .advise {
    margin: 24px 0 30px;
    padding: 15px 17px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .advise h2 {
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 11px;
  }
  .advise-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .advise-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 13.5px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px 13px 5px 10px;
    cursor: pointer;
    font-family: var(--body);
    color: var(--ink);
    transition: border-color .13s ease, background .13s ease;
  }
  .advise-item:hover { border-color: var(--amber); background: var(--amber-bg); }
  .advise-item b {
    font-family: var(--body);
    font-weight: 600;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- region sections ---------- */

  .region { margin-bottom: 28px; }
  
  
  
  

  /* ---------- destination rows ---------- */

  .rows {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .row { border-top: 1px solid var(--border); }
  .row:first-child { border-top: 0; }

  .row > summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 12px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
  }
  .row > summary::-webkit-details-marker { display: none; }
  .row > summary:hover { background: var(--raised); }
  .row > summary:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }

  .flag { font-size: 20px; line-height: 1; }
  .who { min-width: 0; display: block; }
  .who .nm {
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -0.005em;
  }
  .who .code {
    font-family: var(--body);
    font-size: 10.5px;
    color: var(--muted);
    
    margin-left: 7px;
  }
  .who .nm, .who .code { display: inline; }
  .who .via {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 1px;
  }
  .who .via em { font-style: normal; color: var(--ink-2); font-weight: 500; }

  .meta { display: flex; align-items: center; gap: 9px; flex: none; }

  .badge {
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    padding: 3.5px 8px;
    border-radius: 3px;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .badge.free  { color: var(--stamp); background: var(--stamp-bg); border-color: color-mix(in srgb, var(--stamp) 28%, transparent); }
  
  .badge.auth  { color: var(--amber); background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
  

  .days {
    font-family: var(--body);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    min-width: 42px;
    text-align: right;
  }

  .conf {
    font-family: var(--body);
    font-size: 12.5px;
    padding: 2px 5px;
    border-radius: 2px;
    white-space: nowrap;
  }
  .conf.verified { color: var(--stamp); background: var(--stamp-bg); }
  .conf.likely   { color: var(--muted); background: var(--raised); border: 1px solid var(--border); }
  .conf.check    { color: var(--amber); background: var(--amber-bg); }

  @media (max-width: 620px) {
    .row > summary { grid-template-columns: 26px minmax(0, 1fr); }
    .meta { grid-column: 2; margin-top: 2px; }
    .days { min-width: 0; text-align: left; }
  }

  /* expanded detail */
  .detail {
    padding: 2px 14px 15px 52px;
    border-top: 1px dashed var(--border);
    margin-top: -1px;
    background: var(--raised);
  }
  @media (max-width: 620px) { .detail { padding-left: 14px; } }
  .detail ul { margin: 11px 0 0; padding-left: 17px; }
  .detail li { font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
  .detail .note {
    margin: 11px 0 0;
    font-size: 12.5px;
    color: var(--muted);
    font-style: italic;
  }
  .detail .src {
    display: inline-block;
    margin-top: 11px;
    font-family: var(--body);
    font-size: 11.5px;
    color: var(--stamp);
  }
  .detail .baseline {
    font-family: var(--body);
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 11px;
  }

  /* ---------- secondary panels ---------- */

  .panel {
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    margin-top: 14px;
    overflow: hidden;
  }
  .panel > summary {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .panel > summary::-webkit-details-marker { display: none; }
  .panel > summary:hover { background: var(--raised); }
  .panel > summary:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
  .panel > summary .n { font-family: var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
  .panel .inner { padding: 0 15px 14px; }
  .panel .inner p { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
  .plain { display: flex; flex-wrap: wrap; gap: 6px; }
  .plain span {
    font-size: 12.5px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 9px;
    color: var(--ink-2);
  }

  /* ---------- empty ---------- */

  .empty {
    border: 1px dashed var(--border-2);
    border-radius: 7px;
    padding: 30px 22px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    background: var(--surface);
  }

  /* ---------- footer ---------- */

  footer {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
  }
  footer strong { color: var(--ink-2); }
  footer p { margin: 0 0 8px; max-width: 74ch; }

  /* ---------- motion ---------- */

  @keyframes stamp {
    0%   { background-color: var(--stamp-bg); }
    100% { background-color: transparent; }
  }
  .row.fresh > summary { animation: stamp .9s ease-out; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* =======================================================================
     visalist-style layer: passport picker, category legend, and a
     searchable / sortable destination card grid.
     ======================================================================= */

  :root {
    --cat-free-ink:#0F7A52; --cat-free-bg:#E4F5EC; --cat-free-bd:rgba(15,122,82,.30);
    --cat-arr-ink:#12729F;  --cat-arr-bg:#E1F0F8;  --cat-arr-bd:rgba(18,114,159,.30);
    --cat-ev-ink:#3F5BC6;   --cat-ev-bg:#E9ECFB;   --cat-ev-bd:rgba(63,91,198,.28);
    --cat-req-ink:#B06413;  --cat-req-bg:#FAEEDB;  --cat-req-bd:rgba(176,100,19,.28);
    --card-radius:16px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --cat-free-ink:#5FD3A6; --cat-free-bg:#122A22; --cat-free-bd:rgba(95,211,166,.26);
      --cat-arr-ink:#6FC2E6;  --cat-arr-bg:#0F2530;  --cat-arr-bd:rgba(111,194,230,.24);
      --cat-ev-ink:#98A9F2;   --cat-ev-bg:#171C2E;   --cat-ev-bd:rgba(152,169,242,.24);
      --cat-req-ink:#E3A85C;  --cat-req-bg:#2A2013;  --cat-req-bd:rgba(227,168,92,.24);
    }
  }
  :root[data-theme="dark"] {
    --cat-free-ink:#5FD3A6; --cat-free-bg:#122A22; --cat-free-bd:rgba(95,211,166,.26);
    --cat-arr-ink:#6FC2E6;  --cat-arr-bg:#0F2530;  --cat-arr-bd:rgba(111,194,230,.24);
    --cat-ev-ink:#98A9F2;   --cat-ev-bg:#171C2E;   --cat-ev-bd:rgba(152,169,242,.24);
    --cat-req-ink:#E3A85C;  --cat-req-bg:#2A2013;  --cat-req-bd:rgba(227,168,92,.24);
  }

  /* soften the heavy editorial masthead into an airier top */
  

  /* ---------- hero passport / residence pickers ---------- */

  .hero {
    display: flex; flex-wrap: wrap; gap: 16px 22px;
    align-items: flex-end; margin-bottom: 24px;
  }
  .hero-pick { flex: 1 1 240px; min-width: 0; }
  .fieldlabel {
    display: block; font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px;
  }
  .bigselect { position: relative; }
  .bigselect select {
    width: 100%; font-family: var(--display); font-weight: 600;
    font-size: clamp(17px, 2.4vw, 21px); letter-spacing: -0.01em; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px;
    padding: 13px 42px 13px 15px; appearance: none; cursor: pointer; box-shadow: var(--shadow);
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  }
  .bigselect select:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }

  /* ---------- headline count ---------- */

  .headline-row { margin-bottom: 14px; }
  .headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; position: relative; }
  .unlock-pop {
    position: absolute; left: 0; top: -6px;
    font-family: var(--body); font-weight: 700; font-size: 14px;
    color: var(--stamp); background: var(--stamp-bg);
    border: 1px solid color-mix(in srgb, var(--stamp) 30%, transparent);
    padding: 3px 10px; border-radius: 100px; white-space: nowrap;
    pointer-events: none; z-index: 2;
    animation: unlockPop 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
  @keyframes unlockPop {
    0%   { opacity: 0; transform: translateY(4px) scale(.9); }
    16%  { opacity: 1; transform: translateY(-10px) scale(1); }
    68%  { opacity: 1; transform: translateY(-16px) scale(1); }
    100% { opacity: 0; transform: translateY(-30px) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .unlock-pop { animation: none; opacity: 1; transform: translateY(-22px); }
  }

  /* profile sync bar */
  .sync { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; font-size: 13px; }
  .sync-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--azure, #1152a8); cursor: pointer; }
  .sync-link:hover { text-decoration: underline; }
  .sync-sep { color: var(--muted); }
  .sync-panel { flex-basis: 100%; margin-top: 6px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
  .sync-panel[hidden] { display: none; }
  .sync-code { font-family: var(--body); font-size: 15px;  color: var(--ink); }
  .sync-note { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
  .sync-inl input { font: inherit; font-family: var(--body);  width: 8em; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--ink); }
  .docs-note { font-size: 13px; font-weight: 600; color: var(--stamp); }
  .share-box { display: flex; flex-direction: column; gap: 10px; }
  .share-box img { display: block; width: 100%; max-width: 600px; height: auto; border-radius: 10px; }
  .share-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  a.sync-go { text-decoration: none; }
  .sync-go { font: inherit; font-weight: 600; padding: 5px 12px; border: 0; border-radius: 7px; background: var(--azure, #1152a8); color: #fff; cursor: pointer; }
  .sync-err { color: var(--alert); font-size: 12px; }

  /* card detail actions + Border Pass */
  .detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .pass-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--azure, #1152a8); border-radius: 100px; background: transparent; color: var(--azure, #1152a8); cursor: pointer; transition: background .15s ease, transform .12s ease; }
  .pass-btn:hover { background: var(--azure-bg, #e7f0ff); }
  .pass-btn:active { transform: scale(.97); }

  /* isometric passport stacker */
  .ppstack { height: 132px; margin: 16px 0 2px; display: flex; align-items: center; justify-content: center; perspective: 800px; }
  .ppbook { position: relative; width: 116px; height: 152px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg) scale(.9); transition: transform .55s cubic-bezier(0.32, 0.72, 0, 1); }
  .ppstack:hover .ppbook { transform: rotateX(50deg) rotateZ(-34deg) scale(.96); }
  .ppcover { position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(150deg, #23496f 0%, #0e2540 100%); box-shadow: 0 26px 34px -14px rgba(8, 22, 45, .55), inset 0 0 0 1px rgba(255, 255, 255, .05); }
  .ppcover .emblem { position: absolute; left: 50%; top: 40%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid rgba(214, 182, 122, .62); border-radius: 50%; }
  .ppcover .emblem::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(214, 182, 122, .48); border-radius: 50%; }
  .ppcover .word { position: absolute; left: 0; right: 0; bottom: 17px; text-align: center; color: rgba(214, 182, 122, .72); font-family: var(--body); font-size: 8px;  }
  .ppfoils { position: absolute; inset: 0; transform-style: preserve-3d; }
  .foil {
    position: absolute; left: 10px; right: 10px; top: 15px; height: 21px;
    display: flex; align-items: center; padding: 0 8px;
    font-family: var(--body); font-size: 8.5px; font-weight: 700; letter-spacing: .01em; color: #55471f;
    border-radius: 4px; background: linear-gradient(120deg, #f2e5bb, #d9c68b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transform: translateZ(calc((var(--i) + 1) * 7px)) translateY(calc(var(--i) * 15px));
    animation: foilIn .5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
    animation-delay: calc(var(--i) * 60ms);
  }
  @keyframes foilIn {
    from { opacity: 0; transform: translateZ(2px) translateY(calc(var(--i) * 15px - 7px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ppbook { transition: none; } .foil { animation: none; }
  }

  /* validity depreciation watch */
  .vwatch { margin: 4px 0 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); border-radius: 14px; background: var(--amber-bg); }
  .vwatch[hidden] { display: none; }
  .vw-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--amber); margin-bottom: 10px; }
  
  .vw-sub { font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-2); }
  .vw-block + .vw-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--amber) 22%, transparent); }
  .vw-lead { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
  .vw-lead b { color: var(--amber); }
  .vw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .vw-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 9px; border-radius: 100px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); }
  .vw-chip em { font-family: var(--body); font-style: normal; font-size: 10.5px; color: var(--muted); }
  .vw-chip.gone { border-color: color-mix(in srgb, var(--alert) 40%, transparent); background: var(--alert-bg); color: var(--alert); }
  .vw-chip.gone em { color: var(--alert); }

  /* app email capture */
  .app-capture { margin: 26px 0 8px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
  .app-capture[hidden] { display: none; }
  .ac-copy { flex: 1; min-width: 230px; }
  .ac-copy strong { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 3px; }
  .ac-copy span { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
  .ac-row { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
  .ac-row input[type=email] { font: inherit; font-size: 14px; padding: 11px 13px; border: 1px solid var(--border-2, var(--border)); border-radius: 10px; background: var(--bg); color: var(--ink); min-width: 200px; }
  .ac-row input[type=email]:focus { outline: 2px solid var(--azure, #1152a8); outline-offset: -1px; }
  #acCompany { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .ac-msg { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
  .ac-msg.err { color: var(--alert); }
  .ac-msg.ok { color: var(--stamp); font-weight: 600; }
  .ac-consent { flex-basis: 100%; display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
  .ac-consent input { margin-top: 2px; flex: 0 0 auto; }
  .ac-consent a { color: var(--azure, #1152a8); font-weight: 600; }
  .wait-consent { display: flex; align-items: flex-start; gap: 8px; justify-content: center; max-width: 440px; margin: 12px auto 0; font-size: 12.5px; color: rgba(255, 255, 255, .82); line-height: 1.5; text-align: left; }
  .wait-consent input { margin-top: 2px; flex: 0 0 auto; }
  .wait-consent a { color: #fff; text-decoration: underline; }

  /* sticky mobile CTA */
  
  
  

  .headline .count {
    font-family: var(--display); font-weight: 700; font-size: clamp(40px, 8vw, 60px);
    letter-spacing: -0.04em; line-height: .9; color: var(--stamp);
    font-variant-numeric: tabular-nums;
  }
  .headline-label {
    font-family: var(--display); font-weight: 600; font-size: clamp(15px, 2.4vw, 19px);
    letter-spacing: -0.01em; color: var(--ink);
  }

  /* ---------- category legend pills (also the filter) ---------- */

  .legend-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
  .pill {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-family: var(--body); font-size: 13px; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: 100px;
    padding: 5px 14px 5px 6px;
  }
  .pill:hover { border-color: var(--border-2); }
  .pill .n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px;
    font-family: var(--body); font-weight: 600; font-size: 12px;
    color: var(--surface); background: var(--muted); font-variant-numeric: tabular-nums;
  }
  .pill[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
  .pill:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
  .pill.all .n { background: var(--ink-2); }
  .pill.unlocked .n { background: var(--stamp); }
  .pill.free .n { background: var(--cat-free-ink); }
  .pill.arrival .n { background: var(--cat-arr-ink); }
  .pill.evisa .n { background: var(--cat-ev-ink); }
  .pill.transit .n { background: var(--azure); }
  .pill.req .n { background: var(--cat-req-ink); }
  .pill.transit[aria-pressed="true"] { border-color: var(--azure); box-shadow: 0 0 0 1px var(--azure) inset; }
  .pill.unlocked[aria-pressed="true"] { border-color: var(--stamp); box-shadow: 0 0 0 1px var(--stamp) inset; }
  .pill.free[aria-pressed="true"]    { border-color: var(--cat-free-ink); box-shadow: 0 0 0 1px var(--cat-free-ink) inset; }
  .pill.arrival[aria-pressed="true"] { border-color: var(--cat-arr-ink);  box-shadow: 0 0 0 1px var(--cat-arr-ink) inset; }
  .pill.evisa[aria-pressed="true"]   { border-color: var(--cat-ev-ink);   box-shadow: 0 0 0 1px var(--cat-ev-ink) inset; }
  .pill.req[aria-pressed="true"]     { border-color: var(--cat-req-ink);  box-shadow: 0 0 0 1px var(--cat-req-ink) inset; }

  /* ---------- "visas & permits you hold" collapsible ---------- */

  .addbar {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 22px; overflow: hidden; box-shadow: var(--shadow);
  }
  .addbar > summary {
    list-style: none; cursor: pointer; padding: 13px 16px;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .addbar > summary::-webkit-details-marker { display: none; }
  .addbar > summary::before {
    content: "+"; font-family: var(--body); font-weight: 700; color: var(--stamp);
    font-size: 16px; line-height: 1;
  }
  .addbar[open] > summary::before { content: "\2212"; }
  .addbar > summary:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
  .addbar-title { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
  .addbar-hint { font-size: 12.5px; color: var(--muted); }
  .addbar-body {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px; padding: 6px 16px 18px; border-top: 1px solid var(--border);
  }
  .addcol { min-width: 0; }
  .addcol-docs { grid-column: 1 / -1; }
  .addcol-docs .docs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 18px; align-items: start;
  }
  .addcol-docs .doc-group { grid-column: 1 / -1; }
  .dateinput {
    width: 100%; font-family: var(--body); font-size: 14px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 11px;
  }
  .dateinput:focus-visible { outline: 2px solid var(--stamp); outline-offset: 0; }

  /* ---------- search + sort controls ---------- */

  .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
  .search { flex: 1 1 240px; min-width: 0; position: relative; }
  .search::before {
    content: "\2315"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 17px; pointer-events: none;
  }
  .search input {
    width: 100%; font-family: var(--body); font-size: 14.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 100px;
    padding: 10px 16px 10px 40px;
  }
  .search input:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
  .sortselect { width: auto; min-width: 178px; border-radius: 100px; padding-block: 10px; }

  /* ---------- destination card grid ---------- */

  .cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; }

  .card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius);
    overflow: hidden; box-shadow: var(--shadow); border-top: 3px solid var(--border-2);
  }
  .card.free    { border-top-color: var(--cat-free-ink); }
  .card.arrival { border-top-color: var(--cat-arr-ink); }
  .card.evisa   { border-top-color: var(--cat-ev-ink); }
  .card.transit { border-top-color: var(--azure); }
  .card.req     { border-top-color: var(--cat-req-ink); }
  .card.is-unlocked { border-top-color: var(--stamp); }

  .card > summary { list-style: none; }
  .card > summary::-webkit-details-marker { display: none; }
  .card-face { display: block; cursor: pointer; padding: 14px 15px 15px; }
  .card-face:hover { background: var(--raised); }
  .card > summary:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }

  
  .card-flag { font-size: 30px; line-height: 1; }

  .cbadge {
    font-family: var(--body); font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 100px; white-space: nowrap;
    border: 1px solid transparent;
  }
  .cbadge.free    { color: var(--cat-free-ink); background: var(--cat-free-bg); border-color: var(--cat-free-bd); }
  .cbadge.arrival { color: var(--cat-arr-ink);  background: var(--cat-arr-bg);  border-color: var(--cat-arr-bd); }
  .cbadge.evisa   { color: var(--cat-ev-ink);   background: var(--cat-ev-bg);   border-color: var(--cat-ev-bd); }
  .cbadge.transit { color: var(--azure);        background: var(--azure-bg);    border-color: color-mix(in srgb, var(--azure) 30%, transparent); }
  .cbadge.req     { color: var(--cat-req-ink);  background: var(--cat-req-bg);  border-color: var(--cat-req-bd); }

  .card-name { font-family: var(--display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
  .card-region { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .card-days { font-family: var(--body); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .card-conf {
    font-family: var(--body); font-size: 12.5px;
    padding: 2px 7px; border-radius: 100px; margin-left: auto;
  }
  .card-conf.verified { color: var(--cat-free-ink); background: var(--cat-free-bg); }
  .card-conf.likely   { color: var(--muted); background: var(--raised); border: 1px solid var(--border); }
  .card-conf.check    { color: var(--cat-req-ink); background: var(--cat-req-bg); }

  .card .via { font-size: 12.5px; margin-top: 10px; line-height: 1.4; }
  .card .via.unlk { color: var(--stamp); font-weight: 500; }
  .card .via.open { color: var(--muted); }
  .card .via.warn { color: var(--amber); }
  .card .via.lock { color: var(--muted); }

  .card-detail {
    border-top: 1px dashed var(--border); background: var(--raised); padding: 12px 15px 15px;
  }
  .card-detail ul { margin: 0; padding-left: 16px; }
  .card-detail li { font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }
  .card-detail .note { margin: 10px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
  .card-detail .src { display: inline-block; margin-top: 10px; font-family: var(--body); font-size: 11px; color: var(--stamp); }
  .card-detail .baseline {
    font-family: var(--body); font-size: 12.5px; color: var(--muted); margin-top: 10px;
  }

  /* =======================================================================
     Brand layer — a clean, editorial identity of Visafar's own: a warm
     paper canvas, a high-contrast serif display face, and passport green
     as the signature accent.
     ======================================================================= */

  body { font-optical-sizing: auto; }

  
  
  .wordmark {
    font-family: var(--display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--stamp);
    line-height: 1;
  }
  
  
  

  /* keep the tab bar a clean sans nav despite the serif display face */
  .tabs button { font-family: var(--body); font-weight: 600; letter-spacing: 0; }

  /* Fraunces reads best a shade lighter at display sizes */
  h1 { font-weight: 500; }
  .count, .headline .count { font-weight: 600; letter-spacing: -0.03em; }
  .count-label, .headline-label, .card-name, .fact dd { font-weight: 600; }

  /* =======================================================================
     LANDING LAYER — marketing shell (nav, hero, proof, features, footer)
     wrapped around the working tool. Visafar's own identity.
     ======================================================================= */

  :root {
    --brand:        #15644C;
    --brand-press:  #0F4D3A;
    --brand-deep:   #0E3B2E;   /* drenched green band */
    --brand-deep-2: #0A2E24;
    --on-deep:      #EAF3EE;
    --on-deep-mut:  #A9C6BA;
    --shadow-lg:    0 20px 48px -26px rgba(14,40,32,.42);
    --z-nav: 100;
  }
  :root:not([data-theme="light"]) { }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --brand:        #35B78E;
      --brand-press:  #2CA37D;
      --brand-deep:   #0C2A22;
      --brand-deep-2: #081F19;
      --on-deep:      #E7F1EC;
      --on-deep-mut:  #8FB3A6;
      --shadow-lg:    0 24px 54px -28px rgba(0,0,0,.75);
    }
  }
  :root[data-theme="dark"] {
    --brand:        #35B78E;
    --brand-press:  #2CA37D;
    --brand-deep:   #0C2A22;
    --brand-deep-2: #081F19;
    --on-deep:      #E7F1EC;
    --on-deep-mut:  #8FB3A6;
    --shadow-lg:    0 24px 54px -28px rgba(0,0,0,.75);
  }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  .container { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1;
    border-radius: 11px; padding: 12px 20px; cursor: pointer; text-decoration: none;
    border: 1.5px solid transparent; white-space: nowrap;
    transition: background .18s cubic-bezier(.2,.8,.2,1), border-color .18s, color .18s, transform .18s;
  }
  .btn-solid { background: var(--brand); color: #fff; }
  .btn-solid:hover { background: var(--brand-press); transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-lg { font-size: 16px; padding: 15px 26px; border-radius: 12px; }
  .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

  /* ---------- sticky nav ---------- */
  .site-nav {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--ground);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .nav-inner {
    max-width: 1160px; margin: 0 auto; padding: 13px 24px;
    display: flex; align-items: center; gap: 20px;
  }
  .nav-brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none; margin-right: auto;
  }
  .nav-brand .mark { width: 26px; height: 26px; display: block; flex: none; }
  .nav-links { display: flex; gap: 4px; }
  .nav-links a {
    font-family: var(--body); font-size: 14.5px; font-weight: 500; color: var(--ink-2);
    text-decoration: none; padding: 8px 12px; border-radius: 8px;
  }
  .nav-links a:hover { color: var(--ink); background: var(--raised); }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  
  @media (max-width: 720px) { .nav-links { display: none; }  }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; }
  
  

  
  
  
  
  
  

  /* hero product mock */
  

  /* ---------- proof band (drenched green) ---------- */
  .proof { background: var(--brand-deep); color: var(--on-deep); }
  
  
  
  
  
  

  /* ---------- features ---------- */
  .features { padding: clamp(56px, 8vw, 100px) 0; }
  
  
  .section-h2 {
    font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4.4vw, 46px);
    letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); margin: 0 0 16px; text-wrap: balance;
  }
  .section-lead { font-family: var(--body); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }

  
  
  
  
  
  
  
  
  
  

  /* mini media: flip chips (unlock) */
  
  
  
  
  

  /* mini media: timeline bars (day counter) */
  .bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
  .bars i { flex: 1; background: var(--border); border-radius: 2px; height: 30%; }
  .bars i.on { background: var(--brand); }
  
  

  /* mini media: changelog (alerts) */
  
  
  
  
  
  

  /* ---------- tool section ---------- */
  #tool, #how, #top { scroll-margin-top: 74px; }
  .tool-head { padding-top: clamp(20px, 4vw, 40px); margin-bottom: 22px; }
  .tool-head .section-h2 { margin-bottom: 12px; }
  

  /* the tool sits on a subtly distinct surface so it reads as "the app" */
  #tool { background: var(--raised); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

  /* ---------- footer ---------- */
  .site-footer { background: var(--brand-deep-2); color: var(--on-deep); }
  .footer-inner {
    max-width: 1160px; margin: 0 auto; padding: clamp(48px, 6vw, 72px) 24px 32px;
    display: grid; grid-template-columns: 1.4fr; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 40px 32px;
  }
  @media (max-width: 960px) { .footer-inner { grid-template-columns: 1fr 1fr; grid-auto-flow: row; } .footer-brand { grid-column: 1 / -1; } }
  @media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; gap: 32px; } }
  .footer-brand .wordmark { color: #fff; font-size: 24px; }
  .footer-tag { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--on-deep-mut); max-width: 32ch; }
  .footer-col h2 {
    line-height: 1.4;
    font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--on-deep-mut); margin: 0 0 14px;
  }
  .footer-col a, .footer-col button {
    display: block; width: 100%; font-family: var(--body); font-weight: 500; font-size: 14.5px;
    color: var(--on-deep); text-decoration: none; padding: 5px 0; cursor: pointer;
    background: none; border: 0; text-align: left;
  }
  .footer-col a:hover, .footer-col button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .footer-base {
    max-width: 1160px; margin: 0 auto; padding: 20px 24px 32px;
    border-top: 1px solid color-mix(in srgb, var(--on-deep) 16%, transparent);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
    font-size: 12.5px; color: var(--on-deep-mut); line-height: 1.5;
  }
  .footer-base p { margin: 0; max-width: 70ch; }

  /* ---------- remove banned side-stripe accents from earlier layers ---------- */
  .advise { border: 1px solid var(--border); border-left-width: 1px; border-radius: 12px; }
  .juris { border: 1px solid var(--border); border-left-width: 1px; border-radius: 10px; }
  .item.watched { border-left: 0; padding-left: 16px; background: var(--stamp-bg); }
  .coverage { border: 1px solid var(--border); border-left-width: 1px; border-radius: 10px; }

  /* =======================================================================
     STANDALONE LANDING — extra sections (showcase, audience, FAQ, CTA band)
     ======================================================================= */

  .lp-section { padding: clamp(56px, 8vw, 104px) 0; }
  .lp-section.alt { background: var(--raised); border-block: 1px solid var(--border); }

  /* ---------- product showcase ---------- */
  
  
  

  
  
  
  
  
  
  

  /* ---------- audience ---------- */
  
  
  
  
  
  

  /* ---------- FAQ ---------- */
  .faq-wrap { max-width: 780px; margin: 0 auto; }
  .faq {
    border-top: 1px solid var(--border);
  }
  .faq:last-child { border-bottom: 1px solid var(--border); }
  .faq > summary {
    list-style: none; cursor: pointer; padding: 22px 44px 22px 4px; position: relative;
    font-family: var(--display); font-weight: 500; font-size: clamp(17px, 2vw, 21px);
    letter-spacing: -0.01em; color: var(--ink);
  }
  .faq > summary::-webkit-details-marker { display: none; }
  .faq > summary::after {
    content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-family: var(--body); font-size: 22px; font-weight: 400; color: var(--brand); line-height: 1;
    transition: transform .2s ease;
  }
  .faq[open] > summary::after { content: "\2212"; }
  .faq > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
  .faq-body { padding: 0 44px 24px 4px; }
  .faq-body p { font-family: var(--body); font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 68ch; }

  /* ---------- final CTA band ---------- */
  .cta-band { background: var(--brand-deep); color: var(--on-deep); }
  .cta-inner {
    max-width: 1160px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 24px; text-align: center;
  }
  .cta-band h2 {
    font-family: var(--display); font-weight: 500; font-size: clamp(30px, 5vw, 54px);
    letter-spacing: -0.025em; line-height: 1.04; color: var(--on-deep); margin: 0 auto 22px; max-width: 18ch;
    text-wrap: balance;
  }
  .cta-band p { font-family: var(--body); font-size: clamp(15px, 1.8vw, 18px); color: var(--on-deep-mut); margin: 0 auto 34px; max-width: 52ch; line-height: 1.6; }
  .btn-onDeep { background: #fff; color: var(--brand-deep); }
  .btn-onDeep:hover { background: var(--on-deep); }

  /* section heading helper used on landing sub-sections */
  .lp-head { max-width: 660px; margin: 0 0 clamp(36px, 5vw, 56px); }
  .lp-head.center { margin-inline: auto; text-align: center; }

/* =======================================================================
   SKY REBRAND — white + sky-blue palette, a grotesque display face,
   and orchestrated motion. Appended last so it overrides earlier tokens.
   ======================================================================= */

:root {
  --display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ground:   #FFFFFF;
  --surface:  #FFFFFF;
  --raised:   #EEF6FD;
  --border:   #DCE7F0;
  --border-2: #C4D5E4;
  --ink:      #0C2436;
  --ink-2:    #334A5E;
  --muted:    #556879;
  --stamp:    #0EA5E9;
  --stamp-bg: #E2F3FD;
  --amber:    #B45309;
  --amber-bg: #FBEED6;
  --azure:    #5B7A94;
  --azure-bg: #EAF1F7;
  --alert:    #DC2626;
  --alert-bg: #FCE8E6;
  --shadow:   0 1px 2px rgba(15,42,70,.05), 0 10px 26px -16px rgba(15,42,70,.16);

  --brand:        #0EA5E9;
  --brand-press:  #0284C7;
  --brand-deep:   #0C4A6E;
  --brand-deep-2: #082F49;
  --on-deep:      #E8F4FB;
  --on-deep-mut:  #A7C7DC;
  --shadow-lg:    0 24px 54px -26px rgba(12,52,82,.30);

  --cat-free-ink:#0284C7; --cat-free-bg:#E1F1FC; --cat-free-bd:rgba(2,132,199,.28);
  --cat-arr-ink:#0D9488;  --cat-arr-bg:#D6F3EF;  --cat-arr-bd:rgba(13,148,136,.28);
  --cat-ev-ink:#6366F1;   --cat-ev-bg:#E8EAFD;   --cat-ev-bd:rgba(99,102,241,.26);
  --cat-req-ink:#C2610C;  --cat-req-bg:#FBEBD5;  --cat-req-bd:rgba(194,97,12,.28);

  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0A1420; --surface:#0F1D2C; --raised:#142433;
    --border:#233445; --border-2:#35495C;
    --ink:#E7F0F8; --ink-2:#C2D2DF; --muted:#8AA0B4;
    --stamp:#38BDF8; --stamp-bg:#0C2A3F;
    --amber:#E0A94A; --amber-bg:#2A2113;
    --azure:#7FA8C4; --azure-bg:#14232E;
    --alert:#F0857A; --alert-bg:#2E1512;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.7);
    --brand:#38BDF8; --brand-press:#0EA5E9; --brand-deep:#0C2E45; --brand-deep-2:#08202F;
    --on-deep:#E3F1FB; --on-deep-mut:#8FB6D2; --shadow-lg:0 24px 54px -28px rgba(0,0,0,.75);
    --cat-free-ink:#56B8EE; --cat-free-bg:#0C2A3F; --cat-free-bd:rgba(86,184,238,.26);
    --cat-arr-ink:#4FCFC0;  --cat-arr-bg:#0E2A28;  --cat-arr-bd:rgba(79,207,192,.24);
    --cat-ev-ink:#9AA6F5;   --cat-ev-bg:#171B2E;   --cat-ev-bd:rgba(154,166,245,.24);
    --cat-req-ink:#E0A94A;  --cat-req-bg:#2A2013;  --cat-req-bd:rgba(224,169,74,.24);
  }
}
:root[data-theme="dark"] {
  --ground:#0A1420; --surface:#0F1D2C; --raised:#142433;
  --border:#233445; --border-2:#35495C;
  --ink:#E7F0F8; --ink-2:#C2D2DF; --muted:#8AA0B4;
  --stamp:#38BDF8; --stamp-bg:#0C2A3F;
  --amber:#E0A94A; --amber-bg:#2A2113;
  --azure:#7FA8C4; --azure-bg:#14232E;
  --alert:#F0857A; --alert-bg:#2E1512;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.7);
  --brand:#38BDF8; --brand-press:#0EA5E9; --brand-deep:#0C2E45; --brand-deep-2:#08202F;
  --on-deep:#E3F1FB; --on-deep-mut:#8FB6D2; --shadow-lg:0 24px 54px -28px rgba(0,0,0,.75);
  --cat-free-ink:#56B8EE; --cat-free-bg:#0C2A3F; --cat-free-bd:rgba(86,184,238,.26);
  --cat-arr-ink:#4FCFC0;  --cat-arr-bg:#0E2A28;  --cat-arr-bd:rgba(79,207,192,.24);
  --cat-ev-ink:#9AA6F5;   --cat-ev-bg:#171B2E;   --cat-ev-bd:rgba(154,166,245,.24);
  --cat-req-ink:#E0A94A;  --cat-req-bg:#2A2013;  --cat-req-bd:rgba(224,169,74,.24);
}

/* Grotesque display wants tracking a touch looser than the old serif. */
 .section-h2, .cta-band h2{ letter-spacing: -0.02em; }
.count, .headline .count{ letter-spacing: -0.03em; }

/* ---------- interaction polish (Emil) ---------- */
.btn {
  transition: background .18s var(--ease-out), border-color .18s, color .18s,
              transform .16s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- nav on scroll ---------- */
.site-nav { transition: box-shadow .25s var(--ease-out), background .25s var(--ease-out); }

/* ---------- hero aurora ---------- */

/* ---------- scroll reveals (no-flash: hidden only under .js-anim) ---------- */

/* ---------- auto-cycling unlock demo (feature 01) ---------- */

/* default (no motion / no JS): show the payoff state */

/* the mock's card rows get a gentle stagger-in once the mock reveals */

/* ---------- hero entrance: CSS-driven (not IO-gated) so it never sits blank ---------- */

/* ---------- country photo on destination cards ---------- */
.card > summary.card-face { padding: 0; display: block; }
.card .ph {
  position: relative; height: 120px; overflow: hidden;
  background: linear-gradient(135deg, var(--stamp-bg), var(--raised));
}
.card-photo { display: block; width: 100%; height: 120px; object-fit: cover; }
.ph-badge { position: absolute; top: 9px; right: 9px; box-shadow: 0 2px 8px rgba(8,30,50,.30); }
.card .pad { padding: 12px 15px 15px; }
.card .pad .card-name { display: flex; align-items: baseline; gap: 7px; }
.card .pad .card-name .card-flag { font-size: 16px; line-height: 1; flex: none; }
.lead-note { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }

.card > .card-face { padding: 0; }

/* =======================================================================
   NOMU-INSPIRED SKIN — warm cream, near-black ink, coral accent, a floating
   pill nav, a faint grid, rounded-full buttons, and a "live" headline.
   Original design; matches nomu.store's colour scheme & motion feel only.
   Appended last so it wins.
   ======================================================================= */

:root {
  --display: "Inter", system-ui, -apple-system, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wordmark:"Baloo 2", "Inter", system-ui, sans-serif;

  --ground:   #FFF9F6;
  --surface:  #FFFFFF;
  --raised:   #FBF2EB;
  --border:   #EFE3D8;
  --border-2: #E2D3C5;
  --ink:      #0F151D;
  --ink-2:    #3B4048;
  --muted:    #6C635A;
  --stamp:    #FF7448;
  --stamp-bg: #FFEDE4;
  --amber:    #B4741A;
  --amber-bg: #F7ECD6;
  --azure:    #7A7168;
  --azure-bg: #F0EAE3;
  --alert:    #D64527;
  --alert-bg: #FBE7E0;
  --shadow:   0 1px 2px rgba(30,18,10,.05), 0 12px 28px -16px rgba(40,25,15,.16);

  --brand:        #FF7448;
  --brand-press:  #F0602F;
  --brand-deep:   #16181D;
  --brand-deep-2: #0F1115;
  --on-deep:      #FFF6F1;
  --on-deep-mut:  #B7ADA4;
  --shadow-lg:    0 26px 56px -26px rgba(30,18,10,.30);

  --cat-free-ink:#E2571F; --cat-free-bg:#FFEADF; --cat-free-bd:rgba(226,87,31,.28);
  --cat-arr-ink:#B5791A;  --cat-arr-bg:#F8ECD3;  --cat-arr-bd:rgba(181,121,26,.28);
  --cat-ev-ink:#7E5AA6;   --cat-ev-bg:#F0E9F6;   --cat-ev-bd:rgba(126,90,166,.26);
  --cat-req-ink:#514A42;  --cat-req-bg:#EEE8E1;  --cat-req-bd:rgba(81,74,66,.26);

  --grid: rgba(15,21,29,.045);

  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#14110E; --surface:#1B1713; --raised:#221D18; --border:#302921; --border-2:#443A30;
    --ink:#F5EEE7; --ink-2:#D8CEC4; --muted:#A2968A;
    --stamp:#FF8A63; --stamp-bg:#2A1B12; --amber:#E0B15E; --amber-bg:#2A2113;
    --azure:#B6A99C; --azure-bg:#241F19; --alert:#F0876B; --alert-bg:#2E1712;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.7);
    --brand:#FF8A63; --brand-press:#FF7448; --brand-deep:#0F0D0A; --brand-deep-2:#0A0806;
    --on-deep:#F5EEE7; --on-deep-mut:#B7ADA2; --shadow-lg:0 26px 56px -26px rgba(0,0,0,.75);
    --cat-free-ink:#FF9166; --cat-free-bg:#2A1B12; --cat-free-bd:rgba(255,145,102,.26);
    --cat-arr-ink:#E0B15E;  --cat-arr-bg:#2A2113;  --cat-arr-bd:rgba(224,177,94,.24);
    --cat-ev-ink:#B49BD8;   --cat-ev-bg:#211B2C;   --cat-ev-bd:rgba(180,155,216,.24);
    --cat-req-ink:#C8BDB0;  --cat-req-bg:#241F19;  --cat-req-bd:rgba(200,189,176,.24);
    --grid: rgba(255,245,235,.045);
  }
}
:root[data-theme="dark"] {
  --ground:#14110E; --surface:#1B1713; --raised:#221D18; --border:#302921; --border-2:#443A30;
  --ink:#F5EEE7; --ink-2:#D8CEC4; --muted:#A2968A;
  --stamp:#FF8A63; --stamp-bg:#2A1B12; --amber:#E0B15E; --amber-bg:#2A2113;
  --azure:#B6A99C; --azure-bg:#241F19; --alert:#F0876B; --alert-bg:#2E1712;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.7);
  --brand:#FF8A63; --brand-press:#FF7448; --brand-deep:#0F0D0A; --brand-deep-2:#0A0806;
  --on-deep:#F5EEE7; --on-deep-mut:#B7ADA2; --shadow-lg:0 26px 56px -26px rgba(0,0,0,.75);
  --cat-free-ink:#FF9166; --cat-free-bg:#2A1B12; --cat-free-bd:rgba(255,145,102,.26);
  --cat-arr-ink:#E0B15E;  --cat-arr-bg:#2A2113;  --cat-arr-bd:rgba(224,177,94,.24);
  --cat-ev-ink:#B49BD8;   --cat-ev-bg:#211B2C;   --cat-ev-bd:rgba(180,155,216,.24);
  --cat-req-ink:#C8BDB0;  --cat-req-bg:#241F19;  --cat-req-bd:rgba(200,189,176,.24);
  --grid: rgba(255,245,235,.045);
}

body { position: relative; }

/* wordmark: playful rounded face */
.nav-brand, .wordmark { font-family: var(--wordmark); font-weight: 700; letter-spacing: -0.01em; }

/* headings: Inter, heavier for punch */
 .section-h2, .cta-band h2, .faq > summary { font-weight: 700; letter-spacing: -0.02em; }

.count, .headline .count{ font-weight: 800; letter-spacing: -0.03em; }
.card-name { font-weight: 700; }

/* ---------- rounded-full buttons, coral ---------- */
.btn { border-radius: 100px; }
.btn-lg { border-radius: 100px; }
.btn-solid { background: var(--brand); color: #fff; }
.btn-solid:hover { background: var(--brand-press); }

.pill, .cbadge, .card-conf, .watch-btn, .filters button, .advise-item { border-radius: 100px; }

/* selects & search stay soft-rounded to echo the pills */
.bigselect select { border-radius: 16px; }
.sortselect { border-radius: 100px; }
.search input { border-radius: 100px; }
.addbar, .juris, .advise, .card, .cardgrid > .card { border-radius: 18px; }

/* ---------- LIVE headline badge + refresh motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  
  
  .pill.bump .n { animation: liveBump .5s var(--ease-out); }
  .pill.bump { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
}
@keyframes liveBump { 0% { transform: scale(1); } 42% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* the big count gets a soft coral under-glow while "live" */
.headline .count { color: var(--brand); }

/* =======================================================================
   WHITE CANVAS + ONE SIGNATURE TYPEFACE (Hanken Grotesk) across the site.
   Appended last so it wins over the nomu skin.
   ======================================================================= */
:root {
  --display:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --body:     "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --wordmark: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:     "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --ground:   #FFFFFF;
  --surface:  #FFFFFF;
  --raised:   #F5F6F7;
  --border:   #E9E9EC;
  --border-2: #D8D9DD;
  --muted:    #63666B;
  --grid:     rgba(15,21,29,.04);
}
/* the wordmark carries the family's personality at a heavier weight */
.nav-brand, .wordmark { font-weight: 800; letter-spacing: -0.02em; }
/* mono labels lose the typewriter look but keep their tracked-caps role */
 .fieldlabel, .legend,
.cbadge, .card-conf, .item-kind,
.doc-group, .item-date{ letter-spacing: .1em; }

/* =======================================================================
   PRICING PAGE
   ======================================================================= */
.price-hero { text-align: center; padding: clamp(40px,7vw,80px) 0 0; }
.price-hero .section-h2, .price-hero .section-lead { margin-inline: auto; }
.price-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 13px; color: var(--muted); background: var(--raised);
  border: 1px solid var(--border); border-radius: 100px; padding: 6px 14px;
}

.toggle-wrap { display: flex; justify-content: center; margin: 30px 0 4px; }
.toggle {
  display: inline-flex; gap: 4px; padding: 4px; background: var(--raised);
  border: 1px solid var(--border); border-radius: 100px;
}
.toggle button {
  font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--muted);
  background: none; border: 0; border-radius: 100px; padding: 8px 18px; cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.toggle .save { color: var(--brand); font-size: 11px; font-weight: 700; margin-left: 6px; }

.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px; align-items: stretch; margin: 34px 0 0;
}
.plan {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px 24px;
  box-shadow: var(--shadow); position: relative;
}
.plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.plan-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-family: var(--body); font-size: 12.5px;
  font-weight: 600; padding: 4px 13px; border-radius: 100px;
}
.plan-name { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); }
.plan-tag { font-size: 13.5px; color: var(--muted); margin: 5px 0 18px; min-height: 38px; line-height: 1.4; }
.plan-price { display: flex; align-items: baseline; gap: 3px; }
.plan-price .pre { font-size: 15px; color: var(--muted); align-self: center; margin-right: 3px; }
.plan-price .amt { font-family: var(--display); font-weight: 800; font-size: clamp(34px,5vw,44px); letter-spacing: -0.03em; color: var(--ink); }
.plan-price .per { font-size: 14px; color: var(--muted); }
.plan-billed { font-size: 12.5px; color: var(--brand); margin-top: 7px; min-height: 18px; font-weight: 500; }
.plan .btn { margin: 20px 0; justify-content: center; width: 100%; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.plan-feats li::before { content: "✓"; color: var(--brand); font-weight: 800; flex: none; }
.plan-feats li.off { color: var(--muted); }
.plan-feats li.off::before { content: "–"; color: var(--border-2); }

.cmp { margin-top: clamp(56px,8vw,88px); overflow-x: auto; }
.cmp h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px,3vw,30px); letter-spacing: -0.02em; margin: 0 0 22px; color: var(--ink); }
.cmp table { width: 100%; border-collapse: collapse; min-width: 660px; }
.cmp th, .cmp td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.cmp thead th { text-align: center; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 15px; }
.cmp thead th:first-child { text-align: left; }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--ink-2); }
.cmp td { text-align: center; color: var(--ink-2); }
.cmp td.yes { color: var(--brand-ink); font-weight: 800; }
.cmp tr.grp td, .cmp tr.grp th {
  background: var(--raised); font-family: var(--body); font-size: 12.5px; color: var(--muted); text-align: left;
}

/* ---------- waitlist form (on the deep CTA band) ---------- */
.wait-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.wait-form input[type="email"] {
  flex: 1; min-width: 200px; font-family: var(--body); font-size: 15px; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.30);
  border-radius: 100px; padding: 14px 20px;
}
.wait-form input[type="email"]::placeholder { color: var(--on-deep-mut); }
.wait-form input[type="email"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wait-form #waitHp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wait-form .btn-onDeep { flex: none; }
.wait-msg { margin: 16px auto 0; font-size: 14.5px; min-height: 20px; }
.wait-msg.ok { color: #fff; font-weight: 600; }
.wait-msg.err { color: #FFD9CE; }
.wait-alt { margin: 18px auto 0; font-size: 13.5px; color: var(--on-deep-mut); }
.wait-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .wait-form { flex-direction: column; } .wait-form .btn-onDeep { width: 100%; justify-content: center; } }

/* =======================================================================
   ADMIN PAGE
   ======================================================================= */
.admin-wrap { max-width: 980px; margin: 0 auto; padding: clamp(28px,6vw,64px) 20px; }
.admin-brand { display: flex; align-items: center; gap: 9px; font-size: 20px; }
.admin-brand .wordmark { font-weight: 800; }
.admin-tag { font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--stamp-bg); border: 1px solid var(--cat-free-bd); border-radius: 100px; padding: 3px 9px; }

.admin-card { max-width: 400px; margin: 6vh auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 30px 28px; }
.admin-lead { color: var(--muted); font-size: 14.5px; margin: 16px 0 18px; }
.admin-card form { display: flex; flex-direction: column; gap: 12px; }
.admin-card input[type="password"] { font-family: var(--body); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 13px 15px; }
.admin-card input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.admin-card .btn { justify-content: center; }
.admin-err { color: var(--alert); font-size: 13.5px; margin: 12px 0 0; min-height: 18px; }

.admin-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.admin-title { font-family: var(--display); font-weight: 800; font-size: clamp(24px,4vw,34px); letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.admin-count { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.admin-count span { font-weight: 700; color: var(--brand); }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions .btn { padding: 10px 16px; font-size: 14px; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.admin-table th, .admin-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.admin-table thead th { font-family: var(--body); font-size: 12.5px; color: var(--muted); background: var(--raised); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td.num { color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-table td.when { color: var(--ink-2); white-space: nowrap; }
.admin-table a { color: var(--ink); text-decoration: none; }
.admin-table a:hover { color: var(--brand); text-decoration: underline; }
.pplan { font-family: var(--body); font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; }
.pplan.pro { color: var(--brand); background: var(--stamp-bg); border: 1px solid var(--cat-free-bd); }
.pplan.plus { color: var(--cat-arr-ink); background: var(--cat-arr-bg); border: 1px solid var(--cat-arr-bd); }

.pplan.none { color: var(--muted); background: var(--raised); }
.admin-empty { text-align: center; color: var(--muted); padding: 30px; }

/* ---------- plain white background (remove the grid overlay) ---------- */
:root { --grid: transparent; }
body::before { display: none !important; }

/* =======================================================================
   LIGHT-BLUE ACCENT + LIGHT (formerly dark) BANDS
   ======================================================================= */
:root {
  --brand:       #28A8E6;
  --brand-press: #1A8FCE;
  --stamp:       #28A8E6;
  --stamp-bg:    #E4F4FD;

  --brand-deep:   #F1F7FC;   /* proof + CTA bands: light, not black */
  --brand-deep-2: #E9F2F9;   /* footer: light */
  --on-deep:      #10222F;   /* dark text on the light bands */
  --on-deep-mut:  #586875;

  --cat-free-ink:#1487C0; --cat-free-bg:#E4F4FD; --cat-free-bd:rgba(20,135,192,.28);
  --cat-arr-ink:#0E9AA0;  --cat-arr-bg:#DCF3F2;  --cat-arr-bd:rgba(14,154,160,.26);
  --cat-ev-ink:#5A6FD0;   --cat-ev-bg:#E8EBFB;   --cat-ev-bd:rgba(90,111,208,.26);
  --cat-req-ink:#59636F;  --cat-req-bg:#EEF1F4;  --cat-req-bd:rgba(89,99,111,.26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:#4FBBEE; --brand-press:#28A8E6; --stamp:#4FBBEE; --stamp-bg:#0E2A3B;
    --brand-deep:#0F1B26; --brand-deep-2:#0A141C; --on-deep:#EAF3FA; --on-deep-mut:#93A7B5;
    --cat-free-ink:#66C2F0; --cat-free-bg:#0E2A3B; --cat-free-bd:rgba(102,194,240,.26);
    --cat-arr-ink:#4FC7C9;  --cat-arr-bg:#0E2A2B;  --cat-arr-bd:rgba(79,199,201,.24);
    --cat-ev-ink:#96A2ED;   --cat-ev-bg:#181C2E;   --cat-ev-bd:rgba(150,162,237,.24);
    --cat-req-ink:#AAB4BF;  --cat-req-bg:#20262C;  --cat-req-bd:rgba(170,180,191,.24);
  }
}

/* light-blue buttons read best with dark text */
.btn-solid { color: #08222F; }
.btn-solid:hover { color: #08222F; }
.btn-onDeep { background: var(--brand); color: #08222F; }
.btn-onDeep:hover { background: var(--brand-press); }
.plan-badge { color: #08222F; }

/* the formerly-dark bands are light now: give them structure + fix white text */
.proof { border-block: 1px solid var(--border); }
.cta-band { border-block: 1px solid var(--border); }
.site-footer { border-top: 1px solid var(--border); }
.footer-brand .wordmark { color: var(--ink); }

/* waitlist form sat on a dark band; make it readable on the light band */
.wait-form input[type="email"] { color: var(--ink); background: var(--surface); border-color: var(--border-2); }
.wait-form input[type="email"]::placeholder { color: var(--muted); }
.wait-msg.ok { color: var(--brand-press); }
.wait-msg.err { color: var(--alert); }
.wait-alt a { color: var(--brand-press); }

/* =======================================================================
   60 / 30 / 10 COLOUR RULE
   60% Base      = white                (--ground/--surface, most surfaces)
   30% Secondary = navy #14324F         (text, borders, light-navy bands)
   10% Accent    = azure #1E86CE        (buttons, links, highlights only)
   ======================================================================= */
:root {
  /* --- 60% base --- */
  --ground:   #FFFFFF;
  --surface:  #FFFFFF;
  --raised:   #EEF2F8;   /* soft navy-tint for raised areas (part of the 30%) */
  --border:   #E4E9F1;
  --border-2: #D2DBE7;

  /* --- 30% secondary (navy) --- */
  --ink:      #14324F;
  --ink-2:    #3A4D61;
  --muted:    #62717F;
  --brand-deep:   #EDF2F8;   /* proof + CTA: light navy-tint bands */
  --brand-deep-2: #E7EDF5;   /* footer: light navy-tint band */
  --on-deep:      #14324F;   /* navy text on the light bands */
  --on-deep-mut:  #5A6B7B;

  /* --- 10% accent (azure) --- */
  --brand:       #1E86CE;
  --brand-press: #156DAE;
  --stamp:       #1E86CE;
  --stamp-bg:    #E3F1FC;

  /* data categories, kept blue-forward and distinct */
  --cat-free-ink:#1877C2; --cat-free-bg:#E3F1FC; --cat-free-bd:rgba(24,119,194,.28);
  --cat-arr-ink:#0E8F97;  --cat-arr-bg:#DBF1F1;  --cat-arr-bd:rgba(14,143,151,.26);
  --cat-ev-ink:#5866CE;   --cat-ev-bg:#E7E9FB;   --cat-ev-bd:rgba(88,102,206,.26);
  --cat-req-ink:#4A5A6B;  --cat-req-bg:#EAEEF3;  --cat-req-bd:rgba(74,90,107,.26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0C1622; --surface:#12202F; --raised:#182838; --border:#26384A; --border-2:#39506502;
    --border-2:#395065; --ink:#EAF1F8; --ink-2:#C6D3DF; --muted:#93A5B4;
    --brand:#3AA0E4; --brand-press:#1E86CE; --stamp:#3AA0E4; --stamp-bg:#0F2A3E;
    --brand-deep:#0F1D2B; --brand-deep-2:#0A1622; --on-deep:#EAF1F8; --on-deep-mut:#93A7B7;
    --cat-free-ink:#5FB5EE; --cat-free-bg:#0F2A3E; --cat-free-bd:rgba(95,181,238,.26);
    --cat-arr-ink:#3FC0C6;  --cat-arr-bg:#0E2A2C;  --cat-arr-bd:rgba(63,192,198,.24);
    --cat-ev-ink:#8E9BEC;   --cat-ev-bg:#191E31;   --cat-ev-bd:rgba(142,155,236,.24);
    --cat-req-ink:#9DAAB8;  --cat-req-bg:#20272F;  --cat-req-bd:rgba(157,170,184,.24);
  }
}

/* accent buttons: azure fill, white label */
.btn-solid { color: #FFFFFF; }
.btn-solid:hover { color: #FFFFFF; }
.btn-onDeep { background: var(--brand); color: #FFFFFF; }
.btn-onDeep:hover { background: var(--brand-press); }
.plan-badge { color: #FFFFFF; }

/* light bands keep subtle separation */
.proof, .cta-band { border-block: 1px solid var(--border); }
.site-footer { border-top: 1px solid var(--border); }
.footer-brand .wordmark { color: var(--ink); }

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: color .18s var(--ease-out), border-color .18s, background .18s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--border-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-sun { display: none; }
.theme-toggle[data-mode="dark"] .ic-sun { display: block; }
.theme-toggle[data-mode="dark"] .ic-moon { display: none; }
@media (max-width: 720px) { .theme-toggle { width: 34px; height: 34px; } }

/* explicit dark (toggle) — mirror the current 60/30/10 palette so the
   manual toggle matches system dark instead of an earlier scheme */
:root[data-theme="dark"] {
  --ground:#0C1622; --surface:#12202F; --raised:#182838;
  --border:#26384A; --border-2:#395065;
  --ink:#EAF1F8; --ink-2:#C6D3DF; --muted:#93A5B4;
  --stamp:#3AA0E4; --stamp-bg:#0F2A3E;
  --amber:#E0B15E; --amber-bg:#2A2113;
  --azure:#7FA8C4; --azure-bg:#14232E;
  --alert:#F0876B; --alert-bg:#2E1712;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.7);
  --brand:#3AA0E4; --brand-press:#1E86CE; --brand-deep:#0F1D2B; --brand-deep-2:#0A1622;
  --on-deep:#EAF1F8; --on-deep-mut:#93A7B7; --shadow-lg:0 26px 56px -26px rgba(0,0,0,.75);
  --cat-free-ink:#5FB5EE; --cat-free-bg:#0F2A3E; --cat-free-bd:rgba(95,181,238,.26);
  --cat-arr-ink:#3FC0C6;  --cat-arr-bg:#0E2A2C;  --cat-arr-bd:rgba(63,192,198,.24);
  --cat-ev-ink:#8E9BEC;   --cat-ev-bg:#191E31;   --cat-ev-bd:rgba(142,155,236,.24);
  --cat-req-ink:#9DAAB8;  --cat-req-bg:#20272F;  --cat-req-bd:rgba(157,170,184,.24);
  --grid:rgba(180,205,230,.05); --dot:rgba(180,205,230,.08);
}

/* ---------- showcase mock is a real link to the app ---------- */

/* ---------- full-index rollout: flag emblem for cards without a photo,
   and the passport-index provenance badge. Appended last so it wins. ---------- */
.card .ph.noph {
  height: 84px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--azure-bg), var(--raised));
  border-bottom: 1px solid var(--border);
}
.card .ph.noph .ph-flag {
  font-size: 42px; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(8, 30, 50, .18));
}
.verif.indexed { background: var(--azure-bg); color: var(--azure); }

/* ---------- data freshness badge (driven by meta.baselineAsOf) ---------- */
.data-asof {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 11.5px; letter-spacing: .01em;
  color: var(--muted); margin: 8px 0 0;
}
.data-asof strong { color: var(--ink-2); font-weight: 600; }
.data-asof .asof-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--azure); flex: none; box-shadow: 0 0 0 3px var(--azure-bg);
}

/* ---------- align the passport & residence selectors at the top, so the
   residence hint hangs below without shoving its dropdown upward ---------- */
#paneUnlock .hero { align-items: flex-start; }

/* ---------- official "apply" link on each card ---------- */
.card-detail .apply { margin-top: 12px; }
.apply-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  color: #fff; background: var(--azure); border-radius: 10px;
  padding: 8px 13px; text-decoration: none;
  transition: transform .16s var(--ease-out), filter .16s var(--ease-out);
}
.apply-btn:hover { filter: brightness(1.06); }
.apply-btn:active { transform: scale(.97); }
.apply-note { margin: 7px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ---------- lift the selected card, keep the rest aligned ----------
   align-items:start stops the open (tall) card from stretching its row-mates,
   so neighbours keep their natural height instead of gaping. The open card
   rises (via position/top, which renders reliably here) with a soft shadow,
   and its detail fades up into place. */
.cardgrid { align-items: start; }
.card { position: relative; top: 0; transition: top .34s var(--ease-out), box-shadow .34s var(--ease-out); }
.card[open] {
  z-index: 3; top: 0;
  box-shadow: var(--shadow-lg);
}
@keyframes cardLiftIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.card[open] .card-detail { animation: cardLiftIn .34s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card[open] { top: 0; }
  .card[open] .card-detail { animation: none; }
}

/* ---------- accessibility utilities ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--azure); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-weight: 600; font-size: 14px; text-decoration: none;
  transform: translateY(-160%); transition: transform .18s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- cost & processing on card detail ---------- */
.card-detail .cost {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.cost-i { display: flex; flex-direction: column; gap: 1px; }
.cost .cl { font-family: var(--body); font-size: 12.5px; color: var(--muted); }
.cost .cv { font-size: 13px; font-weight: 600; color: var(--ink); }
.cost-tag {
  margin-left: auto; font-family: var(--body); font-size: 12.5px; padding: 3px 8px; border-radius: 100px;
  background: var(--cat-free-bg); color: var(--cat-free-ink);
}
.cost-tag.est { background: var(--raised); color: var(--muted); border: 1px solid var(--border); }

/* Country-flag emoji polyfill — Windows/Chrome ship no country-flag font, so
   flag emoji render blank there. This supplies ONLY the flag glyphs
   (unicode-range scoped); all other text falls through to the normal family. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F, U+200D;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}
:root {
  --display: "Twemoji Country Flags", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --body:    "Twemoji Country Flags", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

/* ══ Tokens: real monospace, AA-safe text inks, verification green ═════════ */
:root {
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --spring: cubic-bezier(.23, 1, .32, 1);
  --spring-ms: 425ms;
  --brand-ink: #176AA8;   /* brand blue for small text: >=4.98:1 on white/tints */
  --amber-ink: #8A570D;
  --ok: #0B6E4C;          /* "verified" green */
  --ok-bg: #E2F4EA;
  /* Light-mode AA fixes. The dark blocks above redefine these with higher
     specificity, and their values already pass. */
  --muted: #5A6977;
  --cat-free-ink: #176AA8;
  --cat-arr-ink: #0A6970;
  --cat-ev-ink: #4B58BE;
}
/* Spring: stiffness 280, damping 22 (ζ≈0.66, ~6.5% overshoot, settles in 425ms) */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.018, 0.065, 0.134, 0.216, 0.307, 0.401, 0.493, 0.582, 0.665, 0.74, 0.807, 0.866, 0.915, 0.956, 0.99, 1.016, 1.035, 1.049, 1.058, 1.063, 1.065, 1.064, 1.061, 1.056, 1.051, 1.045, 1.039, 1.033, 1.028, 1.022, 1.017, 1.013, 1.009, 1.006, 1.003, 1); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brand-ink: #3AA0E4; --amber-ink: #E0B15E; --ok: #4ACF97; --ok-bg: #0F2A22; }
}
:root[data-theme="dark"] { --brand-ink: #3AA0E4; --amber-ink: #E0B15E; --ok: #4ACF97; --ok-bg: #0F2A22; }

/* ══ Verification tiers (shared by hero, showcase and app) ═════════════════
   Mapped 1:1 from the data's own confidence policy — see hero.js tier(). */
.t-verified { --t-ink: var(--ok);        --t-bg: var(--ok-bg); }
.t-sourced  { --t-ink: var(--brand-ink); --t-bg: color-mix(in srgb, var(--brand) 11%, var(--surface)); }
.t-index    { --t-ink: var(--muted);     --t-bg: var(--surface); }
.t-confirm  { --t-ink: var(--amber-ink); --t-bg: var(--amber-bg); }
.card-conf.t-verified, .card-conf.t-sourced, .card-conf.t-index, .card-conf.t-confirm{ color: var(--t-ink); background: var(--t-bg); border: 1px solid color-mix(in srgb, var(--t-ink) 26%, transparent); }

/* ══ Interactive telemetry hero (hero.js) ══════════════════════════════════ */

/* document-stack toggles */

/* the tactile mobility docket */

/* guilloché security-paper rosette, tinted from the brand token */

  /* grid items: never let intrinsic width widen the column */

/* odometer: one 0–9 strip per digit, rolled on the spring */

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

/* border-access passes — keyed: enter, exit (popped out of flow) and FLIP moves */

/* ══ Showcase: docket header instead of fake window chrome ═════════════════ */

/* ══ Legal disclaimer dialog (theme.js) ════════════════════════════════════ */
.legal-dlg { max-width: 520px; width: calc(100% - 32px); padding: 24px; border: 1px solid var(--border-2); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0,0,0,.45); }
.legal-dlg::backdrop { background: rgba(8, 16, 28, .5); }
.legal-dlg h2 { margin: 0 0 4px; font: 700 20px/1.2 var(--display); color: var(--ink); }
.legal-dlg .legal-k { display: block; margin-bottom: 12px; font: 500 12.5px/1 var(--body); color: var(--muted); }
.legal-dlg p { margin: 0 0 12px; font: 400 15px/1.6 var(--body); color: var(--ink-2); }
.legal-dlg p strong { color: var(--ink); }
.legal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.legal-actions a { color: var(--brand-ink); font-weight: 600; }
.legal-actions button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--brand-ink); color: #fff; font: 600 14px/1 var(--body); cursor: pointer; }
.legal-actions button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 560px) {
  .legal-dlg { margin: auto 0 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; }
}
[data-legal] { cursor: pointer; }

/* ══ Touch targets (>=44px) on phones and coarse pointers ══════════════════ */
@media (max-width: 767px), (pointer: coarse) {
  
  
  .theme-toggle { width: 44px; height: 44px; }
  .nav-right { gap: 6px; }
  .site-nav .btn, .nav-brand { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ══ AA contrast fixes found by the contrast scan ═════════════════════════
   White text on --brand (#1E86CE / dark #3AA0E4) was 3.92:1 and 2.87:1.
   One fill for every white-text brand control: 5.73:1 in both themes. */
:root { --brand-fill: #176AA8; --brand-fill-press: #145E96; }
.btn-solid, .btn-onDeep, .plan-badge { background-color: var(--brand-fill); color: #fff; }
.btn-solid:hover, .btn-onDeep:hover{ background-color: var(--brand-fill-press); color: #fff; }
.card .via.unlk { color: var(--brand-ink); }

/* App (app.html) AA fixes found by the contrast scan */
:root { --azure: #675F57; }  /* light taupe text: 5.25:1+ on every tint it sits on; dark value untouched */
 .doc:has(input:checked) span, .card-detail a.src, .src,
.verif.checked, .verif.checked a, .verif.checked b { color: var(--brand-ink); }
.vw-head, .vw-head b, .vw-lead b, .advise-item b, .verif.unchecked, .verif.unchecked b { color: var(--amber-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .apply-btn, :root:not([data-theme="light"]) .apply-btn span,
  :root:not([data-theme="light"]) .skip-link { color: #0C1622; }
}
:root[data-theme="dark"] .apply-btn, :root[data-theme="dark"] .apply-btn span, :root[data-theme="dark"] .skip-link { color: #0C1622; }

/* Remaining page-level AA fixes (pricing, schengen, layover, concierge) */
:root { --alert-ink: #A93419; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --alert-ink: #F0876B; } }
:root[data-theme="dark"] { --alert-ink: #F0876B; }
.plan-billed, .toggle .save, .wait-alt a { color: var(--brand-ink); }

/* consent copy was white-on-light in light mode (1.1:1) — follow the band's own ink */
.wait-consent { color: var(--on-deep-mut, var(--muted)); }
.wait-consent a { color: var(--on-deep, var(--ink)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #ccSend { color: #0C1622; } }
:root[data-theme="dark"] #ccSend { color: #0C1622; }

/* ══ Gold foil, document stack, citations & live timestamps ════════════════ */
:root { --gold: #B8892B; --gold-ink: #7E5A10; --passport: #14324F; --passport-edge: color-mix(in srgb, #D9AE4E 55%, #14324F); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gold: #D9B25F; --gold-ink: #E3C278; --passport: #1B3A58; }
}
:root[data-theme="dark"] { --gold: #D9B25F; --gold-ink: #E3C278; --passport: #1B3A58; }

/* second, gold-tinted security rosette: two-tone like real passport paper */

/* the physical stack: each held document is a sheet behind the docket, the
   newest right behind it, the passport always at the back (hero.js sets --k) */

/* direct citation: the chip links to the exact page the rule cites; the
   invisible ::after widens the tap target without changing the look */

/* timestamps are data: monospace */

.lo-codes { display: block; margin-bottom: 4px; font: 600 13px/1.3 var(--body);  color: var(--ink); }

.legal-basis { margin: 8px 0 0; font: 500 12.5px/1.4 var(--body); color: var(--ink-2); }
.legal-basis span { margin-right: 6px; font-size: 12.5px; color: var(--gold-ink); }

/* ══ Partner offers (affiliate) — deliberately secondary to the official link ══ */
.partners { margin: 14px 0 0; padding: 12px 12px 4px; border: 1px dashed var(--border-2); border-radius: 12px; background: transparent; }
.partners-head { margin: 0 0 8px; font: 500 11.5px/1.45 var(--body); color: var(--muted); }
.partners-head b { margin-right: 6px; font: 600 12.5px/1 var(--body); color: var(--ink-2); }
.partners-head a { color: var(--brand-ink); }
.partner { display: flex; flex-direction: column; gap: 3px; min-height: 44px; justify-content: center; margin: 0 0 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.partner:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.partner:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.partner-name { font: 600 13.5px/1.3 var(--body); }
.partner-blurb { font: 400 12.5px/1.4 var(--body); color: var(--ink-2); }
.partner-note { font: 500 11.5px/1.4 var(--body); color: var(--muted); }
#skPartners.partners { margin: 22px 0 0; }

/* ══ Account panel (app.html): sign-in, plan, watch limits ══════════════════ */
.acct-panel .acct-note { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.acct-panel .acct-note b { color: var(--ink); }

.acct-panel .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.acct-actions .btn { min-height: 44px; }
.watch-btn[aria-pressed="true"] { color: var(--brand-ink); }

/* Account button in the app's sync row: the primary way in to email alerts. */
.acct-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  min-height: 44px; padding: 0 18px; border-radius: 100px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--brand-ink); background: transparent; border: 1px solid var(--brand-ink);
  transition: background-color .15s ease, transform .16s var(--ease-out, ease-out);
}
.acct-btn:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.acct-btn:active { transform: scale(.97); }
.acct-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acct-btn[data-state="out"] { color: #fff; background: var(--brand-fill); border-color: var(--brand-fill); }
.acct-btn[data-state="out"]:hover { background: color-mix(in srgb, var(--brand-fill) 86%, #000); }
.acct-btn svg { width: 16px; height: 16px; flex: none; }
.acct-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .acct-btn { margin-left: 0; flex-basis: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .acct-btn { transition: none; } .acct-btn:active { transform: none; } }

/* Phone header: 16px gutter like the rest of the page; the app's "← Overview"
   repeats what the logo link does, so it gives way to the profile button. */
@media (max-width: 480px) {
  .site-nav .nav-inner { padding-left: 16px; padding-right: 16px; }
  
}
/* Smallest phones: keep the mark, drop the wordmark visually (still read aloud). */
@media (max-width: 360px) {
  .site-nav .nav-brand { font-size: 0; gap: 0; }
  .site-nav .nav-brand .mark { width: 30px; height: 30px; }
}
/* Header links never wrap; on tablets they give way (the tool is one tap away). */
.site-nav .nav-links a { white-space: nowrap; }
@media (max-width: 960px) { .site-nav .nav-links { display: none; } }

/* Header menu: the page you're on, and the same links behind a Menu button on phones/tablets. */
.site-nav .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-menu { display: none; position: relative; }
@media (max-width: 960px) { .nav-menu { display: block; } }
.nav-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-menu > summary svg { width: 18px; height: 18px; }
.nav-menu[open] > summary { border-color: var(--ink-2); }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 40px -18px rgba(12,22,34,.45); }
.nav-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav-menu-panel a:hover { background: var(--raised); }
.nav-menu-panel a[aria-current="page"] { color: var(--brand-ink); background: var(--raised); }
@media (max-width: 767px), (pointer: coarse) { .nav-menu > summary { width: 44px; height: 44px; } }
/* Links inside FAQ answers and section intros use the accessible brand ink in both themes. */
.faq-body a, .section-lead a { color: var(--brand-ink); font-weight: 600; }

/* Touch screens: form text at 16px or more, so iOS doesn't zoom the page when a field is tapped. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}

/* Narrow phones: the app's email + button row stacks instead of pushing past the screen. */
@media (max-width: 400px) {
  .ac-row { flex: 1 1 100%; min-width: 0; }
  .ac-row input[type=email] { flex: 1 1 100%; min-width: 0; }
}

/* Page-to-page: a quick cross-fade between Visafar pages, with the header held in
   place (browsers without cross-document view transitions just navigate). */
@view-transition { navigation: auto; }
.site-nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Small text links and icon buttons keep their look but get a finger-sized hit area. */
.sync-link, .card-detail .src, .lo-src, .lo-del { position: relative; }
.sync-link::after, .card-detail .src::after, .lo-src::after, .lo-del::after { content: ""; position: absolute; inset: -8px -4px; }
.faq-more { margin: 32px 0 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.faq-more a { color: var(--brand-ink); }

/* Shadows: short and crisp (no wide soft glows). Defined last so they win over the
   earlier theme layers above. */
:root { --shadow: 0 1px 2px rgba(15, 30, 45, .06), 0 2px 6px -2px rgba(15, 30, 45, .08);
        --shadow-lg: 0 1px 2px rgba(15, 30, 45, .08), 0 6px 14px -6px rgba(15, 30, 45, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 2px 8px -2px rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] { --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 2px 8px -2px rgba(0, 0, 0, .5); }

/* Small status chips read as plain labels: no extra letter-spacing. */
.cbadge, .card-conf, .tp-badge, .tp-tier, .plan-badge, .cb, .rp-kind { letter-spacing: 0; }
.legal-basis a { color: var(--brand-ink); }