/* ============================================================
   MailSurety — SPF/DKIM/DMARC guide page
   Loaded on top of styles.css (shares the design tokens).
   ============================================================ */

/* ---------- hero ---------- */
.guide-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 60px) 0 46px; }
.guide-hero .wrap { position: relative; z-index: 2; max-width: 900px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink-2); }
.guide-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin: 12px 0 16px; }
.guide-hero .lede { max-width: 62ch; font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; }
.guide-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.guide-meta svg { width: 16px; height: 16px; color: var(--brand-2); }

/* ---------- layout: sticky TOC + article ---------- */
.guide-section { padding-top: 8px; }
.guide-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 54px; align-items: start; }

.toc { position: sticky; top: calc(var(--nav-h) + 22px); }
.toc-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--line); }
.toc a { position: relative; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--brand-2); border-left-color: var(--brand); font-weight: 600; }

/* ---------- article ---------- */
.guide-body { max-width: 720px; }
.g-block { scroll-margin-top: calc(var(--nav-h) + 20px); padding: 34px 0; border-top: 1px solid var(--line); }
.g-block:first-child { border-top: 0; padding-top: 6px; }
.g-block h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(23px, 3.4vw, 30px); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-block p { font-size: 16px; line-height: 1.72; color: var(--ink-2); margin-bottom: 15px; }
.g-block p b { color: var(--ink); font-weight: 600; }
.g-block p em { color: var(--brand-2); font-style: normal; font-weight: 600; }

.g-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--grad-brand); box-shadow: var(--glow); }

.g-list { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.g-list.tight { gap: 10px; }
.g-list li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.g-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.g-list li b { color: var(--ink); }
.g-tag { display: inline-block; min-width: 52px; text-align: center; padding: 2px 8px; margin-right: 6px; border-radius: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--brand-2); background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.28); }

.g-note, .g-gotcha { display: flex; gap: 13px; align-items: flex-start; padding: 15px 18px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); margin: 20px 0; }
.g-note svg { width: 20px; height: 20px; flex: none; color: var(--brand-2); margin-top: 1px; }
.g-note p, .g-gotcha { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.g-gotcha { display: block; border-left: 3px solid var(--amber); background: rgba(232,161,60,.06); }
.g-gotcha b { color: var(--amber); }

/* checklist (how MailSurety helps) */
.g-check { list-style: none; margin: 8px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.g-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.g-check svg { width: 20px; height: 20px; flex: none; color: #fff; background: var(--grad-brand); border-radius: 6px; padding: 3px; margin-top: 1px; }
.g-check em { color: var(--ink); font-style: normal; }

/* ---------- record example ---------- */
.record { margin: 20px 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--bg-elev); }
.record-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.record-copy { padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 7px; background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
@media (pointer: coarse) { .record-copy { padding: 9px 14px; } }
.record-copy:hover { border-color: var(--brand); color: var(--ink); }
.record-copy.done { color: #7ee0a6; border-color: rgba(126,224,166,.4); }
.record code { display: block; padding: 15px 16px; font-family: var(--mono); font-size: 13.5px; color: var(--sky); line-height: 1.5; word-break: break-all; }

/* ---------- DMARC policy pills ---------- */
.policy-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
.policy-pill { flex: 1 1 168px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); border-top: 3px solid var(--muted); }
.policy-pill b { display: block; font-family: var(--mono); font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.policy-pill span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.policy-pill.none { border-top-color: var(--muted); }
.policy-pill.quar { border-top-color: var(--amber); }
.policy-pill.rej { border-top-color: #4ea87a; }

/* ---------- Gmail/Yahoo callout ---------- */
.g-callout { display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.03)); border: 1px solid rgba(59,130,246,.3); }
.g-callout-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--grad-brand); color: #fff; box-shadow: var(--glow); }
.g-callout-ic svg { width: 24px; height: 24px; }
.g-callout h2 { font-size: clamp(21px, 3vw, 27px); margin-bottom: 10px; }
.g-callout p { margin: 0; }

/* ---------- CTA ---------- */
.guide-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; padding: 26px 30px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--sh-2); }
.guide-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin-bottom: 5px; }
.guide-cta p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.g-faq { display: flex; flex-direction: column; gap: 10px; }
.g-faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); overflow: hidden; }
.g-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; font-size: 15.5px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.g-faq summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; flex: none; width: 16px; height: 16px; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--brand-2); border-radius: 2px; transform: translate(-50%,-50%); transition: transform .22s var(--ease); }
.faq-x::after { transform: translate(-50%,-50%) rotate(90deg); }
.g-faq details[open] .faq-x::after { transform: translate(-50%,-50%) rotate(0); }
.g-faq details p { padding: 0 18px 17px; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0; }

/* ============================================================
   Animated protocol diagrams
   ============================================================ */
