/* ==========================================================================
   MARKETING SCREENS — home, pricing, compare, methodology, contact,
   comps search.  Ledger v1.0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: var(--space-24) 0 var(--space-20); overflow: hidden; }
@media (min-width: 921px) { .hero { padding-top: var(--space-32); } }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: var(--hero-glow), var(--hero-grid);
  background-size: auto, auto, var(--hero-grid-size), var(--hero-grid-size);
  -webkit-mask-image: var(--hero-grid-mask); mask-image: var(--hero-grid-mask);
}
.hero::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: var(--hero-horizon); pointer-events: none;
}
.hero-inner { max-width: 880px; margin-inline: auto; text-align: center; padding-inline: var(--space-6); }
.hero h1 { font-family: var(--font-display); font-size: var(--text-display-xl); line-height: var(--leading-display-xl); font-weight: 700; letter-spacing: -0.025em; margin-top: var(--space-5); }
.hero h1 .accent { background: var(--gradient-band); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .hero-sub { margin: var(--space-5) auto 0; max-width: 62ch; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--color-text-secondary); }
.hero .hero-sub .mono { font-family: var(--font-mono); font-size: 0.94em; color: var(--color-text-primary); }
@media (max-width: 768px) {
  .hero h1 { font-size: 2.75rem; }
  .hero { padding-top: var(--space-16); }
}

/* Hero appraise bar — the flagship element of the home screen */
.hero-appraise { margin: var(--space-8) auto 0; max-width: 620px; }
.hero-appraise-bar {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  height: var(--control-h-hero);
  background: var(--color-bg-raised);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  background-clip: padding-box;
  box-shadow: var(--shadow-edge), var(--shadow-2);
  padding: 4px 4px 4px var(--space-4);
}
.hero-appraise-bar::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, rgba(43,200,232,.45), rgba(44,226,162,.45) 60%, rgba(43,200,232,.2));
}
[data-theme="light"] .hero-appraise-bar::before { background: linear-gradient(120deg, rgba(8,145,178,.4), rgba(15,157,107,.4) 60%, rgba(8,145,178,.15)); }
.hero-appraise-bar:focus-within { box-shadow: var(--shadow-edge), var(--glow-brand); }
.hero-appraise-bar .icon { color: var(--color-text-tertiary); flex: none; }
.hero-appraise-bar input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: none; outline: none;
  font-family: var(--font-mono); font-size: var(--text-data-md); color: var(--color-text-primary);
}
.hero-appraise-bar input::placeholder { color: var(--color-text-tertiary); }
.hero-appraise-bar .btn { flex: none; height: 100%; border-radius: var(--radius-md); }
.hero-appraise .micro { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-text-tertiary); }
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 560px) { .hero-cta-row { flex-direction: column; align-items: stretch; } }
@media (max-width: 540px) {
  .hero-appraise-bar { flex-direction: column; height: auto; padding: var(--space-2); align-items: stretch; }
  .hero-appraise-bar input { height: 44px; padding-inline: var(--space-2); text-align: center; }
  .hero-appraise-bar .btn { height: 44px; }
}

