/* BioSpark public UI — component layer v2 (docs/45 visual refinement candidate).
   Loaded AFTER style.css / biospark-tokens.css / marketing-nav.css. It re-bases the legacy public stylesheet on the
   v2 tokens (no gradients, no pills, no floating shadows, no hero-per-page) and defines the page-content components
   (.pg-*) used by the refined pages. Header DOM is still produced by shared/marketing-nav.js (unchanged). */

/* ---------- re-base the legacy public variables on v2 tokens ---------- */
:root {
  --bg: var(--bs-bg); --bg-2: var(--bs-surface-2); --bg-card: var(--bs-surface); --bg-card-2: var(--bs-surface-2);
  --border: var(--bs-border); --border-mid: var(--bs-border-mid); --border-hi: var(--bs-border-strong);
  --text-1: var(--bs-text); --text-2: var(--bs-text-2); --text-3: var(--bs-muted);
  --accent: var(--bs-green); --accent-2: var(--bs-blue); --accent-3: var(--bs-blue);
  --accent-soft: var(--bs-green-soft); --accent-glow: transparent; --accent-glow2: transparent;
  --font-display: var(--bs-font-display); --font-body: var(--bs-font-body); --font-sans: var(--bs-font-body);
  --r-sm: var(--bs-radius-sm); --r-md: var(--bs-radius); --r-lg: var(--bs-radius-lg); --r-xl: var(--bs-radius-lg); --r-2xl: var(--bs-radius-lg); --r-full: var(--bs-radius-sm);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: var(--bs-shadow-menu); --shadow-glow: none; --shadow-card: none;
}
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--bs-font-body); font-size: var(--bs-fs-body); line-height: 1.6; color: var(--bs-text); background: var(--bs-bg); }
body.pg { padding-top: var(--bs-header-height); }
.container { max-width: var(--bs-container); padding: 0 var(--bs-gutter); }
h1, h2, h3, h4 { font-family: var(--bs-font-display); color: var(--bs-text); margin: 0; }
p { margin: 0; }
a { color: inherit; }
.text-gradient { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: inherit; }
.section { padding: var(--bs-s9) 0; }
.section--sm { padding: var(--bs-s8) 0; }
.section-header { text-align: left; margin-bottom: var(--bs-s6); }
.section-title { font-size: var(--bs-fs-h2); line-height: var(--bs-lh-h2); letter-spacing: var(--bs-tracking-h); font-weight: 600; margin-bottom: var(--bs-s3); }
.section-desc { font-size: 17px; color: var(--bs-text-2); max-width: 60ch; margin: 0; line-height: 1.6; }
.eyebrow { font-family: var(--bs-font-body); font-size: var(--bs-fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-blue); background: none; -webkit-text-fill-color: currentColor; }
.anim { opacity: 1; animation: none; }