.authdiag { margin: 22px 0 8px; padding: 22px 20px 16px; border-radius: var(--r-lg); background: radial-gradient(120% 130% at 50% 0%, #0d1728, #0a1120); border: 1px solid var(--line-2); }
.ad-lanes { display: flex; flex-direction: column; gap: 16px; }
/* Centred: every column is a fixed-height icon+label stack, so centring puts the
   whole group in the middle of the lane. The wire is then nudged up by half the
   label block to sit exactly on the icon centres. */
.lane { display: flex; align-items: center; gap: 6px; padding: 12px 10px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.lane.ok { border-color: rgba(110,168,251,.22); }
.lane.bad { border-color: rgba(229,84,75,.22); }

/* Every column is the same width, so the two wires are always equal length and
   the row is symmetrical about the gate. */
.lane-node, .lane-gate { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.lane-ic, .gate-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); }
.lane-ic svg { width: 22px; height: 22px; }
.gate-ic svg { width: 23px; height: 23px; }
.gate-ic.ok { color: var(--brand-2); border-color: rgba(110,168,251,.45); background: rgba(110,168,251,.1); }
.gate-ic.bad { color: var(--red); border-color: rgba(229,84,75,.45); background: rgba(229,84,75,.1); }
.lane.ok .res .lane-ic { color: var(--brand-2); border-color: rgba(110,168,251,.4); background: rgba(110,168,251,.08); }
.lane.bad .res .lane-ic { color: var(--red); border-color: rgba(229,84,75,.4); background: rgba(229,84,75,.08); }
/* Fixed two-line box (2 × 15px). Labels differ in length ("Inbox" vs "Server on
   your list"); a fixed height keeps both lanes identical and makes the wire
   offset below a known constant. */
.lane-lbl { font-size: 11.5px; line-height: 15px; color: var(--muted); max-width: 100%;
  height: 30px; display: flex; align-items: flex-start; justify-content: center; }
.lane-gate .lane-lbl { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--ink-2); letter-spacing: .02em; }

/* Node stack = 42 icon + 7 gap + 30 label = 79, centre 39.5; icon centre is 21.
   Lift the wire by the 18.5px difference so it lands on the icons. */
.lane-wire { position: relative; flex: 1 1 auto; min-width: 26px; height: 2px; border-radius: 2px;
  transform: translateY(-18.5px); }
.lane.ok .lane-wire { background: rgba(110,168,251,.25); }
.lane.bad .lane-wire { background: rgba(229,84,75,.25); }
.lane-wire.dim { opacity: .35; }
/* Packets are spawned by guide.js in random bursts rather than looping on a
   fixed CSS timer, so the diagrams read like real traffic. */
.pkt { position: absolute; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; left: 0; }
.lane.ok .pkt { background: var(--brand-2); box-shadow: 0 0 8px rgba(110,168,251,.9); }
.lane.bad .pkt { background: var(--red); box-shadow: 0 0 8px rgba(229,84,75,.9); }
/* The markup ships one static dot per wire; JS clones it and hides the original. */
.authdiag.live .pkt.seed { display: none; }

/* Gate and destination react as each packet arrives. */
.gate-ic { transition: box-shadow .2s, transform .2s; }
.gate-ic.lit.ok { box-shadow: 0 0 0 5px rgba(110,168,251,.22); }
.gate-ic.lit.bad { box-shadow: 0 0 0 5px rgba(229,84,75,.26); animation: adShake .4s var(--ease); }
@keyframes adShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.res .lane-ic { transition: box-shadow .2s, transform .2s; }
.res.hit .lane-ic { transform: scale(1.07); }
.lane.ok .res.hit .lane-ic { box-shadow: 0 0 0 5px rgba(110,168,251,.20); }
.lane.bad .res.hit .lane-ic { box-shadow: 0 0 0 5px rgba(229,84,75,.22); }

.ad-report { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; padding: 11px 16px; border-radius: var(--pill); border: 1px dashed rgba(59,130,246,.4); background: rgba(59,130,246,.05); font-size: 13.5px; color: var(--ink-2); }
.ad-report svg { width: 18px; height: 18px; color: var(--brand-2); }
.authdiag figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.55; text-align: center; font-style: italic; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; gap: 24px; }
  .toc { position: static; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
  .toc nav { border-left: 0; flex-flow: row wrap; gap: 8px; }
  .toc a { padding: 6px 12px; margin: 0; border: 1px solid var(--line-2); border-radius: var(--pill); }
  .toc a.active { border-color: var(--brand); border-left-color: var(--brand); }
  .guide-body { max-width: none; }
}
@media (max-width: 560px) {
  .lane { gap: 3px; padding: 10px 6px; }
  .lane-node, .lane-gate { width: 62px; }
  .lane-ic, .gate-ic { width: 36px; height: 36px; }
  .lane-ic svg, .gate-ic svg { width: 19px; height: 19px; }
  /* 36 icon + 7 gap + 42 label = 85, centre 42.5; icon centre 18 → lift 24.5. */
  .lane-lbl { font-size: 10.5px; line-height: 14px; height: 42px; }
  .lane-wire { transform: translateY(-24.5px); }
  .guide-cta { padding: 22px; }
}

/* ---------- reduced motion: park a dot mid-wire ---------- */
@media (prefers-reduced-motion: reduce) {
  .pkt { animation: none !important; left: 50%; opacity: 1; }
  .lane.bad .lane-gate + .lane-wire .pkt { display: none; }
  .authdiag.live .pkt.seed { display: block; }
}