/* ============================================================
   home.css — SquareKeeper marketing site (v2, photography-led)
   Self-contained, single stylesheet for the entire public site —
   every page links only this file (marketing.css retired 2026-06-01).
   Palette pulled from the hero photography: warm paper, warm
   ink, terracotta accent, twilight-blue dark anchor.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* paper & ink */
  --paper:    #F4F7F0;   /* warm linen — page background */
  --surface:  #FFFFFF;   /* raised cards / panels */
  --sunken:   #E9F0E1;   /* alternate section band */
  --ink:      #1B211B;   /* headings — warm near-black */
  --body:     #465041;   /* body copy — warm brown-grey */
  --muted:    #5B6455;   /* secondary / captions — darkened for WCAG AA (was #877D6E, 3.35:1 on --sunken; now ≥5.0:1 on paper/surface/sunken) */
  --line:     #DEE6D5;   /* hairline borders */

  /* terracotta — from the clay roof + brick */
  --clay:      #0A9C07;
  --clay-deep: #0A7D05;  /* hover / pressed */
  --clay-tint: #DAF4D2;  /* soft wash */

  /* twilight — the dusk sky; the page's dark anchor */
  --night:   #15281C;
  --night-2: #0E1E14;

  /* amber — the string lights; sparing highlight only */
  --amber: #0A9C07;
  --brand:  #0A9C07;   /* action accent */

  /* module accents — one per module, used as --mod-color on dots,
     rows, and the suite diagram. Mirrors suite-diagram.js. */
  --mod-om: #4338CA;   /* Operations */
  --mod-mm: #3B82F6;   /* Maintenance */
  --mod-em: #7C3AED;   /* Employee */
  --mod-tp: #10B981;   /* Tenant Portal */
  --mod-vp: #0891B2;   /* Vendor Portal */
  --mod-pm: #F97316;   /* Parking */
  --mod-sm: #DC2626;   /* Security */

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;

  /* structure */
  --wrap: 1180px;
  --radius: 8px;
  --shadow: 0 18px 40px -22px rgba(34, 24, 12, 0.45);
  --shadow-sm: 0 8px 22px -14px rgba(34, 24, 12, 0.40);
}

/* ── Reset / base ──────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--clay-deep); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

strong { color: var(--ink); font-weight: 600; }

::selection { background: var(--clay-tint); color: var(--ink); }

/* ── Skip-to-content link (visually hidden until focused) ──── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--clay);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  border-radius: 6px;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 8px;
  color: #fff;
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ── Layout helpers ────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

section { padding: 104px 0; }
section[id] { scroll-margin-top: 88px; }   /* anchor jumps clear the fixed nav */

.section-head { max-width: 680px; margin: 0 0 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 18px;
}

h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: 21px; }

.section-head p {
  margin-top: 18px;
  font-size: 19px;
  color: var(--body);
}

