/* Ghost Architect™ · /next/ shared styles for index.html and local.html */
:root {
  --bg: #0a0a0f;
  --surface: #111118;
  --surface2: #1a1a24;
  --border: #2a2a3a;
  --text: #e8e8f0;
  --text-muted: #b0b0c0;
  --text-dim: #777788;
  --accent: #4a9eff;
  --accent2: #00d4aa;
  --local: #00bfd8;
  --warning: #ffaa00;
  --danger: #ff4a6b;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
  --scrim: rgba(10, 10, 15, 0.78);
  --nav-h: 60px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the world ---------- */
#lattice {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease 0.15s;
}
html.has-lattice #lattice { opacity: 1; }
html.no-webgl body {
  background:
    radial-gradient(900px 520px at 50% 8%, rgba(74, 158, 255, 0.14), transparent 70%),
    radial-gradient(700px 480px at 20% 70%, rgba(0, 212, 170, 0.08), transparent 70%),
    var(--bg);
}
main { position: relative; z-index: 1; }
/* the shared nav's trial band and mobile menu are siblings of the nav; keep them above the canvas */
.ga-trial-band { position: relative; z-index: 2; }
#ga-mobile-menu { z-index: 99; }

/* ---------- type ---------- */
.label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim); margin: 0 0 1rem;
}
.label.blue { color: var(--accent); }
.label.teal { color: var(--accent2); }
.label.red  { color: var(--danger); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h1 em { font-style: normal; color: var(--text-muted); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.lede { color: var(--text-muted); font-size: 1.08rem; max-width: 46ch; margin: 1.1rem 0 0; }
.mono { font-family: var(--font-mono); }

/* ---------- hero ---------- */
.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5rem 1.5rem 6rem; position: relative;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14rem;
  background: linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,0.85) 100%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-inner { max-width: 980px; }
.version-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.35rem 0.9rem; margin-bottom: 1.8rem;
  background: rgba(17, 17, 24, 0.7);
}
.version-badge b { color: var(--accent2); font-weight: 600; }
.hero h1 { text-shadow: 0 2px 40px rgba(10, 10, 15, 0.9); }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text-muted); margin: 1.4rem auto 0; max-width: 60ch; }
.hero-accent { font-family: var(--font-mono); color: var(--accent2); font-size: 0.95rem; margin: 0.9rem 0 0; letter-spacing: 0.01em; }
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em;
  padding: 0.8rem 1.25rem; border-radius: 10px; border: 1px solid transparent;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-cloud { background: var(--accent); color: #06111f; }
.btn-cloud:hover { background: #6cb0ff; }
.btn-local { background: rgba(0, 191, 216, 0.12); color: var(--local); border-color: rgba(0, 191, 216, 0.5); }
.btn-local:hover { border-color: var(--local); background: rgba(0, 191, 216, 0.18); }
.btn-ghost { color: var(--text); border-color: var(--border); background: rgba(17, 17, 24, 0.6); }
.btn-ghost:hover { border-color: var(--text-dim); }
.npm {
  margin-top: 2.2rem; display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.92rem; color: var(--text);
  background: rgba(17, 17, 24, 0.82); border: 1px solid rgba(0, 212, 170, 0.45); border-radius: 10px;
  padding: 0.7rem 1.1rem;
}
.npm .dollar { color: var(--accent2); }
.npm button {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent2); cursor: pointer;
  background: rgba(0, 212, 170, 0.12); border: 1px solid rgba(0, 212, 170, 0.5); border-radius: 6px; padding: 0.2rem 0.55rem;
}
.hero-proof {
  margin-top: 2.6rem; display: flex; gap: 2.2rem; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim);
}
.hero-proof b { display: block; color: var(--text); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.scroll-hint {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
  z-index: 1;
}

/* ---------- two doors ---------- */
.doors { padding: 3rem 1.5rem 5rem; max-width: 1120px; margin: 0 auto; }
.doors-head { text-align: center; margin-bottom: 1.6rem; }
.doors-head h2 span { color: var(--accent2); }
.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.door {
  display: block; color: inherit; background: rgba(17, 17, 24, 0.86); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem 1.5rem 1.35rem; position: relative;
  transition: border-color .15s ease, transform .15s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.door:hover { text-decoration: none; transform: translateY(-2px); }
.door.cloud:hover { border-color: var(--accent); }
.door.local { border-color: rgba(0, 191, 216, 0.45); }
.door.local:hover { border-color: var(--local); }
.door .label { margin-bottom: 0.55rem; }
.door .door-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; line-height: 1.25; }
.door p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.door .go { margin-top: 1rem; font-weight: 600; }
.door.cloud .go { color: var(--accent); }
.door.local .go { color: var(--local); }
.tag {
  position: absolute; top: 1rem; right: 1rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--local); color: #06131a;
}

