/* ==========================================================================
   sc-polish-v4.css  (2026-10-05)
   Load LAST on every marketing page, after site.css and sc-premium-v3.css.
   One sitewide layer that:
     1. puts every page on one container, one spacing scale, one radius scale
     2. makes sibling cards equal height and bottom-aligns their buttons
     3. removes the generated-site tells: gradient text, glows, blobs,
        grid-paper backdrops, 3D tilt, marquee, lift-on-hover, pill-everything
   Brand kept: dark surfaces, logo blue ramp (#83C3EC / #2293DD / #1B76B1),
   Geist + Geist Mono.
   ========================================================================== */

:root {
  /* spacing scale: 4 8 12 16 24 32 48 64 96 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* radius scale */
  --r-tag: 4px; --r-ctl: 6px; --r-card: 10px;
  /* one container */
  --sc-max: 1180px; --sc-gutter: 24px;
  /* flat surfaces */
  --sc-bg: #05070b;
  --sc-surface: #0c1016;
  --sc-surface-2: #11161e;
  --sc-line: rgba(255, 255, 255, .08);
  --sc-line-2: rgba(255, 255, 255, .14);
  --sc-ink: #f3f6f9;
  --sc-ink-2: #aab6c3;
  --sc-ink-3: #7d8a99;
  --sc-blue-200: #C1E1F6; --sc-blue-400: #83C3EC; --sc-blue-600: #2293DD; --sc-blue-700: #1B76B1;
  --sc-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sc-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* neutralise the shared gradient tokens so any rule still using them goes flat */
  --grad-headline: none;
  --grad-cta: #1B76B1;
  --violet: #9fcdec;
}
@media (max-width: 480px) { :root { --sc-gutter: 16px; } }

/* --------------------------------------------------------------------------
   1. Type: one family everywhere (some pages ship without the font link)
   -------------------------------------------------------------------------- */
html, body, button, input, select, textarea { font-family: var(--sc-sans) !important; }
code, pre, kbd, samp, .term, .term *, .scp-term, .scp-term *, .lp-term, .lp-term *,
.mono, .eyebrow, .h-badge, .hc-title-bar, .hc-title-bar *, .hcs-l, .sfp-num { font-family: var(--sc-mono) !important; }

body { background: var(--sc-bg) !important; background-image: none !important; }
body::before, body::after { display: none !important; }

h1, h2, h3, .h-title, .h2 { text-wrap: balance; font-feature-settings: "ss01" 0; }
p, li, .lead, .h-sub { text-wrap: pretty; }

.h-title, h1.h-title {
  font-size: clamp(38px, 4.6vw, 62px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
  max-width: 15ch;
}
.h2, h2.h2, .scp-escape-title, .sc-eh-title {
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
}
.h-sub, .lead { color: var(--sc-ink-2); }
.lead { font-size: 17px !important; line-height: 1.6 !important; max-width: 64ch; }

/* --------------------------------------------------------------------------
   2. Gradient text, everywhere, becomes one solid accent
   -------------------------------------------------------------------------- */
.sc-grad-text, .hi, .h-title .hi, .scp-hero .sc-grad-text, .scp-escape-title span,
.sc-eh-title span, .hcs-v.accent, .scp-hero .hcs-v.accent, .e404 h1 span,
[class*="grad-text"], [class*="gradient-text"] {
  background: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--sc-blue-400) !important;
  filter: none !important; text-shadow: none !important;
}
.sc-eh-title span, .scp-escape-title span { color: var(--sc-ink) !important; }

/* Homepage word rotator: no blur, no slide, no ghost of the next word */
.sc-rotate-clean .sc-rotate-word { filter: none !important; transform: none !important; transition: opacity .25s linear !important; }
.sc-rotate-clean .sc-rotate-word:not(.is-active) { opacity: 0 !important; visibility: hidden; }

/* --------------------------------------------------------------------------
   3. Glows, blobs, grid paper, glass, tilt, lift, marquee
   -------------------------------------------------------------------------- */
.hero::before, .hero::after, .page-hero::before, .page-hero::after, .dark-hero::before, .dark-hero::after,
.nr-hero::before, .legal-hero::before, .legal-hero::after, .priv::before, .scp-hero::before, .scp-hero::after,
.sec-dark::before, .cta-sec::before, .midpage-cta::before, .scp-escape::before, .sc-escape-hatch::before,
.scp-trust-shell::before, .e404::before, .plan-enterprise::before, .plan-enterprise::after, .hero-lines,
.hero-glow, .glow, .blob, .orb, [class*="-glow"], [class*="-orb"], [class*="-blob"] { display: none !important; }

