/* ═══════════════════════════════════════════════════════════════════════════
   EditBuddy — design system 2026
   ---------------------------------------------------------------------------
   Loaded AFTER global2.css and theme.css on every page. This layer is the
   single source of truth for surface, type, colour and rhythm; the older
   sheets stay in place so no existing class disappears mid-flight.

   The brief was "make it not look vibe coded". Concretely that meant deleting
   the tells rather than adding more polish:

     · one typeface, not two — the serif-italic gradient <em> is gone
     · one accent colour, used for actions and almost nothing else
     · no glow blobs, no gradient text, no rainbow icon tints
     · flat buttons and cards, a single 4px-based spacing rhythm
     · motion reduced to one 12px fade-up; no tilt, no marquee, no shimmer

   Anything below that touches a legacy selector is deliberate — see the
   comment on that block for why.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface ───────────────────────────────────────────────────────────
     Neutrals carry a trace of blue so the orange accent reads warm against
     them. Pure #000/#050505 made every border look like a seam. */
  --eb-bg:        #08090c;
  --eb-bg-raised: #0d0f14;
  --eb-bg-sunken: #050608;
  --eb-panel:     #101319;

  --eb-line:      rgba(255, 255, 255, 0.07);
  --eb-line-mid:  rgba(255, 255, 255, 0.11);
  --eb-line-hi:   rgba(255, 255, 255, 0.18);

  --eb-fg:        #eef1f6;
  --eb-fg-muted:  #98a1b3;
  --eb-fg-soft:   #6a7386;

  /* One accent. --eb-accent-ink is the only orange allowed on text, because
     it is the only shade that clears AA against --eb-bg. */
  --eb-accent:     #ff6a1a;
  --eb-accent-hi:  #ff8038;
  --eb-accent-ink: #ff9552;
  --eb-accent-dim: rgba(255, 106, 26, 0.10);

  /* Radii — three values, no more. */
  --eb-r-sm: 8px;
  --eb-r:    12px;
  --eb-r-lg: 18px;

  /* Vertical rhythm */
  --eb-sec-y:    clamp(64px, 8vw, 104px);
  --eb-sec-y-sm: clamp(44px, 5vw, 68px);

  /* Legacy token remaps — every old component inherits the new palette
     without being rewritten one by one. */
  --bg: var(--eb-bg);
  --surface: var(--eb-bg-raised);
  --surface-2: var(--eb-panel);
  --line: var(--eb-line);
  --line-strong: var(--eb-line-mid);
  --text: var(--eb-fg);
  --muted: var(--eb-fg-muted);
  --soft: var(--eb-fg-soft);
  --brand: var(--eb-accent);
  --brand2: var(--eb-accent-ink);
  --glow: transparent;
  --radius: var(--eb-r-lg);
  --radius-sm: var(--eb-r);
  --shadow: none;
  --shadow-glow: none;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

body {
  background: var(--eb-bg);
  color: var(--eb-fg);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.005em;
}

/* The fixed 46px graph-paper grid and the blurred header wash were the two
   loudest "generated landing page" signals on the site. Both removed. */
body::before,
body::after { display: none !important; content: none !important; }

::selection { background: rgba(255, 106, 26, 0.26); color: #fff; }

/* ── Type ──────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;   /* was -0.045em — that crush is a trend, not a voice */
  line-height: 1.14;
  color: var(--eb-fg);
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.06; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(19px, 1.7vw, 22px); }

/* Emphasis inside a heading is one accent-coloured word, in the same face.
   The Playfair-italic-with-orange-gradient treatment is gone everywhere. */
h1 em, h2 em, h3 em, .eb-em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--eb-accent-ink) !important;
  color: var(--eb-accent-ink) !important;
}

p { color: var(--eb-fg-muted); }

.eb-lead,
.hero2-lead,
.sec-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--eb-fg-muted);
  max-width: 62ch;
}

/* Mono is for data — timecodes, table headers, plan codes. Not decoration.
   Kickers keep it but drop the orange; a kicker is a label, not a highlight. */
.eb-kicker,
.kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eb-fg-soft);
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 14px;
  display: block;
}

a { color: inherit; }
.eb-link,
.post-body a:not(.btn) {
  color: var(--eb-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 149, 82, 0.35);
}
.eb-link:hover,
.post-body a:not(.btn):hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--eb-accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.w { width: min(1160px, 100% - 40px); margin: 0 auto; }
.w-narrow { width: min(820px, 100% - 40px); margin: 0 auto; }

