/*
 * fonts.css — DiveOS webfont declarations
 *
 * Two families (DESIGN.md §Typography, updated):
 *   Inter      (Google, OFL) → --font-display + --font-sans  (headings via 600/700 + tight tracking)
 *   Geist Mono (Google, OFL) → --font-mono                   (tabular numerals, IDs, money, time)
 *
 * Inter + Geist Mono load from Google Fonts. General Sans is retired as the
 * display face — the @font-face below is kept only for any legacy callsite that
 * still names 'General Sans' directly; no token references it anymore.
 *
 * NOTE: @import must precede other rules, so the Google import comes first,
 * then the (legacy) self-hosted @font-face block.
 */

/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* General Sans — variable, self-hosted (covers 400 / 500 / 600 / 700) */
@font-face {
  font-family: 'General Sans';
  src: url(assets/fonts/GeneralSans-400700.woff2) format('woff2-variations'),
       url(assets/fonts/GeneralSans-400700.woff2) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/*
 * colors.css — DiveOS color foundation (v4 — repo spec: sky-700 + cool gray)
 *
 * Two layers:
 *   1. Foundation ramps (8 ramps × 11 steps) — Tailwind-compatible, the
 *      source for every semantic alias and status tint.
 *   2. Semantic aliases — what surfaces actually reference.
 *
 * Accent is sky-700; per-tenant TeamBranding overrides exactly ONE value
 * (--accent). Everything else stays constant across tenants so a Cancelled
 * trip looks the same red everywhere. DiveOS is light-only — no dark mode.
 */

:root {
  /* ─── Foundation ramps ──────────────────────────────────────────────── */
  --gray-50:  #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB;
  --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280;
  --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937;
  --gray-900: #111827; --gray-950: #030712;

  --sky-50:  #F0F9FF; --sky-100: #E0F2FE; --sky-200: #BAE6FD;
  --sky-300: #7DD3FC; --sky-400: #38BDF8; --sky-500: #0EA5E9;
  --sky-600: #0284C7; --sky-700: #0369A1; --sky-800: #075985;
  --sky-900: #0C4A6E; --sky-950: #082F49;

  --amber-50:  #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE68A;
  --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #F59E0B;
  --amber-600: #D97706; --amber-700: #B45309; --amber-800: #92400E;
  --amber-900: #78350F; --amber-950: #451A03;

  --green-50:  #F0FDF4; --green-100: #DCFCE7; --green-200: #BBF7D0;
  --green-300: #86EFAC; --green-400: #4ADE80; --green-500: #22C55E;
  --green-600: #16A34A; --green-700: #15803D; --green-800: #166534;
  --green-900: #14532D; --green-950: #052E16;

  --red-50:  #FEF2F2; --red-100: #FEE2E2; --red-200: #FECACA;
  --red-300: #FCA5A5; --red-400: #F87171; --red-500: #EF4444;
  --red-600: #DC2626; --red-700: #B91C1C; --red-800: #991B1B;
  --red-900: #7F1D1D; --red-950: #450A0A;

  --slate-50:  #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0;
  --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B;
  --slate-900: #0F172A; --slate-950: #020617;

  --rose-50:  #FFF1F2; --rose-100: #FFE4E6; --rose-200: #FECDD3;
  --rose-300: #FDA4AF; --rose-400: #FB7185; --rose-500: #F43F5E;
  --rose-600: #E11D48; --rose-700: #BE123C; --rose-800: #9F1239;
  --rose-900: #881337; --rose-950: #4C0519;

  --stone-50:  #FAFAF9; --stone-100: #F5F5F4; --stone-200: #E7E5E4;
  --stone-300: #D6D3D1; --stone-400: #A8A29E; --stone-500: #78716C;
  --stone-600: #57534E; --stone-700: #44403C; --stone-800: #292524;
  --stone-900: #1C1917; --stone-950: #0C0A09;

  /* ─── Semantic neutrals (cool gray ramp aliases) ────────────────────── */
  --canvas:           var(--gray-50);    /* page background */
  --surface:          #FFFFFF;           /* cards, modals, elevated rows */
  --surface-alt:      var(--gray-100);   /* header zone, sidebar, subtle distinction */
  --sidebar-bg:       var(--gray-100);   /* sidebar background */
  --hairline:         var(--gray-200);   /* default border */
  --hairline-2:       #F0F1F4;           /* inner row separator (lighter) */
  --hairline-strong:  var(--gray-300);   /* active/focused border */
  --ink:              var(--gray-900);   /* body text, headings */
  --muted:            var(--gray-500);   /* less prominent text */
  --muted-2:          var(--gray-400);   /* captions, meta */

  /* ─── Accent (sky-700, swappable per tenant via --accent) ───────────── */
  --accent:           var(--sky-700);
  --accent-strong:    var(--sky-800);    /* hover, pressed */
  --accent-soft:      rgba(3, 105, 161, 0.08);  /* selected-row tint, soft badge bg */
  --accent-softer:    rgba(3, 105, 161, 0.04);  /* ultra-soft hover tint */
  --accent-border:    rgba(3, 105, 161, 0.26);  /* soft badge border, focus dividers */
  --accent-light:     var(--sky-100);    /* lit accent tint for current-step */

  /* ─── Back-compat aliases (existing callsites) ──────────────────────── */
  --bg:               var(--canvas);
  --text-primary:     var(--ink);
  --text-secondary:   var(--gray-700);
  --text-muted:       var(--muted);
  --border:           var(--hairline);
  --border-strong:    var(--hairline-strong);
  --accent-tint:      var(--accent-soft);

  /* ─── Input tokens ──────────────────────────────────────────────────── */
  --input-bg:           var(--gray-50);
  --input-border:       var(--gray-300);
  --input-border-hover: var(--gray-400);
  --input-border-focus: rgba(3, 105, 161, 0.60);
  --input-placeholder:  rgba(107, 114, 128, 0.50);
  --focus-ring:         rgba(3, 105, 161, 0.10);
  --error:              #C13028;
}


/*
 * typography.css — DiveOS type tokens
 *
 * Two families (see fonts.css for the @import source):
 *   --font-display  Inter 600/700  — page titles, card headings, hero numbers
 *                                    (tight tracking + weight do the display work)
 *   --font-sans     Inter           — body, UI labels, buttons, captions
 *   --font-mono     Geist Mono      — anything data-not-prose: timestamps,
 *                                     money, capacities, codes, IDs, dates
 *
 * Type scale (px): 10 / 12 / 13 / 14 / 15 / 18 / 22 / 28. No fluid scaling.
 * Body text never below 14px; captions never below 10px.
 *
 * The "dive computer" feel comes from numerics being typeset as instruments —
 * Geist Mono + font-variant-numeric: tabular-nums in every numeric context.
 */

:root {
  /* Families — Inter + Geist Mono only. Display = Inter at 600/700 with
     tight tracking; the family is shared with body, differentiated by
     weight/size/tracking (Linear/Vercel-style discipline). */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Inter OpenType features per the repo spec: cv11 single-storey a,
     ss01/ss03 alternates. Harmless on General Sans / Geist Mono. */
  --font-features: "cv11", "ss01", "ss03";

  /* Type scale */
  --text-2xs: 10px;   /* eyebrow / column labels (uppercase, tracked) */
  --text-xs:  12px;   /* captions, meta, status chips */
  --text-sm:  13px;   /* UI labels, button labels (compact) */
  --text-base:14px;   /* body, default UI text */
  --text-md:  15px;   /* card title */
  --text-lg:  18px;   /* section heading / open-row title */
  --text-xl:  22px;   /* large section heading */
  --text-2xl: 28px;   /* page title */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Tracking */
  --tracking-tight:   -0.02em;  /* display titles */
  --tracking-snug:    -0.01em;  /* card titles */
  --tracking-eyebrow:  0.14em;  /* uppercase eyebrows + field labels */
  --tracking-label:    0.08em;  /* sidebar / group labels */
}


/*
 * status.css — DiveOS status palette (color + icon + text, color-blind safe)
 *
 * Status meaning is NEVER carried by color alone. Every status renders as
 * [icon] [text] with a soft ramp-tint background + 1px border. All combos
 * tested ≥ 4.5:1 contrast and pass Protanopia / Deuteranopia / Tritanopia.
 *
 * 5 repo statuses (Pending, Confirmed, Briefing, In Water, Cancelled) +
 * 2 app-derived (Returning = slate, Completed = gray). Both the legacy
 * long names (--status-<x>-fg/-bg/-border) and short aliases resolve to
 * the SAME ramp values so no chip can drift between aliases.
 *
 * Rail tints (--bar-*) are lighter ramp-300 steps for left-edge indicators.
 */

:root {
  /* Pending — stone */
  --status-pending-fg:     var(--stone-600);
  --status-pending-bg:     var(--stone-100);
  --status-pending-border: var(--stone-300);
  --pending:        var(--status-pending-fg);
  --pending-bg:     var(--status-pending-bg);
  --pending-border: var(--status-pending-border);

  /* Confirmed — green ("committed / go") */
  --status-confirmed-fg:     var(--green-700);
  --status-confirmed-bg:     var(--green-50);
  --status-confirmed-border: var(--green-200);
  --confirmed:        var(--status-confirmed-fg);
  --confirmed-bg:     var(--status-confirmed-bg);
  --confirmed-border: var(--status-confirmed-border);

  /* Briefing — amber (attention, recoverable) */
  --status-briefing-fg:     var(--amber-800);
  --status-briefing-bg:     var(--amber-50);
  --status-briefing-border: var(--amber-300);
  --briefing:        var(--status-briefing-fg);
  --briefing-bg:     var(--status-briefing-bg);
  --briefing-border: var(--status-briefing-border);

  /* In Water — sky (water / depth) */
  --status-in-water-fg:     var(--sky-800);
  --status-in-water-bg:     var(--sky-50);
  --status-in-water-border: var(--sky-200);
  --inwater:        var(--status-in-water-fg);
  --inwater-bg:     var(--status-in-water-bg);
  --inwater-border: var(--status-in-water-border);

  /* Returning — slate */
  --status-returning-fg:     var(--slate-600);
  --status-returning-bg:     var(--slate-100);
  --status-returning-border: var(--slate-300);

  /* Completed — gray (settled, dimmed) */
  --status-completed-fg:     var(--gray-500);
  --status-completed-bg:     var(--gray-100);
  --status-completed-border: var(--gray-300);

  /* Cancelled — rose (final) */
  --status-cancelled-fg:     var(--rose-800);
  --status-cancelled-bg:     var(--rose-50);
  --status-cancelled-border: var(--rose-200);
  --cancelled:        var(--status-cancelled-fg);
  --cancelled-bg:     var(--status-cancelled-bg);
  --cancelled-border: var(--status-cancelled-border);

  /* Rail / left-edge indicators (ramp-300 steps) */
  --bar-confirmed:  var(--green-300);
  --bar-briefing:   var(--amber-300);
  --bar-inwater:    var(--sky-300);
  --bar-pending:    var(--stone-300);
  --bar-cancelled:  var(--rose-300);
  --bar-returning:  var(--slate-300);
}


/*
 * spacing.css — DiveOS spacing, radius, shadow, motion, layout tokens
 *
 * Base unit 4px. Density is "comfortable" — not cramped (not Bloomberg),
 * not luxurious (not Apple marketing). 16px is the default gap between
 * grouped elements; 24px between groups.
 *
 * The radius scale is hierarchical, NOT uniform — different element types
 * get visually distinct treatments. No "bubbly rounded everything".
 */

:root {
  /* ─── Spacing scale (4px base) ──────────────────────────────────────── */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md-tight: 12px;
  --space-md:  16px;   /* default gap between grouped elements */
  --space-lg:  24px;   /* gap between groups */
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ─── Border radius (hierarchical) ──────────────────────────────────── */
  --radius-sm:   6px;     /* inputs, buttons, small chips */
  --radius:      8px;     /* cards, modals, panels */
  --radius-md:   8px;     /* alias of --radius */
  --radius-lg:   10px;    /* large surfaces, drawer head, hero cards */
  --radius-xl:   14px;    /* rare — feature cards only */
  --radius-pill: 9999px;  /* status badges, avatars, segmented controls */

  /* ─── Shadow scale (no decorative / glow shadows) ───────────────────── */
  --shadow-sm:    0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md:    0 4px 8px rgba(17, 24, 39, 0.10);
  --shadow-card:  0 1px 2px rgba(17, 24, 39, 0.04), 0 0 0 1px var(--hairline);
  --shadow-hover: 0 2px 8px rgba(17, 24, 39, 0.06), 0 0 0 1px var(--hairline);
  --shadow-panel: 0 24px 60px -20px rgba(17, 24, 39, 0.20),
                  0 8px 24px -12px rgba(17, 24, 39, 0.10);

  /* ─── Motion ────────────────────────────────────────────────────────── */
  /* easing curves (app-shell, enter, exit, position change) */
  --ease-out-quart: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --ease-enter:     cubic-bezier(0, 0, 0.2, 1);     /* @kind other */
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);     /* @kind other */
  --ease-move:      cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  /* durations: micro / fast / signature pulse / medium / slow */
  --t-micro: 120ms; /* @kind other */
  --t-fast:  150ms; /* @kind other */
  --t-pulse: 200ms; /* @kind other */
  --t-med:   240ms; /* @kind other */
  --t-slow:  350ms; /* @kind other */

  /* ─── Z-index stack ─────────────────────────────────────────────────── */
  --z-modal:    50;  /* @kind other */
  --z-panel:    40;  /* @kind other */
  --z-dropdown: 30;  /* @kind other */
  --z-tooltip:  20;  /* @kind other */

  /* ─── Layout primitives ─────────────────────────────────────────────── */
  --sidebar-w:  240px;   /* desktop sidebar */
  --panel-w:    560px;   /* side drawer (520px default / 560px wide variant) */
  --content-max:1280px;  /* full app max-width */
  --read-max:   720px;   /* single-column read width (Today, billing) */
}


