/* ============================================================
   Marketing page for smr.acmeai.vn
   Design tokens, buttons and the tier palette come from app.css,
   which this page loads first, so both sites stay in sync.
   ============================================================ */

/* Anchor jumps must clear the sticky header, otherwise a phone lands with the
   section eyebrow hidden behind it. */
html:has(body.lp) { scroll-padding-top: 72px; }
body.lp { background: var(--paper); }

.lp-wrap { width: min(1120px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.lp-wrap--narrow { width: min(860px, 100%); }

.lp h1, .lp h2, .lp h3 { letter-spacing: -.025em; }
.lp h1 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; font-weight: 650; margin: 14px 0 0; max-width: 17ch; }
/* Product name lives inside the H1 so the search snippet and the page agree on
   what this is, without giving up the hook as the loudest line. */
.lp-h1__kicker {
  display: block; margin-bottom: 12px;
  font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.lp h2 { font-size: clamp(23px, 2.8vw, 34px); line-height: 1.14; font-weight: 640; margin: 10px 0 0; max-width: 22ch; }
.lp h3 { font-size: 15px; font-weight: 640; margin: 0; }
.lp p { margin: 0; }

.lp-eyebrow {
  font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}

/* ".lp p" zeroes every paragraph margin; the lead needs the higher
   specificity to keep its gap under the headline. */
.lp .lp-lead {
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.6; color: var(--ink-2);
  margin-top: 22px; max-width: 54ch;
}

.lp-fine { font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ---------- header ---------- */
.lp-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.lp-header__inner { display: flex; align-items: center; gap: 22px; height: 62px; }
.lp-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.lp-brand img { display: block; flex: none; object-fit: contain; }
.lp-brand__name { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; }
.lp-brand__sub {
  display: block; font-size: 10px; font-weight: 550; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.lp-nav { display: flex; gap: 18px; margin-left: auto; }
.lp-nav a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.lp-nav a:hover { color: var(--ink); text-decoration: underline; }
.lp-header__actions { display: flex; align-items: center; gap: 10px; }
.lp-lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; padding: 0 7px;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  color: var(--ink-2); font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-decoration: none;
}
.lp-lang:hover { color: var(--ink); border-color: var(--ink-2); text-decoration: none; }
.lp-link { font-size: 13.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.lp-link:hover { color: var(--ink); text-decoration: underline; }

/* ---------- buttons ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.lp-btn:hover { border-color: var(--ink-2); text-decoration: none; }
.lp-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lp-btn--primary:hover { filter: brightness(.94); border-color: var(--accent); color: var(--accent-ink); }
.lp-btn--lg { height: 44px; padding: 0 22px; font-size: 14.5px; }
.lp-btn__hint { font-weight: 500; font-size: 12.5px; opacity: .78; }

/* ---------- hero ---------- */
.lp-hero { padding: clamp(38px, 6vw, 76px) 0 clamp(34px, 5vw, 60px); }
.lp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.lp-hero__copy { max-width: 560px; }
.lp-hero__figure { min-width: 0; }
.lp-hero__figure .smr-flow { width: 100%; max-width: 560px; margin-left: auto; }

.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.lp-trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--muted);
}
.lp-trust li { display: flex; align-items: center; gap: 7px; }
.lp-trust li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* ---------- sections ---------- */
/* app.css gives dashboard sections a 30px bottom margin. The marketing page
   builds its rhythm from padding and borders, so that margin would cut a
   strip out of every band. */
.lp section { margin: 0; }
.lp-section { padding: clamp(40px, 6vw, 76px) 0; border-top: 1px solid var(--rule); }
.lp-section--alt { background: var(--paper-2); }
.lp-section__head { max-width: 62ch; }
.lp-section__head p { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.62; }

/* ---------- cards ---------- */
.lp-cards { list-style: none; display: grid; gap: 14px; margin: 30px 0 0; padding: 0; }
.lp-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-card {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--surface);
  padding: 18px 18px 20px; display: grid; gap: 8px; align-content: start;
}
.lp-card p { color: var(--muted); font-size: 13.5px; line-height: 1.58; }
.lp-card__icon {
  width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 2px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.lp-card__icon svg { width: 15px; height: 15px; stroke-width: 1.7; }

/* ---------- steps ---------- */
.lp-steps {
  list-style: none; counter-reset: none; display: grid; gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0 0; padding: 0;
}
.lp-steps li { padding: 0 20px 0 0; border-left: 1px solid var(--rule-strong); padding-left: 18px; }
.lp-steps li:first-child { border-left: 0; padding-left: 0; }
.lp-steps__n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; margin-bottom: 12px;
}
.lp-steps h3 { font-size: 14px; }
.lp-steps p { color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: 6px; }
.lp-steps code { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
/* Only the note that closes a section gets the extra air; the same class is used
   for the fine print inside the top-up card, where it must hug the plan list. */
.lp-section > .lp-fine { margin-top: 26px; max-width: 70ch; }

/* ---------- tiers ---------- */
.lp-tiers {
  list-style: none; display: grid; gap: 12px; margin: 30px 0 0; padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lp-tier {
  --_t: var(--tier-easy);
  position: relative; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); padding: 16px 16px 18px;
}
.lp-tier::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--_t);
}
.lp-tier--easy { --_t: var(--tier-easy); }
.lp-tier--lower_medium { --_t: var(--tier-lower_medium); }
.lp-tier--upper_medium { --_t: var(--tier-upper_medium); }
.lp-tier--hard { --_t: var(--tier-hard); }
.lp-tier__swatch {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--_t); margin-bottom: 10px;
}
.lp-tier h3 { font-size: 14px; }
.lp-tier__role { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); font-weight: 550; }
.lp-tier__eg { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* ---------- cost ---------- */
.lp-cost {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px); margin-top: 30px; align-items: start;
}
.lp-facts { list-style: none; display: grid; gap: 20px; margin: 0; padding: 0; }
.lp-facts li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.lp-facts__icon {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); margin-top: 1px;
}
.lp-facts__icon svg { width: 15px; height: 15px; stroke-width: 1.7; }
.lp-facts h3 { font-size: 14.5px; }
.lp-facts p { color: var(--muted); font-size: 13.5px; line-height: 1.58; margin-top: 5px; }

