/* ============================================================
   cstoken.net landing — "Turn over-allocated AI budget into
   Claude savings."

   Two columns: the claim on the left, the billing contract on the
   right. Headline 32px against a 24px price, so the two stop tying
   for first attention the way a 36/32 pair did.

   Colour follows site.css's tiers: --action orange fills the one
   conversion CTA, --brand green marks identity, links and the trust
   badges. There is no second button beside 시작하기 — the enterprise
   ask lives in its own band with its own heading, because as a twin
   button of the same size it made both CTAs ambiguous. 확장 플랜 sits
   in its own card under 개인 플랜 with a neutral-tier CTA: it is the
   same plan bought in a quantity, not a second money action.

   Four layout defects this file exists to keep fixed:

     - The promotion was a 13px muted pill above the h1, quieter than
       the trust labels under it. It is now a full-bleed bar above the
       top bar, which is the loudest slot on the page.
     - A disclosure row was 880px wide with a four-character label, so
       798px separated the label from its own +/- marker. The marker
       now sits beside the label and the rows run two per line.
     - A section note sat 451px from its own heading on the same line.
       Notes go under headings.
     - The kit list was numbered 01/02/03, implying a sequence that
       does not exist, and title-only entries carried no information.

   Motion is limited to the promotion dot, the provisioning loop in the
   hero and the Jev terminal's spinner; all of it stops under
   prefers-reduced-motion, which shows each illustration's end state.

   Loads after site.css. Every colour comes from that token layer.
   ============================================================ */

html:has(.landing-page) { scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--surface-muted); }

/* Tokens live in site.css :root — this file only adds landing-specific layout. */
.landing-page { background: var(--surface-page); }

/* ---- brand mark ---- */
/* The mark is 25px but the link around it has to clear 44px. Both bars are
   taller than that already, so this costs no page height. */
