/* ============================================================
   Zerker Gateway — clean technical landing
   Palette: warm off-white / black / sage secondary / ink dark
   ============================================================ */

:root {
  --bg: var(--zk-bg);
  --surface: var(--zk-surface);
  --ink: var(--zk-ink);
  --ink-2: var(--zk-ink-raised);
  --ink-3: var(--zk-ink-soft);
  --text: var(--zk-text);
  --secondary: var(--zk-text-secondary);
  --secondary-dark: var(--zk-text-secondary-dark);
  --hairline: var(--zk-hairline);
  --hairline-dark: rgba(255, 255, 255, 0.14);
  --accent: var(--zk-accent);
  --accent-soft: var(--zk-accent-soft);
  --code-bg: var(--zk-ink-raised);
  --code-bg-light: #f1f1ee;
  --radius-btn: var(--zk-radius-control);
  --radius-card: var(--zk-radius-card);
  --ease-expo: var(--zk-ease-expo);
  --font-sans: var(--zk-font-sans);
  --font-mono: var(--zk-font-mono);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }
a,
button { touch-action: manipulation; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.skip {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 13px;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-150%);
}
.skip:focus { transform: none; }
.clipboard-fallback {
  position: fixed;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--code-bg-light);
  border-radius: 6px;
  padding: 0.12em 0.42em;
  letter-spacing: -0.01em;
}
.section-dark code {
  background: rgba(255, 255, 255, 0.09);
  color: #eceeeb;
}

.container { max-width: var(--zk-content); margin: 0 auto; padding: 0 var(--zk-gutter); }
.container-narrow { max-width: var(--zk-reading); }

/* ============ Reveal motion ============ */
.reveal { opacity: 1; transform: none; }
.js.motion-ready .reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.72s var(--ease-expo), transform 0.72s var(--ease-expo);
}
.js.motion-ready .reveal.settled { transition: none; }
.js.motion-ready .reveal.d1 { transition-delay: 0.08s; }
.js.motion-ready .reveal.d2 { transition-delay: 0.16s; }
.js.motion-ready .reveal.d3 { transition-delay: 0.24s; }
.js.motion-ready .reveal.d4 { transition-delay: 0.32s; }
.js.motion-ready .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js.motion-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Nav ============ */
.nav-wrap {
  position: fixed;
  top: 14px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  padding-right: max(16px, env(safe-area-inset-right));
  padding-left: max(16px, env(safe-area-inset-left));
}
.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 52px;
  padding: 0 10px 0 18px;
  border-radius: var(--zk-radius-nav);
  border: 1px solid var(--hairline);
  box-shadow: var(--zk-shadow-nav);
}
.glass {
  background: rgba(248, 248, 246, 0.97);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; }
.wordmark b { font-size: 14px; letter-spacing: 0.16em; font-weight: 720; }
.mark-glyph {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: 0 0 24px;
  color: var(--ink);
  background: currentColor;
  -webkit-mask: url('/assets/brand/zerker-mark.svg?v=3') center / contain no-repeat;
  mask: url('/assets/brand/zerker-mark.svg?v=3') center / contain no-repeat;
}
.mark-glyph i { display: none; }
.brand-divider { width: 1px; height: 20px; background: var(--hairline); }
.brand-product { color: var(--secondary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; font-weight: 500; }

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--secondary);
  padding: 7px 11px;
  border-radius: 8px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(22, 22, 22, 0.05); }
.nav-links a.active { color: var(--ink); background: rgba(22, 22, 22, 0.07); }

.nav-right { display: flex; gap: 8px; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-expo);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--ink-2); color: #fff; }
.btn-solid:hover { background: #000; }
.btn-ghost { border-color: var(--hairline); color: var(--text); background: transparent; }
.btn-ghost:hover { background: rgba(22, 22, 22, 0.05); }
.btn-lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #eceeeb; }
.btn-outline-light { border-color: rgba(255,255,255,0.28); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); }

