*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
      background: #fff;
      color: #111;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; }

    /* ── Sticky header ── */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,0.85);
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .site-header__inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; object-fit: cover; }
    .brand span {
      font-family: Mulish, sans-serif;
      font-weight: 800;
      font-size: 15px;
      line-height: normal;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: #111;
    }
    .site-header__nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .navlink {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0,0,0,0.62);
      text-decoration: none;
      padding: 9px 14px;
      border-radius: 9px;
      transition: color 0.18s, background 0.18s;
      white-space: nowrap;
    }
    .navlink:hover { color: #111; background: rgba(0,0,0,0.04); }

    /* Mobile: the header needs 450px of nav on a 390px screen, so flexbox used to
       compress the only shrinkable item (the logo) into a flattened sliver.
       .brand img is now flex:none, and the two links a phone reader does not need
       (the external academy link, and the B2B Advertise CTA) are dropped so the
       row fits: logo + Reviews/Blog/Archive + Subscribe ~= 310px. */
    @media (max-width: 600px) {
      .site-header__inner { padding: 0 14px; }
      .brand span { display: none; }
      .site-header__nav { gap: 3px; }
      .navlink { padding: 7px 8px; font-size: 12px; }
      .site-header__nav .navlink:first-child { display: none; }
      .site-header__nav .btn-ghost { display: none; }
    }
    .btn-ghost {
      border: 1px solid rgba(0,0,0,0.12);
    }
    .btn-ghost:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.22); }
    .btn-primary {
      background: rgb(124, 52, 235);
      color: #fff;
      font-weight: 600;
    }
    .btn-primary:hover { background: rgb(150, 93, 239); color: #fff; }

    /* ── Hero ── */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 72px 24px 64px;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -20%;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      max-width: 100%;
      height: 600px;
      background: radial-gradient(ellipse, rgba(124, 52, 235, 0.08) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      max-width: 620px;
      width: 100%;
      text-align: center;
    }
    .eyebrow {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgb(124, 52, 235);
      margin-bottom: 18px;
    }

    h1 {
      font-family: Poppins, -apple-system, sans-serif;
      font-weight: 600;
      font-size: 38px;
      line-height: 1.25;
      letter-spacing: -1.6px;
      margin-bottom: 18px;
      background: linear-gradient(180deg, #111 40%, rgba(0,0,0,0.7) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .subtext {
      font-size: 18px;
      line-height: 1.7;
      color: rgba(0,0,0,0.6);
      margin-bottom: 28px;
      max-width: 460px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Form */
    .form-wrapper { margin-bottom: 16px; }
    .form-row {
      display: flex;
      align-items: center;
      gap: 0;
      max-width: 440px;
      margin: 0 auto;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,0.1);
      background: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      transition: border-color 0.2s;
    }
    .form-row:focus-within {
      border-color: rgba(124, 52, 235, 0.5);
      box-shadow: 0 0 0 3px rgba(124, 52, 235, 0.1);
    }
    .form-row input[type="email"] {
      flex: 1;
      height: 48px;
      border: none;
      padding: 0 18px;
      font-family: Inter, sans-serif;
      font-size: 15px;
      color: #111;
      outline: none;
      background: transparent;
      -webkit-appearance: none;
    }
    .form-row input[type="email"]::placeholder { color: rgba(0,0,0,0.3); }
    .form-row input[type="submit"], .form-row button[type="submit"] {
      height: 42px;
      padding: 0 24px;
      background: rgb(124, 52, 235);
      color: #fff;
      border: none;
      font-family: Inter, sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      -webkit-appearance: none;
      transition: background 0.2s;
      letter-spacing: -0.2px;
      margin: 5px 6px;
      border-radius: 8px;
    }
    .form-row input[type="submit"]:hover, .form-row button[type="submit"]:hover { background: rgb(150, 93, 239); }
    /* Mobile: stack the pill. A horizontal flex row overflows on a ~390px screen
       because the email input keeps its min-width:auto (placeholder width) and
       shoves the submit button past the rounded container. Covers BOTH submit
       types so the archive SPA's <button> stacks like the homepage's <input>. */
    @media (max-width: 720px) {
      .form-row {
        flex-direction: column;
        align-items: stretch;
        border: none;
        box-shadow: none;
        background: transparent;
        gap: 10px;
        max-width: 100%;
      }
      .form-row:focus-within { border-color: transparent; box-shadow: none; }
      .form-row input[type="email"] {
        flex: none; width: 100%; height: 50px; text-align: center;
        border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 0 18px; font-size: 16px;
      }
      .form-row input[type="submit"], .form-row button[type="submit"] {
        flex: none; width: 100%; height: 50px; margin: 0; border-radius: 12px; font-size: 16px;
      }
    }

    .w-form-done {
      display: none;
      max-width: 440px;
      margin: 12px auto 0;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      padding: 14px 20px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #166534;
    }
    .w-form-fail {
      display: none;
      max-width: 440px;
      margin: 12px auto 0;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 10px;
      padding: 14px 20px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #991b1b;
    }

    .trust-text {
      font-size: 13px;
      color: rgba(0,0,0,0.4);
      margin-bottom: 24px;
      letter-spacing: 0.2px;
    }

    .stars-row {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 28px;
    }
    .stars-row svg { width: 15px; height: 15px; }
    .stars-row .rating {
      font-size: 13px;
      font-weight: 500;
      color: rgba(0,0,0,0.6);
      margin-left: 8px;
    }

    .logos-section { margin-bottom: 0; }
    .logos-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2.5px;
      color: #bbb;
      font-weight: 500;
      margin-bottom: 24px;
    }
    .logos-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px 40px;
    }
    .logos-grid img {
      width: auto;
      filter: grayscale(100%) brightness(0);
      opacity: 0.3;
      transition: opacity 0.2s;
    }
    .logos-grid img:hover { opacity: 0.5; }
    /* NASA meatball needs internal contrast, so skip brightness(0) (matches dupple.com/techpresso) */
    .logos-grid img[alt="NASA"] { filter: grayscale(100%) contrast(0.8); opacity: 0.45; }
    .logos-grid img[alt="NASA"]:hover { opacity: 0.7; }

    /* ── Past issues ── */
    .issues {
      max-width: 1100px;
      margin: 8px auto 0;
      padding: 56px 20px 8px;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    .issues__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 28px;
    }
    .issues__head h2 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 700;
      font-size: 26px;
      color: #111;
      letter-spacing: -0.025em;
      margin: 0;
    }
    .issues__head p {
      font-size: 14px;
      color: rgba(0,0,0,0.45);
      margin: 6px 0 0;
    }
    .issues__head a {
      font-size: 14px;
      font-weight: 600;
      color: rgb(124, 52, 235);
      text-decoration: none;
      white-space: nowrap;
    }
    .issues__head a:hover { text-decoration: underline; }
    .issues-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }
    .issue-card {
      background: #fff;
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      text-decoration: none;
      display: flex;
      flex-direction: column;
    }
    .issue-card:hover {
      border-color: rgba(0,0,0,0.13);
      box-shadow: 0 8px 24px -8px rgba(0,0,0,0.10);
      transform: translateY(-2px);
    }
    .issue-card .issue-cover {
      width: 100%;
      aspect-ratio: 1200 / 630;
      object-fit: cover;
      object-position: center;
      display: block;
      background: #f3f3f3;
    }
    .issue-card .issue-body {
      padding: 18px 20px 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .issue-card .issue-date {
      font-size: 12px;
      color: #999;
      margin-bottom: 8px;
      letter-spacing: 0.01em;
    }
    .issue-card .issue-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: #111;
      margin-bottom: 8px;
      line-height: 1.4;
      letter-spacing: -0.01em;
    }
    .issue-card .issue-excerpt {
      font-size: 13.5px;
      color: #666;
      line-height: 1.55;
      margin-bottom: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex: 1;
    }
    .issue-card .issue-read {
      font-size: 13px;
      font-weight: 500;
      color: rgb(124, 52, 235);
      letter-spacing: 0.01em;
    }
    @keyframes skeleton-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .skeleton-card {
      background: #f5f5f5;
      border-radius: 12px;
      padding: 24px;
      min-height: 200px;
      animation: skeleton-pulse 1.5s ease-in-out infinite;
    }
    .skeleton-line { background: #e0e0e0; border-radius: 4px; }
    .view-all-wrap { text-align: center; margin: 36px 0 0; }
    .view-all {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      color: #111;
      text-decoration: none;
      padding: 11px 22px;
      border: 1px solid rgba(0,0,0,0.14);
      border-radius: 10px;
      transition: background 0.18s, border-color 0.18s;
    }
    .view-all:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.26); }

    /* ── Subscribe band ── */
    .subscribe-band {
      max-width: 1100px;
      margin: 64px auto 0;
      padding: 0 20px;
    }
    .subscribe-band__inner {
      background: #0b0022;
      border-radius: 20px;
      padding: 48px 32px;
      text-align: center;
      color: #fff;
    }
    .subscribe-band__inner h2 {
      font-family: Poppins, sans-serif;
      font-weight: 600;
      font-size: 26px;
      letter-spacing: -0.5px;
      margin: 0 0 10px;
    }
    .subscribe-band__inner p {
      font-size: 15px;
      color: rgba(255,255,255,0.6);
      margin: 0 0 24px;
    }
    .subscribe-band .form-row { box-shadow: none; }

    /* ── Footer ── */
    .site-footer {
      max-width: 1100px;
      margin: 64px auto 0;
      padding: 0 20px 48px;
      background: transparent;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    /* network band: every Dupple newsletter (à la Morning Brew), at the very bottom */
    .footer-network { padding: 32px 0 4px; margin-top: 28px; border-top: 1px solid rgba(0,0,0,0.06); }
    .footer-network__label {
      font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
      color: #bbb; font-weight: 600; margin-bottom: 20px;
    }
    .footer-network__grid { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; }
    .net-link {
      display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
      color: rgba(0,0,0,0.6); font-family: Mulish, sans-serif; font-weight: 800;
      font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; transition: color 0.18s;
    }
    .net-link:hover { color: #111; }
    .net-link img { width: 22px; height: 22px; border-radius: 6px; }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 16px;
      padding-top: 32px;
    }
    .footer-bottom .brand span { font-size: 14px; }
    .footer-bottom nav { display: flex; gap: 8px; flex-wrap: wrap; }
    .footer-bottom nav a {
      font-size: 13px;
      color: rgba(0,0,0,0.5);
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 8px;
    }
    .footer-bottom nav a:hover { color: #111; background: rgba(0,0,0,0.04); }
    .copyright { width: 100%; font-size: 12px; color: rgba(0,0,0,0.3); }

    /* ── Mobile ── */
    @media (max-width: 720px) {
      .site-header__inner { padding: 0 16px; }
      .hero { padding: 44px 20px 36px; }
      h1 { font-size: 29px; letter-spacing: -1px; }
      .subtext { font-size: 16px; margin-bottom: 24px; }
      .form-row {
        flex-direction: column;
        align-items: stretch;
        border: none;
        box-shadow: none;
        background: transparent;
        gap: 10px;
        max-width: 100%;
      }
      .form-row:focus-within { border-color: transparent; box-shadow: none; }
      .form-row input[type="email"] {
        flex: none; width: 100%; height: 50px; text-align: center;
        border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 0 18px; font-size: 16px;
      }
      .form-row input[type="submit"] {
        flex: none; width: 100%; height: 50px; margin: 0; border-radius: 12px; font-size: 16px;
      }
      .logos-section { display: none; }
      .issues { padding-top: 44px; }
      .issues__head { flex-direction: column; align-items: flex-start; gap: 4px; }
      .subscribe-band__inner { padding: 36px 22px; }
      .subscribe-band .form-row input[type="email"] { background: #fff; }
    }
  
  :root { --accent: rgb(124, 52, 235); --radius: 12px; --radius-sm: max(3px, calc(12px - 4px)); --label-font: inherit; }
  .g-article { background:#fafafa; }
  .g-hero { background:#0f172a; color:#fff; }
  .g-wrap { max-width:720px; margin:0 auto; padding-left:24px; padding-right:24px; }
  .g-hero__inner { max-width:720px; margin:0 auto; padding:56px 24px; }
  @media (min-width:768px){ .g-hero__inner { padding:80px 24px; } }
  .g-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px; color:#94a3b8; margin-bottom:36px; }
  .g-crumb a { color:#94a3b8; text-decoration:none; } .g-crumb a:hover { color:#fff; }
  .g-crumb svg { width:14px; height:14px; opacity:.6; } .g-crumb .cur { color:#e2e8f0; }
  .g-badges { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; }
  .g-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; padding:4px 12px; border-radius:6px; }
  .g-badge svg { width:14px; height:14px; }
  .g-badge--guide { color:color-mix(in srgb, var(--accent) 55%, #fff); background:color-mix(in srgb, var(--accent) 18%, #0f172a); }
  .g-badge--rev { color:#6ee7b7; background:rgba(16,185,129,.15); }
  /* reset the mini-site's gradient-text effect (background-clip:text + transparent fill) that leaks onto our headings */
  .g-article h1, .g-article h2, .g-article h3, .g-hub h1, .g-hub h2 { -webkit-text-fill-color:currentColor !important; background-image:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; }
  .g-hero h1 { font-family:Poppins,sans-serif; font-size:30px; line-height:1.22; font-weight:500; letter-spacing:-.75px; margin:0 0 16px; padding-top:2px; }
  @media (min-width:768px){ .g-hero h1 { font-size:44px; line-height:1.15; } }
  .g-deck { font-size:17px; line-height:1.6; color:#e2e8f0; max-width:576px; margin:0; }
  .g-byline { margin-top:24px; display:flex; align-items:center; gap:12px; font-size:14px; color:#94a3b8; }
  .g-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; }
  .g-byline strong { color:#e2e8f0; font-weight:600; display:block; }
  .g-byline .sub { font-size:12px; color:#94a3b8; }
  .g-auth { margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; font-size:12px; }
  .g-auth__l { display:inline-flex; align-items:center; gap:8px; color:#94a3b8; }
  .g-auth__l svg { width:14px; height:14px; color:color-mix(in srgb, var(--accent) 55%, #fff); }
  .g-auth__l b { color:#e2e8f0; font-weight:600; }
  .g-auth__stat { display:inline-flex; align-items:center; gap:6px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:4px 12px; color:#94a3b8; }
  .g-auth__stat b { color:#f1f5f9; font-weight:700; }
  .g-tldr { margin-top:36px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); padding:20px 24px; }
  .g-tldr__h { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .g-tldr__h svg { width:16px; height:16px; color:color-mix(in srgb, var(--accent) 60%, #fff); }
  .g-tldr__h span { font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:color-mix(in srgb, var(--accent) 60%, #fff); }
  .g-tldr__b { font-size:15px; line-height:1.75; color:#e2e8f0; } .g-tldr__b strong { color:#fff; }
  /* sticky toc */
  .g-toc { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(0,0,0,.05); }
  .g-toc__row { max-width:720px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; gap:4px; overflow-x:auto; }
  .g-toc__row::-webkit-scrollbar { display:none; } .g-toc__row { scrollbar-width:none; }
  .g-toc a { flex:none; font-size:13px; font-weight:500; padding:6px 12px; border-radius:6px; white-space:nowrap; color:#64748b; text-decoration:none; transition:.12s; }
  .g-toc a:hover { color:#1e293b; background:rgba(0,0,0,.04); }
  /* body */
  .g-body { max-width:720px; margin:0 auto; padding:48px 24px 80px; }
  .g-sec { margin-bottom:56px; scroll-margin-top:64px; }
  .g-sec h2 { font-family:Poppins,sans-serif; font-size:22px; font-weight:600; color:#0f172a; letter-spacing:-.3px; margin:0 0 16px; }
  .g-prose { font-size:16px; line-height:1.8; color:#475569; }
  .g-prose p { margin:0 0 20px; } .g-prose p:last-child { margin-bottom:0; } .g-prose strong { color:#1e293b; font-weight:700; }
  .g-prose ul { margin:0 0 20px; padding-left:22px; } .g-prose li { margin-bottom:8px; }
  .g-prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-color:color-mix(in srgb, var(--accent) 30%, transparent); }
  .g-div { height:1px; background:linear-gradient(to right, transparent, #e2e8f0, transparent); margin-bottom:56px; }
  .g-subtitle { font-size:14px; color:#64748b; margin:6px 0 0; }
  /* top picks */
  .g-card { border-radius:12px; border:1px solid rgba(0,0,0,.06); background:#fff; }
  .g-pick { padding:20px 24px; } .g-pick + .g-pick { border-top:1px solid rgba(0,0,0,.04); }
  .g-pick__top { display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
  .g-rank { width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none; margin-top:2px; }
  .g-rank--1 { background:var(--accent); color:#fff; } .g-rank--2 { background:#1e293b; color:#fff; } .g-rank--3 { background:#f1f5f9; color:#64748b; } .g-rank--n { background:#f1f5f9; color:#64748b; }
  .g-logo { width:32px; height:32px; border-radius:7px; flex:none; margin-top:1px; object-fit:contain; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.06); }
  .g-pick__hd { min-width:0; flex:1; }
  .g-pick__name { display:flex; align-items:center; gap:10px; text-decoration:none; }
  .g-pick__name h3 { font-size:16px; font-weight:600; color:#0f172a; margin:0; font-family:Poppins,sans-serif; }
  .g-pick__name:hover h3 { color:var(--accent); }
  .g-toppick { font-size:10px; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, #fff); padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.3px; }
  .g-pick__ind { padding-left:44px; }
  .g-bestfor { font-size:14px; color:#475569; margin:0 0 8px; }
  .g-price { font-size:13px; color:#334155; margin:0 0 12px; }
  .g-price span { color:#94a3b8; font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.4px; margin-right:7px; }
  .g-pc { display:flex; flex-direction:column; gap:6px; font-size:14px; color:#475569; margin-bottom:12px; }
  .g-pc__row { display:flex; align-items:flex-start; gap:8px; line-height:1.55; }
  .g-pc__p { color:#10b981; font-weight:700; flex:none; } .g-pc__c { color:#f43f5e; font-weight:700; flex:none; }
  .g-visit { font-size:13px; color:var(--accent); text-decoration:none; font-weight:500; } .g-visit:hover { text-decoration:underline; }
  @media (max-width:600px){ .g-pick__ind { padding-left:0; } }
  /* key features */
  .g-feat { padding:0; } .g-feat__row { padding:16px 24px; display:flex; align-items:flex-start; gap:16px; } .g-feat__row + .g-feat__row { border-top:1px solid rgba(0,0,0,.04); }
  .g-feat__dot { width:8px; height:8px; border-radius:50%; margin-top:8px; flex:none; background:var(--accent); }
  .g-feat__dot--ess { background:#10b981; }
  .g-feat__name { font-size:15px; font-weight:600; color:#334155; }
  .g-feat__ess { font-size:11px; font-weight:600; color:#059669; background:#ecfdf5; padding:1px 8px; border-radius:4px; margin-left:8px; }
  .g-feat__desc { font-size:14px; color:#64748b; margin-top:4px; line-height:1.55; }
  .g-feat__plain { font-size:15px; color:#475569; line-height:1.6; }
  /* mistakes + tips */
  .g-mt { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:56px; }
  @media (min-width:768px){ .g-mt { grid-template-columns:1fr 1fr; } }
  .g-mt__card { border-radius:12px; border:1px solid rgba(0,0,0,.06); background:#fff; padding:20px 24px; }
  .g-mt__h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin:0 0 18px; display:flex; align-items:center; gap:8px; }
  .g-mt__h svg { width:16px; height:16px; }
  .g-mt__h--m { color:#d97706; } .g-mt__h--t { color:var(--accent); }
  .g-mt__list { display:flex; flex-direction:column; gap:14px; }
  .g-mt__item { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:#475569; line-height:1.55; }
  .g-mt__bul { font-weight:700; flex:none; } .g-mt__bul--m { color:#f59e0b; } .g-mt__bul--t { color:var(--accent); }
  /* bottom line */
  .g-bl { background:#0f172a; border-radius:12px; padding:24px 28px; margin-bottom:56px; }
  .g-bl h2 { font-size:16px; font-weight:600; color:#fff; margin:0 0 14px; display:flex; align-items:center; gap:8px; font-family:Poppins,sans-serif; }
  .g-bl h2 svg { width:16px; height:16px; color:color-mix(in srgb, var(--accent) 60%, #fff); }
  .g-bl__b { font-size:15px; line-height:1.8; color:#e2e8f0; } .g-bl__b p { margin:0 0 14px; } .g-bl__b p:last-child { margin:0; } .g-bl__b strong { color:#fff; }
  /* faq */
  .g-faq__item { padding:20px 24px; } .g-faq__item + .g-faq__item { border-top:1px solid rgba(0,0,0,.04); }
  .g-faq__q { font-size:15px; font-weight:600; color:#334155; margin:0 0 8px; }
  .g-faq__a { font-size:15px; color:#475569; line-height:1.6; } .g-faq__a a { color:var(--accent); }
  /* related + cta */
  .g-rel__h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#94a3b8; margin:0 0 16px; }
  .g-rel__list { display:flex; flex-wrap:wrap; gap:10px; }
  .g-rel__list a { padding:8px 16px; border-radius:8px; border:1px solid rgba(0,0,0,.06); background:#fff; font-size:14px; font-weight:500; color:#475569; text-decoration:none; transition:.12s; }
  .g-rel__list a:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 20%, transparent); }
  .g-cta { text-align:center; padding:48px 0 8px; border-top:1px solid rgba(0,0,0,.04); }
  .g-cta h2 { font-size:22px; font-weight:600; color:#0f172a; margin:0 0 8px; font-family:Poppins,sans-serif; }
  .g-cta p { font-size:14px; color:#64748b; margin:0 0 28px; }
  .g-cta a { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:#0f172a; color:#fff; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; } .g-cta a:hover { background:#1e293b; }
  .g-cta a svg { width:16px; height:16px; }
  /* hub */
  .g-hub { max-width:960px; margin:0 auto; padding:56px 24px 72px; }
  .g-hub__head { text-align:center; margin-bottom:36px; }
  .g-hub__head .ey { font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
  .g-hub__head h1 { font-family:Poppins,sans-serif; font-size:34px; font-weight:500; letter-spacing:-.8px; color:#0f172a; margin:12px 0 10px; padding-top:2px; }
  .g-hub__head p { font-size:17px; color:#64748b; max-width:600px; margin:0 auto; }
  /* Hero stat strip. Both numbers are counted from the JSON at build time, so the
     page states what it actually contains instead of claiming to be thorough. */
  .g-hub__stats { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 28px; margin:22px 0 0; font-family:var(--label-font); }
  .g-hub__stat { font-size:13px; color:#475569; display:inline-flex; align-items:baseline; gap:6px; }
  .g-hub__stat b { font-size:19px; font-weight:600; color:#0f172a; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
  /* Section split. A 12-tool comparison and a single-product review answer
     different questions, so they get different weight instead of one flat wall. */
  .g-hub__sec { margin-top:44px; }
  .g-hub__sec:first-of-type { margin-top:32px; }
  /* wrap, or the note sits beside the heading and pushes the row wide on phones */
  .g-hub__sech { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid rgba(16,24,40,.08); }
  .g-hub__sech h2 { font-family:Poppins,sans-serif; font-size:20px; font-weight:600; color:#0f172a; letter-spacing:-.4px; margin:0; }
  .g-hub__sech span { font-size:13px; color:#94a3b8; }
  .g-hub__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; }
  /* Reviews are short and single-purpose: three to a row, no arrow row, so 21
     items stop reading as four-per-screen. */
  .g-hub__grid--tight { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
  .g-hub__grid--tight .g-hub__card { padding:18px 20px 16px; }
  .g-hub__grid--tight .g-hub__card h2 { font-size:16px; margin-bottom:6px; }
  .g-hub__grid--tight .g-hub__card p { font-size:13.5px; margin-bottom:12px; }
  /* Clamp so ragged description lengths stop making every row a different height. */
  .g-hub__card p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .g-hub__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; font-family:var(--label-font); font-size:11.5px; color:#94a3b8; letter-spacing:.2px; }
  .g-hub__meta b { color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
  .g-hub__meta i { font-style:normal; color:#cbd5e1; }
  .g-hub__card { position:relative; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(16,24,40,.07); border-radius:14px; padding:26px 26px 22px; background:#fff; text-decoration:none; box-shadow:0 1px 2px rgba(16,24,40,.04); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
  .g-hub__card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); opacity:0; transition:opacity .2s ease; }
  .g-hub__card:hover { box-shadow:0 14px 30px -12px rgba(16,24,40,.2), 0 3px 8px rgba(16,24,40,.06); transform:translateY(-3px); border-color:rgba(16,24,40,.1); }
  .g-hub__card:hover::before { opacity:1; }
  .g-hub__card h2 { font-family:Poppins,sans-serif; font-size:18px; font-weight:600; color:#0f172a; margin:0 0 10px; letter-spacing:-.3px; line-height:1.3; }
  .g-hub__card p { font-size:14px; color:#64748b; line-height:1.6; margin:0 0 18px; flex:1; }
  .g-hub__more { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--accent); }
  .g-hub__more svg { width:14px; height:14px; transition:transform .2s ease; }
  .g-hub__card:hover .g-hub__more svg { transform:translateX(4px); }
  /* ---- per-site theme knobs ---- */
  /* Comparison table. Scrolls inside its own container so the page body never
     scrolls sideways on a phone, which is where most of this traffic reads. */
  .g-cmp { margin-top:22px; overflow-x:auto; border:1px solid rgba(16,24,40,.09); border-radius:var(--radius); background:#fff; }
  .g-cmp table { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
  .g-cmp caption { caption-side:top; text-align:left; padding:14px 16px 10px; font-family:var(--label-font); font-size:12px; letter-spacing:.3px; color:#64748b; }
  .g-cmp th, .g-cmp td { padding:11px 16px; text-align:left; vertical-align:top; border-top:1px solid rgba(16,24,40,.07); }
  .g-cmp thead th { font-family:var(--label-font); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:#64748b; font-weight:700; background:#f8fafc; border-top:none; }
  .g-cmp tbody th { font-weight:700; color:#0f172a; white-space:nowrap; }
  .g-cmp tbody td { color:#475569; line-height:1.55; }
  .g-cmp tbody tr:hover { background:#fafbfc; }
  .g-chart { margin:18px 0 0; padding:16px; border:1px solid rgba(16,24,40,.09); border-radius:var(--radius); background:#fff; }
  .g-cmp__src { margin:10px 2px 0; font-size:12.5px; line-height:1.55; color:#94a3b8; }
  .g-card, .g-mt__card, .g-tldr, .g-bl, .g-hub__card { border-radius:var(--radius); }
  .g-badge, .g-toppick, .g-feat__ess, .g-mt__h, .g-rel__h, .g-tldr__h span, .g-hub__head .ey, .g-price span, .g-auth__stat { font-family:var(--label-font); }
  .g-rank { border-radius:var(--radius-sm); }
  .g-rank--circle { border-radius:50%; }
  .g-rank--medal.g-rank--1 { background:linear-gradient(135deg,#fcd34d,#d97706); color:#fff; }
  .g-rank--medal.g-rank--2 { background:linear-gradient(135deg,#e2e8f0,#94a3b8); color:#fff; }
  .g-rank--medal.g-rank--3 { background:linear-gradient(135deg,#e0b088,#a16207); color:#fff; }
  /* light hero variant (finpresso, marketingshot) */
  .g-hero--light { background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, #fff) 0%, #fafafa 100%); color:#0f172a; border-bottom:1px solid rgba(0,0,0,.06); }
  .g-hero--light .g-crumb, .g-hero--light .g-crumb a { color:#94a3b8; } .g-hero--light .g-crumb a:hover { color:#0f172a; } .g-hero--light .g-crumb .cur { color:#475569; }
  .g-hero--light h1 { color:#0f172a; }
  .g-hero--light .g-deck { color:#475569; }
  .g-hero--light .g-badge--guide { color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, #fff); }
  .g-hero--light .g-badge--rev { color:#059669; background:#ecfdf5; }
  .g-hero--light .g-byline { color:#64748b; } .g-hero--light .g-byline strong { color:#0f172a; }
  .g-hero--light .g-auth { border-top-color:rgba(0,0,0,.08); } .g-hero--light .g-auth__l { color:#64748b; } .g-hero--light .g-auth__l b { color:#0f172a; } .g-hero--light .g-auth__l svg { color:var(--accent); }
  .g-hero--light .g-auth__stat { background:#fff; border-color:rgba(0,0,0,.08); color:#64748b; } .g-hero--light .g-auth__stat b { color:#0f172a; }
  .g-hero--light .g-tldr { background:#fff; border-color:rgba(0,0,0,.07); box-shadow:0 1px 3px rgba(0,0,0,.04); }
  .g-hero--light .g-tldr__h svg, .g-hero--light .g-tldr__h span { color:var(--accent); }
  .g-hero--light .g-tldr__b { color:#475569; } .g-hero--light .g-tldr__b strong { color:#0f172a; }
  /* dark hero: accent glow so it is not a flat Toolradar-style slab */
  .g-hero--dark { background-color:#0b1120; background-image:radial-gradient(760px 340px at 50% -90px, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%); }
  /* mono/technical hero (cyberpresso, devshot): security-console grid + bracketed badges + terminal TL;DR */
  .g-hero--mono { background-image:radial-gradient(760px 340px at 50% -90px, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%), linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:auto, 42px 42px, 42px 42px; }
  .g-hero--mono .g-badge { background:transparent !important; border:1px solid; border-radius:0; padding:3px 10px; }
  .g-hero--mono .g-badge--guide { color:color-mix(in srgb, var(--accent) 62%, #fff); border-color:color-mix(in srgb, var(--accent) 42%, transparent); }
  .g-hero--mono .g-badge--guide::before { content:'[ '; opacity:.5; } .g-hero--mono .g-badge--guide::after { content:' ]'; opacity:.5; }
  .g-hero--mono .g-badge--rev { color:#6ee7b7; border-color:rgba(16,185,129,.4); }
  .g-hero--mono .g-tldr { border-radius:0; border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--accent); background:rgba(0,0,0,.3); }
  .g-hero--mono .g-tldr__h span::before { content:'> '; }
  .g-hero--mono .g-auth__stat { border-radius:0; }
  /* single-product review mode: subject card (no rank) + compact alternatives */
  .g-pick--solo .g-pick__top { align-items:center; }
  .g-pick--solo .g-pick__ind { padding-left:0; }
  .g-alts { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
  .g-alt { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; }
  .g-alt__logo { width:30px; height:30px; border-radius:7px; flex:none; object-fit:contain; background:#f8fafc; }
  .g-alt__b { flex:1; min-width:0; }
  .g-alt__name { font-weight:700; color:#0f172a; font-size:15px; }
  .g-alt__desc { font-size:13px; color:#64748b; margin-top:2px; line-height:1.5; }
  .g-alt__link { flex:none; font-size:13px; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap; }
  .g-alt__link:hover { text-decoration:underline; }
  /* lead image */
  .g-lead { margin:0 0 8px; border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.07); background:#f8fafc; }
  .g-lead img { display:block; width:100%; height:auto; max-height:420px; object-fit:cover; }
  .g-lead--logo { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, #fff), color-mix(in srgb, var(--accent) 4%, #fff) 72%); display:flex; align-items:center; justify-content:center; }
  .g-lead--logo .g-lead__brand { display:flex; flex-direction:column; align-items:center; gap:16px; padding:44px 32px; }
  .g-lead__logo { width:76px; height:76px; border-radius:18px; background:#fff; object-fit:contain; padding:10px; box-shadow:0 6px 22px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.05); }
  .g-lead__name { font-family:Poppins,sans-serif; font-weight:700; font-size:23px; letter-spacing:-.02em; color:#0f172a; }
  /* at-a-glance stats strip */
  .g-stats { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px; }
  .g-stat { flex:1 1 140px; min-width:120px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:12px 14px; }
  .g-stat__l { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; font-weight:600; }
  .g-stat__v { display:block; font-size:16px; color:#0f172a; font-weight:600; margin-top:3px; }
  /* pros / cons two-column section */
  .g-pcg { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
  .g-pcg__col { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:18px 20px; }
  .g-pcg__col h3 { display:flex; align-items:center; gap:7px; font-size:15px; margin:0 0 12px; }
  .g-pcg__col--pro h3 { color:#059669; } .g-pcg__col--con h3 { color:#dc2626; }
  .g-pcg__col ul { margin:0; padding-left:18px; } .g-pcg__col li { margin:0 0 9px; color:#334155; line-height:1.55; }
  .g-pcg__col h3 svg { width:18px; height:18px; flex:none; }
  @media (max-width:640px) { .g-pcg { grid-template-columns:1fr; } }
  /* paragraph rhythm inside review prose */
  .g-prose p { margin:0 0 16px; } .g-prose p:last-child { margin-bottom:0; }
  /* tables (pricing + comparison) */
  .g-tbl { width:100%; border-collapse:collapse; margin:16px 0 4px; font-size:14px; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:12px; overflow:hidden; }
  .g-tbl th { text-align:left; background:#f8fafc; color:#475569; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; padding:11px 14px; border-bottom:1px solid rgba(0,0,0,.06); }
  .g-tbl td { padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.05); color:#334155; vertical-align:top; }
  .g-tbl tr:last-child td { border-bottom:none; }
  .g-tbl--cmp tbody tr:first-child { background:color-mix(in srgb, var(--accent) 5%, #fff); }
  .g-tbl a { color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap; }
  /* affiliate CTA (clean button, not a card) */
  .g-rvcta { margin:34px 0 30px; text-align:center; }
  .g-rvcta__btn { display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:15px; padding:13px 28px; border-radius:10px; text-decoration:none; }
  .g-rvcta__btn:hover { filter:brightness(1.06); }