/* ---------- header (DOM from marketing-nav.js) ---------- */
.navbar, .navbar.scrolled { background: var(--bs-surface); border-bottom: 1px solid var(--bs-border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; }
.navbar--hero:not(.scrolled) { background: var(--bs-surface) !important; border-bottom-color: var(--bs-border) !important; }
.navbar--hero:not(.scrolled) .navbar__link { color: var(--bs-text-2) !important; }
.navbar--hero:not(.scrolled) .navbar__link:hover, .navbar--hero:not(.scrolled) .navbar__link.active { color: var(--bs-text) !important; background: transparent !important; }
.navbar--hero:not(.scrolled) .navbar__logo-sep, .navbar--hero:not(.scrolled) .navbar__logo-sub { display: block !important; }
.navbar--hero:not(.scrolled) .btn-ghost { color: var(--bs-text-2) !important; border-color: transparent !important; }
.navbar--hero:not(.scrolled) .btn-primary { background: var(--bs-blue) !important; color: #fff !important; }
.navbar .navbar__inner { height: var(--bs-header-height); max-width: var(--bs-container); padding: 0 var(--bs-gutter); }
.navbar .navbar__logo { gap: 12px; }
.navbar .navbar__logo img { height: 28px; }
.navbar .navbar__logo-sub, .navbar .navbar__logo img.navbar__logo-sub { height: 22px; opacity: .85; }
.navbar .navbar__logo-sep { width: 1px; height: 20px; background: var(--bs-border-mid); }
.navbar .navbar__links { gap: 4px; margin-left: 28px; }
.navbar .navbar__link, .navbar .navbar__link.bs-menu-trigger {
  font-family: var(--bs-font-body); font-size: 14px; font-weight: 500; color: var(--bs-text-2);
  padding: 8px 10px; border-radius: var(--bs-radius-xs); background: transparent; position: relative; line-height: 1.4;
}
.navbar .navbar__link:hover, .navbar .bs-open > .navbar__link { color: var(--bs-text); background: var(--bs-surface-2); }
.navbar .navbar__link.active, .navbar .navbar__link[aria-current="page"] { color: var(--bs-text); background: transparent; font-weight: 600; }
.navbar .navbar__link.active::after, .navbar .navbar__link[aria-current="page"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -13px; height: 2px; background: var(--bs-blue); border-radius: 1px;
}
.bs-chevron { opacity: .55; }
.bs-panel { top: calc(100% + 12px); width: 520px; border-radius: var(--bs-radius); box-shadow: var(--bs-shadow-menu); padding: 16px; }
.bs-panel-head strong { font-size: 15px; }
.bs-panel-head p { font-size: 13px; }
.bs-panel-link-label { font-size: 14px; font-weight: 500; }
.bs-panel-link-desc { font-size: 12.5px; }
.bs-panel-link:hover { background: var(--bs-surface-2); }
.navbar .navbar__actions { gap: 8px; }
.navbar .navbar__actions .btn, .navbar .btn-sm { border-radius: var(--bs-radius-sm); font-size: 14px; padding: 7px 14px; }
.navbar .navbar__actions .bs-user { font-size: 13px; }
@media (max-width: 768px) {
  .navbar .navbar__link.active::after { display: none; }
  .navbar.bs-menu-open .navbar__links { top: var(--bs-header-height); box-shadow: var(--bs-shadow-menu); }
}

/* ---------- buttons: 4 tiers ---------- */
.btn { font-family: var(--bs-font-body); font-weight: 500; font-size: 15px; line-height: 1.25; padding: 10px 18px; border-radius: var(--bs-radius-sm); border: 1px solid transparent; transition: background-color .15s var(--bs-ease), border-color .15s var(--bs-ease), color .15s var(--bs-ease); overflow: visible; transform: none; }
.btn::after { display: none; }
.btn:hover { transform: none; }
.btn-primary { background: var(--bs-blue); color: #fff; box-shadow: none; border-color: var(--bs-blue); letter-spacing: 0; font-weight: 500; }
.btn-primary:hover { background: var(--bs-blue-ink); border-color: var(--bs-blue-ink); transform: none; box-shadow: none; }
.btn-secondary, .btn-outline { background: var(--bs-surface); color: var(--bs-text); border-color: var(--bs-border-mid); padding: 10px 18px; font-size: 15px; }
.btn-secondary:hover, .btn-outline:hover { background: var(--bs-surface-2); border-color: var(--bs-border-strong); color: var(--bs-text); transform: none; }
.btn-ghost, .btn-tertiary { background: transparent; color: var(--bs-text-2); border-color: transparent; padding: 8px 12px; font-size: 14px; }
.btn-ghost:hover, .btn-tertiary:hover { color: var(--bs-text); background: var(--bs-surface-2); }
.btn-danger { background: var(--bs-red); color: #fff; border-color: var(--bs-red); }
.btn-lg { padding: 12px 22px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }

/* ---------- page hero (public): one compact, product-centred opening per page ---------- */
.pg-hero { padding: var(--bs-s8) 0 var(--bs-s7); border-bottom: 1px solid var(--bs-border); background: var(--bs-surface); }
.pg-hero--home { padding-top: var(--bs-s9); }
.pg-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bs-s7); align-items: center; }
.pg-hero--single .container { grid-template-columns: minmax(0, 1fr); }
.pg-hero .eyebrow { display: block; margin-bottom: var(--bs-s4); }
.pg-hero h1 { font-size: var(--bs-fs-h1); line-height: var(--bs-lh-h1); letter-spacing: var(--bs-tracking-display); font-weight: 600; max-width: 18ch; }
.pg-hero--single h1 { max-width: 30ch; }
.pg-hero--home h1 { font-size: var(--bs-fs-display); line-height: var(--bs-lh-display); max-width: 20ch; }
.pg-hero .lede { margin-top: var(--bs-s5); font-size: 18px; line-height: 1.6; color: var(--bs-text-2); max-width: 52ch; }
.pg-hero .actions { display: flex; gap: var(--bs-s3); margin-top: var(--bs-s6); flex-wrap: wrap; }
.pg-hero .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-s5); margin-top: var(--bs-s6); padding-top: var(--bs-s5); border-top: 1px solid var(--bs-border); }
.pg-hero .facts div { font-size: var(--bs-fs-caption); color: var(--bs-muted); }
.pg-hero .facts strong { display: block; font-size: 15px; color: var(--bs-text); font-weight: 600; margin-bottom: 2px; }

/* ---------- Data → Analysis → Results flow diagram ---------- */
.pg-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--bs-s2); }
.pg-flow .node { border: 1px solid var(--bs-border); background: var(--bs-surface); border-radius: var(--bs-radius); padding: var(--bs-s4); min-width: 0; }
.pg-flow .node .k { font-size: var(--bs-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-blue); }
.pg-flow .node h3 { font-size: 16px; font-weight: 600; margin: 6px 0 4px; }
.pg-flow .node p { font-size: var(--bs-fs-caption); color: var(--bs-text-2); line-height: 1.5; }
.pg-flow .node ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pg-flow .node li { font-size: var(--bs-fs-micro); color: var(--bs-muted); padding-left: 12px; position: relative; }
.pg-flow .node li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--bs-border-strong); }
.pg-flow .arrow { align-self: center; color: var(--bs-border-strong); display: flex; }
.pg-flow .arrow svg { width: 20px; height: 20px; }
.pg-flow--stack { grid-template-columns: 1fr; }
.pg-flow--stack .arrow { transform: rotate(90deg); justify-content: center; }

