/*
 * UpWell website presentation. Historical palette blocks remain below for
 * migration traceability; the canonical live Orange-Gold product system is
 * the final declared layer in this file. Typography remains Sora + DM Mono.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Legacy semantic aliases retained while the transitional site is active. */
  --ink: var(--background-deep);
  --ink2: var(--background-primary);
  --ink3: var(--background-elevated);
  --slate: var(--text-disabled);
  --muted: var(--text-muted);
  --rule: var(--border-subtle);
  --peak: var(--hero);
  --peak-glow: color-mix(in srgb, var(--hero-glow) 18%, transparent);
  --peak-lt: var(--text-primary);
  --peak-dk: var(--hero-dark);
  --flow: var(--secondary);
  --flow-glow: color-mix(in srgb, var(--secondary) 18%, transparent);
  --flow-lt: var(--secondary-glow);
  --rest: var(--signal-1);
  --rest-glow: color-mix(in srgb, var(--signal-1) 15%, transparent);
  --rest-lt: var(--text-secondary);
  --load: var(--signal-4);
  --load-glow: color-mix(in srgb, var(--signal-4) 15%, transparent);
  --load-lt: var(--secondary-glow);
  --warn: var(--signal-3);
  --warn-glow: color-mix(in srgb, var(--signal-3) 12%, transparent);
  --canvas: var(--background-primary);
  --white: var(--text-primary);
  --contrast-base: var(--text-primary);

  /* Website-specific semantic contrast roles derived from theme tokens. */
  --subtle-text: var(--text-muted);
  --flow-text: var(--secondary-glow);
  --rest-text: var(--signal-1);
  --warn-text: var(--signal-3);
  --load-text: var(--signal-4);
  --on-secondary: var(--text-on-accent);
  --on-signal-1: var(--background-deep);

  --font-display: 'Sora', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

/* Theme One — Ocean Dark */
/*
:root[data-theme="ocean-dark"] {
  color-scheme: dark;
  --background-deep: #071620;
  --background-primary: #0E2833;
  --background-elevated: #153648;
  --background-subtle: #0E3355;
  --text-primary: #F3F7F5;
  --text-secondary: #C9DAD6;
  --text-muted: #85A29C;
  --text-disabled: #4E6A66;
  --text-on-accent: #FFFFFF;
  --border-subtle: #1A3A46;
  --border-standard: #234A56;
  --border-emphasis: #1670A0;
  --hero: #1670A0;
  --hero-dark: #0E3355;
  --hero-surface: #0E2833;
  --hero-glow: #2E9BD1;
  --hero-on-surface: #36A7E3;
  --secondary: #35538F;
  --secondary-dark: #1D2A4A;
  --secondary-glow: #6B84B8;
  --signal-1: #6FD1E0;
  --signal-2: #4FA8D8;
  --signal-3: #E0B255;
  --signal-4: #C97A46;
  --signal-5: #8C3B33;
  --signal-1-cell: #03191E;
  --signal-2-cell: #031620;
  --signal-3-cell: #1D1404;
  --signal-4-cell: #1D0F04;
  --signal-5-cell: #1D0705;
  --error: #C33F5E;
  --error-dark: #6E1F35;
  --error-surface: #2A1218;
  --accent-gradient-start: #0E3355;
  --accent-gradient-mid: #1670A0;
  --accent-gradient-end: #2E9BD1;
  --chart-background: #071620;
  --chart-surface: #0E2833;
  --chart-border: #234A56;
  --chart-grid-line: #1A3A46;
  --chart-y-axis-label: #85A29C;
  --chart-time-axis-label: #85A29C;
  --chart-now-line: #F3F7F5;
  --chart-zone-pill-hero-bg: #0E3355;
  --chart-zone-pill-secondary-bg: #1D2A4A;
}
*/

/* Theme One — Ocean Light */
/*
:root[data-theme="ocean-light"] {
  color-scheme: light;
  --background-deep: #EFF8FB;
  --background-primary: #FFFFFF;
  --background-elevated: #E4F2F8;
  --background-subtle: #D6EAF3;
  --text-primary: #071620;
  --text-secondary: #0E3355;
  --text-muted: #4A6773;
  --text-disabled: #9FB6BE;
  --text-on-accent: #FFFFFF;
  --border-subtle: #D6EAF3;
  --border-standard: #B9D6E2;
  --border-emphasis: #1670A0;
  --hero: #1670A0;
  --hero-dark: #0E3355;
  --hero-surface: #E4F2F8;
  --hero-glow: #2E9BD1;
  --hero-on-surface: #146895;
  --secondary: #35538F;
  --secondary-dark: #1D2A4A;
  --secondary-glow: #6B84B8;
  --signal-1: #4FB8CC;
  --signal-2: #3B8DBE;
  --signal-3: #C99435;
  --signal-4: #B3612F;
  --signal-5: #8C3B33;
  --signal-1-cell: #D8F2F6;
  --signal-2-cell: #D9EAF5;
  --signal-3-cell: #F7E9CE;
  --signal-4-cell: #F4DECB;
  --signal-5-cell: #F2D6D2;
  --error: #C33F5E;
  --error-dark: #6E1F35;
  --error-surface: #FBE7EC;
  --accent-gradient-start: #0E3355;
  --accent-gradient-mid: #1670A0;
  --accent-gradient-end: #2E9BD1;
  --chart-background: #EFF8FB;
  --chart-surface: #FFFFFF;
  --chart-border: #B9D6E2;
  --chart-grid-line: #D6EAF3;
  --chart-y-axis-label: #4A6773;
  --chart-time-axis-label: #4A6773;
  --chart-now-line: #071620;
  --chart-zone-pill-hero-bg: #E4F2F8;
  --chart-zone-pill-secondary-bg: #E1E6F2;
}
*/

/* Theme Two — Verdant Dark */
/*
:root[data-theme="verdant-dark"] {
  color-scheme: dark;
  --background-deep: #0D2018;
  --background-primary: #153327;
  --background-elevated: #1C4030;
  --background-subtle: #1D4A34;
  --text-primary: #F3F7F5;
  --text-secondary: #D3E6DA;
  --text-muted: #8FB09E;
  --text-disabled: #537967;
  --text-on-accent: #FFFFFF;
  --border-subtle: #20402F;
  --border-standard: #2C5A45;
  --border-emphasis: #2E6B4C;
  --hero: #2E6B4C;
  --hero-dark: #1D4A34;
  --hero-surface: #153327;
  --hero-glow: #5FA37C;
  --hero-on-surface: #74C39B;
  --secondary: #C9A227;
  --secondary-dark: #4A3A0C;
  --secondary-glow: #E6C767;
  --signal-1: #6FBE8B;
  --signal-2: #A9C36B;
  --signal-3: #D9A855;
  --signal-4: #C97A46;
  --signal-5: #A8503D;
  --signal-1-cell: #01110C;
  --signal-2-cell: #090F01;
  --signal-3-cell: #110B00;
  --signal-4-cell: #140901;
  --signal-5-cell: #180606;
  --error: #E1503D;
  --error-dark: #8C2E22;
  --error-surface: #2A1712;
  --accent-gradient-start: #1D4A34;
  --accent-gradient-mid: #2E6B4C;
  --accent-gradient-end: #5FA37C;
  --chart-background: #0D2018;
  --chart-surface: #153327;
  --chart-border: #2C5A45;
  --chart-grid-line: #20402F;
  --chart-y-axis-label: #8FB09E;
  --chart-time-axis-label: #8FB09E;
  --chart-now-line: #F3F7F5;
  --chart-zone-pill-hero-bg: #1D4A34;
  --chart-zone-pill-secondary-bg: #4A3A0C;
}
*/

/* Theme Two — Verdant Light */
/*
:root[data-theme="verdant-light"] {
  color-scheme: light;
  --background-deep: #E3F5E7;
  --background-primary: #FFFFFF;
  --background-elevated: #DCF0E1;
  --background-subtle: #CFE9D6;
  --text-primary: #0D2018;
  --text-secondary: #1D4A34;
  --text-muted: #4C6E5C;
  --text-disabled: #9EBBA9;
  --text-on-accent: #FFFFFF;
  --border-subtle: #CFE9D6;
  --border-standard: #B0D6BC;
  --border-emphasis: #2E6B4C;
  --hero: #2E6B4C;
  --hero-dark: #1D4A34;
  --hero-surface: #DCF0E1;
  --hero-glow: #5FA37C;
  --hero-on-surface: #2D694B;
  --secondary: #B08D1F;
  --secondary-dark: #4A3A0C;
  --secondary-glow: #E6C767;
  --signal-1: #4FA372;
  --signal-2: #8FA854;
  --signal-3: #C99435;
  --signal-4: #B3612F;
  --signal-5: #A8503D;
  --signal-1-cell: #DCF3E4;
  --signal-2-cell: #EAF1D9;
  --signal-3-cell: #F7E9CE;
  --signal-4-cell: #F4DECB;
  --signal-5-cell: #F2D6D2;
  --error: #E1503D;
  --error-dark: #8C2E22;
  --error-surface: #FBEAE7;
  --accent-gradient-start: #1D4A34;
  --accent-gradient-mid: #2E6B4C;
  --accent-gradient-end: #5FA37C;
  --chart-background: #E3F5E7;
  --chart-surface: #FFFFFF;
  --chart-border: #B0D6BC;
  --chart-grid-line: #CFE9D6;
  --chart-y-axis-label: #4C6E5C;
  --chart-time-axis-label: #4C6E5C;
  --chart-now-line: #0D2018;
  --chart-zone-pill-hero-bg: #DCF0E1;
  --chart-zone-pill-secondary-bg: #F1E6C8;
}
*/

/*
 * Midnight Pulse — active preview
 * Color direction sampled from:
 * https://www.behance.net/gallery/177549717/A-Crypto-Dashboard-UI-Design/modules/1002829577
 */
:root {
  color-scheme: dark;
  --background-deep: #141416;
  --background-primary: #1C1D23;
  --background-elevated: #242630;
  --background-subtle: #2B2D38;
  --text-primary: #F5F3F8;
  --text-secondary: #D0CCD8;
  --text-muted: #9692A1;
  --text-disabled: #666371;
  --text-on-accent: #FFFFFF;
  --border-subtle: #2D2F38;
  --border-standard: #40424D;
  --border-emphasis: #7A1BB1;
  --hero: #7A1BB1;
  --hero-dark: #4A0F6E;
  --hero-surface: #24192C;
  --hero-glow: #A934E0;
  --hero-on-surface: #D488F3;
  --secondary: #5878E8;
  --secondary-dark: #293B85;
  --secondary-glow: #8DA4FF;
  --signal-1: #25B875;
  --signal-2: #4CB69A;
  --signal-3: #F09218;
  --signal-4: #E64A52;
  --signal-5: #A62F48;
  --signal-1-cell: #10271E;
  --signal-2-cell: #112724;
  --signal-3-cell: #2B2111;
  --signal-4-cell: #2B171B;
  --signal-5-cell: #27151D;
  --error: #E64A52;
  --error-dark: #8E2630;
  --error-surface: #2A171B;
  --accent-gradient-start: #4A0F6E;
  --accent-gradient-mid: #7A1BB1;
  --accent-gradient-end: #A934E0;
  --chart-background: #141416;
  --chart-surface: #1C1D23;
  --chart-border: #40424D;
  --chart-grid-line: #2D2F38;
  --chart-y-axis-label: #9692A1;
  --chart-time-axis-label: #9692A1;
  --chart-now-line: #F5F3F8;
  --chart-zone-pill-hero-bg: #4A0F6E;
  --chart-zone-pill-secondary-bg: #293B85;
}

/* Extracted page-level declarations: markup contains no inline CSS. */
.u-01ba5d5696 { background:var(--load) }
.u-098fd3c2dd { margin-top:28px }
.u-0ac370e311 { background:var(--warn) }
.u-0d60f226cc { color:var(--flow-text) }
.u-16d2faa05a { background:var(--hero-dark) }
.u-2beeb38747 { padding-left:8px }
.u-3ca786ea5d { text-align:center;margin:0 auto;max-width:420px;margin-top:16px }
.u-3cc3ed34d5 { color:var(--subtle-text); font-size:13px }
.u-3db3817866 { font-size:clamp(20px,3vw,28px);margin:16px 0 4px; }
.u-3fc6a23616 { text-align:center;margin:0 auto;max-width:560px }
.u-5328fdb716 { margin-bottom:0;gap:14px }
.u-588e9e8407 { color:var(--hero-on-surface) }
.u-63a9e73563 { text-align:center;margin:0 auto;max-width:520px }
.u-641de2fbd9 { text-align:center }
.u-6d853e399f { max-width:540px }
.u-72cced6cfe { background:color-mix(in srgb, var(--signal-1) 12%, transparent);color:var(--rest-text) }
.u-7343c47d02 { background:color-mix(in srgb, var(--signal-1) 12%, transparent) }
.u-74389a03dc { background:color-mix(in srgb, var(--contrast-base) 20%, transparent) }
.u-8492347f43 { background:var(--hero-dark) }
.u-8cfadce078 { max-width:560px }
.u-900c009ca2 { background:var(--hero-dark) }
.u-948617f418 { margin-bottom:20px }

.u-968e0ae0b2 { text-align:center;margin:0 auto;max-width:500px }
.u-9a3b721bd3 { text-align:center;margin:0 auto }
.u-a561702488 { background:color-mix(in srgb, var(--hero) 15%, transparent) }
.u-a7ac7eb214 { margin-top:24px }
.u-a7e0b24ae1 { max-width:580px }
.u-ab98ed9e1c { background:color-mix(in srgb, var(--contrast-base) 18%, transparent) }
.u-af5ac1e89a { margin:16px auto 0;text-align:center }
.u-b653d8016d { background:color-mix(in srgb, var(--hero) 18%, transparent);color:var(--hero-on-surface) }
.u-ba004e03e1 { background:var(--rest); color:var(--on-signal-1) }
.u-c14d360651 { background:color-mix(in srgb, var(--hero) 12%, transparent);color:var(--hero-on-surface) }
.u-c7659b1d1f { margin-top:16px }
.u-ce37f9dbd3 { text-align:center;margin:0 auto 0;max-width:500px }
.u-d027e71f5c { color:var(--muted) }
.u-d602abe391 { background:var(--secondary-dark) }
.u-df27150531 { background:var(--peak-dk) }
.u-ed2a19cba3 { background:var(--peak) }
.u-ef349f5b46 { background:var(--flow); color:var(--on-secondary) }
.u-f137f8df6e { font-family:var(--font-mono);font-size:11px;color:var(--subtle-text);padding-left:8px }

/* SVG paint and typography are theme-owned here, not in page markup. */
.svg-00e029fb1d { fill: var(--hero) }
.svg-00f5e6b01e { fill: color-mix(in srgb, var(--background-elevated) 40%, transparent) }
.svg-03bc5e2652 { fill: color-mix(in srgb, var(--hero) 10%, transparent) }
.svg-03d1b26dee { fill: color-mix(in srgb, var(--signal-4) 70%, transparent) }
.svg-061cf08769 { stroke: color-mix(in srgb, var(--secondary) 40%, transparent) }
.svg-0a3b6d7c76 { fill: color-mix(in srgb, var(--background-primary) 60%, transparent) }
.svg-1f2a420058 { fill: color-mix(in srgb, var(--signal-1) 15%, transparent) }
.svg-270a4cbbcf { fill: var(--hero) }
.svg-31d7352749 { fill: color-mix(in srgb, var(--signal-1) 8%, transparent) }
.svg-35ef2991f4 { fill: color-mix(in srgb, var(--signal-1) 7%, transparent) }
.svg-427d93f9aa { stroke: color-mix(in srgb, var(--contrast-base) 18%, transparent) }
.svg-4412e16478 { stroke: color-mix(in srgb, var(--signal-1) 35%, transparent) }
.svg-484f45a09b { fill: color-mix(in srgb, var(--hero) 50%, transparent) }
.svg-48630c89f9 { fill: color-mix(in srgb, var(--hero) 60%, transparent) }
.svg-4f60c1d7cf { stroke: var(--secondary) }
.svg-511d9ac843 { fill: var(--text-on-accent) }
.svg-530b60a9c5 { font-family: var(--font-mono) }
.svg-593585893b { fill: color-mix(in srgb, var(--signal-1) 10%, transparent) }
.svg-5d99351b9c { stroke: var(--hero) }
.svg-612f2945c5 { fill: var(--signal-1) }
.svg-6352e4c75e { stroke: var(--text-on-accent) }
.svg-69a8f864c4 { fill: color-mix(in srgb, var(--contrast-base) 30%, transparent) }
.svg-6e5d82ff69 { fill: color-mix(in srgb, var(--secondary) 30%, transparent) }
.svg-70bcb65e9e { font-size: 8 }
.svg-804c513ed3 { stroke: color-mix(in srgb, var(--hero) 35%, transparent) }
.svg-8baa62158b { stroke: color-mix(in srgb, var(--contrast-base) 12%, transparent) }
.svg-8f79633743 { stop-color: var(--hero) }
.svg-916e7ded97 { stroke: color-mix(in srgb, var(--secondary) 60%, transparent) }
.svg-97b0de8578 { fill: var(--secondary) }
.svg-9ecb251f30 { fill: color-mix(in srgb, var(--signal-1) 30%, transparent) }
.svg-a246125855 { fill: color-mix(in srgb, var(--background-primary) 45%, transparent) }
.svg-a2d68c3bd7 { stroke: var(--signal-4) }
.svg-b227d67b07 { fill: color-mix(in srgb, var(--signal-4) 50%, transparent) }
.svg-b73b58ce05 { fill: color-mix(in srgb, var(--background-elevated) 28%, transparent) }
.svg-c4f4031d84 { fill: var(--background-primary) }
.svg-d52f98d9c5 { fill: color-mix(in srgb, var(--hero) 40%, transparent) }
.svg-d58b187803 { fill: var(--background-elevated) }
.svg-d8823bf598 { fill: color-mix(in srgb, var(--signal-4) 30%, transparent) }
.svg-d936b2ced2 { stop-color: var(--secondary) }
.svg-deda68c615 { stroke: var(--signal-1) }
.svg-e1d9d344a4 { stroke: color-mix(in srgb, var(--secondary) 55%, transparent) }
.svg-e2aa3c85ff { font-size: 9 }
.svg-e516f84fc2 { fill: color-mix(in srgb, var(--secondary) 15%, transparent) }
.svg-e96937d6b2 { stroke: color-mix(in srgb, var(--hero) 30%, transparent) }

/* Runtime state classes keep behavioral styling out of page scripts. */
.is-hidden { display: none !important; }
.is-flex { display: flex !important; }
.is-block { display: block !important; }
.is-invisible { visibility: hidden !important; }
.reveal-pending {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-pending.reveal-visible { opacity: 1; transform: translateY(0); }
.price-changing { opacity: 0; transition: opacity 0.15s; }
.is-invalid { border-color: color-mix(in srgb, var(--error) 60%, transparent) !important; }
.password-strength-1 { background: var(--signal-5) !important; }
.password-strength-2 { background: var(--signal-3) !important; }
.password-strength-3 { background: var(--hero) !important; }
.password-strength-4 { background: var(--signal-1) !important; }
.password-strength-empty { background: var(--rule) !important; }
.spinner { animation: spin-connect 0.8s linear infinite; }
.svg-stroke-muted { stroke: color-mix(in srgb, var(--contrast-base) 30%, transparent); }
.svg-stroke-on-accent { stroke: var(--text-on-accent); }
.svg-stroke-signal-1 { stroke: var(--signal-1); }
.svg-stroke-signal-4 { stroke: var(--signal-4); }
.site-header-slot { height: 0; overflow: visible; }
body.nav-locked { overflow: hidden; }

/* Shared footer component */



footer {
  background: var(--ink2);
  border-top: 1px solid var(--rule);
  padding: 60px 48px 40px;
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 280px;
}

.footer-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 0;
}

