/* djustlive public site: the visual system of the pre-overhaul site
   (djust.org's palette, grid backdrop, rust glow, terminal chrome), ported
   onto djust theme tokens so light and dark both work. Tokens are bare HSL
   components: always wrap them, hsl(var(--primary)). */

.layout-public {
  --brand-django: 157 46% 49%; /* #44B78B, Django green */
  --lp-radius: 10px;
  --lp-radius-sm: 6px;
  --lp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  position: relative;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
:root:has(> body.layout-public), .layout-public { overflow-x: clip; } /* the glows bleed past .wrap */
:where(.layout-public) a { color: inherit; text-decoration: none; transition: color .15s ease; } /* zero specificity: link classes win */
.layout-public ::selection { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* faint grid backdrop, like djust.org */
.layout-public::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, hsl(var(--border) / .35) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / .35) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 0%, transparent 75%);
}
.layout-public main, .layout-public .lp-nav, .layout-public .lp-footer { position: relative; z-index: 1; }

/* ─── nav ─── */
.lp-nav {
  position: sticky; top: 0; z-index: 100;
  background: hsl(var(--background) / .85);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid hsl(var(--border));
}
.lp-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; line-height: 1; }
.lp-brand img { height: 30px; width: auto; display: block; }
.lp-logo--light { display: none !important; }
[data-theme="light"] .lp-logo--dark { display: none !important; }
[data-theme="light"] .lp-logo--light { display: block !important; }
.lp-brand-divider { width: 1px; height: 22px; background: hsl(var(--border)); }
.lp-brand-tag {
  font-family: var(--lp-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: hsl(var(--primary)); padding: 3px 8px; border-radius: 5px;
  background: hsl(var(--primary) / .1); border: 1px solid hsl(var(--primary) / .25);
}
.lp-nav-links { display: flex; gap: 4px; align-items: center; }
.lp-nav-links a {
  font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground));
  padding: 8px 14px; border-radius: var(--lp-radius-sm);
  transition: color .15s ease, background .15s ease;
}
.lp-nav-links a:hover, .lp-nav-links a[aria-current="page"] { color: hsl(var(--foreground)); background: hsl(var(--card)); }
.lp-nav-actions { display: flex; gap: 10px; align-items: center; }
.lp-nav-signin { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); padding: 9px 12px; }
.lp-nav-signin:hover { color: hsl(var(--foreground)); }
@media (max-width: 860px) { .lp-nav-links { display: none; } }

/* djust's {% theme_mode_toggle %}: a ghost icon button. The icon shows the
   mode a click switches to — a sun in dark mode, a moon in light mode. */
.theme-mode { display: inline-flex; }
.theme-mode-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: transparent; color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--lp-radius-sm);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.theme-mode-toggle:hover { color: hsl(var(--foreground)); background: hsl(var(--card)); border-color: hsl(var(--primary) / .45); }
.theme-mode-toggle:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.theme-mode-toggle svg { display: none; }
.theme-mode-toggle::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--lp-icon) center / contain no-repeat; mask: var(--lp-icon) center / contain no-repeat;
  --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.theme-mode-toggle:hover::before { transform: rotate(20deg); }
[data-theme="light"] .theme-mode-toggle::before {
  --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}


/* ─── buttons ─── */
.lp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--lp-radius-sm);
  font-size: 15px; font-weight: 600; cursor: pointer; border: 0;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lp-btn--sm { padding: 9px 16px; font-size: 14px; }