.hero, .page-hero, .dark-hero, .scp-hero, .nr-hero, .legal-hero, .sec, .sec-dark, .sec-tint, .cta-sec,
.scp-sec, .scp-sec.tint-blue, .scp-sec.tint-violet, .scp-sec.tint-cyan, .scp-escape, .sc-escape-hatch,
main.sc-trust-page, .scp-trust-shell, .e404 { background-image: none !important; }
.sec-tint, .scp-sec.tint-blue, .scp-sec.tint-violet, .scp-sec.tint-cyan { background-color: #080b10 !important; }

/* glassmorphism: only the sticky nav keeps a backdrop blur */
*:not(#nav-shell):not(.nav-shell) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* 3D tilt on the hero panel */
.h-card-wrap { perspective: none !important; }
.h-card, .h-card:hover { transform: none !important; }

/* lift-on-hover and scale-on-hover, sitewide */
.feat:hover, .plan:hover, .pr-card:hover, .prod-card:hover, .bench-card:hover, .vc:hover, .step:hover,
.showcase-card:hover, .related-link:hover, .pn-card:hover, .structure-card:hover, .tech-box:hover,
.sc-trust-panel:hover, .scp-plan:hover, .scp-card:hover, .btn:hover, .btn-hero-primary:hover,
.btn-hero-ghost:hover, .nav-cta:hover, .plan-btn:hover, a[class*="btn"]:hover { transform: none !important; }

/* scroll reveal: content is simply there */
[data-motion], [data-stagger] > *, .reveal, .sc-reveal { opacity: 1 !important; transform: none !important; }

/* marquee ticker repeats the hero trust row; drop it */
.vstrip { display: none !important; }

/* decorative pulses (status dots keep theirs) */
.h-badge-dot, .hc-dot, .hc-alive { animation: none !important; box-shadow: none !important; }
.scp-hero .h-badge-dot, .e404-dot { box-shadow: none !important; }

/* --------------------------------------------------------------------------
   4. One container. Nav, hero, sections, pricing and footer share an edge.
   -------------------------------------------------------------------------- */
.wrap, .hero-inner, .pr-wrap, .nav-bar, .footer-inner, .page-hero > .wrap, .scp-wrap, .ple-inner {
  max-width: var(--sc-max) !important;
  padding-left: var(--sc-gutter) !important; padding-right: var(--sc-gutter) !important;
  margin-left: auto !important; margin-right: auto !important;
  box-sizing: border-box !important;
}
.hero-inner { gap: var(--s7) !important; align-items: center !important; }
.footer-news { max-width: none !important; }

/* vertical rhythm on one scale */
.sec, section.sec { padding-top: clamp(64px, 8vw, 96px) !important; padding-bottom: clamp(64px, 8vw, 96px) !important; }
.hero { padding-bottom: clamp(56px, 7vw, 88px) !important; }

/* blocks that follow a heading / lead / another block get the same gap */
.wrap > .h2 + .content-block, .wrap > .lead + .content-block, .wrap > .lead + .term, .wrap > .h2 + .term,
.wrap > .content-block + .content-block, .wrap > .term + .content-block, .wrap > .content-block + .term,
.wrap > .term + .term, .wrap > .lead + table, .wrap > .h2 + table, .wrap > .lead + div, .wrap > .h2 + div:not(.lead) {
  margin-top: var(--s6) !important;
}
.wrap > .content-block + .h-actions, .wrap > .content-block + div:has(> .btn),
.wrap > .term + .h-actions, .wrap > .term + div:has(> .btn), .content-block + p:has(> .btn) { margin-top: var(--s5) !important; }

/* --------------------------------------------------------------------------
   5. Section headers: one axis. Left aligned, like docs, everywhere.
   -------------------------------------------------------------------------- */
.sec-head, .showcase-head, .spi-head, .scp-sec-head, .scp-sec .sec-head, .faq-head, .related-head, .pr-foot,
.sc-plan-includes .spi-head, .scp-center, .scp-feat-tail, .scp-guarantee, .scp-escape-card, .sc-eh-card,
.cta-sec, .cta-inner, .midpage-cta, .showcase-cta, #faq .h2,
.sec div[style*="text-align:center"], .sec div[style*="text-align: center"],
.sec p[style*="text-align:center"], .sec p[style*="text-align: center"],
section div[style*="text-align:center"]:has(> h2, > .h2, > .eyebrow, > .lead),
section :is(div, header):has(> h2.h2, > .h2) {
  text-align: left !important;
}
.sec-head, .showcase-head, .spi-head, .scp-sec-head, .faq-head, .related-head,
.sec div[style*="margin:0 auto"], .sec div[style*="margin: 0 auto"], .cta-inner,
section div[style*="text-align:center"]:has(> h2, > .h2, > .eyebrow, > .lead) {
  margin-left: 0 !important; margin-right: auto !important;
}
.sec-head, .showcase-head, .spi-head, .scp-sec-head { max-width: 760px !important; }
.wrap > .eyebrow, .wrap > .h2, .wrap > .lead, .wrap > .sub, .wrap > p.lead,
:is(.sec-head, .showcase-head, .faq-head, .cta-inner, .sc-eh-card, .midpage-cta) > :is(.lead, p, .h2, h2),
section div[style*="text-align:center"] > :is(.lead, p, .h2, h2) { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
.wrap > .lead { max-width: 64ch !important; }
/* button rows and toggles follow the same left edge */
.sec div[style*="justify-content:center"]:not(.btn):not([class*="btn"]), .sec div[style*="justify-content: center"]:not(.btn):not([class*="btn"]),
.h-actions, .showcase-cta, .cta-actions, .sc-eh-actions, .scb-toggle, .billing-toggle-wrap, .sc-eh-grid, .scp-escape-list { justify-content: flex-start !important; }
.billing-toggle, .bt-wrap { margin-left: 0 !important; margin-right: auto !important; }
.faq-list, .faq-wrap, .scp-faq, .faq, #faq .faq-items { margin-left: 0 !important; margin-right: auto !important; }

/* eyebrow: plain mono label, no pill, no leading rule */
.eyebrow, .eyebrow-light, .scp-eyebrow, .sc-allplans-eyebrow, .h-eyebrow, .spi-eyebrow, .ple-eyebrow, .sc-eh-kicker {
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  font-size: 11px !important; letter-spacing: .08em !important; color: var(--sc-blue-400) !important; box-shadow: none !important;
}
.eyebrow::before, .eyebrow-light::before, .scp-eyebrow::before { display: none !important; }

/* --------------------------------------------------------------------------
   6. Cards: one surface, one border, one radius, no shadow
   -------------------------------------------------------------------------- */
.feat, .plan, .pr-card, .prod-card, .bench-card, .vc, .step, .showcase-card, .pn-card, .structure-card,
.tech-box, .sc-trust-panel, .scp-plan, .scp-card, .sc-eh-card, .ple-cta, .canary-status-card, .key-card,
.scp-trust-card, .scp-pgp-key-card, .rotation-rule, .uses-list li, .verify-steps > li, .os-panel, .sct-panel,
.nr-featured, .h-card, .hc-snap, .hc-stat, .term, .scp-term, .lp-term, .plan-enterprise, .sc-plan-includes,
.compare-wrap, .faq-item, .scp-faq-item, .legal-footer-card, .canary-panel, .canary-if-dead, .sc-escape-hatch .sc-eh-card,
.related-link, .midpage-cta {
  border-radius: var(--r-card) !important;
  box-shadow: none !important;
}
.feat, .plan, .pr-card, .prod-card, .bench-card, .vc, .step, .pn-card, .structure-card, .tech-box,
.sc-trust-panel, .scp-plan, .scp-card, .sc-eh-card, .plan-enterprise, .sc-plan-includes, .scp-trust-card,
.canary-status-card, .key-card, .rotation-rule, .uses-list li, .verify-steps > li, .faq-item, .scp-faq-item {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-line) !important;
}
.feat:hover, .plan:hover, .pr-card:hover, .prod-card:hover, .bench-card:hover, .related-link:hover { border-color: var(--sc-line-2) !important; }
.hc-snap, .hc-stat { border-radius: var(--r-ctl) !important; }

/* featured plan: an accent border, not a glow, not a scale */
.pr-card.pop, .plan.plan-pop, .plan.pop, .plan.featured, .scp-plan.hot, .plan:has(> .plan-pop) {
  border-color: rgba(131, 195, 236, .45) !important; background: var(--sc-surface-2) !important;
  transform: none !important; box-shadow: none !important;
}

/* icon tiles inside cards: small, square, quiet */
.feat-icon, .prod-ico { border-radius: var(--r-ctl) !important; box-shadow: none !important; background: rgba(131, 195, 236, .08) !important; border: 1px solid rgba(131, 195, 236, .14) !important; }

/* content-block: prose sits on the page, not in another box (stops box-in-box and puts
   paragraph text on the same left edge as the heading above it) */
.content-block {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
}
.content-block > :first-child { margin-top: 0 !important; }
.content-block > :last-child { margin-bottom: 0 !important; }
.content-block p, .content-block li { color: var(--sc-ink-2); }
.content-block h2, .content-block h3 { margin-top: var(--s6) !important; }
.content-block h2:first-child, .content-block h3:first-child { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   7. Equal heights in every grid, buttons on one baseline
   -------------------------------------------------------------------------- */
.g2, .g3, .g4, .prod-grid, .plan-grid, .plan-grid-5, .pr-grid, .bench-grid, .related-grid, .pn-grid,
.structure-grid, .sct-grid, .rd-grid, .nr-grid, .spi-grid, .sc-eh-grid, .showcase-pair, .hc-grid, .scp-plans,
.scp-grid, .use-grid, .split { align-items: stretch !important; }
.g2, .g3, .g4, .prod-grid, .bench-grid, .pn-grid, .structure-grid, .sct-grid, .rd-grid, .nr-grid { gap: var(--s4) !important; }
.pr-grid, .plan-grid, .plan-grid-5 { gap: var(--s4) !important; }

.feat, .plan, .pr-card, .prod-card, .bench-card, .vc, .pn-card, .structure-card, .tech-box, .scp-plan,
.scp-card, .showcase-card, .sc-trust-panel, .prod-grid > a, .prod-grid > div {
  display: flex !important; flex-direction: column !important; height: 100%; box-sizing: border-box;
}
.feat > *, .plan > *, .pr-card > *, .prod-card > *, .prod-grid > * > *, .bench-card > *, .scp-plan > * { flex-shrink: 0; }

/* the action row of a card is pushed to the bottom */
.pr-cta, .plan-btn, .prod-cta, .plan > .btn:last-child, .plan > a:last-child, .feat > a:last-child,
.feat > .btn:last-child, .feat > p:last-child:has(> a), .bench-card > a:last-child, .scp-plan > a:last-child,
.scp-plan .scp-plan-cta, .pn-card > a:last-child, .tech-box > a:last-child {
  margin-top: auto !important;
}
.plan-feats, .pr-feat { margin-bottom: var(--s5) !important; }
.pr-cta { padding-top: 0 !important; }

/* pricing cards: every card reserves the line the billing note uses, so lists start level */
.pr-card > .pr-price:not(:has(+ .scb-note)) { margin-bottom: 35px !important; }
.scb-note { min-height: 17px; }

/* showcase screenshots: one aspect ratio so captions line up */
.showcase-card img, .showcase-card picture { width: 100% !important; aspect-ratio: 16 / 10; height: auto !important; object-fit: cover; object-position: top left; display: block; }
.showcase-card { overflow: hidden; }

/* hero panel: stat tiles sit on one line */
.hc-grid { align-items: stretch !important; }
.hc-stat { margin: 0 !important; }

/* stacked step cards get a gap instead of touching */
.step + .step { margin-top: var(--s3) !important; }

/* --------------------------------------------------------------------------
   8. Buttons: one height, one radius, no glow, no gradient, no rocket
   -------------------------------------------------------------------------- */
#site-header .nav-cta, #site-header a[href*="/register"], #nav-shell .nav-cta, .nav-shell .nav-cta, .nav-bar .nav-cta, .btn, .btn-hero-primary, .btn-hero-ghost, .plan-btn, .prod-cta.btn, .nav-cta, .nav-signin, .sc-eh-btn,
.btn-news-submit, a.btn-blue, a.btn-ghost, .pr-cta .btn, .ple-cta .btn, .scp-btn, .scp-btn-primary, .scp-btn-ghost {
  border-radius: var(--r-ctl) !important;
  box-shadow: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
}
#site-header .nav-cta, #site-header a[href*="/register"], #nav-shell .nav-cta, .nav-shell .nav-cta, .nav-bar .nav-cta, .btn-hero-primary, .btn-blue, .btn.btn-blue, .nav-cta, .plan-btn.primary, .plan-btn.btn-blue, .sc-eh-btn,
.btn-news-submit, .scp-btn-primary, .btn-primary {
  background-color: var(--sc-blue-700) !important; border: 1px solid var(--sc-blue-700) !important; color: #fff !important;
}
#site-header .nav-cta:hover, #site-header a[href*="/register"]:hover, #nav-shell .nav-cta:hover, .nav-bar .nav-cta:hover, .btn-hero-primary:hover, .btn-blue:hover, .btn.btn-blue:hover, .nav-cta:hover, .sc-eh-btn:hover,
.btn-news-submit:hover, .scp-btn-primary:hover, .btn-primary:hover { background-color: var(--sc-blue-600) !important; border-color: var(--sc-blue-600) !important; }
.btn-hero-ghost, .btn-ghost, .btn-ghost-w, .scp-btn-ghost {
  background-color: transparent !important; border: 1px solid var(--sc-line-2) !important; color: var(--sc-ink) !important;
}
.btn-hero-ghost:hover, .btn-ghost:hover, .btn-ghost-w:hover, .scp-btn-ghost:hover { border-color: rgba(255, 255, 255, .28) !important; background-color: rgba(255, 255, 255, .03) !important; }
.btn-hero-primary, .btn-hero-ghost, .btn-xl, .btn-lg { min-height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center; font-size: 15px !important; font-weight: 600 !important; }
#site-header .nav-cta, #site-header a[href*="/register"], #nav-shell .nav-cta, .nav-shell .nav-cta, #site-header .nav-cta, .nav-bar .nav-cta, .nav-cta { font-weight: 600 !important; font-size: 14px !important; height: 36px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; }
.btn .fa-rocket, .btn-hero-primary .fa-rocket, .btn .fa-wand-magic-sparkles, .btn .fa-bolt { display: none !important; }

/* billing toggles: a segmented control, not a glowing pill */
.scb-toggle .scb-in, .billing-toggle, .bt-wrap { border-radius: var(--r-card) !important; }
.scb-toggle button, .billing-toggle button, .bt-opt { border-radius: var(--r-ctl) !important; box-shadow: none !important; }
.scb-toggle button.is-on { box-shadow: none !important; }
.scb-toggle .scb-save, .bt-save { border-radius: var(--r-tag) !important; }

/* --------------------------------------------------------------------------
   9. Pills become tags
   -------------------------------------------------------------------------- */
.h-badge, .hc-badge, .pr-chip, .ft-badge, .use-case-tag, .sc-footer-tag, .priv-tag, .plan-pop, .pop-badge,
.pr-card.pop::before, .badge, .tag, .chip, .linkpill, [class*="-badge"]:not(.h-badge-dot), [class*="-pill"] {
  border-radius: var(--r-tag) !important; box-shadow: none !important;
}
.h-badge { background: none !important; border: 0 !important; padding: 0 !important; color: var(--sc-ink-2) !important; white-space: normal; }
.plan-pop, .pr-card.pop::before, .pop-badge { letter-spacing: .06em !important; font-size: 10.5px !important; background: var(--sc-blue-400) !important; color: #05070b !important; }

/* --------------------------------------------------------------------------
   10. Terminals and code panels
   -------------------------------------------------------------------------- */
.term, .scp-term, .lp-term { background: #0a0d12 !important; border: 1px solid var(--sc-line) !important; overflow: hidden; display: flex; flex-direction: column; }
.term-body, .scp-term-body { flex: 1 1 auto; font-size: 13px !important; line-height: 1.7 !important; }
.term-bar, .scp-term-bar { background: #0e1218 !important; border-bottom: 1px solid var(--sc-line) !important; }
/* traffic lights read as a mock, keep three neutral dots */
.term-dots .td, .term-dots span, .hc-dots .hc-dot, .hc-dot.r, .hc-dot.y, .hc-dot.g, .td.r, .td.y, .td.g { background: #2a313b !important; box-shadow: none !important; }
/* violet output text from the old palette */
.term-body .td4, .scp-term .td4, .term-body .c-violet, .term-body .tv { color: var(--sc-blue-200) !important; }
.term + .term, .scp-term + .scp-term { margin-top: var(--s4); }
/* side-by-side terminals in any grid: equal heights */
:is(.g2, .g3, .split, .grid-2, .two-col) > :is(.term, .scp-term, .lp-term) { height: 100%; }

/* --------------------------------------------------------------------------
   11. Tables: one look, never wider than the phone
   -------------------------------------------------------------------------- */
.content-block table, table.cmp-tbl, .ctable, .compare-wrap table { border-radius: var(--r-card) !important; }
.compare-wrap { background: var(--sc-surface) !important; border: 1px solid var(--sc-line) !important; background-image: none !important; }
th { font-weight: 600 !important; }
@media (max-width: 720px) {
  .content-block, .compare-wrap, .ctable-wrap, .table-wrap, .cmp-wrap { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .content-block table, .compare-wrap table, table.cmp-tbl, .ctable { min-width: 0; }
  td, th { overflow-wrap: anywhere; }
}

/* box-in-box: the outer container goes flat, the inner cards stay */
.sc-plan-includes, .ple-cta, .compare-wrap .scp-cta, .compare-wrap > div:has(> .btn) { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.ple-cta .plan-btn.pbtn-w { background: var(--sc-blue-700) !important; color: #fff !important; border: 1px solid var(--sc-blue-700) !important; }

/* --------------------------------------------------------------------------
   12. Enterprise and escape-hatch bands: flat
   -------------------------------------------------------------------------- */
.plan-enterprise { background: var(--sc-surface) !important; border: 1px solid var(--sc-line) !important; }
.sc-escape-hatch, .scp-escape { background: none !important; }
.sc-escape-hatch .sc-eh-card, .sc-eh-card { background: var(--sc-surface) !important; }
.sc-eh-item, .scp-escape-item { border-radius: var(--r-ctl) !important; }

/* --------------------------------------------------------------------------
   13. Phone
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-inner { gap: var(--s6) !important; }
  .h-title { max-width: none; }
}
@media (max-width: 480px) {
  .h-title, h1.h-title { font-size: clamp(34px, 9.4vw, 40px) !important; }
  .h2, h2.h2 { font-size: clamp(26px, 7.4vw, 32px) !important; }
  .sec, section.sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .feat, .plan, .pr-card, .prod-card, .bench-card { padding: 20px !important; }
  .h-actions { flex-wrap: wrap; }
  .h-actions > a { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   14. Hero product panel (scp-hero template): a plain window, title left,
       status tag right, progress bar visible
   -------------------------------------------------------------------------- */
.h-card > .hc-title-bar {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--s3);
  text-align: left !important; padding: 12px 20px !important; margin: 0 !important;
  border-bottom: 1px solid var(--sc-line) !important; background: #0e1218 !important;
  font-size: 12px !important; color: var(--sc-ink-3) !important; flex: none !important;
}
.h-card > .hc-title-bar .hc-badge { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; }
.h-card > .hc-title-bar .hc-badge .hc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor !important; }
.h-card { background: var(--sc-surface) !important; border: 1px solid var(--sc-line) !important; overflow: hidden; }
.hc-prog-fill { background: var(--sc-blue-600) !important; animation: none !important; }
.hc-snap { background: rgba(255,255,255,.02) !important; border: 1px solid var(--sc-line) !important; }
.hc-foot { border-top: 1px solid var(--sc-line) !important; color: var(--sc-ink-3) !important; }

/* --------------------------------------------------------------------------
   15. Nested containers never add a second gutter
       (.pr-wrap inside .wrap pushed pricing cards and toggles 24px in)
   -------------------------------------------------------------------------- */
.wrap .wrap, .wrap .pr-wrap, .wrap .scp-wrap, .scp-wrap .pr-wrap, .pr-wrap .pr-wrap {
  padding-left: 0 !important; padding-right: 0 !important; max-width: none !important;
}

/* pricing cards: the "works out to" note may wrap to two lines in a 4-up row;
   every card reserves two lines so the feature lists start level */
@media (min-width: 1100px) {
  .pr-n4 > .pr-card .scb-note { min-height: 34px !important; }
  .pr-n4 > .pr-card > .pr-price:not(:has(+ .scb-note)) { margin-bottom: 52px !important; }
}
/* the pricing grid spans the container like everything else (it was capped and centered) */
.wrap .pr-grid, .pr-wrap .pr-grid { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* --------------------------------------------------------------------------
   16. Prose sections on the product-page template: heading in a left column,
       text in a right column, so a 760px block no longer hugs the left edge
       of a 1180px page with half the screen empty beside it.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .sec > .wrap:has(> .content-block.cb-flush):not(:has(.cb-wide, .pr-wrap, .pr-grid, .g2, .g3, .g4, table, .prod-grid, .plan-grid)) {
    display: flow-root !important;
  }
  .sec > .wrap:has(> .content-block.cb-flush):not(:has(.cb-wide, .pr-wrap, .pr-grid, .g2, .g3, .g4, table, .prod-grid, .plan-grid)) > :is(.eyebrow, .h2, h2) {
    float: left; clear: left; width: 34%; max-width: none !important; margin-right: 0 !important;
    padding-right: var(--s7); box-sizing: border-box;
  }
  .sec > .wrap:has(> .content-block.cb-flush):not(:has(.cb-wide, .pr-wrap, .pr-grid, .g2, .g3, .g4, table, .prod-grid, .plan-grid)) > :is(.h2, h2) {
    font-size: clamp(28px, 2.5vw, 36px) !important;
  }
  .sec > .wrap:has(> .content-block.cb-flush):not(:has(.cb-wide, .pr-wrap, .pr-grid, .g2, .g3, .g4, table, .prod-grid, .plan-grid)) > .eyebrow { margin-bottom: var(--s3) !important; }
  .sec > .wrap:has(> .content-block.cb-flush):not(:has(.cb-wide, .pr-wrap, .pr-grid, .g2, .g3, .g4, table, .prod-grid, .plan-grid)) > .h2 { margin-top: 0 !important; }
  .sec > .wrap:has(> .content-block.cb-flush):not(:has(.cb-wide, .pr-wrap, .pr-grid, .g2, .g3, .g4, table, .prod-grid, .plan-grid)) > :not(.eyebrow):not(.h2):not(h2) {
    margin-left: 34% !important; max-width: none !important; width: auto !important;
  }
  .sec > .wrap:has(> .content-block.cb-flush):not(:has(.cb-wide, .pr-wrap, .pr-grid, .g2, .g3, .g4, table, .prod-grid, .plan-grid)) > .content-block:first-of-type { margin-top: 0 !important; }
}
.content-block.cb-flush { max-width: 72ch !important; }
.content-block.cb-wide { max-width: none !important; }

/* comparison tables inside prose: readable on a phone by scrolling, not squeezing */
@media (max-width: 720px) {
}

/* --------------------------------------------------------------------------
   17. Phone edges: hero, sections and footer start on the same 16px line
       (hero and footer each added a second side padding, giving 34px and 40px)
   -------------------------------------------------------------------------- */
.hero:has(> .hero-inner), .scp-hero:has(> .hero-inner), #site-footer > :has(> .footer-inner) {
  padding-left: 0 !important; padding-right: 0 !important;
}
@media (max-width: 720px) {
  .content-block.cb-wide table, .compare-wrap table { min-width: 640px; }
  .content-block.cb-wide table:not(:has(tr > :nth-child(3))) { min-width: 0; display: table; width: 100%; } /* sc-spec-table-mobile-v1 */
}

/* --------------------------------------------------------------------------
   18. Centered section heads written inline (style="text-align:center;margin:0 auto")
       sit on the container edge. Needs the extra weight: sc-premium-v3 centers
       them with `.sec .wrap > div[style*="text-align:center"]` !important.
   -------------------------------------------------------------------------- */
html body .sec .wrap > div[style*="text-align:center"]:not(:has(> .btn, > a.btn, > .btn-blue)),
html body .sec .wrap > div[style*="text-align: center"]:not(:has(> .btn, > a.btn, > .btn-blue)),
html body .showcase .showcase-head, html body .sec .faq-head {
  margin-left: 0 !important; margin-right: auto !important; text-align: left !important;
}
html body .sec .wrap > div[style*="text-align:center"] > :is(h2, .h2, p, .lead, .eyebrow) { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }
/* a button row that was centered under a grid follows the same edge */
html body .sec .wrap > div[style*="text-align:center"]:has(> .btn, > a.btn, > .btn-blue),
html body .sec .wrap > p[style*="text-align:center"] { text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important; }
/* sections that narrowed their container inline (FAQ: max-width:780px) keep the page edge;
   the reading measure moves to the content instead */
html body .sec > .wrap[style*="max-width"] { max-width: var(--sc-max) !important; }
html body #faq .faq-item, html body #faq .faq-list, html body .sec .faq-item { max-width: 860px; margin-left: 0 !important; margin-right: auto !important; }
html body #faq > .wrap, html body #faq .wrap { max-width: var(--sc-max) !important; }

/* --------------------------------------------------------------------------
   19. Blocks that were capped and centered inside the container
       (pricing footnotes, next-step cards, escape-hatch band)
   -------------------------------------------------------------------------- */
html body .pr-foot { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }
html body .wrap .pn-grid, html body .wrap .related-grid, html body .wrap .rd-grid { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
html body .sc-escape-hatch { padding-left: var(--sc-gutter) !important; padding-right: var(--sc-gutter) !important; }
html body .sc-escape-hatch .sc-eh-card { max-width: calc(var(--sc-max) - 2 * var(--sc-gutter)) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
html body .sc-eh-card .sc-eh-grid, html body .sc-eh-card > * { margin-left: 0 !important; }

/* showcase screenshots: captions start right under equal-height images, so titles line up */
html body .showcase-card > figcaption { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   20. Shared bands on the article template: same container as the page
   -------------------------------------------------------------------------- */
html body .sc-allplans-inner { max-width: var(--sc-max) !important; padding-left: var(--sc-gutter) !important; padding-right: var(--sc-gutter) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
html body .midpage-cta { margin-left: 0 !important; margin-right: auto !important; }
/* use-case cards: the attribution line sits on the bottom edge of every card in the row */
html body .testi { display: flex !important; flex-direction: column !important; }
html body .testi > .testi-author { margin-top: auto !important; padding-top: var(--s4); }
html body .h-badge-dot { animation: none !important; }

/* ---------- sc-qa-v1 (2026-10-07): layout QA pass, desktop + mobile ---------- */

/* pricing: a note under one card's button no longer lifts that button above its neighbors */
.pr-cta{display:flex;flex-direction:column}
.pr-cta > a + div{order:-1;margin:0 0 10px !important}

/* code blocks with a Copy button: the button gets its own row instead of covering the first line */
.code:has(> .copy-btn){padding-top:44px}

@media (max-width: 760px){
  /* tap targets: at least 32px tall on phones */
  .breadcrumb a{display:inline-block;padding:7px 0}
  .pre-copy,.copy-btn{min-height:32px;padding:6px 12px}
  .os-tab{min-height:36px}
  .sc-allplans-cta{display:inline-flex;align-items:center;min-height:36px}
}

/* setup guide: the full-bleed panel stayed 7px wider than the screen on tablets */
@media (max-width: 900px){
  .setup-wrap > div[style*="calc(-1 * var(--px))"]{margin-left:0 !important;margin-right:0 !important}
}

/* hero card title bar: long hostnames shrink with an ellipsis so the "Example" badge stays visible on phones */
.hc-bar .hc-title-bar{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-bar .hc-badge{flex:none}
@media (max-width: 560px){ .hc-bar .hc-title-bar{padding-right:8px;text-align:left} }

/* ---------- sc-visual-pass-v1 (2026-10-17): pricing cards, billing toggle, hero spec row,
   tools index, related-links bands, header see-through fix ---------- */

/* header: a view-transition-name makes #site-header a backdrop root, so the blur on the
   translucent #nav-shell inside it sampled nothing and hero text showed through sharp.
   The name moves onto the element that owns the backdrop-filter. */
html #site-header { view-transition-name: none !important; }
html #nav-shell { view-transition-name: sc-header; }
html #nav-shell.scrolled { background: rgba(5, 7, 11, .9) !important; }

/* billing toggle: a dark segmented control (it was a white light-theme pill next to bare text) */
html body .billing-toggle {
  display: inline-flex !important; width: auto !important; max-width: none !important; gap: 2px !important;
  padding: 3px !important; margin: 0 0 var(--s5) !important;
  background: var(--sc-surface) !important; border: 1px solid var(--sc-line-2) !important; border-radius: 8px !important;
}
html body .billing-toggle .bt-opt {
  flex: none !important; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px !important;
  background: transparent !important; color: var(--sc-ink-2) !important; font-size: 14px !important; font-weight: 600 !important;
  border: 0 !important; border-radius: 6px !important; box-shadow: none !important; cursor: pointer;
}
html body .billing-toggle .bt-opt:hover { color: var(--sc-ink) !important; }
html body .billing-toggle .bt-opt.is-active { background: #1c242f !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--sc-line-2) !important; }
html body .billing-toggle .bt-opt:focus-visible { outline: 2px solid var(--sc-blue-600); outline-offset: 1px; }
html body .billing-toggle .bt-save {
  margin: 0 !important; padding: 2px 6px !important; font-family: var(--sc-mono) !important; font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .02em !important; line-height: 1.4; color: var(--sc-blue-400) !important; background: rgba(131, 195, 236, .1) !important; border-radius: 4px !important;
}

/* pricing cards: no reserved blank line under the price, a divided spec list, level rows */
html body .pr-grid > .pr-card { padding: 22px 20px 20px !important; }
html body .pr-grid > .pr-card > .pr-price:not(:has(+ .scb-note)) { margin-bottom: 0 !important; }
html body .pr-card .pr-name { font-family: var(--sc-mono) !important; font-size: 12px !important; letter-spacing: .06em !important; color: var(--sc-ink-2) !important; line-height: 18px; min-height: 18px; }
html body .pr-card .pr-price { font-size: 36px !important; letter-spacing: -.03em !important; margin-top: 10px !important; line-height: 1 !important; }
html body .pr-card .pr-price .pp-monthly > span, html body .pr-card .pr-price .pp-annual > span, html body .pr-card .pr-price > span:not(.pp-monthly):not(.pp-annual) {
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0; color: var(--sc-ink-3) !important; margin-left: 2px;
}
.pr-per { margin-top: 8px; min-height: 18px; font-size: 13px; line-height: 18px; color: var(--sc-ink-3); font-variant-numeric: tabular-nums; }
.pr-per b { color: var(--sc-ink-2); font-weight: 600; }
html body .pr-grid > .pr-card .pr-feat {
  margin: 18px 0 var(--s5) !important; padding: 4px 0 0 !important; border-top: 1px solid var(--sc-line) !important;
  gap: 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: var(--sc-ink) !important;
}
html body .pr-grid > .pr-card .pr-feat li { gap: 10px !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .045); text-wrap: balance; }
html body .pr-grid > .pr-card .pr-feat li:last-child { border-bottom: 0; }
html body .pr-grid > .pr-card .pr-feat li i { width: 14px !important; margin-top: 3px !important; font-size: 12px !important; color: var(--sc-blue-400) !important; text-align: center; }
html body .pr-grid > .pr-card .pr-feat li strong { font-weight: 600; color: var(--sc-blue-200); }
html body .pr-grid > .pr-card .pr-cta .btn { height: 42px; display: inline-flex !important; align-items: center; justify-content: center; font-weight: 600 !important; }

/* featured plan: an accent rule on top and a quiet tag in the name row, not a floating pill */
html body .pr-grid > .pr-card.pop { box-shadow: inset 0 2px 0 var(--sc-blue-400) !important; border-color: rgba(131, 195, 236, .4) !important; }
html body .pr-grid > .pr-card > .pr-chip {
  position: absolute !important; top: 21px !important; right: 20px !important; left: auto !important; transform: none !important;
  padding: 0 7px !important; height: 20px; line-height: 18px !important; font-family: var(--sc-mono) !important; font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .06em !important; text-transform: uppercase; color: var(--sc-blue-400) !important;
  background: rgba(131, 195, 236, .1) !important; border: 1px solid rgba(131, 195, 236, .35) !important; border-radius: 4px !important; box-shadow: none !important;
}

/* the shared-facts table under a pricing grid gets its own gap (it touched the footnote) */
html body .pr-foot { font-size: 13px !important; line-height: 1.55 !important; color: var(--sc-ink-3) !important; max-width: 80ch; margin-top: var(--s4) !important; }
html body .billing-toggle ~ .pr-grid { margin-top: 0 !important; }
html body .wrap .pr-foot ~ .content-block { margin-top: var(--s6) !important; }

/* hero spec row: four labelled facts on one ruled line (2 x 2 on phones), replacing loose text */
.h-spec { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); }
.h-spec > div { padding: 12px 18px; min-width: 0; }
.h-spec dd { white-space: nowrap; }
.h-spec > div + div { border-left: 1px solid var(--sc-line); }
.h-spec > div:first-child { padding-left: 0; }
.h-spec dt { margin: 0 0 3px; font-family: var(--sc-mono) !important; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); }
.h-spec dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--sc-ink); }
@media (max-width: 560px), (min-width: 901px) and (max-width: 1099px) {
  .h-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .h-spec dd { white-space: normal; }
  .h-spec > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .h-spec > div:nth-child(n+3) { border-top: 1px solid var(--sc-line); }
}

/* related-links bands at the foot of product pages: inline padding:20px lost to the 96px section
   padding, leaving two ~200px voids under the FAQ */
html body section.sec[style*="padding:20px 0"] { padding-top: 0 !important; padding-bottom: 0 !important; }
html body section.sec[style*="padding:20px 0 40px"] { padding-bottom: var(--s8) !important; }
html body section.sec[style*="padding:20px 0"] .wrap > p { margin: 0 !important; padding: 14px 0 0 !important; font-size: 14px !important; color: var(--sc-ink-3) !important; text-align: left !important; }
html body section.sec[style*="padding:20px 0"]:not([style*="40px"]) .wrap > p { border-top: 1px solid var(--sc-line); padding-top: 20px !important; }
html body section.sec[style*="padding:20px 0"] .wrap > p a { color: var(--sc-blue-400) !important; }

/* tools index */
html body .page-hero.sc-tools-hero { padding: 120px 0 0 !important; border-bottom: 0 !important; min-height: 0 !important; }
.sc-tools-hero .sc-crumb { margin: 0 0 var(--s4); font-family: var(--sc-mono) !important; font-size: 12px; color: var(--sc-ink-3); }
.sc-tools-hero .sc-crumb a { color: var(--sc-ink-3); text-decoration: none; }
.sc-tools-hero .sc-crumb a:hover { color: var(--sc-blue-400); }
html body .sc-tools-hero h1 { margin: 0 !important; max-width: none !important; font-size: clamp(32px, 3.6vw, 46px) !important; line-height: 1.08 !important; letter-spacing: -.03em !important; font-weight: 700 !important; }
.sc-tools-hero .h-sub { margin: var(--s4) 0 0 !important; max-width: 62ch; font-size: 16px !important; line-height: 1.6 !important; }
html body .sc-tools-hero h1 .accent { display: block; }
html body section.sec.sc-tools-sec { border-top: 0 !important; padding-top: var(--s6) !important; padding-bottom: var(--s8) !important; }
.sc-tool-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.sc-tool-index > li { margin: 0; padding: 0; display: flex; }
.sc-tool {
  display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: 20px 22px; gap: 8px;
  background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--r-card); color: var(--sc-ink); text-decoration: none !important;
  transition: border-color .15s linear, background-color .15s linear;
}
.sc-tool:hover, .sc-tool:focus-visible { border-color: rgba(34, 147, 221, .6); background: var(--sc-surface-2); }
.sc-tool:focus-visible { outline: 2px solid var(--sc-blue-600); outline-offset: 2px; }
.sc-tool-k { font-family: var(--sc-mono) !important; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-blue-400); }
.sc-tool-t { font-size: 19px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; color: var(--sc-ink); }
.sc-tool-d { font-size: 14.5px; line-height: 1.55; color: var(--sc-ink-2); }
.sc-tool-d code { font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .05); color: var(--sc-blue-200); white-space: nowrap; }
.sc-tool-m { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--sc-line); font-family: var(--sc-mono) !important; font-size: 11.5px; line-height: 1.6; color: var(--sc-ink-3); }
.sc-tool-go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--sc-blue-400); }
.sc-tool-go i { font-size: 12px; margin-left: 6px; transition: transform .15s linear; }
.sc-tool:hover .sc-tool-go { color: #fff; }
.sc-tool:hover .sc-tool-go i { transform: translateX(2px); }
.sc-tools-note { margin: var(--s5) 0 0; font-size: 13px; color: var(--sc-ink-3); }
@media (max-width: 760px) {
  .sc-tool-index { grid-template-columns: 1fr; }
  html body .page-hero.sc-tools-hero { padding-top: 100px !important; }
  .sc-tool-d code { white-space: normal; }
}
/* sc-insurance-ready-v1 (SC-N180) */

/* ---------- sc-ir-landing-v1 (2026-10-17): /insurance-ready-backups/ only (body.sc-ir) ---------- */

/* fine print under the hero spec row and the plans table */
body.sc-ir .ir-fine { margin: var(--s4) 0 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }

/* hero report mock: the real report's rows, status column in mono */
body.sc-ir .ir-rep { margin: 0; }
body.sc-ir .ir-rep .hc-title-bar { min-width: 0; }
body.sc-ir .ir-rep-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sc-ir .ir-rep-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--sc-line); }
body.sc-ir .ir-rep-k { font-family: var(--sc-mono); font-size: 11px; letter-spacing: .04em; color: var(--sc-ink-3); }
body.sc-ir .ir-rep-t { margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--sc-ink); }
body.sc-ir .ir-rep-m { margin-top: 2px; font-family: var(--sc-mono); font-size: 11.5px; color: var(--sc-ink-3); }
body.sc-ir .ir-rep-rows { list-style: none; margin: 0; padding: 4px 20px 6px; }
body.sc-ir .ir-rep-rows li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
body.sc-ir .ir-rep-rows li:first-child { border-top: 0; }
body.sc-ir .ir-rep-rows b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--sc-ink); }
body.sc-ir .ir-rep-rows span:not(.ir-st) { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--sc-ink-2); }
body.sc-ir .ir-st { padding-top: 2px; font-family: var(--sc-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; }
body.sc-ir .ir-pass { color: #34d399; }
body.sc-ir .ir-act { color: #fbbf24; }

/* question map: the question is the row header, so it gets the width */
body.sc-ir .ir-map th[scope="row"] { width: 36%; }
body.sc-ir .ir-map thead th { font-family: var(--sc-mono) !important; font-size: 11px; font-weight: 500 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); }
body.sc-ir .ir-k { display: block; margin-bottom: 4px; font-family: var(--sc-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-blue-400); }

/* verify: steps beside the copy, then the terminal at full width so each statement stays on one line */
body.sc-ir #how .split { margin: 0; }
body.sc-ir #how .split + .term { margin-top: var(--s6); max-width: none !important; width: 100%; }
body.sc-ir #how .lead + .content-block { margin-top: var(--s5); }
body.sc-ir .ir-spec th[scope="row"] { width: 112px; white-space: nowrap; }
body.sc-ir .ir-spec td { overflow-wrap: anywhere; }
body.sc-ir #how .term-body > div { white-space: pre-wrap; overflow-wrap: anywhere; }
body.sc-ir .ir-rep-m span, body.sc-ir #faq code { white-space: nowrap; }
body.sc-ir .ir-cap { margin: var(--s3) 0 0; font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }

/* plans table */
body.sc-ir .ir-plans td, body.sc-ir .ir-plans th { white-space: nowrap; }
body.sc-ir .ir-note { margin-left: 6px; padding: 1px 6px; font-family: var(--sc-mono); font-size: 10.5px; font-weight: 500; color: var(--sc-blue-400); background: rgba(131, 195, 236, .1); border-radius: var(--r-tag); }
body.sc-ir #plans .content-block + .h-actions { margin-top: var(--s5); }

@media (max-width: 720px) {
  /* question map: one block per row instead of a 640px table that scrolls sideways */
  body.sc-ir .content-block.cb-wide .ir-map { min-width: 0; display: block; }
  body.sc-ir .ir-map thead { display: none; }
  body.sc-ir .ir-map tbody, body.sc-ir .ir-map tr, body.sc-ir .ir-map th, body.sc-ir .ir-map td { display: block; width: auto !important; }
  body.sc-ir .ir-map tr + tr { border-top: 1px solid var(--sc-line); }
  body.sc-ir .ir-map th[scope="row"] { border-bottom: 0 !important; padding-bottom: 4px !important; }
  body.sc-ir .ir-map td { padding-top: 4px !important; }
  /* plans table: five short columns fit a phone without sideways scrolling */
  body.sc-ir .content-block.cb-wide .ir-plans, body.sc-ir .content-block .ir-spec { display: table !important; min-width: 0; width: 100% !important; font-size: 13px; }
  body.sc-ir .ir-spec th[scope="row"] { width: 92px; }
  body.sc-ir .ir-plans th, body.sc-ir .ir-plans td { padding: 10px 8px !important; }
  body.sc-ir .ir-note { display: block; width: max-content; margin: 4px 0 0; }
  body.sc-ir .ir-rep-rows { padding: 2px 16px 4px; }
  body.sc-ir .ir-rep-head { padding: 16px 16px 12px; }
  body.sc-ir #how .term-body { font-size: 11.5px !important; line-height: 1.65 !important; }
}
@media (max-width: 420px) {
  /* device counts are the least relevant column here; drop it so the rest fits */
  body.sc-ir .ir-plans tr > :nth-child(4) { display: none; }
}

/* sc-page-best-offsite-backup-for-small-business (SC-N186) */
/* ---------- sc-bo-listicle-v1 (2026-10-18): /best-offsite-backup-for-small-business/ only (body.sc-bo) ---------- */

/* fine print under the hero spec row and the summary table */
body.sc-bo .bo-fine { margin: var(--s4) 0 0; max-width: 64ch; font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }

/* summary and cost tables: mono column heads, provider column never squeezed */
body.sc-bo .bo-sum thead th, body.sc-bo .bo-cost thead th { font-family: var(--sc-mono) !important; font-size: 11px; font-weight: 500 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-3); vertical-align: bottom; }
body.sc-bo .bo-sum th[scope="row"], body.sc-bo .bo-cost th[scope="row"] { min-width: 120px; overflow-wrap: normal; word-break: normal; }
body.sc-bo .bo-cost td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sc-ink); }