/* ---------- product frame: a faithful, simplified rendering of the application surface ---------- */
.pg-frame { border: 1px solid var(--bs-border-mid); border-radius: var(--bs-radius-lg); background: var(--bs-surface); overflow: hidden; font-size: 13px; color: var(--bs-text-2); box-shadow: 0 0 0 6px var(--bs-surface-2); }
.pg-frame .bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--bs-border); font-size: 13px; }
.pg-frame .bar .brand { font-weight: 700; color: var(--bs-text); letter-spacing: -.01em; }
.pg-frame .bar span[data-on] { color: var(--bs-text); font-weight: 600; }
.pg-frame .bar .r { margin-left: auto; color: var(--bs-muted); }
.pg-frame .ctx { padding: 6px 14px; background: var(--bs-surface-2); border-bottom: 1px solid var(--bs-border); font-size: 11.5px; }
.pg-frame .body { padding: 16px; display: grid; gap: 12px; }
.pg-frame .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pg-frame .row strong { color: var(--bs-text); font-weight: 600; font-size: 14px; }
.pg-frame .btn-mini { font-size: 11.5px; padding: 4px 9px; border-radius: 4px; background: var(--bs-blue); color: #fff; font-weight: 500; }
.pg-frame .btn-mini.sec { background: var(--bs-surface); color: var(--bs-text); border: 1px solid var(--bs-border-mid); }
.pg-frame table { width: 100%; border-collapse: collapse; }
.pg-frame th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--bs-text-2); padding: 6px 8px; border-bottom: 1px solid var(--bs-border); background: #FBFCFD; }
.pg-frame td { padding: 8px 8px; border-bottom: 1px solid var(--bs-border); color: var(--bs-text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.pg-frame tr:last-child td { border-bottom: 0; }
.pg-frame .mono { font-family: var(--bs-font-mono); font-size: 11.5px; }

/* ---------- status system (shared with the application) ---------- */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 2px 8px 2px 6px; border-radius: var(--bs-radius-xs); border: 1px solid transparent; white-space: nowrap; line-height: 1.5; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st-uploading  { color: var(--bs-blue-ink);  background: var(--bs-blue-soft);  border-color: #D5E3F8; }
.st-preparing  { color: var(--bs-amber);     background: var(--bs-amber-soft); border-color: #F5DFB8; }
.st-ready      { color: var(--bs-green-ink); background: var(--bs-green-soft); border-color: #C6E9D8; }
.st-running    { color: var(--bs-blue-ink);  background: var(--bs-blue-soft);  border-color: #D5E3F8; }
.st-completed  { color: var(--bs-green-ink); background: var(--bs-green-soft); border-color: #C6E9D8; }
.st-attention  { color: var(--bs-amber);     background: var(--bs-amber-soft); border-color: #F5DFB8; }
.st-failed     { color: var(--bs-red);       background: var(--bs-red-soft);   border-color: #F3C9C5; }
.st-running::before { animation: st-pulse 1.4s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- content sections ---------- */
.pg-section { padding: var(--bs-s9) 0; }
.pg-section--tight { padding: var(--bs-s8) 0; }
.pg-section--band { background: var(--bs-surface); border-top: 1px solid var(--bs-border); border-bottom: 1px solid var(--bs-border); }
.pg-section + .pg-section:not(.pg-section--band) { border-top: 1px solid var(--bs-border); }
.pg-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--bs-s6); align-items: end; margin-bottom: var(--bs-s7); }
.pg-head .eyebrow { display: block; margin-bottom: var(--bs-s3); }
.pg-head h2 { font-size: var(--bs-fs-h2); line-height: var(--bs-lh-h2); letter-spacing: var(--bs-tracking-h); font-weight: 600; }
.pg-head p { font-size: 17px; color: var(--bs-text-2); line-height: 1.6; max-width: 56ch; }
.pg-head--stack { grid-template-columns: minmax(0, 1fr); max-width: 720px; }

/* capability list: rows separated by hairlines, not floating cards */
.pg-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--bs-border); }
.pg-caps > * { padding: var(--bs-s5) var(--bs-s5) var(--bs-s5) 0; border-bottom: 1px solid var(--bs-border); }
.pg-caps > *:nth-child(3n+2) { padding-left: var(--bs-s5); border-left: 1px solid var(--bs-border); }
.pg-caps > *:nth-child(3n+3) { padding-left: var(--bs-s5); border-left: 1px solid var(--bs-border); padding-right: 0; }
.pg-cap .k { font-size: var(--bs-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-muted); }
.pg-cap h3 { font-size: var(--bs-fs-h3); line-height: var(--bs-lh-h3); font-weight: 600; margin: 6px 0 8px; letter-spacing: -.01em; }
.pg-cap p { font-size: 15px; color: var(--bs-text-2); line-height: 1.6; }
.pg-cap ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pg-cap li { font-size: 14px; color: var(--bs-text-2); padding-left: 14px; position: relative; }
.pg-cap li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--bs-green); }
.pg-cap a { color: var(--bs-blue); text-decoration: none; font-weight: 500; font-size: 14px; }
.pg-cap a:hover { text-decoration: underline; }
.pg-cap .more { margin-top: 12px; display: inline-block; }

/* product objects DO earn a card: analysis products, datasets */
.pg-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-s4); }
.pg-product { border: 1px solid var(--bs-border); border-radius: var(--bs-radius); background: var(--bs-surface); padding: var(--bs-s5); display: grid; gap: 6px; }
.pg-product .k { font-size: var(--bs-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-blue); }
.pg-product h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.pg-product p { font-size: 14.5px; color: var(--bs-text-2); line-height: 1.55; }
.pg-product .modes { margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bs-border); }
.pg-product .modes li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bs-border); font-size: 14px; color: var(--bs-text-2); }
.pg-product .modes li:last-child { border-bottom: 0; }
.pg-product .modes strong { color: var(--bs-text); font-weight: 600; }
.pg-product .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pg-tag { font-size: var(--bs-fs-micro); color: var(--bs-text-2); background: var(--bs-surface-2); border: 1px solid var(--bs-border); border-radius: var(--bs-radius-xs); padding: 2px 7px; font-weight: 500; }
.pg-tag--mono { font-family: var(--bs-font-mono); }

/* workflow steps: numbered, horizontal */
.pg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bs-s5); counter-reset: s; }
.pg-step { counter-increment: s; padding-top: var(--bs-s4); border-top: 2px solid var(--bs-border); position: relative; }
.pg-step::before { content: counter(s, decimal-leading-zero); font-family: var(--bs-font-mono); font-size: var(--bs-fs-micro); color: var(--bs-blue); display: block; margin-bottom: 8px; }
.pg-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.pg-step p { font-size: 14px; color: var(--bs-text-2); line-height: 1.55; }

