/* eudrdesk.eu — brand system v3: "Verified Ground"
   Self-hosted: Instrument Serif (display) / General Sans (body) / Geist Mono (coordinates, dates, codes)
   Palette built in OKLCH — cool paper (NOT warm cream) + spruce-ink dark band + one verified-green accent,
   used as a system (every CTA/link/checked-state/marker), not decoration.
   v3 rewrite reason: v2 was a verbatim instance of the named AI-tell cluster "warm cream + high-contrast
   serif + terracotta accent" (visual-design.md §0) with FAKED signature motion (static rotate(), no
   mousemove listener existed). This file fixes both: real palette break + real pointer/motion. */

@font-face{
  font-family:"Instrument Serif";
  src:url("fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"General Sans";
  src:url("fonts/GeneralSans-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"General Sans";
  src:url("fonts/GeneralSans-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"General Sans";
  src:url("fonts/GeneralSans-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"General Sans";
  src:url("fonts/GeneralSans-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  /* L1 primitives — OKLCH, never pure #fff/#000, never warm cream */
  --paper-97: oklch(97% 0.006 240);   /* cool, blue-neutral paper — NOT the warm-cream AI-tell */
  --paper-93: oklch(93% 0.008 236);
  --paper-89: oklch(89% 0.010 233);
  --ink-21:   oklch(21% 0.018 238);
  --ink-42:   oklch(42% 0.016 236);
  --line-84:  oklch(84% 0.012 234);
  --verified-58: oklch(58% 0.13 155);   /* the one accent — motivated by the subject (deforestation/land-cover), not a default */
  --verified-46: oklch(46% 0.125 155);
  --verified-fg: oklch(98% 0.008 150);
  --spruce-16: oklch(16% 0.02 165);   /* dark-inverted band — cool spruce-black, not brown, not pure black */
  --spruce-21: oklch(21% 0.022 163);
  --spruce-26: oklch(26% 0.024 160);
  --spruce-line: oklch(34% 0.03 160);
  --paper-on-dark: oklch(93% 0.01 150);
  --verified-dark: oklch(70% 0.11 155); /* dark-mode accent: lighter L, lower C, same H */

  /* L2 semantic — the only names components use */
  --bg: var(--paper-97);
  --surface: var(--paper-93);
  --surface-2: var(--paper-89);
  --text: var(--ink-21);
  --text-muted: var(--ink-42);
  --border: var(--line-84);
  --accent: var(--verified-58);
  --accent-deep: var(--verified-46);
  --accent-fg: var(--verified-fg);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --radius-sm:3px; --radius:5px; --radius-lg:7px;
  --shadow-low: 0 1px 1px rgba(10,22,20,.06), 0 2px 3px rgba(10,22,20,.06), 0 4px 6px rgba(10,22,20,.05);
  --shadow-mid: 0 1px 2px rgba(10,22,20,.06), 0 4px 8px rgba(10,22,20,.07), 0 10px 20px rgba(10,22,20,.08), 0 20px 40px rgba(10,22,20,.06);
  --shadow-high: 0 2px 4px rgba(10,22,20,.08), 0 8px 16px rgba(10,22,20,.08), 0 20px 40px rgba(10,22,20,.10), 0 40px 80px rgba(10,22,20,.12);

  --font-display:"Instrument Serif", ui-serif, Georgia, serif;
  --font-body:"General Sans", system-ui, -apple-system, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms; --dur-base:320ms; --dur-slow:560ms;
}

/* dark-inverted band tokens — applied only inside .band-dark (pricing/faq/footer), NOT a global theme.
   Must set background+color explicitly here, not just redefine the custom properties: `color` on
   descendants like h1/h2/h3 is INHERITED from body's already-resolved `color:var(--text)` and will
   NOT re-read a nearer --text override unless something in this subtree re-declares color/background
   itself — this is what actually paints the band and re-anchors inheritance for everything below it. */
.band-dark{
  --bg: var(--spruce-16);
  --surface: var(--spruce-21);
  --surface-2: var(--spruce-26);
  --text: var(--paper-on-dark);
  --text-muted: oklch(68% 0.02 155);
  --border: var(--spruce-line);
  --accent: var(--verified-dark);
  --accent-deep: var(--verified-dark);
  --accent-fg: oklch(17% 0.02 155);
  --shadow-low: 0 1px 1px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.22), 0 4px 8px rgba(0,0,0,.18);
  --shadow-mid: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.28), 0 12px 24px rgba(0,0,0,.24);
  --shadow-high: 0 2px 4px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.3), 0 24px 48px rgba(0,0,0,.34), 0 48px 96px rgba(0,0,0,.28);
  background:var(--bg); color:var(--text); border-top-color:var(--border);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body);
  line-height:1.6; font-size:clamp(1rem, .94rem + .3vw, 1.09rem);
  font-variant-ligatures:common-ligatures;
  position:relative;
}

/* paper grain — anti-flatness texture, whole document, cool-neutral tint */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:190px;
  opacity:.045; mix-blend-mode:multiply;
}