.lede { font-size: 20px; color: var(--body); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, transform .06s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn.primary { background: var(--clay); color: #fff; border-color: var(--clay); }
.btn.primary:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: #fff; }

.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.outline:hover { border-color: var(--ink); color: var(--ink); }

.btn.ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn.ghost:hover { color: var(--clay); }

.btn.on-photo { color: #fff; border-color: rgba(255,255,255,.6); }
.btn.on-photo:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.btn.large { font-size: 17px; padding: 18px 32px; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .25s ease, box-shadow .25s ease,
              border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.nav-brand img { width: 30px; height: 30px; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
}
.nav-link:hover { color: #fff; }
.caret { font-size: 11px; transition: transform .2s ease; }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-actions .btn.ghost { color: #fff; }
.nav-actions .btn.ghost:hover { color: #fff; opacity: .8; }

/* scrolled / solid state */
.nav.scrolled {
  background: var(--paper);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(34,24,12,.5);
}
.nav.scrolled .nav-brand { color: var(--ink); }
.nav.scrolled .nav-link { color: var(--body); }
.nav.scrolled .nav-link:hover { color: var(--clay); }
.nav.scrolled .nav-actions .btn.ghost { color: var(--ink); }
.nav.scrolled .nav-toggle { color: var(--ink); }

/* mega-menu */
.nav-item-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  width: 620px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-item-dropdown:hover .caret,
.nav-item-dropdown:focus-within .caret { transform: rotate(180deg); }

.nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.nav-dd-item {
  display: flex;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 6px;
  transition: background-color .14s ease;
}
.nav-dd-item:hover { background: var(--sunken); }
.dd-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex: none;
  background: var(--mod-color, var(--clay));
}
.dd-text h4, .dd-text .dd-title { display: block; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); }
.dd-text p { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.nav-dropdown-footer {
  margin-top: 8px;
  padding: 13px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dd-cta { font-weight: 700; font-size: 15px; }
.dd-note { font-size: 13px; color: var(--muted); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

/* CTAs that live in the mobile menu — hidden on desktop (nav uses .nav-actions) */
.nav-menu-cta { display: none; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Three-layer vignette, promoted site-wide from /works: top darkening so the
     eyebrow never washes out, a LEFT-COLUMN wash so headline + lede always sit
     on dark regardless of the photo, plus the original bottom-diagonal. */
  background:
    linear-gradient(180deg, rgba(10,26,18,.60) 0%, rgba(10,26,18,0) 30%),
    linear-gradient(90deg, rgba(8,20,14,.74) 0%, rgba(8,20,14,.36) 34%, rgba(8,20,14,0) 62%),
    linear-gradient(7deg, rgba(8,20,14,.86) 8%, rgba(8,20,14,.30) 48%, rgba(8,20,14,0) 72%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px 86px;
  width: 100%;
}
.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 22px;
}
.hero h1 {
  color: #fff;
  font-size: clamp(40px, 6.4vw, 76px);
  font-weight: 500;
  max-width: 16ch;
  letter-spacing: -0.02em;
}
.hero .lede {
  color: rgba(255,255,255,.90);
  max-width: 50ch;
  margin-top: 24px;
  font-size: clamp(18px, 2vw, 21px);
}
.hero-cta {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.trust-row {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 14.5px;
  color: rgba(255,255,255,.82);
}
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

/* ── Checklists hero — "included / no extra charge" callouts (this hero has
   no CTA buttons; the fact that it's free IS the pitch) ────────────────── */
.hero-badges {
  list-style: none;
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.30);
}
.hero-badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--night-2);
  font-size: 12px; font-weight: 800;
  flex: none;
}
.hero-badge-lead {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--night-2);
  font-weight: 700;
}
.hero-badge-lead .hero-badge-check {
  background: var(--night-2);
  color: var(--amber);
}

/* ── Reframe (phone & legal pad) ───────────────────────────── */
.reframe { background: var(--surface); }
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.split-copy h2 { font-size: clamp(28px, 3.6vw, 40px); }
.split-copy p { margin-top: 20px; }
.split-copy p:first-of-type { margin-top: 26px; }
.split-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split-photo img { width: 100%; height: 100%; object-fit: cover; }

.kicker-rule {
  width: 46px;
  height: 3px;
  background: var(--clay);
  border-radius: 2px;
  margin-bottom: 22px;
}

/* ── Connected system + module index ──────────────────────── */
.system { background: var(--paper); }
.module-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.module-row {
  display: flex;
  gap: 16px;
  padding: 24px 26px;
  background: var(--surface);
  transition: background-color .14s ease;
}
.module-row:hover { background: var(--sunken); }
.module-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  margin-top: 6px;
  flex: none;
  background: var(--mod-color, var(--clay));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod-color, var(--clay)) 16%, transparent);
}
.module-row h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.module-row h3 .arrow { color: var(--muted); transition: transform .14s ease; }
.module-row:hover h3 .arrow { transform: translateX(3px); color: var(--clay); }
.module-row p { font-size: 15px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.module-meta { color: var(--clay); }

.system-note {
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  color: var(--muted);
}

/* ── Cross-module moment (story) ──────────────────────────── */
.moment { background: var(--sunken); }
.moment-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.moment-card h2 { font-size: clamp(28px, 3.8vw, 42px); }
.moment-card .story {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.62;
  color: var(--body);
}
.moment-card .story em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(transparent 62%, var(--clay-tint) 62%);
}

/* ── Free portals — twilight dark band ─────────────────────── */
.portals {
  background: var(--night);
  color: rgba(255,255,255,.82);
  text-align: center;
}
.portals h2 {
  color: #fff;
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(28px, 3.6vw, 40px);
}
.portals p {
  max-width: 58ch;
  margin: 22px auto 0;
  font-size: 19px;
}
.portals .amber { color: var(--amber); }

/* ── Pricing teaser ────────────────────────────────────────── */
.pricing-teaser { background: var(--paper); text-align: center; }
.pricing-teaser .price-line {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 52px);
  color: var(--ink);
  font-weight: 500;
}
.pricing-teaser .price-line .amt { color: var(--clay); }
.pricing-teaser p {
  max-width: 56ch;
  margin: 20px auto 0;
  font-size: 19px;
}
.pricing-teaser .hero-cta { justify-content: center; margin-top: 32px; }

/* ── Final CTA (photo band) ────────────────────────────────── */
.final {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.final-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.final-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,18,28,.88), rgba(10,18,28,.66));
}
.final-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}
.final h2 { color: #fff; font-size: clamp(30px, 4.4vw, 48px); }
.final p { color: rgba(255,255,255,.88); margin-top: 18px; font-size: 19px; }
.final .hero-cta { justify-content: center; }
.final .trust-row { justify-content: center; }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--night-2);
  color: rgba(255,255,255,.62);
  padding: 70px 0 34px;
  font-size: 15px;
}
.footer-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.footer-brand .brand-row img { width: 26px; height: 26px; }
.footer-brand p { margin-top: 14px; max-width: 30ch; line-height: 1.55; }
.footer-social {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.18);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.footer-social a:hover {
  color: #fff;
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  display: block;
}
.footer-col h4, .footer-col .footer-col-title {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: rgba(255,255,255,.62); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  max-width: var(--wrap);
  margin: 46px auto 0;
  padding: 22px 28px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: rgba(255,255,255,.5);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 920px) {
  .nav-links {
    position: absolute;
    top: 76px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 8px 0 0;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-link { color: var(--body); padding: 14px 28px; }
  .nav-toggle { display: block; }
  .nav-dropdown {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 16px 12px;
  }
  .nav-dropdown-grid { grid-template-columns: 1fr; }
  .caret { display: none; }

  /* mobile bar = brand + hamburger only; sign-in / trial move into the menu */
  .nav-actions .btn { display: none; }
  .nav-menu-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 28px 20px;
  }
  .nav-menu-cta .btn { width: 100%; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-photo { order: -1; }
  .module-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  section { padding: 72px 0; }
  .wrap { padding: 0 20px; }

  /* Hero — full-viewport on mobile: headline pinned to the top, CTAs pinned to
     the bottom, the photo left visible through the middle (space-between). */
  .hero { min-height: 100vh; min-height: 100dvh; align-items: stretch; }
  .hero-inner {
    padding: 112px 22px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(10,18,28,.92) 0%, rgba(10,18,28,.40) 34%,
      rgba(10,18,28,.34) 60%, rgba(10,18,28,.82) 100%);
  }
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.13em; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(29px, 8.2vw, 38px); }
  .hero .lede { font-size: 16px; margin-top: 16px; }
  .hero-cta { margin-top: 0; gap: 10px; }
  .trust-row { margin-top: 18px; }

  .hero-cta .btn, .pricing-teaser .hero-cta .btn, .final .hero-cta .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ════ Module & content pages ════════════════════════════════
   Shared components for parking / maintenance / portals / etc.
   The module hero reuses .hero (+ .hero-top / .hero-bottom). */