.eb-sec       { padding: var(--eb-sec-y) 0; }
.eb-sec-tight { padding: var(--eb-sec-y-sm) 0; }
.sec          { padding: var(--eb-sec-y) 0; }

.eb-rule { height: 1px; background: var(--eb-line); border: 0; margin: 0; }

.eb-section-head { max-width: 62ch; margin-bottom: 44px; }
.eb-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eb-section-head.center .eb-lead { margin-left: auto; margin-right: auto; }
.eb-section-head h2 { margin-bottom: 14px; }

/* ── Buttons ───────────────────────────────────────────────────────────
   Flat, rectangular-ish, one weight. The pill + inner-highlight + coloured
   drop-shadow combination was doing three things at once. */

.btn {
  height: 46px;
  padding: 0 22px;
  border-radius: var(--eb-r-sm);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn:hover,
.btn:active { transform: none; }

.btn-p {
  color: #fff;
  background: var(--eb-accent);
  box-shadow: none;
  border: 1px solid var(--eb-accent);
}
.btn-p:hover {
  background: var(--eb-accent-hi);
  border-color: var(--eb-accent-hi);
  filter: none;
  box-shadow: none;
}

.btn-s {
  color: var(--eb-fg);
  background: transparent;
  border: 1px solid var(--eb-line-mid);
  box-shadow: none;
}
.btn-s:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--eb-line-hi);
}

.btn-ghost {
  color: var(--eb-fg-muted);
  background: none;
  border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--eb-fg); background: rgba(255, 255, 255, 0.04); }

.btns { gap: 12px; }

/* ── Cards ─────────────────────────────────────────────────────────────
   One card. Border does the work; no lift, no glow, no gradient fill. */

.eb-card,
.step-card,
.price-card,
.uc,
.fp-card,
.faq-item {
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--eb-line);
  border-radius: var(--eb-r);
  box-shadow: none;
}

.eb-card:hover,
.step-card:hover,
.uc:hover,
.fp-card:hover {
  transform: none;
  border-color: var(--eb-line-mid);
  box-shadow: none;
}

.eb-card h3 a { color: inherit; }
.eb-card h3 a:hover { color: var(--eb-accent-ink); }

/* Feature icons were eight different tinted squares. One neutral chip,
   monochrome glyph — the colour told you nothing. */
.eb-ic,
.eb-card .eb-ic {
  width: 36px;
  height: 36px;
  border-radius: var(--eb-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--eb-line) !important;
  color: var(--eb-fg-muted);
  margin-bottom: 16px;
}
.eb-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ── Badges ────────────────────────────────────────────────────────────── */

.eb-badge,
.feat-flag,
.pop-badge,
.price-tier {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--eb-line);
  color: var(--eb-fg-muted);
  box-shadow: none;
}
.pop-badge,
.feat-flag.pro {
  background: var(--eb-accent-dim);
  border-color: rgba(255, 106, 26, 0.28);
  color: var(--eb-accent-ink);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

.cmp-table th,
.cmp-table td { border-bottom: 1px solid var(--eb-line); }
.cmp-table thead th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--eb-fg-soft);
}
.cmp-table tbody td { color: var(--eb-fg-muted); font-weight: 500; }
.cmp-table .cmp-eb { background: rgba(255, 106, 26, 0.045); }
.cmp-table thead th.cmp-eb { color: var(--eb-fg); border-bottom: 1px solid rgba(255, 106, 26, 0.4); }
.cmp-table tbody td.cmp-eb { color: var(--eb-accent-ink); }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.site-nav {
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-nav.scrolled { border-bottom-color: var(--eb-line); }

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--eb-fg-muted);
  transition: color 0.16s ease;
}
.nav-links a:hover { color: var(--eb-fg); }

/* The nav keeps its own container — a rounded rectangle, not a full pill, so
   it agrees with the 8/12/18 radius scale the rest of the site uses. */
.nav-links {
  border-radius: var(--eb-r);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--eb-line);
  box-shadow: none;
  padding: 5px;
  gap: 2px;
}
.nav-links a {
  border-radius: var(--eb-r-sm);
  padding: 9px 14px;
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.05); }

.hamburger { border-radius: var(--eb-r-sm); border-color: var(--eb-line-mid); }

/* ── Footer ────────────────────────────────────────────────────────────── */

footer, .site-footer { border-top: 1px solid var(--eb-line); background: var(--eb-bg-sunken); }
.foot-col h3, .foot-col h4 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--eb-fg-soft);
}
.foot-col a { font-size: 14px; color: var(--eb-fg-muted); }
.foot-col a:hover { color: var(--eb-fg); }