/* ============ Progress ============ */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; z-index: 200;
}
.progress-bar {
  height: 100%; width: 100%;
  background: var(--ink-2);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ============ Hero ============ */
.hero {
  padding: 196px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--hairline) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px) 0 0 / 88px 100%;
  mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 0%, transparent 78%);
  opacity: 0.55;
  pointer-events: none;
}
.hero-inner { max-width: 900px; margin: 0 auto; padding: 0 28px; position: relative; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 22px;
}
.kicker-dark { color: var(--secondary-dark); }

.hero-title {
  font-size: clamp(56px, 9.2vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 30px; text-wrap: balance; }
.accent { color: var(--accent); }

.hero-sub {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.5;
  color: var(--secondary);
  max-width: 640px;
  margin-bottom: 42px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 72px; }
.hero-text-link { padding: 12px 4px; font-size: 13px; font-weight: 600; color: var(--secondary); }
.hero-text-link:hover { color: var(--ink); }
.hero-status { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 72px; }
.hero-status span { position: relative; padding-left: 13px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--secondary); }
.hero-status span::before { content: ""; position: absolute; left: 0; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero-status span:nth-child(2)::before, .hero-status span:nth-child(3)::before { background: #a8a8ae; }

.install-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--code-bg);
  color: #e8eae8;
  border-radius: 12px;
  padding: 6px 8px 6px 16px;
  height: 48px;
  max-width: 100%;
}
.install-chip .prompt { font-family: var(--font-mono); color: var(--secondary-dark); font-size: 14px; }
.install-chip code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.1);
  color: #e8eae8;
  border: none;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.copy-btn:hover { background: rgba(255,255,255,0.18); }