.lp-plans {
  border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface);
  padding: 18px 18px 20px; display: grid; gap: 14px;
}
.lp-plans > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lp-plans > ul li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.lp-plans > ul li:last-child { border-bottom: 0; }
.lp-plans__amount { font-variant-numeric: tabular-nums; font-weight: 640; font-size: 16px; }
.lp-plans__name { font-size: 12.5px; color: var(--muted); }
.lp-plans .lp-btn { width: 100%; }

/* ---------- privacy ---------- */
.lp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.lp-panel {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--surface);
  padding: 18px;
}
.lp-panel h3 { font-size: 14.5px; margin-bottom: 8px; }
.lp-panel p { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.lp-panel p + p { margin-top: 8px; }

.lp-warn {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--rule));
  background: var(--warn-soft); border-radius: 4px; color: var(--warn);
}
.lp-warn svg { width: 19px; height: 19px; stroke-width: 1.7; margin-top: 1px; }
.lp-warn strong { font-size: 13.5px; }
.lp-warn p { margin-top: 4px; font-size: 13px; line-height: 1.58; color: color-mix(in srgb, var(--warn) 82%, var(--ink)); }

/* ---------- faq ---------- */
.lp-faq { margin-top: 26px; border-top: 1px solid var(--rule); }
.lp-faq details { border-bottom: 1px solid var(--rule); }
.lp-faq summary {
  cursor: pointer; list-style: none; padding: 15px 28px 15px 0; position: relative;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 18px; font-weight: 400; line-height: 1;
}
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details[open] summary { color: var(--accent); }
.lp-faq p { padding: 0 0 16px; max-width: 68ch; color: var(--muted); font-size: 13.5px; line-height: 1.62; }