/* two-column split (text + visual) */
.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--bs-s8); align-items: center; }
.pg-split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pg-split h2 { font-size: var(--bs-fs-h2); line-height: var(--bs-lh-h2); letter-spacing: var(--bs-tracking-h); font-weight: 600; margin-bottom: var(--bs-s3); }
.pg-split p { font-size: 16px; color: var(--bs-text-2); line-height: 1.6; }
.pg-split .eyebrow { display: block; margin-bottom: var(--bs-s3); }

/* definition rows (e.g. outputs) */
.pg-rows { border-top: 1px solid var(--bs-border); }
.pg-row { display: grid; grid-template-columns: 220px 1fr auto; gap: var(--bs-s5); padding: var(--bs-s4) 0; border-bottom: 1px solid var(--bs-border); align-items: baseline; }
.pg-row strong { font-size: 15px; font-weight: 600; }
.pg-row p { font-size: 14.5px; color: var(--bs-text-2); }
.pg-row .pg-tag { justify-self: end; }

/* CTA band: quiet, bordered, no gradient */
.pg-cta { padding: var(--bs-s8) 0; border-top: 1px solid var(--bs-border); background: var(--bs-surface); }
.pg-cta .container { display: flex; justify-content: space-between; align-items: center; gap: var(--bs-s6); flex-wrap: wrap; }
.pg-cta h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.pg-cta p { font-size: 15px; color: var(--bs-text-2); }
.pg-cta .actions { display: flex; gap: var(--bs-s3); flex-wrap: wrap; }