.lp-btn--primary {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  box-shadow: 0 0 0 1px hsl(var(--primary)), 0 8px 24px -8px hsl(var(--primary) / .6);
}
.lp-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px hsl(var(--primary)), 0 12px 32px -8px hsl(var(--primary) / .7);
}
.lp-btn .lp-arrow { transition: transform .18s ease; }
.lp-btn:hover .lp-arrow { transform: translateX(3px); }
.lp-btn--ghost { color: hsl(var(--foreground)); background: transparent; border: 1px solid hsl(var(--border)); font-weight: 500; }
.lp-btn--ghost:hover { background: hsl(var(--card)); }
.lp-btn[aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

/* ─── shared type ─── */
.lp-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--lp-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 100px;
  background: hsl(var(--primary) / .12); border: 1px solid hsl(var(--primary) / .3); color: hsl(var(--primary));
}
.lp-tag .lp-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary)); box-shadow: 0 0 8px hsl(var(--primary)); animation: lp-ping 2s ease-in-out infinite; }
@keyframes lp-ping { 50% { opacity: .4; } }
.lp-eyebrow {
  display: inline-flex; font-family: var(--lp-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: hsl(var(--primary)); padding: 5px 12px; border-radius: 100px;
  background: hsl(var(--primary) / .1); border: 1px solid hsl(var(--primary) / .25); margin-bottom: 18px;
}
.lp-eyebrow--green { color: hsl(var(--brand-django)); background: hsl(var(--brand-django) / .1); border-color: hsl(var(--brand-django) / .25); }
.lp-headline { font-weight: 800; font-size: clamp(34px, 4.5vw, 54px); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 16px; max-width: 22ch; }
.lp-lede { font-size: 18px; line-height: 1.55; color: hsl(var(--muted-foreground)); max-width: 600px; margin: 0; }
.lp-grad {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / .75) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-green { color: hsl(var(--brand-django)); }
.lp-section { padding: 100px 0 60px; }
.lp-section-head { max-width: 760px; margin-bottom: 56px; }
.layout-public code:not(pre code) {
  font-family: var(--lp-mono); font-size: .85em; padding: 1px 6px; border-radius: 4px;
  background: hsl(var(--muted)); color: hsl(var(--primary)); border: 1px solid hsl(var(--border));
}

/* ─── hero ─── */
.lp-hero { position: relative; padding: 100px 0 80px; border-bottom: 1px solid hsl(var(--border)); }
.lp-hero::before {
  content: ""; position: absolute; inset: 0 -50vw; pointer-events: none;
  background: radial-gradient(ellipse 45% 55% at 50% 0%, hsl(var(--primary) / .18) 0%, transparent 70%);
}
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; position: relative; }
.lp-hero-title { font-weight: 800; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -.035em; margin: 18px 0 24px; }
.lp-hero-sub { font-size: 19px; line-height: 1.55; color: hsl(var(--muted-foreground)); max-width: 520px; margin: 0 0 36px; }
.lp-hero-sub strong { color: hsl(var(--foreground)); font-weight: 600; }
.lp-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lp-meta { margin-top: 32px; display: flex; gap: 28px; flex-wrap: wrap; font-family: var(--lp-mono); font-size: 12px; color: hsl(var(--muted-foreground)); }
.lp-meta .lp-check { color: hsl(var(--brand-django)); margin-right: 6px; }

/* ─── terminal ─── */
.lp-terminal {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--lp-radius);
  overflow: hidden; font-family: var(--lp-mono); font-size: 13px; line-height: 1.7; min-width: 0;
  box-shadow: 0 24px 48px -16px hsl(0 0% 0% / .45), 0 0 0 1px hsl(var(--primary) / .08);
}
.lp-terminal-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); }
.lp-term-dot { width: 11px; height: 11px; border-radius: 50%; background: hsl(var(--border)); }
.lp-term-dot--green { background: hsl(var(--brand-django)); }
.lp-term-title { margin-left: auto; font-size: 11px; color: hsl(var(--muted-foreground)); letter-spacing: .06em; }
.lp-terminal-body { padding: 20px 24px; color: hsl(var(--muted-foreground)); overflow-x: auto; margin: 0; white-space: pre; }
.lp-terminal-body .lp-line { display: block; min-height: 1.7em; }
.lp-line--user { color: hsl(var(--foreground)); }
.lp-line--user::before { content: "$ "; color: hsl(var(--primary)); }
.lp-line--ok { color: hsl(var(--brand-django)); }
.lp-hero .lp-line { opacity: 0; animation: lp-tline .5s cubic-bezier(.16, 1, .3, 1) forwards; }
.lp-hero .lp-line:nth-child(2) { animation-delay: .6s; } .lp-hero .lp-line:nth-child(3) { animation-delay: 1s; }
.lp-hero .lp-line:nth-child(4) { animation-delay: 1.4s; } .lp-hero .lp-line:nth-child(5) { animation-delay: 1.8s; }
.lp-hero .lp-line:nth-child(6) { animation-delay: 2.4s; } .lp-hero .lp-line:nth-child(7) { animation-delay: 3.2s; }
.lp-hero .lp-line:nth-child(8) { animation-delay: 3.8s; }
@keyframes lp-tline { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ─── stats ─── */
.lp-stats { padding: 56px 0; border-bottom: 1px solid hsl(var(--border)); }
.lp-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: hsl(var(--border)); border: 1px solid hsl(var(--border)); border-radius: var(--lp-radius); overflow: hidden;
}
.lp-stat { background: hsl(var(--card)); padding: 30px 28px; }
.lp-stat-num { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 6px; }
.lp-stat-num .lp-unit { font-family: var(--lp-mono); font-weight: 500; font-size: 16px; color: hsl(var(--primary)); }
.lp-stat-label { font-family: var(--lp-mono); font-size: 12px; color: hsl(var(--muted-foreground)); letter-spacing: .04em; margin-top: 12px; text-transform: uppercase; }