.landing-page .brand { min-height: 44px; }
.landing-page .brand__mark { display: inline-block; width: 28px; height: 28px; }
.landing-page .topbar .brand { gap: 4px; }
.brand__wordmark { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.brand__wordmark strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.brand__wordmark small { padding-left: 4px; border-left: .5px solid var(--border-subtle); color: var(--brand-dark); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* ---- one container, one rhythm ---- */
.lp { width: min(840px, calc(100% - 40px)); margin: 0 auto; }
.main-lp { flex: 1; }
.lp-section { padding: 48px 0; border-top: 1px solid var(--border-subtle); }
.lp-section--mist { background: var(--surface-subtle); }
.lp-head { margin: 0 0 16px; }
.lp-h2 { margin: 0; font-weight: 700; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.4; letter-spacing: -.01em; word-break: keep-all; }
.lp-h1 { margin: 0; color: var(--text-strong); font-weight: 700; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.28; letter-spacing: -.025em; word-break: keep-all; }
.lp-eyebrow { margin: 0 0 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* The first section of a sub-page sits under the top bar, not under another
   section, so it drops the divider and takes the hero's top spacing. */
.lp-section--lead { padding-top: 56px; border-top: 0; }
.lp-section--lead .lp-head { margin-bottom: 24px; }
.lp-section--lead .lp-note { margin-top: 12px; font-size: 14px; }
/* ---- closing CTA band on sub-pages ---- */
.lp-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.lp-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-cta .button { min-height: 48px; font-size: 16px; }
.lp-cta--center { flex-direction: column; justify-content: center; text-align: center; }
.lp-cta--center .lp-cta__actions { justify-content: center; }

/* ---- sub-page header: centred, the same rhythm on service and pricing ---- */
.lp-page { padding: 56px 0 48px; }
.lp-page__head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.lp-page__lead, .lp-section--lead .lp-page__lead { margin: 12px auto 0; color: var(--text-muted); font-size: 15px; line-height: 1.65; text-wrap: balance; word-break: keep-all; }
.lp-head--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.lp-head--center .lp-note { text-wrap: balance; }
.lp-page__lead .nowrap { white-space: nowrap; }
.cc.cc--page { max-width: 760px; margin: 0 auto; }
.lp-note { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; word-break: keep-all; }

/* ============================================================
   PROMOTION — full bleed, above everything
   ============================================================ */
.promo { background: var(--brand-dark); color: var(--surface-default); }
.promo__inner {
  width: min(840px, calc(100% - 40px)); margin: 0 auto;
  min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 0; font-size: 13px; font-weight: 500; line-height: 1.5; text-align: center; word-break: keep-all;
}
.promo__inner b { font-weight: 700; }
.promo__dot {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--focus-ring);
  animation: promo-pulse 2s var(--ease) infinite;
}
@keyframes promo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- sticky top bar ---- */
.landing-page .topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 252, 253, .85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.landing-page .topbar__inner { min-height: 56px; width: min(840px, calc(100% - 40px)); }
.lp-nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.lp-nav__account { display: inline-flex; align-items: center; gap: 8px; }
.lp-nav__pages { display: inline-flex; align-items: center; gap: 16px; }
.lp-nav__pages a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.lp-nav__pages a[aria-current="page"] { color: var(--text-strong); font-weight: 700; box-shadow: inset 0 -2px var(--brand); }
.lp-nav .button { flex: 0 0 auto; white-space: nowrap; }
/* :not(.button) — landing.css loads after site.css, so an unscoped .lp-nav a
   was repainting the login button's label muted and overriding its tier. */
.lp-nav a:not(.button) { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.lp-nav a:not(.button):hover { color: var(--text-strong); }

/* ============================================================
   HERO — the claim on the left, the contract on the right
   ============================================================ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 40px; align-items: start; padding: 32px 0 24px; }
.hook {
  margin: 0; font-weight: 700;
  font-size: clamp(24px, 3.2vw, 32px); line-height: 1.28; letter-spacing: -.025em;
  color: var(--text-strong); word-break: keep-all;
}
/* ---- status row above the h1: live state first, then the integration ---- */
.hero__status { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.hero__status-item { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-default); color: var(--text-default); font-size: 12px; font-weight: 600; line-height: 1.5; }
.hero__status-item svg { width: 14px; height: 14px; color: var(--text-strong); }
.hero__status-item--live { background: var(--success-bg); border-color: transparent; }
.hero__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.hero__answer { margin: 16px 0 0; color: var(--text-default); font-size: 15px; line-height: 1.65; word-break: keep-all; }
/* Home: one centred column — claim, sub, one action, then the proof (the
   provisioning loop and the three promises). The contract lives on /pricing/. */
.hero--home { grid-template-columns: minmax(0, 1fr); padding: 56px 0 40px; }
.hero--center .hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero--center .hero__status { justify-content: center; margin-bottom: 24px; }
.hook--home { font-size: clamp(30px, 5.2vw, 48px); line-height: 1.22; letter-spacing: -.035em; }
.hero__sub { margin: 16px 0 0; color: var(--text-strong); font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; word-break: keep-all; }
.hero--center .hero__answer { max-width: 600px; margin-top: 8px; color: var(--text-muted); text-wrap: balance; }
.hero__tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; }
.hero__tags li { padding: 4px 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-default); color: var(--text-default); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 32px 0 0; }
.hero__cta .button { min-height: 56px; padding: 0 40px; border-radius: 999px; font-size: 18px; box-shadow: 0 8px 24px color-mix(in srgb, var(--action) 20%, transparent); }
.hero__cta .button:hover { transform: translateY(-1px); }
.hero__cta-note { margin: 0; color: var(--text-muted); font-size: 13px; word-break: keep-all; }
/* The loop and the promises keep their own left alignment inside the centred
   column: they are content to scan, not a headline. */
.hero--center .prov { align-self: stretch; margin-top: 40px; text-align: left; }
.trust--row { align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; text-align: left; }
.trust--row li { align-items: flex-start; font-size: 13px; }
.hero--center .operator { align-self: stretch; margin-top: 24px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .hero__cta .button:hover { transform: none; } }

/* ---- trust: a vertical list, short lines, one weight ---- */
/* Emphasis lives in the badge, not the text. The row used to be 700 across
   all three items, level with the section title; at 500 it reads as support
   and the green disc does the drawing. */
.trust { list-style: none; margin: 24px 0 0; padding: 16px 0 0; display: grid; gap: 12px; border-top: 1px solid var(--border-default); }
.trust li { display: flex; align-items: center; gap: 12px; color: var(--text-default); font-size: 14px; font-weight: 500; line-height: 1.5; word-break: keep-all; }
.trust__badge { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand); }
.trust__badge svg { width: 17px; height: 17px; }

