/* Chonjo — the public front page. Loaded after app.css and built on its tokens, so the page a
 * visitor sees and the dashboard they sign into are visibly the same product: same greens, same
 * components, same dark mode. What is added here is editorial: one serif for headings, a wider
 * measure, and the rhythm of a page meant to be read top to bottom.
 *
 * No gradients, glass, glows or scroll effects: the product is the picture. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.lp {
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --lp-wrap: 1160px;
  --lp-gutter: clamp(16px, 4vw, 40px);
  --lp-section: clamp(64px, 9vw, 120px);
  /* the safety band keeps its own dark palette in both themes */
  --ink-bg: #0f2419;
  --ink-text: #eaf2ed;
  --ink-text-2: #b9cbc1;
  --ink-rule: rgb(255 255 255 / 0.14);
  background: var(--surface);
}
html:has(body.lp) { scroll-behavior: smooth; }
.lp [id] { scroll-margin-top: 84px; }

.lp-wrap { max-width: var(--lp-wrap); margin-inline: auto; padding-inline: var(--lp-gutter); }

/* ─────────────────────────────────────────────────────────────── type */

.lp-display, .lp-h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance;
}
.lp-display { font-size: clamp(2.375rem, 1.55rem + 3.3vw, 3.75rem); line-height: 1.04; max-width: 17ch; }
.lp-h2 { font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); line-height: 1.1; max-width: 22ch; }
.lp-lead {
  margin-top: var(--s-5); max-width: 36rem; color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6;
}
.lp-kicker { margin-bottom: var(--s-4); color: var(--primary); font-size: var(--text-sm); font-weight: 650; }
.lp-note { margin-top: var(--s-4); max-width: 44rem; color: var(--text-3); font-size: var(--text-sm); }
.lp-caption { margin-top: var(--s-4); max-width: 34rem; color: var(--text-3); font-size: var(--text-sm); }

/* ─────────────────────────────────────────────────────────────── header */

.lp-header {
  position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border);
}
.lp-header__inner { display: flex; align-items: center; gap: var(--s-5); min-height: 64px; }
.lp-brand { display: inline-flex; border-radius: var(--radius-sm); }
.lp-nav { margin-left: auto; }
.lp-nav ul { display: flex; gap: var(--s-1); list-style: none; }
.lp-nav a {
  display: block; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); color: var(--text-2);
  font-size: var(--text-sm); font-weight: 550; text-decoration: none;
}
.lp-nav a:hover { color: var(--text); background: var(--surface-2); }
.lp-header__actions { display: flex; align-items: center; gap: var(--s-2); }
.lp-signin {
  padding: var(--s-2) var(--s-3); color: var(--text); font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.lp-signin:hover { text-decoration: underline; }
@media (max-width: 880px) {
  .lp-nav { display: none; }
  .lp-header__actions { margin-left: auto; }
}

/* ─────────────────────────────────────────────────────────────── buttons, lists */

.lp-btn-lg { min-height: 48px; padding-inline: 20px; font-size: var(--text-md); }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.lp-actions--center { justify-content: center; }
@media (max-width: 480px) { .lp-actions .btn { flex: 1 1 100%; } }

.lp-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); list-style: none;
  color: var(--text-3); font-size: var(--text-sm);
}
.lp-facts li { display: flex; align-items: center; gap: var(--s-2); }
.lp-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

.lp-list { display: grid; gap: var(--s-3); margin-top: var(--s-5); list-style: none; }
.lp-list li { position: relative; padding-left: 28px; }
.lp-list li::before {
  content: ""; position: absolute; left: 3px; top: 0.4em; width: 12px; height: 7px;
  border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────── hero */

.lp-hero { padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px); }
.lp-hero__grid { display: grid; gap: clamp(48px, 6vw, 72px); }
/* Side by side, the words start level with the conversation: the button stays high on the
 * screen instead of sinking to the middle of a tall picture. */
@media (min-width: 1000px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .lp-hero__copy { padding-top: var(--s-6); }
}
.lp-hero__visual { margin: 0; }

/* The customer's chat, then the same order on the dashboard, stepped down and to the right — the
 * card rests on the chat's bottom edge without covering a word of it. On a phone they simply
 * follow one another. */
