/* ================================================
   Klopt - Design System
   by Beast Block Tech
   ================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---- Tokens ---- */
:root {
  /* paper palette */
  --paper: #FAF7F2;
  --paper-warm: #F4EFE7;
  --paper-deep: #ECE5D8;
  --ink: #0E1014;
  --ink-muted: #4A4D55;
  --ink-soft: #74777E;
  --ink-faint: #A8AAB0;
  --rule: #DDD7CB;
  --rule-soft: #E8E2D4;

  /* brand */
  --green: #0F5132;
  --green-deep: #0A3C25;
  --green-bright: #15803D;
  --green-soft: #DCEBE0;
  --green-tint: #F0F6F1;

  /* states */
  --amber: #B45309;
  --amber-soft: #FEF3E2;
  --rose: #9F1239;
  --rose-soft: #FBE8EC;
  --blue: #1E3A8A;
  --blue-soft: #E5EAF5;

  /* typography */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --shell: 1240px;
  --gutter: 32px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
}

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(15, 81, 50, 0.025), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(180, 83, 9, 0.018), transparent 50%);
  background-attachment: fixed;
  font-feature-settings: "ss01", "ss02", "cv11";
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.06 0 0 0 0 0.07 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  mix-blend-mode: multiply;
}

main, header, footer, section { position: relative; z-index: 2; }

/* ---- Typography ---- */
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.tabular { font-variant-numeric: tabular-nums; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 96, "SOFT" 30;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

p.lede {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-muted);
  letter-spacing: -0.008em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.fineprint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---- Layout shell ---- */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.shell-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* section spacing */
.section { padding: clamp(72px, 9vw, 130px) 0; }
.section-tight { padding: clamp(56px, 7vw, 88px) 0; }

/* ---- Top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter);
  max-width: var(--shell);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--green);
  color: var(--paper);
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--rule);
}

.topnav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topnav .nav-links {
  display: flex;
  gap: 24px;
}
.topnav a {
  font-size: 0.92rem;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}
.topnav a:hover { color: var(--ink); }
.topnav a.active,
.topnav a[aria-current="page"] {
  color: var(--green-deep);
  position: relative;
}
.topnav a.active::after,
.topnav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--green);
  border-radius: 1px;
}

/* status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 500;
}
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(21, 128, 61, 0.05); }
}

/* language switcher */
.langsw {
  display: inline-flex;
  align-items: center;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.langsw button {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.langsw button.active { background: var(--ink); color: var(--paper); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-m);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--green); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-warm); }
.btn-link {
  color: var(--ink);
  padding: 8px 0;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  gap: 6px;
}
.btn-link:hover { color: var(--green); border-color: var(--green); }
.btn-sm { padding: 8px 12px; font-size: 0.85rem; }
.btn-arrow { transition: transform 0.2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---- Hero ---- */
.hero {
  padding: clamp(56px, 8vw, 110px) 0 clamp(56px, 7vw, 90px);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 52px;
  align-items: end;
}
@media (min-width: 920px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
}
.hero-eyebrow {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}
.hero-title {
  margin-bottom: 24px;
}
.hero-title em {
  font-style: italic;
  font-weight: 360;
  color: var(--green);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero-lede {
  max-width: 540px;
  margin-bottom: 36px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero-meta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--green); }

/* ---- Mock window (used for screen previews) ---- */
.mockwin {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--rule);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 60px -25px rgba(14, 16, 20, 0.18),
    0 12px 30px -15px rgba(14, 16, 20, 0.12);
  overflow: hidden;
}
.mockwin-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #fafafa, #f3f3f1);
  border-bottom: 1px solid var(--rule);
}
.mockwin-dots { display: flex; gap: 6px; }
.mockwin-dots span { width: 11px; height: 11px; border-radius: 50%; background: #d8d3c8; }
.mockwin-dots span:nth-child(1) { background: #e7baa9; }
.mockwin-dots span:nth-child(2) { background: #e9d291; }
.mockwin-dots span:nth-child(3) { background: #b9d4a5; }
.mockwin-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  background: var(--paper-warm);
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--rule-soft);
}
.mockwin-url svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 5px; color: var(--green); }
.mockwin-body { padding: 0; }

/* ---- Section helpers ---- */
.section-head {
  margin-bottom: 56px;
  max-width: 760px;
}
.section-head .eyebrow { margin-bottom: 14px; display: inline-block; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--ink-muted); font-size: 1.05rem; max-width: 640px; }

