/* macCurrent guides hub page styles. Kept external so Cloudflare CSP style-src 'self' allows it. */
.guide-page {
    overflow: hidden;
  }

  .guide-hero {
    position: relative;
    padding: 92px 0 82px;
    overflow: hidden;
  }

  .guide-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -620px;
    width: 1480px;
    height: 1480px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
      radial-gradient(circle at center, color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 2px),
      radial-gradient(circle, transparent 0 38%, color-mix(in srgb, var(--accent) 12%, transparent) 38.1% 38.22%, transparent 38.35% 51%, color-mix(in srgb, var(--accent) 10%, transparent) 51.1% 51.22%, transparent 51.35% 63%, color-mix(in srgb, var(--accent) 8%, transparent) 63.1% 63.22%, transparent 63.35%),
      conic-gradient(from 135deg, transparent 0 70%, color-mix(in srgb, var(--accent) 8%, transparent) 80%, color-mix(in srgb, var(--accent) 22%, transparent) 94%, color-mix(in srgb, var(--accent) 42%, transparent) 99.1%, color-mix(in srgb, #a0ebff 62%, transparent) 99.75%, transparent 100%);
    background-size: 34px 34px, 100% 100%, 100% 100%;
    opacity: calc(.72 * var(--glow));
    pointer-events: none;
    mask: radial-gradient(circle, #000 0 56%, transparent 74%);
    -webkit-mask: radial-gradient(circle, #000 0 56%, transparent 74%);
  }

  .guide-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    gap: 56px;
    align-items: center;
  }

  .guide-copy h1 {
    max-width: 11em;
    font-size: clamp(48px, 7vw, 86px);
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--fg-strong);
    text-wrap: balance;
  }

  .guide-copy h1 em {
    font-style: normal;
    background: var(--grad-radar);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .guide-copy > p {
    max-width: 36em;
    margin-top: 28px;
    color: var(--fg-2);
    font-size: 20px;
    line-height: 1.65;
    text-wrap: pretty;
  }

  .guide-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
  }

  .guide-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 40px;
    max-width: 640px;
  }

  .guide-meta span {
    min-height: 76px;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 58%, transparent);
    box-shadow: var(--inset-hairline);
    color: var(--fg-2);
    font-size: 13px;
  }

  .guide-meta b {
    display: block;
    margin-bottom: 3px;
    color: var(--fg-strong);
    font-size: 23px;
    line-height: 1.05;
  }

  .guide-preview {
    position: relative;
    padding: 18px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--bg-sunken) 72%, transparent)),
      radial-gradient(circle at 18% 10%, var(--accent-fill), transparent 42%);
    box-shadow: 0 34px 90px -32px rgba(0, 0, 0, .74), 0 0 calc(var(--glow) * 56px) -18px var(--accent-ring), var(--inset-hairline);
  }

  html.theme-light .guide-preview {
    box-shadow: var(--shadow-lg), 0 0 calc(var(--glow) * 48px) -20px var(--accent-ring);
  }

  .guide-window {
    overflow: hidden;
    border: 1px solid var(--divider);
    border-radius: var(--r-lg);
    background: var(--bg-sunken);
  }

  .guide-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .guide-window-lights {
    display: flex;
    gap: 7px;
  }

  .guide-window-lights i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .guide-window-lights i:nth-child(1) { background: #FF5F57; }
  .guide-window-lights i:nth-child(2) { background: #FEBC2E; }
  .guide-window-lights i:nth-child(3) { background: #28C840; }

  .guide-preview img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center top;
    opacity: .94;
  }

  .reading-panel {
    margin-top: 18px;
    display: grid;
    gap: 10px;
  }

  .reading-panel a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: var(--r-md);
    color: var(--fg-2);
    background: color-mix(in srgb, var(--surface-2) 62%, transparent);
    border: 1px solid var(--divider);
    transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  }

  .reading-panel a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    background: var(--accent-fill);
  }

  .reading-panel .step {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--accent-fill);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .reading-panel strong {
    display: block;
    color: var(--fg-strong);
    font-size: 14px;
    line-height: 1.25;
  }

  .reading-panel span:not(.step) {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
  }

  .guide-section {
    padding-top: 0;
    padding-bottom: 92px;
  }

  .guide-section + .guide-section {
    padding-top: 16px;
  }

  .guide-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }

  .section-kicker {
    position: sticky;
    top: 96px;
  }

  .section-kicker h2 {
    max-width: 10em;
    color: var(--fg-strong);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .section-kicker p {
    margin-top: 18px;
    color: var(--fg-2);
    font-size: 17px;
    line-height: 1.65;
  }

  .featured-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 178px;
    gap: 28px;
    min-height: 278px;
    padding: 34px;
    border-radius: var(--r-xl);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    background:
      radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%),
      color-mix(in srgb, var(--surface) 80%, transparent);
    box-shadow: var(--inset-hairline), 0 0 calc(var(--glow) * 52px) -24px var(--accent-ring);
  }

  .featured-card h2 {
    margin-top: 18px;
    color: var(--fg-strong);
    font-size: clamp(30px, 3.5vw, 46px);
    line-height: 1.07;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .featured-card p {
    max-width: 34em;
    margin-top: 16px;
    color: var(--fg-2);
    font-size: 17px;
  }

  .card-tag {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .card-tag::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .featured-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .featured-glyph {
    position: relative;
    align-self: stretch;
    min-height: 190px;
    border-radius: var(--r-xl);
    border: 1px solid var(--divider);
    background:
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 34%),
      repeating-radial-gradient(circle at 50% 50%, transparent 0 36px, color-mix(in srgb, var(--accent) 20%, transparent) 37px 38px);
    overflow: hidden;
  }

  .featured-glyph::before {
    content: "";
    position: absolute;
    inset: -35%;
    background: conic-gradient(from 320deg, transparent 0 72%, color-mix(in srgb, var(--accent) 46%, transparent) 88%, transparent 100%);
    animation: guide-sweep 10s linear infinite;
  }

  .featured-glyph::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 32px var(--accent-ring);
  }

  @keyframes guide-sweep {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .featured-glyph::before { animation: none; }
  }

  .guide-list {
    display: grid;
    gap: 14px;
  }

  .guide-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    box-shadow: var(--inset-hairline);
    transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  }

  .guide-link:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
    background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
    box-shadow: var(--inset-hairline), 0 18px 44px -28px var(--accent-ring);
  }

  .guide-link h3 {
    color: var(--fg-strong);
    font-size: 21px;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -0.015em;
  }

  .guide-link p {
    margin-top: 8px;
    color: var(--fg-2);
    font-size: 15.5px;
    line-height: 1.55;
  }

  .guide-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .guide-labels span,
  .arrow-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 9px;
    border-radius: var(--r-xs);
    color: var(--fg-3);
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
    border: 1px solid var(--divider);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .guide-link:hover .arrow-chip {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: var(--accent-fill);
  }

  .guide-stack {
    display: grid;
    gap: 28px;
  }

  .guide-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .compact-guide {
    min-height: 216px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface-2) 60%, transparent));
    box-shadow: var(--inset-hairline);
    transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
  }

  .compact-guide:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
  }

  .compact-guide h3 {
    margin-top: 14px;
    color: var(--fg-strong);
    font-size: 23px;
    line-height: 1.12;
  }

  .compact-guide p {
    margin-top: 12px;
    color: var(--fg-2);
    font-size: 15.5px;
    line-height: 1.55;
  }

  .guide-cta {
    position: relative;
    margin: 20px 0 120px;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    background:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 42%),
      linear-gradient(120deg, color-mix(in srgb, var(--surface) 84%, transparent), color-mix(in srgb, var(--bg-sunken) 68%, transparent));
    box-shadow: var(--inset-hairline), 0 32px 80px -36px var(--accent-ring);
  }

  .guide-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    padding: 38px;
  }

  .guide-cta h2 {
    color: var(--fg-strong);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.06;
  }

  .guide-cta p {
    max-width: 46em;
    margin-top: 12px;
    color: var(--fg-2);
    font-size: 16.5px;
  }

  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px;
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .breadcrumbs a:hover {
    color: var(--accent);
  }

  @media (max-width: 1040px) {
    .guide-hero-grid,
    .guide-layout {
      grid-template-columns: 1fr;
    }

    .section-kicker {
      position: static;
      max-width: 680px;
    }

    .guide-preview {
      max-width: 620px;
    }
  }

  @media (max-width: 760px) {
    .guide-page .rv-pre {
      opacity: 1;
      transform: none;
    }

    .guide-hero {
      padding-top: 68px;
      padding-bottom: 64px;
    }

    .guide-hero-grid {
      gap: 34px;
    }

    .guide-copy h1 {
      font-size: clamp(42px, 13vw, 58px);
    }

    .guide-copy > p {
      font-size: 18px;
    }

    .guide-meta,
    .guide-card-grid,
    .featured-card {
      grid-template-columns: 1fr;
    }

    .featured-glyph {
      display: none;
    }

    .guide-link {
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 20px;
    }

    .arrow-chip {
      justify-self: start;
    }

    .guide-cta-inner {
      display: grid;
      padding: 28px;
    }

    .guide-ctas,
    .featured-links {
      align-items: stretch;
      flex-direction: column;
    }

    .guide-ctas .btn,
    .featured-links .btn,
    .guide-cta .btn {
      justify-content: center;
      width: 100%;
    }

    .foot .links {
      margin-left: 0;
      flex-wrap: wrap;
      gap: 14px 18px;
    }
  }