/* Landing page — loaded via extraCss on home.njk only.
   Tokens come from main.css; nothing here hardcodes a color. Mobile-first.
   Section rhythm: 64px mobile / 96px desktop (design_visual §1.3). */

.landing { overflow-x: clip; }
.lp-section { position: relative; margin-top: 64px; }
@media (min-width: 900px) { .lp-section { margin-top: 96px; } }

.lp-h2 { margin-top: 0; }
.lp-display {
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: .4em;
}
/* CJK glyph density: display −10%, no negative tracking (design_visual §7) */
.lang-ja .lp-display, .lang-zh .lp-display { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: 0; }
.lang-ko .lp-display { letter-spacing: 0; }

/* ---- Ensō watermark (≤2 per page, 4–6% opacity) ---- */
.lp-enso-mark {
  position: absolute;
  color: var(--ink);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.lp-enso-hero { width: min(640px, 90vw); height: auto; top: -48px; left: -120px; }
.lp-enso-final { width: 480px; height: auto; top: 50%; left: 50%; translate: -50% -50%; }

/* ============================== HERO ============================== */
.lp-hero {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: center;
  padding-top: 24px;
}
.lp-hero-text { position: relative; z-index: 1; max-width: 34rem; }
.lp-sub { font-size: 1.0625rem; color: var(--ink); margin-bottom: 1.4em; }
.lp-cta { font-size: 1.0625rem; padding: 14px 30px; border-radius: var(--r-round); }
.lp-micro { font-size: .8125rem; color: var(--text); margin: 12px 0 0; }
.lp-badges { justify-content: flex-start; margin: 20px 0 0; }
.lp-hero .lp-badges { margin-top: 24px; }

.lp-hero-device { position: relative; z-index: 1; justify-self: center; }
.lp-hero-shot {
  display: block;
  width: min(300px, 78vw);
  height: auto;
  border-radius: 32px;
  box-shadow: var(--shadow-l);
  rotate: -3deg;
}
@media (min-width: 900px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; }
  .lp-hero-shot { width: 340px; }
}

/* Steam: 3 wisps rising from the device top edge. Animated only when motion
   is welcome; static (invisible) otherwise — pure decoration either way. */
.lp-steam {
  position: absolute;
  top: -64px;
  left: 50%;
  translate: -50%;
  width: 72px;
  height: 90px;
  pointer-events: none;
}
.lp-steam-p {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-steam-p { animation: lp-steam-rise 6s var(--ease) infinite; }
  .lp-steam-d1 { animation-delay: 2s; }
  .lp-steam-d2 { animation-delay: 4s; }
  @keyframes lp-steam-rise {
    0%   { opacity: 0; transform: translateY(10px); }
    35%  { opacity: .4; }
    70%  { opacity: .12; }
    100% { opacity: 0; transform: translateY(-14px); }
  }
}

/* ---- Desktop-only QR (links /get; hidden under 1024px) ---- */
.lp-qr { display: none; }
@media (min-width: 1024px) {
  .lp-qr { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
  .lp-qr img {
    width: 180px; height: 180px;
    border-radius: var(--r-s);
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 8px;
  }
  .lp-qr p { font-size: .8125rem; color: var(--text); max-width: 15rem; margin: 0; }
  .lp-final .lp-qr { justify-content: center; }
}

/* =========================== PROOF STRIP ========================== */
.lp-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 28px;
  margin-top: 48px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  font-size: .9375rem;
  text-align: center;
}
.lp-proof-item { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lp-proof-item > * { white-space: nowrap; }
@media (max-width: 560px) { .lp-proof { flex-direction: column; align-items: flex-start; gap: 8px; } }
.lp-star { width: 18px; height: 18px; color: var(--leaf); flex-shrink: 0; }
.lp-proof-note { color: var(--text-muted); }

/* ============================ PROBLEMS ============================ */
.lp-problem-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 24px;
}
.lp-problem h3 { margin-bottom: .4em; }
.lp-problem p { margin: 0; font-size: .9375rem; }

