/* Public Web UI. Baseline: docs/design/public_visual_system.md.
   Scope the skin to the public shell, including dynamically replaced results. */
.public-ui {
  --public-paper: #fff;
  --public-ink: #171717;
  --public-muted: #656565;
  --public-line: #e5e5e5;
  --public-surface: #f7f7f6;
  --public-brand: #ff6a23;
  --public-success: #167348;
  --public-warning: #965800;
  --public-error: #b42318;
  --color-base-100: var(--public-paper);
  --color-base-200: var(--public-surface);
  --color-base-300: var(--public-line);
  --color-base-content: var(--public-ink);
  --color-primary: var(--public-ink);
  --color-primary-content: #fff;
  --color-secondary: var(--public-ink);
  --color-success: var(--public-success);
  --color-warning: var(--public-warning);
  --color-error: var(--public-error);
  background: var(--public-paper);
  color: var(--public-ink);
  color-scheme: light;
  font-family: "Avenir Next", "Hiragino Sans GB", "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
.public-ui ::selection { background: #e9e9e9; color: var(--public-ink); }
.public-ui :is(a, button, input, select, summary, textarea):focus-visible { outline: 2px solid var(--public-ink); outline-offset: 4px; }
.public-ui :is(h1, h2, h3) { color: var(--public-ink); font-weight: 650; letter-spacing: -.025em; }
.public-ui h1 { line-height: 1.42; text-wrap: balance; }
.public-ui :is(h2, h3) { line-height: 1.5; }
.public-ui :is(p, li, dd) { overflow-wrap: anywhere; }
.public-ui :is(.text-slate-950, .text-slate-900, .text-emerald-600, .text-emerald-700, .text-primary) { color: var(--public-ink); }
.public-ui :is(.text-slate-500, .text-slate-600, .text-slate-700) { color: var(--public-muted); }
.public-ui .btn { border-radius: 4px; box-shadow: none; font-weight: 550; text-transform: none; min-height: 44px; }
.public-ui .btn-primary { background: var(--public-ink); border-color: var(--public-ink); color: #fff; }
.public-ui .btn-primary:hover { background: #333; border-color: #333; }
.public-ui :is(.btn-outline, .btn-ghost) { color: var(--public-ink); background: #fff; border-color: #ccc; }
.public-ui :is(.btn-outline, .btn-ghost):hover { background: var(--public-surface); border-color: var(--public-ink); }
.public-ui :is(.btn[disabled], .btn:disabled) { background: #eee; border-color: var(--public-line); color: var(--public-muted); }
.public-ui :is(.input, .select, .textarea) { background: #fff; border-color: #ccc; border-radius: 4px; color: var(--public-ink); box-shadow: none; }
.public-ui :is(input[type=checkbox], input[type=radio]) { accent-color: var(--public-ink); }
.public-ui [class*="text-base-content/"] { color: var(--public-muted); }
.public-ui #guest-login-link { color: var(--public-muted); }
.public-ui .public-footer .text-slate-400 { color: var(--public-muted); }
.public-ui.landing-home :is(.lp-hero-line-1, .lp-hero-line-2, .lp-hero-sub, .lp-hero-form) { animation: none; }
.public-ui .connection-kicker { color: var(--public-muted); font-weight: 450; font-size: 13px; letter-spacing: .02em; }
.public-ui :is(.alert, .card, .flash-feedback-content, .flash-feedback-dialog) { box-shadow: none; border-radius: 4px; }
.public-ui .alert { border: 1px solid var(--public-line); background: #fff; }
.public-ui .alert-success { color: var(--public-success); }
.public-ui .alert-error { color: var(--public-error); }
.public-ui .flash-feedback-content { border: 1px solid var(--public-line); }

/* Shared navigation, with the same orange square on every public page. */
.public-ui > nav { background: #fffffff5; border-color: var(--public-line); backdrop-filter: none; }
.public-ui > nav > div { max-width: 1392px; padding-inline: 48px; }
.public-ui .homepage-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 26px; font-weight: 700; letter-spacing: -.04em; color: var(--public-ink); }
.public-ui :is(.homepage-brand-mark, .public-brand-mark) { display: inline-block; width: 22px; height: 22px; flex: none; border-radius: 2px; background: var(--public-brand); }
.public-ui .homepage-nav { display: flex; align-items: center; gap: 28px; list-style: none; margin-left: auto; margin-right: 36px; font-size: 14px; }
.public-ui .homepage-nav > li > a, .public-ui .homepage-nav summary { color: var(--public-ink); font-weight: 500; padding: 12px 0; }
.public-ui > nav [data-controller="theme-switcher"] { display: none; }
.public-ui > nav #guest-signup-cta { min-height: 42px; padding-inline: 22px; }
.public-ui .regional-nav-panel { border-radius: 4px; border-color: var(--public-line); box-shadow: 0 8px 24px #0000000a; }
.public-ui .regional-nav-panel :is(a:hover, a[aria-current=page]) { background: var(--public-surface); }
.public-ui .regional-nav-panel a { border-radius: 3px; }
.public-ui .public-footer { padding-block: 48px; color: var(--public-muted); border-color: var(--public-line); }
.public-ui .public-footer > div { max-width: 1392px; padding-inline: 48px; gap: 32px; }
.public-ui .public-footer > div > div:nth-child(2) { max-width: 720px; line-height: 2; }
.public-ui .public-footer .public-brand-mark { width: 14px; height: 14px; }

/* Reading pages: guides, privacy, API reference and certificate reminders. */
.public-ui main > article { max-width: 960px; padding: 72px 48px 96px; font-size: 16px; line-height: 1.9; }
.public-ui main > article > header { padding-bottom: 36px; border-bottom: 1px solid var(--public-line); }
.public-ui main > article > header h1 { font-size: clamp(30px, 3.7vw, 48px); font-weight: 650; line-height: 1.45; margin-block: 20px 24px; }
.public-ui main > article > header p { max-width: 800px; }
.public-ui main > article > section { margin-top: 56px; }
.public-ui main > article h2 { font-size: 25px; margin-bottom: 20px; }
.public-ui main > article :is(.rounded-xl, .rounded-2xl) { border-radius: 4px; }
.public-ui main > article .bg-emerald-50 { background: var(--public-surface); }
.public-ui main > article pre { background: var(--public-surface); color: var(--public-ink); border: 1px solid var(--public-line); padding: 24px; font-size: 13px; line-height: 1.9; }
.public-ui main > article .table :is(th, td) { padding: 18px 20px; border-color: var(--public-line); }
.public-ui main > article .table th { font-weight: 550; color: var(--public-muted); background: var(--public-surface); }
.public-ui main > article aside { margin-top: 64px; padding-top: 36px; }
.public-ui #tool-guide { max-width: 1392px; padding: 24px 48px 80px; line-height: 1.9; }
.public-ui #tool-guide > div { max-width: 880px; }
.public-ui #tool-guide details { padding-block: 24px; }

/* Online tools: existing markup and Turbo/Stimulus contracts stay intact. */
.public-ui .connection-tool { max-width: 1392px; padding: 72px 48px 64px; }
.public-ui .connection-tool-heading { max-width: 880px; text-align: left; margin: 0 0 40px; }
.public-ui .connection-tool-heading h1 { font-size: clamp(30px, 3.7vw, 48px); line-height: 1.45; margin-block: 16px 24px; }
.public-ui .connection-tool-heading > p:last-child { color: var(--public-muted); font-size: 17px; line-height: 1.9; }
.public-ui :is(.regional-coverage, .regional-coverage small, .regional-coverage p > span) { color: var(--public-muted); }
.public-ui .connection-tool-heading .regional-coverage p { justify-content: flex-start; }
.public-ui .regional-coverage-locations span { background: var(--public-surface); border-radius: 3px; }
.public-ui .regional-tabs { justify-content: flex-start; max-width: none; width: fit-content; padding: 0; margin: 0 0 28px; gap: 36px; border: 0; border-bottom: 1px solid var(--public-line); border-radius: 0; background: none; }
.public-ui .regional-tabs a { padding: 12px 0; color: var(--public-muted); font-size: 15px; font-weight: 500; border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.public-ui .regional-tabs a[aria-current=page] { background: none; color: var(--public-ink); border-color: var(--public-ink); box-shadow: none; }
.public-ui .connection-input-card { padding: 0; background: #fff; border: 0; box-shadow: none; border-radius: 0; }
.public-ui .connection-input-card form > label { color: var(--public-muted); font-weight: 450; margin-bottom: 14px; }
.public-ui .connection-input-row { gap: 12px; }
.public-ui .connection-input-row .input { height: 56px; padding-inline: 18px; background: #fff; font-size: 17px; }
.public-ui .connection-input-row .btn { height: 56px; min-width: 160px; padding-inline: 28px; font-size: 16px; }
.public-ui .connection-input-foot { color: var(--public-muted); font-size: 13px; margin-block: 16px 24px; }
.public-ui :is(.connection-input-foot button, .regional-region-edit, .regional-detail details summary, .regional-reminder, .regional-tool-link, .regional-platform-certificate a) { color: var(--public-ink); text-underline-offset: 4px; }
.public-ui .regional-regions { border-color: var(--public-line); padding-block: 20px; }
.public-ui .regional-regions summary { min-height: 44px; font-size: 14px; }
.public-ui .regional-regions summary span { color: var(--public-muted); }
.public-ui .regional-regions fieldset { gap: 24px; margin-top: 24px; }
.public-ui .regional-regions fieldset label { min-height: 44px; padding: 10px 16px; border-color: var(--public-line); border-radius: 4px; color: var(--public-muted); font-size: 13px; }
.public-ui .regional-regions fieldset label:has(input:checked) { color: var(--public-ink); border-color: #a3a3a3; background: var(--public-surface); }
.public-ui .regional-regions input { accent-color: var(--public-ink); }
.public-ui .connection-results { max-width: none; margin: 48px 0 36px; }
.public-ui .regional-report { border: 1px solid var(--public-line); border-radius: 4px; }
.public-ui .regional-report-heading { padding: 32px 32px 20px; gap: 24px; }
.public-ui .regional-report-heading h2 { font-size: 26px; font-weight: 600; line-height: 1.5; }
.public-ui :is(.regional-report-heading time, .regional-report-coverage, .regional-summary, .regional-footnote) { color: var(--public-muted); font-size: 13px; }
.public-ui :is(.regional-report-coverage, .regional-summary, .regional-difference) { margin-left: 32px; margin-right: 32px; }
.public-ui .regional-summary { margin-bottom: 28px; }
.public-ui .regional-table-head, .public-ui .regional-row { padding: 22px 32px; gap: 24px; }
.public-ui .regional-table-head { background: var(--public-surface); color: var(--public-muted); font-size: 12px; }
.public-ui .regional-row { border-color: var(--public-line); font-size: 14px; line-height: 1.9; }
.public-ui .regional-result-group { padding: 14px 32px; background: #fff; color: var(--public-muted); border-top: 1px solid var(--public-line); font-weight: 450; }
.public-ui :is(.regional-detail small, .regional-detail details, .regional-expiry) { color: var(--public-muted); font-size: 12px; line-height: 1.9; }
.public-ui .regional-detail code { font-size: 12px; }
.public-ui .regional-status { color: var(--public-muted); font-size: 13px; }
.public-ui .regional-status[data-state=ok] { color: var(--public-success); }
.public-ui .regional-status[data-state=warning] { color: var(--public-warning); }
.public-ui .regional-status[data-state=error] { color: var(--public-error); }
.public-ui .regional-issuer { display: block; margin-top: 18px; color: var(--public-muted); font-size: 14px; }
.public-ui .regional-certificate-card .regional-detail { padding-block: 12px; }
.public-ui .regional-certificate-countdown { font-size: 42px; line-height: 1.45; font-weight: 450; color: var(--public-ink); }
.public-ui .regional-certificate-card .regional-expiry { font-size: 14px; margin-block: 10px; }
.public-ui .regional-certificate-card .regional-duration { color: var(--public-muted); }
.public-ui .regional-certificate-card[data-regional-status=warning] .regional-certificate-countdown { color: var(--public-warning); }
.public-ui .regional-certificate-card[data-regional-status=error] .regional-certificate-countdown { color: var(--public-error); }
.public-ui .regional-dns-cards { gap: 40px; }
.public-ui .regional-domain-registration { background: var(--public-surface); border-color: var(--public-line); border-radius: 4px; padding: 28px; color: var(--public-muted); font-size: 14px; }
.public-ui :is(.registration-card-heading h2, .registration-date dd) { color: var(--public-ink); }
.public-ui .registration-details { border-color: var(--public-line); }
.public-ui .registration-details summary { color: var(--public-ink); min-height: 44px; }
.public-ui .registration-state[data-state=ok] { color: var(--public-success); }
.public-ui .registration-state[data-state=soon] { color: var(--public-warning); }
.public-ui .registration-state[data-state=expired] { color: var(--public-error); }
.public-ui .regional-platform-certificate { padding: 22px 32px; background: var(--public-surface); border-color: var(--public-line); font-size: 13px; }
.public-ui .regional-difference { background: var(--public-surface); border: 1px solid var(--public-line); border-radius: 4px; color: var(--public-warning); padding: 16px 20px; }
.public-ui .regional-alert { border: 1px solid var(--public-line); background: #fff; color: var(--public-error); border-radius: 4px; padding: 24px; }
.public-ui .regional-empty { padding: 40px 0; color: var(--public-muted); }
.public-ui .regional-monitor { margin-top: 56px; padding: 36px 0; border: 0; border-top: 1px solid var(--public-line); border-radius: 0; background: #fff; gap: 28px; }
.public-ui .regional-monitor h2 { color: var(--public-ink); font-size: 24px; line-height: 1.5; }
.public-ui .regional-monitor p { color: var(--public-muted); font-size: 14px; line-height: 1.9; }
.public-ui .regional-retry[hidden], .public-ui .tool-next-step[hidden] { display: none; }
.public-ui .tool-next-actions .tool-next-secondary { background: #fff; border-color: #ccc; color: var(--public-ink); }
.public-ui .tool-next-actions .tool-next-secondary:hover { background: var(--public-surface); border-color: var(--public-ink); }
.public-ui .regional-result-layout { display: grid; gap: 32px; align-items: start; }
.public-ui .regional-result-layout > * { min-width: 0; }
.public-ui .tool-next-sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin: 0; padding: 32px; border: 1px solid var(--public-line); border-radius: 4px; background: var(--public-surface); }
.public-ui .tool-next-sidebar > div { min-width: 0; flex: none; }
.public-ui .tool-next-sidebar h2 { margin-top: 12px; font-size: 28px; line-height: 1.5; white-space: pre-line; text-wrap: balance; }
.public-ui .tool-next-sidebar .connection-kicker { margin: 0; font-size: 13px; }
.public-ui .tool-next-sidebar [data-next-description] { margin-top: 16px; font-size: 15px; }
.public-ui .tool-next-benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.public-ui .tool-next-benefits li { display: flex; gap: 12px; }
.public-ui .tool-next-benefits li::before { content: "✓"; flex: none; font-weight: 650; }
.public-ui .tool-next-sidebar .tool-next-actions { flex: none; }
.public-ui .tool-next-sidebar .btn { width: 100%; font-size: 15px; }
.public-ui .tool-next-sidebar :is(.tool-next-note, .tool-next-login) { margin: 0; font-size: 13px; }
.public-ui .tool-next-login a { color: var(--public-ink); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1200px) {
  .public-ui .regional-result-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .public-ui .tool-next-sidebar { position: sticky; top: 88px; padding: 28px; }
  .public-ui .regional-result-layout .regional-report-heading { flex-wrap: wrap; }
  .public-ui .regional-result-layout :is(.regional-table-head, .regional-row) { gap: 16px; padding-inline: 24px; }
}

/* Preserve the existing curved fan, per-node states and animation controls. */
.public-ui .probe-visualization { margin: 24px 32px 32px; }
.public-ui :is(.probe-visual-progress-caption, .probe-visual-note, .probe-visual-legend) { color: var(--public-muted); }
.public-ui .probe-visual-diagram { background: none; margin-top: 24px; }
.public-ui .probe-mobile-diagram { background: none; }
.public-ui .probe-visual-grid { stroke: #efefef; }
.public-ui :is(.probe-visual-route, .probe-visual-flight[data-state=active] .probe-visual-route, .probe-visual-flight[data-state=ok] .probe-visual-route) { stroke: #b7b7b7; }
.public-ui .probe-visual-flow { stroke: var(--public-ink); filter: none; }
.public-ui .probe-visual-flight .probe-visual-node { fill: #fff; stroke: var(--public-line); }
.public-ui .probe-visual-flight[data-state=warning] .probe-visual-node { stroke: var(--public-warning); }
.public-ui .probe-visual-flight[data-state=error] .probe-visual-node { stroke: var(--public-error); }
.public-ui .probe-visual-name { fill: var(--public-ink); font-weight: 550; }
.public-ui .probe-visual-detail { fill: var(--public-muted); }
.public-ui .probe-visual-target { fill: var(--public-ink); }
.public-ui .probe-visual-target-halo { stroke: var(--public-line); }
.public-ui .probe-visual-target-label { fill: #fff; }
.public-ui .probe-visual-signal { stroke: #fff; }
.public-ui :is(.probe-visual-dot, .probe-visual-legend i) { fill: #a3a3a3; background: #a3a3a3; }
.public-ui :is(.probe-visual-flight[data-state=active], .probe-visual-flight[data-state=ok]) .probe-visual-dot { fill: var(--public-success); }
.public-ui .probe-visual-legend .probe-visual-green { background: var(--public-success); }
.public-ui .probe-visual-flight[data-state=warning] .probe-visual-dot { fill: var(--public-warning); }
.public-ui .probe-visual-legend .probe-visual-amber { background: var(--public-warning); }
.public-ui .probe-visual-flight[data-state=error] .probe-visual-dot { fill: var(--public-error); }
.public-ui .probe-visual-legend .probe-visual-red { background: var(--public-error); }
.public-ui .probe-visual-pulse { stroke: var(--public-success); }
.public-ui .probe-visual-pause { color: var(--public-ink); background: #fff; border-color: #ccc; border-radius: 4px; min-height: 44px; padding: 8px 12px; }
.public-ui .probe-visual-progress { background: var(--public-line); color: var(--public-ink); }
.public-ui .probe-visual-progress::-webkit-progress-bar { background: var(--public-line); }
.public-ui .probe-visual-progress::-webkit-progress-value { background: var(--public-ink); }
.public-ui .probe-visual-progress::-moz-progress-bar { background: var(--public-ink); }

/* CLI and AI: neutral technical examples, same typography and spacing. */
.public-ui .cli-shell { max-width: 1392px; padding: 72px 48px 96px; }
.public-ui .cli-hero { gap: 80px; padding-bottom: 80px; }
.public-ui .cli-hero h1 { font-size: clamp(32px, 3.7vw, 54px); font-weight: 650; line-height: 1.42; letter-spacing: -.025em; }
.public-ui .cli-lead { font-size: 17px; line-height: 1.9; color: var(--public-muted); opacity: 1; }
.public-ui .cli-note { font-size: 13px; color: var(--public-muted); opacity: 1; }
.public-ui .cli-terminal { background: var(--public-surface); color: var(--public-ink); border: 1px solid var(--public-line); border-radius: 4px; box-shadow: none; padding: 36px; }
.public-ui :is(.cli-terminal-top, .cli-terminal-label, .cli-terminal-foot) { color: var(--public-muted); }
.public-ui .cli-terminal-divider { background: var(--public-line); }
.public-ui .cli-section { padding: 64px 0; gap: 80px; }
.public-ui .cli-section-heading h2 { font-weight: 650; line-height: 1.5; }
.public-ui .cli-step { line-height: 1.9; }
.public-ui :is(.cli-code, .cli-platforms, .cli-prompt, .cli-online, .cli-downloads .rounded-2xl) { border-radius: 4px; border-color: var(--public-line); }
.public-ui :is(.cli-code, .cli-prompt) { background: var(--public-surface); color: var(--public-ink); }
.public-ui .cli-code { padding: 24px; font-size: 13px; }
.public-ui .cli-online { background: #fff; border-inline: 0; padding: 36px 0; }
.public-ui .cli-actions .btn { min-height: 52px; }

/* Pricing retains its duration toggle, price calculations and FAQ behavior. */
.public-ui .public-pricing { max-width: 1392px; padding: 72px 48px 0; }
.public-ui .public-pricing :is(.pr-syne, .pr-currency, .pr-amount) { font-family: inherit; }
.public-ui .public-pricing h1 { font-size: clamp(32px, 3.7vw, 48px); font-weight: 650; line-height: 1.45; }
.public-ui .pr-anim { animation: none; opacity: 1; }
.public-ui .pr-card { padding: 40px; border-radius: 4px; box-shadow: none; transition: none; }
.public-ui .pr-card:hover { transform: none; }
.public-ui .pr-card-free { border-color: var(--public-line); }
.public-ui .pr-card-pro { border: 1px solid var(--public-ink); box-shadow: none; }
.public-ui .pr-card-pro::before { display: none; }
.public-ui :is(.pr-tier-free, .pr-tier-pro) { background: #fff; color: var(--public-muted); border: 0; border-radius: 0; padding: 0; font-size: 14px; letter-spacing: 0; margin-bottom: 28px; }
.public-ui .pr-ribbon { background: var(--public-ink); border-radius: 0 0 3px 3px; box-shadow: none; padding: 5px 16px; }
.public-ui .pr-amount { font-size: 64px; font-weight: 450; }
.public-ui :is(.pr-amount-free, .pr-amount-pro) { color: var(--public-ink); }
.public-ui .pr-period { margin-top: 18px; color: var(--public-muted); font-size: 14px; line-height: 1.8; }
.public-ui .pr-duration { border-radius: 4px; background: var(--public-surface); }
.public-ui .pr-dur-btn { min-height: 44px; border-radius: 3px; font-size: 13px; }
.public-ui .pr-dur-btn.active { background: var(--public-ink); color: #fff; box-shadow: none; }
.public-ui .pr-dur-btn.active .pr-save-tag { color: #fff; background: transparent; }
.public-ui .pr-features { margin-block: 28px; }
.public-ui .pr-features li { padding-block: 10px; font-size: 14px; line-height: 1.8; }
.public-ui .pr-feat-icon { color: var(--public-ink); }
.public-ui .pr-btn { border-radius: 4px; min-height: 52px; font-size: 15px; box-shadow: none; }
.public-ui .pr-btn-pro { background: var(--public-ink); color: #fff; }
.public-ui .pr-btn-pro:hover { background: #333; box-shadow: none; transform: none; }
.public-ui .pr-btn-free { background: #fff; border-color: #ccc; color: var(--public-ink); }
.public-ui .pr-btn-free:hover { background: var(--public-surface); }
.public-ui .pr-faq-q { padding-block: 24px; font-size: 16px; line-height: 1.7; }
.public-ui .pr-faq-a { font-size: 14px; line-height: 1.9; }

@media (min-width: 1100px) {
  .public-ui .regional-dns-cards { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1279px) {
  .public-ui .homepage-nav { display: none; }
}
@media (max-width: 900px) {
  .public-ui > nav > div, .public-ui .public-footer > div { padding-inline: 28px; }
  .public-ui .cli-hero, .public-ui .cli-section { grid-template-columns: 1fr; gap: 40px; }
  .public-ui .cli-hero { padding-bottom: 56px; }
}
@media (max-width: 600px) {
  .public-ui > nav > div { padding-inline: 20px; }
  .public-ui .homepage-brand { font-size: 22px; gap: 8px; }
  .public-ui .homepage-brand-mark { width: 18px; height: 18px; }
  .public-ui > nav #guest-signup-cta { padding-inline: 12px; font-size: 13px; }
  .public-ui .public-footer { padding-block: 36px; }
  .public-ui .public-footer > div { padding-inline: 22px; }
  .public-ui :is(.connection-tool, .cli-shell) { padding: 40px 22px 48px; }
  .public-ui main > article { padding: 40px 22px 64px; font-size: 15px; }
  .public-ui main > article > header { padding-bottom: 28px; }
  .public-ui main > article > section { margin-top: 40px; }
  .public-ui main > article h2 { font-size: 23px; }
  .public-ui main > article pre { padding: 18px; font-size: 12px; }
  .public-ui #tool-guide { padding: 16px 22px 56px; }
  .public-ui .connection-tool-heading { margin-bottom: 32px; }
  .public-ui .connection-tool-heading h1 { font-size: 30px; }
  .public-ui .connection-tool-heading > p:last-child { font-size: 16px; }
  .public-ui .regional-tabs { width: 100%; gap: 20px; margin-bottom: 24px; }
  .public-ui .regional-tabs a { font-size: 13px; min-height: 44px; }
  .public-ui .connection-input-row { flex-direction: column; }
  .public-ui .connection-input-row :is(.input, .btn) { width: 100%; min-height: 52px; height: 52px; font-size: 16px; }
  .public-ui .regional-regions summary { flex-wrap: wrap; }
  .public-ui .regional-node-options { gap: 10px; }
  .public-ui .regional-regions fieldset label { padding: 10px 12px; }
  .public-ui .connection-results { margin-block: 32px; }
  .public-ui .regional-report-heading { padding: 24px 20px 16px; gap: 8px; }
  .public-ui .regional-report-heading h2 { font-size: 22px; }
  .public-ui :is(.regional-report-coverage, .regional-summary, .regional-difference) { margin-inline: 20px; }
  .public-ui .regional-row { grid-template-columns: 1fr; padding: 24px 20px; gap: 12px; }
  .public-ui .regional-row [data-column]::before { color: var(--public-muted); }
  .public-ui .regional-result-group { padding: 14px 20px; }
  .public-ui .regional-domain-registration { padding: 24px; }
  .public-ui .regional-platform-certificate { padding: 20px; }
  .public-ui .regional-monitor { padding-top: 28px; margin-top: 40px; gap: 20px; }
  .public-ui .regional-monitor .btn { width: 100%; }
  .public-ui .tool-next-sidebar { margin: 0; padding: 24px; gap: 20px; }
  .public-ui .tool-next-sidebar h2 { font-size: 24px; }
  .public-ui .regional-empty { flex-direction: column; gap: 16px; }
  .public-ui .probe-visualization { margin: 20px; }
  .public-ui .cli-terminal { padding: 28px; }
  .public-ui .cli-code { padding: 18px; font-size: 12px; }
  .public-ui .public-pricing { padding: 40px 22px 0; }
  .public-ui .pr-card { padding: 28px; }
}
/* Keep the established compact report and mobile fan completion behavior. */
@container (max-width: 700px) {
  .public-ui .regional-website-report .regional-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 20px; }
  .public-ui .regional-website-report .probe-visualization { margin: 0 20px 24px; }
  .public-ui .regional-website-report .probe-visual-diagram { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .public-ui .pr-amount { transition: none; }
}