.divider { border-top: 1px solid var(--rule-soft); margin: 0; }

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}
.plan {
  position: relative;
  background: #fff;
  border-radius: var(--radius-l);
  border: 1px solid var(--rule);
  padding: 36px 32px;
}
.plan-featured {
  border: 2px solid var(--ink);
  background: var(--paper-warm);
}
.plan-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 460;
  margin-bottom: 6px;
  letter-spacing: -0.012em;
}
.plan-tagline { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: 28px; }
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.plan-price-big {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 380;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 96;
}
.plan-price-sub { font-size: 0.95rem; color: var(--ink-muted); }
.plan-price-detail { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 24px; }
.plan-list { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 28px; }
.plan-list li {
  display: flex;
  gap: 10px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.plan-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 6px;
  width: 14px;
  height: 14px;
  background: var(--green-soft);
  border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2 L5.7 9.8 L11 4' stroke='%230F5132' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
}

/* ---- Footer ---- */
.foot {
  border-top: 1px solid var(--rule);
  padding: 56px 0 36px;
  background: var(--paper-warm);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
.foot h5 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 14px;
}
.foot ul li { margin-bottom: 8px; }
.foot ul a { color: var(--ink-muted); font-size: 0.92rem; }
.foot ul a:hover { color: var(--ink); }
.foot-bot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---- Forms ---- */
.formfield { margin-bottom: 16px; }
.formfield label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.formfield input, .formfield textarea, .formfield select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  background: #fff;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.formfield input:focus, .formfield textarea:focus, .formfield select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14, 16, 20, 0.06);
}
.formfield textarea { resize: vertical; min-height: 110px; }
.formgrid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .formgrid { grid-template-columns: 1fr; } }

/* form result message */
.formresult { display: none; padding: 14px; border-radius: var(--radius-m); font-size: 0.92rem; margin-top: 12px; }
.formresult.ok { display: block; background: var(--green-tint); color: var(--green-deep); border: 1px solid var(--green-soft); }
.formresult.err { display: block; background: var(--rose-soft); color: var(--rose); border: 1px solid #f0c7cf; }

/* ---- Cards ---- */
.cardgrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  padding: 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -22px rgba(14, 16, 20, 0.18); border-color: var(--ink); }
.card-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.55; }

/* ---- Comparison table ---- */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  background: #fff;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.compare thead th {
  background: var(--paper-warm);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.compare thead th:first-child { background: var(--ink); color: var(--paper); }
.compare tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare tbody td:first-child { font-weight: 500; }
.compare .yes { color: var(--green); font-weight: 500; }
.compare .no { color: var(--ink-faint); }
.compare .partial { color: var(--amber); font-weight: 500; }

/* ---- Decorative rules and accents ---- */
.rule-thin { height: 1px; background: var(--rule-soft); margin: 0 auto; max-width: 80px; }

.callout {
  background: var(--paper-warm);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: 22px 26px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.callout strong { color: var(--ink); }

/* ---- Mockup-specific styles (used in dashboards) ---- */
.dash {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #fff;
  min-height: 580px;
  font-size: 0.88rem;
}
.dash-side {
  background: #FAFAF7;
  border-right: 1px solid var(--rule);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dash-side-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
}
.dash-side-brand .brand-mark { width: 22px; height: 22px; border-radius: 5px; }
.dash-side-brand .brand-mark svg { width: 12px; height: 12px; }
.dash-side h6 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0 8px;
  margin-bottom: 6px;
}
.dash-side-nav { display: flex; flex-direction: column; gap: 1px; }
.dash-side-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.dash-side-nav a:hover { background: var(--paper-warm); }
.dash-side-nav a.active { background: var(--ink); color: var(--paper); }
.dash-side-nav a svg { width: 14px; height: 14px; flex-shrink: 0; }
.dash-side-foot {
  margin-top: auto;
  padding: 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 9px;
}
.dash-side-foot .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center; font-weight: 600; font-size: 0.78rem;
}