/* ---------- install ---------- */
.lp-install { padding: clamp(42px, 6vw, 76px) 0; border-top: 1px solid var(--rule); background: var(--accent-soft); }
.lp-install__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.lp-install h2 { max-width: 16ch; }
.lp-install p { margin-top: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 44ch; }
.lp-install .lp-btn { margin-top: 22px; }
.lp-cmds { display: grid; gap: 10px; }
.lp-cmd { border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface); overflow: hidden; }
.lp-cmd__head {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px;
  border-bottom: 1px solid var(--rule); background: var(--paper-2);
  font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.lp-copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 3px;
  height: 24px; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; letter-spacing: 0; text-transform: none;
}
.lp-copy:hover { border-color: var(--ink-2); color: var(--ink); }
.lp-copy svg { width: 12px; height: 12px; stroke-width: 1.8; }
/* The install command is long and the reader has a copy button, so wrap it
   instead of clipping. A clipped command reads as if it were truncated. */
.lp-cmd pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.lp-cmd code {
  font-family: var(--mono); font-size: 12.3px; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- footer ---------- */
.lp-footer { border-top: 1px solid var(--rule); background: var(--paper-2); padding: 34px 0 26px; }
.lp-footer__inner { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
.lp-footer .lp-fine { margin-top: 10px; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.lp-footer__links a { color: var(--ink-2); text-decoration: none; }
.lp-footer__links a:hover { color: var(--ink); text-decoration: underline; }
.lp-copyright { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero__figure .smr-flow { max-width: 520px; margin: 0 auto; }
  .lp-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .lp-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .lp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cost { grid-template-columns: minmax(0, 1fr); }
  .lp-install__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .lp-nav { display: none; }
  .lp-header__actions { margin-left: auto; }
}

@media (max-width: 640px) {
  /* The headline comes first on a phone; the illustration follows the CTA. */
  .lp-header__inner { gap: 10px; height: 56px; }
  .lp-brand img { width: 30px; height: 30px; }
  .lp-brand__sub { display: none; }
  .lp-header__actions { gap: 8px; }
  .lp-lang { height: 24px; min-width: 28px; padding: 0 6px; font-size: 10.5px; }
  .lp-header__actions .lp-btn { height: 38px; padding: 0 12px; font-size: 13px; }
  .lp h1 { max-width: 20ch; }
  .lp-section { padding: 34px 0; }
  .lp-section__head p { font-size: 14px; }
  .lp-cards--three { grid-template-columns: minmax(0, 1fr); }
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-steps li { border-left: 0; padding-left: 0; }
  .lp-tiers { grid-template-columns: minmax(0, 1fr); }
  .lp-two { grid-template-columns: minmax(0, 1fr); }
  .lp-cta .lp-btn { flex: 1 1 100%; }
  .lp-hero { padding-top: 26px; }
  /* Stacked figure: the wide one shrinks its 13px tier labels to about 7px here. */
  .lp .smr-flow--wide { display: none; }
  .lp .smr-flow--compact { display: block; }
  .lp-hero__figure .smr-flow { max-width: 100%; margin: 0; }
  .lp-card { padding: 16px 16px 18px; }
  .lp-faq summary { padding: 16px 28px 16px 0; font-size: 14px; }
  .lp-cmd pre { overflow-x: auto; }
  .lp-footer__inner { flex-direction: column; }
}

/* Below 340px the three header actions cannot share one line. The page's main
   call to action is the install button, and the hero repeats it one screen
   down, so the sign-in link steps aside instead of wrapping every label. */
@media (max-width: 340px) {
  .lp-header__actions .lp-link { display: none; }
}