.brand-icon {
  display: inline-block;
  flex: 0 0 auto;
  background: var(--hero-on-surface);
  -webkit-mask: url('/upwell-icon.svg') center / contain no-repeat;
  mask: url('/upwell-icon.svg') center / contain no-repeat;
}

.footer-brand-icon {
  width: 30px;
  height: 28px;
}

.compact-brand-icon {
  width: 26px;
  height: 24px;
}

.footer-wordmark {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}
.footer-wordmark span { color: var(--hero-on-surface); }

.footer-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  font-family: var(--font-mono);
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--text-primary); }

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--subtle-text);
  letter-spacing: 0.04em;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--subtle-text);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--text-primary); }

@media (max-width: 768px) {
  footer { padding: 40px 20px 32px; }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}


/* Shared header component */



nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 48px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--background-deep) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-mark { width: 36px; height: 36px; }

.nav-wordmark {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}
.nav-wordmark span { color: var(--hero-on-surface); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text-primary); }

.nav-cta {
  background: var(--peak);
  color: var(--text-on-accent) !important;
  padding: 8px 20px;
  border-radius: 100px;
  font-weight: 600 !important;
  font-size: 13px;
  transition: opacity 0.2s !important;
}
.nav-cta:hover { opacity: 0.88; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--text-on-accent);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease;
  transform-origin: center;
}
.nav-burger span:nth-child(3) { width: 60%; margin-left: auto; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed;
  /* Use 100dvh so the drawer fills the true visible viewport on mobile browsers,
     accounting for the address bar and bottom chrome on Android/iOS */
  top: 0; left: 0; right: 0;
  height: 100dvh;
  background: color-mix(in srgb, var(--background-deep) 97%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 98;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 100px 24px 32px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  font-family: var(--font-display);
  overflow-y: auto;
}
/* Explicitly set display:flex on open state so Android browsers don't
   collapse the drawer to content height when toggling visibility */
.nav-drawer.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.nav-drawer a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 26px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: -0.03em;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s;
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover,
.nav-drawer a:focus { color: var(--text-primary); }
.nav-drawer .drawer-cta {
  margin-top: 28px;
  background: var(--peak);
  color: var(--text-on-accent) !important;
  border-radius: 100px;
  padding: 18px 48px !important;
  font-size: 18px !important;
  border-bottom: none !important;
  width: auto !important;
}

@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-drawer { display: flex; }
}


/* 404.html */


body.page-404, body.page-404 *,.page-404 *::before,.page-404 *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-404{ scroll-behavior: smooth; }

body.page-404{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.page-404 .accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-404 .bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page-404 .bg-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, var(--text-on-accent) 10%, transparent 100%);
}

.page-404 .bg-glow-a{
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 7%, transparent) 0%, transparent 70%);
  top: -10%; right: -15%;
  animation: drift-404 10s ease-in-out infinite;
}

.page-404 .bg-glow-b{
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 7%, transparent) 0%, transparent 70%);
  bottom: 5%; left: -10%;
  animation: drift-404 13s ease-in-out infinite 3s reverse;
}

@keyframes drift-404 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-30px) scale(1.08); }
}

.page-404 main{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vw, 100px) clamp(24px, 6vw, 80px) clamp(60px, 8vw, 80px);
  text-align: center;
}

.page-404 .mark-wrap{
  margin-bottom: clamp(28px, 5vw, 44px);
  animation: fade-up-404 0.8s ease both;
}

.page-404 .mark{
  width: clamp(56px, 9vw, 72px);
  height: clamp(56px, 9vw, 72px);
  margin: 0 auto;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--hero) 35%, transparent));
}

.page-404 .status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-404 0.8s ease 0.1s both;
}

.page-404 .pill-404{
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  color: var(--hero-on-surface);
  opacity: 0.7;
}

.page-404 h1{
  font-size: clamp(40px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(16px, 3vw, 24px);
  animation: fade-up-404 0.8s ease 0.15s both;
}

.page-404 h1 .c-peak{ color: var(--hero-on-surface); }
.page-404 h1 .c-flow{ color: var(--flow-text); }

.page-404 .sub{
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 420px;
  margin: 0 auto clamp(32px, 6vw, 48px);
  animation: fade-up-404 0.8s ease 0.22s both;
}

.page-404 .actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  animation: fade-up-404 0.8s ease 0.3s both;
}

.page-404 .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.page-404 .btn-primary:hover{ opacity: 0.88; transform: translateY(-1px); }

.page-404 .btn-ghost{
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.page-404 .btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 25%, transparent); color: var(--text-secondary); }

@keyframes fade-up-404 {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-404 footer{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 6vw, 60px);
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
}

.page-404 .footer-logo{
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-404 .footer-wordmark{
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.page-404 .footer-wordmark em{
  font-style: normal;
  color: var(--hero-on-surface);
}

.page-404 .footer-copy{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .page-404 footer{ flex-direction: column; gap: 10px; text-align: center; }
  .page-404 .actions{ flex-direction: column; align-items: center; }
  .page-404 .btn-primary,.page-404 .btn-ghost{ width: 100%; justify-content: center; }
}



/* comingsoon.html */


body.page-comingsoon, body.page-comingsoon *,.page-comingsoon *::before,.page-comingsoon *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-comingsoon{ scroll-behavior: smooth; }

body.page-comingsoon{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.page-comingsoon /* ── ACCENT BAR ── */
.accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-comingsoon /* ── BACKGROUND ── */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page-comingsoon .bg-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, var(--text-on-accent) 10%, transparent 100%);
}

.page-comingsoon .bg-glow-a{
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 9%, transparent) 0%, transparent 70%);
  top: -10%; right: -15%;
  animation: drift-comingsoon 10s ease-in-out infinite;
}

.page-comingsoon .bg-glow-b{
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 7%, transparent) 0%, transparent 70%);
  bottom: 5%; left: -10%;
  animation: drift-comingsoon 13s ease-in-out infinite 3s reverse;
}

.page-comingsoon .bg-glow-c{
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal-1) 6%, transparent) 0%, transparent 70%);
  bottom: 30%; right: 15%;
  animation: drift-comingsoon 9s ease-in-out infinite 6s;
}

@keyframes drift-comingsoon {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-30px) scale(1.08); }
}

.page-comingsoon /* ── WAVE ── */
.bg-wave{
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 45%;
}

.page-comingsoon /* ── LAYOUT ── */
main{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vw, 100px) clamp(24px, 6vw, 80px) clamp(60px, 8vw, 80px);
  text-align: center;
}

.page-comingsoon /* ── MARK ── */
.mark-wrap{
  margin-bottom: clamp(28px, 5vw, 44px);
  animation: fade-up-comingsoon 0.8s ease both;
}

.page-comingsoon .mark{
  width: clamp(56px, 9vw, 72px);
  height: clamp(56px, 9vw, 72px);
  margin: 0 auto;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--hero) 35%, transparent));
}

.page-comingsoon /* ── STATUS PILL ── */
.status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rest-text);
  background: color-mix(in srgb, var(--signal-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 25%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-comingsoon 0.8s ease 0.1s both;
}

.page-comingsoon .pill-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rest);
  animation: pulse-dot-comingsoon 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot-comingsoon {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

.page-comingsoon /* ── HEADLINE ── */
h1{
  font-size: clamp(40px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(16px, 3vw, 24px);
  animation: fade-up-comingsoon 0.8s ease 0.15s both;
}

.page-comingsoon h1 .c-peak{ color: var(--hero-on-surface); }
.page-comingsoon h1 .c-flow{ color: var(--flow-text); }

.page-comingsoon /* ── SUBHEAD ── */
.sub{
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto clamp(32px, 6vw, 52px);
  animation: fade-up-comingsoon 0.8s ease 0.22s both;
}

.page-comingsoon /* ── EMAIL FORM ── */
.form-wrap{
  width: 100%;
  max-width: 420px;
  margin: 0 auto clamp(36px, 6vw, 56px);
  animation: fade-up-comingsoon 0.8s ease 0.3s both;
}

.page-comingsoon .form-label{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
  text-align: left;
}

.page-comingsoon .form-row{
  display: flex;
  gap: 8px;
}

.page-comingsoon .form-input{
  flex: 1;
  height: 48px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--contrast-base) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--contrast-base) 12%, transparent);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}

.page-comingsoon .form-input::placeholder{ color: var(--subtle-text); }

.page-comingsoon .form-input:focus{
  border-color: color-mix(in srgb, var(--hero) 50%, transparent);
  background: color-mix(in srgb, var(--hero) 6%, transparent);
}

.page-comingsoon .form-btn{
  height: 48px;
  padding: 0 22px;
  background: var(--peak);
  color: var(--text-on-accent);
  border: none;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.page-comingsoon .form-btn:hover{ opacity: 0.88; transform: translateY(-1px); }
.page-comingsoon .form-btn:active{ transform: scale(0.97); }

.page-comingsoon .form-note{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--subtle-text);
  letter-spacing: 0.06em;
  margin-top: 10px;
  text-align: left;
}

.page-comingsoon .form-success{
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 300;
  color: var(--rest-text);
  letter-spacing: 0.06em;
  margin-top: 12px;
}

.page-comingsoon .form-success.visible{ display: flex; }

.page-comingsoon /* ── CHIPS ── */
.chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(40px, 7vw, 64px);
  animation: fade-up-comingsoon 0.8s ease 0.38s both;
}

.page-comingsoon .chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.8vw, 11px);
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 5px 13px;
  border-radius: 100px;
}

.page-comingsoon .chip-dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.page-comingsoon .chip-peak{ background: color-mix(in srgb, var(--hero) 12%, transparent);  color: var(--hero-on-surface); }
.page-comingsoon .chip-flow{ background: color-mix(in srgb, var(--secondary) 12%, transparent); color: var(--flow-text); }
.page-comingsoon .chip-rest{ background: color-mix(in srgb, var(--signal-1) 12%, transparent);  color: var(--rest-text); }
.page-comingsoon .chip-load{ background: color-mix(in srgb, var(--signal-4) 12%, transparent);  color: var(--warn-text); }

.page-comingsoon /* ── WAVE PREVIEW ── */
.wave-preview{
  width: 100%;
  max-width: 680px;
  background: var(--ink2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  animation: fade-up-comingsoon 0.8s ease 0.46s both;
}

.page-comingsoon .wave-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--rule);
}

.page-comingsoon .wave-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-comingsoon .wave-now{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--hero-on-surface);
}

.page-comingsoon .wave-body{ padding: 0 0 0; }

.page-comingsoon .wave-labels{
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0;
  overflow: hidden;
}

.page-comingsoon .wave-labels span{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}

.page-comingsoon .wave-svg{ width: 100%; height: clamp(70px, 12vw, 100px); display: block; }

.page-comingsoon .wave-legend{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3vw, 24px);
  padding: 10px 20px 14px;
  border-top: 1px solid var(--rule);
}

.page-comingsoon .legend-item{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  font-weight: 300;
  white-space: nowrap;
}

.page-comingsoon .legend-dot{ width: 7px; height: 7px; border-radius: 50%; }

.page-comingsoon /* ── FOOTER ── */
footer{
  position: relative;
  z-index: 1;
  padding: 20px clamp(24px, 6vw, 80px) max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.page-comingsoon .footer-logo{
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-comingsoon .footer-wordmark{
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.page-comingsoon .footer-wordmark em{ color: var(--hero-on-surface); font-style: normal; }

.page-comingsoon .footer-copy{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--subtle-text);
  letter-spacing: 0.06em;
}

/* ── ANIMATIONS ── */
@keyframes fade-up-comingsoon {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE ── */
@media (max-width: 520px) {
  .page-comingsoon .form-row{ flex-direction: column; }
  .page-comingsoon .form-btn{ width: 100%; }
  .page-comingsoon .wave-labels span:nth-child(2),.page-comingsoon .wave-labels span:nth-child(4),.page-comingsoon .wave-labels span:nth-child(6){ display: none; }
}



/* confirm.html */

body.page-confirm, body.page-confirm *,.page-confirm *::before,.page-confirm *::after{ box-sizing: border-box; margin: 0; padding: 0; }

body.page-confirm{
  font-family: var(--font-display);
  background: var(--ink); color: var(--text-secondary);
  min-height: 100svh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.page-confirm .accent-bar{ height: 3px; background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%); }
.page-confirm .bg{ position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.page-confirm .bg-grid{
  position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}
.page-confirm .bg-glow{
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  top: -10%; left: 50%; transform: translateX(-50%);
  transition: background 0.5s;
}
.page-confirm .bg-glow.loading{ background: radial-gradient(circle, color-mix(in srgb, var(--hero) 8%, transparent) 0%, transparent 70%); }
.page-confirm .bg-glow.success{ background: radial-gradient(circle, color-mix(in srgb, var(--signal-1) 10%, transparent) 0%, transparent 70%); }
.page-confirm .bg-glow.error{ background: radial-gradient(circle, color-mix(in srgb, var(--signal-4) 8%, transparent) 0%, transparent 70%); }

.page-confirm main{
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px; text-align: center;
}

.page-confirm .icon-wrap{
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 32px; transition: all 0.4s;
  animation: fade-up-confirm 0.6s ease both;
}
.page-confirm .icon-wrap.loading{ background: color-mix(in srgb, var(--hero) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hero) 30%, transparent); }
.page-confirm .icon-wrap.success{ background: color-mix(in srgb, var(--signal-1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--signal-1) 30%, transparent); }
.page-confirm .icon-wrap.error{ background: color-mix(in srgb, var(--signal-4) 12%, transparent);  border: 1px solid color-mix(in srgb, var(--signal-4) 30%, transparent); }

.page-confirm .status-pill{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px; margin-bottom: 28px;
  animation: fade-up-confirm 0.6s ease 0.1s both; transition: all 0.4s;
}
.page-confirm .status-pill.loading{ color: var(--hero-on-surface); background: color-mix(in srgb, var(--hero) 10%, transparent); border: 1px solid color-mix(in srgb, var(--hero) 25%, transparent); }
.page-confirm .status-pill.success{ color: var(--rest-text); background: color-mix(in srgb, var(--signal-1) 10%, transparent); border: 1px solid color-mix(in srgb, var(--signal-1) 25%, transparent); }
.page-confirm .status-pill.error{ color: var(--load-text); background: color-mix(in srgb, var(--signal-4) 10%, transparent);  border: 1px solid color-mix(in srgb, var(--signal-4) 25%, transparent); }

.page-confirm .pill-dot{
  width: 6px; height: 6px; border-radius: 50%;
  animation: pulse-dot-confirm 2.4s ease-in-out infinite;
}
.page-confirm .loading .pill-dot{ background: var(--peak); }
.page-confirm .success .pill-dot{ background: var(--rest); animation: none; opacity: 1; }
.page-confirm .error   .pill-dot{ background: var(--load); animation: none; opacity: 1; }

@keyframes pulse-dot-confirm { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

.page-confirm h1{
  font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 16px;
  animation: fade-up-confirm 0.6s ease 0.15s both;
}
.page-confirm .c-peak{ color: var(--hero-on-surface); }
.page-confirm .c-rest{ color: var(--rest-text); }
.page-confirm .c-load{ color: var(--load-text); }

.page-confirm .sub{
  font-size: 15px; font-weight: 300; color: var(--muted);
  line-height: 1.7; max-width: 400px; margin: 0 auto 40px;
  animation: fade-up-confirm 0.6s ease 0.2s both;
}

.page-confirm .spinner{
  width: 32px; height: 32px;
  border: 2px solid color-mix(in srgb, var(--hero) 20%, transparent);
  border-top-color: var(--hero-on-surface);
  border-radius: 50%;
  animation: spin-confirm 0.8s linear infinite;
}
@keyframes spin-confirm { to { transform: rotate(360deg); } }

.page-confirm .btn-primary{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 36px; border-radius: 100px;
  background: var(--peak); color: var(--text-on-accent);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  animation: fade-up-confirm 0.6s ease 0.25s both;
}
.page-confirm .btn-primary:hover{ opacity: 0.88; transform: translateY(-1px); }

.page-confirm .btn-ghost{
  display: inline-flex; align-items: center; height: 46px; padding: 0 24px;
  border-radius: 100px; background: transparent; color: var(--muted);
  font-family: var(--font-display); font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent); cursor: pointer;
  text-decoration: none; transition: color 0.2s, border-color 0.2s;
  margin-top: 16px;
}
.page-confirm .btn-ghost:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 25%, transparent); }

@keyframes fade-up-confirm { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.page-confirm footer{
  position: relative; z-index: 1; background: var(--ink2);
  border-top: 1px solid var(--rule);
  padding: 20px 48px; display: flex; justify-content: space-between; align-items: center;
}
.page-confirm .footer-copy{ font-family: var(--font-mono); font-size: 11px; color: var(--subtle-text); letter-spacing: 0.04em; }
@media (max-width: 480px) { .page-confirm footer{ flex-direction: column; gap: 8px; } }


/* connect.html */

body.page-connect, body.page-connect *,.page-connect *::before,.page-connect *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-connect{ scroll-behavior: smooth; }

body.page-connect{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page-connect .accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-connect .bg{
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.page-connect .bg-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}
.page-connect .bg-glow-a{
  position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, var(--peak-glow) 0%, transparent 70%);
  top: -15%; left: 50%; transform: translateX(-50%);
}
.page-connect .bg-glow-b{
  position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, var(--flow-glow) 0%, transparent 70%);
  bottom: 5%; right: -10%;
}

.page-connect main{
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 140px 24px 80px;
  text-align: center;
}

.page-connect .logomark{
  width: 64px; height: 64px;
  margin: 0 auto 28px;
  animation: fade-up-connect 0.6s ease both;
}

.page-connect .pill{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  padding: 6px 16px; border-radius: 100px;
  margin-bottom: 28px;
  animation: fade-up-connect 0.6s ease 0.1s both;
}
.page-connect .pill-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--peak);
  animation: pulse-dot-connect 2.4s ease-in-out infinite;
}
@keyframes pulse-dot-connect { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

.page-connect h1{
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 20px;
  animation: fade-up-connect 0.6s ease 0.15s both;
}
.page-connect h1 .c-peak{ color: var(--hero-on-surface); }

.page-connect .sub{
  font-size: 16px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 48px;
  animation: fade-up-connect 0.6s ease 0.2s both;
}

.page-connect .form-card{
  width: 100%;
  max-width: 520px;
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 40px;
  margin: 0 auto 40px;
  animation: fade-up-connect 0.6s ease 0.25s both;
}

.page-connect .form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.page-connect .form-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.page-connect label{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-connect input[type="text"],.page-connect input[type="email"]{
  height: 48px;
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent);
  border-radius: 10px;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}
.page-connect input::placeholder{ color: var(--subtle-text); }
.page-connect input:focus{
  border-color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 6%, transparent);
}

.page-connect .email-group{ margin-top: 16px; }

