/* =====================================================================
   OneBloc Calling — public landing page.

   The marketing surface for calling.onebloc.io. Follows the OneBloc design
   standard and the locked nav standard, and takes its accent and lockup from
   brand.css so it can never disagree with the signed-in app about what the
   module looks like.

   No inline <style> and no inline <script> anywhere on this page: the CSP is
   script-src 'self', and the landing is not an exception to it.
   ===================================================================== */

/* ob-tokens.css and brand.css are linked by the layout, in order, each with
   asp-append-version. They used to be pulled in with @import, which silently
   defeated cache busting: app.css?v=... was revalidated but the imported files
   were plain URLs, so a brand or token change never reached a returning user. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ob-ink);
  background: var(--ob-card);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: -.025em; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* The nav is sticky, so an anchor jump must clear it or the heading lands underneath. */
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- nav */
.lp-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ob-line);
}
.lp-nav .row { display: flex; align-items: center; gap: 28px; height: 72px; }
.lp-nav .links { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.lp-nav .links a { text-decoration: none; color: var(--ob-muted); font-size: 14.5px; font-weight: 600; }
.lp-nav .links a:hover { color: var(--acc-deep); }
.lp-nav .right { display: flex; align-items: center; gap: 10px; }

.lp-lang { display: inline-flex; border: 1px solid var(--ob-line); border-radius: 9px; overflow: hidden; }
.lp-lang button {
  border: 0; background: var(--ob-card); color: var(--ob-muted);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 11px; cursor: pointer;
}
.lp-lang button.active { background: var(--acc-soft); color: var(--acc-deep); }

.lp-burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--ob-line);
  border-radius: 10px; background: var(--ob-card); cursor: pointer;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
}
.lp-burger span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ob-slate); }
.lp-sheet { display: none; border-top: 1px solid var(--ob-line); padding: 12px 24px 18px; }
.lp-sheet a { display: block; padding: 11px 0; text-decoration: none; font-weight: 600; color: var(--ob-slate); }
.lp-nav.open .lp-sheet { display: block; }