/* ranked options: reading column plus a sticky index on wide screens */
body.sc-bo .bo-opts { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: var(--s8); align-items: start; }
body.sc-bo .bo-toc { position: sticky; top: 96px; padding: 18px 20px; background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--r-card); }
body.sc-bo .bo-toc-k { margin-bottom: 10px; font-family: var(--sc-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-blue-400); }
body.sc-bo .bo-toc ol { margin: 0; padding: 0 0 0 18px; color: var(--sc-ink-3); font-size: 13px; }
body.sc-bo .bo-toc li { padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
body.sc-bo .bo-toc li:first-child { border-top: 0; }
body.sc-bo .bo-toc li a { display: block; font-size: 14px; font-weight: 600; color: var(--sc-ink); text-decoration: none; }
body.sc-bo .bo-toc li a:hover { color: var(--sc-blue-400); }
body.sc-bo .bo-toc li span { display: block; font-size: 12.5px; color: var(--sc-ink-3); }
body.sc-bo .bo-toc-more { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sc-line); font-size: 13px; }
body.sc-bo .bo-toc-more a { color: var(--sc-blue-400); text-decoration: none; }
body.sc-bo #options .content-block h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; scroll-margin-top: 92px; }

/* sources under the closing buttons */
body.sc-bo .h-actions + .bo-src { margin-top: var(--s7) !important; padding-top: var(--s5) !important; border-top: 1px solid var(--sc-line) !important; }
body.sc-bo .bo-src h3 { font-size: 15px; }
body.sc-bo .bo-src li { font-size: 14px; line-height: 1.6; }