/* ── Legacy components, calmed ─────────────────────────────────────────
   Feature, service and compare pages carry their own component CSS from an
   earlier pass: gradient-clipped text, orange-to-amber pill buttons, a hair
   rule before every kicker. Flattening them here is what makes an inner page
   read as the same site as the homepage. */

.eb-kicker::before,
.kicker::before { display: none !important; }

/* Gradient-clipped headline numbers / words -> solid ink.
   The list is every selector that still used background-clip:text after the
   sweep (grep across the page CSS), not a guess. */
.eb-stat .n,
.uc-stat .n,
.pack-mins,
.req-card .req-val,
.tier-card.partner .tier-rate,
.calc-result.partner .amount,
.partner-teaser .badge-35,
.fp-hero h1 em,
.sp-hero h1 em,
.tool-hero h1 em,
.tool-hero h1 .accent,
.stat-num,
.eb-gradient-text {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--eb-fg) !important;
  color: var(--eb-fg) !important;
  font-style: normal !important;
}
.fp-hero h1 em,
.sp-hero h1 em,
.tool-hero h1 em,
.tool-hero h1 .accent {
  -webkit-text-fill-color: var(--eb-accent-ink) !important;
  color: var(--eb-accent-ink) !important;
}

/* Two-stop orange pill buttons -> the same flat primary as everywhere else */
.sp-hero-cta,
.pb-cta,
.final-cta-btn,
.cta-btn {
  background: var(--eb-accent) !important;
  border-radius: var(--eb-r-sm) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.sp-hero-cta:hover,
.pb-cta:hover,
.final-cta-btn:hover,
.cta-btn:hover { background: var(--eb-accent-hi) !important; transform: none !important; }

.pricing-block .pb-badge {
  background: var(--eb-accent-dim) !important;
  border: 1px solid rgba(255, 106, 26, 0.28);
  color: var(--eb-accent-ink) !important;
  border-radius: 5px !important;
  font-weight: 500 !important;
}

.rev-avatar {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--eb-fg-muted) !important;
  font-weight: 600 !important;
}

/* Auth screens: the magic-link button was the last two-stop orange gradient
   left. The Google button keeps its white fill — that one is a brand mark. */
body.auth-page .btn-magic {
  background: var(--eb-accent) !important;
  box-shadow: none !important;
}
body.auth-page .btn-magic:hover { background: var(--eb-accent-hi) !important; }

/* Panel screenshots were pulled out of the feature, use-case and download
   subsections — the product shot belongs on the homepage, once, at full size.
   These two grids were built as copy-beside-screenshot; with the screenshot
   gone they'd leave the text stranded in a half-width column. */
.uc-shot,
.dl-shot-grid { grid-template-columns: 1fr !important; }
.uc-shot > *,
.dl-shot-grid > * { max-width: 760px; }

/* ── Decoration removal ────────────────────────────────────────────────
   These classes still exist in 200+ pages of markup. Rather than rip the
   elements out of every file, the effects are neutralised here so the
   markup degrades to plain sections. */

.eb-glow-wrap::before,
.eb-glow-wrap::after,
.eb-glow,
.glow-divider,
.wl-bg,
.hero2-grid,
.ebprog { display: none !important; }

.eb-glow-wrap { background: none !important; }

.value-bar-strip { display: none !important; }

/* Card tilt + shimmer + pulse rings, wherever they were declared. */
.eb-tilt, [data-tilt] { transform: none !important; }

/* ── Motion ────────────────────────────────────────────────────────────
   One reveal, 12px, 420ms. Everything is visible without JS. */

.eb-reveal,
.eb-reveal-group > * ,
.reveal {
  opacity: 1;
  transform: none;
}

html.ebjs .eb-reveal,
html.ebjs .eb-reveal-group > *,
html.ebjs .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.42s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.42s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* `.in` is accepted alongside `.is-in` so a cached copy of the previous
   eb-motion.js can still reveal content instead of leaving it at opacity 0. */
html.ebjs .eb-reveal.is-in,
html.ebjs .eb-reveal.in,
html.ebjs .eb-reveal-group.is-in > *,
html.ebjs .eb-reveal-group.in > *,
html.ebjs .reveal.is-in,
html.ebjs .reveal.in,
html.ebjs .reveal.visible {
  opacity: 1;
  transform: none;
}