.page-connect .btn-submit{
  width: 100%;
  height: 52px;
  margin-top: 24px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-connect .btn-submit:hover:not(:disabled){ opacity: 0.88; transform: translateY(-1px); }
.page-connect .btn-submit:disabled{ opacity: 0.5; cursor: not-allowed; }

.page-connect .success-state{
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.page-connect .success-icon{
  width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--signal-1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.page-connect .success-title{ font-size: 18px; font-weight: 700; color: var(--text-primary); }
.page-connect .success-sub{ font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.6; }

.page-connect .error-msg{
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--load-text);
  letter-spacing: 0.06em;
  margin-top: 12px;
  text-align: center;
}

.page-connect .divider{
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto 24px;
  animation: fade-up-connect 0.6s ease 0.3s both;
}
.page-connect .divider-line{ flex: 1; height: 1px; background: var(--rule); }
.page-connect .divider-text{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--subtle-text);
  white-space: nowrap;
}

.page-connect .social-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: fade-up-connect 0.6s ease 0.35s both;
}

.page-connect .social-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  color: var(--text-secondary);
  transition: background 0.2s, border-color 0.2s, transform 0.15s, color 0.2s;
}
.page-connect .social-btn:hover{ transform: translateY(-2px); }
.page-connect .social-btn.linkedin{ border-color: color-mix(in srgb, var(--hero) 40%, transparent); }
.page-connect .social-btn.linkedin:hover{ background: color-mix(in srgb, var(--hero) 12%, transparent); border-color: color-mix(in srgb, var(--hero) 70%, transparent); color: var(--text-primary); }
.page-connect .social-btn.facebook{ border-color: color-mix(in srgb, var(--hero) 40%, transparent); }
.page-connect .social-btn.facebook:hover{ background: color-mix(in srgb, var(--hero) 12%, transparent); border-color: color-mix(in srgb, var(--hero) 70%, transparent); color: var(--text-primary); }


@keyframes fade-up-connect {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin-connect { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .page-connect .form-row{ grid-template-columns: 1fr; }
  .page-connect .form-card{ padding: 28px 20px; }
  .page-connect .social-row{ flex-direction: column; width: 100%; max-width: 520px; }
  .page-connect .social-btn{ width: 100%; justify-content: center; }
}


/* families.html */

body.page-families, body.page-families *,.page-families *::before,.page-families *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-families{ scroll-behavior: smooth; overflow-x: hidden; }

body.page-families{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page-families ::-webkit-scrollbar{ width: 4px; }
.page-families ::-webkit-scrollbar-track{ background: var(--ink2); }
.page-families ::-webkit-scrollbar-thumb{ background: var(--flow); border-radius: 2px; }

.page-families .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--flow);
  color: var(--on-secondary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.page-families .btn-primary:hover{ transform: translateY(-2px); opacity: 0.9; }

.page-families .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 12%, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.page-families .btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 30%, transparent); color: var(--text-primary); }

@keyframes fade-up-families {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-families section{ padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 48px); }

.page-families .section-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--flow-text);
  margin-bottom: 16px;
}

.page-families .section-h2{
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.page-families .section-lead{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
}

.page-families /* ── HERO ── */
.hero{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 14vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 80px);
  position: relative;
  overflow: hidden;
}

.page-families .hero-bg{ position: absolute; inset: 0; overflow: hidden; }

.page-families .hero-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--secondary) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}

.page-families .hero-glow-a{
  position: absolute;
  width: clamp(300px, 50vw, 600px); height: clamp(300px, 50vw, 600px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 12%, transparent) 0%, transparent 70%);
  top: 10%; right: -100px;
  animation: pulse-glow-families 6s ease-in-out infinite;
}
.page-families .hero-glow-b{
  position: absolute;
  width: clamp(200px, 35vw, 400px); height: clamp(200px, 35vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 10%, transparent) 0%, transparent 70%);
  top: 30%; left: 5%;
  animation: pulse-glow-families 8s ease-in-out infinite 2s;
}

@keyframes pulse-glow-families {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

.page-families .hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  width: 100%;
}

.page-families .hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flow-text);
  background: color-mix(in srgb, var(--secondary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 25%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-families 0.8s ease both;
}
.page-families .hero-eyebrow::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--flow);
  animation: blink-families 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink-families { 0%,100%{opacity:1} 50%{opacity:0.3} }

.page-families .hero-h1{
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(20px, 3vw, 28px);
  animation: fade-up-families 0.8s ease 0.1s both;
}
.page-families .hero-h1 .accent{ color: var(--flow-text); }
.page-families .hero-h1 .accent-peak{ color: var(--hero-on-surface); }

.page-families .hero-sub{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vw, 44px);
  animation: fade-up-families 0.8s ease 0.2s both;
}

.page-families .hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  animation: fade-up-families 0.8s ease 0.3s both;
}