@media (max-width: 999px) {
  body.sc-bo .bo-opts { display: block; }
  body.sc-bo .bo-toc { display: none; }
}
@media (max-width: 720px) {
  /* six columns scroll sideways inside their block instead of crushing the provider names */
  body.sc-bo .content-block.cb-wide .bo-sum { min-width: 900px; }
  body.sc-bo .content-block.cb-wide .bo-cost { min-width: 680px; }
  body.sc-bo .bo-sum td, body.sc-bo .bo-cost td { overflow-wrap: normal; }
  /* hero shortlist: two tiles per row so the panel is not a screen and a half tall */
  body.sc-bo .scp-hero .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.sc-bo .scp-hero .hc-stat { padding: 10px 11px; }
  body.sc-bo .scp-hero .hcs-l { font-size: 9.5px; }
  body.sc-bo .scp-hero .hcs-v { font-size: 13px; }
}

/* sc-page-best-proxmox-backup-storage (SC-N186) */

/* ---------- sc-bp-listicle-v1 (2026-10-18): /best-proxmox-backup-storage/ only (body.sc-bp) ---------- */

/* hero: disclosure line under the answer */
body.sc-bp .bp-disclose { margin: var(--s4) 0 0; max-width: 62ch; font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-3); }
body.sc-bp .bp-disclose a { color: var(--sc-blue-400); }

