/* ============================================================
   Revectora — design system v4
   A white, minimal, Apple-inspired field: huge quiet whitespace,
   large confident type, soft elevation instead of heavy borders,
   and a single warm accent spent only where it counts.
   ============================================================ */

:root{
  --bg: #ffffff;
  --bg-deep: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --rule: #e5e5e7;
  --rule-strong: #d2d2d7;
  --accent: #e85a4f;
  --accent-deep: #c54d43;
  --accent-tint: #fdeeec;
  --pass: #1f8a4c;
  --warn: #b8750a;
  --fail: #d13a2e;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --max: 1180px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px -14px rgba(0,0,0,.10);
  --shadow-card-hover: 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -20px rgba(0,0,0,.16);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

/* Dark theme: applied automatically from the OS preference, and always
   applied explicitly once a visitor picks a theme with the header toggle
   (the inline script in <head> sets data-theme before first paint, so
   there's no flash of the wrong theme on load). True-black Apple dark
   mode: surfaces step up from pure black rather than tinting warm. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg: #000000;
    --bg-deep: #0a0a0b;
    --surface: #1c1c1e;
    --ink: #f5f5f7;
    --ink-soft: #a1a1a6;
    --ink-faint: #6e6e73;
    --rule: #2c2c2e;
    --rule-strong: #3a3a3c;
    --accent: #ff6b5f;
    --accent-deep: #ff8178;
    --accent-tint: #2a1a18;
    --pass: #30d158;
    --warn: #ffb340;
    --fail: #ff6961;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-card-hover: 0 1px 2px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.7);
  }
}
html[data-theme="dark"]{
  --bg: #000000;
  --bg-deep: #0a0a0b;
  --surface: #1c1c1e;
  --ink: #f5f5f7;
  --ink-soft: #a1a1a6;
  --ink-faint: #6e6e73;
  --rule: #2c2c2e;
  --rule-strong: #3a3a3c;
  --accent: #ff6b5f;
  --accent-deep: #ff8178;
  --accent-tint: #2a1a18;
  --pass: #30d158;
  --warn: #ffb340;
  --fail: #ff6961;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-card-hover: 0 1px 2px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.7);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1;
}

/* Soft elevation shared by every card-like surface, instead of a heavy
   outline — the Apple-style "card floats on the page" look. */
.tool-card, .problem-card, .portfolio-card, .step, .price-card,
.result-panel, .hero-panel, .path-card, .quote-card, .founder-card,
.addon-card, .order-summary-card, .next-steps-card, .cp-swatch,
.dropzone, .lightbox-box{
  box-shadow: var(--shadow-card);
}
img{ max-width: 100%; display: block; }
a{ color: var(--ink); text-underline-offset: 3px; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* registration-mark decoration retired in v3; kept as a no-op so
   existing markup in build.py needs no edits. */
.regmark{ display: none; }

/* ---------- header ---------- */
.site-header{
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 40;
}
.site-header .wrap{
  display: flex; align-items: center; justify-content: space-between;
  height: 52px;
}
.brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.brand-logo{
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand small{
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--ink-faint);
  font-weight: 600;
  letter-spacing: .11em;
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--rule-strong);
  align-self: center;
  white-space: nowrap;
}
@media (max-width: 480px){ .brand small{ display: none; } }
.nav-main{
  display: flex; gap: 28px; align-items: center;
}
.nav-main a{
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -.003em;
}
.nav-main a:hover, .nav-main a.active{ color: var(--ink); }
.nav-cta{
  background: var(--ink);
  color: var(--bg) !important;
  padding: 7px 16px;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 999px;
}
.nav-cta:hover{ background: var(--accent-deep); }
.header-actions{ display: flex; align-items: center; gap: 8px; }
.theme-toggle, .nav-toggle{
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm);
  width: 32px; height: 32px; cursor: pointer; color: var(--ink-soft); flex-shrink: 0;
}
.nav-toggle{ display: none; }
.theme-toggle:hover{ color: var(--ink); }
.theme-toggle svg{ width: 16px; height: 16px; }
.theme-icon-moon{ display: block; }
.theme-icon-sun{ display: none; }
html[data-theme="dark"] .theme-icon-moon{ display: none; }
html[data-theme="dark"] .theme-icon-sun{ display: block; }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .theme-icon-moon{ display: none; }
  html:not([data-theme="light"]) .theme-icon-sun{ display: block; }
}
@media (max-width: 860px){
  .nav-main{
    position: absolute; top: 52px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 24px 18px; display: none;
  }
  .nav-main.open{ display: flex; }
  .nav-main a{ padding: 14px 0; width: 100%; border-bottom: 1px solid var(--rule); font-size: 15px; }
  .nav-cta{ margin-top: 12px; text-align: center; padding: 12px 18px; font-size: 14px !important; }
  .nav-toggle{ display: flex; }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  letter-spacing: -.005em;
  padding: 13px 25px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--ink); color: var(--bg); }
