:root {
  --bg: #ffffff;
  --bg-alt: #f7f6f2;
  --panel: #ffffff;
  --panel-2: #f2f0e9;
  --ink-deep: #0b1220;
  --text: #14171c;
  --muted: #495363;
  --soft: #78818f;
  --accent: #1d5fd1;
  --accent-2: #2e8aff;
  --accent-strong: #123f9e;
  --success: #157a3d;
  --cta-green: #157a3d;
  --cta-green-strong: #0e5c2c;
  --cta-green-light: #157a3d;
  --warning: #a15b00;
  --danger: #c62828;
  --border: #e4e1d8;
  --border-2: #d3cfc2;
  --radius: 8px;
  --container: 1200px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(29,95,209,0.18); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }

.container { width: min(100% - clamp(32px, 7vw, 120px), var(--container)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700;
}
.skip-link:focus { left: 16px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition: box-shadow .2s;
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(20,23,28,.05); }
.header-inner {
  width: min(100% - clamp(32px, 7vw, 120px), var(--container));
  margin-inline: auto; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand-link { display: flex; align-items: center; gap: 9px; }
.brand-mark { height: 32px; width: 32px; display: block; }
.brand-word { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 18.5px; letter-spacing: -.02em; color: var(--text); line-height: 1; white-space: nowrap; }
.brand-tld { color: var(--accent); font-weight: 800; }
.brand-word-sm { font-size: 16px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.desktop-nav a, .nav-signin, .footer-nav a, .footer-bottom a {
  color: var(--muted); font-size: 14.5px; transition: color .2s;
}
.desktop-nav a:hover, .nav-signin:hover, .footer-nav a:hover, .footer-bottom a:hover { color: var(--text); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 11px; padding: 13px 24px;
  color: #fff; font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { filter: brightness(1.06); }
.button-primary, .button-light { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--cta-green); color: #fff; }
.button-primary::before, .button-light::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 13 13 3M6 3h7v7' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.button-primary:hover, .button-light:hover { background: var(--cta-green-strong); }
.button-primary:active, .button-light:active { filter: brightness(.94); }
.button-small { padding: 9px 16px; border-radius: 9px; font-size: 14px; }
.button-secondary { background: var(--bg-alt); border-color: var(--border-2); color: var(--text); }
.button-secondary:hover { background: var(--panel-2); }
.button-ghost { background: transparent; border-color: var(--border-2); color: var(--text); }
.button-ghost:hover { background: var(--bg-alt); }
.button-ghost-light { background: transparent; border-color: oklch(100% 0 0 / 0.35); color: #fff; }
.button-ghost-light:hover { background: oklch(100% 0 0 / 0.1); }

.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible,
select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.button-primary:focus-visible, .button-light:focus-visible, .pmodal-continue:focus-visible { outline-color: var(--cta-green-light); }

.menu-button {
  display: none; width: 40px; height: 40px; border: 1px solid var(--border-2);
  border-radius: 10px; background: transparent; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.menu-button span { width: 16px; height: 1.6px; background: var(--text); transition: transform .2s, opacity .2s; }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-nav { flex-direction: column; gap: 2px; padding: 8px clamp(20px,6vw,32px) 22px; border-top: 1px solid var(--border); background: var(--bg); }
.mobile-nav:not([hidden]) { display: flex; }
.mobile-nav a:not(.button) { padding: 13px 4px; color: var(--muted); border-bottom: 1px solid var(--border); }
.mobile-nav .button { margin-top: 14px; }
/* ---------- Section primitives ---------- */
.section { padding: clamp(64px, 8vw, 116px) 0; }
.section-alt { background: #e6eff9; }
.kicker { color: var(--accent); font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.kicker.centered { text-align: center; }
.section h2 { margin-top: 14px; max-width: 20ch; font-size: clamp(1.9rem, 3vw + .7rem, 3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
.section-lede { margin-top: 18px; max-width: 62ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.head-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); gap: clamp(20px,5vw,56px); align-items: end; }
.head-row h2 { max-width: none; }
.page-title { margin-top: 14px; max-width: 18ch; font-size: clamp(2.25rem, 4vw + .8rem, 3.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px,7vw,96px) 0 clamp(36px,5vw,64px); overflow: hidden; border-bottom: 1px solid var(--border); background: #f3f8ff; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(28px,5vw,64px); align-items: center; }
.hero-copy, .hero-visual, .deploy-card { min-width: 0; max-width: 100%; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-2);
  color: var(--soft); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hero-copy h1 { margin-top: 22px; font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.03; color: var(--text); }
.hero-copy h1 span { color: var(--accent-2); }
.lede { margin-top: 20px; max-width: 54ch; color: var(--muted); font-size: clamp(1.02rem, .6vw + .9rem, 1.2rem); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 0; margin-top: 30px; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.hero-points li { padding: 12px 16px 0 0; margin-right: 16px; color: var(--soft); font-family: var(--mono); font-size: 12px; }
.hero-points li:not(:last-child) { border-right: 1px solid var(--border); }

/* Hero deploy card: a plain-language example of a real deploy record, not a staged demo */
.hero-visual { position: relative; z-index: 1; }
.deploy-card { border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); background: var(--panel); }
.deploy-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.deploy-card__head-label { display: flex; align-items: center; gap: 9px; color: var(--soft); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.deploy-card__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.deploy-card__example { color: var(--soft); font-family: var(--mono); font-size: 11px; }
.deploy-card__rows { margin: 0; padding: 6px 18px; }
.deploy-card__rows > div { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(4px); animation: deployRowIn .5s ease forwards; }
.deploy-card__rows > div:nth-child(1) { animation-delay: .05s; }
.deploy-card__rows > div:nth-child(2) { animation-delay: .15s; }
.deploy-card__rows > div:nth-child(3) { animation-delay: .25s; }
.deploy-card__rows > div:nth-child(4) { animation-delay: .35s; }
.deploy-card__rows > div:nth-child(5) { animation-delay: .45s; }
.deploy-card__rows > div:nth-child(6) { animation-delay: .55s; }
.deploy-card__rows > div:last-child { border-bottom: 0; }
.deploy-card__rows dt { color: var(--soft); font-family: var(--mono); font-size: 12px; }
.deploy-card__rows dd { margin: 0; color: var(--text); font-size: 13.5px; font-weight: 600; }
.deploy-card__rows dd.is-ok { color: var(--success); }
.deploy-card__foot { padding: 14px 18px; color: var(--soft); font-size: 12.5px; border-top: 1px solid var(--border); background: var(--bg-alt); }
@media (prefers-reduced-motion: reduce) { .deploy-card__rows > div { animation: none; opacity: 1; transform: none; } }

/* Built for */
.builtfor { position: relative; z-index: 1; margin-top: clamp(36px,5vw,64px); }
.builtfor-label { color: var(--soft); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-align: center; }
.builtfor-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 18px; padding: 0; list-style: none; }
.builtfor-row li { padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600; transition: border-color .18s ease, color .18s ease; }
.builtfor-row li:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- Features: editorial divided list, not a card grid ---------- */
.feature-grid { margin-top: 40px; counter-reset: feat; border-top: 1px solid var(--border); }
.feature-card { counter-increment: feat; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.feature-card::before { content: counter(feat, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: #e4edfc; color: var(--accent); font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.feature-quiet h3 { font-size: 19px; }
.feature-card h3 { grid-column: 2; margin: 0; font-size: 16.5px; font-weight: 700; }
.feature-card p { grid-column: 2; margin-top: 6px; max-width: 64ch; color: var(--muted); font-size: 15px; line-height: 1.55; }
.tag { font-family: var(--mono); font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--warning); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-2); }

/* ---------- Journey ---------- */
.journey { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; counter-reset: j; }
.journey li { position: relative; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); transition: border-color .2s; }
.journey li:hover { border-color: var(--accent); }
.journey li span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #e4edfc; font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--accent); }
.journey li h3 { margin-top: 10px; font-size: 16px; font-weight: 700; }
.journey li p { margin-top: 6px; color: var(--muted); font-size: 14px; }

/* ---------- Workflow: editorial numbered list, not a card grid ---------- */
.workflow-map { margin-top: 40px; border-top: 1px solid var(--border); }
.workflow-step { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.workflow-step span { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #e4edfc; color: var(--accent); font-family: var(--mono); font-size: 11.5px; font-weight: 800; align-self: start; }
.workflow-step strong { grid-column: 2; display: block; color: var(--text); font-size: 16px; }
.workflow-step p { grid-column: 2; margin-top: 5px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- Documentation cards (docs/roadmap pages) ---------- */
.doc-card span, .status-card span { color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.doc-card strong, .status-card strong { display: block; margin-top: 10px; color: var(--text); font-size: 16px; }
.doc-card p, .status-card p { margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.doc-grid, .status-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 40px; }
.doc-card, .status-card { display: block; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); transition: border-color .2s, background .2s; }
a.doc-card:hover { border-color: var(--accent); background: var(--panel-2); }
.status-card.is-done { border-color: oklch(72% 0.16 155 / .28); }
.status-card.is-active { border-color: oklch(68% 0.16 255 / .36); }
.status-card.is-planned { border-style: dashed; }
.text-panel { margin-top: 34px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.text-panel p, .text-panel li { color: var(--muted); line-height: 1.7; }
.text-panel p + p { margin-top: 14px; }
.text-panel ul { margin: 16px 0 0; padding-left: 20px; }

/* ---------- Templates ---------- */
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 44px; }
.template-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); transition: border-color .2s, background .2s; }
.template-card:hover { border-color: var(--accent); background: var(--panel-2); }
.template-top { display: flex; align-items: center; justify-content: space-between; }
.template-glyph { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; font-size: 18px; font-weight: 700; background: var(--bg-alt); }
.tg-static { color: var(--accent); } .tg-react { color: #0f7ea3; } .tg-vite { color: var(--warning); }
.tg-next { color: var(--text); } .tg-astro { color: #c14e12; } .tg-more { color: var(--soft); }
.template-top em { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--muted); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; }
.template-card h3 { margin-top: 18px; font-size: 16.5px; font-weight: 700; }
.template-card p { margin-top: 7px; color: var(--muted); font-size: 14px; }
.template-more { background: repeating-linear-gradient(135deg, var(--bg-alt) 0 10px, var(--panel) 10px 20px); border-style: dashed; }

/* ---------- Runtimes ---------- */
.runtime-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 44px; }
.runtime-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.runtime-card.is-live { border-color: oklch(68% 0.16 255 / .28); }
.runtime-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.runtime-head h3 { font-size: 17px; font-weight: 700; }
.runtime-card > p { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.runtime-card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.runtime-card li { position: relative; padding-left: 20px; color: var(--muted); font-size: 13.5px; }
.runtime-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pill { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.pill-ok { color: var(--success); background: oklch(72% 0.16 155 / 0.14); border: 1px solid oklch(72% 0.16 155 / .3); }
.pill-soon { color: var(--warning); background: oklch(80% 0.13 85 / 0.12); border: 1px solid oklch(80% 0.13 85 / .28); }

/* ---------- Providers ---------- */
.provider-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-top: 42px; }
.provider-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); transition: border-color .2s; }
.provider-card.is-live { border-color: oklch(72% 0.16 155 / .3); }
.provider-card:hover { border-color: var(--accent); }
.provider-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.provider-mark { width: 24px; height: 24px; border-radius: 6px; background: var(--muted); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.pm-github { background: var(--text); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 00-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 015 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0012 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 00-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 015 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0012 2z'/%3E%3C/svg%3E"); }
.pm-gitlab { background: oklch(70% 0.16 45); } .pm-bitbucket { background: oklch(70% 0.13 250); }
.pm-forgejo { background: #22b8d6; } .pm-gitea { background: oklch(72% 0.16 155); }
.provider-mark:not(.pm-github) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.2 6.8H21l-5.5 4 2.1 6.8L12 15.6 6.4 19.6l2.1-6.8L3 8.8h6.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.2 6.8H21l-5.5 4 2.1 6.8L12 15.6 6.4 19.6l2.1-6.8L3 8.8h6.8z'/%3E%3C/svg%3E"); }
/* ---------- Deploy pipeline ---------- */
.deploy-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.deploy-tabs button { padding: 10px 18px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.deploy-tabs button.is-active { border-color: var(--accent); background: oklch(68% 0.16 255 / 0.1); color: var(--accent); }
.publish-log { max-width: 560px; margin-top: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.publish-log__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.publish-log__head span { color: var(--soft); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.publish-log__head code { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.publish-log__lines { list-style: none; margin: 0; padding: 6px 18px; }
.publish-log__lines li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13.5px; }
.publish-log__lines li:last-child { border-bottom: 0; }
.publish-log__lines li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* ---------- Proof ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 42px; }
.proof-grid article { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.proof-grid strong { display: block; font-size: 16.5px; }
.proof-grid p { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

.founder-note { position: relative; margin-top: 28px; padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.founder-note::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: var(--accent); }
.founder-quote { max-width: 68ch; color: var(--text); font-size: 16px; line-height: 1.65; }
.founder-attribution { margin-top: 14px; color: var(--soft); font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }

/* ---------- Pricing ---------- */
.pricing-single { display: grid; gap: 46px; }
.pricing-intro { max-width: 780px; }
.pricing-intro .section-lede { max-width: 64ch; }
.pricing-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin: 30px 0 0; padding: 0; list-style: none; }
.pricing-trust li { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); }
.pricing-trust li > span { flex: 0 0 auto; color: var(--cta-green); font-weight: 800; line-height: 1.3; padding-top: 1px; }
.pricing-trust strong, .pricing-trust small { display: block; }
.pricing-trust strong { color: var(--text); font-size: 14px; }
.pricing-trust small { margin-top: 2px; font-size: 13px; line-height: 1.45; }
.pricing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.price-card { display: grid; grid-template-rows: auto auto auto 1fr auto auto; min-width: 0; padding: 30px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--panel); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.price-card:hover { border-color: #9bc9ad; box-shadow: 0 12px 28px rgba(20, 42, 31, .08); transform: translateY(-2px); }
.price-card.is-featured { border-color: #639d79; background: #fbfefc; box-shadow: inset 0 3px 0 var(--cta-green); }
.price-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.price-card-header h3 { margin: 0; color: var(--text); font-size: 22px; letter-spacing: -.035em; }
.price-card-header p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.price-card-header > span { flex: 0 0 auto; padding-top: 2px; color: var(--soft); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.price { display: grid; gap: 5px; margin-top: 34px; }
.price span { color: var(--muted); font-size: 13px; font-weight: 650; }
.price strong { color: var(--text); font-size: clamp(48px, 4.3vw, 62px); font-weight: 800; letter-spacing: -.07em; line-height: .95; }
.price strong small { margin-left: 7px; color: var(--muted); font-size: 15px; font-weight: 650; letter-spacing: 0; }
.price-note { max-width: 34ch; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.price-features { display: grid; align-content: start; gap: 10px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; }
.price-features li { position: relative; min-width: 0; padding-left: 19px; color: var(--text); font-size: 13px; line-height: 1.48; }
.price-features li::before { content: "✓"; position: absolute; left: 0; color: var(--cta-green); font-weight: 850; }
.price-card .button { width: 100%; margin-top: 38px; }
.price-reassurance { margin: 13px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }

/* ---------- Configure ---------- */
/* Homepage CTA band (replaces the old on-page configuration form) */
.start-cta { text-align: center; max-width: 760px; margin-inline: auto; }
.start-cta .section-lede { margin-inline: auto; }
.start-cta-actions { justify-content: center; margin-top: 26px; }

/* Purchase modal */
.pmodal { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 30px; }
.pmodal[hidden] { display: none; }
.pmodal-backdrop { position: absolute; inset: 0; background: rgba(20,23,28,.55); opacity: 0; transition: opacity .2s ease; }
.pmodal-panel { --pmodal-soft: var(--soft); position: relative; z-index: 1; width: min(760px, 100%); max-height: min(92vh, 920px); overflow: auto; overscroll-behavior: contain; padding: clamp(28px, 5vw, 48px); border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--panel); box-shadow: 0 20px 60px rgba(20,23,28,.18); opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.pmodal.is-open .pmodal-backdrop, .pmodal.is-open .pmodal-panel { opacity: 1; }
.pmodal.is-open .pmodal-panel { transform: translateY(0); }
.pmodal-close { position: absolute; top: 18px; right: 18px; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.pmodal-close:hover { border-color: var(--border-2); background: var(--panel-2); }
.pmodal-close:focus-visible, .pmodal-field input:focus-visible, .pmodal-repository select:focus-visible, .pmodal-repository input:focus-visible, .pmodal-included summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pmodal-panel h2 { margin-top: 12px; padding-right: 50px; font-size: clamp(30px, 5vw, 42px); letter-spacing: -.04em; line-height: 1.04; }
.pmodal-sub { max-width: 58ch; margin-top: 14px; color: var(--muted); font-size: 16px; line-height: 1.62; }
.pmodal-plans { margin-top: 28px; }
.pmodal-plan { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px 20px; padding: 22px; border: 1px solid var(--accent); border-radius: var(--radius); background: #eef4ff; color: var(--text); text-align: left; }
.pmodal-plan > div { display: grid; gap: 5px; }
.pmodal-plan strong { font-size: 18px; letter-spacing: -.02em; }
.pmodal-plan > div > small { color: var(--pmodal-soft); font-size: 13px; }
.pmodal-plan > span { align-self: start; color: var(--text); font-size: 28px; font-weight: 850; letter-spacing: -.04em; white-space: nowrap; }
.pmodal-plan > span small { margin-left: 4px; color: var(--pmodal-soft); font-size: 12px; font-weight: 650; letter-spacing: 0; }
.pmodal-plan-pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pmodal-plan-pills li { padding: 5px 9px; border: 1px solid var(--border-2); border-radius: 999px; background: #fff; color: var(--text); font-size: 11.5px; font-weight: 650; line-height: 1.2; }
.pmodal-source { margin-top: 30px; }
.pmodal-source-head { display: grid; gap: 5px; margin-bottom: 15px; }
.pmodal-source-head strong { color: var(--text); font-size: 19px; letter-spacing: -.02em; }
.pmodal-source-head span { color: var(--pmodal-soft); font-size: 13px; line-height: 1.5; }
.pmodal-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.pmodal-source-card { position: relative; display: flex; min-width: 0; min-height: 358px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.pmodal-source-card:hover { border-color: var(--border-2); background: var(--bg-alt); }
.pmodal-source-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pmodal-source-card::after { content: "\2713"; position: absolute; top: 18px; right: 18px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 999px; background: var(--accent); color: white; font-size: 13px; font-weight: 850; opacity: 0; transform: scale(.55) rotate(-28deg); transition: opacity .18s ease, transform .18s ease; }
.pmodal-source-card.is-selected { border-color: var(--accent); background: #eef4ff; }
.pmodal-source-card.is-selected::after { opacity: 1; transform: scale(1) rotate(0); animation: pmodal-card-check .28s ease-out; }
.pmodal-source-logo, .pmodal-source-icon { display: inline-grid; width: 48px; height: 48px; margin-bottom: 7px; border-radius: 12px; }
.pmodal-source-logo { object-fit: contain; }
.pmodal-source-icon { place-items: center; background: var(--bg-alt); color: var(--text); }
.pmodal-source-managed { display: block; padding: 7px; background: var(--bg-alt); object-fit: contain; }
.pmodal-source-icon svg { width: 28px; height: 28px; }
.pmodal-source-github { background: #f6f8fa; color: #0d1117; }
.pmodal-source-card strong { padding-right: 32px; font-size: 17px; letter-spacing: -.015em; line-height: 1.2; }
.pmodal-source-card > small { color: var(--pmodal-soft); font-size: 13px; line-height: 1.45; }
.pmodal-source-card ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; line-height: 1.36; }
.pmodal-source-card li { position: relative; padding-left: 18px; }
.pmodal-source-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 850; }
.pmodal-source-footer { margin-top: auto; padding-top: 14px; color: var(--pmodal-soft); font-size: 12px; font-weight: 750; }
.pmodal-source-badge { position: absolute; top: 18px; right: 52px; padding: 5px 8px; border-radius: 999px; background: #e6f6ec; color: var(--success); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.pmodal-source-info { margin-top: 14px; }
.pmodal-source-info-panel { display: none; padding: 15px 17px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.pmodal-source-info-panel strong { display: block; color: var(--text); font-size: 13px; }
.pmodal-source-info-panel p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.pmodal-source:has([data-pm-source-option="managed"].is-selected) .pmodal-source-info-managed, .pmodal-source:has([data-pm-source-option="github"].is-selected) .pmodal-source-info-github { display: block; }
@supports not selector(:has(*)) { .pmodal-source-info-managed { display: block; } }
.pmodal-github { position: relative; margin-top: 18px; padding: 22px; overflow: hidden; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-alt); }
.pmodal-github::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.pmodal-github-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pmodal-github-step { display: block; margin-bottom: 7px; color: var(--accent); font-size: 10.5px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.pmodal-github h3 { margin: 0; color: var(--text); font-size: 19px; letter-spacing: -.025em; }
.pmodal-github-head p { max-width: 52ch; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.pmodal-github-install { display: inline-grid; min-width: 204px; min-height: 56px; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-content: center; padding: 9px 14px; border: 1px solid var(--cta-green-strong); border-radius: var(--radius); background: var(--cta-green); color: #fff; font-size: 12.5px; font-weight: 850; line-height: 1.1; text-decoration: none; transition: background .18s ease; }
.pmodal-github-install > span { grid-row: 1 / span 2; font-size: 18px; }
.pmodal-github-install small { grid-column: 2; margin-top: 4px; color: rgba(255,255,255,.82); font-size: 10.5px; font-weight: 650; }
.pmodal-github-install[hidden] { display: none; }
.pmodal-github-install:hover { background: var(--cta-green-strong); }
.pmodal-github-install:focus-visible { outline: 3px solid var(--cta-green); outline-offset: 3px; }
.pmodal-repository { display: grid; gap: 13px; margin-top: 19px; padding: 18px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-alt); }
.pmodal-repository[hidden] { display: none; }
.pmodal-repository-intro { display: grid; gap: 3px; padding-bottom: 2px; }
.pmodal-repository-intro strong { color: var(--text); font-size: 14px; }
.pmodal-repository-intro span { color: var(--pmodal-soft); font-size: 12px; line-height: 1.45; }
.pmodal-repository label { display: grid; gap: 7px; color: var(--text); font-size: 12px; font-weight: 800; }
.pmodal-repository select,.pmodal-repository input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: var(--radius); background: #fff; color: var(--text); font-weight: 700; }
.pmodal-repository select:focus,.pmodal-repository input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,95,209,.14); }
.pmodal-repository-confirm { width: 100%; min-height: 52px; margin-top: 3px; }
.pmodal-field { display: grid; gap: 8px; margin-top: 28px; color: var(--text); font-size: 14px; font-weight: 750; }
.pmodal-field > small { color: var(--pmodal-soft); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.pmodal-field em { color: var(--pmodal-soft); font-style: normal; font-weight: 550; }
.pmodal-field input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid var(--border-2); border-radius: var(--radius); background: #fff; color: var(--text); transition: border-color .18s ease, box-shadow .18s ease; }
.pmodal-field input::placeholder { color: var(--pmodal-soft); }
.pmodal-field input:hover { border-color: var(--border-2); }
.pmodal-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,95,209,.14); }
.pmodal-domain-help { margin: 10px 1px 0; color: var(--pmodal-soft); font-size: 12.5px; line-height: 1.55; }
.pmodal-domain-chip { display: inline-flex; margin-left: 5px; padding: 3px 8px; border: 1px solid var(--border-2); border-radius: 999px; background: #eef4ff; color: var(--accent); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.pmodal-included { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.pmodal-included summary { padding: 13px 15px; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 750; }
.pmodal-included ul { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 0; padding: 0 15px 15px; list-style: none; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.pmodal-included li { position: relative; padding-left: 15px; }
.pmodal-included li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 850; }
.pmodal-status { margin-top: 20px; padding: 13px 15px; border: 1px solid var(--border-2); border-radius: var(--radius); background: #fdf4e3; color: var(--warning); font-size: 13px; line-height: 1.5; }
.pmodal-status.is-error { border-color: #f3c6c6; background: #fdecec; color: var(--danger); }
.pmodal-status.is-ok { border-color: #bfe3cc; background: #eaf7ef; color: var(--success); }
.pmodal-continue { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 20px; border: 0; border-radius: var(--radius); background: var(--cta-green); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.01em; transition: background .18s ease, opacity .18s ease; }
.pmodal-continue::before { content: "↗"; font-size: 20px; line-height: 1; transform: translateY(1px); }
.pmodal-continue:hover:not(:disabled) { background: var(--cta-green-strong); }
.pmodal-continue:disabled { cursor: wait; opacity: .6; }
.pmodal:has([data-pm-source-option="github"].is-selected) .pmodal-continue:not(.is-loading) [data-pm-continue-label] { font-size: 0; }
.pmodal:has([data-pm-source-option="github"].is-selected) .pmodal-continue:not(.is-loading) [data-pm-continue-label]::after { content: "\1F419  Connect GitHub & Continue"; font-size: 15px; }
.pmodal-spinner { display: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pmodal-spin .65s linear infinite; }
.pmodal-continue.is-loading .pmodal-spinner { display: block; }
.pmodal-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 14px; margin: 15px 0 0; text-align: center; color: var(--pmodal-soft); font-size: 12px; line-height: 1.45; }
.pmodal-note span + span::before { content: "•"; margin-right: 14px; color: var(--border-2); }
@keyframes pmodal-spin { to { transform: rotate(360deg); } }
@keyframes pmodal-card-check { from { transform: scale(.35) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@media (max-width: 640px) { .pmodal { align-items: end; padding: 12px; } .pmodal-panel { width: 100%; max-height: min(94dvh, 900px); padding: 28px 20px 22px; border-radius: 14px; } .pmodal-panel h2 { font-size: clamp(29px, 9vw, 36px); } .pmodal-plan { padding: 18px; } .pmodal-source-grid { grid-template-columns: 1fr; } .pmodal-source-card { min-height: 0; padding: 19px; } .pmodal-source-card ul { grid-template-columns: 1fr 1fr; } .pmodal-included ul { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 390px) { .pmodal { padding: 7px; } .pmodal-panel { padding-inline: 17px; } .pmodal-plan { grid-template-columns: 1fr; } .pmodal-plan > span { justify-self: start; } .pmodal-source-card ul { grid-template-columns: 1fr; } .pmodal-note { display: grid; gap: 4px; } .pmodal-note span + span::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .pmodal-backdrop, .pmodal-panel, .pmodal-close, .pmodal-field input, .pmodal-continue, .pmodal-source-card, .pmodal-source-card::after { transition: none; } .pmodal-source-card.is-selected::after { animation: none; } .pmodal-spinner { animation-duration: 1.5s; } }

/* Reference-aligned AI Hosting purchase modal layer. Existing hooks remain unchanged. */
.pmodal-panel { --pmodal-soft: var(--soft); --pmodal-line: var(--border); width: min(760px, 100%); max-height: min(94vh, 980px); padding: 42px; border-color: var(--border-2); border-radius: var(--radius); background: var(--panel); box-shadow: 0 24px 70px rgba(20,23,28,.16); }
.pmodal-close { top: 20px; right: 20px; width: 42px; height: 42px; border-color: var(--border); background: var(--bg-alt); font-size: 28px; }
.pmodal-hero { display: grid; grid-template-columns: minmax(0, 1fr) 194px; gap: 28px; align-items: start; padding-right: 26px; }
.pmodal-hero-copy .kicker { display: inline-flex; width: fit-content; margin: 0; padding: 7px 12px; border-radius: 999px; background: #eef4ff; color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.pmodal-panel h2 { margin: 17px 0 0; padding-right: 0; font-size: clamp(34px, 4.25vw, 48px); line-height: 1.02; letter-spacing: -.05em; }
.pmodal-sub { max-width: 48ch; margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.pmodal-feature-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 0; overflow: hidden; border: 1px solid var(--pmodal-line); border-radius: var(--radius); background: var(--bg-alt); }
.pmodal-feature-strip > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 6px; align-items: center; min-height: 66px; padding: 9px 10px; }
.pmodal-feature-strip > div + div { border-left: 1px solid var(--border); }
.pmodal-feature-strip span { grid-row: 1 / span 2; color: var(--accent); font-size: 19px; }
.pmodal-feature-strip strong { font-size: 11px; line-height: 1.2; white-space: nowrap; }
.pmodal-feature-strip small { color: var(--soft); font-size: 10px; line-height: 1.25; white-space: nowrap; }
.pmodal-plans { margin: 14px 0 0; }
.pmodal-plan { display: grid; grid-template-columns: 1fr; gap: 8px; min-height: 235px; padding: 20px; border-color: var(--accent); border-radius: var(--radius); background: #eef4ff; }
.pmodal-plan > strong { font-size: 16px; }
.pmodal-plan > span { font-size: 43px; line-height: .95; }
.pmodal-plan > span small { font-size: 15px; }
.pmodal-plan-pills { display: grid; gap: 8px; margin-top: 9px; }
.pmodal-plan-pills li { position: relative; padding: 0 0 0 21px; border: 0; background: transparent; color: var(--text); font-size: 11px; }
.pmodal-plan-pills li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-size: 14px; font-weight: 900; }
.pmodal-plan-security { margin-top: auto; color: var(--soft); font-size: 10.5px; }
.pmodal-source { margin-top: 35px; }
.pmodal-source-head { gap: 7px; margin-bottom: 17px; }
.pmodal-source-head strong { font-size: 20px; }
.pmodal-source-head span { max-width: 66ch; color: var(--soft); font-size: 13px; }
.pmodal-source-grid { gap: 16px; }
.pmodal-source-card { min-height: 364px; gap: 7px; padding: 24px; border-color: var(--border); border-radius: var(--radius); background: var(--panel); }
.pmodal-source-card:hover { border-color: var(--border-2); background: var(--bg-alt); }
.pmodal-source-card.is-selected { border-color: var(--accent); background: #eef4ff; }
.pmodal-source-card::after { display: none; }
.pmodal-source-logo, .pmodal-source-icon { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px; }
.pmodal-source-logo { padding: 5px; background: var(--accent); object-fit: contain; }
.pmodal-source-card strong { padding-right: 0; font-size: 18px; }
.pmodal-source-card > small { color: var(--accent); font-size: 12.5px; }
.pmodal-source-card > p { margin: 10px 0 1px; color: var(--muted); font-size: 13px; line-height: 1.52; }
.pmodal-source-card ul { gap: 7px; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.pmodal-source-card li::before { color: var(--success); }
.pmodal-source-footer { color: var(--soft); }
.pmodal-source-badge { top: 18px; right: 18px; background: #e6f6ec; color: var(--success); }
.pmodal-source-info { margin-top: 18px; }
.pmodal-source-info-panel { align-items: flex-start; gap: 11px; padding: 15px 17px; border-color: var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.pmodal-source-info-panel > span { color: var(--accent); font-size: 20px; line-height: 1; }
.pmodal-source-info-panel p { margin: 0; color: var(--muted); font-size: 12.5px; }
.pmodal-source:has([data-pm-source-option="managed"].is-selected) .pmodal-source-info-managed, .pmodal-source:has([data-pm-source-option="github"].is-selected) .pmodal-source-info-github { display: flex; }
.pmodal-github { border-color: var(--border); background: var(--bg-alt); }
.pmodal-content-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(188px, .9fr); gap: 28px; align-items: start; margin-top: 28px; }
.pmodal-field { margin-top: 0; font-size: 17px; }
.pmodal-field > small { color: var(--soft); font-size: 12.5px; }
.pmodal-domain-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 54px; border: 1px solid var(--border-2); border-radius: var(--radius); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.pmodal-domain-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,95,209,.14); }
.pmodal-field input { min-width: 0; min-height: 52px; border: 0; background: transparent; box-shadow: none !important; }
.pmodal-domain-input > span { margin-right: 7px; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-alt); color: var(--text); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pmodal-domain-help { margin-top: 13px; color: var(--soft); }
.pmodal-domain-chip { border-color: var(--border-2); background: #eef4ff; color: var(--accent); }
.pmodal-included { margin: 0; border-color: var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.pmodal-included summary { padding: 16px 17px 8px; list-style: none; font-size: 13px; }
.pmodal-included summary::-webkit-details-marker { display: none; }
.pmodal-included ul { grid-template-columns: 1fr; gap: 7px; padding: 5px 17px 17px; color: var(--muted); font-size: 11.5px; }
.pmodal-included li { padding-left: 17px; }
.pmodal-status { display: none; }
.pmodal-status.is-ok, .pmodal-status.is-error { display: block; margin-top: 20px; }
.pmodal-action-bar { position: sticky; bottom: -42px; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(130px, .8fr) minmax(185px, 1fr); gap: 11px; align-items: stretch; margin: 32px -42px -42px; padding: 18px 42px; border-top: 1px solid var(--border); background: var(--panel); }
.pmodal-security { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pmodal-security > span { color: var(--accent); font-size: 25px; }
.pmodal-security strong, .pmodal-security small { display: block; }
.pmodal-security strong { font-size: 12px; }
.pmodal-security small { margin-top: 3px; color: var(--soft); font-size: 10px; line-height: 1.35; }
.pmodal-footer-github, .pmodal-continue { min-height: 54px; margin: 0; border-radius: var(--radius); font-size: 13px; }
.pmodal-footer-github { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-2); background: var(--bg-alt); color: var(--text); }
.pmodal-footer-github svg { width: 20px; height: 20px; }
.pmodal-footer-github.is-selected { border-color: var(--accent); }
.pmodal-footer-github:focus-visible, .pmodal-continue:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pmodal-continue { background: var(--accent); }
.pmodal:has([data-pm-source-option="github"].is-selected) .pmodal-continue:not(.is-loading) [data-pm-continue-label] { font-size: inherit; }
.pmodal:has([data-pm-source-option="github"].is-selected) .pmodal-continue:not(.is-loading) [data-pm-continue-label]::after { content: none; }
.pmodal-note { margin: 15px 0 0; color: var(--soft); font-size: 11px; }
.pmodal-note a { color: var(--accent); }
.pmodal-note span + span::before { display: none; }
.pmodal-terms { display: flex; align-items: flex-start; gap: 9px; margin: 15px 0 0; padding: 11px 13px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-alt); font-size: 12px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.pmodal-terms input { margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent); }
.pmodal-terms a { color: var(--accent); }
.pmodal-terms.is-invalid { border-color: var(--danger); color: var(--danger); }
.pmodal-action-bar .pmodal-continue { background: var(--cta-green); }
.pmodal-action-bar .pmodal-continue:hover:not(:disabled) { background: var(--cta-green-strong); }
.pmodal-action-bar .pmodal-continue:focus-visible { outline-color: var(--cta-green); }
@media (max-width: 900px) { .pmodal-hero { grid-template-columns: 1fr; gap: 10px; padding-right: 0; } .pmodal-plans { margin-top: 8px; } .pmodal-plan { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .pmodal-plan > span { justify-self: end; grid-row: 1 / span 2; } .pmodal-plan-pills { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pmodal-plan-security { grid-column: 1 / -1; } .pmodal-feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pmodal-feature-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); } .pmodal-feature-strip > div:nth-child(4) { border-top: 1px solid var(--border); } }
@media (max-width: 700px) { .pmodal { padding: 14px; } .pmodal-panel { max-height: 95dvh; padding: 30px 22px; border-radius: 14px; } .pmodal-hero { grid-template-columns: 1fr; gap: 8px; padding-right: 0; } .pmodal-plans { margin-top: 8px; } .pmodal-plan { min-height: 0; grid-template-columns: auto 1fr; align-items: center; } .pmodal-plan > span { justify-self: end; grid-row: 1 / span 2; } .pmodal-plan-pills { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } .pmodal-plan-security { grid-column: 1 / -1; } .pmodal-feature-strip { grid-template-columns: repeat(2, 1fr); } .pmodal-feature-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); } .pmodal-feature-strip > div:nth-child(4) { border-top: 1px solid var(--border); } .pmodal-source-card { min-height: 0; } .pmodal-content-grid { grid-template-columns: 1fr; gap: 20px; } .pmodal-included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pmodal-action-bar { position: relative; bottom: auto; grid-template-columns: 1fr; margin: 28px -22px -22px; padding: 18px 22px; } .pmodal-security { justify-content: center; text-align: center; } .pmodal-footer-github, .pmodal-continue { width: 100%; } }
@media (max-width: 420px) { .pmodal { padding: 7px; } .pmodal-panel { padding: 25px 17px; } .pmodal-panel h2 { font-size: 34px; } .pmodal-feature-strip > div { grid-template-columns: 21px 1fr; padding-inline: 7px; } .pmodal-feature-strip strong { font-size: 10px; } .pmodal-feature-strip small { font-size: 9px; } .pmodal-plan-pills { grid-template-columns: 1fr; } .pmodal-domain-input { grid-template-columns: 1fr; padding-bottom: 7px; } .pmodal-domain-input > span { margin: 0 7px; text-align: center; } .pmodal-included ul { grid-template-columns: 1fr; } .pmodal-action-bar { margin: 25px -17px -17px; padding: 16px 17px; } }

/* Optional custom-domain choice: domain intent is captured before checkout. */
.pmodal-domain{min-width:0;margin:0;padding:0;border:0;}
.pmodal-content-grid{padding-bottom:94px;}
.pmodal-domain legend{padding:0;color:var(--text);font-size:17px;font-weight:800;}
.pmodal-domain-choice{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--panel);cursor:pointer;}
.pmodal-domain-choice:has(input:checked){border-color:var(--accent);background:#eef4ff;}
.pmodal-domain-choice input{margin:3px 0 0;accent-color:var(--accent);}
.pmodal-domain-choice>span{display:block!important;min-width:0;}
.pmodal-domain-choice strong{display:block!important;font-size:13px;line-height:1.35;}
.pmodal-domain-choice small,.pmodal-domain-input small{display:block!important;margin-top:3px;color:var(--soft);font-size:11.5px;line-height:1.45;}
.pmodal-domain-input{display:grid!important;grid-template-columns:1fr!important;gap:6px;margin-top:12px;padding:12px;border-color:var(--border-2);}
.pmodal-domain-input[hidden]{display:none!important;}
.pmodal-domain-input>span{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--muted)!important;font-size:12px!important;}
.pmodal-domain-input input{width:100%;min-height:44px!important;padding:0 12px!important;border:1px solid var(--border-2)!important;border-radius:var(--radius)!important;background:#fff!important;}
@media(max-width:700px){.pmodal-content-grid{padding-bottom:0;}.pmodal-domain-choice{padding:11px;}.pmodal-domain-chip{white-space:normal;}}

/* ---------- Portal ---------- */
.portal-layout { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); gap: clamp(28px,6vw,64px); align-items: center; }

/* ---------- FAQ ---------- */
.faq-container { max-width: 780px; }
.faq-container h2 { max-width: none; text-align: center; margin-inline: auto; }
.faq-list { margin-top: 38px; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--soft); font-size: 22px; flex-shrink: 0; }
.faq-list details[open] summary::after { content: "\2212"; color: var(--accent); }
.faq-list p { padding: 0 4px 22px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- CTA ---------- */
.cta { padding: clamp(40px,6vw,72px) 0; }
.cta-card { padding: clamp(44px,7vw,76px) clamp(24px,5vw,48px); border-radius: var(--radius); text-align: center; background: var(--ink-deep); color: #fff; }
.cta-card h2 { max-width: none; font-size: clamp(1.9rem, 3vw + 1rem, 3rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.cta-card > p { margin-top: 14px; color: #b9c2d0; font-size: 16.5px; }
.cta-actions { justify-content: center; margin-top: 26px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.footer-brand { max-width: 300px; }
.footer-logo { height: 30px; width: auto; }
.footer-brand p { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(120px,1fr)); gap: 32px; flex: 1; max-width: 520px; }
.footer-nav h2 { margin-bottom: 14px; color: var(--soft); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.footer-nav a { display: block; margin-bottom: 10px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--soft); font-size: 13px; }
.footer-bottom div { display: flex; gap: 20px; }

/* ---------- Legal + Docs ---------- */
.legal-page { padding: 72px 0; }
.legal-page article { max-width: 820px; }
.legal-page h1 { font-size: clamp(2.2rem,5vw,3.4rem); font-weight: 800; letter-spacing: -.02em; }
.legal-page h2 { margin-top: 34px; font-size: 1.2rem; }
.legal-page p, .legal-page li { color: var(--muted); line-height: 1.7; }
.legal-page p { margin-top: 15px; }
.legal-page ul { margin-top: 15px; padding-left: 20px; }
.legal-date { color: var(--soft); font-family: var(--mono); font-size: 13px; }
.legal-page a[href^="mailto"], .legal-page a[href^="http"] { color: var(--accent); }

/* ---------- Animations ---------- */
@keyframes deployRowIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .desktop-nav, .header-actions { display: none; }
  .menu-button { display: flex; }
  .hero-grid, .head-row, .portal-layout { grid-template-columns: 1fr; }
  .hero-visual { order: 2; }
  .journey, .template-grid, .runtime-grid, .proof-grid, .doc-grid, .status-grid { grid-template-columns: repeat(2,1fr); }
  .provider-grid { grid-template-columns: repeat(3,1fr); }
  .pricing-single { grid-template-columns: 1fr; gap: 34px; }
  .pricing-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-plans .price-card { padding: 20px 16px; }
  .pricing-plans .price-card.is-featured { transform: none; }
  .pricing-intro .section-lede { max-width: 68ch; }
  .portal-mock { order: -1; }
}
@media (max-width: 640px) {
  .container, .header-inner { width: min(100% - 32px, var(--container)); max-width: calc(100vw - 32px); }
  .hero { padding-top: 48px; }
  .hero-grid, .hero-copy, .hero-visual, .deploy-card { width: 100%; }
  .page-title, .section-lede, .doc-card, .status-card, .text-panel { width: 100%; overflow-wrap: anywhere; }
  .doc-grid, .status-grid { width: 100%; }
  .page-title { max-width: 9ch; font-size: clamp(2rem, 10vw, 2.65rem); }
  .eyebrow { max-width: 100%; white-space: normal; }
  .hero-copy h1 { max-width: 8.5ch; font-size: clamp(2.15rem, 10vw, 2.8rem); letter-spacing: -.02em; }
  .hero-copy h1 span { display: block; }
  .lede { max-width: 100%; font-size: 1rem; overflow-wrap: anywhere; }
  .button { width: 100%; }
  .hero-actions .button, .cta-actions .button { width: 100%; }
  .hero-points li { flex: 1 1 100%; text-align: center; }
  .feature-card { grid-template-columns: 40px minmax(0,1fr); gap: 12px; }
  .journey, .template-grid, .runtime-grid, .proof-grid, .provider-grid, .pm-metrics, .doc-grid, .status-grid { grid-template-columns: 1fr; }
  .workflow-step { grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
  .pricing-single { grid-template-columns: 1fr; gap: 30px; }
  .pricing-plans { grid-template-columns: 1fr; }
  .pricing-trust { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .pricing-trust li { gap: 10px; }
  .pricing-trust li > span { flex-basis: 25px; width: 25px; height: 25px; border-radius: 8px; }
  .pricing-trust strong { font-size: 13.5px; }
  .pricing-trust small { font-size: 12.5px; }
  .price-card { padding: 22px 18px; border-radius: var(--radius); }
  .price { margin-top: 17px; }
  .price strong { font-size: clamp(50px, 15vw, 60px); }
  .price-note { margin-top: 12px; font-size: 15px; }
  .price-features { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; padding-top: 17px; }
  .price-features li { font-size: 13px; }
  .price-card .button { margin-top: 23px; min-height: 52px; }
  .price-reassurance { margin-top: 10px; }
  .workflow-step::after { display: none; }
  .pm-body { grid-template-columns: 1fr; }
  .pm-side { display: none; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* ---------- Mobile hero balance ---------- */
.hero-points-mobile { display: none; }

@media (max-width: 767px) {
  .hero { padding: 28px 0; }
  .hero-grid { gap: 16px; }
  .hero-copy .eyebrow {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-copy h1 {
    max-width: 11ch;
    margin: 14px auto 0;
    font-size: clamp(2.15rem, 8vw, 2.75rem);
    line-height: 1.02;
    text-align: center;
  }
  .hero-copy .lede { margin: 12px auto 0; text-align: center; }
  .hero-copy .hero-actions { margin-top: 18px; }
  .hero-copy > .hero-points { display: none; }
  .hero-points-mobile { display: flex; order: 3; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.screenshot-card strong { margin-top: 14px; }