/* hero panel: quick picks by use case */
body.sc-bp .bp-picks { margin: 0; }
body.sc-bp .bp-picks .hc-title-bar { min-width: 0; }
body.sc-bp .bp-pick-rows { list-style: none; margin: 0; padding: 4px 20px 6px; }
body.sc-bp .bp-pick-rows li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
body.sc-bp .bp-pick-rows li:first-child { border-top: 0; }
body.sc-bp .bp-pick-rows b { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--sc-ink); }
body.sc-bp .bp-pick-rows span { font-size: 13px; line-height: 1.4; color: var(--sc-ink-2); }

/* summary table: scrolls inside its own container, never the page */
body.sc-bp .bp-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); }
body.sc-bp .content-block .bp-scroll .bp-tbl { display: table !important; width: 100%; min-width: 880px; margin: 0; overflow: visible; font-size: 14px; }
body.sc-bp .bp-tbl th[scope="row"] { white-space: nowrap; position: sticky; left: 0; z-index: 1; }
body.sc-bp .bp-tbl thead th:first-child { position: sticky; left: 0; z-index: 2; }
body.sc-bp .bp-tbl thead th { font-family: var(--sc-mono) !important; font-size: 11px; font-weight: 500 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); white-space: nowrap; }
body.sc-bp .bp-tbl td:nth-child(3) { min-width: 12em; }
body.sc-bp .bp-note { margin-top: var(--s4); font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }

/* setup terminal: full width under the steps, long flags wrap */
body.sc-bp #setup .term { max-width: none !important; width: 100%; margin: var(--s5) 0; }
body.sc-bp #setup .term-body > div { white-space: pre-wrap; overflow-wrap: anywhere; }

/* sources and CTA */
body.sc-bp #sources .lead a { color: var(--sc-blue-400); }
body.sc-bp #sources .h-actions { margin-top: var(--s5); }
body.sc-bp .bp-sources { margin-top: var(--s7); }
body.sc-bp .bp-sources ul { columns: 2; column-gap: 32px; font-size: 14px; }
body.sc-bp .bp-sources li { break-inside: avoid; }

@media (max-width: 720px) {
  body.sc-bp .bp-pick-rows { padding: 2px 16px 4px; }
  body.sc-bp .bp-pick-rows li { grid-template-columns: 1fr; gap: 2px; }
  body.sc-bp .content-block .bp-scroll .bp-tbl { min-width: 900px; font-size: 13px; }
  body.sc-bp .bp-tbl th, body.sc-bp .bp-tbl td { padding: 10px 12px !important; }
  body.sc-bp .bp-tbl th[scope="row"] { white-space: normal; min-width: 8.5em; box-shadow: 1px 0 0 var(--sc-line); }
  body.sc-bp #setup .term-body { font-size: 11.5px !important; line-height: 1.65 !important; }
  body.sc-bp .bp-sources ul { columns: 1; }
}