.dash-main { padding: 22px 26px; overflow: hidden; }
.dash-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  gap: 16px;
}
.dash-bar h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 460; margin-bottom: 4px; letter-spacing: -0.012em; }
.dash-bar small { color: var(--ink-soft); font-size: 0.82rem; }
.dash-actions { display: flex; gap: 8px; }
.dash-actions button {
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dash-actions button:hover { border-color: var(--ink); color: var(--ink); }
.dash-actions button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* stat row */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-m);
  padding: 14px 16px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.stat-val {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 380;
  letter-spacing: -0.018em;
  line-height: 1;
}
.stat-meta { font-size: 0.74rem; color: var(--ink-soft); margin-top: 4px; }
.stat-meta .up { color: var(--green); }
.stat-meta .down { color: var(--rose); }

/* dash columns */
.dash-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}

.panel {
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.panel-head h4 { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.005em; }
.panel-head .badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-deep);
  padding: 3px 7px;
  border-radius: 4px;
}
.panel-body { padding: 14px 16px; font-size: 0.86rem; }

/* tables in panels */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.dtable th, .dtable td { text-align: left; padding: 9px 12px; }
.dtable thead th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.dtable tbody tr { border-bottom: 1px solid var(--rule-soft); }
.dtable tbody tr:last-child { border-bottom: none; }
.dtable tbody tr:hover { background: var(--paper-warm); }
.dtable td.right { text-align: right; }
.dtable td .badge-s {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.badge-ok { background: var(--green-soft); color: var(--green-deep); }
.badge-warn { background: var(--amber-soft); color: var(--amber); }
.badge-bad { background: var(--rose-soft); color: var(--rose); }
.badge-info { background: var(--blue-soft); color: var(--blue); }
.badge-mute { background: var(--paper-deep); color: var(--ink-muted); }

/* mini bar chart */
.mbar {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mbar-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 12px; font-size: 0.82rem; }
.mbar-track { height: 8px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
.mbar-fill { height: 100%; background: var(--ink); border-radius: 999px; }
.mbar-row.green .mbar-fill { background: var(--green); }
.mbar-row.amber .mbar-fill { background: var(--amber); }
.mbar-row.rose .mbar-fill { background: var(--rose); }
.mbar-val { text-align: right; font-family: var(--font-mono); color: var(--ink-muted); font-size: 0.78rem; }

/* spark / line chart wrapper */
.chart-wrap { position: relative; height: 180px; }

/* invoice review screen */
.inv-grid { display: grid; grid-template-columns: 1fr 280px; min-height: 580px; }
.inv-main { padding: 22px 26px; overflow-y: auto; }
.inv-side { border-left: 1px solid var(--rule); background: var(--paper); padding: 22px 22px; }
.inv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.inv-head h3 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.01em; }
.inv-head small { color: var(--ink-soft); display: block; font-size: 0.82rem; margin-top: 2px; }
.inv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}
.inv-status.bad { background: var(--rose-soft); color: var(--rose); }

.inv-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; padding: 16px; background: var(--paper); border-radius: var(--radius-m); border: 1px solid var(--rule-soft); }
.inv-meta dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.inv-meta dd { font-size: 0.92rem; font-weight: 500; }

.inv-lines { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin-bottom: 22px; }
.inv-lines thead th { padding: 10px 12px; text-align: left; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--rule); font-weight: 500; }
.inv-lines tbody td { padding: 11px 12px; border-bottom: 1px solid var(--rule-soft); }
.inv-lines tbody tr.flag { background: var(--rose-soft); }
.inv-lines tbody tr.flag td { color: var(--ink); }
.inv-lines tbody tr.flag td:first-child { border-left: 3px solid var(--rose); padding-left: 9px; }
.inv-lines td.right { text-align: right; font-variant-numeric: tabular-nums; }
.inv-lines .delta { color: var(--rose); font-weight: 500; }
.inv-lines .ok-ind { color: var(--green); }