.page-families .status-bar{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(28px, 4vw, 40px);
}
.page-families .status-chip{
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.4vw, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-families .status-chip::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.page-families .chip-flow{ background: color-mix(in srgb, var(--secondary) 12%, transparent);  color: var(--flow-text); }
.page-families .chip-flow::before{ background: var(--flow); }
.page-families .chip-peak{ background: color-mix(in srgb, var(--hero) 12%, transparent);  color: var(--hero-on-surface); }
.page-families .chip-peak::before{ background: var(--peak); }
.page-families .chip-rest{ background: color-mix(in srgb, var(--signal-1) 12%, transparent);  color: var(--rest-text); }
.page-families .chip-rest::before{ background: var(--rest); }
.page-families .chip-load{ background: color-mix(in srgb, var(--signal-4) 12%, transparent);  color: var(--warn-text); }
.page-families .chip-load::before{ background: var(--load); }

.page-families /* ── MARQUEE ── */
.feat-strip{
  display: flex;
  overflow: hidden;
  background: var(--ink3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.page-families .feat-strip-inner{
  display: flex;
  animation: marquee-families 30s linear infinite;
  white-space: nowrap;
}
@keyframes marquee-families { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.page-families .strip-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 36px;
  border-right: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.page-families .strip-item .dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.page-families /* ── HOW IT WORKS ── */
.hiw{
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  padding: 0;
}
.page-families .hiw-left{
  padding: clamp(48px,8vw,100px) clamp(24px,5vw,64px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-families .hiw-right{
  padding: clamp(40px,6vw,60px) clamp(24px,5vw,48px);
  display: flex;
  flex-direction: column;
}
.page-families .hiw-step{
  padding: clamp(20px,3vw,28px) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  cursor: pointer;
}
.page-families .hiw-step:first-child{ padding-top: 0; }
.page-families .hiw-step:last-child{ border-bottom: none; }
.page-families .hiw-step.active .step-num{ background: var(--flow); color: var(--on-secondary); }
.page-families .hiw-step.active .step-title{ color: var(--text-primary); }
.page-families .step-num{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.page-families .step-title{
  font-size: clamp(14px,2vw,16px);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.page-families .step-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.65;
}

.page-families /* ── FEATURES ── */
.features{ background: var(--ink2); }
.page-families .features-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: clamp(40px,6vw,64px);
}
.page-families .feat-card{
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,32px);
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.page-families .feat-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.page-families .feat-card:hover{ border-color: color-mix(in srgb, var(--contrast-base) 14%, transparent); transform: translateY(-4px); }
.page-families .feat-card:hover::before{ opacity: 1; }
.page-families .feat-card.flow::before{ background: var(--flow); }
.page-families .feat-card.peak::before{ background: var(--peak); }
.page-families .feat-card.rest::before{ background: var(--rest); }
.page-families .feat-icon{
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.page-families .feat-icon.flow{ background: var(--flow-glow); }
.page-families .feat-icon.peak{ background: var(--peak-glow); }
.page-families .feat-icon.rest{ background: var(--rest-glow); }
.page-families .feat-title{
  font-size: clamp(14px,2vw,17px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.page-families .feat-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
}

.page-families /* ── SOCIAL PROOF ── */
.social{ background: var(--ink); text-align: center; }
.page-families .stats-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(40px,6vw,64px);
}
.page-families .stat-cell{
  background: var(--ink2);
  padding: clamp(24px,4vw,40px) clamp(16px,3vw,24px);
  text-align: center;
  min-width: 0;
}
.page-families .stat-num{
  font-size: clamp(28px,5vw,42px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.page-families .stat-num span{ color: var(--flow-text); }
.page-families .stat-label{
  font-size: clamp(10px,1.5vw,12px);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.page-families .quotes-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 48px;
}
.page-families .quote-card{
  background: var(--ink2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,28px);
  text-align: left;
  min-width: 0;
}
.page-families .quote-text{
  font-size: clamp(12px,1.8vw,14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}
.page-families .quote-meta{ display: flex; align-items: center; gap: 12px; }
.page-families .quote-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-on-accent);
  flex-shrink: 0;
}
.page-families .quote-name{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
.page-families .quote-role{ font-size: 11px; color: var(--muted); margin-top: 1px; }

.page-families /* ── PLAN CARD ── */
.plan-section{ background: var(--ink2); text-align: center; }
.page-families .plan-card{
  max-width: 440px;
  margin: clamp(40px,6vw,64px) auto 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--secondary) 8%, transparent) 0%, var(--ink) 60%);
  border: 1px solid var(--flow);
  border-radius: var(--r-lg);
  padding: clamp(28px,4vw,44px);
  text-align: left;
}
.page-families .plan-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  color: var(--flow-text);
  margin-bottom: 20px;
}
.page-families .plan-name{
  font-size: clamp(22px,3vw,28px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.page-families .plan-price{
  font-size: clamp(36px,5vw,48px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin: 16px 0 4px;
}
.page-families .plan-price span{ font-size: 16px; font-weight: 400; color: var(--muted); }
.page-families .plan-note{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rest-text);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.page-families .plan-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.6;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.page-families .plan-feature{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 7px 0;
}
.page-families .plan-check{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--secondary) 15%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-families .plan-btn{
  display: block;
  text-align: center;
  margin-top: 28px;
  padding: 14px;
  border-radius: 100px;
  background: var(--flow);
  color: var(--on-secondary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.page-families .plan-btn:hover{ opacity: 0.88; transform: translateY(-1px); }

.page-families /* ── CTA ── */
.cta-section{
  background: var(--ink);
  padding: clamp(80px,10vw,120px) clamp(20px,5vw,48px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-families .cta-glow{
  position: absolute;
  width: min(800px,100%); height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--secondary) 10%, transparent) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.page-families .cta-h2{
  font-size: clamp(32px,5vw,66px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
  position: relative;
}
.page-families .cta-h2 .accent{ color: var(--flow-text); }
.page-families .cta-sub{
  font-size: clamp(14px,2vw,17px);
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 44px;
  position: relative;
}
.page-families .cta-btns{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── BREAKPOINTS ── */
@media screen and (max-width: 768px) {
  .page-families section{ max-width: 100vw; box-sizing: border-box; }
  .page-families .hiw{ grid-template-columns: minmax(0,1fr) !important; }
  .page-families .hiw-left{ border-right: none; border-bottom: 1px solid var(--rule); padding: clamp(40px,6vw,60px) clamp(20px,5vw,40px); }
  .page-families .hiw-right{ padding: clamp(32px,5vw,48px) clamp(20px,5vw,40px); }
  .page-families .features-grid{ grid-template-columns: minmax(0,1fr) !important; }
  .page-families .stats-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .page-families .stat-cell{ padding: 24px 16px; }
  .page-families .quotes-row{ grid-template-columns: minmax(0,1fr) !important; }
}

@media screen and (max-width: 480px) {
  .page-families .hero-actions{ flex-direction: column; align-items: stretch; }
  .page-families .hero-actions .btn-primary,.page-families .hero-actions .btn-ghost{ justify-content: center; width: 100%; }
  .page-families .stat-cell{ padding: 18px 10px; }
  .page-families .stat-num{ font-size: 28px; }
  .page-families .cta-btns{ flex-direction: column; align-items: stretch; }
  .page-families .cta-btns .btn-primary,.page-families .cta-btns .btn-ghost{ justify-content: center; width: 100%; }
}


/* home.html */

.page-home /* ── RESET & TOKENS ── */
*,.page-home *::before,.page-home *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-home{
  scroll-behavior: smooth;
  overflow-x: hidden; /* prevent horizontal scroll at document level */
}

body.page-home{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page-home /* ── SCROLLBAR ── */
::-webkit-scrollbar{ width: 4px; }
.page-home ::-webkit-scrollbar-track{ background: var(--ink2); }
.page-home ::-webkit-scrollbar-thumb{ background: var(--peak); border-radius: 2px; }

.page-home /* ── SHARED BUTTONS ── */
.btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.page-home .btn-primary:hover{ transform: translateY(-2px); opacity: 0.9; }

.page-home .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 12%, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.page-home .btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 30%, transparent); color: var(--text-primary); }

@keyframes fade-up-home {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-home /* ── SECTION SHARED ── */
section{
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 48px);
}

.page-home .section-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  margin-bottom: 16px;
}

.page-home .section-h2{
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.page-home .section-lead{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
}

.page-home /* ── HERO ── */
.hero{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 14vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 80px);
  position: relative;
  overflow: hidden;
}

.page-home .hero-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-home .wave-canvas{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
}

.page-home .hero-glow-peak{
  position: absolute;
  width: clamp(300px, 50vw, 600px);
  height: clamp(300px, 50vw, 600px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 12%, transparent) 0%, transparent 70%);
  top: 10%;
  right: -100px;
  animation: pulse-glow-home 6s ease-in-out infinite;
}
.page-home .hero-glow-flow{
  position: absolute;
  width: clamp(200px, 35vw, 400px);
  height: clamp(200px, 35vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 10%, transparent) 0%, transparent 70%);
  top: 30%;
  left: 5%;
  animation: pulse-glow-home 8s ease-in-out infinite 2s;
}

@keyframes pulse-glow-home {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

.page-home .hero-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}

.page-home .hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  width: 100%;
}

.page-home .hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 25%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-home 0.8s ease both;
}
.page-home .hero-eyebrow::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--peak);
  animation: blink-home 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink-home { 0%,100%{opacity:1} 50%{opacity:0.3} }

.page-home .hero-h1{
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(20px, 3vw, 28px);
  animation: fade-up-home 0.8s ease 0.1s both;
}
.page-home .hero-h1 .accent{ color: var(--hero-on-surface); }
.page-home .hero-h1 .accent-flow{ color: var(--flow-text); }

.page-home .hero-sub{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vw, 44px);
  animation: fade-up-home 0.8s ease 0.2s both;
}

.page-home .hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: fade-up-home 0.8s ease 0.3s both;
  flex-wrap: wrap;
}

.page-home /* ── STATUS CHIPS ── */
.status-bar{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(28px, 4vw, 40px);
}
.page-home .status-chip{
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.4vw, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-home .status-chip::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-home .chip-peak{ background: color-mix(in srgb, var(--hero) 12%, transparent);  color: var(--hero-on-surface); }
.page-home .chip-peak::before{ background: var(--peak); }
.page-home .chip-flow{ background: color-mix(in srgb, var(--secondary) 12%, transparent);  color: var(--flow-text); }
.page-home .chip-flow::before{ background: var(--flow); }
.page-home .chip-rest{ background: color-mix(in srgb, var(--signal-1) 12%, transparent);  color: var(--rest-text); }
.page-home .chip-rest::before{ background: var(--rest); }
.page-home .chip-load{ background: color-mix(in srgb, var(--signal-4) 12%, transparent);  color: var(--warn-text); }
.page-home .chip-load::before{ background: var(--load); }

.page-home /* ── MARQUEE STRIP ── */
.feat-strip{
  display: flex;
  overflow: hidden;
  background: var(--ink3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.page-home .feat-strip-inner{
  display: flex;
  gap: 0;
  animation: marquee-home 28s linear infinite;
  white-space: nowrap;
}
@keyframes marquee-home {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.page-home .strip-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 36px;
  border-right: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.page-home .strip-item .dot{
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}

.page-home /* ── LIVE WAVE STRIP ── */
.wave-strip{
  position: relative;
  background: var(--ink2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0;
  overflow: hidden;
}

.page-home .wave-labels{
  display: flex;
  justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 48px) 0;
  flex-wrap: wrap;
  gap: 4px;
}
.page-home .wave-label{
  font-family: var(--font-mono);
  font-size: clamp(8px, 1.2vw, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-home .wave-chart{
  width: 100%;
  height: clamp(80px, 12vw, 120px);
  display: block;
}

.page-home .wave-legend{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 28px);
  padding: 12px clamp(16px, 4vw, 48px) 16px;
}
.page-home .legend-item{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(9px, 1.4vw, 11px);
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 300;
  letter-spacing: 0.06em;
}
.page-home .legend-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-home /* ── HOW IT WORKS ── */
.hiw{
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.page-home .hiw-left{
  padding: clamp(48px, 8vw, 100px) clamp(24px, 5vw, 64px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-home .hiw-right{
  padding: clamp(40px, 6vw, 60px) clamp(24px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-home .hiw-step{
  padding: clamp(20px, 3vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.page-home .hiw-step:first-child{ padding-top: 0; }
.page-home .hiw-step:last-child{ border-bottom: none; }
.page-home .hiw-step.active .step-num{ background: var(--peak); color: var(--text-on-accent); }
.page-home .hiw-step.active .step-title{ color: var(--text-primary); }

.page-home .step-num{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}

.page-home .step-title{
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.page-home .step-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.65;
}

.page-home /* ── FEATURES GRID ── */
.features{
  background: var(--ink2);
}

.page-home .features-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 6vw, 64px);
}

.page-home .feat-card{
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}
.page-home .feat-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.page-home .feat-card:hover{ border-color: color-mix(in srgb, var(--contrast-base) 14%, transparent); transform: translateY(-4px); }
.page-home .feat-card:hover::before{ opacity: 1; }

.page-home .feat-card.peak::before{ background: var(--peak); }
.page-home .feat-card.flow::before{ background: var(--flow); }
.page-home .feat-card.rest::before{ background: var(--rest); }
.page-home .feat-card.load::before{ background: var(--load); }
.page-home .feat-card.b2b::before{ background: var(--peak); }
.page-home .feat-card.fam::before{ background: var(--flow); }

.page-home .feat-icon{
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 20px;
  flex-shrink: 0;
}
.page-home .feat-icon.peak{ background: var(--peak-glow); }
.page-home .feat-icon.flow{ background: var(--flow-glow); }
.page-home .feat-icon.rest{ background: var(--rest-glow); }
.page-home .feat-icon.load{ background: color-mix(in srgb, var(--signal-4) 15%, transparent); }
.page-home .feat-icon.b2b{ background: var(--peak-glow); }
.page-home .feat-icon.fam{ background: var(--flow-glow); }

.page-home .feat-title{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.page-home .feat-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
}

.page-home /* ── SOCIAL PROOF ── */
.social{
  background: var(--ink);
  text-align: center;
}

.page-home .stats-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(40px, 6vw, 64px);
}
.page-home .stat-cell{
  background: var(--ink2);
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 24px);
  text-align: center;
}
.page-home .stat-num{
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.page-home .stat-num span{ color: var(--hero-on-surface); }
.page-home .stat-label{
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.page-home .quotes-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.page-home .quote-card{
  background: var(--ink2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 28px);
  text-align: left;
}
.page-home .quote-text{
  font-size: clamp(12px, 1.8vw, 14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}
.page-home .quote-meta{
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-home .quote-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-on-accent);
  flex-shrink: 0;
}
.page-home .quote-name{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
.page-home .quote-role{ font-size: 11px; color: var(--muted); margin-top: 1px; }

.page-home /* ── TIERS ── */
.tiers{
  background: var(--ink2);
  text-align: center;
}
.page-home .tiers-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 6vw, 64px);
  text-align: left;
}
.page-home .tier-card{
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rule);
  background: var(--ink);
  position: relative;
  transition: transform 0.3s;
}
.page-home .tier-card:hover{ transform: translateY(-4px); }
.page-home .tier-card.featured{
  border-color: var(--hero-on-surface);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hero) 8%, transparent) 0%, var(--ink) 60%);
}

.page-home .tier-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.page-home .tier-name{
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.page-home .tier-price{
  font-size: clamp(32px, 4vw, 38px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin: 16px 0 4px;
}
.page-home .tier-price span{ font-size: 16px; font-weight: 400; color: var(--muted); }
.page-home .tier-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.6;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.page-home .tier-feature{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 7px 0;
}
.page-home .tier-check{
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-home .tier-btn{
  display: block;
  text-align: center;
  margin-top: 28px;
  padding: 13px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  letter-spacing: -0.01em;
}
.page-home .tier-btn:hover{ opacity: 0.85; transform: translateY(-1px); }
.page-home .tier-btn.primary{ background: var(--peak); color: var(--text-on-accent); }
.page-home .tier-btn.ghost{ border: 1px solid color-mix(in srgb, var(--contrast-base) 15%, transparent); color: var(--muted); }

.page-home /* ── BILLING TOGGLE ── */
.billing-toggle{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}
.page-home .billing-switch{
  display: inline-flex;
  background: var(--ink3);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}
.page-home .billing-opt{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 22px;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
.page-home .billing-opt.active{
  background: var(--ink);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--contrast-base) 7%, transparent);
}
.page-home .billing-save-badge{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--rest-text);
  background: color-mix(in srgb, var(--signal-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 22%, transparent);
  padding: 4px 14px;
  border-radius: 100px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.page-home .billing-save-badge.visible{
  opacity: 1;
  transform: translateY(0);
}
.page-home .tier-price-unit{ font-size: 16px; font-weight: 400; color: var(--muted); }
.page-home .tier-billing-note{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--subtle-text);
  letter-spacing: 0.04em;
  margin-top: 2px;
  min-height: 16px;
  transition: color 0.2s;
}
.page-home .tier-billing-note.highlight{ color: var(--rest-text); }

.page-home /* ── CTA SECTION ── */
.cta-section{
  background: var(--ink);
  padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 48px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-home .cta-glow{
  position: absolute;
  width: min(800px, 100%); height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--hero) 10%, transparent) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.page-home .cta-h2{
  font-size: clamp(32px, 5vw, 66px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
  position: relative;
}
.page-home .cta-h2 .accent{ color: var(--hero-on-surface); }
.page-home .cta-sub{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 44px;
  position: relative;
}
.page-home .cta-btns{
  display: flex;
  gap: 12px;
  justify-content: center;
  position: relative;
  flex-wrap: wrap;
}

.page-home /* ── MAILING LIST SECTION ── */
.mailinglist{
  background: var(--ink2);
  text-align: center;
}
.page-home .mailinglist-inner{
  max-width: 560px;
  margin: 0 auto;
}
.page-home .mailinglist-form{
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 40px);
  margin-top: clamp(32px, 5vw, 48px);
  text-align: left;
}
.page-home .ml-form-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.page-home .ml-form-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-home .ml-form-group.full{
  grid-column: 1 / -1;
}
.page-home .ml-label{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-home .ml-input{
  height: 48px;
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent);
  border-radius: 10px;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.page-home .ml-input::placeholder{ color: var(--subtle-text); }
.page-home .ml-input:focus{
  border-color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 6%, transparent);
}
.page-home .ml-btn{
  width: 100%;
  height: 52px;
  margin-top: 20px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.page-home .ml-btn:hover:not(:disabled){ opacity: 0.88; transform: translateY(-1px); }
.page-home .ml-btn:disabled{ opacity: 0.5; cursor: not-allowed; }
.page-home .ml-error{
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--load-text);
  letter-spacing: 0.06em;
  margin-top: 12px;
  text-align: center;
}
.page-home .ml-success{
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  text-align: center;
}
.page-home .ml-success-icon{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--signal-1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.page-home .ml-success-title{ font-size: 18px; font-weight: 700; color: var(--text-primary); }
.page-home .ml-success-sub{ font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.6; }

.page-home /* Force all grid children to respect grid boundaries */
.feat-card,.page-home .stat-cell,.page-home .quote-card,.page-home .tier-card,.page-home .hiw-left,.page-home .hiw-right{
  min-width: 0;
}

/* ════════════════════════════════
   BREAKPOINTS
   480px  — small phones
   768px  — tablets / large phones
   1024px — laptops and up (min-width for desktop-only enhancements)
   ════════════════════════════════ */

/* ── 768px — tablets / large phones ── */
@media screen and (max-width: 768px) {

  .page-home /* Hard stop on all sections and layout containers */
  section,.page-home .hiw,.page-home .wave-strip,.page-home .feat-strip{ max-width: 100vw; box-sizing: border-box; }

  .page-home /* Hero */
  .hero-sub{ max-width: 100%; }
  .page-home .hero-actions{ flex-wrap: wrap; justify-content: center; }

  .page-home /* Wave strip — reduce label count */
  .wave-labels{ gap: 0; }
  .page-home .wave-label:nth-child(3),.page-home .wave-label:nth-child(5){ display: none; }

  .page-home /* How it works — single column */
  .hiw{ grid-template-columns: minmax(0, 1fr) !important; }
  .page-home .hiw-left{
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 40px);
  }
  .page-home .hiw-right{
    padding: clamp(32px, 5vw, 48px) clamp(20px, 5vw, 40px);
  }

  .page-home /* Features — single column */
  .features-grid{ grid-template-columns: minmax(0, 1fr) !important; }

  .page-home /* Stats — 2 columns */
  .stats-row{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-home .stat-cell{ padding: 24px 16px; }

  .page-home /* Quotes — single column */
  .quotes-row{ grid-template-columns: minmax(0, 1fr) !important; }

  .page-home /* Tiers — single column */
  .tiers-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-home /* Buttons */
  .btn-primary,.page-home .btn-ghost{ font-size: 14px; padding: 12px 24px; }
}

/* ── 480px — small phones ── */
@media screen and (max-width: 480px) {

  .page-home /* Hero */
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .page-home .hero-actions .btn-primary,.page-home .hero-actions .btn-ghost{ justify-content: center; width: 100%; }
  .page-home .status-bar{ gap: 4px; }
  .page-home .status-chip{ font-size: 9px; padding: 4px 10px; }

  .page-home /* Wave labels — show only 6AM,.page-home 1PM,.page-home 8PM */
  .wave-label:nth-child(2),.page-home .wave-label:nth-child(4),.page-home .wave-label:nth-child(6){ display: none; }
  .page-home .wave-legend{ gap: 10px; }
  .page-home .legend-item{ font-size: 9px; }

  .page-home /* Stats — stay 2x2 but tighter */
  .stat-cell{ padding: 18px 10px; }
  .page-home .stat-num{ font-size: 28px; }

  .page-home /* Tiers — full width */
  .tiers-grid{ max-width: 100%; }

  .page-home /* CTA buttons stack */
  .cta-btns{ flex-direction: column; align-items: stretch; }
  .page-home .cta-btns .btn-primary,.page-home .cta-btns .btn-ghost{ justify-content: center; width: 100%; }

  .page-home /* Billing toggle */
  .billing-opt{ font-size: 12px; padding: 8px 14px; }

  .page-home /* Mailing list form — stack name fields */
  .ml-form-row{ grid-template-columns: minmax(0, 1fr); }

  .page-home /* Override any inline max-width on headings */
  .section-h2[style*="max-width"]{ max-width: 100% !important; }
}



/* individuals.html */

body.page-individuals, body.page-individuals *,.page-individuals *::before,.page-individuals *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-individuals{ scroll-behavior: smooth; overflow-x: hidden; }

body.page-individuals{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page-individuals ::-webkit-scrollbar{ width: 4px; }
.page-individuals ::-webkit-scrollbar-track{ background: var(--ink2); }
.page-individuals ::-webkit-scrollbar-thumb{ background: var(--peak); border-radius: 2px; }

.page-individuals .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.page-individuals .btn-primary:hover{ transform: translateY(-2px); opacity: 0.9; }

.page-individuals .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 12%, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.page-individuals .btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 30%, transparent); color: var(--text-primary); }

@keyframes fade-up-individuals {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-individuals section{ padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 48px); }

.page-individuals .section-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  margin-bottom: 16px;
}

.page-individuals .section-h2{
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.page-individuals .section-lead{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
}

.page-individuals /* ── HERO ── */
.hero{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 14vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 80px);
  position: relative;
  overflow: hidden;
}

.page-individuals .hero-bg{ position: absolute; inset: 0; overflow: hidden; }

.page-individuals .hero-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}

.page-individuals .hero-glow-peak{
  position: absolute;
  width: clamp(300px, 50vw, 600px); height: clamp(300px, 50vw, 600px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 12%, transparent) 0%, transparent 70%);
  top: 10%; right: -100px;
  animation: pulse-glow-individuals 6s ease-in-out infinite;
}
.page-individuals .hero-glow-flow{
  position: absolute;
  width: clamp(200px, 35vw, 400px); height: clamp(200px, 35vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 10%, transparent) 0%, transparent 70%);
  top: 30%; left: 5%;
  animation: pulse-glow-individuals 8s ease-in-out infinite 2s;
}

@keyframes pulse-glow-individuals {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

.page-individuals .hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  width: 100%;
}

.page-individuals .hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 25%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-individuals 0.8s ease both;
}
.page-individuals .hero-eyebrow::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--peak);
  animation: blink-individuals 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink-individuals { 0%,100%{opacity:1} 50%{opacity:0.3} }

.page-individuals .hero-h1{
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(20px, 3vw, 28px);
  animation: fade-up-individuals 0.8s ease 0.1s both;
}
.page-individuals .hero-h1 .accent{ color: var(--hero-on-surface); }
.page-individuals .hero-h1 .accent-flow{ color: var(--flow-text); }

.page-individuals .hero-sub{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vw, 44px);
  animation: fade-up-individuals 0.8s ease 0.2s both;
}

.page-individuals .hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  animation: fade-up-individuals 0.8s ease 0.3s both;
}

.page-individuals .status-bar{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(28px, 4vw, 40px);
}
.page-individuals .status-chip{
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.4vw, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-individuals .status-chip::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.page-individuals .chip-peak{ background: color-mix(in srgb, var(--hero) 12%, transparent);  color: var(--hero-on-surface); }
.page-individuals .chip-peak::before{ background: var(--peak); }
.page-individuals .chip-flow{ background: color-mix(in srgb, var(--secondary) 12%, transparent);  color: var(--flow-text); }
.page-individuals .chip-flow::before{ background: var(--flow); }
.page-individuals .chip-rest{ background: color-mix(in srgb, var(--signal-1) 12%, transparent);  color: var(--rest-text); }
.page-individuals .chip-rest::before{ background: var(--rest); }
.page-individuals .chip-load{ background: color-mix(in srgb, var(--signal-4) 12%, transparent);  color: var(--warn-text); }
.page-individuals .chip-load::before{ background: var(--load); }

.page-individuals /* ── MARQUEE ── */
.feat-strip{
  display: flex;
  overflow: hidden;
  background: var(--ink3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.page-individuals .feat-strip-inner{
  display: flex;
  animation: marquee-individuals 30s linear infinite;
  white-space: nowrap;
}
@keyframes marquee-individuals { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.page-individuals .strip-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 36px;
  border-right: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.page-individuals .strip-item .dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.page-individuals /* ── HOW IT WORKS ── */
.hiw{
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  padding: 0;
}
.page-individuals .hiw-left{
  padding: clamp(48px,8vw,100px) clamp(24px,5vw,64px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-individuals .hiw-right{
  padding: clamp(40px,6vw,60px) clamp(24px,5vw,48px);
  display: flex;
  flex-direction: column;
}
.page-individuals .hiw-step{
  padding: clamp(20px,3vw,28px) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  cursor: pointer;
}
.page-individuals .hiw-step:first-child{ padding-top: 0; }
.page-individuals .hiw-step:last-child{ border-bottom: none; }
.page-individuals .hiw-step.active .step-num{ background: var(--peak); color: var(--text-on-accent); }
.page-individuals .hiw-step.active .step-title{ color: var(--text-primary); }
.page-individuals .step-num{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.page-individuals .step-title{
  font-size: clamp(14px,2vw,16px);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.page-individuals .step-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.65;
}

.page-individuals /* ── FEATURES ── */
.features{ background: var(--ink2); }
.page-individuals .features-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: clamp(40px,6vw,64px);
}
.page-individuals .feat-card{
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,32px);
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.page-individuals .feat-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.page-individuals .feat-card:hover{ border-color: color-mix(in srgb, var(--contrast-base) 14%, transparent); transform: translateY(-4px); }
.page-individuals .feat-card:hover::before{ opacity: 1; }
.page-individuals .feat-card.peak::before{ background: var(--peak); }
.page-individuals .feat-card.flow::before{ background: var(--flow); }
.page-individuals .feat-card.rest::before{ background: var(--rest); }
.page-individuals .feat-card.load::before{ background: var(--load); }
.page-individuals .feat-icon{
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.page-individuals .feat-icon.peak{ background: var(--peak-glow); }
.page-individuals .feat-icon.flow{ background: var(--flow-glow); }
.page-individuals .feat-icon.rest{ background: var(--rest-glow); }
.page-individuals .feat-icon.load{ background: color-mix(in srgb, var(--signal-4) 15%, transparent); }
.page-individuals .feat-title{
  font-size: clamp(14px,2vw,17px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.page-individuals .feat-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
}

.page-individuals /* ── SOCIAL PROOF ── */
.social{ background: var(--ink); text-align: center; }
.page-individuals .stats-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(40px,6vw,64px);
}
.page-individuals .stat-cell{
  background: var(--ink2);
  padding: clamp(24px,4vw,40px) clamp(16px,3vw,24px);
  text-align: center;
  min-width: 0;
}
.page-individuals .stat-num{
  font-size: clamp(28px,5vw,42px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.page-individuals .stat-num span{ color: var(--hero-on-surface); }
.page-individuals .stat-label{
  font-size: clamp(10px,1.5vw,12px);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.page-individuals .quotes-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 48px;
}
.page-individuals .quote-card{
  background: var(--ink2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,28px);
  text-align: left;
  min-width: 0;
}
.page-individuals .quote-text{
  font-size: clamp(12px,1.8vw,14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}
.page-individuals .quote-meta{ display: flex; align-items: center; gap: 12px; }
.page-individuals .quote-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-on-accent);
  flex-shrink: 0;
}
.page-individuals .quote-name{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
.page-individuals .quote-role{ font-size: 11px; color: var(--muted); margin-top: 1px; }

.page-individuals /* ── PLAN CARD ── */
.plan-section{ background: var(--ink2); text-align: center; }
.page-individuals .plan-card{
  max-width: 440px;
  margin: clamp(40px,6vw,64px) auto 0;
  background: var(--ink);
  border: 1px solid var(--peak);
  border-radius: var(--r-lg);
  padding: clamp(28px,4vw,44px);
  text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--hero) 8%, transparent) 0%, var(--ink) 60%);
}
.page-individuals .plan-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--hero) 12%, transparent);
  color: var(--hero-on-surface);
  margin-bottom: 20px;
}
.page-individuals .plan-name{
  font-size: clamp(22px,3vw,28px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.page-individuals .plan-price{
  font-size: clamp(36px,5vw,48px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin: 16px 0 4px;
}
.page-individuals .plan-price span{ font-size: 16px; font-weight: 400; color: var(--muted); }
.page-individuals .plan-note{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rest-text);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.page-individuals .plan-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.6;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.page-individuals .plan-feature{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 7px 0;
}
.page-individuals .plan-check{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hero) 15%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-individuals .plan-btn{
  display: block;
  text-align: center;
  margin-top: 28px;
  padding: 14px;
  border-radius: 100px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.page-individuals .plan-btn:hover{ opacity: 0.88; transform: translateY(-1px); }

.page-individuals /* ── CTA ── */
.cta-section{
  background: var(--ink);
  padding: clamp(80px,10vw,120px) clamp(20px,5vw,48px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-individuals .cta-glow{
  position: absolute;
  width: min(800px,100%); height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--hero) 10%, transparent) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.page-individuals .cta-h2{
  font-size: clamp(32px,5vw,66px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
  position: relative;
}
.page-individuals .cta-h2 .accent{ color: var(--hero-on-surface); }
.page-individuals .cta-sub{
  font-size: clamp(14px,2vw,17px);
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 44px;
  position: relative;
}
.page-individuals .cta-btns{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── BREAKPOINTS ── */
@media screen and (max-width: 768px) {
  .page-individuals section{ max-width: 100vw; box-sizing: border-box; }
  .page-individuals .hiw{ grid-template-columns: minmax(0,1fr) !important; }
  .page-individuals .hiw-left{ border-right: none; border-bottom: 1px solid var(--rule); padding: clamp(40px,6vw,60px) clamp(20px,5vw,40px); }
  .page-individuals .hiw-right{ padding: clamp(32px,5vw,48px) clamp(20px,5vw,40px); }
  .page-individuals .features-grid{ grid-template-columns: minmax(0,1fr) !important; }
  .page-individuals .stats-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .page-individuals .stat-cell{ padding: 24px 16px; }
  .page-individuals .quotes-row{ grid-template-columns: minmax(0,1fr) !important; }
}

@media screen and (max-width: 480px) {
  .page-individuals .hero-actions{ flex-direction: column; align-items: stretch; }
  .page-individuals .hero-actions .btn-primary,.page-individuals .hero-actions .btn-ghost{ justify-content: center; width: 100%; }
  .page-individuals .stat-cell{ padding: 18px 10px; }
  .page-individuals .stat-num{ font-size: 28px; }
  .page-individuals .cta-btns{ flex-direction: column; align-items: stretch; }
  .page-individuals .cta-btns .btn-primary,.page-individuals .cta-btns .btn-ghost{ justify-content: center; width: 100%; }
}


/* maintenance.html */


body.page-maintenance, body.page-maintenance *,.page-maintenance *::before,.page-maintenance *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-maintenance{ scroll-behavior: smooth; }

body.page-maintenance{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.page-maintenance /* ── ACCENT BAR ── */
.accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--warn) 0%, var(--load) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-maintenance /* ── BACKGROUND ── */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page-maintenance .bg-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, var(--text-on-accent) 10%, transparent 100%);
}

.page-maintenance .bg-glow-a{
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal-3) 7%, transparent) 0%, transparent 70%);
  top: -10%; right: -15%;
  animation: drift-maintenance 10s ease-in-out infinite;
}

.page-maintenance .bg-glow-b{
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 7%, transparent) 0%, transparent 70%);
  bottom: 5%; left: -10%;
  animation: drift-maintenance 13s ease-in-out infinite 3s reverse;
}

.page-maintenance .bg-glow-c{
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal-4) 5%, transparent) 0%, transparent 70%);
  bottom: 30%; right: 15%;
  animation: drift-maintenance 9s ease-in-out infinite 6s;
}

@keyframes drift-maintenance {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-30px) scale(1.08); }
}

.page-maintenance /* ── WAVE ── */
.bg-wave{
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 45%;
}

.page-maintenance /* ── LAYOUT ── */
main{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vw, 100px) clamp(24px, 6vw, 80px) clamp(60px, 8vw, 80px);
  text-align: center;
}

.page-maintenance /* ── MARK ── */
.mark-wrap{
  margin-bottom: clamp(28px, 5vw, 44px);
  animation: fade-up-maintenance 0.8s ease both;
}

.page-maintenance .mark{
  width: clamp(56px, 9vw, 72px);
  height: clamp(56px, 9vw, 72px);
  margin: 0 auto;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--signal-3) 30%, transparent));
}