.lp-stage { position: relative; isolation: isolate; display: grid; gap: var(--s-4); }
@media (min-width: 620px) {
  .lp-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; }
  .lp-stage > .chat { grid-column: 1 / 10; }
  .lp-stage > .excerpt { grid-column: 4 / 13; margin-top: -14px; }
  .lp-stage::before {
    content: ""; position: absolute; z-index: -1; inset: 56px 0 40px 18%;
    border-radius: 16px; background: var(--primary-soft);
  }
}

/* ─────────────────────────────────────────────────────────────── a WhatsApp conversation */

.chat {
  overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-1); font-size: 0.9375rem;
}
.chat__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.chat__avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font-size: var(--text-sm); font-weight: 700;
}
.chat__who { display: grid; line-height: 1.25; }
.chat__who span { color: var(--text-3); font-size: var(--text-xs); }
.chat__log { display: flex; flex-direction: column; gap: 6px; padding: 14px; list-style: none; background: var(--surface-2); }
.msg {
  display: grid; max-width: 86%; padding: 7px 10px 5px; border-radius: 10px; line-height: 1.42;
  white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 1px 0 rgb(16 24 20 / 0.06);
}
.msg--them { align-self: flex-start; background: var(--surface); border-top-left-radius: 3px; }
.msg--me { align-self: flex-end; background: var(--primary-soft); border-top-right-radius: 3px; }
.msg__time { justify-self: end; margin-top: 2px; color: var(--text-3); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.chat__divider { align-self: center; margin: 6px 0; }
.chat__divider span {
  padding: 2px 10px; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-3); font-size: var(--text-xs);
}

/* The dashboard, as the owner sees it — its own components, drawn. */
.excerpt {
  position: relative; padding: 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-2);
}
.excerpt__bar {
  display: flex; align-items: center; gap: var(--s-2); padding: 2px 4px 10px; color: var(--text-2);
  font-size: var(--text-sm); font-weight: 650;
}
.excerpt .btn { cursor: default; }

/* ─────────────────────────────────────────────────────────────── sections */

.lp-section { padding-block: var(--lp-section); }
.lp-section--tint { background: var(--bg); border-block: 1px solid var(--border); }
.lp-intro { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }

.lp-split { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 920px) {
  .lp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .lp-split--visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.lp-figure { margin: 0; }
.lp-figure .chat { max-width: 440px; }
@media (min-width: 920px) { .lp-figure { justify-self: end; width: min(100%, 440px); } }

/* Three changes: set like a ledger's columns, not as boxes. */
.lp-points { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 820px) { .lp-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-point { padding-top: var(--s-4); border-top: 2px solid var(--text); }
.lp-point svg { color: var(--primary); }
.lp-point h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--text-lg); }
.lp-point p { color: var(--text-2); }

.lp-steps { display: grid; list-style: none; counter-reset: step; }
.lp-steps li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-5);
  border-top: 1px solid var(--border); counter-increment: step;
}
.lp-steps li:last-child { border-bottom: 1px solid var(--border); }
.lp-steps li::before {
  content: counter(step); grid-row: 1 / span 2; color: var(--primary);
  font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1;
}
.lp-steps h3, .lp-steps p { grid-column: 2; }
.lp-steps h3 { font-size: var(--text-lg); }
.lp-steps p { margin-top: var(--s-1); color: var(--text-2); }

/* Who may do what */
.lp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lp-roles { width: 100%; min-width: 560px; border-collapse: collapse; }
.lp-roles th, .lp-roles td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.lp-roles thead th { background: var(--bg); color: var(--text-2); font-size: var(--text-sm); font-weight: 650; }
.lp-roles thead th:not(:first-child), .lp-roles td { width: 112px; text-align: center; }
.lp-roles tbody th { font-weight: 500; }
.lp-roles tbody tr:last-child > * { border-bottom: 0; }
/* On a phone the table fits the screen instead of scrolling sideways: what each row is about
 * wraps, and the three answer columns narrow to their ticks. */
@media (max-width: 600px) {
  .lp-roles { min-width: 0; font-size: var(--text-sm); }
  .lp-roles th, .lp-roles td { padding: 12px 8px; }
  .lp-roles tbody th { padding-left: 12px; }
  .lp-roles thead th:not(:first-child), .lp-roles td { width: 68px; }
  .lp-roles thead th { font-size: var(--text-xs); }
}
.roles__yes { display: inline-flex; color: var(--primary); }
.roles__no { color: var(--border-strong); }