/*
 * styles.css — DiveOS Design System entry point
 *
 * Consumers link this ONE file. It is an @import manifest only — no rules
 * live here directly. Everything it transitively reaches (tokens + fonts)
 * ships to consuming projects.
 *
 * DiveOS — white-label SaaS for dive-shop operations. Light-only,
 * instrument-grade, status-disciplined. "The tool I open before coffee."
 */

/*
 * fonts.css — DiveOS webfont declarations
 *
 * Two families (DESIGN.md §Typography, updated):
 *   Inter      (Google, OFL) → --font-display + --font-sans  (headings via 600/700 + tight tracking)
 *   Geist Mono (Google, OFL) → --font-mono                   (tabular numerals, IDs, money, time)
 *
 * Inter + Geist Mono load from Google Fonts. General Sans is retired as the
 * display face — the @font-face below is kept only for any legacy callsite that
 * still names 'General Sans' directly; no token references it anymore.
 *
 * NOTE: @import must precede other rules, so the Google import comes first,
 * then the (legacy) self-hosted @font-face block.
 */

/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-3.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/GeistMono-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-3.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-400-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* General Sans — variable, self-hosted (covers 400 / 500 / 600 / 700) */
@font-face {
  font-family: 'General Sans';
  src: url(assets/fonts/GeneralSans-400700.woff2) format('woff2-variations'),
       url(assets/fonts/GeneralSans-400700.woff2) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/*
 * colors.css — DiveOS color foundation (v4 — repo spec: sky-700 + cool gray)
 *
 * Two layers:
 *   1. Foundation ramps (8 ramps × 11 steps) — Tailwind-compatible, the
 *      source for every semantic alias and status tint.
 *   2. Semantic aliases — what surfaces actually reference.
 *
 * Accent is sky-700; per-tenant TeamBranding overrides exactly ONE value
 * (--accent). Everything else stays constant across tenants so a Cancelled
 * trip looks the same red everywhere. DiveOS is light-only — no dark mode.
 */

:root {
  /* ─── Foundation ramps ──────────────────────────────────────────────── */
  --gray-50:  #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB;
  --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280;
  --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937;
  --gray-900: #111827; --gray-950: #030712;

  --sky-50:  #F0F9FF; --sky-100: #E0F2FE; --sky-200: #BAE6FD;
  --sky-300: #7DD3FC; --sky-400: #38BDF8; --sky-500: #0EA5E9;
  --sky-600: #0284C7; --sky-700: #0369A1; --sky-800: #075985;
  --sky-900: #0C4A6E; --sky-950: #082F49;

  --amber-50:  #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE68A;
  --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #F59E0B;
  --amber-600: #D97706; --amber-700: #B45309; --amber-800: #92400E;
  --amber-900: #78350F; --amber-950: #451A03;

  --green-50:  #F0FDF4; --green-100: #DCFCE7; --green-200: #BBF7D0;
  --green-300: #86EFAC; --green-400: #4ADE80; --green-500: #22C55E;
  --green-600: #16A34A; --green-700: #15803D; --green-800: #166534;
  --green-900: #14532D; --green-950: #052E16;

  --red-50:  #FEF2F2; --red-100: #FEE2E2; --red-200: #FECACA;
  --red-300: #FCA5A5; --red-400: #F87171; --red-500: #EF4444;
  --red-600: #DC2626; --red-700: #B91C1C; --red-800: #991B1B;
  --red-900: #7F1D1D; --red-950: #450A0A;

  --slate-50:  #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0;
  --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B;
  --slate-900: #0F172A; --slate-950: #020617;

  --rose-50:  #FFF1F2; --rose-100: #FFE4E6; --rose-200: #FECDD3;
  --rose-300: #FDA4AF; --rose-400: #FB7185; --rose-500: #F43F5E;
  --rose-600: #E11D48; --rose-700: #BE123C; --rose-800: #9F1239;
  --rose-900: #881337; --rose-950: #4C0519;

  --stone-50:  #FAFAF9; --stone-100: #F5F5F4; --stone-200: #E7E5E4;
  --stone-300: #D6D3D1; --stone-400: #A8A29E; --stone-500: #78716C;
  --stone-600: #57534E; --stone-700: #44403C; --stone-800: #292524;
  --stone-900: #1C1917; --stone-950: #0C0A09;

  /* ─── Semantic neutrals (cool gray ramp aliases) ────────────────────── */
  --canvas:           var(--gray-50);    /* page background */
  --surface:          #FFFFFF;           /* cards, modals, elevated rows */
  --surface-alt:      var(--gray-100);   /* header zone, sidebar, subtle distinction */
  --sidebar-bg:       var(--gray-100);   /* sidebar background */
  --hairline:         var(--gray-200);   /* default border */
  --hairline-2:       #F0F1F4;           /* inner row separator (lighter) */
  --hairline-strong:  var(--gray-300);   /* active/focused border */
  --ink:              var(--gray-900);   /* body text, headings */
  --muted:            var(--gray-500);   /* less prominent text */
  --muted-2:          var(--gray-400);   /* captions, meta */

  /* ─── Accent (sky-700, swappable per tenant via --accent) ───────────── */
  --accent:           var(--sky-700);
  --accent-strong:    var(--sky-800);    /* hover, pressed */
  --accent-soft:      rgba(3, 105, 161, 0.08);  /* selected-row tint, soft badge bg */
  --accent-softer:    rgba(3, 105, 161, 0.04);  /* ultra-soft hover tint */
  --accent-border:    rgba(3, 105, 161, 0.26);  /* soft badge border, focus dividers */
  --accent-light:     var(--sky-100);    /* lit accent tint for current-step */

  /* ─── Back-compat aliases (existing callsites) ──────────────────────── */
  --bg:               var(--canvas);
  --text-primary:     var(--ink);
  --text-secondary:   var(--gray-700);
  --text-muted:       var(--muted);
  --border:           var(--hairline);
  --border-strong:    var(--hairline-strong);
  --accent-tint:      var(--accent-soft);

  /* ─── Input tokens ──────────────────────────────────────────────────── */
  --input-bg:           var(--gray-50);
  --input-border:       var(--gray-300);
  --input-border-hover: var(--gray-400);
  --input-border-focus: rgba(3, 105, 161, 0.60);
  --input-placeholder:  rgba(107, 114, 128, 0.50);
  --focus-ring:         rgba(3, 105, 161, 0.10);
  --error:              #C13028;
}

/*
 * typography.css — DiveOS type tokens
 *
 * Two families (see fonts.css for the @import source):
 *   --font-display  Inter 600/700  — page titles, card headings, hero numbers
 *                                    (tight tracking + weight do the display work)
 *   --font-sans     Inter           — body, UI labels, buttons, captions
 *   --font-mono     Geist Mono      — anything data-not-prose: timestamps,
 *                                     money, capacities, codes, IDs, dates
 *
 * Type scale (px): 10 / 12 / 13 / 14 / 15 / 18 / 22 / 28. No fluid scaling.
 * Body text never below 14px; captions never below 10px.
 *
 * The "dive computer" feel comes from numerics being typeset as instruments —
 * Geist Mono + font-variant-numeric: tabular-nums in every numeric context.
 */

:root {
  /* Families — Inter + Geist Mono only. Display = Inter at 600/700 with
     tight tracking; the family is shared with body, differentiated by
     weight/size/tracking (Linear/Vercel-style discipline). */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Inter OpenType features per the repo spec: cv11 single-storey a,
     ss01/ss03 alternates. Harmless on General Sans / Geist Mono. */
  --font-features: "cv11", "ss01", "ss03";

  /* Type scale */
  --text-2xs: 10px;   /* eyebrow / column labels (uppercase, tracked) */
  --text-xs:  12px;   /* captions, meta, status chips */
  --text-sm:  13px;   /* UI labels, button labels (compact) */
  --text-base:14px;   /* body, default UI text */
  --text-md:  15px;   /* card title */
  --text-lg:  18px;   /* section heading / open-row title */
  --text-xl:  22px;   /* large section heading */
  --text-2xl: 28px;   /* page title */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Tracking */
  --tracking-tight:   -0.02em;  /* display titles */
  --tracking-snug:    -0.01em;  /* card titles */
  --tracking-eyebrow:  0.14em;  /* uppercase eyebrows + field labels */
  --tracking-label:    0.08em;  /* sidebar / group labels */
}

/*
 * status.css — DiveOS status palette (color + icon + text, color-blind safe)
 *
 * Status meaning is NEVER carried by color alone. Every status renders as
 * [icon] [text] with a soft ramp-tint background + 1px border. All combos
 * tested ≥ 4.5:1 contrast and pass Protanopia / Deuteranopia / Tritanopia.
 *
 * 5 repo statuses (Pending, Confirmed, Briefing, In Water, Cancelled) +
 * 2 app-derived (Returning = slate, Completed = gray). Both the legacy
 * long names (--status-<x>-fg/-bg/-border) and short aliases resolve to
 * the SAME ramp values so no chip can drift between aliases.
 *
 * Rail tints (--bar-*) are lighter ramp-300 steps for left-edge indicators.
 */

:root {
  /* Pending — stone */
  --status-pending-fg:     var(--stone-600);
  --status-pending-bg:     var(--stone-100);
  --status-pending-border: var(--stone-300);
  --pending:        var(--status-pending-fg);
  --pending-bg:     var(--status-pending-bg);
  --pending-border: var(--status-pending-border);

  /* Confirmed — green ("committed / go") */
  --status-confirmed-fg:     var(--green-700);
  --status-confirmed-bg:     var(--green-50);
  --status-confirmed-border: var(--green-200);
  --confirmed:        var(--status-confirmed-fg);
  --confirmed-bg:     var(--status-confirmed-bg);
  --confirmed-border: var(--status-confirmed-border);

  /* Briefing — amber (attention, recoverable) */
  --status-briefing-fg:     var(--amber-800);
  --status-briefing-bg:     var(--amber-50);
  --status-briefing-border: var(--amber-300);
  --briefing:        var(--status-briefing-fg);
  --briefing-bg:     var(--status-briefing-bg);
  --briefing-border: var(--status-briefing-border);

  /* In Water — sky (water / depth) */
  --status-in-water-fg:     var(--sky-800);
  --status-in-water-bg:     var(--sky-50);
  --status-in-water-border: var(--sky-200);
  --inwater:        var(--status-in-water-fg);
  --inwater-bg:     var(--status-in-water-bg);
  --inwater-border: var(--status-in-water-border);

  /* Returning — slate */
  --status-returning-fg:     var(--slate-600);
  --status-returning-bg:     var(--slate-100);
  --status-returning-border: var(--slate-300);

  /* Completed — gray (settled, dimmed) */
  --status-completed-fg:     var(--gray-500);
  --status-completed-bg:     var(--gray-100);
  --status-completed-border: var(--gray-300);

  /* Cancelled — rose (final) */
  --status-cancelled-fg:     var(--rose-800);
  --status-cancelled-bg:     var(--rose-50);
  --status-cancelled-border: var(--rose-200);
  --cancelled:        var(--status-cancelled-fg);
  --cancelled-bg:     var(--status-cancelled-bg);
  --cancelled-border: var(--status-cancelled-border);

  /* Rail / left-edge indicators (ramp-300 steps) */
  --bar-confirmed:  var(--green-300);
  --bar-briefing:   var(--amber-300);
  --bar-inwater:    var(--sky-300);
  --bar-pending:    var(--stone-300);
  --bar-cancelled:  var(--rose-300);
  --bar-returning:  var(--slate-300);
}

/*
 * spacing.css — DiveOS spacing, radius, shadow, motion, layout tokens
 *
 * Base unit 4px. Density is "comfortable" — not cramped (not Bloomberg),
 * not luxurious (not Apple marketing). 16px is the default gap between
 * grouped elements; 24px between groups.
 *
 * The radius scale is hierarchical, NOT uniform — different element types
 * get visually distinct treatments. No "bubbly rounded everything".
 */

:root {
  /* ─── Spacing scale (4px base) ──────────────────────────────────────── */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md-tight: 12px;
  --space-md:  16px;   /* default gap between grouped elements */
  --space-lg:  24px;   /* gap between groups */
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ─── Border radius (hierarchical) ──────────────────────────────────── */
  --radius-sm:   6px;     /* inputs, buttons, small chips */
  --radius:      8px;     /* cards, modals, panels */
  --radius-md:   8px;     /* alias of --radius */
  --radius-lg:   10px;    /* large surfaces, drawer head, hero cards */
  --radius-xl:   14px;    /* rare — feature cards only */
  --radius-pill: 9999px;  /* status badges, avatars, segmented controls */

  /* ─── Shadow scale (no decorative / glow shadows) ───────────────────── */
  --shadow-sm:    0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md:    0 4px 8px rgba(17, 24, 39, 0.10);
  --shadow-card:  0 1px 2px rgba(17, 24, 39, 0.04), 0 0 0 1px var(--hairline);
  --shadow-hover: 0 2px 8px rgba(17, 24, 39, 0.06), 0 0 0 1px var(--hairline);
  --shadow-panel: 0 24px 60px -20px rgba(17, 24, 39, 0.20),
                  0 8px 24px -12px rgba(17, 24, 39, 0.10);

  /* ─── Motion ────────────────────────────────────────────────────────── */
  /* easing curves (app-shell, enter, exit, position change) */
  --ease-out-quart: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --ease-enter:     cubic-bezier(0, 0, 0.2, 1);     /* @kind other */
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);     /* @kind other */
  --ease-move:      cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  /* durations: micro / fast / signature pulse / medium / slow */
  --t-micro: 120ms; /* @kind other */
  --t-fast:  150ms; /* @kind other */
  --t-pulse: 200ms; /* @kind other */
  --t-med:   240ms; /* @kind other */
  --t-slow:  350ms; /* @kind other */

  /* ─── Z-index stack ─────────────────────────────────────────────────── */
  --z-modal:    50;  /* @kind other */
  --z-panel:    40;  /* @kind other */
  --z-dropdown: 30;  /* @kind other */
  --z-tooltip:  20;  /* @kind other */

  /* ─── Layout primitives ─────────────────────────────────────────────── */
  --sidebar-w:  240px;   /* desktop sidebar */
  --panel-w:    560px;   /* side drawer (520px default / 560px wide variant) */
  --content-max:1280px;  /* full app max-width */
  --read-max:   720px;   /* single-column read width (Today, billing) */
}




  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  :root { --p: 0; }
  /* registered so it interpolates smoothly under animation; lets us multiply the
     whale's approach/recede fade by a scroll-depth gate in a single opacity value */
  @property --whale-fade { syntax: '<number>'; inherits: false; initial-value: 0; }

  /* ════════════════════════════════════════════
     THEME TOKENS
     ════════════════════════════════════════════ */
  body[data-theme="ocean"] {
    --bg: linear-gradient(180deg, #3cc6f2 0%, #11a2e6 14%, #0a86c6 30%, #0a6a96 46%, #0b557a 60%, #093f5c 74%, #062b41 86%, #02131f 100%);
    --deepen-max: 1;
    --ink: #ffffff;
    --dim: rgba(255,255,255,0.76);
    --faint: rgba(255,255,255,0.52);
    --accent: var(--sky-300);
    --accent-strong: var(--sky-200);
    --accent-soft: rgba(56,189,248,0.16);
    --eyebrow: var(--sky-300);
    --hairline-soft: rgba(255,255,255,0.12);

    --btn-solid-bg: var(--sky-400);
    --btn-solid-fg: #042033;
    --btn-solid-shadow: 0 0 0 1px rgba(56,189,248,0.5), 0 8px 30px -8px rgba(56,189,248,0.7);
    --btn-solid-bg-h: var(--sky-300);
    --btn-ghost-bg: rgba(255,255,255,0.07);
    --btn-ghost-border: rgba(255,255,255,0.22);
    --btn-ghost-fg: #fff;
    --btn-ghost-bg-h: rgba(255,255,255,0.14);

    --glass-bg: linear-gradient(160deg, rgba(12,74,110,0.46), rgba(2,12,24,0.54));
    --glass-border: rgba(125,211,252,0.22);
    --glass-shadow: 0 30px 80px -28px rgba(0,0,0,0.7), 0 0 70px -34px rgba(56,189,248,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    --glass-blur: blur(10px);
    --card-ink: #fff;
    --card-dim: rgba(255,255,255,0.62);
    --card-faint: rgba(255,255,255,0.42);
    --card-hairline: rgba(255,255,255,0.10);
    --card-row-live: rgba(56,189,248,0.10);

    --chip-border: rgba(255,255,255,0.18);
    --chip-fg: rgba(255,255,255,0.66);
    --chip-on-bg: var(--sky-400);
    --chip-on-fg: #042033;

    --spine: rgba(125,211,252,0.20);
    --node: var(--sky-400);
    --node-ring: rgba(56,189,248,0.0);
    --node-active: var(--sky-300);
    --node-glow: 0 0 16px var(--sky-400), 0 0 4px #fff;
    --dnum: rgba(125,211,252,0.16);
    --dnum-active: var(--sky-300);
    --zlabel: rgba(255,255,255,0.40);
    --zlabel-active: var(--sky-300);

    --surf-bg: linear-gradient(160deg, rgba(10,64,92,0.36), rgba(2,12,24,0.46));
    --surf-border: rgba(125,211,252,0.16);
    --surf-border-h: rgba(125,211,252,0.45);
    --surf-shadow-h: 0 20px 50px -24px rgba(56,189,248,0.5);
    --foot-border: rgba(125,211,252,0.16);
  }

  body[data-theme="surface"] {
    --bg: linear-gradient(180deg, #ffffff 0%, #f4fbff 12%, #eaf6fe 30%, #dcf0fd 48%, #c4e7fb 64%, #aadcf8 80%, #8fd0f4 100%);
    --deepen-max: 0;
    --ink: var(--gray-900);
    --dim: var(--gray-600);
    --faint: var(--gray-400);
    --accent: var(--sky-700);
    --accent-strong: var(--sky-800);
    --accent-soft: rgba(3,105,161,0.08);
    --eyebrow: var(--sky-700);
    --hairline-soft: var(--hairline);

    --btn-solid-bg: var(--sky-700);
    --btn-solid-fg: #fff;
    --btn-solid-shadow: 0 1px 2px rgba(17,24,39,0.12), 0 10px 26px -12px rgba(3,105,161,0.55);
    --btn-solid-bg-h: var(--sky-800);
    --btn-ghost-bg: #ffffff;
    --btn-ghost-border: var(--hairline);
    --btn-ghost-fg: var(--ink);
    --btn-ghost-bg-h: var(--gray-50);

    --glass-bg: #ffffff;
    --glass-border: var(--hairline);
    --glass-shadow: 0 1px 2px rgba(17,24,39,0.05), 0 30px 60px -30px rgba(17,24,39,0.22);
    --glass-blur: none;
    --card-ink: var(--gray-900);
    --card-dim: var(--gray-500);
    --card-faint: var(--gray-400);
    --card-hairline: var(--hairline);
    --card-row-live: #f0f9ff;

    --chip-border: var(--hairline);
    --chip-fg: var(--gray-500);
    --chip-on-bg: var(--sky-700);
    --chip-on-fg: #fff;

    --spine: var(--gray-200);
    --node: var(--sky-500);
    --node-active: var(--sky-700);
    --node-glow: 0 0 0 4px rgba(3,105,161,0.12);
    --dnum: rgba(2,132,199,0.13);
    --dnum-active: var(--sky-700);
    --zlabel: var(--gray-400);
    --zlabel-active: var(--sky-700);

    --surf-bg: #ffffff;
    --surf-border: var(--hairline);
    --surf-border-h: var(--sky-300);
    --surf-shadow-h: 0 18px 44px -22px rgba(3,105,161,0.32);
    --foot-border: var(--hairline);
  }

  body {
    margin: 0;
    background: var(--bg) fixed;
    color: var(--ink);
    font-family: var(--font-sans);
    font-feature-settings: var(--font-features);
    font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: color 0.4s ease;
  }
  a { color: inherit; text-decoration: none; }
  #root { position: relative; z-index: 1; }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .gs { font-family: 'General Sans', var(--font-display); }
  .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--eyebrow); }

  /* ── background fx ── */
  .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .deepen { position: absolute; inset: 0; background: #01060f; opacity: calc(var(--p) * var(--deepen-max)); transition: opacity 0.1s linear; }
  /* ════ VOLUMETRIC GOD RAYS — vertical light shafts fanning down from the surface ════
     A bank of soft vertical beams emanating from a point above top-centre. Each
     beam is a tall element with a horizontal light→transparent gradient (so it
     reads as a vertical column), rotated a few degrees to fan out, heavily
     blurred, screen-blended so they ADD light, and masked to fade toward the
     deep. They sway independently; the whole bank parallaxes on mouse + scroll. */
  .rays { position: absolute; left: 0; top: -12%; width: 100%; height: 128%; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
    opacity: calc((1 - var(--p) * 1.45) * var(--deepen-max) * var(--rays-on, 1));
    transform-origin: 50% 0%;
    animation: raysDrift 26s ease-in-out infinite alternate;
    transition: opacity 0.2s linear; will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.9) 26%, rgba(0,0,0,0.4) 58%, transparent 82%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.9) 26%, rgba(0,0,0,0.4) 58%, transparent 82%); }
  @keyframes raysDrift {
    0%   { transform: translateX(-2.6%) skewX(-1.8deg); }
    100% { transform: translateX(2.6%) skewX(1.8deg); }
  }
  .rays .beam { position: absolute; top: -24%; left: var(--bx); width: var(--bw, 110px); height: 150%; transform-origin: top center;
    background: linear-gradient(90deg, transparent 0%, rgba(186,230,253,var(--bi, 0.10)) 38%, rgba(231,247,255,calc(var(--bi, 0.10) * 1.5)) 50%, rgba(186,230,253,var(--bi, 0.10)) 62%, transparent 100%);
    filter: blur(var(--bblur, 16px));
    animation: beamSway var(--bd, 15s) ease-in-out var(--bdl, 0s) infinite alternate; will-change: transform, opacity; }
  @keyframes beamSway {
    0%   { transform: rotate(calc(var(--ba, 0deg) - 1.6deg)) translateX(-12px) scaleX(0.92); opacity: 0.55; }
    100% { transform: rotate(calc(var(--ba, 0deg) + 1.6deg)) translateX(12px) scaleX(1.08); opacity: 1; }
  }
  /* bright water glow just under the surface */
  .surfglow { position: absolute; left: 0; top: 0; width: 100%; height: 46%; pointer-events: none; mix-blend-mode: screen;
    opacity: calc((1 - var(--p) * 2) * var(--deepen-max));
    background: radial-gradient(120% 90% at 50% -28%, rgba(120,205,245,0.5), rgba(120,205,245,0.16) 38%, transparent 66%); }
  @media (prefers-reduced-motion: reduce) { .rays, .rays .beam { animation: none; } }
  .vign { position: absolute; inset: 0; background: radial-gradient(130% 100% at 60% -10%, transparent 55%, rgba(1,6,15,0.45)); opacity: var(--deepen-max); }
  .bubbles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .bubble { position: absolute; bottom: -24px; border-radius: 50%; background: rgba(186,230,253,0.16); box-shadow: inset 0 0 4px rgba(255,255,255,0.25); animation: rise linear infinite; will-change: transform, opacity; }
  @keyframes rise { 0% { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; } 12% { opacity: 0.5; } 100% { transform: translateY(-105vh) translateX(var(--dx,20px)) scale(1.1); opacity: 0; } }

  /* ════ SEA LIFE — manta + whale share ONE layer and ONE gradient backdrop ════
     Both videos lighten-blend against a pixel-identical copy of the page gradient
     (::before). Lighten keeps max(backdrop, source), so every pixel darker than
     the page — the black matte AND the soft gray matte-fringe — is replaced by the
     gradient and disappears. That is why there is no halo (screen would instead
     ADD those fringe pixels as light). A radial mask feathers each creature's box. */
  .creatures { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; }
  .creatures::before { content: ''; position: absolute; inset: 0; background: var(--bg); }
  .manta-video { position: absolute; left: 0; top: 0; width: var(--manta-w, 240px); max-width: 64vw; max-height: 46vh; object-fit: contain; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(66% 48% at 50% 40%, #000 34%, transparent 76%); mask-image: radial-gradient(66% 48% at 50% 40%, #000 34%, transparent 76%); animation: mantaSwim var(--manta-dur, 56s) ease-in-out infinite; will-change: left, top, transform; }
  /* Manta roams the UPPER band only (top 6–34vh) so it never shares vertical
     space with the whale (lower band) — they no longer cross paths. */
  @keyframes mantaSwim {
    0%   { left: -12vw; top: 8vh;  transform: rotate(-5deg); }
    13%  { left: 10vw;  top: 26vh; transform: rotate(4deg); }
    26%  { left: 32vw;  top: 10vh; transform: rotate(-3deg); }
    40%  { left: 55vw;  top: 30vh; transform: rotate(6deg); }
    54%  { left: 74vw;  top: 12vh; transform: rotate(-2deg); }
    67%  { left: 56vw;  top: 32vh; transform: rotate(5deg); }
    81%  { left: 24vw;  top: 22vh; transform: rotate(-4deg); }
    100% { left: -12vw; top: 8vh;  transform: rotate(-5deg); }
  }
  @media (prefers-reduced-motion: reduce) { .manta-video { animation: none; left: 6vw; top: 16vh; } }

  /* ════ WHALE SHARK — the deep visitor ════
     Same treatment as the manta: lighten-blends against the shared gradient
     backdrop (no halo), masked edges. It swims a path while SCALING — growing as
     it passes close, shrinking as it recedes. The opacity is kept ON
     THE VIDEO ITSELF (never on a wrapper) — a wrapper opacity would isolate the
     blend and bring the black matte back as a dark halo. opacity = the per-cycle
     swim fade (--whale-fade, animated) × an on/off flag (--whale-on). Its scroll
     entrance/exit is a translateX (--whale-x, set by JS) baked into every keyframe
     so it physically slides IN from the right as you enter the section and slides
     back OUT to the right as you scroll up — a clean in/out, not a fade-in-place.
     (A transform on a wrapper would isolate the blend and bring the halo back, so
     the translate lives on the video itself.) It travels the LOWER band only (top
     50–62vh) so it never crosses the manta, scaling up on its close pass. */
  .whale-gate { position: absolute; inset: 0; }
  .whale-video { position: absolute; left: 0; top: 0; width: var(--whale-w, 640px); max-width: 94vw; max-height: 70vh; object-fit: contain; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(58% 50% at 50% 46%, #000 36%, transparent 80%); mask-image: radial-gradient(58% 50% at 50% 46%, #000 36%, transparent 80%); transform-origin: center; opacity: calc(var(--whale-fade) * var(--whale-on, 1)); animation: whaleSwim var(--whale-dur, 82s) linear infinite; will-change: left, top, transform, opacity; }
  @keyframes whaleSwim {
    0%   { left: 102vw; top: 56vh; transform: translateX(var(--whale-x, 130vw)) scale(0.55) rotate(3deg);  --whale-fade: 0.4; }
    18%  { left: 70vw;  top: 50vh; transform: translateX(var(--whale-x, 130vw)) scale(0.85) rotate(-2deg); --whale-fade: 1; }
    44%  { left: 32vw;  top: 62vh; transform: translateX(var(--whale-x, 130vw)) scale(1.4) rotate(2deg);   --whale-fade: 1; }
    70%  { left: 0vw;   top: 52vh; transform: translateX(var(--whale-x, 130vw)) scale(1.0) rotate(-3deg);  --whale-fade: 1; }
    88%  { left: -30vw; top: 58vh; transform: translateX(var(--whale-x, 130vw)) scale(0.7) rotate(2deg);   --whale-fade: 0.6; }
    100% { left: -64vw; top: 60vh; transform: translateX(var(--whale-x, 130vw)) scale(0.55) rotate(3deg);  --whale-fade: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .whale-video { animation: none; left: 16vw; top: 54vh; transform: translateX(var(--whale-x, 130vw)) scale(1.1); --whale-fade: 1; } }

  /* ════ CAUSTIC LIGHT — sun dapples through moving water (ocean only) ════ */
  .caustics { position: absolute; inset: -22%; pointer-events: none; mix-blend-mode: screen;
    opacity: calc(var(--deepen-max) * var(--caustic-on, 1) * (1 - var(--p) * 0.55));
    transform: translateY(calc(var(--p) * -120px));
    background:
      radial-gradient(36% 30% at 22% 16%, rgba(186,230,253,0.18), transparent 60%),
      radial-gradient(30% 26% at 68% 30%, rgba(125,211,252,0.14), transparent 62%),
      radial-gradient(40% 30% at 46% 66%, rgba(224,242,254,0.11), transparent 64%),
      radial-gradient(26% 22% at 84% 72%, rgba(186,230,253,0.10), transparent 62%);
    animation: caustic 24s ease-in-out infinite alternate; will-change: transform, opacity; }
  @keyframes caustic {
    0%   { transform: translateY(calc(var(--p) * -120px)) translateX(0) scale(1); }
    50%  { transform: translateY(calc(var(--p) * -120px)) translateX(2.5%) scale(1.09); }
    100% { transform: translateY(calc(var(--p) * -120px)) translateX(-2%) scale(1.04); }
  }

  /* ════ MARINE SNOW — two parallax strata of drifting particulate (ocean only) ════ */
  .snow { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--deepen-max) * var(--snow-on, 1)); }
  .snow-far  { transform: translateY(calc(var(--p) * -120px)); }
  .snow-near { transform: translateY(calc(var(--p) * -300px)); }
  .flake { position: absolute; top: -6vh; border-radius: 50%; background: rgba(224,242,254,0.55); box-shadow: 0 0 3px rgba(186,230,253,0.4); animation: snowfall linear infinite; will-change: transform, opacity; }
  .snow-far .flake { background: rgba(186,230,253,0.30); box-shadow: none; }
  @keyframes snowfall {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    12%  { opacity: 0.7; }
    88%  { opacity: 0.5; }
    100% { transform: translateY(118vh) translateX(var(--dx, 14px)); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .caustics, .flake { animation: none; } }

  /* ════ SHIMMER TEXT — light rippling across accent words ════ */
  @keyframes shimmerLight { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  body.shimmer-text .title em,
  body.shimmer-text .h2 em {
    background-image: linear-gradient(105deg, var(--accent) 16%, var(--accent-strong) 36%, #eaf7ff 50%, var(--accent-strong) 64%, var(--accent) 84%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: shimmerLight 7s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) { body.shimmer-text .title em, body.shimmer-text .h2 em { animation: none; } }

  /* ════════════════════════════════════════════
     DIVE-COMPUTER HUD (depth + temp)
     ════════════════════════════════════════════ */
  .hud { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; align-items: center; gap: 18px; }
  body.no-hud .hud { display: none; }
  .hud-reads { display: flex; flex-direction: column; gap: 18px; text-align: right; }
  .hud-read .d { font-family: var(--font-mono); font-size: 34px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
  .hud-read .d .u { font-size: 17px; color: var(--faint); }
  .hud-read .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-top: 5px; }
  .hud-read.temp .d { font-size: 22px; color: var(--dim); }
  .hud-zone { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
  .hud-ruler { position: relative; width: 2px; height: 340px; background: linear-gradient(180deg, var(--accent), transparent); border-radius: 2px; opacity: 0.6; }
  .hud-marker { position: absolute; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--node); box-shadow: var(--node-glow); transform: translateY(-50%); transition: top 0.12s linear; }
  @media (max-width: 1180px) { .hud { display: none; } }

  /* ════════════════════════════════════════════
     NAV
     ════════════════════════════════════════════ */
  /* main nav — sits at the top of the page and scrolls away with content (NOT sticky) */
  .main-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 32px; padding: 22px 40px; }
  .main-nav .nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
  .main-nav .nav-links a { font-size: 14px; color: var(--dim); font-weight: 500; padding: 7px 13px; border-radius: 999px; transition: color 0.15s, background 0.15s; }
  .main-nav .nav-links a:hover { color: var(--ink); background: var(--accent-soft); }

  /* tab nav — pill of in-page anchor links; hidden at the top, slides in fixed on scroll */
  .tab-nav { position: fixed; top: 14px; left: 50%; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 999px; border: 1px solid transparent; transform: translateX(-50%) translateY(-18px); opacity: 0; pointer-events: none; transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.32,0.72,0,1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .tab-nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; backdrop-filter: blur(var(--nav-blur, 18px)) saturate(190%) brightness(1.08) contrast(1.04); -webkit-backdrop-filter: blur(var(--nav-blur, 18px)) saturate(190%) brightness(1.08) contrast(1.04); background: linear-gradient(155deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.12); opacity: var(--nav-blur-op, 1); pointer-events: none; }
  .tab-nav > * { position: relative; z-index: 1; }
  .tab-nav.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
  .tab-nav .tabnav-logo { display: inline-flex; align-items: center; padding-left: 4px; }
  .tab-nav .nav-links { display: flex; gap: 4px; }
  .tab-nav .nav-links a { font-size: 14px; font-weight: 500; color: var(--dim); padding: 7px 14px; border-radius: 999px; transition: background 0.15s, color 0.15s; }
  .tab-nav .nav-links a:hover { background: var(--accent-soft); color: var(--accent); }

  .nav { position: fixed; z-index: 30; display: flex; align-items: center; gap: 32px; background: transparent; border: 1px solid transparent; box-shadow: none; transition: background 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease, padding 0.3s ease, top 0.32s ease; }
  .nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; backdrop-filter: blur(var(--nav-blur, 18px)) saturate(190%) brightness(1.08) contrast(1.04); -webkit-backdrop-filter: blur(var(--nav-blur, 18px)) saturate(190%) brightness(1.08) contrast(1.04); background: linear-gradient(155deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 38%, rgba(255,255,255,0) 58%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 -10px 22px -14px rgba(255,255,255,0.28); opacity: var(--nav-blur-op, 0); pointer-events: none; transition: opacity 0.32s ease; }
  .nav > * { position: relative; z-index: 1; }
  /* Positioning only — at the top the nav is bare; backgrounds/containers appear on scroll via JS. */
  .nav.floating { top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 44px); max-width: 1240px; padding: 12px 14px 12px 22px; border-radius: 16px; }
  .nav.bar { top: 0; left: 0; right: 0; padding: 16px 40px; }
  .nav.minimal { top: 0; left: 0; right: 0; padding: 20px 40px; }
  .nav.tab { top: 14px; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; gap: 18px; }
  .nav.tab .brand { transition: gap 0.45s var(--ease-out-quart); }
  .nav.tab .wm { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 160px; transition: max-width 0.45s var(--ease-out-quart), opacity 0.3s ease, margin 0.45s var(--ease-out-quart); }
  .nav.tab .nav-cta { overflow: hidden; max-width: 280px; transition: max-width 0.45s var(--ease-out-quart), opacity 0.3s ease, margin 0.45s var(--ease-out-quart); }
  .nav.tab .nav-links a { border-radius: 999px; transition: background 0.15s ease, color 0.15s ease, padding 0.3s ease; }
  /* on scroll: wordmark + CTA collapse away, pill hugs the logo + anchors */
  .nav.tab.is-scrolled { padding: 7px 14px 7px 16px; gap: 12px; }
  .nav.tab.is-scrolled .brand { gap: 0; }
  .nav.tab.is-scrolled .wm { max-width: 0; opacity: 0; margin-left: -10px; }
  .nav.tab.is-scrolled .nav-cta { max-width: 0; opacity: 0; margin: 0; }
  .nav.tab.is-scrolled .nav-links { margin: 0; }
  .nav.tab.is-scrolled .nav-links a { padding: 7px 13px; }
  .nav.tab.is-scrolled .nav-links a:hover { background: var(--accent-soft); color: var(--accent); }
  .brand { display: inline-flex; align-items: center; gap: 10px; }
  .brand .wm { font-family: 'General Sans', var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
  .brand .os { color: var(--accent); }
  .nav-links { display: flex; gap: 26px; margin-left: 6px; }
  .nav-links a { font-size: 14px; color: var(--dim); font-weight: 500; transition: color 0.15s; }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
  .nav-signin { font-size: 14px; font-weight: 500; color: var(--dim); }
  .nav-signin:hover { color: var(--ink); }

  /* ── buttons ── */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: var(--font-sans); white-space: nowrap; flex: none; transition: transform 0.12s, box-shadow 0.2s, background 0.15s; }
  .btn:active { transform: translateY(1px); }
  .btn.solid { background: var(--btn-solid-bg); color: var(--btn-solid-fg); box-shadow: var(--btn-solid-shadow); }
  .btn.solid:hover { background: var(--btn-solid-bg-h); }
  .btn.ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-fg); border-color: var(--btn-ghost-border); }
  .btn.ghost:hover { background: var(--btn-ghost-bg-h); }
  .btn.sm { height: 36px; padding: 0 15px; font-size: 14px; border-radius: 8px; }
  .btn.lg { height: 50px; padding: 0 26px; font-size: 16px; border-radius: 11px; }

  /* ════════════════════════════════════════════
     DEPTH SPINE + ZONE LAYOUT
     ════════════════════════════════════════════ */
  .wrap { max-width: var(--content-max, 1240px); margin: 0 auto; padding-inline: var(--content-pad, 40px); display: grid; grid-template-columns: 132px minmax(0,1fr); align-items: stretch; }
  .wrap-narrow { max-width: var(--content-max, 1240px); margin: 0 auto; padding-inline: var(--content-pad, 40px); }

  .rail { position: relative; border-left: none; }
  body.no-spine .rail { border-left-color: transparent; }
  body.no-spine .rail-inner { opacity: 0; }
  .rail-inner { display: none; }
  .node { position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--node); opacity: 0.45; box-shadow: none; transition: opacity 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; }
  .zone.active .node, .hero .node { opacity: 1; box-shadow: var(--node-glow); }
  .dnum { font-family: var(--font-mono); font-weight: 500; font-size: 52px; letter-spacing: -0.05em; line-height: 0.9; color: var(--dnum); margin-left: 22px; margin-top: 2px; transition: color 0.45s ease; }
  .dnum .m { font-size: 20px; letter-spacing: 0; margin-left: 2px; }
  .zone.active .dnum, .hero .dnum { color: var(--dnum-active); }
  .zlabel { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zlabel); margin-left: 24px; margin-top: 10px; transition: color 0.45s ease; }
  .zone.active .zlabel, .hero .zlabel { color: var(--zlabel-active); }

  .zone { position: relative; }
  .zbody { padding-block: 132px; padding-left: 48px; min-width: 0; }

  /* reveal */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.32,0.72,0,1), transform 0.8s cubic-bezier(0.32,0.72,0,1); }
  .reveal.in, .zone.in .reveal { opacity: 1; transform: none; }

  /* ── headings ── */
  .h2 { font-family: var(--font-sans); font-weight: 700; font-size: 48px; line-height: 1.03; letter-spacing: -0.038em; margin: 0; text-wrap: balance; color: var(--ink); }
  body.bold-type .h2 { font-size: 56px; letter-spacing: -0.045em; }
  .lede { font-size: 18px; line-height: 1.7; color: var(--dim); max-width: 540px; margin: 28px 0 0; }

  /* ════════ HERO ════════ */
  .hero { position: relative; }
  .hero .zbody { padding-block: 168px 120px; display: flex; align-items: center; min-height: 100vh; }
  .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 80px; align-items: center; width: 100%; }
  h1.title { font-family: var(--font-sans); font-weight: 700; font-size: 72px; line-height: 0.98; letter-spacing: -0.045em; margin: 16px 0 0; text-wrap: balance; color: var(--ink); }
  body.bold-type h1.title { font-size: 84px; letter-spacing: -0.052em; }
  h1.title em { font-style: normal; color: var(--accent); }
  .hero-sub { font-size: 19px; line-height: 1.6; color: var(--dim); max-width: 470px; margin: 26px 0 0; }
  .hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
  .hero-trust { display: flex; gap: 16px; align-items: center; margin-top: 26px; font-family: var(--font-mono); font-size: 12px; color: var(--faint); flex-wrap: wrap; }
  .hero-trust .tdot { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
  .scrollcue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); animation: cue 2.4s ease-in-out infinite; z-index: 5; }
  @keyframes cue { 0%, 100% { transform: translate(-50%, 0); opacity: 0.5; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

  /* ════════ GLASS CARDS / READOUT ════════ */
  .glass { position: relative; border-radius: 20px; padding: 30px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
  .readout .rhead { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--card-hairline); }
  .readout .rh-l { font-size: 12px; letter-spacing: 0.14em; color: var(--card-dim); }
  .readout .rh-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--card-ink); text-transform: none; }
  .readout .rh-r { font-size: 11px; color: var(--card-faint); }
  .live { display: inline-flex; align-items: center; gap: 6px; }
  .live .mono { font-size: 11px; color: var(--accent); }
  .livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--node); box-shadow: var(--node-glow); animation: cue 1.6s ease-in-out infinite; }
  .readout .big { font-family: var(--font-mono); font-size: 58px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 4px; color: var(--accent); }
  body[data-theme="ocean"] .readout .big { text-shadow: 0 0 34px rgba(56,189,248,0.4); }
  .readout .cap { font-family: var(--font-mono); font-size: 11px; color: var(--card-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
  .scope-row { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
  .scope { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--chip-border); color: var(--chip-fg); background: transparent; cursor: pointer; line-height: 1; white-space: nowrap; transition: all 0.15s; }
  .scope:hover { border-color: var(--accent); color: var(--card-ink); }
  .scope.on { color: var(--chip-on-fg); border-color: var(--chip-on-bg); background: var(--chip-on-bg); font-weight: 600; }
  .rrow { display: flex; align-items: center; gap: 12px; padding: 13px 8px; margin: 0 -8px; border-bottom: 1px solid var(--card-hairline); transition: background 0.15s; border-radius: 8px; }
  .rrow:last-child { border-bottom: none; }
  .rrow.live { background: var(--card-row-live); }
  .rrow[onclick], .rrow { cursor: pointer; }
  .rrow .rt { font-family: var(--font-mono); font-size: 13px; color: var(--card-dim); width: 50px; flex: none; }
  .rrow .rb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rrow .r1 { font-size: 14px; font-weight: 600; color: var(--card-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rrow .r2 { font-size: 12px; color: var(--card-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rrow .rc { font-family: var(--font-mono); font-size: 12px; color: var(--card-dim); flex: none; }
  .rempty { padding: 38px 0; text-align: center; color: var(--card-faint); font-size: 13px; }
  .rtip { font-size: 11px; color: var(--card-faint); margin-top: 12px; }

  /* ════════ TRUST ════════ */
  .trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .tstat { padding: 22px 26px; border-left: 1px solid var(--glass-border); }
  .tstat .tv { font-family: var(--font-mono); font-size: 42px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
  .tstat .tl { font-size: 13px; color: var(--dim); margin-top: 8px; }

  /* ════════ FEATURE ROWS ════════ */
  .feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 96px; align-items: center; }
  .feature.reverse .fcopy { order: 2; }
  .flist { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
  .flist li { display: flex; gap: 13px; align-items: flex-start; }
  .flist .fi { color: var(--accent); flex: none; margin-top: 1px; }
  body[data-theme="ocean"] .flist .fi { filter: drop-shadow(0 0 8px rgba(56,189,248,0.5)); }
  .flist .ft { font-size: 15px; color: var(--dim); line-height: 1.5; }
  .flist .ft b { color: var(--ink); font-weight: 600; }

  /* ════════ SURFACES GRID ════════ */
  .surf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
  .surf { border-radius: 18px; padding: 30px; min-height: 230px; display: flex; flex-direction: column; background: var(--surf-bg); border: 1px solid var(--surf-border); box-shadow: var(--glass-shadow); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
  .surf:hover { border-color: var(--surf-border-h); transform: translateY(-3px); box-shadow: var(--surf-shadow-h); }
  .surf .si { color: var(--accent); }
  body[data-theme="ocean"] .surf .si { filter: drop-shadow(0 0 10px rgba(56,189,248,0.45)); }
  .surf .sn { font-family: 'General Sans', var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
  .surf .sd { font-size: 14px; color: var(--dim); line-height: 1.55; margin-top: 10px; }
  .soon { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }

  /* ════════ ONE-SYSTEM MAP (3 groups) ════════ */
  .map-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 56px; }
  .mapcol { border-radius: 18px; padding: 30px; background: var(--surf-bg); border: 1px solid var(--surf-border); box-shadow: var(--glass-shadow); }
  .mapcol .gl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--accent); }
  .mapcol .gh { font-family: 'General Sans', var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin-top: 12px; color: var(--ink); }
  .mlist { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hairline-soft); display: flex; flex-direction: column; gap: 13px; }
  .mlist li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--dim); }
  .mlist li svg { color: var(--accent); flex: none; }

  /* ════════ GOLDEN PATH (numbered descent) ════════ */
  .path { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-direction: column; }
  .path li { display: grid; grid-template-columns: 52px 1fr; gap: 22px; align-items: start; padding: 20px 0; border-top: 1px solid var(--hairline-soft); }
  .path li:first-child { border-top: none; }
  .pnum { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 16px; font-weight: 600; border: 1px solid var(--glass-border); }
  .path .ph { font-family: 'General Sans', var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
  .path .pd2 { font-size: 14.5px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
  .demochip { display: inline-flex; align-items: center; gap: 9px; margin-top: 32px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--accent); padding: 9px 16px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); }

  /* ════════ STATUS GRID ════════ */
  .pill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
  .pcell { border-radius: 16px; padding: 22px; background: var(--surf-bg); border: 1px solid var(--surf-border); box-shadow: var(--glass-shadow); }
  .pcell .pc { font-size: 13px; color: var(--dim); line-height: 1.45; margin-top: 12px; }
  .pcell-note { display: flex; flex-direction: column; justify-content: center; border-color: var(--accent); }
  .pcn-h { font-size: 12px; color: var(--accent); font-weight: 600; }

  /* ════════ PRICING ════════ */
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; align-items: start; }
  .price { border-radius: 20px; padding: 32px; background: var(--surf-bg); border: 1px solid var(--surf-border); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; }
  .price.featured { border-color: var(--btn-solid-bg); box-shadow: 0 0 0 1px var(--btn-solid-bg), var(--glass-shadow); }
  .price .pn { display: flex; align-items: center; justify-content: space-between; }
  .price .pname { font-family: 'General Sans', var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
  .price .tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--btn-solid-fg); background: var(--btn-solid-bg); padding: 3px 8px; border-radius: 999px; }
  .price .amt { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 6px; }
  .price .amt .n { font-family: var(--font-mono); font-size: 40px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
  .price .amt .per { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }
  .price .pd { font-size: 13.5px; color: var(--dim); line-height: 1.5; min-height: 40px; }
  .price ul { list-style: none; margin: 22px 0 26px; padding: 20px 0 0; border-top: 1px solid var(--hairline-soft); display: flex; flex-direction: column; gap: 12px; }
  .price li { display: flex; gap: 10px; font-size: 14px; color: var(--dim); align-items: flex-start; }
  .price li .ci { color: var(--accent); flex: none; margin-top: 1px; }
  .price .pf { margin-top: auto; }

  /* ════════ QUOTE ════════ */
  .quote-grid { display: grid; grid-template-columns: 0.42fr 1fr; gap: 72px; align-items: start; }
  .quote q { font-family: 'General Sans', var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.34; letter-spacing: -0.02em; quotes: none; display: block; color: var(--ink); }
  .quote .by { display: flex; align-items: center; gap: 13px; margin-top: 28px; }
  .qav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: 'General Sans', var(--font-display); font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--sky-500), var(--sky-800)); font-size: 15px; }
  .quote .nm { font-weight: 600; font-size: 14px; color: var(--ink); }
  .quote .rl { font-size: 13px; color: var(--faint); }
  .quote .qv { font-family: var(--font-mono); font-size: 52px; font-weight: 500; letter-spacing: -0.03em; color: var(--accent); }
  body[data-theme="ocean"] .quote .qv { text-shadow: 0 0 30px rgba(56,189,248,0.4); }
  .quote .ql { font-size: 13px; color: var(--dim); margin-top: 8px; line-height: 1.4; }

  /* ════════ CTA ════════ */
  .cta-zone .zbody { padding-block: 150px 130px; }
  .cta { text-align: center; }
  .cta h2 { font-family: var(--font-sans); font-weight: 700; font-size: 60px; line-height: 1.0; letter-spacing: -0.04em; margin: 0 auto; text-wrap: balance; color: var(--ink); }
  body.bold-type .cta h2 { font-size: 72px; }
  .cta p { color: var(--dim); font-size: 17px; margin: 20px auto 0; max-width: 440px; line-height: 1.55; }
  .cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
  .resurface { display: inline-flex; align-items: center; gap: 8px; margin-top: 52px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); cursor: pointer; }

  /* ════════ FOOTER ════════ */
  .foot-wrap { position: relative; z-index: 1; }
  .foot { border-top: 1px solid var(--foot-border); padding: 60px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
  .foot h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin: 0 0 16px; font-weight: 600; }
  .foot a { display: block; font-size: 14px; color: var(--dim); margin-bottom: 10px; transition: color 0.15s; }
  .foot a:hover { color: var(--accent); }
  .foot .bd { font-size: 13px; color: var(--faint); line-height: 1.55; margin-top: 16px; max-width: 260px; }
  .foot-bottom { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hairline-soft); font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

  @media (prefers-reduced-motion: reduce) {
    .bubble, .scrollcue, .livedot { animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    html { scroll-behavior: auto; }
  }
  @media (max-width: 1040px) {
    .wrap { grid-template-columns: 104px minmax(0,1fr); }
    .dnum { font-size: 40px; }
    .zbody { padding-left: 32px; }
  }
  @media (max-width: 980px) {
    .hero-grid, .feature, .feature.reverse .fcopy, .quote-grid, .foot-grid { grid-template-columns: 1fr; }
    .feature .fcopy { order: 0; }
    .trust, .surf-grid, .price-grid, .pill-grid { grid-template-columns: 1fr 1fr; }
    .hero .zbody { min-height: 0; }
    h1.title, body.bold-type h1.title { font-size: 52px; } .h2, body.bold-type .h2 { font-size: 36px; } .cta h2, body.bold-type .cta h2 { font-size: 44px; }
    .main-nav .nav-cta { display: none; } .main-nav { padding-inline: 20px; gap: 18px; }
  }
  @media (max-width: 720px) {
    .wrap { grid-template-columns: 1fr; padding-inline: 22px; }
    .rail { display: none; }
    .zbody { padding-left: 0; padding-block: 88px; }
    .wrap-narrow { padding-inline: 22px; }
    .trust, .surf-grid, .price-grid, .pill-grid { grid-template-columns: 1fr; }
    .map-grid { grid-template-columns: 1fr; }
    .manta { display: none; }
    h1.title, body.bold-type h1.title { font-size: 44px; } .cta h2, body.bold-type .cta h2 { font-size: 38px; }
  }