/* =========================== MECHANISMS =========================== */
.lp-mech {
  display: grid;
  gap: 32px;
  align-items: center;
  margin-top: 64px;
}
.lp-mech:first-child { margin-top: 24px; }
.lp-mech-media { justify-self: center; }
.lp-mech-media img { display: block; width: min(236px, 66vw); height: auto; border-radius: 31px; }
.lp-mech-link { font-weight: 600; text-decoration: none; }
.lp-mech-link:hover { text-decoration: underline; }
@media (min-width: 820px) {
  .lp-mech { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; margin-top: 96px; }
  .lp-mech-flip { grid-template-columns: auto minmax(0, 1fr); }
  .lp-mech-flip .lp-mech-text { order: 2; }
  .lp-mech-flip .lp-mech-media { order: 1; }
  .lp-mech-text { max-width: 32rem; }
}

/* ========================= TRY-IT BRIDGE ========================== */
.lp-bridge > p { max-width: 60ch; }
.lp-bridge-table { margin-top: 8px; }
.lp-bridge-table a { font-weight: 600; text-decoration: none; }
.lp-bridge-table a:hover { text-decoration: underline; }
.lp-bridge-type { display: block; font-size: .75rem; font-weight: 400; color: var(--text-muted); }
.lp-unit { font-weight: 400; text-transform: none; letter-spacing: 0; }
.lp-bridge-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
@media (max-width: 760px) {
  .lp-bridge-table { display: block; overflow-x: auto; min-width: 0; }
  .lp-bridge-table table, .lp-bridge-table > tbody { min-width: 34rem; }
  .lp-bridge-table {
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(254,252,250,0)) left / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, rgba(254,252,250,0)) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(45,36,22,.15), rgba(45,36,22,0)) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(45,36,22,.15), rgba(45,36,22,0)) right / 12px 100% no-repeat scroll;
  }
}

/* ========================== TESTIMONIALS ========================== */
.lp-quotes-sub { color: var(--text); margin-top: -0.4em; }
.lp-quote-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 24px;
}
/* One quote mark only. The card renders <svg class="quote-mark"> in the markup
   (the designed slab glyph, styled at :334); a ::before "\201C" here stacked a
   second curly quote directly under it on every testimonial. The SVG is in
   flow, so no padding-top reservation is needed either. */
.lp-quote { margin: 0; position: relative; }
.lp-quote blockquote { margin: 0; }
.lp-quote blockquote p { margin: 0 0 .8em; color: var(--ink); }
.lp-quote figcaption { font-size: .8125rem; color: var(--text-muted); }
.lp-quote-name { font-weight: 600; color: var(--text); }

/* ============================ PRICING ============================= */
.lp-candid { color: var(--ink); font-weight: 500; }
.lp-pricing-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  margin-top: 24px;
}
.lp-price-card { position: relative; }
.lp-price-card h3 { margin: 0 0 .3em; font-size: 1.375rem; }
.lp-price { font-size: 2rem; margin: 0; }
.lp-price-note { font-size: .875rem; color: var(--text-muted); margin: 0 0 .8em; }
.lp-price-premium { border: 2px solid var(--accent); }
.lp-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 14px;
  border-radius: var(--r-round);
}
.lp-trial { display: block; font-size: .9375rem; font-weight: 500; color: var(--accent-deep); }
.lp-price-list { list-style: none; padding: 0; margin: 0 0 1.2em; }
.lp-price-list li { padding: 7px 0 7px 28px; position: relative; font-size: .9375rem; border-bottom: 1px solid var(--line); }
.lp-price-list li:last-child { border-bottom: none; }
.lp-price-list li::before { content: "\2713"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }
.lp-alt-cta { font-size: .875rem; color: var(--text-muted); margin: 10px 0 0; }
.lp-honesty { font-size: .875rem; color: var(--text); max-width: 52rem; margin-top: 20px; }

/* =============================== FAQ ============================== */
.lp-faq { max-width: 46rem; }
.lp-faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  margin-top: 12px;
  padding: 0 20px;
}
.lp-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  padding: 16px 28px 16px 0;
  position: relative;
  list-style: none;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--accent);
  transition: rotate 150ms var(--ease);
}
.lp-faq-item[open] summary::after { rotate: 45deg; }
.lp-faq-item > p { padding-bottom: 16px; margin: 0; font-size: .9375rem; }