/* sc-page-best-restic-hosting (SC-N186) */
/* ---------- sc-br-listicle-v1 (2026-10-18): /best-restic-hosting/ only (body.sc-br) ---------- */

/* disclosure under the hero spec row, notes under the table and code blocks */
body.sc-br .br-fine { margin: var(--s4) 0 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }
body.sc-br .content-block p.br-note { margin-top: -6px; font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }
body.sc-br [id] { scroll-margin-top: 88px; }

/* hero card: quick picks by use case */
body.sc-br .br-card { margin: 0; }
body.sc-br .br-card .hc-title-bar { min-width: 0; }
body.sc-br .br-card-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sc-br .br-picks { list-style: none; margin: 0; padding: 4px 20px 6px; counter-reset: br; }
body.sc-br .br-picks li { counter-increment: br; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
body.sc-br .br-picks li:first-child { border-top: 0; }
body.sc-br .br-picks li::before { content: counter(br); grid-row: 1 / span 2; font-family: var(--sc-mono); font-size: 11px; color: var(--sc-ink-3); }
body.sc-br .br-picks span { grid-column: 2; font-family: var(--sc-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-ink-3); }
body.sc-br .br-picks b { grid-column: 2; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--sc-ink); }
body.sc-br .br-picks em { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--sc-mono); font-size: 11.5px; color: var(--sc-blue-400); white-space: nowrap; }

/* summary table: provider names are row headers and anchors */
body.sc-br .br-tbl thead th { font-family: var(--sc-mono) !important; font-size: 11px; font-weight: 500 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); }
body.sc-br .br-tbl th[scope="row"] { white-space: nowrap; }
body.sc-br .br-tbl th[scope="row"] a { color: var(--sc-ink); text-decoration: none; }
body.sc-br .br-tbl th[scope="row"] a:hover { color: var(--sc-blue-400); }
body.sc-br .br-tbl td:nth-child(3) { min-width: 9em; }

/* per-option sections: repo strings people copy */
body.sc-br #picks .content-block h2 { scroll-margin-top: 88px; }
body.sc-br #picks .content-block h2 + p { margin-top: 0; }
body.sc-br .content-block pre { margin: 6px 0 18px; }
body.sc-br .content-block pre code { background: none; border: 0; padding: 0; border-radius: 0; font-size: inherit; color: inherit; white-space: pre; }

/* wide screens: a jump list of the nine options under the section heading */
body.sc-br .br-toc { display: none; }
@media (min-width: 1000px) {
  body.sc-br #picks > .wrap > .br-toc { display: block; float: left; clear: left; width: 34%; margin-left: 0 !important; padding-right: var(--s7); box-sizing: border-box; }
}
body.sc-br .br-toc ol { margin: var(--s5) 0 0; padding: 0 0 0 1.6em; font-family: var(--sc-mono); font-size: 13px; line-height: 1.5; color: var(--sc-ink-3); }
body.sc-br .br-toc li { margin: 0 0 8px; }
body.sc-br .br-toc a { color: var(--sc-ink-2); text-decoration: none; }
body.sc-br .br-toc a:hover { color: var(--sc-blue-400); }

/* closing band: buttons, then sources */
body.sc-br #sources .h-actions { margin-top: var(--s5); }
body.sc-br .br-src { margin-top: var(--s6); }
body.sc-br .br-src li { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  body.sc-br .br-picks { padding: 2px 16px 4px; }
  body.sc-br .br-picks em { grid-column: 2; grid-row: auto; margin-top: 2px; }
  body.sc-br .br-picks li::before { grid-row: 1 / span 3; }
  body.sc-br .content-block.cb-wide .br-tbl { min-width: 1000px; }
  body.sc-br .br-tbl th, body.sc-br .br-tbl td { overflow-wrap: normal; }
  body.sc-br .content-block pre { font-size: 12px; }
}

/* sc-page-cyber-insurance-backup-requirements (SC-N186) */
/* ---------- sc-ci-checklist-v1 (2026-10-18): /cyber-insurance-backup-requirements/ only (body.sc-ci) ---------- */
body.sc-ci .ci-upd { margin: 0 0 var(--s4); font-family: var(--sc-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-blue-400); }
body.sc-ci .ci-fine { margin: var(--s4) 0 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }

/* hero: the application questions wrap instead of truncating */
body.sc-ci .ci-form { margin: 0; }
body.sc-ci .ci-form .hc-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
body.sc-ci .ci-form .hc-snap { align-items: center; }
body.sc-ci .ci-form .hc-snap-name { white-space: normal; overflow: visible; line-height: 1.4; }
body.sc-ci .ci-form .hc-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* summary + servercrate tables */
body.sc-ci :is(.ci-sum, .ci-sc) thead th { font-family: var(--sc-mono) !important; font-size: 11px; font-weight: 500 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); }
body.sc-ci :is(.ci-sum, .ci-sc) th[scope="row"] { white-space: nowrap; vertical-align: top; }
body.sc-ci :is(.ci-sum, .ci-sc) td { vertical-align: top; }
body.sc-ci .ci-sum th[scope="row"] a { color: var(--sc-ink); text-decoration: none; }
body.sc-ci .ci-sc th[scope="row"] { width: 160px; }

