/* ───────────── Hosting page — local styles ─────────────
     Shared system tokens come from shared.css (colors, type, header,
     footer, buttons, hero bg, reveal). Only page-specific layout below. */

  /* Hero — tighter, advisor-page feel (not landing-page).
     Background is the hosting-rack motif: same stroke language as the
     home page's mihrab arches, expressed as concentric server-rack pills. */
  .h-hero { padding: 96px 0 72px; }
  /* .h-hero::before background-image is injected via gonitaq-loader.php
     so the path always resolves to /wp-content/uploads/gonitaq/assets/ */
  @media (max-width: 720px) {
    .h-hero::before {
      background-position: center top;
    }
  }
  .h-hero .h-display { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.12; max-width: 22ch; margin-top: 20px; }
  .h-hero .subhead { font-size: clamp(18px, 1.55vw, 21px); color: var(--ink-700); line-height: 1.6; max-width: 48ch; margin-top: 20px; font-weight: 400; }
  .h-hero .byline {
    margin-top: 32px;
    display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
    font-size: 14px; color: var(--ink-500);
  }
  .h-hero .byline > span { white-space: nowrap; }
  .h-hero .byline .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-300); flex-shrink: 0; }
  .h-hero .byline .by-author { color: var(--ink-900); font-weight: 500; }
  .h-hero .byline .tested { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 500; }
  .h-hero .byline .tested::before {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    background: var(--teal-50);
    background-image: radial-gradient(circle at 50% 50%, var(--teal) 38%, transparent 40%);
    flex-shrink: 0;
  }
  @media (max-width: 720px) {
    .h-hero { padding: 56px 0 40px; }
    .h-hero .byline { font-size: 13px; gap: 8px 12px; }
  }

  /* Breathing room between hero and the Quick Answer card */
  .qa-section { padding-top: 56px; }
  @media (max-width: 720px) { .qa-section { padding-top: 36px; } }

  /* Quick answer card — saffron-tinted, the LLM-citation surface */
  .quick-answer {
    margin-top: 8px;
    background: #FBF6EC;
    border: 1px solid rgba(242, 169, 59, 0.28);
    border-radius: var(--r-lg);
    padding: 36px 36px 32px;
    position: relative;
    overflow: hidden;
  }
  .quick-answer::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 4px; height: 100%; background: var(--saffron);
  }
  .quick-answer .qa-head {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; color: var(--ink-900);
    letter-spacing: 0.02em;
  }
  .quick-answer .qa-head::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--saffron);
  }
  .quick-answer h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.35; margin-top: 14px; max-width: 38ch; letter-spacing: -0.012em; }
  .quick-answer .qa-lede { font-size: 17px; color: var(--ink-700); line-height: 1.65; margin-top: 14px; max-width: 56ch; }
  .quick-answer .qa-picks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 28px;
    border-top: 1px solid rgba(20, 32, 31, 0.08);
  }
  .quick-answer .qa-pick {
    padding: 20px 24px 4px 0;
    border-left: 1px solid rgba(20, 32, 31, 0.08);
  }
  .quick-answer .qa-pick:first-child { padding-right: 0; }
  .quick-answer .qa-pick:last-child { border-left: none; padding-left: 0; }
  .quick-answer .qa-pick .scenario {
    font-size: 13.5px; color: var(--ink-500); font-weight: 500;
    display: flex; align-items: center; gap: 8px;
  }
  .quick-answer .qa-pick .scenario .arrow { color: var(--ink-300); font-family: var(--font-en); }
  .quick-answer .qa-pick .name {
    margin-top: 6px;
    font-family: var(--font-en);
    font-size: 19px; font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    direction: ltr;
    text-align: right;
  }
  .quick-answer .qa-jump {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 28px;
    font-size: 14px; color: var(--teal); font-weight: 500;
  }
  .quick-answer .qa-jump:hover { color: var(--teal-700); }
  @media (max-width: 720px) {
    .quick-answer { padding: 28px 22px 24px; }
    .quick-answer .qa-picks { grid-template-columns: 1fr; }
    .quick-answer .qa-pick { padding: 18px 0; border-left: none; border-bottom: 1px solid rgba(20,32,31,0.08); }
    .quick-answer .qa-pick:last-child { border-bottom: none; padding-bottom: 0; }
  }

  /* Our pick — Hostinger */
  .our-pick {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .pick-main {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 40px;
    position: relative;
  }
  .pick-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(242, 169, 59, 0.14);
    color: #a06d10;
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.01em;
  }
  .pick-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--saffron);
  }
  .pick-brand {
    display: flex; align-items: center; gap: 14px;
    margin-top: 22px;
  }
  .pick-brand .lockup {
    font-family: var(--font-en);
    font-size: 32px; font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--ink-900);
    direction: ltr;
  }
  .pick-brand .mark-square {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--ink-900);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-en); font-size: 19px; font-weight: 700;
    letter-spacing: -0.02em;
  }
  .pick-positioning {
    margin-top: 18px;
    font-size: 17.5px; color: var(--ink-700); line-height: 1.55;
    max-width: 50ch;
  }
  .pick-positioning .em { color: var(--ink-900); font-weight: 500; }

  .reasons {
    margin-top: 32px;
    display: flex; flex-direction: column; gap: 22px;
    padding-top: 32px;
    border-top: 1px solid var(--ink-100);
  }
  .reasons .reason {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
  }
  .reasons .reason .num {
    font-family: var(--font-en); font-size: 13px; font-weight: 600;
    color: var(--teal);
    direction: ltr; padding-top: 2px;
    letter-spacing: 0.02em;
  }
  .reasons .reason h4 { font-size: 17px; font-weight: 600; line-height: 1.35; }
  .reasons .reason p {
    font-size: 15px; color: var(--ink-500); line-height: 1.6;
    margin-top: 4px;
  }
  .reasons .reason p .data {
    color: var(--ink-900); font-weight: 500;
    background: rgba(13, 115, 119, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
  }

  /* Honest cons — visible, not hidden */
  .cons {
    margin-top: 32px;
    padding: 22px 24px;
    background: var(--sand);
    border-radius: var(--r-md);
    border-right: 3px solid var(--ink-300);
  }
  .cons .label {
    font-size: 12.5px; font-weight: 600; color: var(--ink-500);
    letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .cons .label::before {
    content: ''; width: 14px; height: 1px; background: var(--ink-400);
  }
  .cons ul {
    list-style: none; padding: 0; margin-top: 12px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .cons li {
    font-size: 14.5px; color: var(--ink-700); line-height: 1.55;
    padding-right: 18px; position: relative;
  }
  .cons li::before {
    content: '—'; position: absolute; right: 0; top: 0;
    color: var(--ink-400); font-family: var(--font-en);
  }

  /* Plan + CTA side */
  .pick-aside {
    background: #0c1a1b;
    color: #c6cfce;
    border-radius: var(--r-lg);
    padding: 32px;
    display: flex; flex-direction: column; gap: 18px;
    position: sticky; top: 96px;
  }
  .pick-aside .recommended {
    font-size: 12.5px; color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em; font-weight: 500;
  }
  .pick-aside .plan-name {
    font-family: var(--font-en);
    font-size: 26px; font-weight: 600;
    color: #fff; letter-spacing: -0.015em;
    direction: ltr; text-align: right;
    margin-top: 4px;
  }
  .pick-aside .use-case {
    font-size: 14.5px; color: rgba(255,255,255,0.7); line-height: 1.55;
    margin-top: 4px;
  }
  .pick-aside .price-row {
    display: flex; align-items: baseline; gap: 12px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
  }
  .pick-aside .price-now {
    font-family: var(--font-en); font-size: 40px; font-weight: 700;
    color: #fff; letter-spacing: -0.025em; line-height: 1;
    direction: ltr;
  }
  .pick-aside .price-now .unit {
    font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.6);
    margin-right: 4px;
  }
  .pick-aside .price-was {
    font-family: var(--font-en); font-size: 16px;
    color: rgba(255,255,255,0.45);
    text-decoration: line-through;
    direction: ltr;
  }
  .pick-aside .save-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(242, 169, 59, 0.14);
    color: var(--saffron);
    padding: 4px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
  }
  .pick-aside .btn-primary {
    background: var(--teal);
    margin-top: 10px;
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 600;
  }
  .pick-aside .btn-primary:hover { background: #11888d; }
  .pick-aside .review-link {
    margin-top: 6px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.65);
    text-align: center;
    transition: color 280ms ease;
  }
  .pick-aside .review-link:hover { color: #fff; }
  .pick-aside .review-link span { border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 1px; }
  .pick-aside .disclosure {
    font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.55;
    margin-top: 4px;
    text-align: center;
  }

  @media (max-width: 980px) {
    .our-pick { grid-template-columns: 1fr; gap: 20px; }
    .pick-aside { position: static; }
    .pick-main { padding: 32px 24px; }
  }

  /* Comparison */
  .compare-section { background: var(--sand); }
  .compare-table {
    margin-top: 40px;
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--ink-100);
  }
  .compare-row {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1fr 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--ink-100);
  }
  .compare-row:last-child { border-bottom: none; }
  .compare-row.head {
    background: var(--sand);
    padding: 14px 28px;
    font-size: 12px; font-weight: 600; color: var(--ink-500);
    letter-spacing: 0.04em;
  }
  .compare-row.recommended {
    background: linear-gradient(270deg, rgba(13,115,119,0.04), transparent);
    position: relative;
  }
  .compare-row.recommended::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0;
    width: 3px; background: var(--teal);
  }
  .compare-row .brand-cell {
    display: flex; align-items: center; gap: 12px;
  }
  .compare-row .brand-cell .lockup {
    font-family: var(--font-en);
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--ink-900);
    direction: ltr;
  }
  .compare-row .brand-cell .pick-tag {
    font-size: 11px; font-weight: 600; color: var(--teal);
    background: var(--teal-50);
    padding: 3px 8px; border-radius: 999px;
  }
  .compare-row .best-for { font-size: 14.5px; color: var(--ink-700); line-height: 1.5; }

  /* Numeric cells — number values sit at the LEFT (logical end in RTL),
     header labels for those columns also sit at the LEFT so they align.
     Arabic-content cells (brand, best-for) stay at the RIGHT — natural RTL. */
  .compare-row .price-cell,
  .compare-row .score-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* in RTL, flex-end = LEFT of cell */
  }
  /* Head row: numeric column headers (cols 3 & 4) pinned LEFT to match values below */
  .compare-row.head > span:nth-child(3),
  .compare-row.head > span:nth-child(4) {
    text-align: left;
  }
  .compare-row .price-value {
    direction: ltr;
    display: inline-flex; align-items: baseline; gap: 2px;
    font-family: var(--font-en); font-size: 18px; font-weight: 600;
    color: var(--ink-900); letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .compare-row .price-value .per { font-size: 12px; color: var(--ink-500); font-weight: 400; }
  .compare-row .score-value {
    direction: ltr;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-en); font-size: 15px; font-weight: 600;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
  }
  .compare-row .score-value .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
  }
  .compare-row .score-value .dot.mid { background: var(--saffron); }
  .compare-row .score-value .dot.low { background: var(--ink-400); }
  .compare-row .score-value .base { color: var(--ink-400); font-weight: 400; }
  .compare-row .cta-cell .btn-sm {
    background: var(--ink-900); color: #fff; padding: 9px 14px; min-height: 38px; font-size: 13px;
    border-radius: 8px;
  }
  .compare-row .cta-cell .btn-sm:hover { background: var(--teal); }
  .compare-row.recommended .cta-cell .btn-sm { background: var(--teal); }
  .compare-row.recommended .cta-cell .btn-sm:hover { background: var(--teal-700); }

  /* Mobile cards */
  .compare-row .mobile-label { display: none; }
  @media (max-width: 880px) {
    .compare-table { background: transparent; border: none; border-radius: 0; overflow: visible; }
    .compare-row.head { display: none; }
    .compare-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      background: var(--white);
      border: 1px solid var(--ink-100);
      border-radius: var(--r-md);
      padding: 22px;
      margin-bottom: 12px;
    }
    .compare-row.recommended {
      border-color: var(--teal);
      background: linear-gradient(180deg, rgba(13,115,119,0.04), var(--white) 40%);
    }
    .compare-row.recommended::before { display: none; }
    .compare-row .brand-cell { justify-content: flex-start; gap: 12px; }
    /* Each label/value row: Arabic label on RIGHT (RTL natural),
       number on LEFT (column 2 = logical end in RTL). */
    .compare-row .best-for,
    .compare-row .price-cell,
    .compare-row .score-cell {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--ink-100);
    }
    .compare-row .best-for { font-size: 14.5px; }
    .compare-row .price-value,
    .compare-row .score-value { justify-self: end; }
    .compare-row .mobile-label {
      display: block;
      font-size: 12.5px; color: var(--ink-500); font-weight: 500;
      letter-spacing: 0.02em;
    }
    .compare-row .cta-cell { padding-top: 4px; }
    .compare-row .cta-cell .btn-sm { width: 100%; }
  }

  /* When to pick someone else */
  .alts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 48px;
    border-top: 1px solid var(--ink-100);
    border-bottom: 1px solid var(--ink-100);
  }
  .alt-block {
    padding: 36px 32px 36px 0;
    border-left: 1px solid var(--ink-100);
    display: flex; flex-direction: column; gap: 14px;
  }
  .alt-block:first-child { padding-right: 0; }
  .alt-block:last-child { border-left: none; padding-left: 0; }
  .alt-block .alt-lockup {
    font-family: var(--font-en); font-size: 20px; font-weight: 700;
    color: var(--ink-900); letter-spacing: -0.018em; direction: ltr;
    margin-bottom: 2px;
  }
  .alt-block h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
  .alt-block h3 .em { color: var(--teal); }
  .alt-block p { font-size: 15px; color: var(--ink-500); line-height: 1.65; }
  .alt-block .alt-link {
    margin-top: auto; padding-top: 8px;
    font-size: 14px; color: var(--ink-900); font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .alt-block .alt-link .arrow { transition: transform 320ms ease; }
  .alt-block .alt-link:hover .arrow { transform: translateX(-4px); }
  @media (max-width: 880px) {
    .alts-grid { grid-template-columns: 1fr; }
    .alt-block { border-left: none; border-bottom: 1px solid var(--ink-100); padding: 28px 0; }
    .alt-block:last-child { border-bottom: none; padding-bottom: 0; }
  }

  /* Methodology / scoring */
  .method-block { background: var(--white); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
  .method-cols {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 72px;
    align-items: start;
  }
  .method-cols .narrative p { font-size: 16.5px; color: var(--ink-700); line-height: 1.75; max-width: 44ch; }
  .method-cols .narrative p + p { margin-top: 16px; }
  .method-cols .narrative .em { color: var(--ink-900); font-weight: 500; }

  .scoring {
    display: flex; flex-direction: column; gap: 18px;
    padding: 28px 32px;
    background: var(--sand);
    border-radius: var(--r-lg);
  }
  .score-item {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  }
  .score-item .label-line {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14.5px;
  }
  .score-item .label-line .name { color: var(--ink-900); font-weight: 500; }
  .score-item .label-line .pct {
    font-family: var(--font-en); font-weight: 600; color: var(--teal);
    font-size: 14px; letter-spacing: 0.01em;
  }
  .score-item .bar {
    grid-column: 1 / -1;
    height: 6px; background: var(--white); border-radius: 999px; overflow: hidden;
    position: relative;
  }
  .score-item .bar > span {
    position: absolute; right: 0; top: 0; bottom: 0;
    background: var(--teal);
    border-radius: 999px;
    transition: width 1200ms cubic-bezier(.2,.7,.3,1);
  }
  .score-item.accent .bar > span { background: var(--saffron); }
  @media (max-width: 880px) {
    .method-cols { grid-template-columns: 1fr; gap: 32px; }
  }

  /* FAQ */
  .faq-list {
    margin-top: 48px;
    border-top: 1px solid var(--ink-100);
  }
  .faq-item {
    border-bottom: 1px solid var(--ink-100);
  }
  .faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 28px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(17px, 1.5vw, 19px);
    font-weight: 500;
    color: var(--ink-900);
    transition: color 280ms ease;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--teal); }
  .faq-item summary .toggle {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ink-200);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    transition: border-color 280ms ease, background-color 280ms ease;
  }
  .faq-item summary .toggle::before,
  .faq-item summary .toggle::after {
    content: ''; position: absolute;
    background: var(--ink-700);
    transition: transform 320ms cubic-bezier(.2,.7,.3,1), opacity 280ms ease;
  }
  .faq-item summary .toggle::before { width: 12px; height: 1.5px; }
  .faq-item summary .toggle::after { width: 1.5px; height: 12px; }
  .faq-item[open] summary .toggle { background: var(--teal); border-color: var(--teal); }
  .faq-item[open] summary .toggle::before,
  .faq-item[open] summary .toggle::after { background: #fff; }
  .faq-item[open] summary .toggle::after { transform: scaleY(0); }
  .faq-item .answer {
    padding: 0 0 28px;
    font-size: 16px; color: var(--ink-500); line-height: 1.7;
    max-width: 64ch;
  }
  .faq-item .answer .placeholder-note {
    display: inline-block;
    margin-top: 14px;
    font-size: 12.5px; color: var(--ink-400);
    background: var(--sand); padding: 4px 10px; border-radius: 999px;
    font-style: italic;
  }

  /* WhatsApp band */
  .wa-band {
    background: linear-gradient(180deg, #f0f5f4 0%, #e8efee 100%);
    padding: 88px 0;
    border-top: 1px solid var(--ink-100);
  }
  .wa-band .inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .wa-band h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.2; max-width: 18ch; letter-spacing: -0.015em; }
  .wa-band .sub { margin-top: 16px; font-size: 17px; color: var(--ink-500); line-height: 1.6; max-width: 36ch; }
  .wa-band .sub .em { color: var(--ink-900); font-weight: 500; }
  .wa-band .right { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .wa-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 24px;
    background: var(--teal);
    color: #fff;
    border-radius: 12px;
    font-size: 16px; font-weight: 600;
    transition: background-color 280ms ease, transform 320ms ease;
    white-space: nowrap;
  }
  .wa-cta:hover { background: var(--teal-700); transform: translateY(-2px); }
  .wa-cta svg { width: 22px; height: 22px; }
  .wa-band .quiet {
    font-size: 13.5px; color: var(--ink-500);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .wa-band .quiet::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  }
  @media (max-width: 880px) {
    .wa-band { padding: 56px 0; }
    .wa-band .inner { grid-template-columns: 1fr; gap: 24px; }
  }

  /* Related */
  .related { padding: 64px 0 96px; }
  .related h3 { font-size: 18px; font-weight: 500; color: var(--ink-500); margin-bottom: 24px; }
  .related .related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .related-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 26px 28px;
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    transition: border-color 360ms ease, transform 360ms cubic-bezier(.2,.7,.3,1);
  }
  .related-card:hover { border-color: var(--ink-900); transform: translateY(-2px); }
  .related-card .label-row { display: flex; flex-direction: column; gap: 4px; }
  .related-card .pill-soon {
    font-size: 11.5px; color: var(--ink-500);
    background: var(--sand); padding: 3px 8px; border-radius: 999px;
    align-self: flex-start;
    font-weight: 500;
  }
  .related-card .title { font-size: 18px; font-weight: 600; color: var(--ink-900); }
  .related-card .arrow {
    width: 32px; height: 32px; border-radius: 50%; background: var(--sand);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-700);
    transition: background-color 320ms ease, color 320ms ease;
  }
  .related-card:hover .arrow { background: var(--teal); color: #fff; }
  @media (max-width: 720px) {
    .related .related-grid { grid-template-columns: 1fr; }
  }

  /* Common section heads sized down a notch for advisor copy */
  .section-head.tight .left h2 { font-size: clamp(26px, 3vw, 36px); }