html.ebjs .eb-reveal-group.is-in > *:nth-child(2),
html.ebjs .eb-reveal-group.in > *:nth-child(2) { transition-delay: 60ms; }
html.ebjs .eb-reveal-group.is-in > *:nth-child(3),
html.ebjs .eb-reveal-group.in > *:nth-child(3) { transition-delay: 120ms; }
html.ebjs .eb-reveal-group.is-in > *:nth-child(4),
html.ebjs .eb-reveal-group.in > *:nth-child(4) { transition-delay: 180ms; }
html.ebjs .eb-reveal-group.is-in > *:nth-child(n+5),
html.ebjs .eb-reveal-group.in > *:nth-child(n+5) { transition-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  html.ebjs .eb-reveal,
  html.ebjs .eb-reveal-group > *,
  html.ebjs .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Inputs ────────────────────────────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="search"],
input[type="password"], textarea, select {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--eb-line-mid);
  border-radius: var(--eb-r-sm);
  color: var(--eb-fg);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(255, 106, 26, 0.5);
  outline: none;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq-item + .faq-item { margin-top: 10px; }
.faq-btn {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--eb-fg);
  padding: 18px 20px;
}
.faq-plus { color: var(--eb-fg-soft); font-weight: 400; }
.faq-body p { font-size: 15px; line-height: 1.75; }

/* ── Wide content on narrow screens ────────────────────────────────────
   Blog and feature pages embed bare comparison tables with enough columns
   to force ~850px, which pushed the whole document sideways on a phone.
   Below 860px the table scrolls inside its own box instead; desktop keeps
   a normal table. Same treatment for code blocks. */