/* ---- operator provenance, closing the left column ---- */
.operator { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12px; line-height: 1.7; word-break: keep-all; }
.operator b { color: var(--text-default); font-weight: 600; }
/* Underlined at rest: these sit inside a sentence and were the same colour as
   the text around them, so nothing marked them as tappable. */
.operator a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.operator a:hover { color: var(--text-strong); }

/* ---- provisioning: three beats on one loop ----
   One clock drives everything (--prov-cycle). Each step owns a third of it:
   0–33% pay, 33–66% the invite leaves the envelope, 66–100% the workspace
   answers. Steps 2 and 3 reuse the step-1 highlight shifted by a third.
   The 4px padding with a matching negative margin keeps the active ring
   inside the clip that stops the travelling light from widening the page. */
.prov { --prov-cycle: 3s; margin: 20px -4px 0; padding: 4px; overflow: hidden; }
.prov__steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
/* The track only shows in the gaps between cards; the light runs along it. */
.prov__steps::before, .prov__steps::after { content: ""; position: absolute; top: 50%; height: 2px; border-radius: 2px; }
.prov__steps::before { left: 0; right: 0; background: var(--border-default); }
.prov__steps::after { left: -48px; width: 48px; background: linear-gradient(90deg, transparent, var(--success), transparent); animation: prov-track var(--prov-cycle) linear infinite; }
.prov__step { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 12px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--r-sm); background: var(--surface-default); animation: prov-on var(--prov-cycle) var(--ease) infinite; }
.prov__step::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--success), transparent); transform: translateX(-100%); animation: prov-sheen var(--prov-cycle) linear infinite; }
.prov__step--2, .prov__step--2::after { animation-delay: calc(var(--prov-cycle) * -2 / 3); }
.prov__step--3, .prov__step--3::after { animation-delay: calc(var(--prov-cycle) * -1 / 3); }
.prov__label { margin: 0; color: var(--text-strong); font-size: 13px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.prov__label span { display: block; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.prov__stage { position: relative; height: 112px; margin-top: 8px; display: grid; place-items: center; }
.prov__note { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; text-align: center; word-break: keep-all; }

/* step 1: the cursor lands, the button gives, the check appears */
.prov__pay { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--r-btn); background: var(--action); color: var(--surface-default); font-size: 12px; font-weight: 700; white-space: nowrap; animation: prov-press var(--prov-cycle) var(--ease) infinite; }
.prov__pay svg { width: 14px; height: 14px; animation: prov-check var(--prov-cycle) linear infinite; }
.prov__cursor { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border: 2px solid var(--text-strong); border-radius: 50%; background: rgba(255, 255, 255, .6); pointer-events: none; animation: prov-cursor var(--prov-cycle) var(--ease) infinite; }

/* step 2: the flap flips back, the seat card rises, its button is pressed */
.env { position: relative; width: 112px; height: 64px; align-self: end; margin-bottom: 4px; perspective: 320px; }
.env__back, .env__front, .env__flap { position: absolute; left: 0; right: 0; border-radius: 4px; }
.env__back { top: 0; bottom: 0; z-index: 0; background: var(--border-default); }
.env__card { position: absolute; top: 8px; left: 8px; right: 8px; height: 52px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: 4px; background: var(--surface-default); box-shadow: 0 4px 12px rgba(20, 23, 26, .12); animation: env-card var(--prov-cycle) var(--ease) infinite; }
.env__card small { color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em; transform: scale(.75); }
.env__card b { color: var(--text-strong); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; }
.env__card em { font-style: normal; padding: 0 4px; border-radius: 4px; background: var(--brand-tint); }
.env__card i { margin-top: 4px; padding: 0 8px; border-radius: 999px; background: var(--brand); color: var(--surface-default); font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.5; white-space: nowrap; transform: scale(.8); animation: env-btn var(--prov-cycle) var(--ease) infinite; }
.env__front { top: 0; bottom: 0; z-index: 3; background: var(--surface-muted); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env__flap { top: 0; height: 40px; z-index: 4; background: var(--surface-subtle); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; animation: env-flap var(--prov-cycle) var(--ease) infinite; }

/* step 3: the workspace lights up and Claude starts typing */
.term { width: 100%; padding: 8px; border-radius: var(--r-sm); background: var(--invert-surface); color: var(--invert-text); animation: term-on var(--prov-cycle) var(--ease) infinite; }
.term__bar { display: flex; align-items: center; gap: 4px; }
.term__bar i { width: 6px; height: 6px; border-radius: 50%; }
.term__bar i:nth-child(1) { background: var(--danger); }
.term__bar i:nth-child(2) { background: var(--warning); }
.term__bar i:nth-child(3) { background: var(--success); }
.term__bar small { margin-left: auto; color: var(--invert-muted); font-size: 12px; line-height: 1; }
.term__who { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.term__who b { color: var(--surface-default); font-size: 12px; font-weight: 600; }
.claude-px { width: 28px; height: 18px; fill: var(--claude-mark); animation: claude-hop var(--prov-cycle) steps(1) infinite; }
.claude-px__eye { fill: var(--invert-surface); }
.term__line { display: flex; align-items: center; gap: 4px; min-height: 20px; margin-top: 4px; font-size: 12px; }
.term__line::before { content: "\203A"; color: var(--invert-link); font-weight: 700; }
.term__type { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--invert-link); animation: term-type var(--prov-cycle) steps(11, end) infinite, term-caret .6s steps(1) infinite; }

@keyframes prov-track { from { left: -48px; } to { left: 100%; } }
@keyframes prov-on {
  0% { border-color: var(--border-default); box-shadow: none; }
  4%, 30% { border-color: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }
  36%, 100% { border-color: var(--border-default); box-shadow: none; }
}
@keyframes prov-sheen { 0% { transform: translateX(-100%); opacity: 1; } 30% { transform: translateX(100%); opacity: 1; } 31%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes prov-cursor {
  0% { transform: translate(24px, 28px); opacity: 0; }
  5% { opacity: 1; }
  12% { transform: translate(-8px, -8px); }
  15% { transform: translate(-8px, -8px) scale(.7); }
  19% { transform: translate(-8px, -8px) scale(1); opacity: 1; }
  30%, 100% { transform: translate(-8px, -8px); opacity: 0; }
}
@keyframes prov-press { 0%, 12% { transform: scale(1); background: var(--action); } 15% { transform: scale(.92); background: var(--action-dark); } 20%, 100% { transform: scale(1); background: var(--action); } }
@keyframes prov-check { 0%, 16% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes env-flap { 0%, 34% { transform: rotateX(0); z-index: 4; } 42%, 94% { transform: rotateX(180deg); z-index: 1; } 100% { transform: rotateX(0); z-index: 4; } }
@keyframes env-card { 0%, 42% { transform: translateY(0); } 50% { transform: translateY(-48px); } 54%, 92% { transform: translateY(-44px); } 98%, 100% { transform: translateY(0); } }
@keyframes env-btn { 0%, 58% { transform: scale(.8); background: var(--brand); } 61% { transform: scale(.68); background: var(--brand-dark); } 65%, 100% { transform: scale(.8); background: var(--brand); } }
@keyframes term-on { 0%, 62% { opacity: .45; } 68%, 100% { opacity: 1; } }
@keyframes claude-hop { 0%, 66% { transform: none; } 68% { transform: translateY(-2px); } 72%, 100% { transform: none; } }
@keyframes term-type { 0%, 70% { max-width: 0; } 92%, 100% { max-width: 10.5em; } }
@keyframes term-caret { 50% { border-right-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .prov *, .prov *::before, .prov *::after { animation: none !important; }
  .prov__steps::after, .prov__cursor { display: none; }
  .env__flap { transform: rotateX(180deg); z-index: 1; }
  .env__card { transform: translateY(-44px); }
  .term__type { max-width: none; border-right: 0; }
}

/* ---- plan card: the whole billing contract, one row per fact ---- */
.plan { padding: 20px; border: 1px solid var(--border-default); border-radius: var(--r); background: var(--surface-default); box-shadow: var(--shadow-card); }
.plan__amt { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.plan__amt b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.plan__amt span { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.plan__save { margin: 8px 0 0; display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: var(--brand-tint); color: var(--text-default); font-size: 12px; font-weight: 600; }
.plan__lines { display: grid; margin: 16px 0 0; }
.plan__lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: 13px; line-height: 1.5; }
.plan__lines dt { color: var(--text-muted); white-space: nowrap; }
.plan__lines dd { margin: 0; color: var(--text-strong); font-weight: 600; text-align: right; word-break: keep-all; }
/* inherit, not bold: the UA resolves <b> inside a 600 dd to `bolder` = 900,
   which is off the scale. */
.plan__lines b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.plan .button { width: 100%; margin-top: 16px; min-height: 52px; font-size: 16px; }
/* ---- personal plan ---- */
.plans { display: grid; gap: 12px; }
.plan__name { margin: 0 0 8px; color: var(--text-strong); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.plan__name small { color: var(--text-muted); font-size: 12px; font-weight: 500; }
/* Spec rows carry sentences, not two-word facts, so the value drops under its
   key instead of fighting it for 292px. */
.plan__lines--spec div { flex-direction: column; align-items: stretch; gap: 4px; }
.plan__lines--spec dt { font-size: 12px; }
.plan__lines--spec dd { text-align: left; font-weight: 500; }
.plan__lines--spec dd small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12px; font-weight: 400; }
/* Pricing page: one wide card, price and action left, the terms right. */
.plan--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; max-width: 760px; margin: 0 auto; padding: 32px; }
.plan__main { display: flex; flex-direction: column; align-items: flex-start; }
.plan--wide .plan__amt { flex-wrap: wrap; }
.plan--wide .plan__amt b { font-size: 40px; letter-spacing: -.03em; }
.plan__tags { justify-content: flex-start; margin-top: 16px; }
.plan--wide .button { margin-top: 24px; }
.plan__note { align-self: center; margin: 8px 0 0; color: var(--text-muted); font-size: 12px; }
.plan__specs { margin: 0; padding-left: 32px; border-left: 1px solid var(--border-subtle); }
.plan__specs div:first-child { padding-top: 0; border-top: 0; }
.lp-page .trust--row { max-width: 760px; margin: 32px auto 0; padding-top: 24px; }
.lp-page__contact { margin-top: 16px; padding-top: 0; border-top: 0; text-align: center; }
.plan .button--action { flex-direction: column; gap: 0; white-space: normal; word-break: keep-all; line-height: 1.35; }
.plan__tagline { margin: 12px 0 0; color: var(--text-strong); font-size: 13px; font-weight: 600; line-height: 1.5; word-break: keep-all; }
.plan__audience { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; word-break: keep-all; }
.plan__bullets { list-style: none; display: grid; gap: 4px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-subtle); }
.plan__bullets li { position: relative; padding-left: 12px; color: var(--text-default); font-size: 13px; line-height: 1.5; word-break: keep-all; }
.plan__bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }

/* ============================================================
   KIT — three cards, no false numbering, every card says something
   ============================================================ */
/* The disc is neutral here, not brand-tinted: these icons illustrate content
   rather than assert a state, and the rule is that green marks interaction,
   identity or status — never decoration. The trust badges are the one
   non-interactive green, because a trust mark IS a state claim. */
.kit { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.kit li { min-width: 0; padding: 24px; border: 1px solid var(--border-default); border-radius: var(--r); background: var(--surface-default); }
.kit__ico { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: var(--surface-muted); color: var(--text-muted); }
.kit__ico svg { width: 17px; height: 17px; }
.kit strong { display: block; font-weight: 600; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; word-break: keep-all; }
.kit p { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.7; word-break: keep-all; }

/* ---- Jev router demo: a Claude Code session ----
   Dark, monospace and laid out like the real CLI: welcome header, a
   transcript of ⏺ tool and reply lines with ⎿ output, the bordered prompt,
   then the suggestion menu and the footer hint. --claude-mark is the one
   accent here, as it is in the CLI; it never leaves Claude-owned surfaces. */
.cc { margin: 24px 0 0; overflow: hidden; border-radius: var(--r); background: var(--invert-surface); box-shadow: var(--shadow-panel); color: var(--invert-text); font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "D2Coding", monospace; font-size: 13px; line-height: 1.6; }
.cc__chrome { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cc__chrome i { width: 12px; height: 12px; border-radius: 50%; background: var(--invert-muted); opacity: .35; }
.cc__chrome span { position: absolute; left: 0; right: 0; color: var(--invert-muted); font-size: 12px; text-align: center; pointer-events: none; }
.cc__screen { padding: 16px; }
.cc__muted { color: var(--invert-muted); }
.cc__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc__welcome { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--claude-mark); border-radius: var(--r-sm); }
.cc__welcome p { margin: 0; }
.cc__welcome b { color: var(--surface-default); font-weight: 700; }
.cc .claude-px { width: 42px; height: 27px; flex: 0 0 42px; animation: none; }

.cc__log { min-height: 152px; max-height: 320px; margin: 16px 0 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.cc__log p { margin: 0; }
.cc__tip { color: var(--invert-muted); }
.cc__turn + .cc__turn { margin-top: 12px; }
.cc__user { display: flex; gap: 8px; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); color: var(--invert-muted); word-break: keep-all; }
.cc__status { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; color: var(--claude-mark); }
.cc__status small { color: var(--invert-muted); font-size: 12px; }
.cc__spin { width: 1ch; flex: 0 0 auto; text-align: center; }
.cc__line { display: flex; gap: 8px; margin-top: 8px; word-break: keep-all; }
.cc__line b { color: var(--surface-default); font-weight: 700; }
.cc__line--out { margin-top: 0; padding-left: 8px; }
.cc__dot { flex: 0 0 auto; color: var(--surface-default); }
.cc__dot--ok { color: var(--invert-link); }
.cc__result { position: relative; padding-left: 24px; }
.cc__result::before { content: "\23BF"; position: absolute; top: 0; left: 8px; color: var(--invert-muted); }
.cc__label { color: var(--invert-muted); }
/* The /model menu: every option listed, the pick marked the way the CLI marks
   a selection — caret, accent, check. */
.cc__models { list-style: none; display: grid; margin: 4px 0 0; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cc__models li { display: grid; grid-template-columns: 1ch 8em minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 4px; color: var(--invert-muted); opacity: .55; }
.cc__models b { font-weight: 400; color: inherit; }
.cc__pick, .cc__badge { visibility: hidden; }
.cc__models li.is-picked { background: rgba(255, 255, 255, .06); color: var(--surface-default); opacity: 1; animation: cc-pick .32s var(--ease); }
.cc__models li.is-picked b { color: var(--claude-mark); font-weight: 700; }
.cc__models li.is-picked .cc__pick { visibility: visible; color: var(--claude-mark); }
.cc__models li.is-picked .cc__badge { visibility: visible; color: var(--invert-link); font-size: 12px; }
.cc__why { margin-top: 8px !important; word-break: keep-all; }
.cc__rows { display: grid; gap: 0; margin: 4px 0 0; padding: 0; }
@keyframes cc-pick { from { background: rgba(217, 119, 87, .28); } }
@media (prefers-reduced-motion: reduce) { .cc__models li.is-picked { animation: none; } }
.cc__rows div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px; }
.cc__rows dt { color: var(--invert-muted); }
.cc__rows dd { margin: 0; color: var(--surface-default); word-break: keep-all; }
.cc__ok { color: var(--invert-link) !important; }

.cc__prompt { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 4px 4px 4px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease); }
.cc__prompt:focus-within { border-color: var(--claude-mark); outline: 2px solid var(--claude-mark); outline-offset: 2px; }
.cc__caret { flex: 0 0 auto; color: var(--invert-muted); }
.cc__prompt .cc__caret { color: var(--surface-default); }
.cc__prompt input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--surface-default); font: inherit; caret-color: var(--claude-mark); }
.cc__prompt input::placeholder { color: var(--invert-muted); opacity: .7; }
.cc__prompt input:focus { outline: none; }
.cc__enter { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 4px; background: transparent; color: var(--invert-muted); font: inherit; cursor: pointer; }
.cc__enter:hover, .cc__enter:focus-visible { background: rgba(255, 255, 255, .08); color: var(--surface-default); }
.cc__enter:focus-visible { outline: 2px solid var(--claude-mark); outline-offset: 2px; }

.cc__menu { display: grid; margin: 8px 0 0; }
.cc__example { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--invert-muted); font: inherit; text-align: left; word-break: keep-all; cursor: pointer; }
.cc__example::before { content: "/"; color: var(--invert-muted); opacity: .6; }
.cc__example:hover, .cc__example:focus-visible { background: rgba(255, 255, 255, .06); color: var(--claude-mark); }
.cc__example:focus-visible { outline: 2px solid var(--claude-mark); outline-offset: -2px; }
.cc__example:hover::before, .cc__example:focus-visible::before { content: "\203A"; color: var(--claude-mark); opacity: 1; }
.cc__example:disabled { cursor: progress; opacity: .5; }
.cc__foot { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; padding: 0 12px; color: var(--invert-muted); font-size: 12px; }
.cc__on { color: var(--invert-link); }