img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:900px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.002em;margin:0}
strong{font-weight:600}
.mono, .price .amount, .day, time, .hs{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
/* header.top is the full-bleed outer element (border spans the viewport); .wrap inside
   constrains + centers the actual nav content to the same reading column every section uses. */
/* sticky + glass-on-scroll: functional hierarchy tool (visual-design.md glassmorphism note) —
   transparent/borderless at rest so the hero reads full-bleed under it, glass kicks in only once
   there is real content scrolling underneath to show through (.scrolled class from script.js). */
header.top{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  background:transparent;
  transition:background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
header.top.scrolled{
  /* 82%/saturate(160%) let a saturated CTA scrolling underneath bleed through as a visible
     green smear (caught by adversarial screenshot review) — raised opacity + trimmed saturation
     boost so the nav stays legible regardless of what scrolls under it. */
  background:color-mix(in oklch, var(--bg) 95%, transparent);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--border);
  box-shadow:var(--shadow-low);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.top.scrolled{background:var(--bg)}
}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:18px}
.brand{font-family:var(--font-display);font-size:22px;letter-spacing:.01em;display:flex;align-items:center;gap:6px}
.brand b{font-weight:400;color:var(--accent)}
.brand__pin{flex:0 0 auto}
.langtoggle{display:flex;align-items:center;gap:2px}
.langtoggle a{color:var(--text-muted);text-decoration:none;margin-left:8px;font-size:13px;font-family:var(--font-mono);padding:4px 8px;border-radius:var(--radius-sm);transition:color .2s,background .2s}
.langtoggle a:hover{color:var(--text);background:var(--surface)}
.langtoggle a.active{color:var(--text);font-weight:600;background:var(--surface-2)}

/* ---------- reveal / motion ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.hero-enter{opacity:0;transform:translateY(16px);animation:enter var(--dur-slow) var(--ease-out-expo) forwards}
@keyframes enter{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}
@view-transition{ navigation: auto; }

/* ---------- hero ---------- */
.hero{padding:var(--space-16) 0 var(--space-12);position:relative;overflow:hidden}
.hero::after{ /* topographic contour texture, quiet, behind content — cool ink tint, not warm brown */
  content:"";position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23233d34' stroke-width='1.1'%3E%3Cpath d='M-20,120 C120,60 220,180 340,120 C460,60 560,180 680,120 C760,84 820,110 860,90'/%3E%3Cpath d='M-20,180 C120,120 220,240 340,180 C460,120 560,240 680,180 C760,144 820,170 860,150'/%3E%3Cpath d='M-20,260 C140,190 240,320 360,260 C480,190 580,320 700,260 C780,224 830,250 860,232'/%3E%3Cpath d='M-20,420 C160,340 260,480 380,420 C500,340 600,480 720,420 C790,384 830,410 860,392'/%3E%3Cpath d='M-20,520 C160,440 280,580 400,520 C520,440 620,580 740,520 C800,486 830,510 860,494'/%3E%3Cpath d='M-20,620 C170,540 290,680 410,620 C530,540 630,680 750,620 C800,592 830,612 860,600'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:cover;
}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-16);align-items:center}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;gap:var(--space-8)}}