/* ========================== LEAD MAGNET =========================== */
.lp-lead { display: grid; gap: 32px; align-items: center; }
.lp-lead-thumb { justify-self: center; }
.lp-lead-thumb svg {
  display: block;
  width: min(180px, 50vw);
  height: auto;
  rotate: -3deg;
  border-radius: 6px;
  box-shadow: var(--shadow-l);
}
@media (min-width: 700px) { .lp-lead { grid-template-columns: auto minmax(0, 1fr); gap: 48px; } }

.lp-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lp-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  /* Same colour as the card behind it, so the border is the ONLY thing that
     identifies this as a field — it has to clear the 3:1 non-text minimum. */
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  padding: 12px 16px;
}
.lp-form input[type="email"]::placeholder { color: var(--text-muted); }
.lp-form .btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.lp-privacy { font-size: .8125rem; color: var(--text-muted); margin: 10px 0 0; }

/* Honeypot: off-screen wrapper; input stays technically focusable-free. */
.lp-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =========================== FINAL CTA ============================ */
.lp-final {
  position: relative;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
  padding: 56px 24px;
  overflow: hidden;
}
.lp-final > *:not(.lp-enso-mark) { position: relative; }
.lp-final > p { margin-inline: auto; }
.lp-final .lp-badges { justify-content: center; }
@media (min-width: 700px) { .lp-final { padding: 72px 48px; } }

/* ---- CSS-built hero phone (Claude Design comp) ---- */
.phone { background: #111009; border-radius: 52px; padding: 11px; box-shadow: 0 12px 40px rgba(45,36,22,.22); transform: rotate(-4deg); display: inline-block; margin: 26px 10px 10px; }
.phone-screen { width: 288px; height: 618px; background: var(--canvas); border-radius: 42px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.phone-island { position: absolute; top: 10px; left: 50%; margin-left: -43px; width: 86px; height: 25px; border-radius: 14px; background: #111009; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 0; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.phone-status svg { fill: currentColor; }
.phone-status-icons { display: flex; gap: 5px; align-items: center; }
.phone-tea { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; }
.phone-tea img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: block; }
.phone-tea-name { font-weight: 600; font-size: 1.25rem; color: var(--ink); line-height: 1.15; display: flex; flex-direction: column; }
.phone-tea-name small { font-size: .8125rem; color: var(--text-muted); font-weight: 400; }
.phone-pill { align-self: center; margin: 14px 0 0; background: var(--leaf-tint); color: var(--ink); font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-round); }
.phone-ring { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.phone-ring-time { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.phone-ring-time b { font-size: 2.7rem; font-weight: 600; color: var(--ink); line-height: 1; }
.phone-ring-time small { font-size: .8125rem; color: var(--text-muted); margin-top: 6px; }
.phone-temp { align-self: center; margin: 0 0 12px; background: var(--surface); border-radius: var(--r-round); padding: 11px 20px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-s); }
.phone-temp b { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.phone-temp small { font-size: .8125rem; color: var(--text-muted); font-weight: 400; }
.phone-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 26px; }
.phone-pause { width: 58px; height: 58px; border-radius: var(--r-round); background: #8B8172; display: flex; align-items: center; justify-content: center; }
.phone-stop { width: 40px; height: 40px; border-radius: var(--r-round); border: 1.6px solid var(--text-muted); display: flex; align-items: center; justify-content: center; }
.phone-home { position: absolute; bottom: 7px; left: 50%; margin-left: -54px; width: 108px; height: 4px; border-radius: var(--r-round); background: var(--ink); opacity: .3; }
@media (max-width: 420px) { .phone { transform: rotate(-4deg) scale(.86); margin: 6px -14px -30px; } }
.lp-problem-leaf { display: block; margin-bottom: 14px; }
.lp-quote .quote-mark { display: block; margin-bottom: 4px; }
.lp-pricing-more { font-weight: 600; white-space: nowrap; }

/* Lead-form messages. Styled here rather than written as inline styles by
   leadform.mjs so the CSP never has to allow style-src 'unsafe-inline'. */
.lf-message { margin: 10px 0 0; font-size: .875rem; color: var(--error-text); }
.lf-message[hidden] { display: none; }