/* Feature grid — hairline-separated cards, like .module-list */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.feature-card { background: var(--surface); padding: 28px 26px; }
.feature-card h3 {
  font-family: var(--sans);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 9px;
}
.feature-card p { font-size: 15px; line-height: 1.6; color: var(--body); }

/* Field strip — even row of short items, a clay tick on each title */
.field-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.field-item h3, .field-item h4 {
  font-family: var(--sans);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  display: inline-block;
  padding-top: 15px;
  border-top: 2px solid var(--clay);
}
.field-item p { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 9px; }

/* Integration cards — clickable, link to the related module */
.integration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.integration-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  transition: box-shadow .15s ease;
}
.integration-card:hover { box-shadow: var(--shadow-sm); }
.int-conn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.int-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.integration-card h3, .integration-card h4 {
  font-family: var(--sans);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
}
.integration-card p { font-size: 15px; line-height: 1.6; color: var(--body); margin-top: 8px; }

/* FAQ accordion */
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  font-family: var(--sans);
  font-size: 17px; font-weight: 600;
  color: var(--ink);
  padding: 22px 40px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 24px; line-height: 1;
  color: var(--clay);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-answer { padding: 0 0 24px; }
.faq-answer p { font-size: 16px; line-height: 1.65; color: var(--body); }
.faq-answer a { color: var(--clay); text-decoration: underline; }