.btn-primary:hover{ background: var(--accent-deep); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-cyan{ background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.btn-cyan:hover{ border-color: var(--ink); }
.btn-block{ width: 100%; justify-content: center; }
.btn[disabled]{ opacity: .5; cursor: not-allowed; }

/* ---------- type ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 16px;
}
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.07;
  margin: 0 0 .4em;
  letter-spacing: -.03em;
  color: var(--ink);
}
h1{ font-size: clamp(32px, 4.8vw, 60px); letter-spacing: -.04em; }
h2{ font-size: clamp(30px, 3.8vw, 44px); }
h3{ font-size: 22px; letter-spacing: -.015em; }
p{ margin: 0 0 1em; color: var(--ink-soft); max-width: 62ch; }
.lede{ font-size: 20px; color: var(--ink-soft); max-width: 54ch; line-height: 1.55; font-weight: 400; margin-left: auto; margin-right: auto; }
.mono{ font-family: var(--font-mono); }
/* Eyebrow kickers are a single short line and should never pick up the
   paragraph readability cap above -- that cap was silently shrink-wrapping
   it to ~62ch, which threw off center-aligned eyebrows. */
.eyebrow{ max-width: none; }

/* ---------- sections ---------- */
section{ padding: 68px 0; }
section.tight{ padding: 40px 0; }
.section-deep{ background: var(--bg-deep); }
.rule{ border: none; border-top: 1px solid var(--rule); margin: 0; }
.section-head{ max-width: 640px; margin: 0 auto 32px; text-align: center; }
.section-head--wide{ max-width: var(--max); }
.section-head--wide .lede{ max-width: none; }
@media (max-width: 760px){ section{ padding: 44px 0; } }

/* ---------- hero ---------- */
/* A centered, stacked Apple-product hero: huge headline and copy centered
   in a narrow column, then a wide floating "screenshot" panel below it,
   rather than a two-column SaaS split. */
.hero{
  padding: 52px 0 48px;
  border-bottom: none;
  overflow: hidden;
}
.hero-stack{ display: flex; flex-direction: column; align-items: center; }
.hero-copy{ max-width: 680px; text-align: center; }
.hero-copy .eyebrow{ justify-content: center; }
.hero-copy h1{ font-size: clamp(36px, 6vw, 70px); }
.hero-copy .lede{ max-width: 100%; margin: 14px auto 0; font-size: 20px; }
.hero-actions{ display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.hero-note{ font-size: 13px; color: var(--ink-faint); margin-top: 14px; }
.deliver-bar-section{ background: #000000; border-bottom: none; }
.deliver-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.deliver-label{ font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.deliver-formats{ font-family: var(--font-mono); font-size: 14px; color: #ffffff; letter-spacing: .01em; }
@media (max-width: 640px){ .deliver-bar{ flex-direction: column; gap: 6px; } }
.hero-panel{
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17,18,20,.05), 0 32px 56px -24px rgba(17,18,20,.30);
  max-width: 460px;
  width: 100%;
  margin: 56px auto 0;
}
.hero-panel-title{
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6);
  padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  background: #000000;
}
.hero-panel-dots{ display: flex; gap: 5px; }
.hero-panel-dots i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); display: block; }
.hero-panel-name{
  font-family: var(--font-mono); color: #ffffff; font-weight: 600;
  letter-spacing: .01em; margin-right: auto;
}
.hero-panel-tag{
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  background: var(--accent); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.hero-panel-body{ padding: 6px 0; }
.hero-panel-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; font-size: 13.5px;
}
.hero-panel-row + .hero-panel-row{ border-top: 1px solid var(--rule); }
.hero-panel-row .k{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: .02em; }
.hero-panel-row .v{ font-weight: 600; font-family: var(--font-mono); font-size: 13px; }
.hero-panel-row .v-pass{ color: var(--pass); font-weight: 600; }
.hero-panel-row .v-warn{ color: var(--warn); font-weight: 600; }
.hero-panel-footer{
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 16px; background: var(--accent-tint);
  border-top: 1px solid var(--rule);
}
.hero-panel-footer .k{ font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--accent-deep); }
.hero-panel-footer .v{ font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; }
@media (max-width: 640px){
  .hero{ padding-top: 40px; }
}

/* ---------- problem list ---------- */
/* An editorial, borderless list instead of equal bordered cards: each
   complaint is a quote plus answer separated by a thin rule, read top to
   bottom like a short piece of writing rather than scanned as a grid. */
.problem-grid{
  display: flex; flex-direction: column; max-width: 800px; margin: 0 auto;
}
.problem-card{
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: baseline;
  padding: 30px 0; border-top: 1px solid var(--rule);
}
.problem-grid > .problem-card:last-child{ border-bottom: 1px solid var(--rule); }
.problem-card .quote{ font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; margin: 0; }
.problem-card p:not(.quote){ font-size: 15.5px; margin: 0; }
@media (max-width: 700px){
  .problem-card{ grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- tool cards ---------- */
.tool-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tool-card{
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 28px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tool-card:hover{ border-color: var(--rule-strong); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.tool-card .num{ font-family: var(--font-mono); color: var(--accent-deep); font-size: 13px; font-weight: 600; }
.tool-card h3{ margin: 0; }
.tool-card p{ font-size: 14.5px; margin: 0; }
.tool-card .go{ margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 860px){ .tool-grid{ grid-template-columns: 1fr; } }
/* Homepage teaser variant: soft tinted tiles instead of white bordered
   cards, closer to Apple's colored feature tiles than a SaaS card grid. */
.tool-grid.is-tiles{ grid-template-columns: repeat(3, 1fr); }
.tool-grid.is-tiles .tool-card{
  background: var(--bg-deep); border: none; padding: 32px;
}
.tool-grid.is-tiles .tool-card:hover{ box-shadow: none; transform: translateY(-4px); background: var(--rule); }
@media (max-width: 860px){ .tool-grid.is-tiles{ grid-template-columns: 1fr; } }

/* ---------- portfolio (before/after) ---------- */
.portfolio-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.portfolio-card{
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.portfolio-card:hover{
  border-color: var(--rule-strong); transform: translateY(-4px); box-shadow: var(--shadow-card-hover);
}
.portfolio-tag{ display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--accent-deep); margin-bottom: 8px; }
.portfolio-card p:not(.portfolio-tag){ font-size: 14.5px; margin: 0; }
.portfolio-source{ display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--accent-deep); }
.portfolio-expand{
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin: 12px 0 16px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; font-family: inherit;
  color: var(--ink-soft); background: var(--bg-deep); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
}
.portfolio-expand:hover, .portfolio-expand:focus-visible{ color: var(--accent-deep); border-color: var(--accent); }
@media (max-width: 800px){ .portfolio-grid{ grid-template-columns: 1fr; } }

/* ---------- drag-to-compare slider ---------- */
.compare-slider{
  position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); background: var(--bg-deep); cursor: ew-resize; touch-action: pan-y; user-select: none;
}
.compare-img-after{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.compare-before-wrap{ position: absolute; inset: 0; width: 50%; height: 100%; overflow: hidden; }
.compare-before-wrap .compare-img-before{
  position: absolute; top: 0; left: 0; height: 100%; max-width: none;
  object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none;
}
.compare-handle{
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0; transform: translateX(-50%);
  border-left: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none;
}
.compare-handle-btn{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
}
.compare-slider.is-dragging .compare-handle-btn{ transform: translate(-50%, -50%) scale(1.08); }
.compare-label{
  position: absolute; top: 10px; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--bg);
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  pointer-events: none;
}
.compare-label-before{ left: 10px; }
.compare-label-after{ right: 10px; }
.compare-slider-lg{ max-height: 74vh; }
@media (max-width: 700px){ .compare-slider-lg{ max-height: 60vh; } }

/* ---------- portfolio lightbox ---------- */
.lightbox-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.lightbox-overlay.open{ opacity: 1; pointer-events: auto; }
.lightbox-box{
  background: var(--surface); border-radius: var(--radius);
  padding: 28px; max-width: 760px; width: 100%; max-height: 90vh; overflow-y: auto;
  position: relative;
}
.lightbox-close{
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}
#lightbox-slider-slot{ margin-bottom: 18px; }

/* ---------- homepage process slider (peeking coverflow carousel) ---------- */
.process-slider-section{ border-bottom: 1px solid var(--rule); overflow: hidden; }
.process-slider-wrap{ text-align: center; }
.process-slider-wrap .eyebrow{ justify-content: center; }
.process-slider-wrap .lede{ margin: 0 auto 28px; }
.process-slider-section .lede{ margin-bottom: 28px; }
.process-slider{ width: 100%; max-width: 760px; margin: 0 auto; }
.process-tabs{
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; justify-content: center;
}
.process-tab{
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.process-tab:hover{ color: var(--ink); border-color: var(--rule-strong); }
.process-tab.is-active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.process-carousel{
  position: relative; height: clamp(320px, 40vw, 460px);
  cursor: grab; touch-action: pan-y; user-select: none;
}
.process-carousel:active{ cursor: grabbing; }
.process-card{
  position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 0.707;
  margin-left: calc(min(340px, 76vw) / -2); width: min(340px, 76vw);
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule-strong);
  background: var(--bg-deep); box-shadow: 0 1px 2px rgba(17,18,20,.05), 0 32px 56px -24px rgba(17,18,20,.35);
  transition: transform .38s cubic-bezier(.2,.7,.3,1), opacity .38s ease;
}
.process-carousel.is-dragging .process-card{ transition: none; }
.process-img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.process-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 200;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -12px rgba(17,18,20,.35); transition: opacity .15s ease, transform .15s ease;
}
.process-arrow:hover{ color: var(--accent-deep); border-color: var(--accent); }
.process-arrow:disabled{ opacity: 0; pointer-events: none; }
.process-arrow-prev{ left: 4%; }
.process-arrow-next{ right: 4%; }
@media (max-width: 640px){ .process-arrow{ display: none; } }
.process-drag-hint{
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--bg);
  padding: 6px 14px; border-radius: 999px; pointer-events: none; transition: opacity .2s ease;
}
.process-carousel.is-dragging .process-drag-hint{ opacity: 0; }
.process-dots{ display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.process-dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); border: none; padding: 0; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.process-dot.is-active{ background: var(--accent); transform: scale(1.3); }
.process-note{ font-size: 13px; color: var(--ink-faint); max-width: 56ch; margin: 20px auto 0; text-align: center; }
.process-note a{ color: var(--accent-deep); font-weight: 600; }

/* ---------- testimonials ---------- */
.quote-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quote-card{ background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; }
.quote-card .stars{ color: var(--accent); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.quote-text{ font-size: 15px; color: var(--ink); margin: 0 0 14px; font-style: italic; }
.quote-meta{ font-size: 12.5px; color: var(--ink-faint); margin: 0; }
@media (max-width: 760px){ .quote-grid{ grid-template-columns: 1fr; } }

/* ---------- two-path (one-time vs subscription) ---------- */
.path-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.path-card{
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 34px;
  position: relative;
}
.path-card.is-featured{ border-color: var(--ink); box-shadow: 0 24px 48px -28px rgba(17,18,20,.28); }
.path-tag{
  position: absolute; top: -13px; left: 30px;
  background: var(--ink); color: var(--bg);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 12px; letter-spacing: -.005em; border-radius: 999px;
}
.path-price{ font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; margin: 16px 0 4px; }
.path-price span{ font-family: var(--font-body); font-size: 14.5px; color: var(--ink-faint); font-weight: 500; letter-spacing: 0; }
.path-list{ list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.path-list li{ font-size: 14.5px; padding-left: 22px; position: relative; color: var(--ink-soft); }
.path-list li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 800px){ .path-grid{ grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step{
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 26px 22px; position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.step:hover{ transform: translateY(-4px); border-color: var(--rule-strong); box-shadow: var(--shadow-card-hover); }
.step-icon{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-tint); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.step-icon-svg{ width: 21px; height: 21px; color: var(--accent-deep); }
.step .n{ font-family: var(--font-mono); color: var(--ink-faint); font-size: 11.5px; font-weight: 600; letter-spacing: .07em; }
.step h4{ margin: 6px 0 6px; font-size: 18px; }
.step p{ font-size: 14px; margin: 0; }
@media (max-width: 860px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .steps{ grid-template-columns: 1fr; } }

/* ---------- how-it-works timeline ---------- */
.timeline{ position: relative; display: flex; flex-direction: column; }
.timeline::before{
  content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px;
  width: 2px; background: var(--rule);
}
.timeline-item{ position: relative; display: flex; gap: 24px; padding: 30px 0; }
.timeline-item:not(:last-child){ border-bottom: 1px solid var(--rule); }
.timeline-icon{
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 2px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.timeline-icon .step-icon-svg{ width: 24px; height: 24px; color: var(--accent-deep); }
.timeline-content .n{ font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent-deep); }
.timeline-content h4{ margin: 6px 0 8px; font-size: 20px; }
.timeline-content p{ font-size: 15px; max-width: 62ch; margin: 0; }
@media (max-width: 640px){
  .timeline::before{ left: 22px; }
  .timeline-item{ gap: 16px; }
  .timeline-icon{ width: 44px; height: 44px; }
  .timeline-icon .step-icon-svg{ width: 20px; height: 20px; }
}

/* ---------- trust ---------- */
.trust-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: center; }
.trust-item{ padding: 4px 0; }
.trust-item h4{ font-size: 17px; margin-bottom: 8px; letter-spacing: -.01em; }
.trust-item p{ font-size: 14.5px; margin-left: auto; margin-right: auto; }

/* ---------- founder / credibility ---------- */
.founder-card{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 40px; max-width: 640px; margin: 0 auto;
}
.founder-mark{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 20px;
}
.founder-mark svg{ width: 24px; height: auto; }
.founder-mark .fil0, .founder-mark .fil3{ fill: var(--bg) !important; }
.founder-mark .fil1, .founder-mark .fil2{ fill: var(--accent) !important; }
.founder-photo{
  width: 96px; height: 96px; border-radius: 50%;
  flex-shrink: 0; margin-bottom: 20px; object-fit: cover;
  border: 1px solid var(--rule-strong);
}
.founder-name{ font-size: 13.5px; font-weight: 600; color: var(--ink-faint); letter-spacing: .02em; margin: -4px 0 14px; }
.founder-card h3{ font-size: 20px; margin-bottom: 10px; letter-spacing: -.01em; }
.founder-card p{ font-size: 15px; color: var(--ink-soft); max-width: 56ch; margin-left: auto; margin-right: auto; }
.stat-row{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: center; }
.stat-pill{
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 7px 14px;
}
@media (max-width: 800px){ .trust-grid{ grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq-item{ border-bottom: 1px solid var(--rule); padding: 22px 0; }
.faq-item summary{
  cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: "+"; color: var(--ink-faint); font-size: 20px; font-weight: 400; }
.faq-item[open] summary::after{ content: "\2212"; }
.faq-item p{ margin-top: 12px; font-size: 15px; }

/* ---------- footer ---------- */
.site-footer{ border-top: 1px solid var(--rule); background: var(--bg-deep); padding: 32px 0 20px; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.footer-grid h5{ font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-faint); margin: 0 0 16px; }
.footer-grid ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a{ color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.footer-grid a:hover{ color: var(--ink); }
.footer-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--rule); padding-top: 24px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- generic page header (non-home) ---------- */
.page-hero{ padding: 44px 0 32px; border-bottom: none; text-align: center; }
.page-hero .wrap{ max-width: 760px; }
.page-hero .lede{ margin-top: 12px; max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ---------- tool page ---------- */
.tool-shell{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px){ .tool-shell{ grid-template-columns: 1fr; } }

.dropzone{
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover{ border-color: var(--ink-faint); }
.dropzone.dragover{ border-color: var(--accent); background: var(--accent-tint); }
.dropzone input{ display: none; }
.dropzone .dz-icon{ font-size: 26px; color: var(--ink-faint); margin-bottom: 12px; }
.dropzone p{ margin: 0; font-size: 14.5px; }
.dropzone .dz-sub{ font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

.result-panel{
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px;
  min-height: 200px;
}
.result-empty{ color: var(--ink-faint); font-size: 14.5px; }
.result-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  font-size: 14.5px; gap: 12px;
}
.result-row:last-child{ border-bottom: none; }
.result-row .k{ color: var(--ink-soft); }
.result-row .v{ font-weight: 600; text-align: right; }
.badge{
  font-size: 12.5px; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; display: inline-block;
}
.badge-pass{ background: rgba(47,107,70,.12); color: var(--pass); }
.badge-warn{ background: rgba(145,106,31,.12); color: var(--warn); }
.badge-fail{ background: rgba(165,55,44,.12); color: var(--fail); }

.field{ margin-bottom: 18px; }
.field label{ display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select, .field textarea{
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--rule-strong); background: var(--surface);
  color: var(--ink); border-radius: var(--radius-sm); font-family: var(--font-body);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--ink); outline: none; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }

/* ---------- get-started: rich order form + sidebar ---------- */
.get-started-shell{ display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 900px){ .get-started-shell{ grid-template-columns: 1fr; } }

/* Note: these option labels live inside a .field wrapper, and the generic
   ".field label{ display:block; ... }" rule (above) has higher specificity
   than a single class selector like ".service-option" — it would silently
   win and collapse the flex layout back to a block. Every selector below is
   scoped through its ancestor wrapper class (".service-options .service-option")
   so it always overrides that generic rule. */
.service-options{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.service-options .service-option{
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  background: var(--surface); padding: 12px 14px; cursor: pointer; font-size: 13.5px;
  font-weight: 400; margin-bottom: 0;
  transition: border-color .12s ease, background .12s ease;
}
.service-options .service-option input{ position: absolute; opacity: 0; width: 0; height: 0; }
.service-options .service-option .so-name{ font-weight: 600; }
.service-options .service-option .so-price{ font-size: 12px; font-weight: 500; color: var(--ink-faint); white-space: nowrap; }
.service-options .service-option:hover{ border-color: var(--ink-faint); }
.service-options .service-option:has(input:checked){ border-color: var(--ink); background: var(--accent-tint); }
.service-options .service-option:has(input:checked) .so-price{ color: var(--accent-deep); }
@media (max-width: 560px){ .service-options{ grid-template-columns: 1fr; } }

.turnaround-options{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.turnaround-options .turnaround-option{
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  background: var(--surface); padding: 14px 8px; cursor: pointer; text-align: center;
  font-weight: 400; margin-bottom: 0;
}
.turnaround-options .turnaround-option input{ position: absolute; opacity: 0; width: 0; height: 0; }
.turnaround-options .turnaround-option .to-name{ display: block; font-size: 13.5px; font-weight: 600; }
.turnaround-options .turnaround-option .to-sub{ display: block; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.turnaround-options .turnaround-option:hover{ border-color: var(--ink-faint); }
.turnaround-options .turnaround-option:has(input:checked){ border-color: var(--ink); background: var(--accent-tint); }
.turnaround-options .turnaround-option:has(input:checked) .to-sub{ color: var(--accent-deep); }
@media (max-width: 560px){ .turnaround-options{ grid-template-columns: repeat(3, 1fr); gap: 6px; } }

.format-options{ display: flex; flex-wrap: wrap; gap: 8px; }
.format-options .format-chip{
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface);
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 0;
}
.format-options .format-chip input{ position: absolute; opacity: 0; width: 0; height: 0; }
.format-options .format-chip:hover{ border-color: var(--ink-faint); }
.format-options .format-chip:has(input:checked){ border-color: var(--ink); background: var(--ink); color: var(--bg); }

.order-sidebar{ display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.order-summary-card{
  border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--surface); padding: 22px;
}
.order-summary-card h4{ font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.order-total{ font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.order-summary-card .small{ margin: 0; }
.next-steps-card{ border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 22px; }
.next-steps-card h4{ font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.next-steps{ margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.next-steps li{ font-size: 13.5px; color: var(--ink-soft); padding-left: 4px; }
.trust-badges{ display: flex; flex-direction: column; gap: 10px; }
.trust-badge{
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 10px 12px;
}
@media (max-width: 900px){ .order-sidebar{ position: static; } }

.note-box{
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 16px 18px; font-size: 13.5px; color: var(--ink-soft); margin-top: 20px;
}
.note-box.warn{ border-left-color: var(--warn); }

/* ---------- print readiness scanner ---------- */
.scan-score{ text-align: center; padding: 6px 0 22px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.scan-score-num{ font-family: var(--font-display); font-size: 52px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.scan-score-num.pass{ color: var(--pass); }
.scan-score-num.warn{ color: var(--warn); }
.scan-score-num.fail{ color: var(--fail); }
.scan-score-max{ font-size: 16px; font-weight: 500; color: var(--ink-faint); }
.scan-score-label{ margin-top: 8px; }
.scan-check{ padding: 14px 0; border-bottom: 1px solid var(--rule); }
.scan-check:last-child{ border-bottom: none; }
.scan-check-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.scan-check-name{ font-weight: 600; font-size: 14.5px; }
.scan-check-note{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.scan-check.na .scan-check-note{ color: var(--ink-faint); }
.badge-na{ background: var(--rule); color: var(--ink-faint); }

table.spec-table{ width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.spec-table th, table.spec-table td{ text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--rule); }
table.spec-table th{ font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }

/* ---------- color picker for print tool ---------- */
.cp-canvas-wrap{ margin-top: 20px; }
.cp-canvas-wrap canvas{
  width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
  border: 1px solid var(--rule-strong); cursor: crosshair; background: var(--bg-deep);
}
.cp-palette-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cp-swatch{
  border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
.cp-swatch-block{ height: 72px; width: 100%; }
.cp-swatch-body{ padding: 12px 14px 14px; }
.cp-swatch-title{ font-weight: 600; font-size: 13.5px; margin: 0 0 8px; }
.cp-copy-row{
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--rule); padding: 7px 0;
  font-family: var(--font-mono); font-size: 12.5px; cursor: pointer; text-align: left; color: var(--ink);
}
.cp-copy-row:last-of-type{ border-bottom: none; }
.cp-copy-row .k{ color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.cp-copy-row .v{ font-weight: 600; }
.cp-copy-row.copied .v{ color: var(--accent-deep); }
.cp-pantone{ font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.cp-gamut-warn{ font-size: 12px; color: var(--warn); margin-top: 8px; line-height: 1.4; }

/* ---------- type-in color tools (Pantone finder, CMYK converter) ---------- */
.mode-switch{ display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; }
.mode-btn{
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: none; border: none; border-radius: 999px; padding: 7px 16px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mode-btn.is-active{ background: var(--ink); color: var(--bg); }
.pf-swatch-preview{ height: 56px; border-radius: var(--radius-sm); margin-top: 20px; border: 1px solid var(--rule); }

/* ---------- pricing table ---------- */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-card{ border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 24px; position: relative; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.price-card:hover{ border-color: var(--rule-strong); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.price-card.is-popular{ border-color: var(--ink); }
.price-icon{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-tint); display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; flex-shrink: 0;
}
.price-icon .step-icon-svg{ width: 19px; height: 19px; color: var(--accent-deep); }
.price-card h4{ margin: 0 0 6px; font-size: 16.5px; letter-spacing: -.01em; }
.price-card .amt{ font-family: var(--font-display); font-weight: 700; font-size: 30px; margin: 8px 0; letter-spacing: -.02em; }
.price-card p{ font-size: 13.5px; margin: 0; }
.price-list{ list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.price-list li{ font-size: 13px; color: var(--ink-soft); padding-left: 17px; position: relative; }
.price-list li::before{ content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.price-exclude{ margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--rule); font-size: 12px; color: var(--ink-faint); }
.price-exclude strong{ color: var(--ink-soft); font-weight: 600; }
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pricing-grid{ grid-template-columns: 1fr; } }

.addon-card{
  display: flex; gap: 18px; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--accent-tint); padding: 22px 24px;
}
.addon-card .price-icon{ background: var(--surface); margin-bottom: 0; }

.compare-table-wrap{
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 8px 24px; overflow-x: auto; box-shadow: var(--shadow-card);
}
.compare-table{ width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td{ padding: 16px 12px; border-bottom: 1px solid var(--rule); font-size: 14.5px; text-align: left; color: var(--ink); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{ border-bottom: none; }
.compare-table thead th{ font-size: 11.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--rule-strong); }
.compare-table tbody th, .compare-table tbody td:first-child{ font-weight: 600; color: var(--ink); }
.compare-table td:not(:first-child), .compare-table th:not(:first-child){ text-align: center; }

.glossary-item{ padding: 24px 0; border-bottom: 1px solid var(--rule); }
.glossary-item h3{ font-size: 18.5px; margin-bottom: 7px; }

.glossary-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.glossary-grid .glossary-item{
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px; text-align: left; box-shadow: var(--shadow-card);
}
.glossary-grid .glossary-item h3{ font-size: 16.5px; margin-bottom: 6px; }
.glossary-grid .glossary-item p{ font-size: 14px; }
@media (max-width: 760px){ .glossary-grid{ grid-template-columns: 1fr; } }

.guide-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 8px; }
.guide-grid .glossary-item{
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px; text-align: left; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease;
}
.guide-grid .glossary-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.guide-grid .glossary-item h3{ font-size: 17px; margin-bottom: 7px; }
.guide-grid .glossary-item p{ font-size: 14px; }

/* ---------- WhatsApp chat button ----------
   Chrome (shape, border, shadow, tooltip card) matches the rest of the
   site's design system; only the icon itself uses WhatsApp's own green,
   kept just for recognizability. */
.whatsapp-fab{
  position: fixed; right: max(22px, calc((100vw - var(--max)) / 2 + 24px)); bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--rule-strong);
  text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(17,18,20,.05), 0 20px 40px -18px rgba(17,18,20,.35);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.whatsapp-fab:hover, .whatsapp-fab:focus-visible{
  transform: translateY(-2px);
  border-color: #25D366;
  box-shadow: 0 1px 2px rgba(17,18,20,.05), 0 24px 44px -18px rgba(17,18,20,.4);
}
.whatsapp-fab-icon{ width: 25px; height: 25px; fill: #25D366; }
.whatsapp-fab-tip{
  position: absolute; right: 68px; bottom: 6px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(17,18,20,.05), 0 20px 40px -18px rgba(17,18,20,.3);
  padding: 12px 16px; white-space: nowrap; text-align: left;
  opacity: 0; pointer-events: none; transform: translateX(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.whatsapp-fab-tip strong{ display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.005em; margin-bottom: 3px; }
.whatsapp-fab-tip span{ display: block; font-size: 12px; color: var(--ink-faint); }
.whatsapp-fab:hover .whatsapp-fab-tip, .whatsapp-fab:focus-visible .whatsapp-fab-tip{
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
@media (max-width: 640px){
  .whatsapp-fab{ right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .whatsapp-fab-icon{ width: 22px; height: 22px; }
  .whatsapp-fab-tip{ display: none; }
}

.util-center{ text-align: center; }
.mt-10{ margin-top: 10px; }
.mt-20{ margin-top: 20px; }
.mt-40{ margin-top: 20px; }
.small{ font-size: 13px; color: var(--ink-faint); }