/* Nine27Fit tokens, copied from the sales site (pt-site) so the app matches it. The app runs the Steel
   palette (data-theme="steel" on <html>); the others are kept so a palette swap stays a one-word change. */
:root, [data-theme="blackout"] {
  --bg: #0D0E10;  --bg-2: #131417;  --surface: #1A1C1F;  --field: #111214;
  --line: #26282C;  --line-strong: #373A40;
  --text-strong: #F4F1EA;  --text: #D6D3CC;  --muted: #9A968D;  --faint: #6C6962;
  --accent: #CFA95E;  --accent-deep: #E3C488;  --accent-wash: rgba(207, 169, 94, .13);
  --foil: linear-gradient(135deg, #E2C88C 0%, #B8914E 45%, #D2AF68 70%, #957038 100%);
  --btn-bg: #F4F1EA;  --btn-fg: #0D0E10;  --btn-2-bg: transparent;
  --dark: #17150F;  --dark-line: rgba(207, 169, 94, .22);  --on-dark: #F4F1EA;  --on-dark-muted: #A9A395;
  --hero-bg: #08090A;  --hero-grid: rgba(255, 255, 255, .045);  --chrome: rgba(14, 15, 17, .66);
  --ph-bg: rgba(207, 169, 94, .16);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -20px rgba(0,0,0,.7);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.3), 0 28px 56px -26px rgba(0,0,0,.8);
  --grain-op: .05;
  color-scheme: dark;
}
[data-theme="midnight"] {
  --bg: #0B1220;  --bg-2: #0F182A;  --surface: #142036;  --field: #0D1627;
  --line: #1F2C45;  --line-strong: #2E3E5C;
  --text-strong: #F2EEE4;  --text: #D3D7DF;  --muted: #8E97A8;  --faint: #5F6A7E;
  --accent: #D2AE66;  --accent-deep: #E6C98E;  --accent-wash: rgba(210, 174, 102, .13);
  --btn-bg: #F2EEE4;  --btn-fg: #0B1220;
  --dark: #060B15;  --dark-line: rgba(210, 174, 102, .22);  --on-dark: #F2EEE4;  --on-dark-muted: #9AA3B4;
  --hero-bg: #0A1426;  --hero-grid: rgba(160, 190, 255, .06);  --chrome: rgba(10, 20, 38, .74);
  --ph-bg: rgba(210, 174, 102, .16);
  color-scheme: dark;
}
[data-theme="steel"] {
  --bg: #EDEEEF;  --bg-2: #E1E3E5;  --surface: #FFFFFF;  --field: #FFFFFF;
  --line: #D6D9DC;  --line-strong: #C1C5CA;
  --text-strong: #0E1626;  --text: #222831;  --muted: #646B76;  --faint: #9AA0A9;
  --accent: #D2AE66;  --accent-deep: #6B5226;  --accent-wash: #F3EDDF;
  --btn-bg: #0F1B33;  --btn-fg: #F4F1EA;  --btn-2-bg: #FFFFFF;
  --dark: #0F1B33;  --dark-line: rgba(210, 174, 102, .22);  --on-dark: #F2EEE4;  --on-dark-muted: #A3ACBD;
  --hero-bg: #0A1426;  --hero-grid: rgba(160, 190, 255, .06);  --chrome: rgba(10, 20, 38, .74);
  --ph-bg: #F2ECDF;
  --shadow-soft: 0 1px 2px rgba(17,19,22,.05), 0 12px 30px -18px rgba(17,19,22,.25);
  --shadow-lift: 0 2px 4px rgba(17,19,22,.05), 0 24px 48px -24px rgba(17,19,22,.35);
  --grain-op: .05;
  color-scheme: light;
}
[data-theme="bone"] {
  --bg: #F6F3EC;  --bg-2: #EEE9DE;  --surface: #FFFDF8;  --field: #FFFFFF;
  --line: #E3DCCD;  --line-strong: #D3C9B5;
  --text-strong: #16191D;  --text: #22262B;  --muted: #72706A;  --faint: #A29E94;
  --accent: #D2AE66;  --accent-deep: #6F5226;  --accent-wash: #F5EEDC;
  --btn-bg: #0F1B33;  --btn-fg: #F6F1E4;  --btn-2-bg: #FFFDF8;
  --dark: #0F1B33;  --dark-line: rgba(210, 174, 102, .22);  --on-dark: #F2EEE4;  --on-dark-muted: #A3ACBD;
  --hero-bg: #0A1426;  --hero-grid: rgba(160, 190, 255, .06);  --chrome: rgba(10, 20, 38, .74);
  --ph-bg: #F5EEDC;
  --shadow-soft: 0 1px 2px rgba(22,25,29,.04), 0 10px 30px -18px rgba(22,25,29,.22);
  --shadow-lift: 0 2px 4px rgba(22,25,29,.04), 0 24px 48px -24px rgba(22,25,29,.32);
  --grain-op: .08;
  color-scheme: light;
}

:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* flat button used on dark surfaces (hero, dark cards, nav, dock) in every palette */
  --btn-dark-bg: #F4F1EA;  --btn-dark-fg: #0E1626;
  --r-sm: 12px;  --r: 18px;  --r-lg: 28px;  --r-pill: 999px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background-image: var(--grain); opacity: var(--grain-op, .06); mix-blend-mode: multiply;
}
[data-theme="blackout"] .grain::after, [data-theme="midnight"] .grain::after, :root:not([data-theme]) .grain::after { mix-blend-mode: screen; }

.wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1; padding-left: .16em;
}
.wordmark em { font-style: normal; color: var(--accent); }

.foil-rule { height: 2px; background: var(--accent); border: 0; border-radius: 2px; opacity: .9; }

/* placeholder text to swap before launch */
.ph { background: var(--ph-bg); border-radius: 6px; padding: 0 .3em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  font-stretch: 110%; font-variation-settings: "wdth" 110;
  text-decoration: none; cursor: pointer;
  transition: filter .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-main { background: var(--btn-bg); color: var(--btn-fg); }
.btn-main:hover { filter: brightness(1.15); }
.btn-line { border-color: var(--line-strong); background: var(--btn-2-bg, transparent); color: var(--text-strong); }
.btn-line:hover { border-color: var(--accent); }
/* flat light button for dark surfaces */
.btn-on-dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); }
.btn-on-dark:hover { background: #fff; }
/* outline button sitting on a dark surface (hero, feature card, dock) */
.btn-ghost { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--accent); }
.btn svg { width: 17px; height: 17px; flex: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

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