/* Final CTA band — twilight, centered */
.cta-band { background: var(--night); text-align: center; }
.cta-band h2 {
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  max-width: 20ch; margin: 0 auto;
}
.cta-band p {
  color: rgba(255,255,255,.82);
  font-size: 19px;
  max-width: 54ch; margin: 18px auto 0;
}
.cta-band .hero-cta { justify-content: center; margin-top: 30px; }

@media (max-width: 920px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .field-strip { grid-template-columns: 1fr 1fr; gap: 28px; }
  .integration-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .field-strip { grid-template-columns: 1fr; gap: 22px; }
  .feature-card { padding: 24px 22px; }
  .faq-item summary { font-size: 16px; padding-right: 34px; }
}

/* Placeholder hero — module pages awaiting photography.
   Twilight base + a soft module-color glow; swap in a photo hero when it lands.
   Set --mod on the <header> to the module's accent color. */
.hero.placeholder {
  min-height: auto;
  background:
    radial-gradient(ellipse 90% 70% at 78% 20%,
      color-mix(in srgb, var(--mod, var(--clay)) 30%, transparent), transparent 72%),
    linear-gradient(165deg, var(--night-2), var(--night));
}
.hero.placeholder .hero-inner { display: block; padding: 150px 28px 96px; }
.hero.placeholder .hero-eyebrow { color: var(--mod, var(--amber)); }
@media (max-width: 600px) {
  .hero.placeholder .hero-inner { padding: 124px 22px 64px; }
}

/* ════ Content / utility pages — about, contact, pricing, signup, legal ════ */

/* Compact twilight page header */
.page-hero {
  background: linear-gradient(165deg, var(--night-2), var(--night));
  color: #fff;
  padding: 140px 0 64px;
}
.page-hero .eyebrow { color: var(--amber); }
.page-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 54px); max-width: 20ch; }
.page-hero .lede { color: rgba(255,255,255,.86); margin-top: 18px; max-width: 60ch; }
.page-hero-meta { margin-top: 16px; font-size: 15px; color: rgba(255,255,255,.7); }
.page-hero-meta a { color: var(--amber); }
@media (max-width: 600px) { .page-hero { padding: 116px 0 48px; } }