/* Safety: the one dark band — the part of the page about what it will not do. */
.lp-section--ink { background: var(--ink-bg); color: var(--ink-text); }
.lp-section--ink .lp-lead, .lp-section--ink p { color: var(--ink-text-2); }
.lp-section--ink h3 { color: var(--ink-text); }
.lp-section--ink :focus-visible { outline-color: #8fb4ff; }
.lp-safety { display: grid; list-style: none; }
@media (min-width: 640px) { .lp-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } }
.lp-safety li { padding-block: 18px; border-top: 1px solid var(--ink-rule); }
.lp-safety h3 { font-size: 1.0625rem; }
.lp-safety p { margin-top: var(--s-2); font-size: 0.9375rem; }

/* Pricing */
.lp-plans { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .lp-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-plan {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.lp-plan h3 { font-size: var(--text-lg); }
.lp-plan__price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.lp-plan__per { color: var(--text-3); font-family: var(--font); font-size: var(--text-sm); font-weight: 500; }
.lp-plan__blurb { color: var(--text-2); font-size: var(--text-sm); }
.lp-plan ul { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--border); list-style: none; font-size: var(--text-sm); }
.lp-plan li { display: flex; gap: var(--s-2); }
.lp-plan li svg { margin-top: 2px; color: var(--primary); }
.lp-plans__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
.lp-plans__foot .lp-note { margin-top: 0; max-width: 32rem; }

/* Questions */
.lp-faq { border-top: 1px solid var(--border); }
.lp-faq details { border-bottom: 1px solid var(--border); }
.lp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px;
  padding-block: var(--s-4); cursor: pointer; font-size: 1.0625rem; font-weight: 600; list-style: none;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary svg { color: var(--text-3); transition: transform 150ms ease; }
.lp-faq details[open] summary svg { transform: rotate(180deg); }
.lp-faq p { max-width: 42rem; padding-bottom: var(--s-5); color: var(--text-2); }

/* Closing */
.lp-close { padding-block: clamp(72px, 10vw, 128px); text-align: center; }
.lp-close .lp-h2, .lp-close .lp-lead { margin-inline: auto; }

/* Privacy notice and terms: a reading page. Contents beside the text on a wide screen, above it
 * on a phone; lines kept to a comfortable measure. */
.lp-legal__inner { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .lp-legal__inner { grid-template-columns: 240px minmax(0, 44rem); column-gap: clamp(40px, 6vw, 88px); }
  .lp-legal__head { grid-column: 1 / -1; }
  .lp-legal__toc { position: sticky; top: 88px; align-self: start; }
}
.lp-legal__head .lp-note { margin-top: var(--s-3); }
.lp-legal__toc-title { margin-bottom: var(--s-2); color: var(--text-3); font-size: var(--text-sm); font-weight: 650; }
.lp-legal__toc ol { display: grid; gap: var(--s-1); padding-left: 1.25rem; color: var(--text-3); font-size: var(--text-sm); }
.lp-legal__toc a { color: var(--text-2); text-decoration: none; }
.lp-legal__toc a:hover { color: var(--text); text-decoration: underline; }
.lp-prose { max-width: 44rem; font-size: 1.0625rem; line-height: 1.65; }
.lp-prose section + section { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.lp-prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-bottom: var(--s-3); }
.lp-prose h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--text-md); }
.lp-prose p + p, .lp-prose p + ul, .lp-prose ul + p { margin-top: var(--s-3); }
.lp-prose ul { display: grid; gap: var(--s-2); padding-left: 1.25rem; }
.lp-prose li::marker { color: var(--primary); }
.lp-footer__contact a { color: var(--text-2); }

/* Footer */
.lp-footer { padding-block: var(--s-7); background: var(--bg); border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--text-sm); }
.lp-footer__inner { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .lp-footer__inner { grid-template-columns: 1fr auto; align-items: start; } }
.lp-footer p { margin-top: var(--s-2); }
.lp-footer .lp-tagline { margin-top: var(--s-3); color: var(--text); font-weight: 600; }
.lp-footer ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; }
.lp-footer nav a { color: var(--text-2); text-decoration: none; }
.lp-footer nav a:hover { color: var(--text); text-decoration: underline; }
.lp-footer__legal { grid-column: 1 / -1; padding-top: var(--s-4); border-top: 1px solid var(--border); color: var(--text-3); }