.page-maintenance /* ── STATUS PILL ── */
.status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warn-text);
  background: color-mix(in srgb, var(--signal-3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-3) 25%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-maintenance 0.8s ease 0.1s both;
}

.page-maintenance .pill-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
  animation: pulse-dot-maintenance 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot-maintenance {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

.page-maintenance /* ── HEADLINE ── */
h1{
  font-size: clamp(40px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(16px, 3vw, 24px);
  animation: fade-up-maintenance 0.8s ease 0.15s both;
}

.page-maintenance h1 .c-warn{ color: var(--warn-text); }
.page-maintenance h1 .c-flow{ color: var(--flow-text); }

.page-maintenance /* ── SUBHEAD ── */
.sub{
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto clamp(32px, 6vw, 52px);
  animation: fade-up-maintenance 0.8s ease 0.22s both;
}

.page-maintenance /* ── STATUS CARD ── */
.status-card{
  width: 100%;
  max-width: 420px;
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-3) 15%, transparent);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 32px);
  margin: 0 auto clamp(36px, 6vw, 52px);
  animation: fade-up-maintenance 0.8s ease 0.3s both;
  text-align: left;
}

.page-maintenance .status-card-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.page-maintenance .status-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  color: var(--text-secondary);
}

.page-maintenance .status-row:last-child{ border-bottom: none; }

.page-maintenance .status-icon{
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-maintenance .status-icon.warn{ background: var(--warn); box-shadow: 0 0 6px color-mix(in srgb, var(--signal-3) 50%, transparent); }
.page-maintenance .status-icon.ok{ background: var(--rest); box-shadow: 0 0 6px color-mix(in srgb, var(--signal-1) 40%, transparent); }
.page-maintenance .status-icon.muted{ background: var(--slate); }

.page-maintenance .status-label{ flex: 1; }
.page-maintenance .status-value{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.page-maintenance /* ── CHIPS ── */
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 560px;
  animation: fade-up-maintenance 0.8s ease 0.38s both;
}

.page-maintenance .chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(11px, 1.6vw, 13px);
  font-weight: 400;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.page-maintenance .chip-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-maintenance .chip-warn{ background: color-mix(in srgb, var(--signal-3) 8%, transparent); border-color: color-mix(in srgb, var(--signal-3) 20%, transparent); color: var(--flow-text); }
.page-maintenance .chip-ok{ background: color-mix(in srgb, var(--signal-1) 7%, transparent); border-color: color-mix(in srgb, var(--signal-1) 20%, transparent); color: var(--rest-text); }

/* ── ANIMATIONS ── */
@keyframes fade-up-maintenance {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-maintenance /* ── FOOTER ── */
footer{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 6vw, 60px);
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
}

.page-maintenance .footer-logo{
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-maintenance .footer-wordmark{
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.page-maintenance .footer-wordmark em{
  font-style: normal;
  color: var(--hero-on-surface);
}

.page-maintenance .footer-copy{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .page-maintenance footer{ flex-direction: column; gap: 10px; text-align: center; }
}



/* placeholder.html */


body.page-placeholder, body.page-placeholder *,.page-placeholder *::before,.page-placeholder *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-placeholder{ scroll-behavior: smooth; }

body.page-placeholder{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.page-placeholder .accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-placeholder .bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page-placeholder .bg-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 3.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, var(--text-on-accent) 10%, transparent 100%);
}

.page-placeholder .bg-glow-a{
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 7%, transparent) 0%, transparent 70%);
  top: -10%; right: -15%;
  animation: drift-placeholder 10s ease-in-out infinite;
}

.page-placeholder .bg-glow-b{
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 7%, transparent) 0%, transparent 70%);
  bottom: 5%; left: -10%;
  animation: drift-placeholder 13s ease-in-out infinite 3s reverse;
}

@keyframes drift-placeholder {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-30px) scale(1.08); }
}

.page-placeholder main{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vw, 100px) clamp(24px, 6vw, 80px) clamp(60px, 8vw, 80px);
  text-align: center;
}

.page-placeholder .mark-wrap{
  margin-bottom: clamp(28px, 5vw, 44px);
  animation: fade-up-placeholder 0.8s ease both;
}

.page-placeholder .mark{
  width: clamp(56px, 9vw, 72px);
  height: clamp(56px, 9vw, 72px);
  margin: 0 auto;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--hero) 35%, transparent));
}

.page-placeholder .status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-placeholder 0.8s ease 0.1s both;
}

.page-placeholder .pill-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--peak);
  animation: pulse-dot-placeholder 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot-placeholder {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

.page-placeholder h1{
  font-size: clamp(40px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(16px, 3vw, 24px);
  animation: fade-up-placeholder 0.8s ease 0.15s both;
}

.page-placeholder h1 .c-peak{ color: var(--hero-on-surface); }
.page-placeholder h1 .c-flow{ color: var(--flow-text); }

.page-placeholder .sub{
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 420px;
  margin: 0 auto clamp(32px, 6vw, 48px);
  animation: fade-up-placeholder 0.8s ease 0.22s both;
}

.page-placeholder .actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  animation: fade-up-placeholder 0.8s ease 0.3s both;
}

.page-placeholder .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.page-placeholder .btn-primary:hover{ opacity: 0.88; transform: translateY(-1px); }

.page-placeholder .btn-ghost{
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.page-placeholder .btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 25%, transparent); color: var(--text-secondary); }

.page-placeholder /* Progress indicator */
.progress-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(32px, 6vw, 48px);
  animation: fade-up-placeholder 0.8s ease 0.28s both;
}

.page-placeholder .progress-label{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--subtle-text);
}

.page-placeholder .progress-bar{
  width: clamp(180px, 30vw, 280px);
  height: 3px;
  background: color-mix(in srgb, var(--contrast-base) 6%, transparent);
  border-radius: 2px;
  overflow: hidden;
}

.page-placeholder .progress-fill{
  height: 100%;
  width: 60%;
  background: linear-gradient(90deg, var(--peak), var(--flow));
  border-radius: 2px;
  animation: progress-pulse-placeholder 3s ease-in-out infinite;
}

@keyframes progress-pulse-placeholder {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@keyframes fade-up-placeholder {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-placeholder footer{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 6vw, 60px);
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
}

.page-placeholder .footer-logo{
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-placeholder .footer-wordmark{
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.page-placeholder .footer-wordmark em{
  font-style: normal;
  color: var(--hero-on-surface);
}

.page-placeholder .footer-copy{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.04em;
}

@media screen and (max-width: 480px) {
  .page-placeholder footer{ flex-direction: column; gap: 10px; text-align: center; }
  .page-placeholder .actions{ flex-direction: column; align-items: stretch; }
  .page-placeholder .btn-primary,.page-placeholder .btn-ghost{ width: 100%; justify-content: center; }
}



/* privacy.html */

body.page-privacy, body.page-privacy *,.page-privacy *::before,.page-privacy *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html.page-privacy{ scroll-behavior: smooth; overflow-x: hidden; }



body.page-privacy{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.page-privacy .accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-privacy .bg{
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.page-privacy .bg-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 3%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, var(--text-on-accent) 20%, transparent 100%);
}
.page-privacy .bg-glow{
  position: absolute;
  width: 700px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 6%, transparent) 0%, transparent 70%);
  top: -10%; left: 50%; transform: translateX(-50%);
}

.page-privacy /* ── LAYOUT ── */
.page-wrap{
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(100px, 12vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 100px);
}

.page-privacy /* ── HEADER BLOCK ── */
.policy-header{
  margin-bottom: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(32px, 5vw, 48px);
  border-bottom: 1px solid var(--rule);
}

.page-privacy .policy-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.page-privacy .eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--peak);
  animation: pulse-dot-privacy 2.4s ease-in-out infinite;
}
@keyframes pulse-dot-privacy { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

.page-privacy .policy-title{
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 20px;
}
.page-privacy .policy-title span{ color: var(--hero-on-surface); }

.page-privacy .policy-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-privacy .meta-chip{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid var(--rule);
  padding: 5px 14px;
  border-radius: 100px;
}

.page-privacy .policy-intro{
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 24px;
  max-width: 700px;
}

.page-privacy /* ── TABLE OF CONTENTS ── */
.toc{
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--peak);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.page-privacy .toc-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.page-privacy .toc-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-privacy .toc-list li a{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s;
  border-bottom: 1px solid transparent;
}
.page-privacy .toc-list li a:hover{ color: var(--text-primary); }
.page-privacy .toc-num{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--hero-on-surface);
  opacity: 0.7;
  min-width: 24px;
}

.page-privacy /* ── SECTIONS ── */
.policy-section{
  margin-bottom: clamp(48px, 7vw, 80px);
  scroll-margin-top: 100px;
}

.page-privacy .section-anchor{
  display: block;
  height: 0;
  visibility: hidden;
}

.page-privacy .policy-section-header{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.page-privacy .section-number{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--hero-on-surface);
  letter-spacing: 0.1em;
  padding-top: 6px;
  flex-shrink: 0;
}
.page-privacy .section-title{
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.page-privacy /* ── CONTENT ELEMENTS ── */
.policy-p{
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 20px;
}
.page-privacy .policy-p:last-child{ margin-bottom: 0; }

.page-privacy .policy-p a{
  color: var(--hero-on-surface);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 30%, transparent);
  transition: border-color 0.2s, color 0.2s;
}
.page-privacy .policy-p a:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 40%, transparent); }

.page-privacy .policy-h3{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 28px 0 12px;
}
.page-privacy .policy-h3:first-child{ margin-top: 0; }

.page-privacy .policy-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.page-privacy .policy-list li{
  /*display: flex;*/
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
}
.page-privacy .policy-list li::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--peak);
  flex-shrink: 0;
  margin-top: 9px;
}

.page-privacy .policy-list.green li::before{ background: var(--rest); }
.page-privacy .policy-list.orange li::before{ background: var(--load); }

.page-privacy /* ── CALLOUT BOXES ── */
.callout{
  border-radius: 12px;
  padding: clamp(16px, 3vw, 24px) clamp(18px, 3vw, 28px);
  margin: 24px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.page-privacy .callout-peak{
  background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  border-left: 3px solid var(--peak);
}
.page-privacy .callout-rest{
  background: color-mix(in srgb, var(--signal-1) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 20%, transparent);
  border-left: 3px solid var(--rest);
}
.page-privacy .callout-warn{
  background: color-mix(in srgb, var(--signal-4) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-4) 20%, transparent);
  border-left: 3px solid var(--load);
}
.page-privacy .callout-flow{
  background: color-mix(in srgb, var(--secondary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 20%, transparent);
  border-left: 3px solid var(--flow);
}
.page-privacy .callout-icon{
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.page-privacy .callout-text{
  font-size: clamp(12px, 1.7vw, 14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
}
.page-privacy .callout-text strong{
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.page-privacy /* ── DATA TABLE ── */
.data-table{
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: clamp(11px, 1.6vw, 13px);
}
.page-privacy .data-table th{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border-bottom: 1px solid var(--rule);
}
.page-privacy .data-table td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.6;
  vertical-align: top;
}
.page-privacy .data-table tr:last-child td{ border-bottom: none; }
.page-privacy .data-table tr:hover td{ background: color-mix(in srgb, var(--contrast-base) 2%, transparent); }
.page-privacy .data-table .td-label{
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.page-privacy /* ── CONTACT CARD ── */
.contact-card{
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  margin-top: 32px;
}
.page-privacy .contact-card-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.page-privacy .contact-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(12px, 1.7vw, 14px);
}
.page-privacy .contact-row:last-child{ border-bottom: none; }
.page-privacy .contact-label{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 80px;
  padding-top: 2px;
  flex-shrink: 0;
}
.page-privacy .contact-value{
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.6;
}
.page-privacy .contact-value a{
  color: var(--hero-on-surface);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 30%, transparent);
  transition: color 0.2s, border-color 0.2s;
}
.page-privacy .contact-value a:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 40%, transparent); }

.page-privacy /* ── DIVIDER ── */
.policy-divider{
  height: 1px;
  background: var(--rule);
  margin: clamp(40px, 5vw, 60px) 0;
}

/* ── BREAKPOINTS ── */
@media screen and (max-width: 768px) {
  .page-privacy .toc-list{ gap: 2px; }
  .page-privacy .data-table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-privacy .policy-meta{ gap: 8px; }
}

@media screen and (max-width: 480px) {
  .page-privacy .policy-section-header{ flex-direction: column; gap: 6px; }
  .page-privacy .contact-row{ flex-direction: column; gap: 4px; }
  .page-privacy .contact-label{ min-width: unset; }
}


/* security.html */

body.page-security, body.page-security *,.page-security *::before,.page-security *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html.page-security{ scroll-behavior: smooth; overflow-x: hidden; }



body.page-security{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.page-security .accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-security .bg{
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.page-security .bg-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 3%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, var(--text-on-accent) 20%, transparent 100%);
}
.page-security .bg-glow{
  position: absolute;
  width: 700px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal-1) 6%, transparent) 0%, transparent 70%);
  top: -10%; left: 50%; transform: translateX(-50%);
}

.page-security /* ── LAYOUT ── */
.page-wrap{
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(100px, 12vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 100px);
}

.page-security /* ── HEADER BLOCK ── */
.policy-header{
  margin-bottom: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(32px, 5vw, 48px);
  border-bottom: 1px solid var(--rule);
}

.page-security .policy-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rest-text);
  background: color-mix(in srgb, var(--signal-1) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 20%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.page-security .eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rest);
  animation: pulse-dot-security 2.4s ease-in-out infinite;
}
@keyframes pulse-dot-security { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

.page-security .policy-title{
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 20px;
}
.page-security .policy-title span{ color: var(--rest-text); }

.page-security .policy-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-security .meta-chip{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid var(--rule);
  padding: 5px 14px;
  border-radius: 100px;
}

.page-security .policy-intro{
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 24px;
  max-width: 700px;
}

.page-security /* ── TABLE OF CONTENTS ── */
.toc{
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rest);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.page-security .toc-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.page-security .toc-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-security .toc-list li a{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s;
}
.page-security .toc-list li a:hover{ color: var(--text-primary); }
.page-security .toc-num{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rest-text);
  opacity: 0.7;
  min-width: 24px;
}

.page-security /* ── SECTIONS ── */
.policy-section{
  margin-bottom: clamp(48px, 7vw, 80px);
  scroll-margin-top: 100px;
}

.page-security .policy-section-header{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.page-security .section-number{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--rest-text);
  letter-spacing: 0.1em;
  padding-top: 6px;
  flex-shrink: 0;
}
.page-security .section-title{
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.page-security /* ── CONTENT ELEMENTS ── */
.policy-p{
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 20px;
}
.page-security .policy-p:last-child{ margin-bottom: 0; }

.page-security .policy-p a{
  color: var(--hero-on-surface);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 30%, transparent);
  transition: border-color 0.2s, color 0.2s;
}
.page-security .policy-p a:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 40%, transparent); }

.page-security .policy-h3{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 28px 0 12px;
}
.page-security .policy-h3:first-child{ margin-top: 0; }

.page-security .policy-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.page-security .policy-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
}
.page-security .policy-list li::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rest);
  flex-shrink: 0;
  margin-top: 9px;
}
.page-security .policy-list.peak li::before{ background: var(--peak); }
.page-security .policy-list.orange li::before{ background: var(--load); }

.page-security /* ── CALLOUT BOXES ── */
.callout{
  border-radius: 12px;
  padding: clamp(16px, 3vw, 24px) clamp(18px, 3vw, 28px);
  margin: 24px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.page-security .callout-peak{
  background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  border-left: 3px solid var(--peak);
}
.page-security .callout-rest{
  background: color-mix(in srgb, var(--signal-1) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 20%, transparent);
  border-left: 3px solid var(--rest);
}
.page-security .callout-warn{
  background: color-mix(in srgb, var(--signal-4) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-4) 20%, transparent);
  border-left: 3px solid var(--load);
}
.page-security .callout-flow{
  background: color-mix(in srgb, var(--secondary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 20%, transparent);
  border-left: 3px solid var(--flow);
}
.page-security .callout-icon{ font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.page-security .callout-text{
  font-size: clamp(12px, 1.7vw, 14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
}
.page-security .callout-text strong{
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.page-security /* ── ARCHITECTURE DIAGRAM ── */
.arch-diagram{
  background: color-mix(in srgb, var(--contrast-base) 2%, transparent);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 40px);
  margin: 28px 0;
  overflow-x: auto;
}
.page-security .arch-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.page-security .arch-row{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.page-security .arch-row:last-child{ margin-bottom: 0; }
.page-security .arch-node{
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}
.page-security .arch-node.green{ border-color: color-mix(in srgb, var(--signal-1) 30%, transparent); background: color-mix(in srgb, var(--signal-1) 6%, transparent); }
.page-security .arch-node.blue{ border-color: color-mix(in srgb, var(--hero) 30%, transparent);  background: color-mix(in srgb, var(--hero) 6%, transparent); }
.page-security .arch-node.purple{ border-color: color-mix(in srgb, var(--secondary) 30%, transparent);  background: color-mix(in srgb, var(--secondary) 6%, transparent); }
.page-security .arch-node.orange{ border-color: color-mix(in srgb, var(--signal-4) 30%, transparent);  background: color-mix(in srgb, var(--signal-4) 6%, transparent); }
.page-security .arch-dot{
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.page-security .arch-arrow{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--subtle-text);
  flex-shrink: 0;
}
.page-security .arch-label{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--subtle-text);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.page-security .arch-divider{
  height: 1px;
  background: var(--rule);
  margin: 16px 0;
}

.page-security /* ── SECURITY BADGES ── */
.badge-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.page-security .sec-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
}
.page-security .badge-green{ background: color-mix(in srgb, var(--signal-1) 10%, transparent); border: 1px solid color-mix(in srgb, var(--signal-1) 25%, transparent); color: var(--rest-text); }
.page-security .badge-blue{ background: color-mix(in srgb, var(--hero) 10%, transparent);  border: 1px solid color-mix(in srgb, var(--hero) 25%, transparent);  color: var(--hero-on-surface); }
.page-security .badge-purple{ background: color-mix(in srgb, var(--secondary) 10%, transparent);  border: 1px solid color-mix(in srgb, var(--secondary) 25%, transparent);  color: var(--flow-text); }

.page-security /* ── CONTACT CARD ── */
.contact-card{
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  margin-top: 32px;
}
.page-security .contact-card-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.page-security .contact-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(12px, 1.7vw, 14px);
}
.page-security .contact-row:last-child{ border-bottom: none; }
.page-security .contact-label{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 80px;
  padding-top: 2px;
  flex-shrink: 0;
}
.page-security .contact-value{ color: var(--text-secondary); font-weight: 300; line-height: 1.6; }
.page-security .contact-value a{
  color: var(--hero-on-surface);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 30%, transparent);
  transition: color 0.2s, border-color 0.2s;
}
.page-security .contact-value a:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 40%, transparent); }

.page-security .policy-divider{
  height: 1px;
  background: var(--rule);
  margin: clamp(40px, 5vw, 60px) 0;
}

/* ── BREAKPOINTS ── */
@media screen and (max-width: 768px) {
  .page-security .arch-row{ gap: 8px; }
  .page-security .arch-node{ font-size: 12px; padding: 8px 12px; }
  .page-security .badge-row{ gap: 8px; }
}
@media screen and (max-width: 480px) {
  .page-security .policy-section-header{ flex-direction: column; gap: 6px; }
  .page-security .contact-row{ flex-direction: column; gap: 4px; }
  .page-security .contact-label{ min-width: unset; }
  .page-security .arch-row{ flex-direction: column; align-items: flex-start; }
  .page-security .arch-arrow{ transform: rotate(90deg); }
}