/* ---------- architecture diagram (pass 1.5: designed, not wireframe) ---------- */
.pg-arch { background: var(--bs-surface-2); border: 1px solid var(--bs-border); border-radius: var(--bs-radius-lg); padding: var(--bs-s5) var(--bs-s5) var(--bs-s4); display: grid; gap: 0; }
.pg-arch-scope { display: flex; align-items: center; gap: 0; margin-bottom: var(--bs-s4); }
.pg-arch-scope .chip { font-size: var(--bs-fs-caption); font-weight: 600; color: var(--bs-text); background: var(--bs-surface); border: 1px solid var(--bs-border-mid); border-radius: var(--bs-radius-sm); padding: 4px 12px; white-space: nowrap; }
.pg-arch-scope .chip--set { font-weight: 500; color: var(--bs-text-2); }
.pg-arch-scope .link { flex: 0 0 28px; height: 1px; background: var(--bs-border-strong); position: relative; }
.pg-arch-scope .link::after { content: ''; position: absolute; right: -1px; top: -3px; width: 5px; height: 5px; border-top: 1px solid var(--bs-border-strong); border-right: 1px solid var(--bs-border-strong); transform: rotate(45deg); }
.pg-arch-app { background: var(--bs-surface); border: 1px solid var(--bs-border); border-left: 3px solid var(--bs-blue); border-radius: var(--bs-radius); padding: var(--bs-s4) var(--bs-s5); display: grid; grid-template-columns: 180px 1fr; gap: var(--bs-s4); align-items: center; }
.pg-arch-app .lbl { font-size: var(--bs-fs-caption); font-weight: 600; color: var(--bs-text); display: flex; align-items: center; gap: 8px; }
.pg-arch-app .lbl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-blue); }
.pg-arch-app .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-arch-app .tabs span { font-size: 14px; font-weight: 500; color: var(--bs-text); background: var(--bs-surface-2); border: 1px solid var(--bs-border); border-radius: var(--bs-radius-xs); padding: 6px 12px; display: inline-flex; align-items: baseline; gap: 6px; }
.pg-arch-app .tabs em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--bs-text-2); }
.pg-arch-links { display: grid; grid-template-columns: repeat(3, 1fr); height: 28px; }
.pg-arch-links i { justify-self: center; width: 1px; background: var(--bs-border-strong); position: relative; }
.pg-arch-links i::after { content: ''; position: absolute; bottom: 0; left: -3px; width: 5px; height: 5px; border-bottom: 1px solid var(--bs-border-strong); border-right: 1px solid var(--bs-border-strong); transform: rotate(45deg); }
.pg-arch-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-s3); }
.pg-arch-services .svc { background: var(--bs-surface); border: 1px solid var(--bs-border); border-radius: var(--bs-radius); padding: var(--bs-s4) var(--bs-s4) var(--bs-s4); display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; align-items: start; }
.pg-arch-services svg { width: 24px; height: 24px; fill: none; stroke: var(--bs-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; grid-row: 1 / span 2; margin-top: 2px; }
.pg-arch-services h3, .pg-arch-services h4 { font-size: 15px; font-weight: 600; }
.pg-arch-services p { font-size: 13.5px; color: var(--bs-text-2); line-height: 1.5; }
.pg-arch-services b { color: var(--bs-green-ink); font-weight: 600; }
.pg-arch-base { margin-top: var(--bs-s3); border-top: 1px dashed var(--bs-border-strong); padding-top: var(--bs-s3); display: grid; grid-template-columns: 180px 1fr; gap: var(--bs-s4); align-items: baseline; }
.pg-arch-base .lbl { font-size: var(--bs-fs-caption); font-weight: 600; color: var(--bs-text-2); text-transform: uppercase; letter-spacing: .06em; }
.pg-arch-base p { font-size: 13.5px; color: var(--bs-text-2); }
.pg-list { margin: var(--bs-s5) 0 0; padding: 0; list-style: none; display: grid; gap: 12px; border-top: 1px solid var(--bs-border); padding-top: var(--bs-s4); }
.pg-list li { font-size: 15px; color: var(--bs-text-2); line-height: 1.55; }
.pg-list strong { color: var(--bs-text); font-weight: 600; }
@media (max-width: 1024px) { .pg-arch-services { grid-template-columns: 1fr; } .pg-arch-links { display: none; } .pg-arch-services { margin-top: var(--bs-s3); } }
@media (max-width: 640px) {
  .pg-arch { padding: var(--bs-s4); }
  .pg-arch-scope { flex-wrap: wrap; gap: 6px; }
  .pg-arch-scope .link { flex-basis: 16px; }
  .pg-arch-app, .pg-arch-base { grid-template-columns: 1fr; gap: 8px; }
  .pg-arch-app .tabs span { font-size: 13px; padding: 4px 9px; }
  .pg-arch-app .tabs em { display: none; }
  .pg-arch-services .svc { padding: var(--bs-s3); }
}

/* ---------- footer ---------- */
footer { margin-top: 0; padding: var(--bs-s7) 0 var(--bs-s5); background: var(--bs-bg); border-top: 1px solid var(--bs-border); }
.footer__top { margin-bottom: var(--bs-s6); }
.footer__brand img:first-child { height: 24px; }
.footer__brand img:last-child { height: 20px; opacity: .8; }
.footer__tagline { font-size: 14px; }
.footer__col-title { font-size: 12px; letter-spacing: .08em; margin-bottom: 12px; color: var(--bs-text); }
.footer__col-links { gap: 8px; }
.footer__col-links a { font-size: 14px; color: var(--bs-text-2); }
.footer__col-links a:hover { color: var(--bs-blue); }
.footer__bottom { padding-top: var(--bs-s4); }
.footer__copy, .footer__legal a { font-size: 13px; color: var(--bs-text-2); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .pg-hero .container, .pg-split, .pg-split--rev, .pg-head { grid-template-columns: minmax(0, 1fr); }
  .pg-head { gap: var(--bs-s3); margin-bottom: var(--bs-s6); }
  .pg-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-caps > * { padding: var(--bs-s5) var(--bs-s5) var(--bs-s5) 0; border-left: 0; }
  .pg-caps > *:nth-child(2n) { padding-left: var(--bs-s5); border-left: 1px solid var(--bs-border); padding-right: 0; }
  .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-section, .pg-hero--home { padding: var(--bs-s8) 0; }
}
@media (max-width: 640px) {
  .pg-hero .facts { grid-template-columns: 1fr; gap: var(--bs-s3); }
  .pg-hero { padding: var(--bs-s6) 0 var(--bs-s6); }
  .pg-hero .lede { font-size: 16px; }
  .pg-hero .actions .btn { width: 100%; }
  .pg-flow { grid-template-columns: 1fr; }
  .pg-flow .arrow { transform: rotate(90deg); justify-content: center; }
  .pg-caps, .pg-steps, .pg-products { grid-template-columns: minmax(0, 1fr); }
  .pg-caps > *, .pg-caps > *:nth-child(2n) { padding: var(--bs-s4) 0; border-left: 0; }
  .pg-product .modes li, .pg-row { grid-template-columns: 1fr; gap: 4px; }
  .pg-row .pg-tag { justify-self: start; }
  .pg-section { padding: var(--bs-s7) 0; }
  .pg-frame td { max-width: 140px; }
  .pg-frame .body { overflow-x: auto; }
  .pg-frame table { min-width: 420px; }
  .pg-frame .bar .r { display: none; }
  .pg-head p, .pg-hero .lede, .section-desc { font-size: 16px; }
}

/* ---------- pass 2: mobile refinement (owner: public mobile too long) ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .pg-hero, .pg-hero--home { padding: var(--bs-s5) 0 var(--bs-s5); }
  .pg-hero .container { gap: var(--bs-s5); }
  .pg-hero .eyebrow { margin-bottom: var(--bs-s2); }
  .pg-hero .lede { margin-top: var(--bs-s3); font-size: 15px; }
  .pg-hero .actions { margin-top: var(--bs-s4); flex-direction: row; }
  .pg-hero .actions .btn { width: auto; flex: 1 1 0; padding: 10px 12px; font-size: 15px; }
  /* facts: one compact row of three, not three stacked blocks */
  .pg-hero .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-s3); margin-top: var(--bs-s4); padding-top: var(--bs-s3); }
  .pg-hero .facts div { font-size: 11.5px; line-height: 1.35; }
  .pg-hero .facts strong { font-size: 13px; }
  /* product frame: show the first table only */
  .pg-frame .body > .row:nth-of-type(2), .pg-frame .body > table:nth-of-type(2) { display: none; }
  .pg-frame .ctx { display: none; }
  /* section rhythm */
  .pg-section, .pg-section--tight, .pg-cta { padding: var(--bs-s6) 0; }
  .pg-head { margin-bottom: var(--bs-s4); gap: var(--bs-s2); }
  .pg-head h2, .pg-split h2 { font-size: 22px; }
  .pg-head p, .pg-split p, .section-desc { font-size: 14.5px; }
  /* flow: nodes become a tight vertical list; details collapse */
  .pg-flow { gap: 0; border: 1px solid var(--bs-border); border-radius: var(--bs-radius); overflow: hidden; }
  .pg-flow .node { border: 0; border-bottom: 1px solid var(--bs-border); border-radius: 0; padding: var(--bs-s3) var(--bs-s4); display: grid; grid-template-columns: 78px 1fr; gap: 2px var(--bs-s3); align-items: baseline; }
  .pg-flow .node:last-child { border-bottom: 0; }
  .pg-flow .node .k { grid-row: 1 / span 2; font-size: 11px; }
  .pg-flow .node h3 { margin: 0; font-size: 15px; }
  .pg-flow .node p { font-size: 13px; }
  .pg-flow .node ul { display: none; }
  .pg-flow .arrow { display: none; }
  /* capabilities: title + one paragraph + link; bullets hidden */
  .pg-caps > *, .pg-caps > *:nth-child(2n) { padding: var(--bs-s3) 0; }
  .pg-cap h3 { font-size: 17px; margin: 4px 0 4px; }
  .pg-cap p { font-size: 14px; }
  .pg-cap ul { display: none; }
  .pg-cap .more { margin-top: 6px; }
  /* products */
  .pg-products { gap: var(--bs-s3); }
  .pg-product { padding: var(--bs-s4); }
  .pg-product h3 { font-size: 16px; }
  .pg-product p { font-size: 14px; }
  .pg-product .modes li { padding: 7px 0; font-size: 13.5px; }
  .pg-product .meta { display: none; }
  /* steps: two per row */
  .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-s4) var(--bs-s3); }
  .pg-step { padding-top: var(--bs-s2); }
  .pg-step::before { margin-bottom: 4px; }
  .pg-step h3 { font-size: 15px; margin-bottom: 4px; }
  .pg-step p { font-size: 13px; }
  /* architecture */
  /* split / rows / list */
  .pg-split { gap: var(--bs-s4); }
  .pg-list { gap: 8px; margin-top: var(--bs-s4); padding-top: var(--bs-s3); }
  .pg-list li { font-size: 14px; }
  .pg-row { padding: var(--bs-s3) 0; }
  .pg-row p { font-size: 13.5px; }
  /* CTA */
  .pg-cta h2 { font-size: 20px; }
  .pg-cta .actions { width: 100%; }
  .pg-cta .actions .btn { flex: 1 1 0; }
  /* footer: two columns */
  .footer__top { margin-bottom: var(--bs-s4); }
  .footer__cols { gap: var(--bs-s5); }
  .footer__col-links { gap: 6px; }
  footer { padding: var(--bs-s6) 0 var(--bs-s4); }
}