/* ---------------------------------------------------------------- buttons */
.lp-btn {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: var(--ob-r-control);
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.lp-btn svg { width: 18px; height: 18px; flex: none; }
/* White on --acc-deep is 5.0:1. The lighter --acc is 3.4:1 and would fail on text. */
.lp-btn.primary { background: var(--acc-deep); color: #fff; box-shadow: 0 6px 18px rgba(77, 124, 15, .28); }
.lp-btn.primary:hover { background: #416A0C; }
.lp-btn.ghost { border-color: var(--ob-line); color: var(--ob-slate); background: var(--ob-card); }
.lp-btn.ghost:hover { border-color: var(--acc); color: var(--acc-deep); }
.lp-btn.sm { height: 42px; padding: 0 16px; font-size: 14px; }
.lp-btn.on-dark { background: var(--acc-top); color: #10230A; box-shadow: none; }
.lp-btn.on-dark:hover { background: #9BDD35; }

/* ---------------------------------------------------------------- sections */
.lp-sec { padding: 92px 0; }
.lp-sec.tint { background: var(--ob-bg); }
.lp-head { max-width: 760px; margin-bottom: 44px; }
.lp-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc-deep); margin-bottom: 12px;
}
.lp-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.lp-head p { margin-top: 14px; color: var(--ob-muted); font-size: 17px; }

/* ---------------------------------------------------------------- hero */
.lp-hero { padding: 76px 0 88px; position: relative; overflow: hidden; }
.lp-hero::before {
  content: ""; position: absolute; inset: -180px -10% auto 40%; height: 480px;
  background: radial-gradient(circle at 50% 50%, rgba(132, 204, 22, .16), transparent 68%);
  pointer-events: none;
}
.lp-hero .inner {
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.lp-hero h1 { font-size: clamp(34px, 4.6vw, 55px); font-weight: 800; }
.lp-hero h1 .hl { color: var(--acc-deep); }
.lp-hero .sub { margin-top: 20px; font-size: 18.5px; color: var(--ob-slate); max-width: 40ch; }
.lp-hero .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero .note { margin-top: 18px; font-size: 13.5px; color: var(--ob-muted); }

/* the product's signature moment, drawn rather than screenshotted so it stays
   crisp, translates, and never goes stale when the real screen changes */
.lp-mock {
  background: var(--ob-card); border: 1px solid var(--ob-line);
  border-radius: var(--ob-r-card); box-shadow: 0 24px 60px rgba(16, 33, 80, .10);
  overflow: hidden;
}
.lp-mock .bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--ob-line); background: var(--ob-bg);
  font-size: 12.5px; font-weight: 700; color: var(--ob-muted);
}
.lp-mock .bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
.lp-mock .bar .lease { margin-left: auto; font-weight: 600; color: var(--acc-deep); }
.lp-mock .body { padding: 20px 20px 22px; }
.lp-mock .who { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.lp-mock .tel { margin-top: 3px; font-size: 15px; color: var(--ob-muted); }
.lp-mock .tags { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.lp-mock .tag {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc-deep);
}
.lp-mock .tag.grey { background: var(--ob-line-soft); color: var(--ob-slate); }
.lp-mock .script {
  margin-top: 16px; padding: 14px; border-radius: 12px;
  background: var(--ob-bg); border: 1px dashed var(--ob-line);
  font-size: 14px; color: var(--ob-slate);
}
.lp-mock .acts { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-mock .outcomes { margin-top: 16px; display: flex; gap: 7px; flex-wrap: wrap; }
.lp-mock .out {
  font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ob-line); color: var(--ob-slate); background: var(--ob-card);
}
.lp-mock .out.pick { border-color: var(--acc); background: var(--acc-soft); color: var(--acc-deep); }

/* ---------------------------------------------------------------- problems */
.lp-prob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-prob .item {
  background: var(--ob-card); border: 1px solid var(--ob-line);
  border-radius: var(--ob-r-card); padding: 24px;
}
.lp-prob .item .n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; font-weight: 700; color: var(--acc-deep);
}
.lp-prob .item h3 { margin-top: 10px; font-size: 17px; font-weight: 700; }
.lp-prob .item p { margin-top: 8px; font-size: 14.5px; color: var(--ob-muted); line-height: 1.6; }

/* ---------------------------------------------------------------- flow */
.lp-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lp-flow .step {
  position: relative; background: var(--ob-card); border: 1px solid var(--ob-line);
  border-radius: var(--ob-r-card); padding: 22px 18px;
}
.lp-flow .step .ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc-deep); margin-bottom: 13px;
}
.lp-flow .step .ic svg { width: 21px; height: 21px; }
.lp-flow .step strong { display: block; font-size: 15.5px; }
.lp-flow .step p { margin-top: 7px; font-size: 13.5px; color: var(--ob-muted); line-height: 1.55; }
/* the connector: decorative, so it disappears the moment the row wraps */
.lp-flow .step:not(:last-child)::after {
  content: ""; position: absolute; top: 42px; right: -10px; width: 8px; height: 2px;
  background: var(--ob-line);
}

/* ---------------------------------------------------------------- dashboard */
.lp-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.lp-split .lp-head { margin-bottom: 0; }
.lp-ticks { margin-top: 22px; display: grid; gap: 12px; }
.lp-ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ob-slate); }
.lp-ticks li svg { width: 19px; height: 19px; flex: none; color: var(--acc-deep); margin-top: 2px; }
.lp-ticks { list-style: none; padding: 0; }