.hero h1{font-size:clamp(2.3rem, 1.6rem + 3vw, 3.6rem);line-height:1.04;margin:0 0 var(--space-4);max-width:14ch}
.hero p.sub{color:var(--text-muted);font-size:clamp(1.05rem,1rem + .4vw,1.2rem);margin:0 0 var(--space-8);max-width:46ch}

.price-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 26px;margin:var(--space-6) 0;box-shadow:var(--shadow-low)}
.price-box .row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.price .amount{font-size:38px;font-weight:600;letter-spacing:-.01em}
.price small{display:block;font-size:13px;font-weight:500;color:var(--text-muted);font-family:var(--font-body);margin-top:2px}

.cta{
  position:relative;overflow:hidden;display:inline-block;
  background:var(--accent-deep);color:var(--accent-fg);font-weight:600;text-decoration:none;
  padding:15px 30px;border-radius:var(--radius);font-size:16.5px;
  transition:transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-standard);
  will-change:transform;
}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-120%)}
.cta:hover{box-shadow:var(--shadow-mid)}
.cta:hover::before{transition:transform .7s var(--ease-standard);transform:translateX(120%)}
.cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* magnetic pull is applied via inline transform from script.js on mousemove; the transition above
   is intentionally slow (ease-out-expo, dur-base) so it only governs the mouseleave snap-back —
   script.js sets transition:none while actively tracking, per motion-and-3d.md's magnetic-button pattern */

.guarantee{font-size:14px;color:var(--text-muted);margin-top:var(--space-3)}
.deadline-box{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);color:var(--text);border-radius:var(--radius);padding:16px 20px;font-size:14.5px;margin:var(--space-6) 0}
.deadline-box strong{font-family:var(--font-mono);font-weight:600}
.small{font-size:13px;color:var(--text-muted)}

/* ---------- hero coordinate card: the signature moment, REAL pointer-tilt (not static) ---------- */
.coordinate{position:relative;height:380px;display:flex;align-items:center;justify-content:center;perspective:1200px}
.coordinate__card{
  position:relative;width:280px;height:320px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-high);
  padding:26px 24px;
  transform-style:preserve-3d;
  transition:transform .12s var(--ease-standard);
  will-change:transform;
}
/* JS sets .coordinate__card style.transform on mousemove (rotateX/Y, max 6deg, rAF-lerped) and
   resets to the entrance transform on mouseleave — see script.js initCoordinateTilt(). Touch/no
   fine-pointer devices only get the entrance animation (media query gate is in JS, not CSS, since
   the tilt itself is driven by JS transform writes). */
.coordinate__card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius-lg);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 320'%3E%3Cg fill='none' stroke='%23233d34' stroke-width='1'%3E%3Cpath d='M-10,60 C60,30 110,90 170,60 C230,30 280,90 300,70'/%3E%3Cpath d='M-10,140 C60,110 110,170 170,140 C230,110 280,170 300,150'/%3E%3Cpath d='M-10,230 C60,200 110,260 170,230 C230,200 280,260 300,240'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:cover;opacity:.10;
}
.coordinate__eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);position:relative}
.coordinate__pin{margin:18px 0 14px;position:relative}
.coordinate__coords{font-size:19px;font-weight:600;letter-spacing:-.005em;position:relative}
.coordinate__tag{font-size:12.5px;color:var(--text-muted);margin-top:4px;position:relative}
.coordinate__divider{height:1px;background:var(--border);margin:16px 0;position:relative}
.coordinate__verified{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent-deep);position:relative}

/* ---------- generic sections ---------- */
/* the ONE ownable motif (coordinate/pin crosshair from the hero + wordmark) repeated at every
   section boundary as a small tick mark — cheap, reinforces recognition without the name present
   (brand-identity.md §3 logo-removal test). */
section:not(.hero)::before, footer::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--accent),var(--accent)) center/1.5px 9px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/9px 1.5px no-repeat;
  opacity:.55;
}
section{padding:var(--space-16) 0;border-top:1px solid var(--border);position:relative}
section h2{font-size:clamp(1.6rem,1.4rem + 1vw,2.1rem);margin:0 0 var(--space-2)}
section > p.lede{color:var(--text-muted);max-width:60ch;margin:0 0 var(--space-8)}
section h3{font-size:1.05rem;font-weight:600;font-family:var(--font-body);margin:0 0 6px}