.reasonbox {
  background: var(--rose-soft);
  border-left: 3px solid var(--rose);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: 14px 18px;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 22px;
}
.reasonbox h5 { font-size: 0.82rem; color: var(--rose); margin-bottom: 4px; font-weight: 600; }

.inv-side h6 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.inv-side .checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.inv-side .checklist li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.85rem; }
.inv-side .checklist .ic {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
}
.inv-side .checklist .ic.ok { background: var(--green-soft); color: var(--green-deep); }
.inv-side .checklist .ic.bad { background: var(--rose-soft); color: var(--rose); }
.inv-side .checklist .ic svg { width: 11px; height: 11px; }

.inv-actions { display: flex; flex-direction: column; gap: 8px; }
.inv-actions .btn { width: 100%; justify-content: center; }
.inv-actions .btn-sm { font-size: 0.85rem; padding: 9px 14px; }

/* price list manager */
.plm-grid { display: grid; grid-template-columns: 280px 1fr; min-height: 580px; }
.plm-side { border-right: 1px solid var(--rule); padding: 18px 14px; background: var(--paper); }
.plm-side .search { width: 100%; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; font-size: 0.85rem; margin-bottom: 14px; }
.plm-list { display: flex; flex-direction: column; gap: 2px; }
.plm-list a { display: block; padding: 9px 11px; border-radius: 6px; font-size: 0.85rem; color: var(--ink-muted); }
.plm-list a:hover { background: var(--paper-warm); }
.plm-list a.active { background: var(--ink); color: var(--paper); }
.plm-list a small { display: block; font-size: 0.72rem; color: var(--ink-faint); margin-top: 2px; }
.plm-list a.active small { color: rgba(250, 247, 242, 0.6); }
.plm-main { padding: 22px 26px; }
.plm-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-soft); }
.plm-head h3 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 4px; }
.plm-head .meta { font-size: 0.82rem; color: var(--ink-soft); display: flex; gap: 14px; }

.plm-versions { margin-bottom: 22px; }
.plm-version {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--rule-soft);
  border-radius: var(--radius-m); margin-bottom: 8px;
  background: #fff;
}
.plm-version.active { border-color: var(--green); background: var(--green-tint); }
.plm-version-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--paper-warm); display: grid; place-items: center;
}
.plm-version.active .plm-version-icon { background: var(--green-soft); }
.plm-version-icon svg { width: 16px; height: 16px; color: var(--ink-muted); }
.plm-version.active .plm-version-icon svg { color: var(--green-deep); }
.plm-version-name { font-weight: 500; font-size: 0.92rem; }
.plm-version-name small { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; font-weight: 400; }
.plm-version-meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft); }
.plm-version-status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--green-soft);
  color: var(--green-deep);
  font-weight: 500;
}

.dropzone {
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius-m);
  padding: 22px;
  text-align: center;
  background: var(--paper);
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.dropzone strong { color: var(--ink); display: block; margin-bottom: 4px; font-weight: 500; }
.dropzone svg { width: 22px; height: 22px; margin: 0 auto 10px; color: var(--ink-soft); display: block; }

/* email report mockup */
.email {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 30px 60px -25px rgba(14, 16, 20, 0.18);
}
.email-bar {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.email-bar svg { width: 14px; height: 14px; }
.email-head { padding: 22px 28px 18px; border-bottom: 1px solid var(--rule-soft); }
.email-head h2 { font-family: var(--font-display); font-size: 1.45rem; margin-bottom: 6px; letter-spacing: -0.012em; font-weight: 460; }
.email-head .from { font-size: 0.85rem; color: var(--ink-muted); }
.email-body { padding: 22px 28px 28px; }
.email-body p { font-size: 0.93rem; color: var(--ink-muted); margin-bottom: 14px; line-height: 1.55; }
.email-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 22px; padding: 16px; background: var(--paper); border-radius: var(--radius-m); border: 1px solid var(--rule-soft); }