/* Long-form prose — about, legal */
.prose { max-width: 720px; margin: 0 auto; }
.prose > h2 { font-size: clamp(24px, 3.2vw, 33px); margin-top: 52px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 18px; font-weight: 700;
  color: var(--ink);
  margin-top: 32px;
}
.prose p { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--body); }
.prose ul, .prose ol { margin-top: 16px; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 28px; margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--body); }
.prose ul > li::before {
  content: "";
  position: absolute; left: 5px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay);
}
.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; }
.prose ol > li::before {
  content: counter(prose-ol);
  position: absolute; left: 0; top: 1px;
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  color: var(--clay);
}
.prose a { color: var(--clay); text-decoration: underline; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose-meta { max-width: 720px; margin: 0 auto 36px; font-size: 14px; color: var(--muted); }

/* Forms — contact, signup */
.form { max-width: 600px; margin: 0 auto; }
.form-row { margin-top: 20px; }
.form-row:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.form label {
  display: block;
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.form input, .form textarea, .form select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 13px 14px;
  transition: border-color .14s ease;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--clay);
}
.form textarea { min-height: 130px; resize: vertical; }
.form .btn { width: 100%; margin-top: 24px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.form-status.error { color: var(--clay-deep); }
.form-status.success { color: #2f6b42; }
.form-note { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }
.form-note a { color: var(--clay); }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ════ Pricing page ══════════════════════════════════════════
   Billing toggle, suite bundle card, à-la-carte rows, cost
   comparison. billing-toggle.js sets data-billing on <html>;
   the reveal rule below shows the matching price spans. */

html[data-billing="monthly"] .price-annual,
html[data-billing="annual"]  .price-monthly { display: none; }

.pricing-lead { padding-top: 64px; }

/* Billing cadence toggle */
.bill-toggle-wrap { display: flex; justify-content: center; margin-bottom: 46px; }
.bill-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.bill-toggle-btn {
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  transition: background-color .16s ease, color .16s ease;
}
.bill-toggle-btn:hover { color: var(--ink); }
.bill-toggle-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.save-pill {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--clay);
  background: var(--clay-tint);
  border-radius: 999px;
  padding: 3px 9px;
}

/* Suite bundle card */
.bundle-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 44px 40px;
  text-align: center;
}
.bundle-card .badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--clay);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.bundle-card h2, .bundle-card h3 { font-family: var(--serif); font-size: 27px; font-weight: 500; color: var(--ink); }
.bundle-price {
  font-family: var(--serif);
  font-size: clamp(46px, 8vw, 62px);
  font-weight: 500; line-height: 1;
  color: var(--clay);
  margin-top: 12px;
}
.bundle-price .unit { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--muted); }
.bundle-savings { margin-top: 18px; font-size: 16px; font-weight: 600; color: var(--ink); }
.bundle-savings-detail { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.bundle-includes {
  list-style: none;
  margin: 26px 0 30px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 22px;
  text-align: left;
}
.bundle-includes li {
  position: relative;
  padding-left: 27px;
  font-size: 15px; color: var(--body);
}
.bundle-includes li::before {
  content: "";
  position: absolute; left: 5px; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--clay);
  border-bottom: 2px solid var(--clay);
  transform: rotate(-45deg);
}
.bundle-card .btn { width: 100%; }

/* À-la-carte module rows */
.alacarte { background: var(--sunken); }
.price-rows {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px 26px;
  padding: 22px 26px;
  border-top: 1px solid var(--line);
}
.price-row:first-child { border-top: none; }
.price-row-name {
  font-family: var(--sans);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.price-row-name .dot {
  width: 11px; height: 11px; border-radius: 50%;
  flex: none;
  background: var(--mod-color, var(--clay));
}
.price-row-desc {
  margin-top: 5px; padding-left: 21px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--muted);
}
.price-amt {
  font-family: var(--serif);
  font-size: 27px; font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.price-amt .mo-eq { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); }

/* Checklists "Included" row — a priced-looking box that reads FREE, and makes
   clear it comes with a module rather than being a standalone free app. */
.price-row-included { background: var(--clay-tint); }
.price-amt-included { text-align: right; line-height: 1.15; white-space: nowrap; }
.price-included-tag {
  display: block;
  font-family: var(--serif);
  font-size: 25px; font-weight: 600;
  color: var(--clay);
}
.price-included-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}

