:root{
        --bg:#ffffff;
        --bg-soft:#f5f5f7;
        --bg-panel:#fbfbfd;
        --ink:#1d1d1f;
        --ink-2:#515154;
        --ink-3:#86868b;
        --line:#e3e3e6;
        --blue:#0066cc;
        --blue-hover:#004f9e;
        --navy:#14264c;
        --orange:#e8762d;
        --orange-soft:#fdf0e4;
        --green:#1d7a4f;
        --header-bg:rgba(251,251,253,.82);
        --header-line:rgba(0,0,0,.08);
        --shadow:0 10px 34px rgba(20,38,76,.09);
        --shadow-sm:0 3px 14px rgba(20,38,76,.07);
        --radius:20px;
      }
      @media (prefers-color-scheme: dark){
        :root{
          --bg:#000000;
          --bg-soft:#161617;
          --bg-panel:#1c1c1e;
          --ink:#f5f5f7;
          --ink-2:#c9c9cd;
          --ink-3:#8e8e93;
          --line:#2c2c2e;
          --blue:#2997ff;
          --blue-hover:#5eb1ff;
          --navy:#a9c2ee;
          --orange:#f08a45;
          --orange-soft:#2e2015;
          --green:#4fc38a;
          --header-bg:rgba(22,22,23,.78);
          --header-line:rgba(255,255,255,.1);
          --shadow:0 10px 34px rgba(0,0,0,.5);
          --shadow-sm:0 3px 14px rgba(0,0,0,.45);
        }
      }
      *{ box-sizing:border-box; }
      html{ scroll-behavior:smooth; }
      body{
        margin:0;
        font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
        background:var(--bg);
        color:var(--ink);
        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
      }
      a{ color:var(--blue); text-decoration:none; }
      a:hover{ text-decoration:underline; }
      img{ display:block; max-width:100%; }
      .wrap{ max-width:1080px; margin:0 auto; padding:0 22px; }
      :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }

      /* ---------- Header ---------- */
      header.site{
        position:sticky; top:0; z-index:60;
        background:var(--header-bg);
        -webkit-backdrop-filter:saturate(180%) blur(18px);
        backdrop-filter:saturate(180%) blur(18px);
        border-bottom:1px solid var(--header-line);
      }
      .nav{ display:flex; align-items:center; gap:34px; height:52px; max-width:1080px; margin:0 auto; padding:0 22px; }
      .brand{ display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:700; font-size:19px; letter-spacing:-.02em; white-space:nowrap; }
      .brand:hover{ text-decoration:none; }
      .brand .mark{
        width:28px; height:28px; border-radius:8px; flex:0 0 auto;
        background:var(--navy); color:#fff;
        display:grid; place-items:center;
      }
      @media (prefers-color-scheme: dark){ .brand .mark{ background:var(--orange); color:#161617; } }
      .brand em{ font-style:normal; color:var(--orange); }
      nav.main{ display:flex; gap:28px; margin-left:auto; }
      nav.main a{ color:var(--ink); font-size:14px; font-weight:400; }
      nav.main a:hover{ color:var(--blue); text-decoration:none; }
      .nav-search-btn{
        margin-left:4px; border:0; background:transparent; color:var(--ink);
        width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
      }
      .nav-search-btn:hover{ background:var(--bg-soft); }
      .burger{ display:none; margin-left:auto; border:0; background:transparent; color:var(--ink); width:38px; height:38px; border-radius:10px; cursor:pointer; place-items:center; }
      .burger:hover{ background:var(--bg-soft); }
      .mobile-menu{ display:none; border-top:1px solid var(--header-line); padding:10px 22px 16px; }
      .mobile-menu a{ display:block; padding:11px 2px; color:var(--ink); font-size:16px; border-bottom:1px solid var(--line); }
      .mobile-menu a:last-child{ border-bottom:0; }
      .mobile-menu.open{ display:block; }
      @media (max-width:760px){
        nav.main,.nav .nav-search-btn{ display:none; }
        .burger{ display:grid; }
        .nav{ gap:16px; }
      }

      /* ---------- Hero ---------- */
      .hero{ text-align:center; padding:84px 0 30px; }
      .hero h1{
        font-size:clamp(42px,7.2vw,76px); line-height:1.05; letter-spacing:-.028em;
        font-weight:800; margin:0 auto 18px; max-width:15ch;
      }
      .hero h1 .accent{ color:var(--orange); }
      .hero p.lede{ font-size:clamp(18px,2.4vw,22px); line-height:1.45; color:var(--ink-2); max-width:56ch; margin:0 auto 36px; }
      .searchbox{ position:relative; max-width:640px; margin:0 auto; text-align:left; }
      .searchbox .field{
        display:flex; align-items:center; gap:12px;
        background:var(--bg-panel); border:1px solid var(--line); border-radius:999px;
        padding:6px 8px 6px 22px; box-shadow:var(--shadow);
      }
      .searchbox .field svg{ flex:0 0 auto; color:var(--ink-3); }
      .searchbox input{
        flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
        font-size:17px; font-family:inherit; padding:12px 0;
      }
      .searchbox input::placeholder{ color:var(--ink-3); }
      .searchbox button.go{
        border:0; cursor:pointer; background:var(--blue); color:#fff; font-size:15px; font-weight:600;
        border-radius:999px; padding:12px 24px; font-family:inherit; white-space:nowrap;
      }
      .searchbox button.go:hover{ background:var(--blue-hover); }
      .results{
        position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:40;
        background:var(--bg-panel); border:1px solid var(--line); border-radius:18px;
        box-shadow:var(--shadow); overflow:hidden; display:none;
      }
      .results.show{ display:block; }
      .results .r-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:13px 18px; font-family:inherit; color:var(--ink); border-bottom:1px solid var(--line); }
      .results .r-item:last-child{ border-bottom:0; }
      .results .r-item:hover,.results .r-item.active{ background:var(--bg-soft); }
      .results .r-item .t{ font-size:15px; font-weight:600; line-height:1.3; }
      .results .r-item .c{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
      .results .r-none{ padding:16px 18px; font-size:15px; color:var(--ink-2); }
      .results .r-none strong{ color:var(--ink); }
      .chips{ margin-top:22px; display:flex; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center; }
      .chips span.lbl{ font-size:13.5px; color:var(--ink-3); margin-right:2px; }
      .chip{
        border:1px solid var(--line); background:var(--bg); color:var(--ink);
        font-size:13.5px; padding:7px 14px; border-radius:999px; cursor:pointer; font-family:inherit;
      }
      .chip:hover{ border-color:var(--blue); color:var(--blue); }

      /* ---------- Ticker ---------- */
      .ticker{ margin:56px auto 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
      .ticker .wrap{ display:flex; gap:0; }
      .tick{ flex:1 1 0; min-width:0; text-align:center; padding:20px 14px; border-right:1px solid var(--line); }
      .tick:last-child{ border-right:0; }
      @media (max-width:640px){
        .ticker .wrap{ display:grid; grid-template-columns:1fr 1fr; padding:0; }
        .tick{ border-right:0; border-bottom:1px solid var(--line); padding:18px 10px; }
        .tick:nth-child(odd){ border-right:1px solid var(--line); }
        .tick:nth-last-child(-n+2){ border-bottom:0; }
        .tick b{ font-size:20px; }
      }
      .tick b{ display:block; font-size:24px; letter-spacing:-.02em; font-weight:800; }
      .tick span{ font-size:13px; color:var(--ink-3); }

      /* ---------- Sections ---------- */
      section.block{ padding:78px 0 8px; }
      .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:8px; }
      .sec-head h2{ font-size:clamp(30px,4.4vw,42px); letter-spacing:-.025em; font-weight:800; margin:0; }
      .sec-head a.more{ font-size:16px; white-space:nowrap; }
      .sec-sub{ color:var(--ink-2); font-size:17px; line-height:1.5; max-width:62ch; margin:0 0 34px; }

      /* ---------- Categories ---------- */
      .cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
      .cat{
        display:flex; gap:16px; align-items:flex-start; text-align:left;
        background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
        padding:22px; cursor:pointer; font-family:inherit; color:var(--ink); width:100%;
        transition:transform .18s ease, box-shadow .18s ease;
      }
      .cat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
      .cat .ic{
        width:46px; height:46px; border-radius:13px; flex:0 0 auto;
        background:var(--orange-soft); color:var(--orange); display:grid; place-items:center;
      }
      .cat h3{ margin:2px 0 5px; font-size:17.5px; letter-spacing:-.01em; }
      .cat p{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); }
      .cat .cnt{ display:block; margin-top:9px; font-size:13px; font-weight:600; color:var(--blue); }
      @media (max-width:860px){ .cats{ grid-template-columns:repeat(2,1fr); } }
      @media (max-width:560px){ .cats{ grid-template-columns:1fr; } }

      /* ---------- Guide filters ---------- */
      .filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
      .fbtn{
        border:1px solid var(--line); background:var(--bg); color:var(--ink-2);
        font-size:14px; font-weight:500; padding:8px 16px; border-radius:999px; cursor:pointer; font-family:inherit;
      }
      .fbtn:hover{ color:var(--ink); border-color:var(--ink-3); }
      .fbtn.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

      /* ---------- Guide grid ---------- */
      .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
      .card{
        background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
        overflow:hidden; display:flex; flex-direction:column;
        transition:transform .18s ease, box-shadow .18s ease;
      }
      .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
      .card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--orange-soft); }
      .card .thumb img{ width:100%; height:100%; object-fit:cover; }
      .card .thumb.tint{ display:grid; place-items:center; color:var(--orange); }
      .card .body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
      .kicker{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); }
      .card h3{ margin:0; font-size:21px; line-height:1.25; letter-spacing:-.015em; font-weight:700; }
      .card p{ margin:0; font-size:15px; line-height:1.55; color:var(--ink-2); flex:1; }
      .meta{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink-3); }
      .meta .read{ color:var(--blue); font-weight:600; font-size:14px; margin-left:auto; }
      .card.hide{ display:none; }
      .card.flash{ animation:flash 1.6s ease; }
      @keyframes flash{ 0%,60%{ box-shadow:0 0 0 3px var(--orange); } 100%{ box-shadow:var(--shadow-sm); } }
      @media (prefers-reduced-motion: reduce){
        html{ scroll-behavior:auto; }
        .card,.cat{ transition:none; }
        .card.flash{ animation:none; }
      }
      @media (max-width:700px){ .grid{ grid-template-columns:1fr; } }

      /* ---------- Downloads ---------- */
      .dl-band{ background:var(--bg-soft); margin-top:78px; padding:78px 0 84px; }
      .dl-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
      .dl{
        display:flex; gap:18px; align-items:center;
        background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;
      }
      .dl .app-ic{
        width:52px; height:52px; border-radius:14px; flex:0 0 auto;
        background:var(--navy); color:#fff; display:grid; place-items:center;
        font-weight:800; font-size:19px; letter-spacing:-.02em;
      }
      @media (prefers-color-scheme: dark){ .dl .app-ic{ background:#2c2c2e; color:var(--ink); } }
      .dl .info{ flex:1; min-width:0; }
      .dl h3{ margin:0 0 3px; font-size:17px; letter-spacing:-.01em; }
      .dl p{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); }
      .dl .plat{ font-size:12.5px; color:var(--ink-3); margin-top:5px; display:block; }
      .dl a.btn{
        flex:0 0 auto; background:var(--blue); color:#fff; font-size:14px; font-weight:600;
        padding:9px 18px; border-radius:999px; white-space:nowrap;
      }
      .dl a.btn:hover{ background:var(--blue-hover); text-decoration:none; }
      .dl-note{ margin:22px 0 0; font-size:13.5px; color:var(--ink-3); line-height:1.55; max-width:70ch; }
      @media (max-width:760px){ .dl-list{ grid-template-columns:1fr; } }
      @media (max-width:480px){
        .dl{ flex-wrap:wrap; row-gap:14px; }
        .dl .info{ flex:1 1 60%; }
        .dl a.btn{ margin-left:70px; }
      }

      /* ---------- How we work / About ---------- */
      .about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; }
      .about-grid h2{ font-size:clamp(30px,4.4vw,42px); letter-spacing:-.025em; font-weight:800; margin:0 0 16px; }
      .about-grid .lead{ font-size:18px; line-height:1.6; color:var(--ink-2); margin:0 0 16px; }
      .principles{ list-style:none; margin:6px 0 0; padding:0; }
      .principles li{ display:flex; gap:14px; padding:15px 0; border-top:1px solid var(--line); }
      .principles li:first-child{ border-top:0; padding-top:4px; }
      .principles .n{
        width:30px; height:30px; border-radius:50%; flex:0 0 auto; margin-top:1px;
        background:var(--orange-soft); color:var(--orange); font-weight:800; font-size:14px;
        display:grid; place-items:center;
      }
      .principles b{ display:block; font-size:16px; margin-bottom:3px; }
      .principles p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
      .promise{
        background:var(--navy); color:#eef2fb; border-radius:var(--radius); padding:30px 30px 26px;
      }
      @media (prefers-color-scheme: dark){ .promise{ background:#1c1c1e; color:var(--ink); border:1px solid var(--line); } }
      .promise h3{ margin:0 0 12px; font-size:21px; letter-spacing:-.015em; color:#fff; }
      @media (prefers-color-scheme: dark){ .promise h3{ color:var(--ink); } }
      .promise p{ margin:0 0 14px; font-size:15px; line-height:1.6; color:#c7d2ea; }
      @media (prefers-color-scheme: dark){ .promise p{ color:var(--ink-2); } }
      .promise p:last-child{ margin-bottom:0; }
      @media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:30px; } }

      /* ---------- Footer ---------- */
      footer.site{ margin-top:90px; background:var(--bg-soft); border-top:1px solid var(--line); padding:52px 0 40px; font-size:13.5px; color:var(--ink-2); }
      .f-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; margin-bottom:38px; }
      .f-cols h4{ margin:0 0 13px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
      .f-cols a{ display:block; color:var(--ink-2); padding:4px 0; }
      .f-cols a:hover{ color:var(--blue); }
      .f-brand p{ margin:10px 0 0; line-height:1.55; max-width:30ch; }
      .f-bottom{ border-top:1px solid var(--line); padding-top:20px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; }
      .f-bottom .spacer{ flex:1; }
      .f-bottom a{ color:var(--ink-2); }
      @media (max-width:760px){ .f-cols{ grid-template-columns:1fr 1fr; } }

/* ============ Added for the full site: articles, hubs, legal pages ============ */

/* ---------- Shared article layout ---------- */
.article{ max-width:760px; margin:0 auto; padding:52px 22px 10px; }
.article h1{ font-size:clamp(32px,4.6vw,46px); line-height:1.12; letter-spacing:-.025em; font-weight:800; margin:0 0 16px; }
.article .lede{ font-size:19px; line-height:1.55; color:var(--ink-2); margin:0 0 28px; }
.article p{ font-size:17px; line-height:1.7; margin:0 0 18px; }
.article h2{ font-size:26px; letter-spacing:-.02em; font-weight:800; margin:40px 0 14px; }
.article h3{ font-size:19px; font-weight:700; margin:26px 0 10px; }
.article ul:not(.related-list):not(.principles){ margin:0 0 18px; padding-left:24px; }
.article ul:not(.related-list):not(.principles) li{ font-size:17px; line-height:1.65; margin:0 0 10px; }
.breadcrumb{ font-size:13.5px; color:var(--ink-3); margin:0 0 24px; }
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb span.sep{ margin:0 8px; }
.hero-img{ border-radius:var(--radius); border:1px solid var(--line); background:var(--orange-soft); overflow:hidden; margin:0 0 32px; }
.hero-img img{ width:100%; height:auto; }
ol.steps{ margin:0 0 12px; padding-left:26px; }
ol.steps li{ font-size:17px; line-height:1.65; margin:0 0 18px; padding-left:6px; }
ol.steps li::marker{ color:var(--orange); font-weight:800; }
.callout{ background:var(--orange-soft); border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:14px; padding:22px 24px; margin:10px 0 32px; }
.callout h2{ margin-top:0; }
.callout ul{ margin:0; padding-left:22px; }
.callout li{ font-size:16px; line-height:1.6; margin:0 0 10px; }
.callout li:last-child{ margin-bottom:0; }
.related{ border-top:1px solid var(--line); margin-top:44px; padding-top:8px; }
.related-list{ list-style:none; margin:0; padding:0; }
.related-list li{ padding:12px 0; border-bottom:1px solid var(--line); }
.related-list li:last-child{ border-bottom:0; }
.related-list a{ font-weight:600; font-size:16.5px; }

/* ---------- Page heads (hubs, downloads, info pages) ---------- */
.page-head{ padding:64px 0 8px; }
.page-head h1{ font-size:clamp(34px,5vw,50px); letter-spacing:-.025em; font-weight:800; margin:14px 0 14px; }
.page-head .lede{ font-size:18px; line-height:1.55; color:var(--ink-2); max-width:62ch; margin:0 0 32px; }
.page-head .cat-ic{ width:58px; height:58px; border-radius:16px; background:var(--orange-soft); color:var(--orange); display:grid; place-items:center; }
.page-head .cat-ic img{ width:30px; height:30px; display:block; }
.guide-list{ list-style:none; margin:0 0 40px; padding:0; }
.guide-list li{ padding:18px 0; border-bottom:1px solid var(--line); }
.guide-list li:last-child{ border-bottom:0; }
.guide-list a{ font-size:18px; font-weight:700; }
.guide-list p{ margin:6px 0 0; font-size:15px; line-height:1.55; color:var(--ink-2); max-width:68ch; }
.guide-list .kicker{ display:block; margin-bottom:4px; }

/* ---------- Legal / info pages ---------- */
.legal{ max-width:760px; margin:0 auto; padding:52px 22px 10px; }
.legal h1{ font-size:clamp(32px,4.6vw,44px); letter-spacing:-.025em; font-weight:800; margin:0 0 14px; }
.legal .lede{ font-size:18px; line-height:1.55; color:var(--ink-2); margin:0 0 28px; }
.legal h2{ font-size:23px; letter-spacing:-.015em; font-weight:800; margin:36px 0 12px; }
.legal p, .legal li{ font-size:16.5px; line-height:1.7; margin:0 0 14px; }
.legal ul, .legal ol{ padding-left:24px; }

/* ---------- Category cards as links ---------- */
a.cat{ text-decoration:none; color:var(--ink); }
a.cat:hover{ text-decoration:none; }
.cat .ic img{ width:23px; height:23px; display:block; }

/* ---------- Small screens ---------- */
@media (max-width:760px){
  .article, .legal{ padding-top:36px; }
  .page-head{ padding-top:44px; }
}