/* signup.html */


body.page-signup, body.page-signup *,.page-signup *::before,.page-signup *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-signup{ scroll-behavior: smooth; }

body.page-signup{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.page-signup /* ── ACCENT BAR ── */
.accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-signup /* ── BACKGROUND ── */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.page-signup .bg-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}
.page-signup .bg-glow-a{
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 9%, transparent) 0%, transparent 70%);
  top: -10%; right: -10%;
  animation: drift-signup 10s ease-in-out infinite;
}
.page-signup .bg-glow-b{
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 7%, transparent) 0%, transparent 70%);
  bottom: 10%; left: -8%;
  animation: drift-signup 13s ease-in-out infinite 3s reverse;
}
@keyframes drift-signup {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-30px) scale(1.08); }
}

.page-signup /* ── NAV ── */
nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: color-mix(in srgb, var(--background-deep) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule);
  z-index: 100;
}
.page-signup .nav-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.page-signup .nav-mark{ width: 30px; height: 30px; }
.page-signup .nav-wordmark{
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}
.page-signup .nav-wordmark span{ color: var(--hero-on-surface); }
.page-signup .nav-right{
  display: flex;
  align-items: center;
  gap: 20px;
}
.page-signup .nav-signin{
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.page-signup .nav-signin:hover{ color: var(--text-primary); }
.page-signup .nav-signin strong{ color: var(--hero-on-surface); font-weight: 600; }

.page-signup /* ── MAIN LAYOUT ── */
main{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 24px 60px;
}

.page-signup /* ── PROGRESS INDICATOR ── */
.progress-wrap{
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
  animation: fade-up-signup 0.6s ease both;
}
.page-signup .progress-steps{
  display: flex;
  align-items: center;
  gap: 0;
}
.page-signup .progress-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}
.page-signup .progress-step::after{
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--rule);
  transition: background 0.3s;
}
.page-signup .progress-step:last-child::after{ display: none; }
.page-signup .progress-step.done::after{ background: var(--peak); }
.page-signup .step-dot{
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--slate);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--subtle-text);
  position: relative;
  z-index: 1;
  transition: all 0.3s;
}
.page-signup .progress-step.active .step-dot{
  border-color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 12%, transparent);
  color: var(--hero-on-surface);
}
.page-signup .progress-step.done .step-dot{
  border-color: var(--hero-on-surface);
  background: var(--peak);
  color: var(--text-on-accent);
}
.page-signup .progress-step.done .step-dot::after{
  content: '';
  display: block;
  width: 8px; height: 5px;
  border-left: 1.5px solid var(--text-on-accent);
  border-bottom: 1.5px solid var(--text-on-accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
.page-signup .step-label{
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle-text);
  transition: color 0.3s;
  white-space: nowrap;
}
.page-signup .progress-step.active .step-label{ color: var(--hero-on-surface); }
.page-signup .progress-step.done .step-label{ color: var(--muted); }

.page-signup /* ── FORM CARD ── */
.form-card{
  width: 100%;
  max-width: 560px;
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 44px);
  animation: fade-up-signup 0.6s ease 0.1s both;
}

.page-signup /* ── STEP HEADER ── */
.step-header{
  margin-bottom: 32px;
}
.page-signup .step-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  margin-bottom: 10px;
}
.page-signup .step-title{
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.page-signup .step-sub{
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

.page-signup /* ── FORM FIELDS ── */
.field-group{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}
.page-signup .field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.page-signup .field{
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.page-signup .field label{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-signup .field label .req{
  color: var(--hero-on-surface);
  margin-left: 2px;
}
.page-signup .field label .opt{
  color: var(--subtle-text);
  font-size: 9px;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.page-signup .field input,.page-signup .field select{
  height: 48px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.page-signup .field input::placeholder{ color: var(--subtle-text); }
.page-signup .field input:focus,.page-signup .field select:focus{
  border-color: color-mix(in srgb, var(--hero) 50%, transparent);
  background: color-mix(in srgb, var(--hero) 6%, transparent);
}
.page-signup .field input.error{
  border-color: color-mix(in srgb, var(--signal-4) 60%, transparent);
}
.page-signup .field-error{
  font-size: 11px;
  color: var(--load-text);
  display: none;
  margin-top: -4px;
}
.page-signup .field-error.visible{ display: block; }
.page-signup .field select option{ background: var(--ink2); color: var(--text-primary); }

.page-signup /* Password field */
.field-pass{
  position: relative;
}
.page-signup .field-pass input{ padding-right: 48px; width: 100%; }
.page-signup .pass-toggle{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--subtle-text);
  padding: 4px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.page-signup .pass-toggle:hover{ color: var(--muted); }

.page-signup /* Password strength */
.pass-strength{
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.page-signup .pass-bar{
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
  transition: background 0.3s;
}

.page-signup /* ── PLAN CARDS ── */
.plan-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.page-signup .plan-card{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid color-mix(in srgb, var(--contrast-base) 8%, transparent);
  background: color-mix(in srgb, var(--contrast-base) 2%, transparent);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.page-signup .plan-card:hover{
  border-color: color-mix(in srgb, var(--hero) 30%, transparent);
  background: color-mix(in srgb, var(--hero) 4%, transparent);
}
.page-signup .plan-card.selected{
  border-color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 8%, transparent);
}
.page-signup .plan-card input[type="radio"]{
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.page-signup .plan-radio{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--slate);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}
.page-signup .plan-card.selected .plan-radio{
  border-color: var(--hero-on-surface);
}
.page-signup .plan-radio-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--peak);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s, transform 0.2s;
}
.page-signup .plan-card.selected .plan-radio-dot{
  opacity: 1;
  transform: scale(1);
}
.page-signup .plan-info{ flex: 1; }
.page-signup .plan-name{
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.page-signup .plan-desc{
  font-size: 12px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.5;
}
.page-signup .plan-price{
  text-align: right;
  flex-shrink: 0;
}
.page-signup .plan-price-val{
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.page-signup .plan-price-unit{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--text-secondary);
  display: block;
}
.page-signup .plan-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-top: 4px;
}
.page-signup .badge-peak{ background: color-mix(in srgb, var(--hero) 12%, transparent); color: var(--text-primary); }
.page-signup .badge-flow{ background: color-mix(in srgb, var(--secondary) 12%, transparent); color: var(--flow-text); }
.page-signup .badge-rest{ background: color-mix(in srgb, var(--signal-1) 12%, transparent); color: var(--rest-text); }

.page-signup /* ── BILLING TOGGLE ── */
.billing-toggle{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 4px;
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid var(--rule);
  border-radius: 100px;
  width: fit-content;
}
.page-signup .billing-opt{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 7px 18px;
  border-radius: 100px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.page-signup .billing-opt.active{
  background: var(--peak);
  color: var(--text-on-accent);
}
.page-signup .billing-save{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--rest-text);
  letter-spacing: 0.08em;
  margin-left: 4px;
}

.page-signup /* ── CONDITIONAL SECTIONS ── */
.conditional-section{
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  background: color-mix(in srgb, var(--contrast-base) 2%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: 18px;
  animation: fade-up-signup 0.3s ease both;
}
.page-signup .conditional-section.visible{ display: flex; }
.page-signup .conditional-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.page-signup /* ── REVIEW SECTION ── */
.review-group{
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 28px;
}
.page-signup .review-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.page-signup .review-row:last-child{ border-bottom: none; }
.page-signup .review-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-signup .review-value{ color: var(--text-primary); font-weight: 400; }
.page-signup .review-section-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  padding: 10px 18px 6px;
  background: color-mix(in srgb, var(--hero) 5%, transparent);
  border-bottom: 1px solid var(--rule);
}

.page-signup /* ── ORDER SUMMARY ── */
.order-summary{
  background: color-mix(in srgb, var(--hero) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 24px;
}
.page-signup .order-line{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--muted);
}
.page-signup .order-line:last-child{ margin-bottom: 0; }
.page-signup .order-total{
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  margin-top: 14px;
}
.page-signup .order-trial-note{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rest-text);
  letter-spacing: 0.08em;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-signup .order-trial-note::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rest);
  flex-shrink: 0;
}

.page-signup /* ── STRIPE NOTE ── */
.stripe-note{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
}
.page-signup .stripe-note svg{ flex-shrink: 0; }

.page-signup /* ── NAV BUTTONS ── */
.form-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.page-signup .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 32px;
  border-radius: 100px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  text-decoration: none;
}
.page-signup .btn-primary:hover{ opacity: 0.88; transform: translateY(-1px); }
.page-signup .btn-primary:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }
.page-signup .btn-primary.full{ width: 100%; }
.page-signup .btn-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 50px;
  padding: 0 20px;
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.page-signup .btn-back:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 25%, transparent); }
.page-signup .btn-back.hidden{ visibility: hidden; }

.page-signup /* ── TERMS NOTE ── */
.terms-note{
  font-size: 11px;
  font-weight: 300;
  color: var(--subtle-text);
  text-align: center;
  margin-top: 18px;
  line-height: 1.6;
}
.page-signup .terms-note a{
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── ANIMATIONS ── */
@keyframes fade-up-signup {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-signup /* ── FOOTER ── */
footer{
  position: relative;
  z-index: 1;
  background: var(--ink2);
  border-top: 1px solid var(--rule);
  padding: 24px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.page-signup .footer-copy{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--subtle-text);
  letter-spacing: 0.04em;
}
.page-signup .footer-links{
  display: flex;
  gap: 24px;
  list-style: none;
}
.page-signup .footer-links a{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--subtle-text);
  text-decoration: none;
  transition: color 0.2s;
}
.page-signup .footer-links a:hover{ color: var(--muted); }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .page-signup nav{ padding: 0 16px; }
  .page-signup nav .nav-signin{ display: none; }

  .page-signup main{ padding: 88px 12px 40px; }

  .page-signup .form-card{ padding: 24px 16px; border-radius: 16px; }

  .page-signup .progress-steps{ gap: 4px; }
  .page-signup .step-dot{ width: 28px; height: 28px; font-size: 11px; }
  .page-signup .step-label{ font-size: 9px; letter-spacing: 0.06em; }

  .page-signup .step-title{ font-size: 22px; }
  .page-signup .step-sub{ font-size: 13px; }

  .page-signup .plan-grid{ gap: 10px; }
  .page-signup .plan-card{
    padding: 14px;
    flex-wrap: wrap;
  }
  .page-signup .plan-info{ flex: 1; min-width: 0; }
  .page-signup .plan-price{
    width: 100%;
    text-align: left;
    padding-left: 36px;
    margin-top: 6px;
  }
  .page-signup .plan-price-val{ font-size: 18px; display: inline; margin-right: 4px; }
  .page-signup .plan-price-unit{ display: inline; font-size: 10px; }
  .page-signup .plan-name{ font-size: 15px; }
  .page-signup .plan-desc{ font-size: 12px; }

  .page-signup .billing-toggle{ gap: 4px; }
  .page-signup .billing-opt{ font-size: 12px; padding: 6px 12px; }

  .page-signup .field-row{ grid-template-columns: 1fr; }

  .page-signup .btn-primary,.page-signup .btn-back{ height: 46px; font-size: 14px; }

  .page-signup .form-nav{ gap: 10px; }

  .page-signup footer{ flex-direction: column; gap: 12px; text-align: center; padding: 16px 20px; }
  .page-signup .footer-links{ justify-content: center; }

  .page-signup .review-row{ flex-direction: column; gap: 2px; }
  .page-signup .review-label{ font-size: 10px; }
  .page-signup .review-value{ font-size: 13px; }
}

@media (max-width: 380px) {
  .page-signup .step-label{ display: none; }
  .page-signup .form-card{ padding: 20px 12px; }
}



/* students.html */

body.page-students, body.page-students *,.page-students *::before,.page-students *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-students{ scroll-behavior: smooth; overflow-x: hidden; }

body.page-students{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page-students ::-webkit-scrollbar{ width: 4px; }
.page-students ::-webkit-scrollbar-track{ background: var(--ink2); }
.page-students ::-webkit-scrollbar-thumb{ background: var(--peak); border-radius: 2px; }

.page-students .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--peak);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.page-students .btn-primary:hover{ transform: translateY(-2px); opacity: 0.9; }

.page-students .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 12%, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.page-students .btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 30%, transparent); color: var(--text-primary); }

@keyframes fade-up-students {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-students section{ padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 48px); }

.page-students .section-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  margin-bottom: 16px;
}

.page-students .section-h2{
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.page-students .section-lead{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
}

.page-students /* ── HERO ── */
.hero{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 14vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 80px);
  position: relative;
  overflow: hidden;
}

.page-students .hero-bg{ position: absolute; inset: 0; overflow: hidden; }

.page-students .hero-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}

.page-students .hero-glow-peak{
  position: absolute;
  width: clamp(300px, 50vw, 600px); height: clamp(300px, 50vw, 600px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 12%, transparent) 0%, transparent 70%);
  top: 10%; right: -100px;
  animation: pulse-glow-students 6s ease-in-out infinite;
}
.page-students .hero-glow-flow{
  position: absolute;
  width: clamp(200px, 35vw, 400px); height: clamp(200px, 35vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 10%, transparent) 0%, transparent 70%);
  top: 30%; left: 5%;
  animation: pulse-glow-students 8s ease-in-out infinite 2s;
}

@keyframes pulse-glow-students {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

.page-students .hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  width: 100%;
}

.page-students .hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 25%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-students 0.8s ease both;
}
.page-students .hero-eyebrow::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--peak);
  animation: blink-students 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink-students { 0%,100%{opacity:1} 50%{opacity:0.3} }

.page-students .hero-h1{
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(20px, 3vw, 28px);
  animation: fade-up-students 0.8s ease 0.1s both;
}
.page-students .hero-h1 .accent{ color: var(--hero-on-surface); }
.page-students .hero-h1 .accent-flow{ color: var(--flow-text); }

.page-students .hero-sub{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vw, 44px);
  animation: fade-up-students 0.8s ease 0.2s both;
}

.page-students .hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  animation: fade-up-students 0.8s ease 0.3s both;
}