.copy-btn.copied { background: var(--accent); color: #fff; }

/* ============ Sections ============ */
.section { padding: 128px 0; }
.section[id] { scroll-margin-top: 96px; }
.section + .section { border-top: 1px solid var(--hairline); }
.section-dark {
  background: var(--ink-2);
  color: #eceeeb;
  border-top: none;
}
.section-dark .h2 { color: #fff; }

.section-head { max-width: 680px; margin-bottom: 72px; }
.h2 {
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: 20px;
}
.lede { font-size: 18.5px; color: var(--secondary); line-height: 1.55; max-width: 620px; }
.lede-dark { color: var(--secondary-dark); }

/* ============ Products ============ */
.products-section { background: #f0f0ec; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: hidden; }
.product-card { min-height: 380px; padding: 28px; background: var(--surface); display: flex; flex-direction: column; position: relative; }
.product-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.product-index { position: absolute; right: 28px; top: 22px; font-size: 74px; line-height: 1; font-weight: 120; letter-spacing: -0.08em; color: #ededeb; pointer-events: none; }
.product-role { font-family: var(--font-mono); font-size: 8px; line-height: 1.3; letter-spacing: 0.12em; color: var(--secondary); text-align: left; text-transform: uppercase; }
.product-symbol { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--hairline); border-radius: 14px; color: var(--ink); background: var(--surface); }
.product-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.product-symbol-gateway::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: url('/assets/brand/zerker-mark.svg?v=3') center / contain no-repeat; mask: url('/assets/brand/zerker-mark.svg?v=3') center / contain no-repeat; }
.product-symbol-console { color: var(--accent); }
.product-symbol-portals { color: #16866a; }
.product-symbol-rooms { color: #8a6b2f; }
.product-card h3 { max-width: 250px; margin: 100px 0 14px; font-size: 28px; line-height: 1.05; letter-spacing: -0.035em; }
.product-card p { color: var(--secondary); font-size: 15px; line-height: 1.55; }
.product-card a { margin-top: auto; padding-top: 28px; font-size: 13px; font-weight: 600; }
.product-card a:hover { color: var(--accent); }
.product-card.console::after, .product-card.portal::after, .product-card.rooms::after { content: ""; position: absolute; right: -45px; bottom: -55px; width: 160px; height: 160px; border-radius: 50%; filter: blur(38px); opacity: 0.1; pointer-events: none; }
.product-card.console::after { background: var(--accent); }
.product-card.portal::after { background: #16866a; }
.product-card.rooms::after { background: #b18b42; }

/* ============ Capability list ============ */
.capability-list { list-style: none; }
.capability {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 32px;
  align-items: start;
  padding: 44px 0;
  border-top: 1px solid var(--hairline);
  transition: background 0.3s ease;
}
.capability:last-child { border-bottom: 1px solid var(--hairline); }
.cap-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--secondary);
  padding-top: 8px;
}
.cap-body h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: var(--ink);
}
.cap-body p { color: var(--secondary); max-width: 560px; }
.cap-tag {
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--text);
  margin-top: 4px;
}

/* ============ Internal and external paths ============ */
.audience-flow { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: stretch; gap: 14px; margin-bottom: 64px; }
.audience-flow-wide { grid-template-columns: 1fr auto 1.05fr auto 1.05fr auto 1fr; gap: 9px; }
.audience-flow-wide > span { padding-inline: 16px; }
.audience-flow > span { min-height: 104px; padding: 22px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; justify-content: center; }
.audience-flow > span b, .audience-flow > span em { display: block; }
.audience-flow > span b { margin-bottom: 7px; font-size: 16px; letter-spacing: -0.02em; }
.audience-flow > span em { color: var(--secondary); font-family: var(--font-mono); font-size: 9px; font-style: normal; letter-spacing: 0.08em; }
.audience-flow > i { align-self: center; color: var(--secondary); font-style: normal; }
.audience-flow .audience-flow-focus { border-color: rgba(102, 86, 251, 0.28); background: var(--accent-soft); }
.audience-flow .audience-flow-portal { border-color: rgba(22, 134, 106, 0.24); background: rgba(22, 134, 106, 0.07); }
.portals-section { background: #f0f0ec; }
.experience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--hairline); }
.section-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.experience-card { min-height: 270px; padding: 34px; background: var(--surface); }
.experience-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 50px; border: 1px solid var(--hairline); border-radius: 13px; color: var(--accent); }
.experience-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.experience-card h3 { margin-bottom: 10px; font-size: 23px; letter-spacing: -0.03em; }
.experience-card p { max-width: 420px; color: var(--secondary); font-size: 15px; line-height: 1.55; }
.console-sides { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--hairline-dark); border-radius: var(--radius-card); background: var(--hairline-dark); }
.console-side { min-height: 340px; padding: 38px; background: var(--ink-2); }
.console-side > span { color: #9e96ff; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; }
.console-side h3 { margin: 82px 0 24px; color: #fff; font-size: 28px; letter-spacing: -0.035em; }
.console-side ul { list-style: none; }
.console-side li { padding: 11px 0; border-top: 1px solid var(--hairline-dark); color: var(--secondary-dark); font-size: 15px; }
.console-side li:last-child { border-bottom: 1px solid var(--hairline-dark); }
.console-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.console-contact { display: inline-flex; color: #fff; font-size: 14px; font-weight: 650; }
.console-contact:hover { color: #b7b1ff; }

/* ============ Terminal ============ */
.terminal {
  background: var(--ink-3);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
}
.terminal-light {
  background: var(--ink-2);
}
.terminal-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.terminal-bar span {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
}
.terminal-bar em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11.5px;
  color: var(--secondary-dark);
  margin-left: 10px;
  flex: 1;
}
.copy-btn-dark { padding: 5px 11px; font-size: 11.5px; }

.terminal pre {
  padding: 22px 24px;
  overflow-x: auto;
}
.terminal pre code {
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: #d7dbd7;
  white-space: pre;
  border-radius: 0;
}
.c-cmd { color: #fff; font-weight: 600; }
.c-str { color: #8fd0a4; }
.c-path { color: #7db8f0; }
.c-env { color: #e5c07b; }
.c-dim { color: #6b716c; }
.c-status { color: #f0a07d; font-weight: 600; }

/* ============ Steps ============ */
.steps { display: flex; flex-direction: column; gap: 64px; max-width: 820px; }
.step-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 22px; }
.step-num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 15px;
  color: #fff;
}
.step-head h3 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.025em;
  color: #fff; margin-bottom: 6px;
}
.step-head p { color: var(--secondary-dark); font-size: 15.5px; max-width: 540px; }
.step-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--secondary-dark);
}

/* ============ Payments ============ */
.payment-boundary { min-height: 390px; padding: 28px; border-radius: 22px; background: var(--ink-2); color: #f4f4f2; box-shadow: 0 24px 58px rgba(10,10,14,0.18); display: flex; flex-direction: column; }
.payment-boundary-head { display: flex; justify-content: space-between; gap: 20px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.13em; color: var(--secondary-dark); }
.payment-boundary-head span { color: #9e96ff; }
.payment-boundary-head em { font-style: normal; }
.payment-boundary > strong { margin: 58px 0 34px; font-size: clamp(38px,4vw,52px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 650; }
.payment-boundary dl { margin: 0; }
.payment-boundary dl div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.payment-boundary dt, .payment-boundary dd { font-family: var(--font-mono); font-size: 9px; }
.payment-boundary dt { color: #707078; }
.payment-boundary dd { margin: 0; }
.payment-boundary > p { margin-top: auto; padding-top: 20px; color: var(--secondary-dark); font-size: 12px; }
.payment-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.checklist { list-style: none; display: flex; flex-direction: column; }
.checklist li {
  padding: 20px 0 20px 34px;
  border-top: 1px solid var(--hairline);
  position: relative;
  color: var(--secondary);
  font-size: 15.5px;
}
.checklist li:last-child { border-bottom: 1px solid var(--hairline); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 26px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 4px; top: 31px;
  width: 5px; height: 3px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.checklist strong { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 4px; letter-spacing: -0.02em; }
.rail-map { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 56px; border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; background: var(--surface); }
.rail-map span { min-height: 105px; padding: 20px; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; justify-content: space-between; }
.rail-map span:last-child { border-right: 0; }
.rail-map b, .rail-map em { display: block; }
.rail-map b { font-size: 13px; line-height: 1.35; }
.rail-map em { font-family: var(--font-mono); font-size: 8px; font-style: normal; letter-spacing: 0.12em; color: var(--secondary); }
.rail-map span:first-child em { color: var(--accent); }

/* ============ Open source and hosted ============ */
.deployment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--hairline-dark); border-radius: var(--radius-card); background: var(--hairline-dark); }
.deployment-card { min-height: 590px; padding: 38px; background: var(--ink-2); display: flex; flex-direction: column; }
.deployment-card-hosted { background: linear-gradient(145deg, #1b1a27, var(--ink-2) 58%); }
.deployment-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--secondary-dark); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; }
.deployment-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--hairline-dark); border-radius: 13px; color: #aaa2ff; }
.deployment-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.deployment-icon-gateway::before { content: ""; width: 23px; height: 23px; background: #fff; -webkit-mask: url('/assets/brand/zerker-mark.svg?v=3') center / contain no-repeat; mask: url('/assets/brand/zerker-mark.svg?v=3') center / contain no-repeat; }
.deployment-card h3 { margin: 70px 0 16px; max-width: 410px; color: #fff; font-size: 30px; line-height: 1.05; letter-spacing: -0.04em; }
.deployment-card > p { color: var(--secondary-dark); font-size: 15.5px; line-height: 1.55; }
.deployment-card ul { margin: 34px 0 40px; list-style: none; }
.deployment-card li { padding: 12px 0; border-top: 1px solid var(--hairline-dark); color: #c2c6c2; font-size: 14px; line-height: 1.45; }
.deployment-card li:last-child { border-bottom: 1px solid var(--hairline-dark); }
.deployment-actions { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.deployment-actions > a:not(.btn) { color: #d8d9d7; font-size: 13px; font-weight: 600; }
.deployment-actions > a:not(.btn):hover { color: #fff; }
.deployment-note { margin: 24px 0 0; color: var(--secondary-dark); font-size: 13px; }

/* ============ Editions ============ */
.editions-statement {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.editions-statement em { font-style: normal; }
.statement-oss { color: var(--ink); }
.statement-oss em { color: var(--accent); }
.statement-com { color: var(--secondary); }
.statement-sep { flex: 1; min-width: 40px; height: 1px; background: var(--hairline); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.cap-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cap-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  padding: 18px 28px;
  border-bottom: 1px solid var(--hairline);
}
.cap-table td {
  padding: 16px 28px;
  border-bottom: 1px solid var(--hairline);
  font-size: 15.5px;
}
.cap-table tr:last-child td { border-bottom: none; }
.cap-table tbody tr { transition: background 0.2s ease; }
.cap-table tbody tr:hover { background: rgba(22,22,22,0.025); }
.cap-table code { font-size: 0.85em; }
.tier {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.tier-oss { background: var(--accent-soft); color: var(--accent); }
.tier-com { background: rgba(22,22,22,0.06); color: var(--text); }
.table-note { margin-top: 18px; font-size: 14px; color: var(--secondary); }

/* ============ Wider stack status ============ */
/* ============ SDKs ============ */
.sdk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sdk-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 40px 36px;
  transition: transform 0.4s var(--ease-expo), box-shadow 0.4s ease;
}
.sdk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(22,22,22,0.08);
}
.sdk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.sdk-lang { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); }
.sdk-path { border: 1px solid var(--hairline); background: var(--bg); }
.sdk-card p { color: var(--secondary); font-size: 15.5px; }

/* ============ Final CTA ============ */
.section-final { padding: 140px 0; text-align: left; }
.final-title {
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.0;
  color: #fff;
  margin-bottom: 48px;
}
.final-note {
  margin-top: 20px;
  font-size: 14.5px;
  color: var(--secondary-dark);
  max-width: 560px;
}
.final-actions { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ Footer ============ */
.footer { padding: 72px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--hairline);
}
.footer-brand p { margin-top: 16px; color: var(--secondary); font-size: 14.5px; max-width: 300px; }
.footer-col h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  color: var(--text);
  padding: 5px 0;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--accent); }
.footer-base {
  padding-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--secondary);
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* ============ Responsive ============ */
/* ============ Flat product showcase ============ */
.product-grid,
.experience-grid,
.console-sides { border-inline: 0; border-radius: 0; }
.product-card.console::after,
.product-card.portal::after,
.product-card.rooms::after { display: none; }
.product-symbol { width: 36px; height: 36px; place-items: start; border: 0; border-radius: 0; background: transparent; }
.product-symbol svg,
.product-symbol-gateway::before { width: 22px; height: 22px; }
.audience-flow > span { border-radius: 4px; background: transparent; }
.experience-card { background: transparent; }
.experience-icon { place-items: start; width: 32px; height: 32px; border: 0; border-radius: 0; }
.console-side { background: transparent; }
.terminal { border-radius: 10px; box-shadow: none; }
.terminal-bar > span { display: none; }
.terminal-bar em { margin-left: 0; }

/* ============ Organization policy ============ */
.reason-section { background: #f0f0ec; }
.reason-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; border-block: 1px solid var(--hairline); }
.reason-path > section { min-width: 0; min-height: 280px; padding: 30px; }
.reason-path > i { align-self: center; padding: 0 12px; color: var(--secondary); font-style: normal; }
.reason-path section > span,
.reason-split article > span { color: var(--accent); font: 600 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.reason-path ul { display: grid; gap: 11px; margin: 42px 0 0; padding: 0; list-style: none; }
.reason-path li { padding-top: 10px; border-top: 1px solid var(--hairline); color: var(--secondary); font-size: 13px; }
.reason-path__bundle { background: rgba(102,86,251,.07); }
.reason-path__bundle strong,
.reason-path__decision strong { display: block; margin: 68px 0 12px; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.04em; }
.reason-path__bundle code { color: var(--secondary); font-size: 9px; }
.reason-path .reason-path__decision { color: #fff; background: #171717; }
.reason-path__decision > span { color: #9f94ff !important; }
.reason-path__decision p { max-width: 230px; color: #aeb2ae; font-size: 13px; line-height: 1.5; }
.reason-split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border-block: 1px solid var(--hairline); }
.reason-split article { min-height: 300px; padding: 32px; }
.reason-split article + article { border-left: 1px solid var(--hairline); }
.reason-split h3 { margin: 54px 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -.045em; }
.reason-split p { max-width: 470px; color: var(--secondary); font-size: 15px; line-height: 1.6; }

@media (max-width: 960px) {
  .reason-path { grid-template-columns: 1fr; }
  .reason-path > section { min-height: 240px; }
  .reason-path > i { justify-self: center; padding: 9px; transform: rotate(90deg); }

  .nav-links { display: none; }
  .payment-grid { grid-template-columns: 1fr; gap: 48px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card { min-height: 330px; }
  .product-card h3 { margin-top: 64px; }
  .audience-flow { grid-template-columns: 1fr; }
  .audience-flow > span { min-height: 88px; }
  .audience-flow > i { transform: rotate(90deg); }
  .rail-map { grid-template-columns: 1fr 1fr; }
  .rail-map span { border-bottom: 1px solid var(--hairline); }
  .rail-map span:nth-child(2n) { border-right: 0; }
  .rail-map span:last-child { border-bottom: 0; }

}
@media (max-width: 720px) {
  .section { padding: 88px 0; }
  .reason-split { grid-template-columns: 1fr; }
  .reason-split article + article { border-top: 1px solid var(--hairline); border-left: 0; }
  .product-grid { grid-template-columns: 1fr; }
  .experience-grid, .console-sides { grid-template-columns: 1fr; }
  .experience-card { min-height: 240px; }
  .console-side { min-height: 310px; }
  .rail-map { grid-template-columns: 1fr; }
  .rail-map span { min-height: 86px; border-right: 0; }
  .rail-map span:nth-child(2n) { border-right: 0; }
  .hero { padding: 150px 0 88px; }
  .capability { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .cap-tag { justify-self: start; }
  .deployment-grid { grid-template-columns: 1fr; }
  .deployment-card { min-height: 540px; }
  .sdk-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .install-chip code { max-width: 200px; }
  .nav { width: 100%; justify-content: space-between; }
  .nav-right .btn-ghost { display: none; }
}
@media (max-width: 460px) {
  .brand-product, .brand-divider { display: none; }
  .wordmark b { font-size: 12px; }
}

/* ============ Gateway control path ============ */
.hero-control-path { overflow: hidden; border: 1px solid rgba(255,255,255,0.11); border-radius: 12px; color: #f1f2ef; background: #151515; }
.hero-control-path-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.hero-control-path-head span { color: #8f938f; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; }
.hero-control-path-head strong { color: #fff; font-size: 17px; letter-spacing: -0.025em; }
.hero-control-path ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hero-control-path li { display: flex; min-height: 150px; flex-direction: column; gap: 8px; padding: 28px 24px; border-right: 1px solid rgba(255,255,255,0.1); }
.hero-control-path li:last-child { border-right: 0; }
.hero-control-path li span { color: #8f82ff; font-family: var(--font-mono); font-size: 8px; }
.hero-control-path li b { color: #fff; font-size: 20px; letter-spacing: -0.03em; }
.hero-control-path li small { color: #8f938f; font-family: var(--font-mono); font-size: 8px; line-height: 1.5; }
.hero-control-path > p { margin: 0; padding: 14px 24px 16px; border-top: 1px solid rgba(255,255,255,0.1); color: #767a76; font-family: var(--font-mono); font-size: 8px; line-height: 1.5; }
@media (max-width: 720px) {
  .hero-control-path-head { align-items: flex-start; flex-direction: column; gap: 7px; padding: 20px; }
  .hero-control-path ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-control-path li { min-height: 126px; padding: 22px 20px; }
  .hero-control-path li:nth-child(2) { border-right: 0; }
  .hero-control-path li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .hero-control-path > p { padding-inline: 20px; }
}

.flow-note { max-width: 62ch; margin: 14px 0 0; color: var(--secondary); font-size: 12.5px; line-height: 1.5; }

/* ---------- Live request visualization (ported from the 2026-08-15 team preview) ---------- */
.flowviz { margin-top: 44px; }
.flowviz {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card, 20px);
  box-shadow: 0 24px 60px rgba(22, 22, 22, 0.07);
  padding: 24px 28px 20px;
  contain: layout paint;
  isolation: isolate;
}
.flowviz-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 8px;
}
.flowviz-title { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.flowviz-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: livepulse 2.4s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.flow-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-sans, inherit);
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.flow-toggle:hover { color: var(--ink); border-color: var(--secondary); }

.flow-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 4px 2px;
  min-height: 128px;
}
/* the rail lives inside the stages container — it never overlaps the endpoint boxes */
.flow-stages::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10px; right: -10px; top: 46px;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(95, 101, 97, 0.38) 0 6px, transparent 6px 12px);
}
.flow-end {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 92px;
  min-width: 148px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--bg, #f8f8f6);
}
.flow-node-title { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.flow-node-sub { font-family: var(--font-mono); font-size: 11px; color: var(--secondary); }

.flow-stages {
  list-style: none;
  flex: 1;
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 2;
}
.flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 118px;
  text-align: center;
}
.stage-num {
  width: 40px; height: 40px;
  margin: 26px 0 10px; /* centers circle on the rail at y=52 */
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--secondary);
  transition: border-color 0.35s ease, color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.stage-text { display: flex; flex-direction: column; gap: 3px; }
.stage-name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.02em; color: var(--ink); }
.stage-code { font-family: var(--font-mono); font-size: 10.5px; color: var(--secondary); }
.flow-stage.active .stage-num {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft, rgba(102,86,251,0.12));
  box-shadow: 0 0 0 6px var(--accent-soft, rgba(102,86,251,0.12));
}
.flow-stage.active .stage-name { color: var(--accent); }
.flow-stage.passed .stage-num {
  background: var(--accent-soft, rgba(102,86,251,0.12));
  border-color: var(--accent);
  color: var(--accent);
}
/* passed stages show a calm check instead of the number */
.flow-stage.passed .stage-num { font-size: 0; }
.flow-stage.passed .stage-num::after {
  content: "";
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
.flow-stage.blocked .stage-num {
  border-color: #c05a2e;
  color: #c05a2e;
  box-shadow: 0 0 0 6px rgba(192, 90, 46, 0.12);
}
.flow-stage.blocked .stage-name { color: #c05a2e; }

.flow-packet {
  position: absolute;
  z-index: 3;
  left: 0; top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(103, 88, 255, 0.16);
  transform: translate3d(0,0,0);
  transition:
    transform 0.65s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)),
    background 0.3s ease,
    box-shadow 0.3s ease;
  will-change: transform;
}
.flow-packet.is-ok { background: #2fa46a; box-shadow: 0 0 0 4px rgba(47, 164, 106, 0.16); }
.flow-packet.is-402 { background: #c05a2e; box-shadow: 0 0 0 4px rgba(192, 90, 46, 0.16); }
.flowviz.is-offscreen .live-dot { animation-play-state: paused; }

.flow-status { margin: 4px 2px 16px; min-height: 28px; }
.flow-status code {
  background: var(--code-bg-light, rgba(22,22,22,0.05));
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text, var(--ink));
}

.flow-out {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.flow-feed {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--secondary);
  min-height: 58px;
}
.flow-feed li { animation: feedin 0.5s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)); }
@keyframes feedin {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.flow-feed b { color: var(--ink); font-weight: 600; }
.flow-feed li.err b { color: #c05a2e; }

.flow-metrics { display: flex; gap: 8px; }
.metric {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 7px 12px;
  display: flex;
  flex-direction: column;
  min-width: 72px;
}
.metric em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}
.metric b {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .flow-packet, .stage-num { transition: none; }
  .flow-feed li { animation: none; }
  .live-dot { animation: none; }
}

@media (max-width: 960px) {
  /* Pipeline turns vertical: caller on top, agent at the bottom */
  .flow-track {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    min-height: 0;
    padding: 4px 2px;
  }
  .flow-stages::before {
    left: 19px; right: auto;
    top: -10px; bottom: -10px;
    width: 1.5px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(95, 101, 97, 0.38) 0 6px, transparent 6px 12px);
  }
  .flow-end { width: 100%; height: auto; min-height: 76px; }
  .flow-stages { flex-direction: column; gap: 18px; }
  .flow-stage {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
  }
  .stage-num { margin: 0; flex-shrink: 0; }
  .flow-out { flex-direction: column; }
  .flow-metrics { flex-wrap: wrap; }
}

/* Live view, second pass: named callers, live stage values, chips */
.flow-who { display: inline-flex; gap: 0; margin-left: auto; border: 1px solid var(--hairline); border-radius: 999px; padding: 2px; background: var(--bg, #f8f8f6); }
.flow-who button { border: 0; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--secondary); background: transparent; cursor: pointer; transition: background .18s ease, color .18s ease; }
.flow-who button:hover { color: var(--ink); }
.flow-who button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.flow-who button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.flow-who + .flow-toggle { margin-left: 0; }
.flow-node-kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); }
.flow-end { flex: 0 0 150px; min-width: 0; height: 104px; padding: 0 14px; gap: 3px; transition: border-color .3s ease, background .3s ease; }
.flow-end .flow-node-title { font-size: 14px; line-height: 1.15; }
.flow-end .flow-node-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 122px; font-size: 10.5px; }
.flow-end[data-who="partner"], .flow-end[data-who="customer"] { border-color: rgba(102,86,251,.45); }
.flow-end.is-denied { border-color: #c05a2e; }
.flow-stage { width: 112px; }
.stage-code { min-height: 28px; line-height: 1.35; font-size: 10px; padding: 0 5px; transition: color .25s ease; }
.flow-stage.active .stage-code, .flow-stage.passed .stage-code { color: var(--ink); }
.flow-stage.blocked .stage-code { color: #c05a2e; }
.flow-status code { display: inline-block; max-width: 100%; }
.flow-feed li { display: grid; grid-template-columns: 76px 1fr auto; column-gap: 12px; align-items: baseline; }
.flow-feed li b { font-weight: 700; }
.flow-feed li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-feed li code { font-size: 11px; color: var(--secondary); }
.flow-feed li.err code { color: #c05a2e; }
@media (max-width: 960px) {
  .flow-who { margin-left: 0; }
  .flow-end { flex: none; width: 100%; height: auto; min-height: 84px; padding: 0 18px; }
  .flow-end .flow-node-sub { max-width: none; white-space: normal; }
  .stage-code { min-height: 0; font-size: 11px; }
  .flow-stage { width: 100%; }
  .flow-stage .stage-text { flex: 1; min-width: 0; }
  .flowviz-head { row-gap: 8px; }
  .flow-feed li { grid-template-columns: 1fr; row-gap: 1px; }
  .flow-feed li span { white-space: normal; }
}

/* Live view, third pass: per-caller pipelines */
.flowviz-sub { margin: -2px 0 14px; color: var(--secondary); font-size: 13px; line-height: 1.5; min-height: 20px; }
.flow-end { flex: 0 0 144px; }
.flow-stages { justify-content: space-between; gap: 4px; }
.flow-stage { flex: 1 1 0; width: auto; min-width: 0; }
.stage-code { padding: 0 2px; }
.flow-stage.enter { animation: stagein .42s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) both; }
@keyframes stagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.flow-stage.paid .stage-num { border-color: #2fa46a; color: #2fa46a; background: rgba(47,164,106,.1); }
.flow-stage.paid .stage-name { color: #2fa46a; }
@media (max-width: 960px) {
  .flow-stage { flex: none; width: 100%; }
  .flow-end { flex: none; height: auto; min-height: 84px; }
  .flowviz-sub { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .flow-stage.enter { animation: none; } }



/* ---------- Centered hero (site simplification) ---------- */
.hero-inner--center { text-align: center; }
.hero-inner--center .hero-title, .hero-inner--center .hero-sub { margin-inline: auto; }
.hero-inner--center .hero-sub { max-width: 640px; }
.hero-inner--center .hero-actions { justify-content: center; }
.hero-inner--center .flowviz { text-align: left; }
\n