.lp-dash {
  background: var(--ob-card); border: 1px solid var(--ob-line);
  border-radius: var(--ob-r-card); box-shadow: 0 20px 50px rgba(16, 33, 80, .09);
  padding: 20px;
}
.lp-dash .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-dash .stat { border: 1px solid var(--ob-line); border-radius: 12px; padding: 13px 14px; }
.lp-dash .stat .k { font-size: 11.5px; font-weight: 700; color: var(--ob-muted); text-transform: uppercase; letter-spacing: .05em; }
.lp-dash .stat .v { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; }
.lp-dash .chart {
  margin-top: 16px; height: 132px; display: flex; align-items: flex-end; gap: 9px;
  padding: 14px; border: 1px solid var(--ob-line); border-radius: 12px;
}
.lp-dash .chart span { flex: 1; border-radius: 5px 5px 0 0; background: var(--acc); opacity: .85; }
.lp-dash .chart span:last-child { background: var(--acc-deep); opacity: 1; }
.lp-dash .board { margin-top: 14px; border: 1px solid var(--ob-line); border-radius: 12px; overflow: hidden; }
.lp-dash .board .r { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 14px; }
.lp-dash .board .r + .r { border-top: 1px solid var(--ob-line-soft); }
.lp-dash .board .r .rank { font-weight: 800; color: var(--ob-faint); width: 18px; }
.lp-dash .board .r .n { font-weight: 600; }
.lp-dash .board .r .v { margin-left: auto; font-weight: 700; color: var(--acc-deep); }

/* ---------------------------------------------------------------- features */
.lp-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-feat .card {
  background: var(--ob-card); border: 1px solid var(--ob-line);
  border-radius: var(--ob-r-card); padding: 26px 24px;
}
.lp-feat .card .ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc-deep); margin-bottom: 15px;
}
.lp-feat .card .ic svg { width: 22px; height: 22px; }
.lp-feat .card strong { font-size: 16.5px; }
.lp-feat .card p { margin-top: 8px; font-size: 14.5px; color: var(--ob-muted); line-height: 1.6; }

/* ---------------------------------------------------------------- compliance */
.lp-note {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  background: var(--ob-card); border: 1px solid var(--ob-line);
  border-left: 4px solid var(--acc); border-radius: var(--ob-r-card); padding: 28px;
}
.lp-note .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc-deep); }
.lp-note .ic svg { width: 23px; height: 23px; }
.lp-note h3 { font-size: 19px; font-weight: 800; }
.lp-note p { margin-top: 9px; color: var(--ob-muted); font-size: 15px; max-width: 78ch; }

/* ---------------------------------------------------------------- cta */
.lp-cta { background: var(--ob-navy); color: #fff; padding: 84px 0; text-align: center; }
.lp-cta h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; max-width: 22ch; margin: 0 auto; }
.lp-cta p { margin: 16px auto 0; max-width: 56ch; color: rgba(255, 255, 255, .78); font-size: 17px; }
.lp-cta .row { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-cta .lp-btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.lp-cta .lp-btn.ghost:hover { border-color: var(--acc-top); color: var(--acc-top); }

/* ---------------------------------------------------------------- footer */
.lp-foot { border-top: 1px solid var(--ob-line); padding: 40px 0; font-size: 14px; color: var(--ob-muted); }
.lp-foot .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-foot .row .sp { margin-left: auto; }
.lp-foot a { color: var(--ob-muted); text-decoration: none; font-weight: 600; }
.lp-foot a:hover { color: var(--acc-deep); }

/* ---------------------------------------------------------------- reveal
   Progressive enhancement: landing.js adds .lp-anim to <html> before paint, so
   with JavaScript off every section is simply visible rather than stuck at 0. */
.lp-anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.lp-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-anim .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .lp-hero .inner, .lp-split { grid-template-columns: 1fr; gap: 40px; }
  .lp-prob, .lp-feat { grid-template-columns: repeat(2, 1fr); }
  .lp-flow { grid-template-columns: repeat(2, 1fr); }
  .lp-flow .step::after { display: none; }
}
@media (max-width: 860px) {
  .lp-nav .links { display: none; }
  .lp-burger { display: flex; }
  .lp-sec { padding: 64px 0; }
  .lp-dash .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .lp-prob, .lp-feat, .lp-flow { grid-template-columns: 1fr; }
  .lp-note { grid-template-columns: 1fr; }
  .lp-mock .acts { grid-template-columns: 1fr; }
  .lockup .wm { font-size: 18px; }
  .lockup .wm .mod { font-size: 15px; }
}