/* =========================================================================
   Toolbench — design family (port of the benchtool restyle)
   Same warm peach / amber / mint tokens, Manrope type, rounded cards.
   Core sections mirror the benchtool restyle verbatim; everything from
   "EXTENSIONS" downward adds what the multi-tool app, admin and installer
   need without leaving the family.
   ========================================================================= */

:root {
  --bg: #f5ebe1;
  --header-h: 80px; /* sticky header height — hero is pulled up this much so its gradient
                       paints behind the transparent navbar from the very first pixel.
                       Must be >= the real header height (~76px desktop) or a cream
                       sliver shows behind the navbar at the very top.                 */
  --surface: #fffcf9;
  --ink: #1c1512;
  --muted: #6f6259;
  --brand: #dd4b32;
  --brand-dark: #c33f28;
  --amber: #f0a83c;
  --mint: #cfe6d4;
  --peach: #fbe0d7;
  --amber-soft: #fdeccc;
  --border: #ece3d9;
  --green-900: #24402d;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px -25px rgba(60, 35, 20, 0.35);
  --shadow-sm: 0 8px 24px -18px rgba(60, 35, 20, 0.4);
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --danger: #c33f28;
  --ok: #2f7d4f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  /* Anchor the sticky header: scroll stop exactly at the bar, so hash links
     (#calculator etc.) land below it, not under it. */
  scroll-padding-top: var(--header-h);
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
pre { margin: 0; }

.wrap {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
.wrap-narrow { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
.wrap-wide { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 60;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-amber { background: var(--amber); color: #3a2a10; }
.btn-amber:hover { background: #e59c2c; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover { background: #f6efe6; }
.btn-soft { background: var(--peach); color: var(--brand-dark); }
.btn-soft:hover { background: #f7d2c2; }
.btn-danger { background: #fde6e1; color: var(--danger); border: 1px solid #f3c9bf; }
.btn-danger:hover { background: #f9d3cb; }
.btn-pill { border-radius: 999px; padding: 11px 22px; }
.btn-block { width: 100%; padding: 15px 22px; font-size: 0.95rem; }
.btn-sm { padding: 8px 14px; font-size: 0.8rem; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- header — transparent over hero, glossy blur on scroll ---------- */
/* At the top the bar is fully transparent — only a LIGHT blur — so the hero's
   warm gradient shows straight through and the navbar genuinely "matches the
   hero design". The hero's own dark top scrim (see .hero::before) gives the
   white text enough contrast to read.                                   */
/* The moment you scroll, app.js adds `.scrolled`: the bar keeps a transparent
   background but steps up to a HEAVIER blur + saturation = "glossy frosted
   glass" over whatever content is behind it (the hero bottom or the light
   page sections). White text + a strong shadow keeps it readable over both.
   There is NO white background and NO solid dark panel at any point.        */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Scrolled: heavier glossy blur, hairline border + soft drop. Still
   transparent — content shows through, frosted.                          */
.site-header.scrolled {
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
              0 4px 22px -14px rgba(0, 0, 0, 0.30);
}

/* White text everywhere; the shadow does the legwork over light sections. */
.site-header .brand,
.site-header .brand-name {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.4);
}
.site-header .brand-mark {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.site-header .nav { color: rgba(255, 255, 255, 0.95); }
.site-header .nav a {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
  transition: color 0.2s ease;
}
.site-header .nav a:hover,
.site-header .nav a.active { color: #fff; }
.site-header .nav-cta.btn-primary {
  background: var(--amber);
  color: #2b1f0a;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.site-header .nav-cta.btn-primary:hover { transform: translateY(-2px); }
.site-header .menu-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}
/* Standalone defaults for .brand/.brand-mark used in footer, admin, installer
   and login (NOT the site-header — those are overridden by .site-header rules
   above, which win on specificity). */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-size: 0.95rem;
}
.brand-name { font-size: 1.1rem; }
.nav { display: flex; gap: 30px; font-size: 0.88rem; font-weight: 600; color: #3d332d; align-items: center; }
.nav-cta { margin-left: 6px; }

.menu-btn {
  display: none;
  border: 1px solid var(--border); background: rgba(255,255,255,0.7); border-radius: 10px;
  width: 40px; height: 40px; cursor: pointer; font-size: 1.1rem; color: var(--ink);
}

/* ---------- breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8rem; color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { opacity: .5; }
.crumbs .cur { color: var(--ink); font-weight: 700; }

/* ---------- hero ---------- */
/* Negative top margin tucks the hero UP under the sticky header so the hero
   gradient paints behind the transparent navbar from the very first pixel
   (not the cream body background). The hero's top padding is bumped by the
   same amount so its content stays exactly where it was before.            */
.hero { position: relative; margin-top: calc(-1 * var(--header-h)); padding: calc(80px + var(--header-h)) 0 120px; overflow: hidden; }
.hero-compact { padding: calc(46px + var(--header-h)) 0 38px; }
/* Dark scrim at the very top of the hero — guarantees the transparent header's
   white text reads off the warm gradient (the hero still shows through, just
   deepened behind the nav). Fades out over ~150px. */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(38, 20, 10, 0.4), rgba(38, 20, 10, 0));
  pointer-events: none;
  z-index: 1;
}
.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-bg {
  position: absolute;
  inset: -120px 0 0;
  background:
    radial-gradient(110% 65% at 50% 0%, #c9b497 0%, #d9c8ae 25%, rgba(250, 243, 234, 0) 70%),
    radial-gradient(85% 55% at 18% 88%, rgba(233, 143, 106, 0.5), transparent 62%),
    radial-gradient(85% 55% at 80% 85%, rgba(226, 128, 96, 0.48), transparent 62%),
    radial-gradient(65% 45% at 15% 12%, rgba(125, 91, 68, 0.6), transparent 58%),
    linear-gradient(180deg, #6f4f3a 0%, #9a7359 22%, #c39779 48%, #e7d9c4 74%, #f5ebe1 92%);
  z-index: -1;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background:
    radial-gradient(58% 100% at 32% 42%, rgba(255, 255, 255, 0.32), transparent 62%),
    radial-gradient(58% 100% at 72% 52%, rgba(255, 255, 255, 0.26), transparent 64%);
  filter: blur(3px);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.hero h1 {
  margin: 22px auto 0;
  max-width: 760px;
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 24px rgba(40, 20, 10, 0.5), 0 1px 2px rgba(40, 20, 10, 0.3);
}
.hero h1 .accent { color: var(--amber); }
.hero-sub {
  margin: 26px auto 0;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
  line-height: 1.7;
  text-shadow: 0 1px 12px rgba(40, 20, 10, 0.35);
}

/* ---------- search box (hero) ---------- */
.search-card {
  margin: 28px auto 0;
  max-width: 620px;
  background: var(--surface);
  border-radius: 999px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px;
  box-shadow: var(--shadow);
}
.search-card svg, .search-card .search-ico { color: var(--muted); flex: 0 0 auto; }
.search-card input {
  flex: 1; border: 0; background: transparent; font: inherit; font-size: 0.95rem;
  color: var(--ink); padding: 8px 0; outline: none;
}
.search-card .btn { border-radius: 999px; }
.search-suggest {
  margin: 14px auto 0; max-width: 620px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.chip {
  font-size: 0.76rem; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.22); color: #fff; border: 1px solid rgba(255,255,255,0.32);
}
.chip:hover { background: rgba(255,255,255,0.34); }

/* ---------- forms / fields ---------- */
.calc-card {
  margin: 0 auto;
  max-width: 760px;
  text-align: left;
  background: var(--surface);
  border-radius: 20px;
  padding: 26px;
  box-shadow: var(--shadow);
}
.calc-card.compact { max-width: 680px; }
.calc-head { margin-bottom: 4px; }
.calc-head .eyebrow { text-align: left; }
.calc-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 8px; }
.calc-desc { margin-top: 8px; color: var(--muted); font-size: 0.9rem; max-width: 60ch; }
.field-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.field-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.82rem; font-weight: 700; }
.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.search-card input:focus {
  outline: 2px solid rgba(221, 75, 50, 0.35);
  outline-offset: 1px;
  border-color: #f0c4b6;
}
.field input[type="color"] { height: 44px; padding: 4px; cursor: pointer; }
.field .hint { font-size: 0.74rem; color: var(--muted); }
.field select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236f6259' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.field-inline { display: flex; align-items: center; gap: 10px; }
.field-inline input { width: auto; }
.form-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.error { margin-top: 12px; color: var(--brand-dark); font-size: 0.85rem; font-weight: 600; }

/* ---------- results / output ---------- */
.results {
  margin-top: 26px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.result-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.result-head h2 { font-size: 0.78rem; letter-spacing: 0.16em; color: var(--brand); text-transform: uppercase; }
.copy-btn {
  font-size: 0.74rem; font-weight: 700; color: var(--brand-dark);
  background: var(--peach); border: 0; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.copy-btn:hover { background: #f6d0bf; }
.output {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fbf6f0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: #2b211c;
  overflow-x: auto;
  /* Independent vertical scroll for lengthy output: the result card stays put
     and only this content area scrolls, instead of pushing the whole page. */
  max-height: 60vh;
  overflow-y: auto;
}
.output.mono { }
.result-html {
  margin-top: 16px;
  /* Same independent-scroll treatment for rendered-HTML tool results. */
  max-height: 60vh;
  overflow-y: auto;
}
.qr { display: block; margin: 8px auto; border-radius: 12px; border: 1px solid var(--border); }

/* ---------- single-tool hero: embedded form + result ---------- */
/* On a single-tool install the form and its result live INSIDE the hero.
   The cream calc-card needs to float on the warm gradient with breathing
   room above and below, anchored under the sub line and visually lifted. */
.hero-inner .calc-card {
  margin: 40px auto 0;
  max-width: 720px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 26px 60px -18px rgba(120, 60, 20, 0.34), 0 2px 8px rgba(120, 60, 20, 0.08);
}
.hero-inner .calc-card .calc-head { text-align: left; }
.hero-inner .calc-card .calc-head .eyebrow {
  color: var(--brand);
  letter-spacing: 0.16em;
  background: transparent;
  padding: 0;
}
.hero-inner .calc-card .calc-head h2 { color: var(--ink); }
.hero-inner .calc-card .calc-desc { color: var(--muted); margin-top: 4px; }

/* On the homepage the hero-sub already carries the description, so hide the
   duplicate description inside the embedded card. tool.php keeps it. */
.hero-inner .calc-card .calc-desc { display: none; }
.hero-inner .calc-card .field-grid { margin-top: 4px; }

/* Result card in the hero sits directly under the form, same width, same lift. */
.hero-inner .results {
  margin: 18px auto 8px;
  max-width: 720px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 18px 40px -16px rgba(120, 60, 20, 0.28);
}
.hero-inner .results .result-head h2 { color: var(--brand); }

/* The hero inner column gets a little trailing room once it carries the card. */
.hero-inner { padding-bottom: 18px; }

/* Result card: expand cleanly and stay readable on every screen. */
.results { width: 100%; margin-inline: auto; }
.results .result-html { line-height: 1.7; }
.results .result-html :first-child { margin-top: 0; }
.results img, .results .qr { max-width: 100%; height: auto; }
.results table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.results th, .results td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.output { max-width: 100%; }

/* Smooth anchor scroll under the sticky header. */
:target, section[id] { scroll-margin-top: 72px; }
.serp {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; max-width: 560px; background: #fff;
  font-family: system-ui, arial;
}
.serp-url { color: #5f6368; font-size: 0.8rem; }
.serp-title { color: #1a0dab; font-size: 1.1rem; margin: 4px 0; }
.serp-desc { color: #4d5156; font-size: 0.82rem; line-height: 1.45; }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: #f9f3eb; }
.eyebrow {
  display: inline-block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--peach);
  padding: 6px 14px;
  border-radius: 999px;
}
.eyebrow.left { text-align: left; }
.section-title {
  margin: 18px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: clamp(1.75rem, 3.8vw, 2.5rem);
  font-weight: 800;
  color: var(--ink);
}
.section-sub {
  margin: 18px auto 0;
  max-width: 580px;
  text-align: center;
  color: #574a40;
  font-size: 0.96rem;
  line-height: 1.65;
}
/* clear air between the intro line ("Fast, private and free…") and the cards/steps */
.section .card-grid,
.section .steps { margin-top: 44px; }
.section-alt .card-grid { margin-top: 40px; }

/* tool category anchor */
.tool-cat { margin-top: 44px; scroll-margin-top: 86px; }
.tool-cat h3 {
  font-size: 1.05rem; display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.tool-cat h3 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.tool-cat-count { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.tool-cat p.cat-desc { color: var(--muted); font-size: 0.84rem; margin-bottom: 16px; max-width: 56ch; }

/* ---------- cards / tool grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #e1d2c2; }
.card.is-link { display: block; }
.icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 16px;
}
.icon-peach { background: var(--peach); }
.icon-amber { background: var(--amber-soft); }
.icon-mint { background: var(--mint); }
.card h3 { font-size: 1rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
.card .card-meta { margin-top: 14px; color: var(--brand); font-size: 0.78rem; font-weight: 700; }
.tool-card { display: flex; flex-direction: column; }
.tool-card .tool-foot { margin-top: auto; padding-top: 12px; }

/* feature / step cards (reused) */
.features .card p { color: var(--muted); }

/* minimalist tonal accents (no emoji icons) */
.features .card { border-top: 3px solid var(--brand); }
.features .card.tone-amber { border-top-color: var(--amber); }
.features .card.tone-mint  { border-top-color: #6fae7e; }
.features .card h3 { margin-top: 2px; }

/* ---------- how-it-works steps ---------- */
.steps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 24px;
}
.step-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
}
.step-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--amber);
}
.step h3 { margin: 0 0 8px; font-size: 1rem; }
.step p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; }

/* ---------- faq ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: start;
}
.faq-intro .eyebrow,
.faq-intro .section-title,
.faq-intro .section-sub { text-align: left; margin-left: 0; }
.faq-intro .btn { margin-top: 22px; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.9rem;
}
.faq summary::-webkit-details-marker { display: none; }
.chev { color: var(--brand); font-size: 1.1rem; line-height: 1; }
.faq details[open] .chev { transform: rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--muted); font-size: 0.85rem; line-height: 1.65; }

/* ---------- cta ---------- */
.cta-section { padding-top: 0; }
.cta-banner {
  border-radius: 20px;
  padding: 56px 24px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(80% 130% at 12% 20%, rgba(0, 0, 0, 0.35), transparent 60%),
    linear-gradient(105deg, #7a3a1c 0%, #c4562a 45%, #e88b3a 100%);
}
.cta-banner h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; }
.cta-banner p {
  margin: 14px auto 24px;
  max-width: 520px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* ---------- footer ---------- */
.site-footer { background: var(--green-900); color: #e6efe7; padding: 56px 0 26px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}
.footer-brand p { margin-top: 16px; font-size: 0.82rem; line-height: 1.7; color: rgba(230, 239, 231, 0.7); max-width: 320px; }
.footer-brand .brand-mark { background: var(--amber); color: #2b1f0a; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-size: 0.7rem; letter-spacing: 0.14em; color: rgba(230, 239, 231, 0.55); margin-bottom: 4px; }
.footer-col a { font-size: 0.85rem; color: rgba(230, 239, 231, 0.85); }
.footer-col a:hover { color: var(--amber); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(230, 239, 231, 0.6);
  gap: 12px;
}
.footer-bottom a { color: var(--amber); }
.socials { display: flex; gap: 14px; }

/* ---------- cookie bar ---------- */
.cookie-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 40; width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
}
.cookie-bar p { font-size: 0.82rem; color: rgba(255,255,255,.85); }
.cookie-bar a { color: var(--amber); text-decoration: underline; }

/* ---------- notices ---------- */
.notice { border-radius: var(--radius-sm); padding: 13px 16px; font-size: 0.86rem; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.notice-ok { background: var(--mint); color: #1f4a2c; }
.notice-err { background: #fde6e1; color: var(--danger); }
.notice-info { background: var(--amber-soft); color: #6b4a13; }
.notice .ico { font-size: 1rem; }

.empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 0.9rem; }

/* =========================================================================
   EXTENSIONS  — wizard, tool bento, admin (same tokens)
   ========================================================================= */

/* wizard / install */
.wiz { max-width: 760px; margin: 0 auto; }
.wiz-stepper { display: flex; gap: 8px; margin: 24px 0 30px; }
.wiz-step { flex: 1; text-align: center; position: relative; }
.wiz-step .num {
  width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 8px;
  display: grid; place-items: center; font-weight: 800; font-size: 0.85rem;
  background: #fff; border: 1px solid var(--border); color: var(--muted);
}
.wiz-step.done .num { background: var(--mint); border-color: #b4d8bb; color: #1f4a2c; }
.wiz-step.active .num { background: var(--brand); border-color: var(--brand); color: #fff; }
.wiz-step .label { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.wiz-step.active .label { color: var(--ink); }
.wiz-step::after {
  content: ""; position: absolute; top: 18px; right: -50%; height: 2px; width: 100%;
  background: var(--border); z-index: -1;
}
.wiz-step:last-child::after { display: none; }
.wiz-step.done::after { background: var(--mint); }

.wiz-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 30px; box-shadow: var(--shadow);
}
.wiz-card h2 { font-size: 1.3rem; margin-bottom: 6px; }
.wiz-card .lead { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }
.wiz-check { display: grid; gap: 10px; }
.wiz-check .row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fbf6f0; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px;
}
.wiz-check .row .name { font-weight: 700; font-size: 0.88rem; }
.wiz-check .row .stat { font-size: 0.8rem; font-weight: 700; }
.wiz-check .ok { color: var(--ok); }
.wiz-check .bad { color: var(--danger); }
.wiz-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.wiz-tab {
  flex: 1; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; font: inherit; font-weight: 700; text-align: left;
}
.wiz-tab.on { border-color: var(--brand); background: var(--peach); color: var(--brand-dark); }
.wiz-success { text-align: center; }
.wiz-success .big { font-size: 3rem; }
.wiz-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }

/* tool bento (home hero category quick picks) not required; reused card-grid */

/* admin */
.admin-shell { display: grid; grid-template-columns: 248px 1fr; gap: 0; min-height: 100vh; background: var(--bg); }
.admin-side {
  background: var(--green-900); color: #e6efe7; padding: 26px 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-side .brand { color: #fff; margin-bottom: 26px; }
.admin-side .brand-mark { background: var(--amber); color: #2b1f0a; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.admin-nav a {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 10px;
  color: rgba(230,239,231,0.82); font-size: 0.88rem; font-weight: 600;
}
.admin-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav a.active { background: rgba(240,168,60,0.18); color: var(--amber); }
.admin-nav .sep { height: 1px; background: rgba(255,255,255,0.12); margin: 14px 4px; }
.admin-side .who { margin-top: auto; padding-top: 18px; font-size: 0.78rem; color: rgba(230,239,231,0.6); }

.admin-main { padding: 28px 32px 60px; min-width: 0; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.admin-topbar h1 { font-size: 1.5rem; }
.admin-topbar .sub { color: var(--muted); font-size: 0.86rem; margin-top: 3px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
}
.stat-card .stat-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat-card b { font-size: 1.9rem; font-weight: 800; display: block; margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat-card .trend { font-size: 0.74rem; color: var(--ok); margin-top: 6px; }

.admin-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
  margin-top: 22px;
}
.admin-card h2 { font-size: 1.1rem; }
.admin-card .card-actions { float: right; }

/* ---------- admin content editor: per-item labeled rows ---------- */
/* Friendly labeled blocks for Features / Steps / FAQ instead of raw
   pipe-delimited textarea syntax. Add/remove via JS (see app.js).          */
.tb-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.tb-row {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 14px 12px; background: #fbf6f0;
}
.tb-row-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.tb-row-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 0.72rem; font-weight: 800;
}
.tb-remove {
  border: 0; border-radius: 999px; cursor: pointer;
  width: 26px; height: 26px; font-size: 1.05rem; line-height: 1;
  color: var(--danger); background: #fff; border: 1px solid var(--border);
}
.tb-remove:hover { background: #fde3dd; border-color: #f3b6a8; }
.tb-row-moves { display: inline-flex; gap: 4px; }
.tb-move {
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  width: 26px; height: 26px; font-size: 0.9rem; line-height: 1;
  color: var(--muted, #8a7d72); background: #fff; padding: 0;
}
.tb-move:hover { background: #f4ece4; border-color: #e3d2c2; }
.tb-move:disabled { opacity: .35; cursor: default; }
.tb-tone-wrap { max-width: 200px; }
.tb-add { margin-top: 14px; }
.tb-add:hover { transform: none; }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .grow { flex: 1; }
.toolbar input, .toolbar select { padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; font: inherit; font-size: 0.88rem; }
.toolbar input { min-width: 200px; }

.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th, .table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fcf8f3; }
.table .muted { color: var(--muted); }
.table .num-cell { font-variant-numeric: tabular-nums; font-weight: 700; }

.pill { font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.04em; }
.pill-on { background: var(--mint); color: #1f4a2c; }
.pill-off { background: #f1e7df; color: var(--muted); }
.pill-cat { background: var(--peach); color: var(--brand-dark); }

/* switch toggle */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: #e0d2c5; border-radius: 999px; transition: background .15s; }
.switch .track::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::before { transform: translateX(18px); }
.switch input:disabled + .track { opacity: .5; }

.simple-form { max-width: 560px; }
.form-row { display: grid; gap: 16px; margin-bottom: 16px; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.help { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

/* mini auth screen */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 18px; }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 32px; box-shadow: var(--shadow); }
.auth-card .brand { justify-content: center; margin-bottom: 18px; }
.auth-card h1 { font-size: 1.4rem; text-align: center; }
.auth-card .lead { text-align: center; color: var(--muted); font-size: 0.86rem; margin: 6px 0 24px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: grid; place-items: center; }
  .nav.open {
    display: flex; position: absolute; top: 64px; left: 20px; right: 20px; flex-direction: column; gap: 6px;
    background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow);
  }
  .nav.open a { padding: 10px 12px; border-radius: 8px; }
  .nav.open a:hover { background: #f6efe6; }
  .card-grid, .steps { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: sticky; top: 0; height: auto; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-nav a { flex: 1 1 auto; }
  .admin-side .who, .admin-nav .sep { display: none; }
  .pages-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .field-grid.cols-2, .field-grid.cols-3, .card-grid, .steps, .stat-grid, .footer-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .admin-main { padding: 20px 16px 50px; }
  .table { font-size: 0.82rem; }
  .form-row.cols-2 { grid-template-columns: 1fr; }
  .tools-table thead { display: none; }
  .tools-table tr { display: block; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 8px 10px; }
  .tools-table td { display: flex; justify-content: space-between; border: 0; padding: 6px 4px; }
  .tools-table td::before { content: attr(data-l); color: var(--muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

  /* single-tool hero: keep the embedded card comfortable on small screens */
  .hero { padding: 56px 0 72px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); margin-top: 16px; }
  .hero-sub { margin-top: 20px; font-size: 0.92rem; }
  .hero-inner .calc-card,
  .hero-inner .results { max-width: 100%; margin-left: 0; margin-right: 0; }
  .hero-inner .calc-card { padding: 18px; border-radius: 16px; }
  .hero-inner .results { padding: 18px; border-radius: 16px; margin-top: 14px; }
  .calc-card .form-actions { flex-direction: column; }
  .calc-card .form-actions .btn { width: 100%; }
  .steps { gap: 14px; }
  .step { padding: 18px; }
  .faq-layout { gap: 24px; }
  .cta-banner { padding: 40px 18px; }
}

/* utility */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.muted { color: var(--muted); }
.hide { display: none !important; }
.prose { line-height: 1.7; color: #2b211c; }
.prose h1 { font-size: 1.85rem; margin: 30px 0 12px; }
.prose h2 { font-size: 1.5rem; margin: 28px 0 10px; }
.prose h3 { font-size: 1.15rem; margin: 22px 0 8px; }
.prose h4 { font-size: 1rem; margin: 18px 0 6px; }
.prose p { margin: 10px 0; color: var(--muted); }
.prose ul, .prose ol { margin: 10px 0; padding-left: 22px; color: var(--muted); }
.prose ul li, .prose ol li { margin: 4px 0; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose strong { color: var(--ink); }
.prose em { font-style: italic; }
.prose code { background: #f1e7df; padding: 1px 6px; border-radius: 6px; font-family: var(--mono); font-size: 0.85em; }
.prose pre { background: #1c1512; color: #f3ece3; padding: 16px 18px; border-radius: var(--radius-sm); overflow-x: auto; margin: 12px 0; }
.prose pre code { background: transparent; padding: 0; color: inherit; }
.prose blockquote { margin: 12px 0; padding: 6px 16px; border-left: 3px solid var(--amber); color: var(--muted); background: var(--amber-soft); border-radius: 0 8px 8px 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.prose img { border-radius: var(--radius-sm); margin: 12px 0; }
.prose table { margin: 12px 0; }

/* Static page head: H1 + author/date byline (SEO audit fixes). */
.page-head { margin: 0 0 22px; }
.page-title { font-size: clamp(1.7rem, 4.5vw, 2.3rem); line-height: 1.15; color: var(--ink); }
.byline { margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; }
.byline .byline-author { color: var(--brand); font-weight: 600; }