/* Public landing page - rendered by web/js/landing.js into #view-landing.

   Every colour is a custom property defined on :root in app.css, so the page
   follows the light and dark themes without a second palette. Buttons, pills,
   badges and callouts are the shared components from app.css; the rules here
   only resize them for a page that is read at arm's length rather than
   operated. Nothing in this file may be duplicated into app.css. */

.landing {
  display: block;
  background: var(--bg);
  color: var(--ink);
}

/* The application shell is height-constrained; the landing page is a document
   and scrolls with the window. */
.landing p,
.landing li,
.landing h1,
.landing h2,
.landing h3 { overflow-wrap: break-word; }

.lp-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.landing h1,
.landing h2,
.landing h3 { font-weight: 620; letter-spacing: -.02em; }

.landing a { color: var(--accent); }

.landing a:focus-visible,
.landing button:focus-visible,
.landing .lp-figure-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sections are given tabindex="-1" when a nav link scrolls to them, purely so
   the keyboard follows the viewport. That is not a focus the reader needs to
   see outlined around half the page. */
.landing section[tabindex="-1"]:focus,
.landing div[tabindex="-1"]:focus { outline: none; }

/* The sticky header would otherwise cover whatever a nav link scrolled to.
   Every scroll target in this page carries an id, including #lp-not-built. */
.landing [id] { scroll-margin-top: 78px; }

.lp-btn-lg { font-size: 14px; padding: 10px 18px; }

/* ---------- header ---------- */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.lp-header .lp-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 60px;
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -.015em;
}
.lp-brand { min-width: 0; }
.lp-brand .brand-mark { flex: none; }
.lp-header .lp-brand .brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-nav {
  display: flex;
  gap: 2px;
  margin-right: auto;
}
.lp-nav a {
  padding: 6px 11px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 550;
}
.lp-nav a:hover { background: var(--surface-2); color: var(--ink); }

.lp-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* ---------- hero ---------- */

.lp-hero {
  padding: 72px 0 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.lp-hero-copy { max-width: 40em; }
.lp-hero .badge { display: inline-block; }
.lp-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.032em;
}
.lp-lead {
  margin-top: 18px;
  max-width: 34em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.62;
  color: var(--ink-2);
}
.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.lp-cta-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40em;
}