/* ---------- pass 1.5: public mobile header = BioSpark | Open BioSpark (or Get started) | ☰ ---------- */
.bs-mobile-account { display: none; }
@media (max-width: 768px) {
  .navbar .navbar__actions { gap: 8px; }
  .navbar .navbar__actions #bs-sign-in, .navbar .navbar__actions #bs-sign-out, .navbar .navbar__actions .bs-user { display: none; }
  .navbar .navbar__actions #bs-get-started, .navbar .navbar__actions #bs-open-app { display: inline-flex; padding: 7px 12px; font-size: 13.5px; }
  .bs-menu-btn { width: 38px; height: 38px; }
  .navbar.bs-menu-open .navbar__links { padding: 6px 12px 12px; gap: 0; }
  .navbar.bs-menu-open .navbar__link { padding: 12px 8px; font-size: 15px; border-radius: 0; border-bottom: 1px solid var(--bs-border); }
  .navbar.bs-menu-open .bs-menu:last-of-type .navbar__link { border-bottom: 1px solid var(--bs-border); }
  .bs-panel { margin: 0 0 4px 8px; padding: 2px 0 6px 12px; }
  .bs-panel-link { padding: 8px 8px; }
  .bs-panel-link-desc { display: none; }
  .bs-mobile-account { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 14px 8px 4px; }
  .bs-mobile-account .bs-user { font-size: 13px; color: var(--bs-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bs-mobile-account .btn { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 640px) {
  .pg-caps > *, .pg-caps > *:nth-child(2n), .pg-caps > *:nth-child(3n+2), .pg-caps > *:nth-child(3n+3) { border-left: 0; padding-left: 0; padding-right: 0; }
  .pg-flow .node { grid-template-columns: 86px 1fr; }
  .pg-flow .node .k { font-size: 10.5px; letter-spacing: .04em; }
  /* product frame fits the viewport: drop the reference column and the mini button */
  .pg-frame .body { overflow: visible; }
  .pg-frame table { min-width: 0; }
  .pg-frame th:nth-child(3), .pg-frame td:nth-child(3) { display: none; }
  .pg-frame .row .btn-mini { display: none; }
  .pg-frame td { max-width: 110px; }
  .pg-hero .eyebrow { font-size: 12px; }
}
@media (max-width: 640px) {
  .pg-section--steps { display: none; }
  .footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-s3); }
  .footer__col-links a, .footer__col-title { font-size: 12.5px; }
  .footer__col-links { gap: 4px; }
  .footer__tagline { font-size: 13px; margin-bottom: var(--bs-s3); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 640px) {
  .pg-frame--databank th:nth-child(2), .pg-frame--databank td:nth-child(2), .pg-frame--databank th:nth-child(4), .pg-frame--databank td:nth-child(4),
  .pg-frame--databank th:nth-child(5), .pg-frame--databank td:nth-child(5), .pg-frame--databank th:nth-child(6), .pg-frame--databank td:nth-child(6) { display: none; }
  .pg-frame--databank th:nth-child(3), .pg-frame--databank td:nth-child(3) { display: table-cell; }
  .pg-frame--databank td { max-width: 150px; }
}
@media (max-width: 640px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols > div { min-width: 0; }
  .footer__cols > div:last-child { grid-column: 1 / -1; }
  .footer__col-links a { overflow-wrap: anywhere; }
  .pg-frame--databank td { max-width: 120px; }
  .pg-frame--databank .mono { font-size: 11px; }
}

/* ---------- pass 2: page-specific compositions ---------- */
.pg-hero--compact { padding: var(--bs-s7) 0 var(--bs-s6); }
/* benchmark table (performance) */
.pg-bench { border: 1px solid var(--bs-border); border-radius: var(--bs-radius); background: var(--bs-surface); overflow-x: auto; }
.pg-bench table { width: 100%; border-collapse: collapse; min-width: 640px; }
.pg-bench th { text-align: left; font-size: var(--bs-fs-micro); font-weight: 500; color: var(--bs-muted); letter-spacing: .01em; padding: 10px 16px; background: var(--bs-surface-2); border-bottom: 1px solid var(--bs-border); }
.pg-bench td { padding: 14px 16px; border-bottom: 1px solid var(--bs-border); font-size: 14px; color: var(--bs-text-2); vertical-align: top; }
.pg-bench tr:last-child td { border-bottom: 0; }
.pg-bench td strong { display: block; color: var(--bs-text); font-weight: 600; font-size: 14.5px; }
.pg-bench td em { display: block; font-style: normal; font-size: var(--bs-fs-caption); color: var(--bs-muted); margin-top: 2px; }
.st-pending { color: var(--bs-muted); background: var(--bs-surface-2); border-color: var(--bs-border); }
.pg-note { margin-top: var(--bs-s4); font-size: var(--bs-fs-caption); color: var(--bs-muted); max-width: 72ch; }
/* access tracks (pricing) — two columns of substance, not price cards */
.pg-access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-s4); }
.pg-access-track { border: 1px solid var(--bs-border); border-radius: var(--bs-radius-lg); background: var(--bs-surface); padding: var(--bs-s6); display: flex; flex-direction: column; gap: var(--bs-s4); }
.pg-access-track .k { font-size: var(--bs-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-blue); }
.pg-access-track h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.pg-access-track > p { font-size: 15px; color: var(--bs-text-2); line-height: 1.6; }
.pg-access-track .inc span, .pg-access-track .who span { display: block; font-size: var(--bs-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-muted); margin-bottom: 8px; }
.pg-access-track .inc { border-top: 1px solid var(--bs-border); padding-top: var(--bs-s4); }
.pg-access-track .inc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pg-access-track .inc li { font-size: 14.5px; color: var(--bs-text-2); padding-left: 16px; position: relative; }
.pg-access-track .inc li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--bs-green); }
.pg-access-track .who p { font-size: 14px; color: var(--bs-text-2); }
.pg-access-track .actions { margin-top: auto; display: flex; gap: var(--bs-s3); align-items: center; padding-top: var(--bs-s2); }
/* task links (help) */
.pg-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-s3); }
.pg-tasks .pg-task:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: var(--bs-s5); }
.pg-task { border: 1px solid var(--bs-border); border-radius: var(--bs-radius); background: var(--bs-surface); padding: var(--bs-s4) var(--bs-s5); text-decoration: none; color: inherit; display: block; }
.pg-task:hover { border-color: var(--bs-border-strong); text-decoration: none; }
.pg-task .k { font-size: var(--bs-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-muted); }
.pg-task:first-child .k { color: var(--bs-blue); }
.pg-task h2, .pg-task h3 { font-size: 16px; font-weight: 600; margin: 4px 0 4px; }
.pg-task p { font-size: 14px; color: var(--bs-text-2); line-height: 1.55; }
.pg-task .go { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--bs-blue); }
.pg-task:first-child .go { margin-top: 0; }
.pg-row .st { justify-self: end; align-self: center; }
.pg-row .btn { justify-self: end; align-self: center; }
/* contact */
.pg-contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--bs-s7); align-items: start; }
.pg-contact-purposes { border-top: 1px solid var(--bs-border); }
.pg-contact-direct { border: 1px solid var(--bs-border); border-radius: var(--bs-radius); background: var(--bs-surface); padding: var(--bs-s5); display: grid; gap: var(--bs-s3); }
.pg-contact-direct .k { font-size: var(--bs-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-muted); }
.pg-contact-direct p { display: grid; grid-template-columns: 90px 1fr; gap: 12px; font-size: 14.5px; align-items: baseline; }
.pg-contact-direct strong { color: var(--bs-text); font-weight: 600; }
.pg-contact-direct a { color: var(--bs-blue); text-decoration: none; }
/* quick-start article */
.bs-quickstart h1 { font-size: var(--bs-fs-h2); letter-spacing: var(--bs-tracking-h); margin-bottom: var(--bs-s3); }
.bs-quickstart { font-size: 15.5px; line-height: 1.7; color: var(--bs-text-2); max-width: 720px; }
.bs-quickstart strong, .bs-quickstart b { color: var(--bs-text); }
@media (max-width: 1024px) { .pg-access, .pg-tasks { grid-template-columns: minmax(0, 1fr); } .pg-tasks .pg-task:first-child { grid-template-columns: 1fr; gap: 4px; } .pg-contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bs-s5); } }
@media (max-width: 640px) {
  .pg-access-track { padding: var(--bs-s4); }
  .pg-access-track h2 { font-size: 19px; }
  .pg-bench td, .pg-bench th { padding: 10px 12px; }
  .pg-row .st, .pg-row .btn { justify-self: start; }
  .pg-contact-direct p { grid-template-columns: 1fr; gap: 2px; }
}

