/* Ported from cleardmarc-design/redesign/canvas/project/site.css by
   scripts/port-design-css.py. Do not edit above the "site" marker: change the design file
   and run the script again. Site-only rules go below the marker. */

/* ClearDMARC marketing website (sw-): site header and footer, home page, article template.
   Loads after cd.css and kit.css (and the page stylesheets of any app board it imports as a screenshot).
   Reads only cd.css tokens; every selector is scoped to .cd and prefixed sw-. No new tokens.
   Dark bands use the sidebar surface (--side-bg, --side-text), as the sign-in page does, so they read the same in both themes.
   Phone rules are at the end, keyed off .cd[data-device="mobile"]. */
/* ---------- page frame ---------- */
.cd .sw-page{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.cd .sw-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.cd .sw-wrap.is-wide{max-width:1280px}
.cd .sw-wrap.is-narrow{max-width:904px}
.cd .sw-sec{padding:88px 0}
.cd .sw-sec.is-white{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cd .sw-sec.is-dark{background:var(--side-bg);color:var(--side-text)}
.cd .sw-sec.is-tight{padding-bottom:24px}
.cd .sw-sec.no-top{padding-top:8px}
.cd .sw-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-ink)}
.cd .is-dark .sw-eyebrow,.cd .sw-eyebrow.is-on-dark{color:color-mix(in srgb,var(--primary) 40%,#fff)}
.cd .sw-head{max-width:720px}
.cd .sw-head.is-center{margin:0 auto;text-align:center}
.cd .sw-h2{font-size:36px;font-weight:800;letter-spacing:-0.025em;line-height:1.12;margin-top:12px;text-wrap:balance}
.cd .sw-h2.is-sm{font-size:32px}
.cd .is-dark .sw-h2{color:#fff}
.cd .sw-lead{font-size:17px;line-height:1.6;color:var(--text-2);margin-top:16px}
.cd .is-dark .sw-lead{color:var(--side-text)}
.cd .sw-below{margin-top:48px}
.cd .sw-note{font-size:15px;color:var(--text-2);text-align:center;margin:24px auto 0;max-width:780px}
.cd .sw-src-note{font-size:12px;color:var(--text-3);text-align:right;margin-top:16px}
.cd .sw-code{font-family:var(--font-mono);font-size:.88em;padding:1px 6px;border-radius:var(--radius-xs);background:var(--surface-sunken);border:1px solid var(--border)}
.cd .sw-mono{font-family:var(--font-mono)}
.cd .sw-accent{color:var(--primary-ink)}
.cd .sw-center{display:flex;justify-content:center}
.cd .sw-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cd .sw-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cd .sw-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cd .sw-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.cd .sw-split.is-flip{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.cd .sw-split.is-top{align-items:start}
.cd .sw-pill-lg{height:28px;padding:0 12px;font-size:13px}
.cd .sw-pill-lg .i{width:14px;height:14px}
/* the ClearDMARC wordmark beside the shell's .brand-mark tile; product names use the same split weight */
.cd .sw-logo{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:500;color:var(--text);letter-spacing:-0.01em}
/* product names drawn as the logo is (DECISIONS 91): the product 600 in the logo teal, #4DD9EE on dark; text-coloured in running text (2.5:1 on white) */
.cd .sw-word b{font-weight:600;color:var(--brand)}
.cd .card.is-dark .sw-word b{color:var(--brand-on-dark)}
.cd .sw-checks .sw-word b{color:inherit;font-weight:700}
/* product tiles: the logo's tile, white glyph; ClearDMARC's holds the logo itself */
.cd .sw-pmark{flex:none;width:32px;height:32px;border-radius:var(--radius-lg);background:var(--brand);box-shadow:0 2px 8px color-mix(in oklch,var(--brand) 45%,transparent);display:grid;place-items:center;color:#fff}
.cd .sw-pmark .i{width:18px;height:18px;stroke-width:2}
.cd .sw-pmark>svg:not(.i){display:block;width:22px;height:22px}
.cd .sw-pmark.sw-ico{width:44px;height:44px}
.cd .sw-pmark.sw-ico .i{width:24px;height:24px}
.cd .sw-pmark.sw-ico>svg:not(.i){width:30px;height:30px}
/* the logo's wordmark: "DMARC" in the brand teal, #0BB4D4 on light and #4DD9EE on the dark footer (shell.css, the logo's colours) */
.cd .sw-logo b{font-weight:600;color:var(--brand)}
.cd .sw-word{font-weight:500;letter-spacing:-0.01em}
.cd .brand-mark.sw-mark-lg{width:52px;height:52px}
.cd .brand-mark.sw-mark-lg svg{width:34px;height:34px}
.cd .sw-ico{width:44px;height:44px}
.cd .sw-ico .i{width:22px;height:22px}
/* ---------- site header (becomes SiteHeader) ---------- */
.cd .sw-hd{background:var(--surface);border-bottom:1px solid var(--border)}
.cd .sw-hd-in{display:flex;align-items:center;gap:24px;height:68px}
.cd .sw-nav{display:flex;align-items:center;gap:4px;margin:0 auto}
.cd .sw-nav-i{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:none;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer}
.cd .sw-nav-i .i{width:14px;height:14px;color:var(--text-3)}
.cd .sw-nav-i.is-active{background:var(--primary-tint);color:var(--primary-ink)}
.cd .sw-nav-i.is-active .i{color:var(--primary-ink)}
.cd .sw-nav-i.is-open{background:var(--surface-sunken);color:var(--text)}
.cd .sw-hd-act{display:flex;align-items:center;gap:8px}
.cd .sw-menu-btn{display:none}
/* the header's dropdowns, drawn open on the states band */
.cd .sw-dd{width:320px;max-width:none}
.cd .sw-dd .menu-item{align-items:flex-start;gap:12px;min-height:56px;padding:10px}
.cd .sw-dd .k-ico{width:36px;height:36px}
.cd .sw-dd .sw-mi-t{display:block;font-size:14px;font-weight:600}
.cd .sw-dd .menu-item small{display:block;font-size:13px;font-weight:400;color:var(--text-2);line-height:1.4;margin-top:2px}
/* phone menu, open */
.cd .sw-mmenu{display:flex;flex-direction:column;background:var(--surface);border-top:1px solid var(--border)}
.cd .sw-mmenu-g{display:flex;flex-direction:column;padding:8px 16px 4px}
.cd .sw-mmenu-g+.sw-mmenu-g{border-top:1px solid var(--border)}
.cd .sw-mmenu-g .menu-label{padding:8px 0 4px}
.cd .sw-mmenu-g a{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;color:var(--text)}
.cd .sw-mmenu-foot{padding:12px 16px 20px;border-top:1px solid var(--border)}
.cd .sw-mmenu-foot .btn{width:100%;height:44px}
/* ---------- site footer (becomes SiteFooter) ---------- */
.cd .sw-ft{background:var(--side-bg);color:var(--side-text);border-top:1px solid var(--side-border)}
.cd .sw-ft-in{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:36px;padding:64px 32px 40px}
.cd .sw-ft .sw-logo{color:#fff}
.cd .sw-ft .sw-logo b{color:var(--brand-on-dark)}
.cd .sw-ft-blurb{font-size:14px;line-height:1.6;margin-top:16px;max-width:300px}
.cd .sw-ft-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--side-text-2);margin-bottom:14px}
.cd .sw-ft-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.cd .sw-ft-links a{color:var(--side-text)}
.cd .sw-ft-links .sw-word b{color:var(--brand-on-dark)}
.cd .sw-ft-bar{border-top:1px solid var(--side-border)}
.cd .sw-ft-bar>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 32px;font-size:13px;color:var(--side-text-2)}
/* ---------- home: hero ---------- */
.cd .sw-hero{background:radial-gradient(680px 460px at 90% -10%,var(--primary-tint),transparent 70%),radial-gradient(560px 420px at 0% 20%,color-mix(in srgb,var(--primary-tint) 55%,transparent),transparent 65%)}
.cd .sw-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;padding-top:80px;padding-bottom:72px}
.cd .sw-badges{display:flex;flex-wrap:wrap;gap:8px}
.cd .sw-h1{font-size:52px;font-weight:800;letter-spacing:-0.035em;line-height:1.06;margin-top:22px;text-wrap:balance}
.cd .sw-h1 em{font-style:normal;color:var(--primary-ink)}
.cd .sw-hero-p{font-size:18px;line-height:1.6;color:var(--text-2);margin-top:20px;max-width:560px}
.cd .sw-check{margin-top:28px;max-width:520px;display:flex;flex-direction:column;gap:8px}
.cd .sw-check-l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.cd .sw-check .input-group{box-shadow:var(--shadow-sm)}
.cd .sw-check .input-group>.input{height:48px;font-size:16px;padding:0 16px}
.cd .sw-check .input-group>.btn{height:48px;padding:0 20px;font-size:15px}
.cd .sw-fine{font-size:13px;color:var(--text-3);margin-top:4px}
/* the domain-check result card (states band) */
.cd .sw-res{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.cd .sw-res-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cd .sw-res-hd .sw-mono{font-size:13px;color:var(--text-2)}
.cd .sw-res-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.cd .sw-res-rows li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.cd .sw-res-rows .i{margin-top:1px}
.cd .sw-res-rows .is-ok{color:var(--ok-ink)}
.cd .sw-res-rows .is-bad{color:var(--bad-ink)}
.cd .sw-res-rows .is-warn{color:var(--warn-ink)}
.cd .sw-res .record{font-size:12px;padding:8px 12px}
.cd .sw-res>.btn{align-self:flex-start}
.cd .sw-res-sk{display:flex;flex-direction:column;gap:10px}
/* hero widget: one domain at a glance */
.cd .sw-widget{padding:24px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-lg);border-radius:var(--radius-lg)}
.cd .sw-hero-art{padding:16px;border-radius:12px;background:linear-gradient(160deg,var(--primary-tint),color-mix(in srgb,var(--primary-tint) 25%,transparent))}
.cd .sw-wg-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cd .sw-wg-dom{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:700}
.cd .sw-live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-tint)}
.cd .sw-wg-mid{display:flex;align-items:center;gap:28px}
.cd .sw-wg-stats{display:flex;flex-direction:column;gap:14px}
.cd .sw-wg-stats b{display:block;font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.cd .sw-wg-stats b.sw-accent{color:var(--primary-ink)}
.cd .sw-wg-stats span{font-size:13px;color:var(--text-2)}
.cd .sw-srcs{display:flex;flex-direction:column;gap:8px}
.cd .sw-srcs .eyebrow{margin-bottom:2px}
.cd .sw-src-r{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-sunken);font-size:14px;font-weight:600}
.cd .sw-src-r .pill{margin-left:auto}
.cd .sw-src-r.is-bad{background:var(--bad-tint);border-color:color-mix(in srgb,var(--bad) 30%,var(--bad-tint))}
.cd .sw-src-r.is-bad .logo{background:var(--bad)}
/* ring (static stand-in for an ECharts gauge) */
/* the score gauge (DECISIONS 91): the app's .sc-gauge in SVG, a 270 degree arc r64 with a 12px round-capped stroke, centred
   at 96,98 in a 192 by 160 box. The value arc is the track path with pathLength="100", so --v (0 to 100) sets it;
   the knob sits at the arc's start inside .sw-gauge-knob, turned by --v x 2.7deg. .sw-ring stays for the boards
   until the site ships this. */