.lp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  margin: 46px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.lp-fact {
  background: var(--surface-2);
  padding: 15px 16px;
}
.lp-fact-value {
  font-size: 24px;
  font-weight: 640;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.lp-fact-label {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- generic section ---------- */

.lp-section {
  padding: 62px 0;
  border-bottom: 1px solid var(--line);
}
.lp-section-alt { background: var(--surface); }

.lp-section-head { margin-bottom: 30px; max-width: 46em; }
.lp-section-head h2 {
  margin: 9px 0 0;
  font-size: clamp(21px, 2.7vw, 28px);
  line-height: 1.2;
}
.lp-section-intro {
  margin-top: 11px;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ---------- example diagram ---------- */

.lp-figure {
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lp-figure-scroll {
  overflow-x: auto;
  padding: 20px;
  background: var(--surface);
}
.lp-figure-scroll .lp-dg {
  display: block;
  width: 100%;
  /* Below this the 10px labels stop being readable, so the figure scrolls
     inside its own box rather than shrinking. The page never scrolls. */
  min-width: 540px;
  height: auto;
}
.lp-key {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 26px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}
.lp-key-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 260px;
  min-width: 0;
}
.lp-key-line {
  width: 22px;
  height: 0;
  flex: none;
  margin-top: 8px;
  border-top: 2px solid var(--muted);
}
.lp-key-line.is-inferred { border-top-style: dashed; }
.lp-key-dot {
  width: 9px;
  height: 9px;
  flex: none;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--aws);
}
.lp-figcaption {
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* diagram internals - mirrors the real renderer's vocabulary in app.css */
.lp-dg-vpc { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.lp-dg-subnet { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.lp-dg-glabel {
  font: 600 10px var(--sans);
  fill: var(--muted);
  letter-spacing: .08em;
}
.lp-dg-box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.lp-dg-outside .lp-dg-box { fill: none; stroke: var(--muted); stroke-dasharray: 4 3; }
.lp-dg-name { font: 600 12px var(--sans); fill: var(--ink); }
.lp-dg-type { font: 400 10px var(--sans); fill: var(--muted); }
.lp-dg-edge { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.lp-dg-edge.is-inferred { stroke-dasharray: 5 4; }
.lp-dg-arrowhead { fill: var(--muted); }
.lp-dg-public { fill: var(--aws); }

/* ---------- how it works ---------- */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-step {
  border-top: 2px solid var(--accent);
  padding-top: 14px;
}
.lp-step-n {
  display: block;
  font: 650 11px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--accent-ink);
}
.lp-step h3 { margin: 9px 0 0; font-size: 15px; }
.lp-step p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink-2);
}
.lp-step p.lp-step-note {
  color: var(--ink-2);
  font-size: 12px;
}

/* ---------- features ---------- */

.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.lp-feature {
  background: var(--surface);
  padding: 20px;
}
.lp-feature h3 { font-size: 14px; }
.lp-feature p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink-2);
}

.lp-soon {
  margin-top: 26px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 22px;
}
.lp-soon-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-soon-head h3 { font-size: 15px; }
.lp-soon-intro {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.lp-soon-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px 28px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.lp-soon-list strong { display: block; font-size: 13px; font-weight: 620; }
.lp-soon-list span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---------- pricing ---------- */

.lp-pricing-callout { margin-bottom: 22px; }

.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.lp-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.lp-plan.is-available { border-color: var(--accent); }
.lp-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-plan h3 { font-size: 16px; }
.lp-plan-price {
  font-size: 20px;
  font-weight: 640;
  letter-spacing: -.02em;
}
.lp-plan-price-note {
  margin-top: -6px;
  font-size: 12px;
  color: var(--ink-2);
}
.lp-plan-lines {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.lp-plan-lines li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.lp-plan-lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 0;
  border-top: 1px solid var(--line-strong);
}
.lp-plan-cta { margin-top: auto; width: 100%; }

/* ---------- footer ---------- */

.lp-main .lp-section:last-child { border-bottom: 0; }

.lp-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 44px 0 50px;
}
.lp-footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 26px;
}
.lp-footer-about { max-width: 32em; }
.lp-footer-blurb {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.lp-footer-col h3 {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.lp-footer-col ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-footer-col a,
.lp-linkbtn {
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.lp-footer-col a:hover,
.lp-linkbtn:hover { color: var(--ink); text-decoration: underline; }

.lp-footer-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-footer-cols { grid-template-columns: 1fr 1fr 1fr; }
  .lp-footer-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .lp-nav { display: none; }
  .lp-header-actions { margin-left: auto; }
  .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .lp-hero { padding: 48px 0 40px; }
  .lp-section { padding: 46px 0; }
  .lp-plans { grid-template-columns: minmax(0, 1fr); }
  .lp-footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .lp-wrap { padding: 0 16px; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-header-signin { display: none; }
  .lp-cta .btn { flex: 1 1 100%; }
  .lp-brand .brand-name { font-size: 14px; }
  .lp-figure-scroll { padding: 14px; }
  .lp-key, .lp-figcaption { padding: 12px 14px; }
}

@media (max-width: 420px) {
  .lp-footer-cols { grid-template-columns: minmax(0, 1fr); }
  .lp-facts { grid-template-columns: minmax(0, 1fr); }
  .lp-header .lp-wrap { gap: 12px; }
  .lp-header .lp-brand .brand-name { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing * { scroll-behavior: auto; }
}

/* ---------- illustration: service icons, category accents, ports ---------- */
/* Mirrors the real diagram's vocabulary so the landing page cannot advertise a
   picture the product does not draw. Colours come from diagram.css tokens, so
   the illustration follows the theme with everything else. */

.lp-dg-accent { stroke: none; }
.lp-dg-accent.cat-edge { fill: var(--cat-edge); }
.lp-dg-accent.cat-network { fill: var(--cat-network); }
.lp-dg-accent.cat-loadbalancer { fill: var(--cat-loadbalancer); }
.lp-dg-accent.cat-compute { fill: var(--cat-compute); }
.lp-dg-accent.cat-database { fill: var(--cat-database); }
.lp-dg-accent.cat-storage { fill: var(--cat-storage); }
.lp-dg-accent.cat-security { fill: var(--cat-security); }
.lp-dg-accent.cat-other { fill: var(--cat-other); }

/* The plate keeps the vendor icons legible on a dark background without
   recolouring them, which their licence forbids. */
.lp-dg-icon { overflow: visible; }

.lp-dg-port {
  font: 600 9px var(--mono, ui-monospace, Menlo, Consolas, monospace);
  fill: var(--edge-label-ink, var(--muted));
  paint-order: stroke;
  stroke: var(--edge-label-fill, var(--surface));
  stroke-width: 3px;
  stroke-linejoin: round;
}