/* final pass: benchmark-pending statement */
.pg-pending { border: 1px solid var(--bs-border); border-left: 3px solid var(--bs-blue); border-radius: var(--bs-radius); background: var(--bs-surface); padding: var(--bs-s5); max-width: 860px; }
.pg-pending p { font-size: 15px; color: var(--bs-text-2); line-height: 1.65; }
.pg-pending strong { color: var(--bs-text); }

/* final pass: the repositioned (longer) home headline sits on two set lines; preview keeps ≥ pass-1 prominence */
.pg-hero--home .container { grid-template-columns: minmax(0, 14fr) minmax(0, 10fr); }
.pg-hero--home h1 { font-size: min(46px, var(--bs-fs-display)); max-width: none; }
@media (max-width: 1024px) { .pg-hero--home .container { grid-template-columns: minmax(0, 1fr); } .pg-hero--home h1 br { display: none; } }
/* final pass: keep the hero preview legible in its 10fr column — tighter type, no clipped cells */
.pg-hero--home .pg-frame { font-size: 12px; }
.pg-hero--home .pg-frame .bar { font-size: 12px; gap: 12px; padding: 10px 12px; }
.pg-hero--home .pg-frame .bar .r { display: none; }
.pg-hero--home .pg-frame .body { padding: 12px; gap: 10px; }
.pg-hero--home .pg-frame th { padding: 5px 6px; font-size: 10.5px; }
.pg-hero--home .pg-frame td { padding: 6px 6px; font-size: 11.5px; max-width: 140px; }
.pg-hero--home .pg-frame .mono { font-size: 10.5px; }
.pg-hero--home .pg-frame .row strong { font-size: 13px; }
.pg-hero--home .pg-frame .btn-mini { font-size: 11px; padding: 3px 8px; }
.pg-hero--home .pg-frame .st { font-size: 11px; padding: 1px 6px 1px 5px; }