.cd .sw-gauge{position:relative;flex:none;width:240px;height:200px;--g:var(--ok)}
.cd .sw-gauge.is-warn{--g:var(--warn)}
.cd .sw-gauge.is-bad{--g:var(--bad)}
.cd .sw-gauge svg{display:block;width:100%;height:100%;overflow:visible}
.cd .sw-gauge-track,.cd .sw-gauge-now{fill:none;stroke-width:12;stroke-linecap:round}
.cd .sw-gauge-track{stroke:color-mix(in oklch,var(--border) 75%,var(--surface))}
.cd .sw-gauge-now{stroke:var(--g);stroke-dasharray:100 200;stroke-dashoffset:calc(100 - var(--v, 0));transition:stroke-dashoffset var(--gauge-t,1100ms) cubic-bezier(.22,1,.36,1),stroke .3s}
.cd .sw-gauge-tick{fill:none;stroke:var(--border-control);stroke-width:1.5;stroke-linecap:round}
.cd .sw-gauge-band{font-family:var(--font-sans);font-size:11px;font-weight:700;fill:var(--text-3);text-anchor:middle;dominant-baseline:central;transition:fill .2s}
.cd .sw-gauge-band.is-on{fill:var(--text)}
.cd .sw-gauge-knob{transform-box:view-box;transform-origin:96px 98px;transform:rotate(calc(var(--v, 0) * 2.7deg));transition:transform var(--gauge-t,1100ms) cubic-bezier(.22,1,.36,1)}
.cd .sw-gauge-knob circle{fill:var(--surface)}
.cd .sw-gauge-c{position:absolute;left:0;right:0;top:46.25%;text-align:center;line-height:1}
.cd .sw-gauge-v{font-size:44px;font-weight:800;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.cd .sw-gauge-l{margin-top:8px;font-size:13px;color:var(--text-2)}
.cd .sw-gauge-grade{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
/* the hero widget's compliance gauge: no grade marks */
.cd .sw-gauge.is-sm{width:156px;height:130px}
.cd .sw-gauge.is-sm .sw-gauge-c{top:44%}
.cd .sw-gauge.is-sm .sw-gauge-v{font-size:22px}
.cd .sw-gauge.is-sm .sw-gauge-l{margin-top:4px;font-size:12px}
@media (prefers-reduced-motion:reduce){.cd .sw-gauge-now,.cd .sw-gauge-knob,.cd .sw-gauge-band{transition:none}}
/* industries strip */
.cd .sw-strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cd .sw-strip .sw-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 40px;padding-top:28px;padding-bottom:28px}
.cd .sw-strip .eyebrow{font-size:12px;flex:1 1 100%;text-align:center}
.cd .sw-strip b{font-size:17px;font-weight:700;color:var(--text-3);letter-spacing:-0.01em}
/* cards on the page */
.cd .sw-card{padding:24px;display:flex;flex-direction:column;gap:8px}
.cd .sw-card h3{font-size:17px;font-weight:700;letter-spacing:-0.01em;line-height:1.35}
.cd .sw-card p{font-size:15px;line-height:1.55;color:var(--text-2)}
.cd .sw-card>.k-ico{margin-bottom:10px}
.cd .card.is-dark{background:var(--side-bg);border-color:var(--side-bg);color:var(--side-text);box-shadow:var(--shadow-lg)}
.cd .card.is-dark h3,.cd .card.is-dark .sw-word{color:#fff}
.cd .card.is-dark p{color:var(--side-text)}
.cd .sw-n{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--primary-ink);margin-bottom:6px}
.cd .card.is-dark .sw-n{color:color-mix(in srgb,var(--primary) 40%,#fff)}
.cd .sw-t-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.cd .sw-big{font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--primary-ink);font-variant-numeric:tabular-nums}
.cd .sw-quiet-l{font-size:14px;color:var(--text-2);line-height:1.45}
/* DMARCbis band (dark) */
.cd .sw-dcard{padding:24px;border:1px solid var(--side-border);border-radius:var(--radius-lg);background:oklch(1 0 0 / 0.04);display:flex;flex-direction:column;gap:6px;min-width:0}
.cd .sw-dpill{align-self:flex-start;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-pill);background:var(--side-active-bg);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cd .sw-dcard code{font-family:var(--font-mono);font-size:17px;color:#fff;margin-top:10px}
.cd .sw-dcard b{font-size:15px;font-weight:600;color:#fff}
.cd .sw-dcard p{font-size:14px;line-height:1.55;color:var(--side-text)}
.cd .sw-recs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.cd .sw-rec{padding:20px 24px;border:1px solid var(--side-border);border-radius:var(--radius-lg);background:oklch(0 0 0 / 0.2);min-width:0}
.cd .sw-rec.is-new{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.cd .sw-rec-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--side-text-2)}
.cd .sw-rec.is-new .sw-rec-l{color:color-mix(in srgb,var(--primary) 40%,#fff)}
.cd .sw-rec code{display:block;margin-top:10px;font-family:var(--font-mono);font-size:14px;line-height:1.7;color:var(--side-text-2);overflow-wrap:anywhere}
.cd .sw-rec.is-new code{color:#fff}
.cd .sw-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.cd .btn.sw-btn-lg{height:48px;padding:0 24px;font-size:15px}
.cd .btn.sw-btn-dark{background:transparent;color:#fff;border-color:oklch(1 0 0 / 0.3)}
/* problem */
.cd .sw-prob{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cd .sw-prob .card.is-dark{grid-column:1 / -1}
.cd .sw-prob .card.is-dark .eyebrow{color:color-mix(in srgb,var(--primary) 40%,#fff)}
.cd .sw-prob .card.is-dark p{font-size:17px;color:#fff;line-height:1.5}
.cd .sw-lead strong{color:var(--text);font-weight:700}
/* domain score */
.cd .sw-score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center;padding:40px;box-shadow:var(--shadow-lg)}
.cd .sw-score h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;font-family:var(--font-mono)}
.cd .sw-score-p{font-size:15.5px;line-height:1.55;color:var(--text-2);margin-top:8px;max-width:580px}
.cd .sw-factors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px;margin-top:24px}
.cd .sw-factor-t{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.cd .sw-factor-t span{font-family:var(--font-mono);font-size:12.5px;font-weight:400;color:var(--text-3)}
.cd .sw-factor .bar{height:8px}
.cd .sw-seg-mono button{font-family:var(--font-mono);font-size:13px}
.cd .sw-score-wrap{margin-top:24px}
/* dashboard: browser frame holding a scaled app board */
.cd .sw-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 16px}
.cd .sw-tab{height:36px;padding:0 14px;border:1px solid var(--side-border);border-radius:var(--radius-sm);background:transparent;color:var(--side-text);font-size:14px;font-weight:600;cursor:pointer}
.cd .sw-tab.is-active{background:var(--side-active-bg);border-color:var(--primary);color:#fff}
.cd .sw-browser{border:1px solid var(--side-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--side-bg);box-shadow:0 40px 80px -24px oklch(0 0 0 / 0.55)}
.cd .sw-browser.is-light{border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.cd .sw-browser-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;background:oklch(1 0 0 / 0.05);border-bottom:1px solid var(--side-border)}
.cd .sw-dot{width:10px;height:10px;border-radius:50%;background:oklch(1 0 0 / 0.22);flex:none}
.cd .sw-url{margin-left:10px;flex:0 1 340px;min-width:0;height:24px;display:flex;align-items:center;padding:0 12px;border-radius:var(--radius-sm);background:oklch(1 0 0 / 0.07);font-family:var(--font-mono);font-size:12px;color:var(--side-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd .sw-shot{position:relative;overflow:hidden;height:662px;background:var(--bg)}
.cd .sw-shot-in{width:1440px;transform-origin:0 0;transform:scale(0.7875)}
.cd .sw-shot.is-sm{height:300px}
.cd .sw-shot.is-sm .sw-shot-in{transform:scale(0.3847)}
.cd .sw-fade{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--side-bg));pointer-events:none}
.cd .sw-live-tag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:oklch(1 0 0 / 0.07);color:var(--side-text);font-size:12px;font-weight:600;white-space:nowrap}
.cd .sw-live-tag i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.cd .sw-cap{font-family:var(--font-mono);font-size:12.5px;color:var(--side-text-2);text-align:center;margin-top:16px}
/* journey */
.cd .sw-journey{display:flex;align-items:stretch;gap:8px}
.cd .sw-journey>.card{flex:1 1 0;min-width:0;padding:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.cd .sw-journey>.i{align-self:center;color:var(--primary);width:22px;height:22px}
.cd .sw-stage-v{font-family:var(--font-mono);font-size:22px;font-weight:700}
.cd .card.is-dark .sw-stage-v{color:#fff}
.cd .card.is-dark .eyebrow{color:color-mix(in srgb,var(--primary) 40%,#fff)}
/* products */
.cd .sw-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:28px 0 44px}
.cd .sw-flow span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.cd .sw-flow .i{color:var(--primary)}
.cd .sw-prod{position:relative;padding:28px;display:flex;flex-direction:column}
.cd .sw-prod-hd{display:flex;align-items:center;gap:12px}
.cd .sw-prod-hd .sw-word{font-size:23px}
.cd .sw-prod .eyebrow{margin-top:18px}
.cd .card.is-dark .eyebrow{color:color-mix(in srgb,var(--primary) 40%,#fff)}
.cd .sw-prod>p{font-size:15.5px;line-height:1.55;color:var(--text-2);margin-top:8px}
.cd .sw-hr{height:1px;background:var(--border);margin:22px 0}
.cd .card.is-dark .sw-hr{background:var(--side-border)}
.cd .sw-prod .link{margin-top:auto;padding-top:22px;font-size:14.5px}
.cd .card.is-dark .link{color:color-mix(in srgb,var(--primary) 40%,#fff)}
.cd .sw-prod-tag{position:absolute;top:-12px;left:28px}
.cd .card.is-dark .k-ico{background:var(--side-active-bg);color:#fff}
.cd .sw-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.45}
.cd .sw-checks li{display:flex;align-items:flex-start;gap:10px}
.cd .sw-checks li>.i{color:var(--primary-ink);margin-top:2px;width:16px;height:16px}
.cd .card.is-dark .sw-checks{color:#fff}
.cd .card.is-dark .sw-checks li>.i{color:color-mix(in srgb,var(--primary) 40%,#fff)}
/* ClearSPF / ClearDKIM detail */
.cd .sw-feats{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.cd .sw-feats li{display:flex;align-items:flex-start;gap:12px}
.cd .sw-feats li>.i{color:var(--primary-ink);margin-top:3px}
.cd .sw-feats b{display:block;font-size:16px;font-weight:700}
.cd .sw-feats span{display:block;font-size:14.5px;line-height:1.5;color:var(--text-2);margin-top:2px}
.cd .sw-setup{padding:28px;box-shadow:var(--shadow-lg)}
.cd .sw-setup>.eyebrow{margin-bottom:20px}
.cd .sw-setup .steps-v>.step>.step-t{line-height:1.45;align-self:start;padding-top:4px;color:var(--text)}
.cd .sw-setup .steps-v .step-body{margin-top:8px}
.cd .step.sw-step-ok .step-n{background:var(--ok-tint);border-color:var(--ok);color:var(--ok-ink)}
.cd .sw-dns{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-sunken);overflow:hidden}
.cd .sw-dns .dns-row{grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr);padding:12px 16px}
.cd .sw-dns .dns-val{color:var(--primary-ink)}
.cd .sw-dns.is-col .dns-row{grid-template-columns:64px minmax(0,1fr)}
.cd .sw-dns.is-col .dns-val{grid-column:2}
/* stats band */
.cd .sw-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cd .sw-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center;padding-top:56px;padding-bottom:56px}
.cd .sw-stats b{display:block;font-size:44px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--primary-ink)}
.cd .sw-stats span{display:block;font-size:14.5px;color:var(--text-2);margin-top:6px}
/* testimonials */
.cd .sw-quote{padding:28px;display:flex;flex-direction:column;gap:22px}
.cd .sw-quote>p{font-size:17px;line-height:1.6;color:var(--text)}
.cd .card.is-dark.sw-quote>p{color:#fff}
.cd .card.is-dark .user-name{color:#fff}
.cd .card.is-dark .user-meta{color:var(--side-text-2)}
.cd .card.is-dark .avatar{background:var(--side-active-bg);color:#fff}
/* pricing */
.cd .sw-plans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:start;margin-top:40px}
.cd .sw-plan{position:relative;padding:24px;display:flex;flex-direction:column}
.cd .sw-plan.is-featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow-lg)}
.cd .sw-plan-n{font-size:16px;font-weight:700}
.cd .sw-plan-p{font-size:32px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;margin-top:12px;font-variant-numeric:tabular-nums}
.cd .sw-plan-note{font-size:13px;color:var(--text-2);min-height:40px;margin-top:6px}
.cd .sw-plan .btn{width:100%;margin-top:12px}
.cd .sw-plan .sw-hr{margin:20px 0}
.cd .sw-plan .sw-checks{font-size:13.5px}
.cd .sw-plan-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--on-primary)}
/* integrations, security */
.cd .sw-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cd .sw-chips .chip{height:40px;padding:0 16px;border-radius:var(--radius-sm);background:var(--surface);font-size:13.5px;color:var(--text)}
.cd .sw-sec-card{padding:28px}
.cd .sw-sec-card .sw-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;font-size:15px;font-weight:600}
.cd .sw-sec-card p{font-size:13.5px;line-height:1.55;color:var(--text-2);margin-top:20px}
/* FAQ */
.cd .sw-faq{max-width:840px;margin:44px auto 0;border-top:1px solid var(--border)}
.cd .sw-q{border-bottom:1px solid var(--border)}
.cd .sw-q>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border:0;background:none;text-align:left;font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--text);cursor:pointer}
.cd .sw-q>button .i{color:var(--primary-ink);width:20px;height:20px}
.cd .sw-a{padding:0 40px 22px 0;font-size:15.5px;line-height:1.62;color:var(--text-2)}
/* final call to action */
.cd .sw-cta{border-radius:var(--radius-lg);padding:88px 32px;text-align:center;color:var(--side-text);background:radial-gradient(620px 380px at 50% 125%,color-mix(in srgb,var(--primary) 55%,transparent),transparent 62%),var(--side-bg);display:flex;flex-direction:column;align-items:center}
.cd .sw-cta .sw-h2{font-size:44px;color:#fff;margin-top:20px;max-width:720px}
.cd .sw-cta .sw-lead{color:var(--side-text);max-width:520px}
.cd .sw-cta-sec{padding:0 0 88px}
/* ---------- board-only: states band below the page ---------- */
.cd .sw-states{background:var(--surface-sunken);border-top:2px dashed var(--border-strong);padding:48px 0 64px}
.cd .sw-states-hd h2{font-size:22px;font-weight:800;letter-spacing:-0.02em}
.cd .sw-states-hd p{font-size:14px;color:var(--text-2);margin-top:4px;max-width:880px}
.cd .sw-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;align-items:start;margin-top:28px}
.cd .sw-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.cd .sw-panel.is-full{grid-column:1 / -1}
.cd .sw-panel-l b{display:block;font-size:14px;font-weight:700}
.cd .sw-panel-l span{display:block;font-size:13px;color:var(--text-2);margin-top:2px}
.cd .sw-stage{padding:24px;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--bg);display:flex;flex-direction:column;gap:12px;min-width:0}
.cd .sw-stage.is-flush{padding:0;overflow:hidden}
.cd .sw-stage.is-dark{background:var(--side-bg);border-style:solid;border-color:var(--side-bg)}
.cd .sw-phone{width:390px;max-width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg)}
.cd .sw-hd.is-phone .sw-hd-in{height:60px;gap:8px;padding:0 16px}
.cd .sw-hd.is-phone .sw-nav,.cd .sw-hd.is-phone .sw-signin{display:none}
.cd .sw-hd.is-phone .sw-menu-btn{display:grid}
.cd .sw-hd.is-phone .sw-hd-act{margin-left:auto}
.cd .sw-dd-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
/* ---------- article template ---------- */
.cd .sw-art{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:72px;justify-content:center;padding:48px 32px 24px}
.cd .sw-art .crumbs{font-size:13.5px;margin:0}
.cd .sw-art .crumbs a{color:var(--text-2)}
.cd .sw-art .crumbs .i{color:var(--text-3)}
.cd .sw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px;font-size:13px;color:var(--text-3)}
.cd .sw-art h1{font-size:40px;font-weight:800;letter-spacing:-0.03em;line-height:1.12;margin-top:14px;text-wrap:balance}
.cd .sw-art-lede{font-size:19px;line-height:1.6;color:var(--text-2);margin-top:18px}
.cd .sw-prose h2{font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1.25;margin-top:44px}
.cd .sw-prose h3{font-size:18px;font-weight:700;letter-spacing:-0.01em;margin-top:28px}
.cd .sw-prose p{font-size:16.5px;line-height:1.7;color:var(--text);margin-top:14px}
.cd .sw-prose a{color:var(--primary-ink);font-weight:600}
.cd .sw-prose ul,.cd .sw-prose ol{font-size:16.5px;line-height:1.7;margin:14px 0 0;padding-left:22px}
.cd .sw-prose li+li{margin-top:8px}
.cd .sw-prose li::marker{color:var(--primary)}
.cd .sw-prose .callout{align-items:flex-start;margin-top:22px;padding:16px 18px}
.cd .sw-prose .callout>.i{align-self:flex-start;margin-top:2px}
.cd .sw-prose .callout b{display:block;font-size:14px;font-weight:700}
.cd .sw-prose .callout p{font-size:15px;line-height:1.6;color:var(--text);margin-top:4px}
.cd .sw-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:18px 22px;margin-top:40px}
.cd .sw-help span{font-size:15px;color:var(--text-2)}
.cd .sw-help>div{display:flex;gap:8px}
/* on-this-page rail */
.cd .sw-toc{padding-top:132px}
.cd .sw-toc .eyebrow{margin-bottom:10px}
.cd .sw-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--border);display:flex;flex-direction:column}
.cd .sw-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--text-2)}
.cd .sw-toc a.is-active{border-left-color:var(--primary);color:var(--primary-ink);font-weight:600}
.cd .sw-related{padding:56px 32px 88px}
.cd .sw-related h2{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-bottom:20px}
.cd .sw-rel{padding:22px;display:flex;flex-direction:column;gap:10px}
.cd .sw-rel .pill{align-self:flex-start}
.cd .sw-rel h3{font-size:16.5px;font-weight:700;line-height:1.35;color:var(--text)}
.cd .sw-rel .link{margin-top:auto;padding-top:6px}
/* article elements used by other pages (drawn on the elements band) */
.cd .sw-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cd .sw-steps li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.6}
.cd .sw-steps .step-n{margin-top:-1px;border-color:var(--primary);color:var(--primary-ink);background:var(--primary-tint)}
.cd .sw-pre{margin:16px 0 0;padding:18px 20px;border-radius:var(--radius-lg);background:var(--side-bg);color:var(--side-text);font-family:var(--font-mono);font-size:12.5px;line-height:1.7;white-space:pre;overflow-x:auto}
.cd .sw-pre .k{color:var(--side-text-2)}
.cd .sw-pre .d{color:color-mix(in srgb,var(--primary) 45%,#fff)}
.cd .sw-pre .g{color:var(--ok)}
.cd .sw-pre .s{color:var(--warn)}
.cd .sw-snip{margin-top:16px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cd .sw-snip-l{padding:8px 16px;background:var(--surface-sunken);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:12px;color:var(--text-2)}
.cd .sw-snip .record{border:0;border-radius:0;background:var(--surface)}
.cd .sw-bq{margin:24px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--primary);font-size:20px;line-height:1.5;font-weight:600;letter-spacing:-0.01em;color:var(--text)}
.cd .sw-by{margin-top:22px}
.cd .sw-promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:22px 24px;border-color:var(--primary-tint-2);background:var(--primary-tint)}
.cd .sw-promo b{display:block;font-size:16px;font-weight:700;color:var(--text)}
.cd .sw-promo span{display:block;font-size:14px;color:var(--text-2);margin-top:2px}
.cd .sw-why{padding:24px;border-radius:var(--radius-lg);background:var(--side-bg);color:var(--side-text)}
.cd .sw-why .eyebrow{color:color-mix(in srgb,var(--primary) 40%,#fff)}
.cd .sw-why h3{font-size:19px;font-weight:700;color:#fff;margin-top:8px}
.cd .sw-why p{font-size:15px;line-height:1.65;margin-top:10px}
.cd .sw-refs{padding:18px 20px}
.cd .sw-refs ul{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.cd .sw-rfcs{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.cd .sw-rfc{padding:16px 18px}
.cd .sw-rfc-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.cd .sw-rfc-hd code{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--primary-ink)}
.cd .sw-rfc-hd span{font-size:14px;font-weight:600;color:var(--text-2)}
.cd .sw-rfc p{font-size:14.5px;line-height:1.6;color:var(--text);margin-top:6px}
.cd .sw-tagc{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.cd .sw-tagc-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.cd .sw-tagc-hd code{font-family:var(--font-mono);font-size:15px;font-weight:700}
.cd .sw-tagc-hd span{font-size:13px;color:var(--text-2)}
.cd .sw-tagc p{font-size:14.5px;line-height:1.6}
.cd .sw-opts{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-sm)}
.cd .sw-opts>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:8px 12px;font-size:14px;color:var(--text-2)}
.cd .sw-opts>div+div{border-top:1px solid var(--border)}
.cd .sw-opts code{font-family:var(--font-mono);font-size:13px;color:var(--text)}
.cd .sw-el-src{font-size:12px;color:var(--text-3)}
/* ---------- phone (data-device="mobile"), 390 wide ---------- */
@media (max-width: 900px){
.cd.cd .sw-wrap{padding:0 16px}
.cd.cd .sw-sec{padding:56px 0}
.cd.cd .sw-sec.is-tight{padding-bottom:16px}
.cd.cd .sw-sec.no-top{padding-top:8px}
.cd.cd .sw-h2{font-size:28px}
.cd.cd .sw-lead{font-size:16px}
.cd.cd .sw-below{margin-top:32px}
.cd.cd .sw-hd-in{height:60px;gap:8px}
.cd.cd .sw-nav,.cd.cd .sw-signin{display:none}
.cd.cd .sw-menu-btn{display:grid}
.cd.cd .sw-hd-act{margin-left:auto}
.cd.cd .sw-hero-in{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:40px;padding-bottom:48px}
.cd.cd .sw-h1{font-size:36px;line-height:1.08}
.cd.cd .sw-hero-p{font-size:16.5px}
.cd.cd .sw-check .input-group>.btn{padding:0 14px}
.cd.cd .sw-hero-art{padding:10px}
.cd.cd .sw-widget{padding:18px;gap:16px}
.cd.cd .sw-wg-mid{gap:18px}
.cd.cd .sw-wg-stats b{font-size:20px}
.cd.cd .sw-strip .sw-wrap{gap:8px 20px}
.cd.cd .sw-strip .eyebrow{flex:1 1 100%;text-align:center}
.cd.cd .sw-strip b{font-size:15px}
.cd.cd .sw-g2,.cd.cd .sw-g3,.cd.cd .sw-g4,.cd.cd .sw-recs,.cd.cd .sw-split,.cd.cd .sw-split.is-flip,.cd.cd .sw-factors,.cd.cd .sw-plans,.cd.cd .sw-panels{grid-template-columns:minmax(0,1fr)}
.cd.cd .sw-split{gap:32px}
.cd.cd .sw-split.is-flip>:first-child{order:2}
.cd.cd .sw-prob{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cd.cd .sw-big{font-size:28px}
.cd.cd .sw-src-note{text-align:left}
.cd.cd .sw-score{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px;justify-items:center}
.cd.cd .sw-score>div:last-child{justify-self:stretch}
.cd.cd .sw-gauge{width:192px;height:160px}
.cd.cd .sw-gauge-v{font-size:36px}
.cd.cd .sw-gauge.is-sm{width:132px;height:110px}
.cd.cd .sw-gauge.is-sm .sw-gauge-v{font-size:19px}
.cd.cd .sw-seg-mono{max-width:100%}
.cd.cd .sw-tabs{margin-top:28px}
.cd.cd .sw-shot{height:600px}
.cd.cd .sw-shot-in{width:390px;transform:scale(0.9128)}
.cd.cd .sw-url{margin-left:4px}
.cd.cd .sw-journey{flex-direction:column}
.cd.cd .sw-journey>.i{transform:rotate(90deg)}
.cd.cd .sw-flow{margin:20px 0 32px}
.cd.cd .sw-prod{padding:24px}
.cd.cd .sw-setup{padding:20px}
.cd.cd .sw-dns .dns-row{grid-template-columns:64px minmax(0,1fr)}
.cd.cd .sw-dns .dns-row>.dns-val{grid-column:1 / -1}
.cd.cd .sw-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;padding-top:40px;padding-bottom:40px}
.cd.cd .sw-stats b{font-size:34px}
.cd.cd .sw-plans{gap:24px}
.cd.cd .sw-sec-card .sw-checks{grid-template-columns:minmax(0,1fr)}
.cd.cd .sw-q>button{font-size:16px;padding:18px 0}
.cd.cd .sw-a{padding-right:0}
.cd.cd .sw-cta-sec{padding:0 0 56px}
.cd.cd .sw-cta{padding:56px 20px}
.cd.cd .sw-cta .sw-h2{font-size:32px}
.cd.cd .sw-act>.btn{flex:1 1 100%}
.cd.cd .sw-ft-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding:48px 16px 32px}
.cd.cd .sw-ft-in>:first-child{grid-column:1 / -1}
.cd.cd .sw-ft-bar>div{padding:18px 16px}
.cd.cd .sw-states{padding:40px 0 48px}
.cd.cd .sw-st-desk{display:none}
.cd.cd .sw-stage{padding:16px}
.cd.cd .sw-stage.is-flush{padding:0}
.cd.cd .sw-phone{width:100%;box-shadow:none}
.cd.cd .sw-art{grid-template-columns:minmax(0,1fr);gap:0;padding:28px 16px 16px}
.cd.cd .sw-toc{display:none}
.cd.cd .sw-art h1{font-size:30px}
.cd.cd .sw-related{padding:40px 16px 56px}
}

/* ==== site: written by hand. scripts/port-design-css.py keeps everything below ==== */
/* Page root: the boards set these inline on the artboard root. */
.cd.sw-root{display:flex;flex-wrap:wrap;min-height:100vh}
html{scroll-behavior:smooth}
.cd [id]{scroll-margin-top:84px}
/* Header: sticky. The runtime wraps each <dc-import> in a div.sc-host as tall as the fragment, which
   left the old site's sticky header nothing to stick in; the wrappers step out of the layout. */
.cd .sw-page>.sc-host{display:contents}
.cd .sw-hd{position:sticky;top:0;z-index:50}
/* Products and Company menus: the board draws them open on its states band. They open on hover
   (as today), on click, and while focus is inside. */
.cd .sw-nav-dd{position:relative}
.cd .sw-nav-dd>.sw-dd{position:absolute;top:calc(100% + 8px);left:0;z-index:60;display:none}
.cd .sw-nav-dd:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.cd .sw-nav-dd:hover>.sw-dd,.cd .sw-nav-dd.is-open>.sw-dd,.cd .sw-nav-dd:focus-within>.sw-dd{display:flex}
.cd .sw-nav-dd:hover>.sw-nav-i:not(.is-active){background:var(--surface-sunken);color:var(--text)}
.cd .sw-dd .menu-item:hover{background:var(--surface-sunken)}
/* Phone menu: a panel under the header bar, phone widths only. */
@media (min-width: 901px){.cd .sw-hd .sw-mmenu{display:none}}
@media (max-width: 900px){.cd .sw-hd .sw-mmenu{max-height:calc(100vh - 60px);overflow-y:auto}}
/* "On this page" stays in view while reading (its 132px top padding lines it up with the h1). */
.cd .sw-toc{position:sticky;top:-48px;align-self:start}
/* Home (index.html), written by the home page conversion. */
/* Domain check: the input sits in a kit .field so the invalid state can mark it; keep the drawn 8px rhythm. */
.cd .sw-check>.field{gap:8px}
/* Gauges (index.html script): while the arc moves, the current grade's letter stays dim; it lights
   when the count ends. The runtime owns .is-on, the script only sets data-gauge. */
.cd .sw-gauge[data-gauge="run"] .sw-gauge-band.is-on{fill:var(--text-3)}
/* Screens: stills of the app boards in place of the scaled live board; the frame keeps the drawn crop
   (the top 1440x840 of the board on desktop, the top 390x657 of its phone layout on a phone). */
.cd .sw-shot.is-still{height:auto;aspect-ratio:1440/840}
.cd .sw-shot-in.is-still{width:auto;height:100%;transform:none}
.cd .sw-shot-in.is-still img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
@media (max-width: 900px){.cd.cd .sw-shot.is-still{height:auto;aspect-ratio:390/657}.cd.cd .sw-shot-in.is-still{width:auto;transform:none}}
/* Article blocks placed inside .sw-prose (tag cards, tables, spec cards): the board shows them on
   its elements band, outside the prose, so the ported rules give them no top margin. */
.cd .sw-prose>.card{margin-top:16px}
.cd .sw-prose>.card+.card{margin-top:12px}
.cd .sw-prose .sw-tagc p{margin-top:0}
.cd .sw-art .sw-refs{margin-top:40px}
/* Code blocks: comments and "fail" in the highlighted .sw-pre (forwarding-arc-signatures). */
.cd .sw-pre .c{color:var(--side-text-2);font-style:italic}
.cd .sw-pre .b{color:var(--bad)}
/* Callouts in prose: a list inside one, and inline bold in its body (the first <b> is the title). */
.cd .sw-prose .callout ul{font-size:15px;line-height:1.6;color:var(--text);margin-top:6px}
.cd .sw-prose .callout p b{display:inline;font-size:inherit}
/* A quotation with its source line (dual-signing-rsa-ed25519 quotes RFC 6376). */
.cd .sw-prose .sw-bq p{font-size:16.5px;font-weight:400;font-style:italic;margin-top:0}
.cd .sw-prose .sw-bq p+p{font-style:normal;font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);margin-top:12px}
/* "Why it matters" (.sw-why) inside the prose: its own gap, and light text on the dark panel
   (.sw-prose p would paint it dark). */
.cd .sw-prose .sw-why{margin-top:28px}
.cd .sw-prose .sw-why p{color:var(--side-text)}
/* An h3 inside a spec card, a code token in a table cell, the references list, an icon after a link. */
.cd .sw-prose .sw-rfc h3{margin-top:8px}
.cd .sw-prose .tbl td.mono{white-space:nowrap}
.cd .sw-prose .sw-refs li+li{margin-top:0}
.cd .sw-prose .sw-refs li::marker{color:inherit}
.cd .sw-prose a>.i{vertical-align:-2px;margin-left:3px}
/* Under the 390 phone board (e.g. 320-wide phones) the bar's logo, "Start free" and menu button
   overflow by a few pixels; tighten the button and gap. */
@media (max-width: 374px){.cd.cd .sw-hd-in{gap:6px}.cd.cd .sw-hd-act .btn-primary{padding:0 10px}}
/* Inline code in prose (e.g. selector._domainkey.yourdomain.com) may break inside on narrow screens. */
.cd .sw-prose .sw-code,.cd .sw-tagc .sw-code{overflow-wrap:anywhere}
/* Domain check: a row's detail line (the API's first error for a DMARC record with errors). */
.cd .sw-res-detail{display:block;font-size:13px;color:var(--text-2);margin-top:2px}
/* Home hero card: the figures are a sample, labelled like the product pages' samples. The card's 20px gap is too loose under a label. */
.cd .sw-wg-ex{margin-bottom:-12px}
/* Home hero h1: the first sentence is its own line as a block, not a <br>, because Chromium doesn't balance across a forced break. One step smaller on desktop so the approved line fits four lines at 1440. */
.cd .sw-h1-l{display:block}
@media (min-width: 901px){.cd #top .sw-h1{font-size:48px}}