/* requirement passages: sticky contents on the left, ten blocks on the right */
body.sc-ci .ci-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s8); align-items: start; }
body.sc-ci .ci-layout > .content-block { max-width: 72ch !important; margin: 0 !important; }
body.sc-ci .ci-toc { position: sticky; top: 96px; padding: var(--s4) 0; border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); }
body.sc-ci .ci-toc-h { margin: 0 0 var(--s3); font-family: var(--sc-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); }
body.sc-ci .ci-toc ol { margin: 0; padding-left: 1.5em; font-size: 14px; line-height: 1.45; color: var(--sc-ink-3); }
body.sc-ci .ci-toc li { margin: 0 0 8px; }
body.sc-ci .ci-toc a { color: var(--sc-ink-2); text-decoration: none; }
body.sc-ci :is(.ci-toc, .ci-sum) a:hover { color: var(--sc-blue-400); }
body.sc-ci :is(#requirements h2, #sources) { scroll-margin-top: 96px; margin-top: var(--s7); }
body.sc-ci #requirements h2:first-child { margin-top: 0; }

/* printable checklist */
body.sc-ci .ci-print { margin: var(--s5) 0; padding: var(--s5) var(--s5) var(--s4); border: 1px dashed rgba(255, 255, 255, .22); border-radius: var(--r-card); background: var(--sc-surface); }
body.sc-ci .ci-print-h { margin: 0 0 var(--s4); font-family: var(--sc-mono); font-size: 12px; letter-spacing: .04em; color: var(--sc-ink-3); }
body.sc-ci .ci-boxes { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s6); }
body.sc-ci .ci-boxes li { position: relative; break-inside: avoid; margin: 0 0 var(--s3); padding-left: 28px; line-height: 1.5; }
body.sc-ci .ci-boxes li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border: 1.5px solid var(--sc-blue-400); border-radius: 3px; }

/* sources */
body.sc-ci .ci-src { padding-left: 1.4em; font-size: 14px; line-height: 1.55; }
body.sc-ci .ci-src li { margin-bottom: var(--s2); overflow-wrap: anywhere; }
body.sc-ci #servercrate .content-block + .h-actions { margin-top: var(--s5); }

@media (max-width: 720px) {
  /* tables keep their columns and scroll sideways inside .content-block */
  body.sc-ci .content-block.cb-wide .ci-sum { min-width: 720px; }
  body.sc-ci .content-block.cb-wide .ci-sc { min-width: 600px; }
  body.sc-ci :is(.ci-sum, .ci-sc) :is(td, th) { overflow-wrap: normal; white-space: normal !important; }
  body.sc-ci .ci-boxes { columns: 1; }
  body.sc-ci :is(.ci-sum, .ci-sc) th[scope="row"] { min-width: 140px; }
  body.sc-ci .ci-layout { display: block; }
  body.sc-ci .ci-toc { display: none; }
  body.sc-ci .ci-print { padding: var(--s4); }
  body.sc-ci .ci-form .hc-title-bar { flex-wrap: wrap; }
}

@media print {
  body.sc-ci #site-header, body.sc-ci #site-footer, body.sc-ci .h-card-wrap, body.sc-ci .h-actions { display: none !important; }
  body.sc-ci .ci-print, body.sc-ci .ci-boxes li::before { border-color: #000; background: none; color: #000; }
}

/* sc-page-backup-without-terminal (SC-N186) */
/* ---------- sc-nt-guide-v1 (2026-10-18): /backup-without-terminal/ only (body.sc-nt) ---------- */
body.sc-nt .nt-upd { margin: 0 0 var(--s4); font-family: var(--sc-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-blue-400); }
body.sc-nt .nt-fine { margin: var(--s4) 0 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }
body.sc-nt .content-block p.nt-note { margin-top: var(--s3); font-size: 13px; line-height: 1.55; color: var(--sc-ink-3); }
body.sc-nt [id] { scroll-margin-top: 92px; }

/* hero diagram: step rows wrap instead of truncating */
body.sc-nt .nt-card { margin: 0; }
body.sc-nt .nt-card .hc-snap { align-items: center; }
body.sc-nt .nt-card .hc-snap-name { white-space: normal; overflow: visible; line-height: 1.4; }
body.sc-nt .nt-card .hc-snap-ok { white-space: nowrap; }

/* tables */
body.sc-nt .nt-tbl thead th { font-family: var(--sc-mono) !important; font-size: 11px; font-weight: 500 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); }
body.sc-nt .nt-tbl :is(th, td) { vertical-align: top; }
body.sc-nt .nt-tbl th[scope="row"] a { color: var(--sc-ink); text-decoration: none; }
body.sc-nt .nt-tbl th[scope="row"] a:hover { color: var(--sc-blue-400); }
body.sc-nt .nt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
body.sc-nt .nt-split > .content-block { margin: 0 !important; }

/* walkthrough: numbered steps left, form diagrams right */
body.sc-nt .nt-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--s7); align-items: start; }
body.sc-nt .nt-how > .content-block { max-width: 70ch !important; margin: 0 !important; }
body.sc-nt .nt-steps { padding-left: 2em; }
body.sc-nt .nt-steps li { margin: 0 0 var(--s5); padding-left: 4px; }
body.sc-nt .nt-steps li::marker { font-family: var(--sc-mono); font-weight: 600; color: var(--sc-blue-400); }
body.sc-nt .nt-steps strong { display: block; margin-bottom: 4px; color: var(--sc-ink); }
body.sc-nt .nt-mocks { display: grid; gap: var(--s5); position: sticky; top: 96px; }
body.sc-nt .nt-form { margin: 0; }
body.sc-nt .nt-fields { margin: 0; padding: 6px 20px 4px; }
body.sc-nt .nt-fields > div { padding: 10px 0; border-top: 1px solid var(--sc-line); }
body.sc-nt .nt-fields > div:first-child { border-top: 0; }
body.sc-nt .nt-fields dt { margin: 0 0 4px; font-family: var(--sc-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-3); }
body.sc-nt .nt-fields dd { margin: 0; padding: 7px 10px; border: 1px solid var(--sc-line-2); border-radius: var(--r-ctl); font-size: 13.5px; color: var(--sc-ink); overflow-wrap: anywhere; }
body.sc-nt .nt-fields dd code { background: none; border: 0; padding: 0; font-size: 12px; color: var(--sc-blue-200); }
body.sc-nt .nt-hint { display: block; margin-top: 2px; font-size: 11.5px; color: var(--sc-ink-3); }
body.sc-nt .nt-actions { margin: 0; padding: 4px 20px 18px; text-align: right; }
body.sc-nt .nt-btn { display: inline-block; padding: 7px 16px; border-radius: var(--r-ctl); background: var(--sc-blue-700); color: #fff; font-size: 13px; font-weight: 600; }

/* prose sections: code people copy, subheads, sources */
body.sc-nt .content-block pre { margin: 6px 0 18px; overflow-x: auto; }
body.sc-nt .content-block pre code { background: none; border: 0; padding: 0; border-radius: 0; font-size: inherit; color: inherit; white-space: pre; }
body.sc-nt .nt-h3 { margin: 0 0 var(--s3); font-size: 22px; color: var(--sc-ink); }
body.sc-nt .nt-help .h-actions { margin-top: var(--s5); }
body.sc-nt .nt-src { padding-left: 1.4em; font-size: 14px; line-height: 1.55; }
body.sc-nt .nt-src li { margin-bottom: var(--s2); overflow-wrap: anywhere; }

@media (max-width: 960px) {
  body.sc-nt :is(.nt-how, .nt-split) { display: block; }
  body.sc-nt .nt-help { margin-top: var(--s7); }
  body.sc-nt .nt-mocks { position: static; margin-top: var(--s5); }
}
@media (max-width: 720px) {
  body.sc-nt .content-block.cb-wide .nt-tbl:not(.nt-plans) { min-width: 860px; }
  body.sc-nt .nt-tbl :is(th, td) { overflow-wrap: normal; }
  body.sc-nt .content-block pre { font-size: 12px; }
}