/* ---------- scope checker (functionally unchanged; palette-only restyle) ---------- */
.scope-checker{position:relative}
#scopeChecker{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;margin:0;background:var(--surface)}
#scopeChecker legend{padding:0 8px;color:var(--text-muted);font-size:14px;font-family:var(--font-mono)}
.scope-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 20px;margin-top:10px}
.scope-grid label{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;padding:6px 4px;border-radius:var(--radius-sm);transition:background .2s}
.scope-grid label:hover{background:var(--surface-2)}
.scope-grid input[type="checkbox"]{
  appearance:none;width:19px;height:19px;border:1.5px solid var(--border);border-radius:3px;
  background:var(--bg);position:relative;cursor:pointer;flex:0 0 auto;
  transition:border-color .2s, background .2s, transform .15s var(--ease-spring);
}
.scope-grid input[type="checkbox"]:checked{background:var(--accent-deep);border-color:var(--accent-deep);transform:scale(1.06)}
.scope-grid input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--accent-fg);border-width:0 2px 2px 0;transform:rotate(40deg)}
.scope-grid input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.result-wrap{display:flex;align-items:center;gap:22px;margin-top:var(--space-6);flex-wrap:wrap;min-height:100px}
#scopeResult{padding:16px 20px;border-radius:var(--radius);font-weight:500;display:none;max-width:52ch;border:1px solid var(--border);background:var(--surface)}
#scopeResult.show{display:block}
#scopeResult.in-scope{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
#scopeResult.out-scope{box-shadow:inset 3px 0 0 var(--text-muted)}