/* Evidence-strip footnote */
.evidence-footnote {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  max-width: var(--container-marketing); margin-inline: auto;
  font-size: var(--text-body-sm); color: var(--color-text-tertiary);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Marketing sections
   -------------------------------------------------------------------------- */
.mkt-section { padding: var(--space-24) 0; }
.mkt-section.tight { padding: var(--space-16) 0; }
@media (max-width: 768px) { .mkt-section, .mkt-section.tight { padding: var(--space-16) 0; } }

/* How it works */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); counter-reset: step; }
@media (max-width: 920px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { position: relative; padding: var(--space-6); }
.step-card .step-num {
  display: inline-grid; place-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--color-bg-inset); border: 1px solid var(--color-border-default);
  font-family: var(--font-mono); font-size: var(--text-data); font-weight: 600; color: var(--color-brand-text);
  margin-bottom: var(--space-4);
}
.step-card h3 { font-size: var(--text-heading-md); font-weight: 600; margin-bottom: var(--space-2); }
.step-card p { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* Feature themes */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 920px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-slab { border-radius: var(--radius-2xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.feature-slab .f-index { font-family: var(--font-mono); font-size: var(--text-overline); font-weight: 600; letter-spacing: var(--tracking-overline); color: var(--color-text-tertiary); }
.feature-slab h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.feature-slab ul { display: flex; flex-direction: column; gap: var(--space-3); }
.feature-slab li { display: flex; gap: var(--space-3); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.feature-slab li .icon { flex: none; margin-top: 2px; color: var(--color-brand-text); width: 15px; height: 15px; }
.feature-slab .f-quote {
  margin-top: auto; padding: var(--space-4);
  background: var(--color-bg-inset); border-left: 3px solid; border-image: var(--gradient-band) 1;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-body-sm); color: var(--color-text-secondary); font-style: italic;
}

/* Differentiator */
.diff-section { position: relative; }
.diff-panel { padding: var(--space-10); max-width: 860px; margin-inline: auto; }
.diff-panel .diff-copy { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--color-text-secondary); }
.diff-panel .diff-copy p + p { margin-top: var(--space-4); }
.diff-panel .diff-copy strong { color: var(--color-text-primary); }
.proof-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.proof-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default); background: var(--color-bg-raised);
  font-size: var(--text-body-sm); font-weight: 500; color: var(--color-text-primary);
  transition: border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.proof-chip:hover { border-color: rgba(43,200,232,.45); transform: translateY(-1px); color: var(--color-text-primary); }
.proof-chip .icon { color: var(--color-accent-text); width: 14px; height: 14px; }

/* Developer section */
.dev-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; }
.dev-section > div { min-width: 0; }
@media (max-width: 920px) { .dev-section { grid-template-columns: 1fr; } }
.dev-points { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.dev-point { display: flex; gap: var(--space-3); }
.dev-point .icon { flex: none; margin-top: 3px; color: var(--color-accent-text); }
.dev-point h4 { font-size: var(--text-heading-sm); font-weight: 600; margin-bottom: 2px; }
.dev-point p { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.tool-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.tool-pill { font-family: var(--font-mono); font-size: var(--text-data-sm); color: var(--color-accent-text); background: var(--color-accent-tint); border: 1px solid rgba(43,200,232,.3); border-radius: var(--radius-full); padding: 3px 10px; }

/* Pricing */
.pricing-toggle-row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-8) 0; }
.pricing-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: 880px; margin-inline: auto; }
@media (max-width: 720px) { .pricing-mini { grid-template-columns: 1fr; } }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: stretch; }
@media (max-width: 1080px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); position: relative; }
.plan-card .plan-name { font-size: var(--text-heading-md); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.plan-card .plan-tagline { font-size: var(--text-body-sm); color: var(--color-text-secondary); min-height: 2.4em; }
.plan-card .plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-card .plan-price .amount { font-family: var(--font-mono); font-size: var(--text-data-xl); font-weight: 600; letter-spacing: -0.01em; }
.plan-card .plan-price .unit { font-size: var(--text-body-sm); color: var(--color-text-tertiary); }
.plan-card .plan-alt { font-size: var(--text-caption); color: var(--color-text-tertiary); min-height: 1.4em; }
.plan-card ul { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.plan-card li { display: flex; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.plan-card li .icon { flex: none; margin-top: 2px; width: 14px; height: 14px; color: var(--color-brand-text); }
.plan-card .plan-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.plan-card .plan-foot .btn { width: 100%; }
.plan-card .renewal-terms { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.plan-featured-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  height: 22px; display: inline-flex; align-items: center; padding-inline: 10px;
  background: var(--color-brand); color: var(--color-on-brand);
  border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: var(--text-overline); font-weight: 600; letter-spacing: var(--tracking-overline); text-transform: uppercase;
}
[data-theme="light"] .plan-featured-badge { color: #fff; }

/* Feature matrix */
.matrix-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-text-tertiary); }

/* Compare table highlight column */
.vtable td.col-us, .vtable th.col-us { background: var(--color-brand-tint); }
.vtable th.col-us { color: var(--color-brand-text); }

/* "What this is not" module */
.not-module { padding: var(--space-8); }
.not-module h3 { font-size: var(--text-heading-lg); font-weight: 600; margin-bottom: var(--space-4); }
.not-module .not-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 768px) { .not-module .not-grid { grid-template-columns: 1fr; } }
.not-module ul { display: flex; flex-direction: column; gap: var(--space-2); }
.not-module li { display: flex; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.not-module .is-col li .icon { color: var(--color-brand-text); }
.not-module .not-col li .icon { color: var(--color-text-tertiary); }
.not-module .pivot { margin-top: var(--space-4); font-size: var(--text-body); color: var(--color-text-primary); font-weight: 500; }

/* Final CTA */
.final-cta { text-align: center; padding: var(--space-20) var(--space-6); position: relative; overflow: hidden; }
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px 320px at 50% 100%, rgba(44,226,162,.08), transparent 70%);
}
[data-theme="light"] .final-cta::before { background: radial-gradient(640px 320px at 50% 100%, rgba(15,157,107,.06), transparent 70%); }
.final-cta .small-print { margin-top: var(--space-6); font-size: var(--text-caption); color: var(--color-text-tertiary); max-width: 60ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Methodology page
   -------------------------------------------------------------------------- */
.method-hero { padding: var(--space-20) 0 var(--space-10); text-align: left; }
/* qa-findings 13 ("mono is for facts, applied without exception").

   A rule stood here reading `.method-result-table .vtable td`. `.method-result-table`
   appears NOWHERE in the markup — the table is a bare `.vtable` inside
   `.table-responsive` — so the rule never matched and the honesty flagship's
   own results table rendered 7.61×, 1.99×, 50.2% and the rest in Inter. Written
   for this table, dead since it was written, and invisible because a rule that
   matches nothing fails silently.

   Fixed in the markup instead, with the design system's own convention: those
   cells now carry `.cell-num`, which components.css already gives mono and
   tabular figures — the same class the DataTable puts on every numeric column,
   so the methodology table and the report comps table now agree by
   construction rather than by a bespoke rule. */
.method-callout {
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-bg-inset); border: 1px solid var(--color-border-default);
  position: relative;
}
.method-callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--gradient-band); }
.beta-checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.beta-checklist .bc-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-raised); }
.beta-checklist .bc-item .icon { flex: none; margin-top: 2px; color: var(--color-text-tertiary); }
.beta-checklist .bc-item.done .icon { color: var(--color-brand-text); }
.beta-checklist h4 { font-size: var(--text-heading-sm); font-weight: 600; }
.beta-checklist p { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* Evidence-class legend (methodology + report) */
.evidence-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 720px) { .evidence-legend { grid-template-columns: 1fr; } }
.evidence-legend .el-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-raised); }
.evidence-legend .el-item .evidence-chip { align-self: flex-start; }
.evidence-legend .el-item p { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-8); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-form .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 540px) { .contact-form .two-col { grid-template-columns: 1fr; } }
.company-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-body-sm); }
.company-card dt { color: var(--color-text-tertiary); }
.company-card dd { margin: 0; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Comps search (free tool)
   -------------------------------------------------------------------------- */
.tool-hero { padding: var(--space-20) 0 var(--space-10); }
.tool-hero .standing-block { margin-top: var(--space-6); }