.alacarte-note {
  max-width: 820px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

/* Cost comparison table */
.comparison {
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.comparison table { width: 100%; border-collapse: collapse; background: var(--surface); }
.comparison th {
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 15px 20px;
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
}
.comparison td {
  padding: 14px 20px;
  font-size: 15px; line-height: 1.5;
  color: var(--body);
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.comparison tbody tr:first-child td { border-top: none; }
.comparison td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.comparison .cost { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.comparison tr.sum td {
  background: var(--sunken);
  font-weight: 600; color: var(--ink);
  border-top: 2px solid var(--line);
}
.comparison tr.sk td {
  background: var(--clay-tint);
  color: var(--ink); font-weight: 700;
  border-top: 2px solid var(--clay);
}
.comparison-note {
  max-width: 880px;
  margin: 22px auto 0;
  font-size: 13.5px; line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 600px) {
  .pricing-lead { padding-top: 48px; }
  .bill-toggle-btn { padding: 11px 18px; }
  .bundle-card { padding: 32px 24px 30px; }
  .bundle-price { font-size: clamp(40px, 12vw, 52px); }
  .bundle-includes { grid-template-columns: 1fr; gap: 10px; }

  .price-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "info  info"
      "price cta";
    gap: 14px 16px;
    padding: 20px;
  }
  .price-row-info { grid-area: info; }
  .price-amt { grid-area: price; align-self: center; font-size: 24px; }
  .price-row .btn { grid-area: cta; justify-self: end; }

  /* comparison table → stacked label/value cards */
  .comparison thead { display: none; }
  .comparison table, .comparison tbody, .comparison tr, .comparison td { display: block; }
  .comparison tr { border-top: 2px solid var(--line); padding: 10px 0; }
  .comparison tbody tr:first-child { border-top: none; }
  .comparison td, .comparison tbody tr:first-child td {
    border: none;
    padding: 5px 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    white-space: normal;
    text-align: right;
  }
  .comparison td:first-child { white-space: normal; }
  .comparison td::before {
    content: attr(data-label);
    font-family: var(--sans);
    font-weight: 700; font-size: 11px;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    flex: none;
  }
}

/* ════ Signup page ═══════════════════════════════════════════
   The signup form is live — App Check + the signupAndCreateOrg
   callable, driven by signup-form.js. These styles are
   presentation only; the form's classes / IDs / data-attrs are
   the JS contract and must not change. */

/* Field hint under an input */
.form-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* Plan picker */
.signup-form .plan-section-label { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.plan-section-hint { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.plan-section-hint strong { color: var(--ink); }

.signup-form .plan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 0;
  padding: 15px 18px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.signup-form .plan-card:hover { border-color: var(--muted); }
.signup-form .plan-card.is-checked { border-color: var(--clay); background: var(--clay-tint); }
.signup-form .plan-card-bundle { border-color: var(--clay); }

.signup-form .plan-checkbox {
  width: 0; height: 0;
  opacity: 0; margin: 0; padding: 0; border: 0;
  flex: none;
}
.plan-card-check {
  width: 22px; height: 22px;
  flex: none;
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  transition: border-color .14s ease, background-color .14s ease;
}
.plan-card.is-checked .plan-card-check { border-color: var(--clay); background: var(--clay); }
.plan-card.is-checked .plan-card-check::after {
  content: "";
  position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.signup-form .plan-checkbox:focus-visible ~ .plan-card-check {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.plan-card-name { flex: 1; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); }
.plan-card-bundle .plan-card-name { font-size: 17px; font-weight: 700; }
.plan-card-price { flex: none; text-align: right; line-height: 1.4; }
.plan-price-mo { display: block; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); }
.plan-price-mo small { font-weight: 400; color: var(--muted); }
.plan-price-yr { display: block; font-size: 12.5px; color: var(--muted); }
.plan-price-note { display: block; font-size: 11.5px; color: var(--muted); }

.plan-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 6px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.plan-divider::before, .plan-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.plan-total {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--sunken);
  border-radius: var(--radius);
  font-size: 14px; line-height: 1.6;
}
.plan-total-empty { color: var(--muted); margin: 0; }
.plan-total-active { display: none; color: var(--body); margin: 0; }
.plan-total.has-selection .plan-total-empty { display: none; }
.plan-total.has-selection .plan-total-active { display: block; }
.plan-total strong { color: var(--ink); }

/* ════ Legal pages ═══════════════════════════════════════════ */

/* Inline code — privacy-policy subprocessor domains, etc. */
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--sunken);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Draft notice — pages still pending counsel review (e.g. the EULA) */
.draft-banner {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px; font-weight: 700;
  color: var(--night-2);
  background: var(--amber);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.draft-banner a { color: var(--night-2); text-decoration: underline; }

/* ════ Suite diagram — "how it works together" explorer ════════
   Rendered by suite-diagram.js into <div data-suite-diagram>.
   Map on the left, a live detail panel on the right — both stay in
   view together on a laptop. Stacks to one column on narrow screens. */
.sd { max-width: 1040px; margin: 0 auto; }
.sd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(258px, 1fr);
  gap: 30px;
  align-items: stretch;
}
.sd-stage { position: relative; min-width: 0; }
.sd-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: radial-gradient(1100px 540px at 50% 16%, #fffdf7 0%, var(--paper) 70%);
}
.sd-node { cursor: pointer; }
.sd-node:focus { outline: none; }
.sd-node .sd-ring { transition: stroke-width .18s ease; }
.sd-node:hover .sd-ring,
.sd-node:focus-visible .sd-ring { stroke-width: 5; }
.sd-node:focus-visible .sd-halo { opacity: .26 !important; }
.sd-nlabel { font: 600 13px/1 var(--sans); fill: var(--ink); }
.sd-nlabel.sd-sub { font-weight: 500; fill: var(--muted); font-size: 11px; }
.sd-hublabel { font: 700 13px/1 var(--sans); fill: #fff; }
.sd-wire { transition: opacity .16s ease, stroke-width .16s ease; }

/* detail panel — right of the map on desktop, below it on mobile.
   Capped to the map's height by JS (overflow scrolls) so swapping
   modules never changes the row height and shifts the map. */
.sd-cap {
  position: relative;
  min-height: 210px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
}
.sd-cap-title { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.sd-cap-essence { margin: 8px 0 2px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.sd-ph {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}
.sd-cap ul { margin: 0; padding: 0; list-style: none; }
.sd-cap li { margin: 0 0 7px; line-height: 1.45; color: var(--body); font-size: 14px; }
.sd-cap li b { font-weight: 700; }
.sd-hint { color: var(--muted); font-style: italic; font-size: 15px; margin-top: 6px; }
.sd-cta { display: inline-block; margin-top: 12px; font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--clay); }
.sd-cta:hover { color: var(--clay-deep); }
.sd-clear {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 17px; line-height: 1; padding: 4px;
}
.sd-clear:hover { color: var(--ink); }

.sd-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 24px; font-size: 13px; }
.sd-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--body); }
.sd-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

@media (max-width: 840px) {
  .sd-grid { grid-template-columns: 1fr; gap: 10px; }
  .sd-cap { align-self: stretch; min-height: 0; margin-top: 8px; }
}
@media (max-width: 600px) {
  .sd-cap { padding: 18px; }
  .sd-cap-title { font-size: 19px; }
  .sd-cap-essence { font-size: 15px; }
  .sd-legend { gap: 9px 14px; font-size: 12px; }
}

/* ════ Workflow strip — numbered "here's how it actually goes" steps ══ */
.workflow-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px 26px;
}
.wf-step { min-width: 0; }
.wf-num {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--clay-tint);
  color: var(--clay-deep);
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  margin-bottom: 14px;
}
.wf-step h3, .wf-step h4 { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.wf-step p { font-size: 14.5px; line-height: 1.55; color: var(--body); }
@media (max-width: 900px) { .workflow-strip { grid-template-columns: 1fr 1fr; gap: 30px 26px; } }
@media (max-width: 600px) { .workflow-strip { grid-template-columns: 1fr; gap: 24px; } }

/* ── Works pricing tiers — comparison cards ─────────────────────────
   Token-driven so it reads correctly in any theme. Rows are grounded
   in what the code actually enforces; "soon" rows are unbuilt features
   on the not-yet-purchasable Business tier. */
.pricing-tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 4px;
}
@media (max-width: 900px){
  .pricing-tiers{ grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}
.ptier{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-sm);
}
.ptier--featured{ border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay), var(--shadow-sm); }
.ptier--soon{ background: var(--paper); }