/* user access screen */
.users { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.users thead th { padding: 12px 14px; text-align: left; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--rule); background: var(--paper); font-weight: 500; }
.users tbody td { padding: 13px 14px; border-bottom: 1px solid var(--rule-soft); }
.users .userrow { display: flex; align-items: center; gap: 11px; }
.users .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 0.82rem; flex-shrink: 0; }
.users .av-1 { background: #DCEBE0; color: #0F5132; }
.users .av-2 { background: #FEF3E2; color: #B45309; }
.users .av-3 { background: #E5EAF5; color: #1E3A8A; }
.users .av-4 { background: #FBE8EC; color: #9F1239; }
.users .av-5 { background: #F0E6F5; color: #6B21A8; }
.users .scope { display: flex; flex-wrap: wrap; gap: 4px; }
.users .scope .chip { background: var(--paper-deep); padding: 2px 7px; border-radius: 4px; font-size: 0.74rem; font-family: var(--font-mono); }
.users .scope .chip-all { background: var(--green-soft); color: var(--green-deep); font-weight: 500; }

/* analytics */
.analytics-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }

.svgchart { width: 100%; height: 200px; display: block; }

/* ---- FAQ accordion ---- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 460;
  letter-spacing: -0.008em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--ink-soft); transition: transform 0.2s; font-family: var(--font-body); font-weight: 300; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { color: var(--green); }
.faq details > div { padding: 0 0 22px; color: var(--ink-muted); font-size: 0.97rem; line-height: 1.65; max-width: 760px; }

/* ---- Misc utilities ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-s { gap: 8px; }
.gap-m { gap: 16px; }
.gap-l { gap: 24px; }
.center { text-align: center; }
.mt-s { margin-top: 8px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 48px; }
.mb-s { margin-bottom: 8px; }
.mb-m { margin-bottom: 24px; }
.mb-l { margin-bottom: 48px; }

/* ---- Animation: stagger reveal on load ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.15s; }
.rise-3 { animation-delay: 0.28s; }
.rise-4 { animation-delay: 0.42s; }
.rise-5 { animation-delay: 0.55s; }

/* ---- Responsive tweaks ---- */
@media (max-width: 880px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-cols { grid-template-columns: 1fr; }
  .inv-grid { grid-template-columns: 1fr; }
  .inv-side { border-left: none; border-top: 1px solid var(--rule); }
  .plm-grid { grid-template-columns: 1fr; }
  .plm-side { border-right: none; border-bottom: 1px solid var(--rule); }
  .analytics-grid { grid-template-columns: 1fr; }
  .topnav .nav-links { display: none; }
}

/* ---- Hero dashboard mockup: compact desktop layout, full reflow on mobile ---- */
.dash-hero {
  grid-template-columns: 180px 1fr;
  min-height: 460px;
  font-size: 0.78rem;
}
.dash-side-hero { padding: 12px 10px; }
.dash-main-hero { padding: 14px 18px; }
.dash-hero-title {
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.stats-hero {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* ---- Hamburger button + mobile menu panel ---- */
.hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hamburger:hover { border-color: var(--ink); }
.hamburger svg { width: 22px; height: 22px; }
.hamburger .ham-top, .hamburger .ham-mid, .hamburger .ham-bottom {
  transition: transform 0.18s ease, opacity 0.18s ease;
  transform-origin: center;
}
.hamburger.open .ham-top    { transform: translateY(5px) rotate(45deg); }
.hamburger.open .ham-mid    { opacity: 0; }
.hamburger.open .ham-bottom { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--paper);
  border-top: 1px solid var(--rule-soft);
  padding: 12px 18px 18px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block;
  padding: 14px 6px;
  font-size: 1.02rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.active { color: var(--green-deep); font-weight: 500; }
.mobile-menu a.mm-back {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 8px 6px;
}
.mobile-menu a.mm-cta {
  margin-top: 10px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-m);
  text-align: center;
  border-bottom: none;
  padding: 14px;
  font-weight: 500;
}
.mobile-menu a.mm-cta:hover { background: var(--green-deep); }
.mm-langsw {
  display: flex;
  gap: 8px;
  padding: 14px 0 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.mm-langsw button {
  flex: 1;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  cursor: pointer;
}
.mm-langsw button.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

body.menu-open { overflow: hidden; }

/* ---- Mobile-specific responsive fixes ---- */
@media (max-width: 760px) {
  /* Topbar: replace inline desktop nav with hamburger */
  .hamburger { display: flex; }
  .topnav .nav-links { display: none; }
  .topnav .langsw { display: none; }
  .topnav .desktop-cta { display: none; }
  .topnav { gap: 8px; }
  .topbar-inner { padding: 10px 18px; }
  .brand-tag { display: none; }

  /* Hero on mobile: keep the dashboard mockup visible (it is the credibility
     signal) but give it proper breathing room and let it use full width.
     The visual break between hero text and mockup makes it read as a clean
     "here is the product" section rather than a half-cropped bleed. */
  .hero { padding-bottom: 36px; }
  .hero-grid > div:nth-child(2) {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--rule-soft);
  }
  /* Hero mockup reflows: sidebar hidden, stats become 2x2, content fits. */
  .dash-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    font-size: 0.85rem;
  }
  .dash-side-hero { display: none; }
  .stats-hero { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Demo screens get tighter padding so content does not kiss the edges */
  .demo-screen { padding: 36px 0 28px; }
  .demo-screen-head { padding: 0 18px; }
  .demo-screen-head h2 { font-size: 1.45rem; }
  .demo-screen-head p { font-size: 0.92rem; }

  /* Mockup window: reduce internal padding, allow contents to scroll horizontally */
  .mockwin { border-radius: 10px; }
  .mockwin-bar { padding: 8px 10px; }
  .mockwin-url { font-size: 0.62rem; padding: 4px 8px; }
  .dash-main { padding: 16px 14px; }

  /* Demo-nav becomes horizontal scroll on mobile, with momentum scrolling */
  .demo-nav-inner {
    gap: 16px;
    padding: 0 18px;
    -webkit-overflow-scrolling: touch;
  }
  .demo-nav a { font-size: 0.78rem; }

  /* Dash bar: stack title above actions, wrap actions */
  .dash-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .dash-actions {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .dash-actions button {
    font-size: 0.78rem;
    padding: 6px 10px;
    white-space: nowrap;
  }

  /* Stats grid: 2x2 on small mobile (was overriding to 1fr 1fr at 880, that is correct;
     here we just tighten font sizes so values do not overflow their cards) */
  .stat-val { font-size: 1.7rem; }
  .stat-label { font-size: 0.62rem; }
  .stat-meta { font-size: 0.7rem; }

  /* Tables: wrap in a scroll container so all columns remain visible.
     The table itself gets a min-width so columns do not collapse to unreadable. */
  .dash-main .panel,
  .inv-main,
  .plm-main {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dtable {
    min-width: 540px;
    font-size: 0.78rem;
  }
  .dtable th, .dtable td { padding: 7px 9px; }
  .users {
    min-width: 640px;
    font-size: 0.8rem;
  }
  .inv-lines {
    min-width: 580px;
    font-size: 0.78rem;
  }
  .inv-lines th, .inv-lines td { padding: 7px 8px; }

  /* Invoice meta: 2-column grid instead of 4 */
  .inv-meta { grid-template-columns: 1fr 1fr; gap: 10px; }
  .inv-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Bar charts (rejection reasons, top suppliers): tighter columns */
  .mbar-row {
    grid-template-columns: 100px 1fr 50px;
    gap: 8px;
    font-size: 0.78rem;
  }

  /* Price-list manager: side becomes horizontal-scroll list of suppliers */
  .plm-side {
    max-height: 220px;
    overflow-y: auto;
  }
  .plm-versions { padding: 0 4px; }
  .plm-version-name { font-size: 0.84rem; }

  /* Email mockup: tighter padding */
  .email-body { padding: 18px 16px; font-size: 0.88rem; }
  .email-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .email-stats .stat-val { font-size: 1.4rem; }

  /* Topbar lang switcher: smaller on mobile */
  .langsw { transform: scale(0.9); }
  .topbar .btn-sm { padding: 6px 10px; font-size: 0.82rem; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Compare table on mobile: scrollable */
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-table { min-width: 620px; }
}

@media (max-width: 480px) {
  /* Very small screens */
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 12px; }
  .stat-val { font-size: 1.5rem; }
  .email-stats { grid-template-columns: 1fr; gap: 4px; }
  .demo-screen-head h2 { font-size: 1.25rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .topbar-inner { padding: 0 14px; }
  .shell { padding: 0 16px; }
}

/* preview-only banner */
.preview-banner {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 60;
}
.preview-banner strong { color: #ffd591; font-weight: 500; }

/* =========================================================
   v2 additions - landing page polish + responsive hardening
   ========================================================= */

/* ---- topbar opacity bump + button definition ---- */
.topbar { background: rgba(250, 247, 242, 0.94); }

/* -------- Topbar Request access button --------
   Scoped to the topbar so it never depends on the page background or
   browser theme. Solid brand green with cream text and a deeper-green
   border. High contrast against both light and dark surroundings. */
.topbar .btn-primary {
  background: var(--green);
  color: #FFFFFF;
  border: 1px solid var(--green-deep);
  font-weight: 500;
}
.topbar .btn-primary:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #FFFFFF;
}
.topbar .btn-primary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Hero / form button keeps the ink-on-cream look it had, with
   an explicit border to hold its shape over any background tint. */
.btn-primary { border: 1px solid var(--ink); }

/* ---- 3rd hero CTA (text-link with icon) ---- */
.btn-text {
  background: transparent;
  color: var(--ink-muted);
  padding: 12px 4px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
}
.btn-text:hover { color: var(--green); border-bottom-color: var(--green); }
.btn-text svg { width: 15px; height: 15px; }

/* ---- flow diagram (replaces 6-card grid in "what it does") ---- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  position: relative;
  margin-bottom: 32px;
}
.flow-node {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  padding: 24px 22px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flow-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--green-tint);
  color: var(--green-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.flow-node-icon svg { width: 22px; height: 22px; }
.flow-node h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 460;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.flow-node p { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.5; }
.flow-arrow {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--ink-faint);
  pointer-events: none;
}
.flow-arrow svg { width: 100%; height: 100%; }
.flow-extras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.flow-extras .flow-node { padding: 20px 22px; }
.flow-extras .flow-node-icon { background: var(--paper-warm); color: var(--ink); }

/* ---- compact 5-step horizontal grid (how-it-works) ---- */
.steps5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}
.step5 {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-l);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step5-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 380;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1;
}
.step5 h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 460;
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.step5 p {
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---- works-with: items with brand icons ---- */
.works-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  padding: 22px;
}
.works-card h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-weight: 500;
}
.works-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.works-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  color: var(--ink);
}
.works-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--paper-warm);
  display: grid;
  place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.works-item-icon svg { width: 16px; height: 16px; }
.works-item small {
  color: var(--ink-faint);
  font-size: 0.78rem;
  margin-left: auto;
  font-family: var(--font-mono);
}

/* ---- comparison table ---- */
.compare-table-wrap { width: 100%; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  overflow: hidden;
  font-size: 0.92rem;
  min-width: 720px;
}
.cmp-table thead th {
  background: var(--paper-warm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.cmp-head-self {
  color: var(--green-deep);
  background: var(--green-tint);
}
.cmp-table tbody tr {
  border-bottom: 1px solid var(--rule-soft);
}
.cmp-table tbody tr:last-child { border-bottom: 0; }
.cmp-table td {
  padding: 14px 16px;
  vertical-align: middle;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-row-label {
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  white-space: normal;
  min-width: 220px;
}
.cmp { font-size: 0.88rem; white-space: nowrap; }
.cmp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 6px;
  vertical-align: -3px;
}
.cmp-yes {
  background: var(--green-tint);
  color: var(--green-deep);
  font-weight: 500;
}
.cmp-yes .cmp-mark {
  background: var(--green);
  color: #fff;
}
.cmp-no {
  color: var(--ink-soft);
}
.cmp-no .cmp-mark {
  background: var(--rule);
  color: var(--ink-soft);
}
.cmp-partial {
  background: #FCEFD2;
  color: #92400E;
  font-weight: 500;
}
.cmp-partial .cmp-mark {
  background: #B45309;
  color: #fff;
}
.cmp-text {
  color: var(--ink-muted);
  font-style: italic;
}
@media (max-width: 720px) {
  .cmp-table { min-width: 600px; font-size: 0.85rem; }
  .cmp-table thead th, .cmp-table td { padding: 10px 12px; }
}

/* ---- pricing collapsible ---- */
.plan-more {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}
.plan-more summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink-soft);
  margin-left: auto;
}
.plan-more[open] summary::after { content: "−"; }
.plan-more summary:hover { color: var(--ink); }
.plan-more .plan-list { margin: 14px 0 0; }

/* ---- request-access form: tighter ---- */
#access-form .formgrid { grid-template-columns: 1fr 1fr; }
#access-form .formfield { margin-bottom: 14px; }

/* ---- responsive: tablet ≤960 px ---- */
@media (max-width: 960px) {
  .flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .flow-arrow { display: none; }
  .steps5 { grid-template-columns: repeat(3, 1fr); }
  .step5:nth-child(4), .step5:nth-child(5) { grid-column: span 1; }
  .cp-block { grid-template-columns: 1fr; gap: 18px; }
  .topnav .nav-links { display: none; }
  .brand-tag { display: none; }
}

/* ---- responsive: mobile ≤640 px ---- */
@media (max-width: 640px) {
  .topbar-inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
  }
  .topbar-inner .status-pill { display: none; }
  .topnav { gap: 12px; }
  .langsw button { padding: 3px 8px; font-size: 0.66rem; }
  .hero-grid { gap: 36px; }
  .hero { padding-top: 36px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn { justify-content: center; }
  .flow { grid-template-columns: 1fr; }
  .flow-extras { grid-template-columns: 1fr; }
  .steps5 { grid-template-columns: 1fr; gap: 10px; }
  .step5 { padding: 18px; }
  #access-form .formgrid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .section-tight { padding: 36px 0; }
  .section-head { margin-bottom: 32px; }
  .plan { padding: 28px 22px; }
  .next-card { padding: 28px 22px; }
  .mockwin { font-size: 0.85em; }
  .hero-meta { gap: 14px; font-size: 0.78rem; }
  .demo-nav-inner { gap: 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---- responsive: very narrow ≤380 px ---- */
@media (max-width: 380px) {
  .brand { font-size: 1.1rem; }
  h1, .h1 { font-size: 2.1rem; }
  h2, .h2 { font-size: 1.6rem; }
  .topbar-inner > .brand + nav .btn { display: none; }
}

/* =========================================================
   Legal pages (Terms / Privacy / DPA)
   ========================================================= */
.legal-banner {
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.legal-banner strong { color: var(--ink); display: block; margin-bottom: 4px; }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.legal-meta strong { color: var(--ink); font-weight: 500; }

.legal-toc {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  padding: 22px 26px;
  margin: 32px 0 48px;
}
.legal-toc h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
  font-weight: 500;
}
.legal-toc ol {
  list-style: decimal;
  padding-left: 20px;
  font-size: 0.92rem;
  columns: 2;
  column-gap: 28px;
}
.legal-toc li { margin-bottom: 4px; break-inside: avoid; }
.legal-toc li::marker { color: var(--ink-faint); font-family: var(--font-mono); }
.legal-toc a { color: var(--ink-muted); }
.legal-toc a:hover { color: var(--green); }

.legal-doc { font-size: 1rem; line-height: 1.7; color: var(--ink); }
.legal-doc h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 460;
  letter-spacing: -0.012em;
  margin: 48px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 90px;
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-doc h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin: 24px 0 8px;
}
.legal-doc p { color: var(--ink-muted); margin-bottom: 14px; max-width: 70ch; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; margin: 8px 0 14px; max-width: 70ch; }
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc li { color: var(--ink-muted); margin-bottom: 6px; line-height: 1.6; }
.legal-doc li::marker { color: var(--ink-faint); }
.legal-doc strong { color: var(--ink); font-weight: 500; }
.legal-doc code, .legal-doc .term {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-warm);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.92rem;
}
.legal-doc table th, .legal-doc table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}
.legal-doc table th {
  background: var(--paper-warm);
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}