/* ---------- UI refinement 2026-09 (docs/46): visual-only additions ---------- */
/* motion rule: colour transitions only (legacy style.css sets transition: all on nav links) */
.navbar .navbar__link { transition: background-color .15s var(--bs-ease), color .15s var(--bs-ease); }
/* keyboard focus: one blue action ring everywhere on the public site (nav, buttons, body links, form fields) */
.pg a:focus-visible, .pg button:focus-visible, .pg .btn:focus-visible, .pg input:focus-visible, .pg select:focus-visible, .pg textarea:focus-visible,
.navbar .navbar__link:focus-visible, .navbar .btn:focus-visible, .bs-menu-btn:focus-visible, .bs-panel-link:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }
/* inline code on public pages uses the self-hosted mono face (UA default "monospace" otherwise) */
.pg code, .pg kbd, .pg pre { font-family: var(--bs-font-mono); font-size: .92em; }
/* home product cards: "→" links styled from CSS instead of inline style attributes */
.pg-product a.more { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--bs-blue); text-decoration: none; }
.pg-product a.more:hover { color: var(--bs-blue-ink); text-decoration: underline; }

/* ---------- auth pages (login / signup, docs/48): same public shell; card on tokens; no orbs / gradients ---------- */
.pg-auth .auth-wrap { min-height: calc(100vh - var(--bs-header-height)); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--bs-s8) var(--bs-gutter); }
.pg-auth .auth-grid { width: 100%; max-width: 880px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bs-s7); align-items: center; }
.pg-auth .auth-intro .eyebrow { display: block; margin-bottom: var(--bs-s3); }
.pg-auth .auth-intro h1 { font-size: var(--bs-fs-h2); line-height: var(--bs-lh-h2); letter-spacing: var(--bs-tracking-h); font-weight: 600; margin: 0 0 var(--bs-s3); }
.pg-auth .auth-intro p { color: var(--bs-text-2); font-size: 15.5px; line-height: 1.6; margin: 0 0 var(--bs-s5); }
.pg-auth .signup-perks { display: flex; flex-direction: column; gap: 10px; }
.pg-auth .signup-perk { display: flex; align-items: flex-start; gap: 10px; font-size: var(--bs-fs-body-sm); color: var(--bs-text-2); line-height: 1.5; }
.pg-auth .signup-perk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bs-blue); flex-shrink: 0; margin-top: 7px; }
.pg-auth .auth-box { background: var(--bs-surface); border: 1px solid var(--bs-border); border-radius: var(--bs-radius-lg); padding: var(--bs-s6); width: 100%; max-width: 420px; box-sizing: border-box; }
.pg-auth .auth-logo { display: flex; align-items: center; justify-content: center; gap: var(--bs-s3); margin-bottom: var(--bs-s5); }
.pg-auth .auth-logo img { height: 28px; width: auto; }
.pg-auth .auth-logo-sep { width: 1px; height: 22px; background: var(--bs-border); }
.pg-auth .auth-box h1, .pg-auth .auth-box h2 { font-size: var(--bs-fs-h3); line-height: var(--bs-lh-h3); font-weight: 600; letter-spacing: var(--bs-tracking-h); text-align: center; margin: 0 0 var(--bs-s1); }
.pg-auth .auth-sub { font-size: var(--bs-fs-body-sm); color: var(--bs-text-2); text-align: center; margin: 0 0 var(--bs-s5); }
.pg-auth #google-login-btn, .pg-auth #google-signup-btn { display: flex; justify-content: center; width: 100%; }
.pg-auth .auth-divider { display: flex; align-items: center; gap: var(--bs-s3); margin: var(--bs-s5) 0; color: var(--bs-text-2); font-size: var(--bs-fs-caption); }
.pg-auth .auth-divider::before, .pg-auth .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--bs-border); }
.pg-auth .auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--bs-s3); }
.pg-auth .auth-label { font-size: var(--bs-fs-caption); font-weight: 500; color: var(--bs-text-2); }
.pg-auth .auth-input { width: 100%; background: var(--bs-surface); border: 1px solid var(--bs-border-mid); border-radius: var(--bs-radius-sm); padding: 10px 12px; color: var(--bs-text); font-family: var(--bs-font-body); font-size: var(--bs-fs-body-sm); line-height: 1.4; box-sizing: border-box; transition: border-color .15s var(--bs-ease); }
.pg-auth .auth-input::placeholder { color: var(--bs-muted); }
.pg-auth .auth-input:focus { border-color: var(--bs-blue); }
.pg-auth .auth-submit { width: 100%; justify-content: center; margin-top: var(--bs-s2); }
.pg-auth .auth-foot { margin-top: var(--bs-s5); font-size: var(--bs-fs-body-sm); color: var(--bs-text-2); text-align: center; }
.pg-auth .auth-link { color: var(--bs-blue); font-weight: 500; text-decoration: none; }
.pg-auth .auth-link:hover { color: var(--bs-blue-ink); text-decoration: underline; }
@media (max-width: 768px) { .pg-auth .auth-wrap { padding: var(--bs-s6) var(--bs-gutter); } .pg-auth .auth-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bs-s5); } .pg-auth .auth-box { max-width: 100%; } }