@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

  :root{
    --bg:#F5F7FB;
    --surface:#FFFFFF;
    --surface-2:#EEF2FA;
    --ink:#101828;
    --ink-soft:#5B6472;
    --line:#E1E6EF;
    --accent:#2554E8;
    --accent-ink:#FFFFFF;
    --accent-2:#0E9488;
    --accent-2-bg:#DFF5F1;
    --good:#1C8A4B;
    --good-bg:#E3F6EA;
    --shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 20px -10px rgba(16,24,40,0.12);

    --tile-0:#2554E8; --tile-1:#0E9488; --tile-2:#475569; --tile-3:#4338CA;
    --tile-4:#0F766E; --tile-5:#1D4ED8; --tile-6:#334155; --tile-7:#0891B2; --tile-8:#3730A3;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0B1220; --surface:#121A2C; --surface-2:#17223A;
      --ink:#EDF1F9; --ink-soft:#9AA7C2; --line:#263252;
      --accent:#6C93FF; --accent-ink:#0B1220; --accent-2:#34D6C4; --accent-2-bg:#11302C;
      --good:#42C97A; --good-bg:#0F2E1D;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 24px -10px rgba(0,0,0,0.55);
      --tile-0:#6C93FF; --tile-1:#34D6C4; --tile-2:#94A3B8; --tile-3:#8B82FF;
      --tile-4:#2DD4C0; --tile-5:#5C86FF; --tile-6:#7C8BA8; --tile-7:#3FC9E8; --tile-8:#9C8CFF;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B1220; --surface:#121A2C; --surface-2:#17223A;
    --ink:#EDF1F9; --ink-soft:#9AA7C2; --line:#263252;
    --accent:#6C93FF; --accent-ink:#0B1220; --accent-2:#34D6C4; --accent-2-bg:#11302C;
    --good:#42C97A; --good-bg:#0F2E1D;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 24px -10px rgba(0,0,0,0.55);
    --tile-0:#6C93FF; --tile-1:#34D6C4; --tile-2:#94A3B8; --tile-3:#8B82FF;
    --tile-4:#2DD4C0; --tile-5:#5C86FF; --tile-6:#7C8BA8; --tile-7:#3FC9E8; --tile-8:#9C8CFF;
  }

  *{box-sizing:border-box;}
  @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
  body{
    margin:0; color:var(--ink); background:var(--bg);
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:16px; line-height:1.55; padding:0 20px 64px;
  }
  .stripe{ height:1px; background:var(--line); border:none; margin:28px 0; }
  a{color:var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);}
  a:focus-visible, button:focus-visible, .chip:focus-visible, .tile:focus-visible{
    outline:3px solid var(--accent); outline-offset:2px; border-radius:4px;
  }
  h1,h2,h3{ font-family:"Manrope", ui-sans-serif, system-ui, sans-serif; text-wrap:balance; margin:0; letter-spacing:-0.01em; }
  .wrap{max-width:1040px; margin:0 auto;}
  [hidden]{display:none !important;}

  header.intro{ padding:44px 0 24px; display:flex; flex-direction:column; gap:16px; }
  .intro-text{ display:flex; flex-direction:column; gap:14px; max-width:720px; }
  .eyebrow{
    font-family:"Work Sans"; font-weight:700; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--accent); display:flex; align-items:center; gap:8px;
  }
  header.intro h1{ font-size:clamp(1.9rem, 4.2vw, 2.65rem); font-weight:800; color:var(--ink); }
  .lede{ max-width:62ch; font-size:1.05rem; color:var(--ink-soft); }
  .meta-line{ font-size:0.85rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

  .stat-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
  .stat{
    display:flex; align-items:baseline; gap:7px; padding:9px 16px; border-radius:10px;
    border:1px solid var(--line); background:var(--surface);
  }
  .stat b{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:1.05rem; color:var(--ink); font-variant-numeric:tabular-nums; }
  .stat span{ font-size:0.76rem; font-weight:600; color:var(--ink-soft); }

  .checklist{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:22px 24px; box-shadow:var(--shadow);
    display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin:8px 0 36px;
  }
  @media (max-width:760px){ .checklist{grid-template-columns:1fr 1fr;} }
  @media (max-width:480px){ .checklist{grid-template-columns:1fr;} }
  .check-item{display:flex; gap:12px; align-items:flex-start;}
  .check-icon{ flex:none; width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; }
  .check-icon svg{ width:18px; height:18px; }
  .check-icon.c0{ background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent); }
  .check-icon.c1{ background:color-mix(in srgb, var(--accent-2) 14%, var(--surface)); color:var(--accent-2); }
  .check-icon.c2{ background:var(--good-bg); color:var(--good); }
  .check-icon.c3{ background:var(--surface-2); color:var(--ink-soft); }
  .check-item h4{ margin:0 0 2px; font-family:"Work Sans"; font-weight:700; font-size:0.92rem; color:var(--ink); }
  .check-item p{ margin:0; font-size:0.85rem; color:var(--ink-soft); }

  /* ---- Home: region picker ---- */
  .section-label{
    font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-soft); margin:0 0 14px;
  }
  .tile-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
  @media (max-width:860px){ .tile-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width:520px){ .tile-grid{grid-template-columns:1fr;} }
  .tile{
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--tile-bg, var(--accent));
    border-radius:10px;
    padding:16px 18px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
    transition:transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  @media (prefers-reduced-motion: no-preference){ .tile:hover{ transform:translateY(-2px); } }
  .tile:hover{ box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 12px 24px -10px rgba(16,24,40,0.18); }
  .tile-grid .dot{ flex:none; width:10px; height:10px; border-radius:3px; }
  .dot.tile-0{background:var(--tile-0); --tile-bg:var(--tile-0);} .dot.tile-1{background:var(--tile-1); --tile-bg:var(--tile-1);} .dot.tile-2{background:var(--tile-2); --tile-bg:var(--tile-2);}
  .dot.tile-3{background:var(--tile-3); --tile-bg:var(--tile-3);} .dot.tile-4{background:var(--tile-4); --tile-bg:var(--tile-4);} .dot.tile-5{background:var(--tile-5); --tile-bg:var(--tile-5);}
  .dot.tile-6{background:var(--tile-6); --tile-bg:var(--tile-6);} .dot.tile-7{background:var(--tile-7); --tile-bg:var(--tile-7);} .dot.tile-8{background:var(--tile-8); --tile-bg:var(--tile-8);}
  .tile .t-body{flex:1; min-width:0;}
  .tile h3{font-size:1.02rem; font-weight:700;}
  .tile p{margin:3px 0 0; font-size:0.85rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
  .tile .chev{flex:none; color:var(--ink-soft); font-size:1.1rem;}

  /* ---- Region detail view ---- */
  .back-link{
    display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:0.9rem;
    text-decoration:none; margin-bottom:18px;
  }
  .detail-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
  .detail-head .dot{width:12px; height:12px; border-radius:3px; flex:none;}
  .detail-head h1, .detail-head h2{font-size:clamp(1.4rem,3.4vw,1.9rem); font-weight:800;}
  .detail-sub{ color:var(--ink-soft); margin:0 0 22px; font-size:0.95rem; }

  .hop-row{ margin:0 0 28px; }
  .hop-label{ display:block; font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:8px; }
  .chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
  .chip{
    flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:8px;
    background:var(--surface-2); color:var(--ink); font-size:0.84rem; font-weight:600; text-decoration:none;
  }
  .chip .dot{width:8px;height:8px;border-radius:2px;flex:none;}

  .card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  @media (max-width:920px){ .card-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width:640px){ .card-grid{grid-template-columns:1fr;} }
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px;
    box-shadow:var(--shadow); display:flex; flex-direction:column; gap:13px;
    border-top:3px solid var(--tile-bg, var(--accent));
  }
  .card-head{display:flex; align-items:flex-start; gap:12px;}
  .avatar{
    flex:none; width:38px; height:38px; border-radius:9px;
    background:var(--surface-2); color:var(--tile-bg, var(--accent));
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:"Manrope", ui-sans-serif, system-ui, sans-serif; font-weight:700; font-size:1rem;
  }
  .card-head .names{display:flex; flex-direction:column; gap:4px; min-width:0;}
  .card-head h3{font-size:1.12rem; font-weight:700; color:var(--ink);}
  .based{margin:0; font-size:0.84rem; color:var(--ink-soft);}
  .price-tag{
    align-self:flex-start; font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:600; font-size:0.82rem;
    background:var(--accent-2-bg); color:color-mix(in srgb, var(--accent-2) 70%, var(--ink));
    padding:6px 11px; border-radius:7px;
    white-space:nowrap; font-variant-numeric:tabular-nums;
  }
  .range{margin:0; font-size:0.92rem; color:var(--ink);}
  .badges{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
  .badge{
    font-size:0.76rem; font-weight:600; padding:5px 9px; border-radius:6px;
    background:var(--surface-2); color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px;
  }
  .badge.good{background:var(--good-bg); color:var(--good);}
  .badge.good::before{content:"\2713"; font-weight:700;}
  .tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .tag{ font-size:0.76rem; color:var(--ink-soft); border:1px solid var(--line); padding:4px 9px; border-radius:6px; }
  .contact{
    margin-top:auto; padding-top:10px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:10px; font-size:0.86rem; flex-wrap:wrap;
  }
  .contact a{font-weight:600; text-decoration:none;}
  .contact a:hover{text-decoration:underline;}

  footer{
    margin-top:8px; padding-top:4px;
    display:flex; flex-direction:column; gap:10px;
  }
  footer p{margin:0; font-size:0.82rem; color:var(--ink-soft); max-width:74ch;}
  .sources{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:0.78rem; }
  .sources a{color:var(--ink-soft);}

  .topbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 0 6px; }
  .topbar .home-link{
    display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    font-family:"Manrope", ui-sans-serif, system-ui, sans-serif; font-weight:800; font-size:1.05rem; color:var(--ink);
  }
  .topbar .logo-mark{
    flex:none; width:30px; height:30px; border-radius:9px;
    background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .topbar .logo-mark svg{ width:19px; height:19px; }
  .topbar .tld{ font-size:0.8rem; color:var(--ink-soft); font-weight:500; }