.ptier-badge{
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--sunken); color: var(--muted); border: 1px solid var(--line);
}
.ptier-name{
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--ink); text-align: center; line-height: 1.2;
}
.ptier-price{ text-align: center; margin: 8px 0 20px; }
.ptier-price .amt{
  font-size: 44px; font-weight: 700; color: var(--clay);
  letter-spacing: -.02em; line-height: 1;
}
.ptier-price .per{ font-size: 15px; color: var(--muted); font-weight: 500; }

.ptier-lims{
  list-style: none; margin: 0 0 18px; padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.ptier-lims li{ font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: center; }

.ptier-feats{
  list-style: none; margin: 0 0 22px; padding: 0; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.ptier-feats li{
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; line-height: 1.45; color: var(--body);
}
.ptier-feats .tick{ width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ptier-feats li.yes .tick{ color: var(--clay); }
.ptier-feats li.no,
.ptier-feats li.soon{ color: var(--muted); }
.ptier-feats li.no .tick,
.ptier-feats li.soon .tick{ color: var(--muted); }
.ptier-soonchip{
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 7px; margin-left: 2px; align-self: center; white-space: nowrap;
}

.ptier-cta{ width: 100%; justify-content: center; margin-top: auto; }
.ptier-unavail{
  margin-top: auto; text-align: center; font-size: 14px; font-weight: 600;
  color: var(--muted); padding: 12px; border: 1px dashed var(--line); border-radius: 10px;
}
.ptier-note{ text-align: center; margin-top: 24px; font-size: 15px; color: var(--muted); }
.nav-brand img,.brand-row img{ border-radius:24%; }

/* Language toggle - shared, every page (engine: assets/js/i18n.js) */
.lang-toggle{ display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:rgba(0,0,0,.28); }
.nav.scrolled .lang-toggle{ background:rgba(15,23,42,.07); }
.lang-toggle button{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  padding:5px 11px; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:rgba(255,255,255,.82); border-radius:999px; line-height:1;
}
.nav.scrolled .lang-toggle button{ color:var(--muted); }
.lang-toggle button[aria-pressed="true"]{ background:var(--clay); color:#fff; }
.nav.scrolled .lang-toggle button[aria-pressed="true"]{ color:#fff; }

/* Honest notice when ES is picked on a page not yet translated */
.i18n-notice{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:14px; max-width:min(92vw,560px);
  background:var(--night); color:#fff; padding:12px 16px; border-radius:12px;
  font-size:14px; line-height:1.45; box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.i18n-notice[hidden]{ display:none; }
.i18n-notice-x{
  flex:none; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  font:inherit; font-size:12.5px; font-weight:700; padding:5px 10px; border-radius:999px; cursor:pointer;
}
.i18n-notice-x:hover{ background:rgba(255,255,255,.12); }

/* ── Green theme — accessibility hardening (measured, WCAG AA) ──────
   Role-separated green. The bright brand green stays on FILLS
   (buttons, logo, decorative, on-dark eyebrows); anything rendered as
   TEXT on a light surface uses a deeper green so every string clears
   4.5:1 on white, paper AND sunken. Values measured, not guessed:
     #0A7504 text  -> 5.9:1 white / 5.5:1 paper / 5.1:1 sunken
     #10180E on bright fill -> 4.98:1 */
:root{
  --green-bright: #0A9C07;   /* brand green — fills & on-dark accents */
  --green-onfill: #10180E;   /* text ON the bright fill               */
  --clay:      #0A7504;      /* text / links / section eyebrows       */
  --clay-deep: #075802;      /* hover / pressed                       */
  --brand:     #0A7504;      /* $0 price, owner-band link             */
}
.btn.primary,
.skip-link,
.wf-num,
.lang-toggle button[aria-pressed="true"]{
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: var(--green-onfill);
}
.btn.primary:hover{ background:#0A8A06; border-color:#0A8A06; color: var(--green-onfill); }
/* Eyebrows over the dark hero photo stay bright — a deep green would
   sink into the scrim. */
.hero .hero-eyebrow,
.page-hero .eyebrow,
.page-hero-meta a{ color: var(--green-bright); }