@media (max-width: 860px) {
  /* Every table that isn't already inside a scroll wrapper. Reference
     tables on the calculator tools hit this too, not just blog posts. */
  table:not(.eb-table-scroll table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .post-body pre {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Inline <code> in prose can be a long path or flag; break it rather than
   let one token set the page's minimum width. */
.post-body code,
.post-body kbd {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.eb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -- One heading scale, every template ---------------------------------
   The site grew page by page and each template invented its own scale:
   h1 landed anywhere between 52px and 72px, section h2 between 20px and
   48px, depending which page you were on. Every selector below came from
   grepping the CSS and inline styles for h1/h2 font-size rules; in-tool
   and auth-form-card headings are deliberately absent, because those are
   compact UI labels rather than page furniture. */

/* Page headline */
.bl-hero h1, .dl-hero h1, .fp-hero h1, .hm-hero h1, .in-hero h1,
.page-header h1, .page-hero h1, .post-hero h1, .pr-hero h1, .rp-hero h1,
.sp-hero h1, .svc-hero h1, .sx-hero h1, .tool-hero h1, .tools-hero h1,
body.auth-page .auth-story h1, body.site-page .hero h1,
body.site-page .legal-page h1, body.site-page .page-hero h1 {
  font-size: clamp(36px, 4.8vw, 56px) !important;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

/* Section headline */
.calc-wrap h2, .cl h2, .cta-section h2, .dl-section .eb-section-head h2,
.dl-shot-copy h2, .earn-section h2, .eb-cta-panel h2, .eb-section-head h2,
.final-cta h2, .fp-cta h2, .fp-section h2, .hiw h2, .legal h2,
.partner-teaser h2, .pr-guarantee h2, .pr-section h2, .presets-wrap h2,
.related h2, .related-tools h2, .rm-col h2, .seo-section h2, .sp-section h2,
.svc-cta h2, .tool-cta h2, .tools-banner h2, .topup h2,
.tsh .eb-section-head h2, body.site-page .legal h2 {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.16;
  letter-spacing: -0.022em;
}

/* Headline inside prose -- sits under a section headline, never competes */
.bl-card h2, .callout h2, .checker-card h2, .cl-entry h2, .con-meta h2,
.content h2, .content-section h2, .faq h2, .faq-section h2,
.faq-section > h2, .legal-content h2, .post-body h2, .pr-card h2,
.sec-block h2, .svc-card h2, .svc-faq h2, .tier-card h2, .tool-card h2,
.wl-faq h2, body.site-page .content h2, body.site-page .legal-content h2 {
  font-size: clamp(21px, 2.3vw, 26px) !important;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* -- One card ----------------------------------------------------------
   Radii were 12 / 18 / 20 / 24px and backgrounds ranged from transparent
   to near-black to an orange-bordered variant, per template. */
.fp-card, .sp-card, .svc-card, .uc, .tool-card, .bl-card, .price-card,
.pr-card, .step-card, .eb-card, .rm-col, .cl-entry, .tier-card,
.checker-card, .sec-block {
  border-radius: var(--eb-r) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  border: 1px solid var(--eb-line) !important;
  box-shadow: none !important;
}
.tool-card.featured, .price-card.pop, .pr-card.pop, .tier-card.partner {
  background: rgba(255, 106, 26, 0.03) !important;
  border-color: rgba(255, 106, 26, 0.3) !important;
}
.fp-card:hover, .sp-card:hover, .svc-card:hover, .uc:hover,
.tool-card:hover, .bl-card:hover, .eb-card:hover {
  transform: none !important;
  border-color: var(--eb-line-mid) !important;
}

/* Blog kickers were the last orange label left; everything else is grey. */
.post-hero .kicker, .bl-hero .kicker, .post-meta .kicker {
  color: var(--eb-fg-soft) !important;
}

/* -- Emoji standing in for icons --------------------------------------
   The tools and services pages use emoji inside icon chips (180 of them
   across 25 pages, 73 distinct glyphs). Full-colour emoji on a neutral
   chip is the strongest "generated page" tell there is, and there are far
   too many distinct glyphs to hand-map to the stroke-icon set. Rendering
   them monochrome makes them read as one icon system instead of a sticker
   sheet. Delete this block to get the colour back. */
.tool-icon, .tool-mini-icon, .step-icon, .related-card-icon, .mistake-icon,
.crit-icon, .req-icon, .cta-icon, .eb-cta-icon, .eb-ic, .ic, .icon, .emoji {
  filter: grayscale(1) brightness(1.45) contrast(0.92);
}
/* the panel embed is the real product UI — its own icons stay as designed */
.pl-frame, .pl-frame * { filter: none !important; }

/* -- Components that still painted the old decoration -------------------
   Found by walking every rendered element on the tools, pricing, services
   and feature templates and reading computed styles — these are the ones
   that still had a brand gradient, a coloured glow, or a pill radius on a
   block-sized element. Listed explicitly rather than swept with a wildcard
   so genuinely round things (dots, avatars, status chips) keep their shape. */

/* Big washed panels -> one flat surface with a border */
.quick-answer, .pr-guarantee, .tools-banner, .eb-cta-panel, .editbuddy-cta,
.partner-teaser, .fp-callout, .uc-quote {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--eb-line) !important;
  box-shadow: none !important;
  border-radius: var(--eb-r) !important;
}

/* Chips and badges -> the same chip as everywhere else */
.badge, .featured-badge, .best, .tag, .sp-tag, .channel-chip, .step-num,
.free-tag, .r-kicker {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--eb-line) !important;
  color: var(--eb-fg-muted) !important;
  box-shadow: none !important;
  border-radius: 5px !important;
}

/* Actions -> the flat primary */
.cta, .tool-link, .eb-consent-btn, .bill-toggle button.active,
.calc-type-btn.active, .btog.active {
  background: var(--eb-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: var(--eb-r-sm) !important;
}
.cta:hover, .tool-link:hover, .eb-consent-btn:hover {
  background: var(--eb-accent-hi) !important;
  transform: none !important;
}

/* Segmented controls */
.bill-toggle, .calc-type-row, .seg { border-radius: var(--eb-r-sm) !important; }
.bill-toggle button, .calc-type-btn { border-radius: 6px !important; }

/* Icon chips */
.tool-icon, .tool-mini-icon, .step-icon, .related-card-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--eb-line) !important;
  box-shadow: none !important;
  border-radius: var(--eb-r-sm) !important;
}

/* The logo picked up a coloured drop-shadow in a few headers */
.site-nav img, .topbar-logo img, .foot-brand-row img { box-shadow: none !important; }

/* Last stragglers, same method: walked the rendered tree and read computed
   styles until the count hit zero. */
.calc-btn, .eb-cta-btn, .cmp-callout, .eb-cta, .calc-wrap, .calc-result,
.calc-result.partner, .fp-section .num, .fp-card .num, span.num {
  background-image: none !important;
  box-shadow: none !important;
}
.calc-btn, .eb-cta-btn {
  background-color: var(--eb-accent) !important;
  color: #fff !important;
  border-radius: var(--eb-r-sm) !important;
}
.calc-btn:hover, .eb-cta-btn:hover { background-color: var(--eb-accent-hi) !important; }
.cmp-callout, .eb-cta, .calc-wrap, .calc-result {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--eb-line) !important;
  border-radius: var(--eb-r) !important;
}
.fp-section .num, .fp-card .num, span.num {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--eb-accent-ink) !important;
}
/* the comparison table tinted every EditBuddy cell with a coloured glow */
td.col-eb, th.col-eb { box-shadow: none !important; background: rgba(255, 106, 26, 0.045) !important; }
/* range inputs and the services CTA button */
input[type="range"] { background-image: none !important; }
.sp-section button, .svc-card button { box-shadow: none !important; }
.sp-section button, .svc-card button { background-image: none !important; }
/* a wide 999px label on the calculator */
.calc-wrap label { border-radius: var(--eb-r-sm) !important; }

/* Tail end of the same sweep: download, about, blog CTA, services, use-cases. */
.dl-tag, .dl-chip { border-radius: 5px !important; }
.dl-os-card.active { box-shadow: none !important; border-color: rgba(255,106,26,.35) !important; }
.dl-btn {
  background-image: none !important;
  background-color: var(--eb-accent) !important;
  color: #fff !important;
  border-radius: var(--eb-r-sm) !important;
  box-shadow: none !important;
}
.dl-btn:hover { background-color: var(--eb-accent-hi) !important; }
.dl-stats .n, .stat .n, div.n {
  background-image: none !important;
  box-shadow: none !important;
  color: var(--eb-fg) !important;
}
.team-avatar {
  background-image: none !important;
  background-color: rgba(255,255,255,.06) !important;
  color: var(--eb-fg-muted) !important;
  box-shadow: none !important;
}
.post-cta, .post-cta a, .post-body .post-cta {
  background-image: none !important;
  box-shadow: none !important;
}
.post-cta {
  background-color: rgba(255,255,255,.02) !important;
  border: 1px solid var(--eb-line) !important;
  border-radius: var(--eb-r) !important;
}
.post-cta a {
  background-color: var(--eb-accent) !important;
  color: #fff !important;
  border-radius: var(--eb-r-sm) !important;
}
.fp-cta {
  background-image: none !important;
  background-color: rgba(255,255,255,.02) !important;
  border: 1px solid var(--eb-line) !important;
  border-radius: var(--eb-r) !important;
}
.sp-section button, .svc-card button, .sp-hero button {
  background-image: none !important;
  box-shadow: none !important;
  background-color: var(--eb-accent) !important;
  color: #fff !important;
  border-radius: var(--eb-r-sm) !important;
}
label { border-radius: 0 }
.calc-wrap label, .tool-area label, form label { border-radius: var(--eb-r-sm) !important; }

/* -- Services templates ------------------------------------------------
   These pages were built before the design system and kept their own
   everything: five card radii (0/16/18/20/24px), five section paddings
   (30/0, 90/40, 0/0, 60/60, 52/52) and cards that were either transparent
   or near-black. Scoped with :has() so only the services templates are
   touched — they share body.site-page with unrelated pages. Browsers
   without :has() simply keep the old spacing; nothing breaks. */

body:has(.svc-hero) section.w,
body:has(.sp-hero) section.w {
  padding-block: clamp(44px, 5.5vw, 76px);
}
body:has(.svc-hero) section.w:first-of-type,
body:has(.sp-hero) section.w:first-of-type {
  padding-block: clamp(24px, 3vw, 36px) clamp(40px, 5vw, 72px);
}

.svc-hero, .sp-hero {
  padding-block: clamp(36px, 4.5vw, 60px) clamp(28px, 3vw, 40px) !important;
}
.hiw, .svc-faq, .svc-cta, .sp-section {
  padding-block: clamp(44px, 5.5vw, 76px) !important;
}

/* One card, same as every other template */
.hiw-step, .svc-card, .sp-card, .pricing-block, .work-card, .rev-card,
.proc-step, .chan-card, .svc-faq .faq-item {
  border-radius: var(--eb-r) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  border: 1px solid var(--eb-line) !important;
  box-shadow: none !important;
}
.pricing-block.featured, .pricing-block.pop {
  background: rgba(255, 106, 26, 0.03) !important;
  border-color: rgba(255, 106, 26, 0.3) !important;
}

/* Delivery lines stay rows, but get a rule so they read as a list */
.deliv-item {
  border-bottom: 1px solid var(--eb-line);
  padding-block: 12px;
}
.deliv-item:last-child { border-bottom: 0; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .w, .w-narrow { width: min(100% - 32px, 100%); }
  .eb-section-head { margin-bottom: 32px; }
  .btn { height: 44px; padding: 0 18px; }
}