/* ---------- chapters (the scroll-driven scenes) ---------- */
.chapter { min-height: 200vh; position: relative; padding: 42vh 1.5rem 0; }
.chapter .copy {
  position: sticky; top: 18vh; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;
}
.chapter .block { grid-column: 1 / span 5; padding: 2.2rem 2rem 2rem; border-radius: 16px; position: relative; }
.chapter.right .block { grid-column: 8 / span 5; }
.chapter.center .block { grid-column: 3 / span 8; text-align: center; }
.chapter .block::before {
  content: ""; position: absolute; inset: -3rem -5rem; border-radius: 40px; z-index: -1;
  background: radial-gradient(closest-side, var(--scrim) 30%, rgba(10,10,15,0.6) 55%, rgba(10,10,15,0.25) 78%, rgba(10,10,15,0) 100%);
}
.chapter .block p { color: var(--text-muted); margin: 1rem 0 0; }
.items { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.05rem; }
.items li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.6rem; align-items: baseline; }
.items .n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent2); }
.items li.amber .n { color: var(--warning); }
.items li.red .n { color: var(--danger); }
.items h3 { display: inline; }
.items .t { color: var(--text-muted); font-size: 0.95rem; margin: 0.15rem 0 0; }
.items .pill {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.4rem; margin-left: 0.5rem; vertical-align: middle;
}
.foot { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); margin-top: 1.6rem; }
.foot b { color: var(--text-muted); font-weight: 500; }
.quote { font-size: clamp(1.7rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.quote span { color: var(--accent2); }
.stats { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.6rem; }
.stats div { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.stats b { display: block; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--text); font-weight: 600; font-family: var(--font-sans); text-transform: none; }
.finding {
  margin-top: 1.4rem; border-left: 3px solid var(--danger); padding: 0.2rem 0 0.2rem 1rem;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted);
}
.finding .k { color: var(--danger); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.finding .h { color: var(--text); font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem; margin: 0.25rem 0; }

/* ---------- solid sections ---------- */
.solid { background: rgba(10, 10, 15, 0.94); border-top: 1px solid var(--border); position: relative; }
.strip { padding: 3.2rem 1.5rem; }
.strip .row {
  max-width: 1120px; margin: 0 auto; display: flex; gap: 1.2rem 2.2rem; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent2);
}
.strip .row .no { color: var(--text-dim); }
.faq { padding: 5rem 1.5rem 6rem; }
.faq .wrap { max-width: 820px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--border); padding: 1.1rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-dim); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--text-muted); margin: 0.8rem 0 0; }
.final { padding: 6rem 1.5rem; text-align: center; }
.final h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.final .hero-cta { margin-top: 2rem; }
footer {
  position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--border);
  padding: 2rem 1.5rem 2.6rem; display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: center; justify-content: space-between;
  max-width: 100%; font-size: 0.82rem; color: var(--text-dim);
}
.footer-logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 600; }
.footer-logo img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
footer a { color: var(--text-muted); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .chapter { min-height: 170vh; padding-top: 36vh; }
  .chapter .block, .chapter.right .block, .chapter.center .block { grid-column: 1 / -1; text-align: left; padding: 1.6rem 1.2rem; }
  .chapter .block::before { inset: -0.6rem -0.8rem; background: var(--scrim); border-radius: 16px; }
  .chapter .copy { top: 14vh; }
}
@media (max-width: 600px) {
  .hero { padding: 3.5rem 1rem 5rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .npm { font-size: 0.8rem; gap: 0.6rem; }
  .stats { gap: 1.2rem; }
}

/* ---------- Local page additions ---------- */
:root { --local-dim: rgba(0, 191, 216, 0.14); }
.label.local, .items li.local .n { color: var(--local); }
.hero-strip {
  margin-top: 2.4rem; display: flex; gap: 0.9rem 2rem; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); letter-spacing: 0.02em;
}
.hero-strip span::before { content: "\2713\00a0"; color: var(--local); }
.btn-local-solid { background: var(--local); color: #06131a; }
.btn-local-solid:hover { background: #33d4ea; }
.story { padding: 5rem 1.5rem; }
.story .wrap { max-width: 760px; margin: 0 auto; }
.story .big { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin: 0; text-wrap: balance; }
.story .big em { font-style: normal; color: var(--local); }
.story p { color: var(--text-muted); margin: 1.4rem 0 0; }
.section-head { max-width: 1120px; margin: 0 auto 2rem; }
.section-head .lede { max-width: 62ch; }
.cards { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.card { background: rgba(17, 17, 24, 0.7); border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem 1.3rem 1.2rem; }
.card .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--local); margin-bottom: 0.6rem; }
.card h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; }
.card p { color: var(--text-muted); font-size: 0.92rem; margin: 0.6rem 0 0; }
.card code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text); background: rgba(255,255,255,0.06); padding: 0.05rem 0.35rem; border-radius: 4px; }
.honest { max-width: 1120px; margin: 0 auto; border-left: 3px solid var(--local); padding: 0.4rem 0 0.4rem 1.4rem; color: var(--text-muted); }
.honest p { margin: 0 0 1rem; }
.honest p:last-child { margin-bottom: 0; }
.honest strong { color: var(--text); font-weight: 600; }
.honest code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text); }
.cmp-wrap { max-width: 1120px; margin: 0 auto; overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
table.cmp th, table.cmp td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.cmp th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }
table.cmp td:first-child { color: var(--text-dim); width: 26%; }
table.cmp td.l { color: var(--text); font-weight: 500; }
table.cmp td { color: var(--text-muted); }
.tiers { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.tier { background: rgba(17, 17, 24, 0.7); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem 1.3rem; }
.tier.hi { border-color: rgba(0, 191, 216, 0.55); box-shadow: 0 0 32px var(--local-dim); }
.tier .name { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.tier .price { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.tier .unit { color: var(--text-dim); font-size: 0.85rem; }
.tier .seats { margin-top: 0.7rem; color: var(--local); font-weight: 600; font-size: 0.9rem; }
.fine { color: var(--text-dim); font-size: 0.85rem; max-width: 1120px; margin: 1.2rem auto 0; }
.pad { padding: 5rem 1.5rem; }
.pad + .pad { border-top: 1px solid var(--border); }

/* ---------- content pages (everything that is not the two home pages) ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 5rem; }
.page-hero { padding: 5rem 0 3rem; max-width: 820px; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); text-wrap: balance; }
.page-hero h1 em { font-style: normal; color: var(--text-muted); font-weight: 500; }
.page-hero .lede { font-size: 1.12rem; max-width: 60ch; }
.page-hero .hero-cta { justify-content: flex-start; margin-top: 1.8rem; }
.page-hero .hero-strip { justify-content: flex-start; margin-top: 1.6rem; }
.page-hero .version-badge { margin-bottom: 1.4rem; }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.eyebrow.local { color: var(--local); }
.eyebrow.teal { color: var(--accent2); }

/* EJ, 2026-09-28: on the pricing page, "no one stops to read anything that
   small" -- a visitor scrolling from the Local pricing into the Cloud
   pricing (or the trust or FAQ sections under each) had nothing telling them
   which product's numbers they were looking at except this 0.72rem kicker.
   product-banner is additive to .eyebrow (never edits the base rule other
   pages' plain kickers still use): bigger, bolder, and a full-width rule
   in the label's own colour, so the row reads as a section banner rather
   than a line of text easy to scroll past. */
.eyebrow.product-banner {
  display: block;
  width: 100%;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  padding-bottom: 0.85rem;
  margin-bottom: 1.6rem;
  border-bottom: 2px solid currentColor;
}

/* EJ, 2026-09-28 (round two): "a fraction of the size" of the headline
   right under it was still the complaint at the first size -- on a real
   phone, next to the page's biggest text, 1.15rem read as a kicker no
   matter how bold. .mega is only for the two banners that sit directly
   above the Local and Cloud pricing h2 (id=local, id=plans): near-headline
   scale, matching h2's own clamp(1.75rem, 3.2vw, 2.7rem) almost exactly,
   so the label reads as the same weight class as the words it introduces
   instead of a caption underneath them. Letter-spacing comes down from
   product-banner's 0.16em because that much tracking at 3 lines of this
   size stops being readable -- it stretches into the next line. The trust
   and FAQ product-banners (local-trust, local-faq, and their Cloud
   counterparts) keep the smaller size on purpose: they sit above an h3,
   not an h2, and this scale next to that would be the opposite mistake.

   NOT called .hero: the site already has a .hero class (full-viewport,
   flex-centered, text-align:center, 5rem top padding) used for page-level
   hero sections elsewhere. The first version of this rule was named .hero
   and silently inherited every one of those properties from that
   unrelated class -- centered instead of left, and a forced ~740px-tall
   box from the 100svh min-height and flex centering, which is what put
   the banner text alone in a sea of empty space on a wide screen instead
   of sitting directly above the h2. Renaming it is the actual fix; sizing
   was never the remaining problem. */
.eyebrow.product-banner.mega {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  padding-bottom: 1.1rem;
  margin-bottom: 1.3rem;
  border-bottom-width: 3px;
}

.band { padding: 3.5rem 0; border-top: 1px solid var(--border); }
.band > h2 { margin-bottom: 0.6rem; text-wrap: balance; }
.band > .lede { margin-bottom: 1.8rem; }
.band.solid-band { background: rgba(10, 10, 15, 0.86); margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }

.prose { max-width: 68ch; color: var(--text-muted); font-size: 1.02rem; }
.prose h2 { color: var(--text); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 2.6rem 0 0.8rem; text-wrap: balance; }
.prose h3 { color: var(--text); font-size: 1.1rem; margin: 1.8rem 0 0.5rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose li { margin: 0.35rem 0; }
.prose li::marker { color: var(--accent2); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(74,158,255,0.45); }
.prose blockquote { margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 3px solid var(--accent2); color: var(--text); font-size: 1.1rem; }
.prose code, .inline-code { font-family: var(--font-mono); font-size: 0.86em; color: var(--text); background: rgba(255,255,255,0.06); padding: 0.08rem 0.4rem; border-radius: 4px; }
.prose pre, pre.code { font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.6; color: var(--text); background: rgba(17, 17, 24, 0.85); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; overflow-x: auto; margin: 1.2rem 0; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose img, .figure img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); }
.figure { margin: 1.6rem 0; }
.figure figcaption { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); margin-top: 0.6rem; letter-spacing: 0.02em; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem 3rem; align-items: start; }

.callout { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: rgba(17, 17, 24, 0.7); padding: 1.1rem 1.3rem; color: var(--text-muted); margin: 1.4rem 0; }
.callout.teal { border-left-color: var(--accent2); }
.callout.local { border-left-color: var(--local); }
.callout.amber { border-left-color: var(--warning); }
.callout.red { border-left-color: var(--danger); }
.callout .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.4rem; }
.callout p { margin: 0 0 0.6rem; }
.callout p:last-child { margin-bottom: 0; }

.card .k.blue { color: var(--accent); }
.card .k.teal { color: var(--accent2); }
.card .k.amber { color: var(--warning); }
.card .k.red { color: var(--danger); }
.card.hi { border-color: rgba(74, 158, 255, 0.55); box-shadow: 0 0 32px rgba(74, 158, 255, 0.12); }
.card.hi-teal { border-color: rgba(0, 212, 170, 0.55); box-shadow: 0 0 32px rgba(0, 212, 170, 0.12); }
.card .price { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin: 0.4rem 0 0; font-variant-numeric: tabular-nums; }
.card .price small { font-size: 0.85rem; color: var(--text-dim); font-weight: 400; letter-spacing: 0; }
.card ul { margin: 0.8rem 0 0; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.92rem; }
.card li { margin: 0.3rem 0; }
.card li::marker { color: var(--accent2); }
.card .btn { margin-top: 1rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; max-width: 760px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.8rem; align-items: baseline; }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent2); }
.steps h3 { display: inline; }
.steps p { color: var(--text-muted); margin: 0.2rem 0 0; font-size: 0.96rem; }

.badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pill.blue { color: var(--accent); border-color: rgba(74,158,255,0.45); }
.pill.teal { color: var(--accent2); border-color: rgba(0,212,170,0.45); }
.pill.local { color: var(--local); border-color: rgba(0,191,216,0.45); }
.pill.amber { color: var(--warning); border-color: rgba(255,170,0,0.45); }
.pill.red { color: var(--danger); border-color: rgba(255,74,107,0.45); }
.pill { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 4px; padding: 0.15rem 0.45rem; color: var(--text-dim); vertical-align: middle; }

.form { max-width: 620px; display: grid; gap: 1rem; }
.form label { display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--text-muted); }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; color: var(--text); background: rgba(17, 17, 24, 0.85); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.7rem 0.85rem; outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,158,255,0.18); }
.form textarea { min-height: 140px; resize: vertical; }

.post-list { display: grid; gap: 0; max-width: 820px; }
.post-list a.post { display: grid; grid-template-columns: 9rem 1fr; gap: 1.2rem; padding: 1.2rem 0; border-top: 1px solid var(--border); color: inherit; align-items: baseline; }
.post-list a.post:last-child { border-bottom: 1px solid var(--border); }
.post-list a.post:hover { text-decoration: none; }
.post-list a.post:hover h3 { color: var(--accent); }
.post-list .date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.04em; }
.post-list h3 { font-size: 1.08rem; transition: color .15s ease; }
.post-list p { color: var(--text-muted); font-size: 0.92rem; margin: 0.3rem 0 0; }
.post-list .tags { margin-top: 0.5rem; }