/* ─── cards ─── */
.lp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--lp-radius);
  padding: 32px 28px; position: relative; overflow: hidden; min-width: 0;
  transition: border-color .2s ease, transform .2s ease;
}
.lp-card:hover { border-color: hsl(var(--primary)); transform: translateY(-2px); }
.lp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: hsl(var(--primary)); opacity: 0; transition: opacity .2s ease; }
.lp-card:hover::before { opacity: 1; }
.lp-card h3 { font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 12px; }
.lp-card p { font-size: 15px; line-height: 1.6; color: hsl(var(--muted-foreground)); margin: 0 0 12px; }
.lp-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px;
  background: hsl(var(--primary) / .1); border: 1px solid hsl(var(--primary) / .25); color: hsl(var(--primary));
  font-family: var(--lp-mono); font-weight: 700; font-size: 14px; margin-bottom: 22px;
}
.lp-icon--green { background: hsl(var(--brand-django) / .1); border-color: hsl(var(--brand-django) / .3); color: hsl(var(--brand-django)); }
.lp-icon--plain { background: hsl(var(--foreground) / .06); border-color: hsl(var(--foreground) / .18); color: hsl(var(--foreground)); }
.lp-code-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; min-width: 0; }
.lp-code-pair > * { min-width: 0; }
.lp-more { display: inline-block; margin-top: 24px; font-weight: 600; color: hsl(var(--primary)); }

/* ─── runway (deploy steps) ─── */
.lp-runway { margin-top: 40px; padding: 90px 0; position: relative; isolation: isolate; }
.lp-runway::before { /* full-bleed band behind the column */
  content: ""; position: absolute; inset: 0 -50vw; z-index: -1;
  border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));
  background: radial-gradient(ellipse 50% 60% at 50% 0%, hsl(var(--brand-django) / .08) 0%, transparent 60%), hsl(var(--muted) / .5);
}
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; list-style: none; padding: 0; margin: 0 0 32px; }
.lp-step {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--lp-radius);
  padding: 28px 24px; counter-increment: step; transition: border-color .18s ease, transform .18s ease; min-width: 0;
}
.lp-step:hover { border-color: hsl(var(--brand-django)); transform: translateY(-2px); }
.lp-step-num { font-family: var(--lp-mono); font-size: 12px; font-weight: 600; color: hsl(var(--brand-django)); letter-spacing: .04em; margin-bottom: 14px; }
.lp-step-num::before { content: counter(step, decimal-leading-zero) " · "; }
.lp-step h3 { font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 10px; }
.lp-step p { font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); margin: 0; }

/* ─── day one / checklist ─── */
.lp-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-checklist li { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--lp-radius); padding: 18px 20px; }
.lp-checklist li::before { content: "✓"; color: hsl(var(--brand-django)); font-weight: 700; margin-right: 10px; }

