/* ============ Base Theme Tokens (uses your existing :root in style.css) ============ */
    :root{
      --page-max: 1000px;

      --ink: rgba(26,26,46,.96);
      --muted: rgba(26,26,46,.72);
      --surface: rgba(248,249,250,.72);
      --surface2: rgba(248,249,250,.92);
      --line: rgba(26,26,46,.12);
      --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);

      --radius: 18px;
      --radius2: 22px;

      --brand: var(--primary-color);
      --brand2: var(--accent-color);
      --gold: var(--secondary-color);
    }

    *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin: 0;
      color: var(--ink);
      background: var(--light-color);
      overflow-x: hidden;
    }
    img{ max-width: 100%; display:block; }
    a{ color: inherit; }

    /* ============ Header (Sticky + Premium) ============ */
    .header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(248,249,250,.84);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(26,26,46,.10);
    }
    .container{
      width: min(var(--container-width, 1200px), 100% - 36px);
      margin-inline: auto;
    }
    .navbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      padding: 14px 0;
    }
    .logo{
      display:flex;
      align-items:center;
      gap: 10px;
      text-decoration:none;
      font-weight: 900;
      letter-spacing: .2px;
    }
    .logo-image{
      width: 42px;
      height: 42px;
      border-radius: 12px;
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(26,26,46,.10);
      background: rgba(255,255,255,.7);
    }

    /* Desktop nav */
    .nav-menu{ display:block; }
    .nav-list{
      display:flex;
      align-items:center;
      gap: 10px;
      list-style:none;
      margin:0;
      padding:0;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      padding: 10px 12px;
      border-radius: 12px;
      text-decoration:none;
      color: var(--ink);
      font-weight: 700;
      opacity: .86;
      transition: var(--transition, all .25s ease);
    }
    .nav-link:hover{
      opacity: 1;
      background: rgba(26,140,255,.10);
    }
    .nav-link.active{
      opacity: 1;
      background: linear-gradient(135deg, rgba(0,107,214,.16), rgba(26,140,255,.10));
      border: 1px solid rgba(26,140,255,.18);
    }

    /* Mobile toggle button */
    .nav-toggle{
      display:none;
      width: 46px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(26,26,46,.14);
      background: rgba(255,255,255,.7);
      box-shadow: var(--shadow-soft);
      cursor:pointer;
      position: relative;
    }
    .nav-toggle span{
      position:absolute;
      left: 12px;
      right: 12px;
      height: 2px;
      background: var(--ink);
      border-radius: 99px;
      transition: transform .25s ease, top .25s ease, opacity .2s ease;
    }
    .nav-toggle span:nth-child(1){ top: 14px; }
    .nav-toggle span:nth-child(2){ top: 21px; opacity: .85; }
    .nav-toggle span:nth-child(3){ top: 28px; }

    /* ============ Mobile Menu Overlay + Panel ============ */
    .nav-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.38);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      z-index: 999;
    }
    .nav-panel{
      position: fixed;
      left: 50%;
      top: 78px;
      transform: translateX(-50%) translateY(-10px);
      width: min(560px, calc(100% - 26px));
      background: rgba(248,249,250,.96);
      border: 1px solid rgba(26,26,46,.12);
      border-radius: 18px;
      box-shadow: 0 22px 60px rgba(0,0,0,.22);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
      z-index: 1001;
      overflow: hidden;
    }
    .nav-panel .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 14px;
      border-bottom: 1px solid rgba(26,26,46,.10);
      background:
        radial-gradient(700px 180px at 20% 0%, rgba(26,140,255,.18), transparent 60%),
        radial-gradient(700px 180px at 90% 0%, rgba(219,174,38,.16), transparent 60%);
    }
    .panel-title{
      display:flex;
      align-items:center;
      gap: 10px;
      font-weight: 900;
    }
    .panel-close{
      width: 42px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(26,26,46,.14);
      background: rgba(255,255,255,.75);
      cursor:pointer;
      position: relative;
    }
    .panel-close:before,
    .panel-close:after{
      content:"";
      position:absolute;
      left: 12px;
      right: 12px;
      top: 50%;
      height: 2px;
      background: var(--ink);
      border-radius: 99px;
    }
    .panel-close:before{ transform: translateY(-50%) rotate(45deg); }
    .panel-close:after{ transform: translateY(-50%) rotate(-45deg); }

    .nav-panel .panel-body{ padding: 10px 10px 14px; }
    .nav-panel .panel-links{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap: 8px;
    }
    .nav-panel .panel-links a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 12px 12px;
      border-radius: 14px;
      text-decoration:none;
      font-weight: 800;
      color: var(--ink);
      border: 1px solid rgba(26,26,46,.10);
      background: rgba(255,255,255,.72);
      transition: var(--transition, all .25s ease);
    }
    .nav-panel .panel-links a:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-soft);
      border-color: rgba(26,140,255,.22);
    }
    .nav-panel .panel-cta{
      margin-top: 10px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(26,140,255,.18);
      background: linear-gradient(135deg, rgba(0,107,214,.10), rgba(26,140,255,.06));
    }
    .nav-panel .panel-cta p{
      margin: 0 0 10px;
      color: var(--muted);
      line-height: 1.6;
      font-size: .95rem;
    }
    .nav-panel .panel-cta a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 11px 14px;
      border-radius: 12px;
      text-decoration:none;
      font-weight: 900;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: #fff;
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: var(--shadow-soft);
    }

    /* Open states */
    body.nav-open{ overflow: hidden; }
    body.nav-open .nav-overlay{
      opacity: 1;
      pointer-events: auto;
    }
    body.nav-open .nav-panel{
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    /* Toggle animation into X */
    body.nav-open #navToggle span:nth-child(1){ top: 21px; transform: rotate(45deg); }
    body.nav-open #navToggle span:nth-child(2){ opacity: 0; }
    body.nav-open #navToggle span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

    /* Responsive: switch to mobile menu */
    @media (max-width: 900px){
      .nav-menu{ display:none; }
      .nav-toggle{ display:inline-block; }
    }

    /* ============ Blog Page Layout (Your premium styles + a few fixes) ============ */
    .page-wrap{ padding: 26px 0 70px; }
    .page-container{ max-width: var(--page-max); margin: 0 auto; padding: 0 18px; }

    .breadcrumbs a{ color: var(--ink); opacity: .8; text-decoration: none; }
    .breadcrumbs a:hover{ opacity: 1; text-decoration: underline; }

    .hero{
      margin-top: 14px;
      border: 1px solid var(--line);
      background:
        radial-gradient(1100px 360px at 20% 10%, rgba(26,140,255,.18), transparent 55%),
        radial-gradient(900px 300px at 85% 25%, rgba(219,174,38,.14), transparent 55%),
        linear-gradient(135deg, rgba(0,107,214,.10), rgba(26,140,255,.05));
      border-radius: var(--radius2);
      box-shadow: var(--shadow, var(--shadow-soft));
      overflow: hidden;
    }
    .hero-inner{ padding: 26px 22px; }

    .kicker{
      display:inline-flex; gap:10px; align-items:center;
      font-size: .92rem; color: var(--muted);
      background: rgba(248,249,250,.75);
      border: 1px solid var(--line);
      padding: 8px 12px; border-radius: 999px;
    }
    .kicker .dot{
      width: 8px; height: 8px; border-radius: 50%;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
    }

    h1{
      margin: 14px 0 8px;
      line-height: 1.08;
      font-size: clamp(2rem, 3.2vw, 2.65rem);
      letter-spacing: -0.02em;
      font-family: "EB Garamond", serif;
    }

    .meta{
      display:flex; flex-wrap: wrap; gap: 10px 14px;
      color: var(--muted); font-size: .95rem;
      margin-top: 8px;
    }
    .meta span{
      display:inline-flex; gap:8px; align-items:center;
      padding: 8px 12px;
      background: rgba(248,249,250,.78);
      border: 1px solid var(--line);
      border-radius: 999px;
    }

    .grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 18px;
    }
    @media (min-width: 920px){
      .grid{ grid-template-columns: 1.4fr .6fr; align-items: start; }
      .sticky{ position: sticky; top: 96px; } /* aligns under header */
    }

    .card{
      background: rgba(248,249,250,.98);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow, var(--shadow-soft));
    }
    .card .pad{ padding: 18px; }

    .toc a{ text-decoration: none; color: var(--ink); opacity: .9; }
    .toc a:hover{ opacity: 1; text-decoration: underline; }
    .toc ol{ margin: 10px 0 0; padding-left: 18px; }
    .toc li{ margin: 8px 0; }

    .section h2{
      margin: 18px 0 10px;
      font-size: 1.35rem;
      letter-spacing: -0.01em;
    }
    .section h3{ margin: 14px 0 8px; font-size: 1.1rem; }
    .lead{ color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

    .callout{
      border-left: 4px solid var(--brand);
      background: rgba(0,107,214,.07);
      border-radius: 14px;
      padding: 14px 14px;
      margin: 14px 0;
    }
    .callout strong{ color: var(--ink); }

    .badges{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .badge{
      font-size: .9rem;
      color: var(--muted);
      background: rgba(248,249,250,.85);
      border: 1px solid var(--line);
      padding: 7px 10px;
      border-radius: 999px;
    }
    .badge.gold{
      border-color: rgba(219,174,38,.35);
      background: rgba(219,174,38,.10);
    }

    .checklist{
      margin: 10px 0 0; padding-left: 0; list-style: none;
      display: grid; gap: 10px;
    }
    .checklist li{
      display:flex; gap: 10px;
      padding: 12px 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(248,249,250,.9);
    }
    .icon{
      width: 26px; height: 26px; flex: 0 0 26px;
      border-radius: 8px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(26,140,255,.12);
      border: 1px solid rgba(26,140,255,.22);
      color: var(--brand);
      font-weight: 800;
      line-height: 1;
    }

    .cta{
      background:
        linear-gradient(135deg, rgba(0,107,214,.10), rgba(26,140,255,.06)),
        radial-gradient(900px 220px at 90% 10%, rgba(219,174,38,.14), transparent 60%);
      border: 1px solid rgba(26,140,255,.20);
      border-radius: 16px;
      padding: 16px;
    }
    .cta h3{ margin: 0 0 6px; }
    .cta p{ margin: 0 0 12px; color: var(--muted); }

    .btn-row{ display:flex; flex-wrap: wrap; gap: 10px; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(26,140,255,.25);
      background: rgba(248,249,250,.95);
      text-decoration: none;
      color: var(--ink);
      font-weight: 900;
      transition: var(--transition, all .25s ease);
    }
    .btn.primary{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: #fff;
      border-color: rgba(0,0,0,.08);
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow, var(--shadow-soft)); }

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

    .faq details{
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 12px;
      background: rgba(248,249,250,.9);
      margin: 10px 0;
    }
    .faq summary{ cursor: pointer; font-weight: 900; }
    .faq p{ margin: 8px 0 0; color: var(--muted); line-height: 1.7; }

    .author{
      display:flex; gap: 12px; align-items: center;
      border: 1px solid var(--line);
      background: rgba(248,249,250,.9);
      border-radius: 16px;
      padding: 14px;
      margin-top: 18px;
    }
    .avatar{
      width: 44px; height: 44px; border-radius: 14px;
      background: rgba(0,107,214,.12);
      border: 1px solid rgba(0,107,214,.22);
      display:flex; align-items:center; justify-content:center;
      font-weight: 900; color: var(--brand);
    }
    .author small{ color: var(--muted); display:block; margin-top: 2px; }