.sha { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); word-break: break-all; background: rgba(17,17,24,0.85); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; }
.sha b { color: var(--text-dim); font-weight: 500; }

@media (max-width: 720px) {
  .post-list a.post { grid-template-columns: 1fr; gap: 0.3rem; }
  .band.solid-band { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
  .page { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- shared nav fit on tablets and small laptops ----------
   These pages load the real JetBrains Mono, which is wider than the system fallback the live pages render
   the nav in, so between the mobile breakpoint (980px) and full desktop the nav ran out of room: the
   product switch was clipped and "Contact & Support" wrapped. Nothing here touches assets/ga-nav.css. */
nav.ga-nav .ga-nav-link, nav.ga-nav .ga-nav-cta, nav.ga-nav .ga-nav-logo { white-space: nowrap; }
nav.ga-nav .ga-product-switch, nav.ga-nav .ga-nav-logo { flex-shrink: 0; }
nav.ga-nav .ga-nav-links { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 1360px) {
  nav.ga-nav { padding: 0 1.1rem; }
  nav.ga-nav .ga-nav-link { padding: 8px 9px; font-size: 0.78rem; }
  nav.ga-nav .ga-nav-cta { padding-left: 12px; padding-right: 12px; font-size: 0.78rem; }
  nav.ga-nav .ga-product-switch { margin-left: 0.7rem; }
  nav.ga-nav .ga-product { padding: 6px 11px; font-size: 0.85rem; }
}
@media (max-width: 1180px) {
  nav.ga-nav .ga-nav-link { padding: 8px 6px; font-size: 0.72rem; gap: 4px; }
  nav.ga-nav .ga-nav-links { gap: 0; }
  nav.ga-nav .ga-product { padding: 6px 9px; font-size: 0.8rem; gap: 6px; }
  nav.ga-nav .ga-nav-logo { font-size: 0; gap: 0; }        /* logo mark only; the wordmark returns above 1180px */
  nav.ga-nav .ga-product-switch { margin-left: 0.6rem; margin-right: auto; }   /* logo + switch on the left, links on the right */
  nav.ga-nav .ga-nav-cta { font-size: 0.72rem; }
}