/* ============================================================
   DISCLOSURES — two per line, marker beside its label
   ============================================================ */
.disclosures { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.disclosures details { border-top: 1px solid var(--border-default); }
.disclosures details:nth-last-of-type(-n+2) { border-bottom: 1px solid var(--border-default); }
.disclosures summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 4px; list-style: none; cursor: pointer; color: var(--text-strong); font-size: 13px; font-weight: 500; }
.disclosures summary::-webkit-details-marker { display: none; }
.disclosures summary::after { content: "+"; color: var(--brand); font-size: 15px; font-weight: 600; line-height: 1; transition: transform .15s ease; }
.disclosures details[open] summary::after { content: "\2212"; }
@media (prefers-reduced-motion: reduce) { .disclosures summary::after { transition: none; } }
.disclosures__body { padding: 0 4px 12px; }
.disclosures__body p { margin: 0; color: var(--text-default); font-size: 13px; line-height: 1.7; word-break: keep-all; }
.disclosures__body a { color: var(--brand); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
/* Pricing FAQ: one column of full rows, marker at the row's right edge. */
.disclosures--list { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }
.disclosures--list details:nth-last-of-type(-n+2) { border-bottom: 0; }
.disclosures--list details:last-of-type { border-bottom: 1px solid var(--border-default); }
.disclosures--list summary { min-height: 56px; justify-content: space-between; padding: 12px 4px; font-size: 15px; }
.disclosures--list .disclosures__body { padding-bottom: 16px; }
.disclosures--list .disclosures__body p { font-size: 14px; }

/* ============================================================
   FOOTER — one hairline row: the mark, then the policies
   ============================================================ */
/* Muted grey separates the footer while retaining readable light-surface text. */
.landing-page .footer { background: var(--surface-muted); color: var(--text-muted); border-top: 1px solid var(--border-default); }
.lp-footer { width: min(840px, calc(100% - 40px)); margin: 0 auto; }
.lp-footer__bar { min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.lp-footer .brand { min-height: 44px; color: var(--text-strong); font-size: 14px; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 13px; }
/* padding grows the hit area to 44px without adding page height, because the
   row was already taller than the text. */
.lp-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.lp-footer__links a:hover { color: var(--text-strong); }
.lp-footer__meta { display: grid; grid-template-columns: 1fr .8fr 1.2fr; gap: 20px; padding: 16px 0 20px; border-top: 1px solid var(--border-subtle); }
.lp-footer__meta p, .lp-footer__meta address { min-width: 0; margin: 0; font-style: normal; line-height: 1.6; word-break: keep-all; }
.lp-footer__meta span:first-child { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lp-footer__meta strong { display: block; color: var(--text-default); font-size: 12px; font-weight: 600; }
.lp-footer__meta a { color: var(--text-default); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lp-footer__meta a:hover { color: var(--text-strong); }

/* Auth dialog styles live in site.css (single canonical definition). */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 820px) {
  .lp-page .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--wide { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .plan__specs { padding-left: 0; border-left: 0; }
  .plan__specs div:first-child { padding-top: 8px; border-top: 1px solid var(--border-subtle); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .kit { grid-template-columns: 1fr; }
  .disclosures { grid-template-columns: 1fr; }
  .disclosures details:nth-last-of-type(-n+2) { border-bottom: 0; }
  .disclosures details:last-of-type { border-bottom: 1px solid var(--border-default); }
  .lp-footer__meta { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 620px) {
  .lp-page { padding: 32px 0; }
  .lp-page__head { margin-bottom: 24px; }
  .lp-section--lead { padding-top: 32px; }
  .plan--wide { padding: 20px; }
  .plan--wide .button { padding: 12px 16px; }
  .plan__amt { column-gap: 8px; }
  .plan--wide .plan__amt b { font-size: 32px; }
  .landing-page .topbar__inner { gap: 8px; }
  .prov__steps { grid-template-columns: minmax(0, 1fr); }
  .prov__steps::before, .prov__steps::after { display: none; }
  .cc__screen { padding: 12px; }
  .cc__prompt input { font-size: 16px; }
  .cc__rows div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cc__models li { grid-template-columns: 1ch minmax(0, 1fr) auto; }
  .cc__models li .cc__muted { grid-column: 2 / -1; grid-row: 2; font-size: 12px; }
  .cc__rows dd { margin-bottom: 4px; }
  .cc__foot span:first-child { display: none; }
  .lp-nav__account { gap: 4px; }
  .lp-nav a:not(.button):not([hreflang]):not([data-nav-page]) { display: none; }
  .lp-nav { gap: 12px; }
  .lp-nav__pages { gap: 12px; }
  .lp-cta__actions, .lp-cta__actions .button, .hero__cta, .hero__cta .button { width: 100%; }
  .hero__cta .button { padding: 0 16px; }
  .hero--home { padding: 32px 0 24px; }
  .trust--row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .trust--row li { align-items: center; font-size: 15px; }
  .lp-section { padding: 32px 0; }
  /* Density pushed prose to 13px, below the 16px mobile floor. The
     disclosures matter most — they are the refund and privacy terms. */
  .disclosures__body p, .disclosures--list .disclosures__body p { font-size: 16px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan__lines div { font-size: 15px; }
  .plan__bullets li { font-size: 15px; }
  .trust li { font-size: 15px; }
  .kit p { font-size: 14px; }
}
/* Phone width: brand, two page links and Sign in need ~370px. The wordmark
   suffix goes first; it is not an action. */
@media (max-width: 440px) {
  .landing-page .brand__wordmark small { display: none; }
  .lp-nav, .lp-nav__pages { gap: 4px; }
  .lp-nav .button { padding-inline: 12px; }
  .lp-nav__pages a { justify-content: center; min-width: 44px; }
  .landing-page .topbar__inner, .lp, .lp-footer { width: calc(100% - 32px); }
  .plan--wide { padding: 20px 16px; }
  .plan__amt { gap: 4px 8px; }
  .hook--home { font-size: clamp(26px, 7.5vw, 32px); }
  .hero__status-item { max-width: 100%; font-size: 12px; }
  .hero__cta .button { font-size: 16px; white-space: normal; line-height: 1.5; padding: 12px 16px; }
}