.stamp-seal{
  width:104px;height:104px;border-radius:50%;flex:0 0 auto;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 30%, color-mix(in oklch, var(--accent) 88%, white), var(--accent-deep) 78%);
  box-shadow:0 8px 20px rgba(10,22,20,.28);
  opacity:0;transform:scale(2.4) rotate(-16deg);
}
.stamp-seal::before{content:"";position:absolute;inset:8px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.stamp-seal::after{content:"";position:absolute;inset:17px;border-radius:50%;border:1px dashed rgba(255,255,255,.42)}
.stamp-seal svg{position:relative}
.stamp-seal.press{animation:stamp-press 520ms var(--ease-spring) forwards}
@keyframes stamp-press{
  0%{opacity:0;transform:scale(2.4) rotate(-16deg)}
  55%{opacity:1;transform:scale(.92) rotate(-4deg)}
  75%{transform:scale(1.06) rotate(-6deg)}
  100%{opacity:1;transform:scale(1) rotate(-5deg)}
}
@media (prefers-reduced-motion: reduce){
  .stamp-seal.press{animation:none;opacity:1;transform:scale(1) rotate(-5deg)}
}

/* ---------- timeline / how it works — 3 hand-authored SVG icons, one stroke system ---------- */
.timeline-wrap{position:relative}
.timeline-wrap::before{
  content:"";position:absolute;inset:-8% -4%;z-index:-1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Cg fill='none' stroke='%23233d34' stroke-width='1'%3E%3Cpath d='M-20,80 C160,20 260,140 400,80 C540,20 640,140 820,80'/%3E%3Cpath d='M-20,180 C160,120 260,240 400,180 C540,120 640,240 820,180'/%3E%3Cpath d='M-20,300 C160,240 260,360 400,300 C540,240 640,360 820,300'/%3E%3Cpath d='M-20,410 C160,350 260,470 400,410 C540,350 640,470 820,410'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:cover;
}
/* NOTE: both the outer <section class="timeline"> and the inner <div class="timeline"> share the
   literal class name "timeline" — bare `.timeline` selectors match BOTH. The connector-line/dot
   rules below are scoped to `div.timeline` specifically to avoid a stray copy rendering on the
   outer full-bleed section (a real bug this exact collision caused, caught via adversarial review
   + elementFromPoint verification, not by reading the CSS). The base flex layout rule is harmless
   on the outer section (single child, no visible effect) so it's left as bare `.timeline`. */
.timeline{display:flex;flex-direction:column;gap:0;position:relative}
/* connector line running through the icon column — standard timeline convention, reinforces
   "named days, not a blind progress bar" (conversion.md labor-illusion evidence: the line makes
   the sequence read as one continuous operational process, not 3 disconnected facts). */
div.timeline::before{
  content:"";position:absolute;left:27px;top:30px;bottom:30px;width:1.5px;
  background:var(--border);opacity:.8;z-index:0;
}
/* small terminus dot so the connector reads as an intentional closed line, not a cut-off one
   (caught by adversarial screenshot review: line ran into empty space with no visual closure) */
div.timeline::after{
  content:"";position:absolute;left:23.5px;bottom:30px;width:8px;height:8px;border-radius:50%;
  background:var(--border);z-index:0;
}
@media (max-width:600px){ div.timeline::after{left:15.5px} }
.timeline .step{display:grid;grid-template-columns:56px 100px 1fr;gap:var(--space-4);padding:20px 0;border-bottom:1px solid var(--border);align-items:start;position:relative;z-index:1}
.timeline .step:last-child{border-bottom:none}
.timeline .step .icon{width:36px;height:36px;color:var(--text);padding-top:2px}
.timeline .step .icon svg{width:100%;height:100%}
.timeline .step .day{font-weight:600;color:var(--accent-deep);font-size:14px;padding-top:6px}
.timeline .step p{margin:0;padding-top:4px;max-width:56ch}
@media (max-width:600px){
  div.timeline::before{left:19px}
  .timeline .step{grid-template-columns:40px 1fr;grid-template-areas:"icon day" "icon text"}
  .timeline .step .icon{grid-area:icon}
  .timeline .step .day{grid-area:day}
  .timeline .step p{grid-area:text}
}

/* ---------- objections ---------- */
.objections .obj{border-bottom:1px solid var(--border);padding:20px 0}
.objections .obj:first-child{padding-top:0}
.objections .obj:last-child{border-bottom:none}
/* optical margin: the opening curly quote is hung slightly into the margin so the paragraph edge
   below reads flush to the eye, not just to the ruler (visual-design.md §3 hanging-punctuation). */
.objections .obj h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;text-indent:-0.42em}
.objections .obj p{color:var(--text-muted);margin:0;max-width:64ch}

/* ---------- pricing — DARK-INVERTED BAND (the one tonal-range break); painting handled by .band-dark ---------- */
.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-high);max-width:520px}
.pricing-card .tier{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border)}
.pricing-card .tier:last-of-type{border-bottom:none}
.pricing-card .tier .name{color:var(--text-muted);font-size:14px}
.pricing-card .tier .val{font-family:var(--font-mono);font-weight:500}
.pricing-card .tier.current .val{color:var(--accent-deep);font-size:22px;font-weight:600}
.pricing-card .anchor{font-size:14px;color:var(--text-muted);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--border)}

/* ---------- faq — asymmetric editorial split (the one intentional grid violation vs. the
   uniform single-column stacking every other section uses; visual-design.md §3) ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(160px,.7fr) 1.6fr;gap:var(--space-12);align-items:start}
.faq-intro h2{margin-bottom:0}
@media (max-width:820px){.faq-grid{grid-template-columns:1fr;gap:var(--space-4)}}
.faq details{border-bottom:1px solid var(--border);padding:16px 0}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--accent-deep);transition:transform .3s var(--ease-standard);flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--text-muted);margin:10px 0 0;max-width:66ch}

/* ---------- footer — same dark-inverted band as pricing, page ends with weight ---------- */
footer{padding:var(--space-8) 0 var(--space-16);color:var(--text-muted);font-size:13px;border-top:1px solid var(--border)}

@media (max-width:600px){
  .wrap{padding:0 18px}
  .coordinate{height:300px}
  .coordinate__card{width:240px;height:280px}
  .price-box .row{flex-direction:column;align-items:flex-start}
}