.page-students .status-bar{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(28px, 4vw, 40px);
}
.page-students .status-chip{
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.4vw, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-students .status-chip::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.page-students .chip-peak{ background: color-mix(in srgb, var(--hero) 12%, transparent);  color: var(--hero-on-surface); }
.page-students .chip-peak::before{ background: var(--peak); }
.page-students .chip-flow{ background: color-mix(in srgb, var(--secondary) 12%, transparent);  color: var(--flow-text); }
.page-students .chip-flow::before{ background: var(--flow); }
.page-students .chip-rest{ background: color-mix(in srgb, var(--signal-1) 12%, transparent);  color: var(--rest-text); }
.page-students .chip-rest::before{ background: var(--rest); }
.page-students .chip-load{ background: color-mix(in srgb, var(--signal-4) 12%, transparent);  color: var(--warn-text); }
.page-students .chip-load::before{ background: var(--load); }

.page-students /* ── MARQUEE ── */
.feat-strip{
  display: flex;
  overflow: hidden;
  background: var(--ink3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.page-students .feat-strip-inner{
  display: flex;
  animation: marquee-students 30s linear infinite;
  white-space: nowrap;
}
@keyframes marquee-students { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.page-students .strip-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 36px;
  border-right: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.page-students .strip-item .dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.page-students /* ── REALITY CHECK STRIP ── */
.reality-strip{
  background: var(--ink2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(48px,7vw,80px) clamp(20px,5vw,48px);
}
.page-students .reality-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 860px;
  margin: clamp(32px,5vw,48px) auto 0;
}
.page-students .reality-cell{
  background: var(--ink);
  padding: clamp(24px,3vw,36px);
  text-align: center;
  min-width: 0;
}
.page-students .reality-icon{
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
}
.page-students .reality-label{
  font-size: clamp(13px,2vw,16px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.page-students .reality-desc{
  font-size: 12px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
}

.page-students /* ── HOW IT WORKS ── */
.hiw{
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  padding: 0;
}
.page-students .hiw-left{
  padding: clamp(48px,8vw,100px) clamp(24px,5vw,64px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-students .hiw-right{
  padding: clamp(40px,6vw,60px) clamp(24px,5vw,48px);
  display: flex;
  flex-direction: column;
}
.page-students .hiw-step{
  padding: clamp(20px,3vw,28px) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  cursor: pointer;
}
.page-students .hiw-step:first-child{ padding-top: 0; }
.page-students .hiw-step:last-child{ border-bottom: none; }
.page-students .hiw-step.active .step-num{ background: var(--peak); color: var(--text-on-accent); }
.page-students .hiw-step.active .step-title{ color: var(--text-primary); }
.page-students .step-num{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.page-students .step-title{
  font-size: clamp(14px,2vw,16px);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.page-students .step-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.65;
}

.page-students /* ── FEATURES ── */
.features{ background: var(--ink2); }
.page-students .features-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: clamp(40px,6vw,64px);
}
.page-students .feat-card{
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,32px);
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.page-students .feat-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.page-students .feat-card:hover{ border-color: color-mix(in srgb, var(--contrast-base) 14%, transparent); transform: translateY(-4px); }
.page-students .feat-card:hover::before{ opacity: 1; }
.page-students .feat-card.peak::before{ background: var(--peak); }
.page-students .feat-card.flow::before{ background: var(--flow); }
.page-students .feat-card.rest::before{ background: var(--rest); }
.page-students .feat-card.load::before{ background: var(--load); }
.page-students .feat-icon{
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.page-students .feat-icon.peak{ background: var(--peak-glow); }
.page-students .feat-icon.flow{ background: var(--flow-glow); }
.page-students .feat-icon.rest{ background: var(--rest-glow); }
.page-students .feat-icon.load{ background: var(--load-glow); }
.page-students .feat-title{
  font-size: clamp(14px,2vw,17px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.page-students .feat-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
}

.page-students /* ── SOCIAL PROOF ── */
.social{ background: var(--ink); text-align: center; }
.page-students .quotes-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: clamp(40px,6vw,56px);
}
.page-students .quote-card{
  background: var(--ink2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,28px);
  text-align: left;
  min-width: 0;
}
.page-students .quote-text{
  font-size: clamp(12px,1.8vw,14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}
.page-students .quote-meta{ display: flex; align-items: center; gap: 12px; }
.page-students .quote-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-on-accent);
  flex-shrink: 0;
}
.page-students .quote-name{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
.page-students .quote-role{ font-size: 11px; color: var(--muted); margin-top: 1px; }

.page-students /* ── HOW TO GET IT ── */
.howtget{
  background: var(--ink2);
  padding: clamp(60px,8vw,100px) clamp(20px,5vw,48px);
  text-align: center;
}
.page-students .access-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  max-width: 720px;
  margin: clamp(40px,6vw,56px) auto 0;
}
.page-students .access-card{
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px,3vw,36px);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.page-students .access-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.page-students .access-card.family::before{ background: var(--flow); }
.page-students .access-card.personal::before{ background: var(--peak); }
.page-students .access-badge{
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 16px;
}
.page-students .access-card.family .access-badge{ background: color-mix(in srgb, var(--secondary) 12%, transparent); color: var(--flow-text); }
.page-students .access-card.personal .access-badge{ background: color-mix(in srgb, var(--hero) 12%, transparent); color: var(--hero-on-surface); }
.page-students .access-title{
  font-size: clamp(16px,2.5vw,20px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.page-students .access-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
  margin-bottom: 24px;
}
.page-students .access-price{
  font-size: clamp(22px,3vw,28px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.page-students .access-price span{ font-size: 14px; font-weight: 400; color: var(--muted); }
.page-students .access-note{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rest-text);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.page-students .access-btn{
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.page-students .access-btn:hover{ opacity: 0.88; transform: translateY(-1px); }
.page-students .access-card.family .access-btn{ background: var(--flow); color: var(--on-secondary); }
.page-students .access-card.personal .access-btn{ background: var(--peak); color: var(--text-on-accent); }

.page-students /* ── CTA ── */
.cta-section{
  background: var(--ink);
  padding: clamp(80px,10vw,120px) clamp(20px,5vw,48px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-students .cta-glow{
  position: absolute;
  width: min(800px,100%); height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--hero) 10%, transparent) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.page-students .cta-h2{
  font-size: clamp(32px,5vw,66px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
  position: relative;
}
.page-students .cta-h2 .accent{ color: var(--hero-on-surface); }
.page-students .cta-sub{
  font-size: clamp(14px,2vw,17px);
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 44px;
  position: relative;
}
.page-students .cta-btns{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── BREAKPOINTS ── */
@media screen and (max-width: 768px) {
  .page-students section{ max-width: 100vw; box-sizing: border-box; }
  .page-students .reality-grid{ grid-template-columns: minmax(0,1fr) !important; }
  .page-students .hiw{ grid-template-columns: minmax(0,1fr) !important; }
  .page-students .hiw-left{ border-right: none; border-bottom: 1px solid var(--rule); padding: clamp(40px,6vw,60px) clamp(20px,5vw,40px); }
  .page-students .hiw-right{ padding: clamp(32px,5vw,48px) clamp(20px,5vw,40px); }
  .page-students .features-grid{ grid-template-columns: minmax(0,1fr) !important; }
  .page-students .quotes-row{ grid-template-columns: minmax(0,1fr) !important; }
  .page-students .access-cards{ grid-template-columns: minmax(0,1fr) !important; }
}

@media screen and (max-width: 480px) {
  .page-students .hero-actions{ flex-direction: column; align-items: stretch; }
  .page-students .hero-actions .btn-primary,.page-students .hero-actions .btn-ghost{ justify-content: center; width: 100%; }
  .page-students .cta-btns{ flex-direction: column; align-items: stretch; }
  .page-students .cta-btns .btn-primary,.page-students .cta-btns .btn-ghost{ justify-content: center; width: 100%; }
}


/* teams.html */

body.page-teams, body.page-teams *,.page-teams *::before,.page-teams *::after{ box-sizing: border-box; margin: 0; padding: 0; }



html.page-teams{ scroll-behavior: smooth; overflow-x: hidden; }

body.page-teams{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page-teams ::-webkit-scrollbar{ width: 4px; }
.page-teams ::-webkit-scrollbar-track{ background: var(--ink2); }
.page-teams ::-webkit-scrollbar-thumb{ background: var(--rest); border-radius: 2px; }

.page-teams .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rest);
  color: var(--on-signal-1);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.page-teams .btn-primary:hover{ transform: translateY(-2px); opacity: 0.9; }

.page-teams .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 12%, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.page-teams .btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 30%, transparent); color: var(--text-primary); }

@keyframes fade-up-teams {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-teams section{ padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 48px); }

.page-teams .section-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rest-text);
  margin-bottom: 16px;
}

.page-teams .section-h2{
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.page-teams .section-lead{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
}

.page-teams /* ── HERO ── */
.hero{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 14vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 80px);
  position: relative;
  overflow: hidden;
}

.page-teams .hero-bg{ position: absolute; inset: 0; overflow: hidden; }

.page-teams .hero-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--signal-1) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--signal-1) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}

.page-teams .hero-glow-a{
  position: absolute;
  width: clamp(300px, 50vw, 600px); height: clamp(300px, 50vw, 600px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal-1) 10%, transparent) 0%, transparent 70%);
  top: 10%; right: -100px;
  animation: pulse-glow-teams 6s ease-in-out infinite;
}
.page-teams .hero-glow-b{
  position: absolute;
  width: clamp(200px, 35vw, 400px); height: clamp(200px, 35vw, 400px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 10%, transparent) 0%, transparent 70%);
  top: 30%; left: 5%;
  animation: pulse-glow-teams 8s ease-in-out infinite 2s;
}

@keyframes pulse-glow-teams {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

.page-teams .hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  width: 100%;
}

.page-teams .hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rest-text);
  background: color-mix(in srgb, var(--signal-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 25%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 4vw, 32px);
  animation: fade-up-teams 0.8s ease both;
}
.page-teams .hero-eyebrow::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rest);
  animation: blink-teams 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink-teams { 0%,100%{opacity:1} 50%{opacity:0.3} }

.page-teams .hero-h1{
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: clamp(20px, 3vw, 28px);
  animation: fade-up-teams 0.8s ease 0.1s both;
}
.page-teams .hero-h1 .accent{ color: var(--rest-text); }
.page-teams .hero-h1 .accent-peak{ color: var(--hero-on-surface); }

.page-teams .hero-sub{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vw, 44px);
  animation: fade-up-teams 0.8s ease 0.2s both;
}

.page-teams .hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  animation: fade-up-teams 0.8s ease 0.3s both;
}

.page-teams .status-bar{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(28px, 4vw, 40px);
}
.page-teams .status-chip{
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.4vw, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-teams .status-chip::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.page-teams .chip-rest{ background: color-mix(in srgb, var(--signal-1) 12%, transparent);  color: var(--rest-text); }
.page-teams .chip-rest::before{ background: var(--rest); }
.page-teams .chip-peak{ background: color-mix(in srgb, var(--hero) 12%, transparent);  color: var(--hero-on-surface); }
.page-teams .chip-peak::before{ background: var(--peak); }
.page-teams .chip-flow{ background: color-mix(in srgb, var(--secondary) 12%, transparent);  color: var(--flow-text); }
.page-teams .chip-flow::before{ background: var(--flow); }
.page-teams .chip-load{ background: color-mix(in srgb, var(--signal-4) 12%, transparent);  color: var(--warn-text); }
.page-teams .chip-load::before{ background: var(--load); }

.page-teams /* ── MARQUEE ── */
.feat-strip{
  display: flex;
  overflow: hidden;
  background: var(--ink3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.page-teams .feat-strip-inner{
  display: flex;
  animation: marquee-teams 30s linear infinite;
  white-space: nowrap;
}
@keyframes marquee-teams { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.page-teams .strip-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 36px;
  border-right: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.page-teams .strip-item .dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.page-teams /* ── HOW IT WORKS ── */
.hiw{
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  padding: 0;
}
.page-teams .hiw-left{
  padding: clamp(48px,8vw,100px) clamp(24px,5vw,64px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-teams .hiw-right{
  padding: clamp(40px,6vw,60px) clamp(24px,5vw,48px);
  display: flex;
  flex-direction: column;
}
.page-teams .hiw-step{
  padding: clamp(20px,3vw,28px) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  cursor: pointer;
}
.page-teams .hiw-step:first-child{ padding-top: 0; }
.page-teams .hiw-step:last-child{ border-bottom: none; }
.page-teams .hiw-step.active .step-num{ background: var(--rest); color: var(--on-signal-1); }
.page-teams .hiw-step.active .step-title{ color: var(--text-primary); }
.page-teams .step-num{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.page-teams .step-title{
  font-size: clamp(14px,2vw,16px);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.page-teams .step-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.65;
}

.page-teams /* ── FEATURES ── */
.features{ background: var(--ink2); }
.page-teams .features-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: clamp(40px,6vw,64px);
}
.page-teams .feat-card{
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,32px);
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.page-teams .feat-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.page-teams .feat-card:hover{ border-color: color-mix(in srgb, var(--contrast-base) 14%, transparent); transform: translateY(-4px); }
.page-teams .feat-card:hover::before{ opacity: 1; }
.page-teams .feat-card.rest::before{ background: var(--rest); }
.page-teams .feat-card.peak::before{ background: var(--peak); }
.page-teams .feat-card.load::before{ background: var(--load); }
.page-teams .feat-card.flow::before{ background: var(--flow); }
.page-teams .feat-icon{
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.page-teams .feat-icon.rest{ background: var(--rest-glow); }
.page-teams .feat-icon.peak{ background: var(--peak-glow); }
.page-teams .feat-icon.load{ background: color-mix(in srgb, var(--signal-4) 15%, transparent); }
.page-teams .feat-icon.flow{ background: var(--flow-glow); }
.page-teams .feat-title{
  font-size: clamp(14px,2vw,17px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.page-teams .feat-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
}

.page-teams /* ── SOCIAL PROOF ── */
.social{ background: var(--ink); text-align: center; }
.page-teams .stats-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(40px,6vw,64px);
}
.page-teams .stat-cell{
  background: var(--ink2);
  padding: clamp(24px,4vw,40px) clamp(16px,3vw,24px);
  text-align: center;
  min-width: 0;
}
.page-teams .stat-num{
  font-size: clamp(28px,5vw,42px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.page-teams .stat-num span{ color: var(--rest-text); }
.page-teams .stat-label{
  font-size: clamp(10px,1.5vw,12px);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.page-teams .quotes-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 48px;
}
.page-teams .quote-card{
  background: var(--ink2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px,3vw,28px);
  text-align: left;
  min-width: 0;
}
.page-teams .quote-text{
  font-size: clamp(12px,1.8vw,14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}
.page-teams .quote-meta{ display: flex; align-items: center; gap: 12px; }
.page-teams .quote-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-on-accent);
  flex-shrink: 0;
}
.page-teams .quote-name{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
.page-teams .quote-role{ font-size: 11px; color: var(--muted); margin-top: 1px; }

.page-teams /* ── CONTACT SALES CARD ── */
.sales-section{ background: var(--ink2); text-align: center; }
.page-teams .sales-card{
  max-width: 560px;
  margin: clamp(40px,6vw,64px) auto 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--signal-1) 8%, transparent) 0%, var(--ink) 60%);
  border: 1px solid var(--rest);
  border-radius: var(--r-lg);
  padding: clamp(28px,4vw,48px);
  text-align: left;
}
.page-teams .sales-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--signal-1) 12%, transparent);
  color: var(--rest-text);
  margin-bottom: 20px;
}
.page-teams .sales-name{
  font-size: clamp(22px,3vw,28px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.page-teams .sales-price{
  font-size: clamp(20px,3vw,28px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.page-teams .sales-note{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.page-teams .sales-desc{
  font-size: 13px;
  font-weight: 300;
  color: var(--subtle-text);
  line-height: 1.7;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.page-teams .sales-feature{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 7px 0;
}
.page-teams .sales-check{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--signal-1) 15%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-teams .sales-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.page-teams .sales-btn-primary{
  flex: 1;
  text-align: center;
  padding: 14px;
  border-radius: 100px;
  background: var(--rest);
  color: var(--on-signal-1);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  min-width: 160px;
}
.page-teams .sales-btn-primary:hover{ opacity: 0.88; transform: translateY(-1px); }
.page-teams .sales-btn-ghost{
  flex: 1;
  text-align: center;
  padding: 14px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 12%, transparent);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  min-width: 160px;
}
.page-teams .sales-btn-ghost:hover{ border-color: color-mix(in srgb, var(--contrast-base) 30%, transparent); color: var(--text-primary); }

.page-teams /* ── CTA ── */
.cta-section{
  background: var(--ink);
  padding: clamp(80px,10vw,120px) clamp(20px,5vw,48px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-teams .cta-glow{
  position: absolute;
  width: min(800px,100%); height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--signal-1) 8%, transparent) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.page-teams .cta-h2{
  font-size: clamp(32px,5vw,66px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
  position: relative;
}
.page-teams .cta-h2 .accent{ color: var(--rest-text); }
.page-teams .cta-sub{
  font-size: clamp(14px,2vw,17px);
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 44px;
  position: relative;
}
.page-teams .cta-btns{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── BREAKPOINTS ── */
@media screen and (max-width: 768px) {
  .page-teams section{ max-width: 100vw; box-sizing: border-box; }
  .page-teams .hiw{ grid-template-columns: minmax(0,1fr) !important; }
  .page-teams .hiw-left{ border-right: none; border-bottom: 1px solid var(--rule); padding: clamp(40px,6vw,60px) clamp(20px,5vw,40px); }
  .page-teams .hiw-right{ padding: clamp(32px,5vw,48px) clamp(20px,5vw,40px); }
  .page-teams .features-grid{ grid-template-columns: minmax(0,1fr) !important; }
  .page-teams .stats-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .page-teams .stat-cell{ padding: 24px 16px; }
  .page-teams .quotes-row{ grid-template-columns: minmax(0,1fr) !important; }
  .page-teams .sales-actions{ flex-direction: column; }
}

@media screen and (max-width: 480px) {
  .page-teams .hero-actions{ flex-direction: column; align-items: stretch; }
  .page-teams .hero-actions .btn-primary,.page-teams .hero-actions .btn-ghost{ justify-content: center; width: 100%; }
  .page-teams .stat-cell{ padding: 18px 10px; }
  .page-teams .stat-num{ font-size: 28px; }
  .page-teams .cta-btns{ flex-direction: column; align-items: stretch; }
  .page-teams .cta-btns .btn-primary,.page-teams .cta-btns .btn-ghost{ justify-content: center; width: 100%; }
}


/* terms.html */

body.page-terms, body.page-terms *,.page-terms *::before,.page-terms *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html.page-terms{ scroll-behavior: smooth; overflow-x: hidden; }



body.page-terms{
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-secondary);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.page-terms .accent-bar{
  height: 3px;
  background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%);
  flex-shrink: 0;
}

.page-terms .bg{
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.page-terms .bg-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero) 3%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, var(--text-on-accent) 20%, transparent 100%);
}
.page-terms .bg-glow{
  position: absolute;
  width: 700px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero) 6%, transparent) 0%, transparent 70%);
  top: -10%; left: 50%; transform: translateX(-50%);
}

.page-terms /* ── LAYOUT ── */
.page-wrap{
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(100px, 12vw, 140px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 100px);
}

.page-terms /* ── HEADER BLOCK ── */
.policy-header{
  margin-bottom: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(32px, 5vw, 48px);
  border-bottom: 1px solid var(--rule);
}

.page-terms .policy-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-on-surface);
  background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.page-terms .eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--peak);
  animation: pulse-dot-terms 2.4s ease-in-out infinite;
}
@keyframes pulse-dot-terms { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

.page-terms .policy-title{
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 20px;
}
.page-terms .policy-title span{ color: var(--hero-on-surface); }

.page-terms .policy-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-terms .meta-chip{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: color-mix(in srgb, var(--contrast-base) 4%, transparent);
  border: 1px solid var(--rule);
  padding: 5px 14px;
  border-radius: 100px;
}

.page-terms .policy-intro{
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 24px;
  max-width: 700px;
}

.page-terms /* ── TABLE OF CONTENTS ── */
.toc{
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--peak);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.page-terms .toc-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.page-terms .toc-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-terms .toc-list li a{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s;
}
.page-terms .toc-list li a:hover{ color: var(--text-primary); }
.page-terms .toc-num{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--hero-on-surface);
  opacity: 0.7;
  min-width: 24px;
}

.page-terms /* ── SECTIONS ── */
.policy-section{
  margin-bottom: clamp(48px, 7vw, 80px);
  scroll-margin-top: 100px;
}

.page-terms .policy-section-header{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.page-terms .section-number{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  color: var(--hero-on-surface);
  letter-spacing: 0.1em;
  padding-top: 6px;
  flex-shrink: 0;
}
.page-terms .section-title{
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.page-terms /* ── CONTENT ELEMENTS ── */
.policy-p{
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 20px;
}
.page-terms .policy-p:last-child{ margin-bottom: 0; }

.page-terms .policy-p a{
  color: var(--hero-on-surface);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 30%, transparent);
  transition: border-color 0.2s, color 0.2s;
}
.page-terms .policy-p a:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 40%, transparent); }

.page-terms .policy-h3{
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 28px 0 12px;
}
.page-terms .policy-h3:first-child{ margin-top: 0; }

.page-terms .policy-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.page-terms .policy-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
}
.page-terms .policy-list li::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--peak);
  flex-shrink: 0;
  margin-top: 9px;
}
.page-terms .policy-list.orange li::before{ background: var(--load); }
.page-terms .policy-list.green li::before{ background: var(--rest); }

.page-terms /* ── CALLOUT BOXES ── */
.callout{
  border-radius: 12px;
  padding: clamp(16px, 3vw, 24px) clamp(18px, 3vw, 28px);
  margin: 24px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.page-terms .callout-peak{
  background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
  border-left: 3px solid var(--peak);
}
.page-terms .callout-rest{
  background: color-mix(in srgb, var(--signal-1) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 20%, transparent);
  border-left: 3px solid var(--rest);
}
.page-terms .callout-warn{
  background: color-mix(in srgb, var(--signal-4) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-4) 20%, transparent);
  border-left: 3px solid var(--load);
}
.page-terms .callout-flow{
  background: color-mix(in srgb, var(--secondary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 20%, transparent);
  border-left: 3px solid var(--flow);
}
.page-terms .callout-icon{ font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.page-terms .callout-text{
  font-size: clamp(12px, 1.7vw, 14px);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
}
.page-terms .callout-text strong{
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.page-terms /* ── CONTACT CARD ── */
.contact-card{
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  margin-top: 32px;
}
.page-terms .contact-card-title{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.page-terms .contact-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(12px, 1.7vw, 14px);
}
.page-terms .contact-row:last-child{ border-bottom: none; }
.page-terms .contact-label{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 80px;
  padding-top: 2px;
  flex-shrink: 0;
}
.page-terms .contact-value{ color: var(--text-secondary); font-weight: 300; line-height: 1.6; }
.page-terms .contact-value a{
  color: var(--hero-on-surface);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 30%, transparent);
  transition: color 0.2s, border-color 0.2s;
}
.page-terms .contact-value a:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 40%, transparent); }

.page-terms /* ── DIVIDER ── */
.policy-divider{
  height: 1px;
  background: var(--rule);
  margin: clamp(40px, 5vw, 60px) 0;
}

/* ── BREAKPOINTS ── */
@media screen and (max-width: 768px) {
  .page-terms .toc-list{ gap: 2px; }
  .page-terms .policy-meta{ gap: 8px; }
}
@media screen and (max-width: 480px) {
  .page-terms .policy-section-header{ flex-direction: column; gap: 6px; }
  .page-terms .contact-row{ flex-direction: column; gap: 4px; }
  .page-terms .contact-label{ min-width: unset; }
}


/* verify-email.html */

body.page-verify-email, body.page-verify-email *,.page-verify-email *::before,.page-verify-email *::after{ box-sizing: border-box; margin: 0; padding: 0; }