/* ─── plan strip + pricing ─── */
.lp-plan-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.lp-plan-chip { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.lp-plan-chip:hover { border-color: hsl(var(--primary)); }
.lp-plan-chip span { color: hsl(var(--primary)); font-family: var(--lp-mono); margin-left: 6px; }
.lp-page-head { padding: 90px 0 40px; position: relative; }
.lp-page-head::before {
  content: ""; position: absolute; inset: 0 -50vw; pointer-events: none;
  background: radial-gradient(ellipse 40% 60% at 50% 0%, hsl(var(--primary) / .14) 0%, transparent 70%);
}
.lp-page-head > * { position: relative; }
.lp-page-title { font-weight: 800; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 18px; }
.lp-toggle { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); }
.lp-toggle .lp-btn { padding: 8px 18px; border-radius: 999px; font-size: 14px; }
.lp-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-plan { display: flex; flex-direction: column; }
.lp-plan h2 { font-size: 22px; margin: 0; letter-spacing: -.015em; }
.lp-plan .lp-tagline { font-size: 14px; margin: 4px 0 18px; }
.lp-plan .lp-price { color: hsl(var(--foreground)); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0; }
.lp-plan .lp-price span { font-size: 15px; font-weight: 500; color: hsl(var(--muted-foreground)); margin-left: 2px; }
.lp-plan .lp-note { font-family: var(--lp-mono); font-size: 12px; color: hsl(var(--brand-django)); margin: 8px 0 0; min-height: 1.2em; }
.lp-plan ul { list-style: none; padding: 0; margin: 22px 0 24px; flex: 1; }
.lp-plan li { font-size: 14px; padding: 7px 0; border-top: 1px solid hsl(var(--border) / .7); color: hsl(var(--muted-foreground)); }
.lp-plan li::before { content: "✓"; color: hsl(var(--brand-django)); margin-right: 8px; }
.lp-plan .lp-btn { justify-content: center; }
.lp-plan .lp-soon { font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0; text-align: center; padding: 12px; border: 1px dashed hsl(var(--border)); border-radius: var(--lp-radius-sm); }
.lp-plan .lp-small { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 10px 0 0; text-align: center; }
.lp-faq { max-width: 760px; padding: 90px 0 20px; }
.lp-faq details { border-bottom: 1px solid hsl(var(--border)); padding: 18px 0; }
.lp-faq summary { font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.lp-faq summary::after { content: "+"; float: right; color: hsl(var(--primary)); font-family: var(--lp-mono); }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { color: hsl(var(--muted-foreground)); margin: 12px 0 0; }

/* ─── prose pages (quickstart, security, legal) ─── */
.lp-prose { max-width: 760px; }
.lp-prose h2 { font-size: 26px; letter-spacing: -.02em; margin: 56px 0 12px; }
.lp-prose h3 { font-size: 17px; margin: 28px 0 8px; }
.lp-prose p, .lp-prose li { color: hsl(var(--muted-foreground)); line-height: 1.65; }
.lp-qs-step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 32px 0; border-top: 1px solid hsl(var(--border)); }
.lp-qs-num {
  width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--lp-mono); font-weight: 700; color: hsl(var(--brand-django));
  background: hsl(var(--brand-django) / .1); border: 1px solid hsl(var(--brand-django) / .3);
}
.lp-qs-step h2 { margin: 6px 0 8px; }
.lp-qs-step > div { min-width: 0; }
.lp-output { margin-top: 14px; }
.lp-output .lp-terminal-body { padding: 14px 18px; font-size: 12.5px; }
.lp-trust { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-trust li { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--lp-radius); padding: 18px 20px; margin: 0; color: hsl(var(--foreground)); }
.lp-trust li::before { content: "✓"; color: hsl(var(--brand-django)); font-weight: 700; margin-right: 10px; }
.lp-callout { margin-top: 40px; padding: 24px 28px; border-radius: var(--lp-radius); border: 1px solid hsl(var(--primary) / .3); background: hsl(var(--primary) / .06); }
.lp-callout h2 { margin-top: 0; }
.lp-draft {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-family: var(--lp-mono); font-size: 12px; font-weight: 600;
  border: 1px solid hsl(var(--warning) / .5); background: hsl(var(--warning) / .1); color: hsl(var(--warning));
}

/* ─── closing CTA ─── */
.lp-cta { padding: 110px 0; text-align: center; position: relative; }
.lp-cta::before { content: ""; position: absolute; inset: 0 -50vw; pointer-events: none; background: radial-gradient(ellipse 40% 50% at 50% 50%, hsl(var(--primary) / .1) 0%, transparent 70%); }
.lp-cta > * { position: relative; }
.lp-cta-title { font-weight: 800; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; margin: 0 auto 14px; }
.lp-cta p { font-size: 17px; color: hsl(var(--muted-foreground)); max-width: 540px; margin: 0 auto 36px; }
.lp-cta .lp-cta-row { justify-content: center; }

/* ─── footer ─── */
.lp-footer { margin-top: 80px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); padding: 64px 0 36px; color: hsl(var(--muted-foreground)); font-size: 14px; }
.lp-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; align-items: start; }
.lp-footer-grid p { max-width: 280px; line-height: 1.6; }
.lp-footer h2 { font-family: var(--lp-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--foreground)); margin: 0 0 14px; font-weight: 600; }
.lp-footer nav { display: flex; flex-direction: column; gap: 8px; }
.lp-footer a:hover { color: hsl(var(--foreground)); }
.lp-footer-meta { margin-top: 44px; padding-top: 22px; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; font-family: var(--lp-mono); }

/* reveal on load */
.lp-reveal { opacity: 0; transform: translateY(14px); animation: lp-reveal .7s cubic-bezier(.16, 1, .3, 1) forwards; }
.lp-reveal--2 { animation-delay: .14s; } .lp-reveal--3 { animation-delay: .24s; } .lp-reveal--4 { animation-delay: .34s; }
@keyframes lp-reveal { to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  /* minmax(0, 1fr): a <pre> must scroll inside its box, not widen the column */
  .lp-hero-grid, .lp-code-pair { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lp-steps, .lp-plan-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-card-grid, .lp-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lp-hero { padding: 64px 0 56px; }
  .lp-hero-title { font-size: clamp(36px, 11vw, 44px); }
  .lp-nav .lp-brand-divider, .lp-nav .lp-brand-tag { display: none; }
  .lp-nav-signin { padding: 8px 4px; }
  .lp-nav-actions { gap: 8px; }
  .lp-nav .lp-btn--sm { padding: 8px 12px; }
  .lp-stats-grid, .lp-steps, .lp-plan-grid, .lp-trust { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lp-section { padding: 72px 0 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal, .lp-hero .lp-line { animation: none; opacity: 1; transform: none; }
  .lp-tag .lp-dot { animation: none; }
}