body.page-verify-email{
  font-family: var(--font-display);
  background: var(--ink); color: var(--text-secondary);
  min-height: 100svh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.page-verify-email .accent-bar{ height: 3px; background: linear-gradient(90deg, var(--rest) 0%, var(--peak) 50%, var(--flow) 100%); }
.page-verify-email .bg{ position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.page-verify-email .bg-grid{
  position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--hero) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, var(--text-on-accent) 30%, transparent 100%);
}
.page-verify-email .bg-glow{
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal-1) 8%, transparent) 0%, transparent 70%);
  top: -10%; left: 50%; transform: translateX(-50%);
}
.page-verify-email main{
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px; text-align: center;
}
.page-verify-email .icon-wrap{
  width: 80px; height: 80px; border-radius: 50%;
  background: color-mix(in srgb, var(--signal-1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--signal-1) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 32px;
  animation: fade-up-verify-email 0.6s ease both;
}
.page-verify-email .status-pill{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rest-text); background: color-mix(in srgb, var(--signal-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 25%, transparent);
  padding: 6px 16px; border-radius: 100px; margin-bottom: 28px;
  animation: fade-up-verify-email 0.6s ease 0.1s both;
}
.page-verify-email .pill-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--rest);
  animation: pulse-dot-verify-email 2.4s ease-in-out infinite;
}
@keyframes pulse-dot-verify-email { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }
.page-verify-email h1{
  font-size: clamp(32px, 6vw, 56px); font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.04em; line-height: 1; margin-bottom: 20px;
  animation: fade-up-verify-email 0.6s ease 0.15s both;
}
.page-verify-email h1 .c-rest{ color: var(--rest-text); }
.page-verify-email h1 .c-peak{ color: var(--hero-on-surface); }
.page-verify-email .sub{
  font-size: 16px; font-weight: 300; color: var(--muted);
  line-height: 1.7; max-width: 440px; margin: 0 auto 40px;
  animation: fade-up-verify-email 0.6s ease 0.2s both;
}
.page-verify-email .email-display{
  display: inline-block; font-family: var(--font-mono); font-size: 13px;
  color: var(--hero-on-surface); background: color-mix(in srgb, var(--hero) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero) 20%, transparent); border-radius: 8px;
  padding: 8px 20px; margin-bottom: 40px;
  animation: fade-up-verify-email 0.6s ease 0.25s both;
}
.page-verify-email .steps{
  display: flex; flex-direction: column; gap: 16px;
  max-width: 380px; width: 100%; margin: 0 auto 40px;
  animation: fade-up-verify-email 0.6s ease 0.3s both;
}
.page-verify-email .step{
  display: flex; align-items: flex-start; gap: 14px;
  background: color-mix(in srgb, var(--contrast-base) 3%, transparent); border: 1px solid var(--rule);
  border-radius: 12px; padding: 16px 18px; text-align: left;
}
.page-verify-email .step-num{
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--hero) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hero) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--hero-on-surface);
  flex-shrink: 0; margin-top: 1px;
}
.page-verify-email .step-text{ font-size: 13px; font-weight: 300; color: var(--text-secondary); line-height: 1.5; }
.page-verify-email .btn-ghost{
  display: inline-flex; align-items: center; height: 46px; padding: 0 24px;
  border-radius: 100px; background: transparent; color: var(--muted);
  font-family: var(--font-display); font-size: 13px; font-weight: 400;
  border: 1px solid color-mix(in srgb, var(--contrast-base) 10%, transparent); cursor: pointer;
  text-decoration: none; transition: color 0.2s, border-color 0.2s;
  animation: fade-up-verify-email 0.6s ease 0.35s both;
}
.page-verify-email .btn-ghost:hover{ color: var(--text-primary); border-color: color-mix(in srgb, var(--contrast-base) 25%, transparent); }
@keyframes fade-up-verify-email { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.page-verify-email footer{
  position: relative; z-index: 1; background: var(--ink2);
  border-top: 1px solid var(--rule);
  padding: 20px 48px; display: flex; justify-content: space-between; align-items: center;
}
.page-verify-email .footer-copy{ font-family: var(--font-mono); font-size: 11px; color: var(--subtle-text); letter-spacing: 0.04em; }

/* ============================================================
   UPWELL 2026 — ORANGE-GOLD / CHARCOAL PRODUCT SYSTEM
   Canonical global theme with restrained cross-theme accents.
   ============================================================ */
:root {
  color-scheme: dark;
  --background-deep: #151512;
  --background-primary: #24231F;
  --background-elevated: color-mix(in srgb, #FFFDF8 5%, #24231F);
  --background-subtle: color-mix(in srgb, #F4A51C 9%, #24231F);
  --text-primary: #FFFDF8;
  --text-secondary: #EAE4D8;
  --text-muted: color-mix(in srgb, #FFFDF8 62%, #24231F);
  --text-disabled: color-mix(in srgb, #FFFDF8 36%, #24231F);
  --text-on-accent: #24231F;
  --border-subtle: color-mix(in srgb, #D8D0C2 12%, transparent);
  --border-standard: color-mix(in srgb, #D8D0C2 22%, transparent);
  --border-emphasis: #F4A51C;
  --hero: #F4A51C;
  --hero-dark: #C97808;
  --hero-surface: color-mix(in srgb, #F4A51C 10%, #24231F);
  --hero-glow: #FFD487;
  --hero-on-surface: #FFD487;
  --secondary: #A935F0;
  --secondary-dark: #7118A7;
  --secondary-glow: #D897FF;
  --signal-1: #00AFA8;
  --signal-2: #3F7D44;
  --signal-3: #47A9EA;
  --signal-4: #D7193F;
  --signal-5: #98112D;
  --signal-1-cell: color-mix(in srgb, #00AFA8 12%, #151512);
  --signal-2-cell: color-mix(in srgb, #3F7D44 14%, #151512);
  --signal-3-cell: color-mix(in srgb, #47A9EA 12%, #151512);
  --signal-4-cell: color-mix(in srgb, #D7193F 12%, #151512);
  --signal-5-cell: color-mix(in srgb, #98112D 14%, #151512);
  --error: #D7193F;
  --error-dark: #98112D;
  --error-surface: color-mix(in srgb, #D7193F 12%, #151512);
  --accent-gradient-start: #C97808;
  --accent-gradient-mid: #F4A51C;
  --accent-gradient-end: #FFD487;
  --chart-background: #151512;
  --chart-surface: #24231F;
  --chart-border: color-mix(in srgb, #D8D0C2 22%, transparent);
  --chart-grid-line: color-mix(in srgb, #D8D0C2 10%, transparent);
  --chart-y-axis-label: color-mix(in srgb, #FFFDF8 60%, #24231F);
  --chart-time-axis-label: color-mix(in srgb, #FFFDF8 60%, #24231F);
  --chart-now-line: #FFFDF8;
  --chart-zone-pill-hero-bg: color-mix(in srgb, #F4A51C 14%, #24231F);
  --chart-zone-pill-secondary-bg: color-mix(in srgb, #A935F0 14%, #24231F);

  --ink: var(--background-deep);
  --ink2: var(--background-primary);
  --ink3: var(--background-elevated);
  --slate: var(--text-disabled);
  --muted: var(--text-muted);
  --rule: var(--border-subtle);
  --peak: var(--hero);
  --peak-glow: color-mix(in srgb, var(--hero) 18%, transparent);
  --peak-lt: var(--hero-glow);
  --peak-dk: var(--hero-dark);
  --flow: var(--secondary);
  --flow-glow: color-mix(in srgb, var(--secondary) 18%, transparent);
  --flow-lt: var(--secondary-glow);
  --rest: var(--signal-1);
  --rest-glow: color-mix(in srgb, var(--signal-1) 16%, transparent);
  --rest-lt: color-mix(in srgb, var(--signal-1) 32%, #FFFDF8);
  --load: var(--signal-4);
  --load-glow: color-mix(in srgb, var(--signal-4) 16%, transparent);
  --load-lt: color-mix(in srgb, var(--signal-4) 30%, #FFFDF8);
  --warn: #B1F23B;
  --warn-glow: color-mix(in srgb, #B1F23B 14%, transparent);
  --canvas: var(--background-primary);
  --white: var(--text-primary);
  --contrast-base: var(--text-primary);
  --subtle-text: var(--text-muted);
  --flow-text: var(--secondary-glow);
  --rest-text: color-mix(in srgb, var(--signal-1) 35%, #FFFDF8);
  --warn-text: #DCFF91;
  --load-text: color-mix(in srgb, var(--signal-4) 28%, #FFFDF8);
  --on-secondary: #FFFDF8;
  --on-signal-1: #151512;

  --accent-purple: #A935F0;
  --accent-teal: #00AFA8;
  --accent-laurel: #3F7D44;
  --accent-ruby: #D7193F;
  --accent-sky: #47A9EA;
  --accent-citrine: #B1F23B;
  --paper: #FFFDF8;
  --cream: #F7F1E6;
  --stone: #EAE4D8;
  --brand-line: #D8D0C2;
}

html { background: var(--background-deep); }
body {
  background: var(--background-deep);
  color: var(--text-secondary);
}
body::selection { background: var(--hero); color: var(--text-on-accent); }

/* Approved Phasefold identity */
.brand-icon {
  background: transparent url('/upwell-icon.svg') center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}
.nav-wordmark-image { display: block; width: 178px; height: auto; }
.footer-wordmark-image { display: block; width: 166px; height: auto; }
.compact-wordmark-image { display: block; width: 116px; height: auto; }
.nav-logo, .footer-nav-logo { gap: 0; }

/* Shared navigation and footer */
nav:not(.nav-drawer) {
  height: 76px;
  padding-inline: clamp(20px, 4vw, 64px);
  background: color-mix(in srgb, var(--background-deep) 93%, transparent);
  border-bottom-color: color-mix(in srgb, var(--hero) 24%, transparent);
}
.nav-links { gap: clamp(22px, 3vw, 42px); }
.nav-links a { color: var(--text-secondary); }
.nav-links a:hover { color: var(--hero-glow); }
.nav-cta, .nav-drawer .drawer-cta {
  color: var(--text-on-accent) !important;
  background: var(--hero);
  border: 1px solid var(--hero);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--hero) 18%, transparent);
}
.nav-burger span { background: var(--hero-glow); }
.nav-drawer { background: color-mix(in srgb, var(--background-deep) 98%, transparent); }
footer {
  background: var(--background-deep);
  border-top: 1px solid color-mix(in srgb, var(--hero) 24%, transparent);
  padding-top: 72px;
}
.footer-brand p { color: var(--text-muted); }
.footer-col-title { color: var(--hero-glow); }
.footer-links a, .footer-legal a, .footer-copy { color: var(--text-muted); }
.footer-links a:hover, .footer-legal a:hover { color: var(--hero-glow); }

/* Global editorial rhythm */
.page-home section,
.page-individuals section,
.page-families section,
.page-students section,
.page-teams section {
  position: relative;
}
.section-eyebrow, .hero-eyebrow, .pill, .status-pill {
  letter-spacing: .16em;
}
.section-h2, .hero-h1, .cta-h2 {
  text-wrap: balance;
}
.section-lead, .hero-sub, .cta-sub {
  color: var(--text-muted);
}
.btn-primary, .tier-btn.primary, .plan-btn, .ml-btn, .form-btn, .btn-submit {
  background: var(--hero) !important;
  color: var(--text-on-accent) !important;
  border-color: var(--hero) !important;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--hero) 16%, transparent);
}
.btn-primary:hover, .tier-btn.primary:hover, .plan-btn:hover, .ml-btn:hover, .form-btn:hover, .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--hero) 24%, transparent);
}
.btn-ghost, .tier-btn.ghost {
  border-color: color-mix(in srgb, var(--hero) 25%, transparent) !important;
  color: var(--text-secondary) !important;
}
.btn-ghost:hover, .tier-btn.ghost:hover {
  border-color: var(--hero) !important;
  color: var(--hero-glow) !important;
}

/* Flagship and audience heroes */
.page-home .hero,
.page-individuals .hero,
.page-families .hero,
.page-students .hero,
.page-teams .hero {
  background: var(--background-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 18%, transparent);
}
.page-home .hero::after,
.page-individuals .hero::after,
.page-families .hero::after,
.page-students .hero::after,
.page-teams .hero::after {
  content: '';
  position: absolute;
  inset: 76px auto 0 0;
  width: 4px;
  background: var(--hero);
  z-index: 2;
}
.hero-h1 .accent, .cta-h2 .accent, .c-peak { color: var(--hero-glow) !important; }
.hero-h1 .accent-flow, .c-flow { color: var(--secondary-glow) !important; }
.hero-eyebrow {
  color: var(--hero-glow) !important;
  border-color: color-mix(in srgb, var(--hero) 34%, transparent) !important;
  background: color-mix(in srgb, var(--hero) 9%, transparent) !important;
}

/* Data strip and interactive rhythm surfaces */
.feat-strip, .wave-strip {
  background: var(--background-primary);
  border-color: color-mix(in srgb, var(--hero) 18%, transparent);
}
.hiw {
  background: var(--background-deep);
}
.hiw-step {
  border-left: 2px solid transparent;
  background: transparent;
}
.hiw-step .step-num { color: var(--text-muted) !important; }
.quote-avatar { color: var(--text-primary) !important; }
.hiw-step:hover { background: color-mix(in srgb, var(--hero) 5%, transparent); }
.hiw-step.active {
  border-left-color: var(--hero) !important;
  background: color-mix(in srgb, var(--hero) 9%, transparent) !important;
}
.hiw-step.active .step-num, .hiw-step.active .step-title { color: var(--hero-glow) !important; }

/* Six-card feature systems use each non-primary theme exactly once. */
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features {
  background: var(--background-primary);
  border-block: 1px solid var(--border-subtle);
}
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features > .section-eyebrow {
  color: var(--hero-glow) !important;
}
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card:nth-child(1) { --card-accent: var(--accent-purple); --card-icon-ink: var(--text-primary); }
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card:nth-child(2) { --card-accent: var(--accent-teal); --card-icon-ink: var(--background-deep); }
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card:nth-child(3) { --card-accent: var(--accent-laurel); --card-icon-ink: var(--text-primary); }
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card:nth-child(4) { --card-accent: var(--accent-ruby); --card-icon-ink: var(--text-primary); }
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card:nth-child(5) { --card-accent: var(--accent-sky); --card-icon-ink: var(--background-deep); }
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card:nth-child(6) { --card-accent: var(--accent-citrine); --card-icon-ink: var(--background-deep); }
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card {
  background: color-mix(in srgb, var(--paper) 3%, var(--background-primary)) !important;
  border: 1px solid var(--border-subtle) !important;
  border-top: 3px solid var(--card-accent) !important;
  box-shadow: 0 18px 55px color-mix(in srgb, #151512 50%, transparent);
}
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid > .feat-card::before {
  background: var(--card-accent) !important;
}
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid .feat-icon {
  color: var(--card-icon-ink);
  background: var(--card-accent) !important;
}
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid .feat-icon :is(.svg-4f60c1d7cf, .svg-5d99351b9c, .svg-a2d68c3bd7, .svg-deda68c615) {
  stroke: currentColor !important;
}
:is(.page-home, .page-individuals, .page-families, .page-students, .page-teams) .features-grid .feat-icon :is(.svg-03bc5e2652, .svg-03d1b26dee, .svg-1f2a420058, .svg-270a4cbbcf, .svg-48630c89f9, .svg-612f2945c5, .svg-6e5d82ff69, .svg-97b0de8578, .svg-9ecb251f30, .svg-b227d67b07, .svg-d8823bf598, .svg-e516f84fc2) {
  fill: currentColor !important;
}

/* Keep status roles internally consistent. */
.chip-load { color: var(--load-text) !important; }
.page-maintenance .status-card { border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.page-maintenance .status-icon.warn { box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 50%, transparent); }
.page-maintenance .chip-warn {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 24%, transparent);
  color: var(--warn-text);
}

/* Security classes describe data roles rather than legacy color names. */
.page-security .arch-node.health-data { border-color: color-mix(in srgb, var(--signal-1) 30%, transparent); background: color-mix(in srgb, var(--signal-1) 6%, transparent); }
.page-security .arch-node.identity-data { border-color: color-mix(in srgb, var(--hero) 30%, transparent); background: color-mix(in srgb, var(--hero) 6%, transparent); }
.page-security .arch-node.secret { border-color: color-mix(in srgb, var(--secondary) 30%, transparent); background: color-mix(in srgb, var(--secondary) 6%, transparent); }
.page-security .arch-node.discarded { border-color: color-mix(in srgb, var(--signal-4) 30%, transparent); background: color-mix(in srgb, var(--signal-4) 6%, transparent); }
.page-security .badge-separation { background: color-mix(in srgb, var(--signal-1) 10%, transparent); border: 1px solid color-mix(in srgb, var(--signal-1) 25%, transparent); color: var(--rest-text); }
.page-security .badge-platform { background: color-mix(in srgb, var(--hero) 10%, transparent); border: 1px solid color-mix(in srgb, var(--hero) 25%, transparent); color: var(--hero-on-surface); }
.page-security .badge-access { background: color-mix(in srgb, var(--secondary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--secondary) 25%, transparent); color: var(--flow-text); }

/* Proof, capture, offers, and CTA */
.social {
  background: color-mix(in srgb, var(--accent-teal) 4%, var(--background-deep));
  border-block: 1px solid color-mix(in srgb, var(--accent-teal) 18%, transparent);
}
.social > .section-eyebrow { color: color-mix(in srgb, var(--accent-teal) 35%, #FFFDF8) !important; }
.stat-cell, .quote-card {
  background: color-mix(in srgb, var(--paper) 3%, var(--background-primary)) !important;
  border-color: var(--border-subtle) !important;
}
.stat-num { color: var(--hero-glow) !important; }
.mailinglist {
  background: color-mix(in srgb, var(--accent-sky) 5%, var(--background-primary));
  border-block: 1px solid color-mix(in srgb, var(--accent-sky) 22%, transparent);
}
.mailinglist .section-eyebrow { color: color-mix(in srgb, var(--accent-sky) 35%, #FFFDF8) !important; }
.mailinglist-form, .form-card, .signup-card, .review-card, .payment-card {
  background: color-mix(in srgb, var(--paper) 4%, var(--background-primary)) !important;
  border: 1px solid var(--border-standard) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, #151512 58%, transparent);
}
.tiers, .plan-section {
  background: color-mix(in srgb, var(--accent-laurel) 4%, var(--background-deep));
}
.tier-card, .plan-card, .access-card {
  background: color-mix(in srgb, var(--paper) 3%, var(--background-primary)) !important;
  border-color: var(--border-standard) !important;
}
.tier-card.featured, .plan-card {
  border-color: var(--hero) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--hero) 13%, transparent);
}
.cta-section {
  background: var(--background-primary);
  border-top: 1px solid color-mix(in srgb, var(--hero) 22%, transparent);
}

/* Forms and legal/trust pages */
input, select, textarea {
  accent-color: var(--hero);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--hero) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero) 12%, transparent);
}
.page-privacy .legal-hero,
.page-terms .legal-hero,
.page-security .legal-hero {
  background: color-mix(in srgb, var(--hero) 5%, var(--background-deep));
  border-bottom: 1px solid color-mix(in srgb, var(--hero) 20%, transparent);
}
.page-privacy .toc,
.page-terms .toc,
.page-security .toc,
.page-privacy .callout,
.page-terms .callout,
.page-security .callout {
  background: color-mix(in srgb, var(--paper) 3%, var(--background-primary));
  border-color: var(--border-standard);
}

/* Utility pages use the icon as a full-color object, not a monochrome mask */
.page-404 .mark,
.page-comingsoon .mark,
.page-maintenance .mark,
.page-placeholder .mark,
.page-connect .logomark,
.page-signup .logomark {
  filter: drop-shadow(0 14px 32px color-mix(in srgb, var(--hero) 22%, transparent));
}
.page-404 .accent-bar,
.page-comingsoon .accent-bar,
.page-confirm .accent-bar,
.page-maintenance .accent-bar,
.page-placeholder .accent-bar,
.page-signup .accent-bar,
.page-verify-email .accent-bar {
  background: var(--hero);
}

@media (max-width: 768px) {
  .nav-wordmark-image { width: 150px; }
  .footer-wordmark-image { width: 148px; }
  .page-home .hero::after,
  .page-individuals .hero::after,
  .page-families .hero::after,
  .page-students .hero::after,
  .page-teams .hero::after { width: 3px; }
  .feat-card, .tier-card, .plan-card { box-shadow: none; }
}

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