/* ============================================================
     Scubra Dive Log — tokens mirrored from scubra-tokens.css
     Light palette lives on bare :root so the un-stamped
     (system-default) document always resolves.
     ============================================================ */
  :root {
    --navy:        #1B2A40;
    --navy-deep:   #142036;
    --coral:       #F26522;
    --coral-ink:   #AE410B;
    --bone:        #F5F1EA;
    --paper:       #FFFFFF;
    --sunken:      #E8E3D9;

    --fg-1: #1A2530;
    --fg-2: #46443D;
    --fg-3: #6E6A60;
    --fg-accent: var(--coral-ink);
    --fg-primary: var(--navy);

    --bg-page:    var(--bone);
    --bg-surface: var(--paper);
    --bg-sunken:  var(--sunken);
    --bg-tint-accent: #FFF1E8;
    --bg-tint-primary: #E8EEF2;
    --chip-cloud-bg: #FDE0CD;
    --chip-cloud-fg: #8F350A;
    --chip-free-bg: #E4EAF0;
    --chip-free-fg: #1B2A40;
    --chip-comm-bg: #DCE9DF;
    --chip-comm-fg: #2C5641;

    --hairline: #E0DACE;
    --hairline-strong: #D2CCC0;

    --shadow-1: 0 1px 2px rgb(26 37 48 / 0.06);
    --shadow-2: 0 4px 14px rgb(26 37 48 / 0.07);

    --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --measure: 68ch;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fg-1: #F5F1EA;
      --fg-2: #D2CCC0;
      --fg-3: #A8A296;
      --fg-accent: #FF945C;
      --fg-primary: #8FA0B5;

      --bg-page:    #0B1418;
      --bg-surface: #121E24;
      --bg-sunken:  #081014;
      --bg-tint-accent: #481A04;
      --bg-tint-primary: #08111E;
      --chip-free-bg: #1E2E3C;
      --chip-free-fg: #C7D2DE;
      --chip-cloud-bg: #4E1D06;
      --chip-cloud-fg: #FFB385;
      --chip-comm-bg: #16301F;
      --chip-comm-fg: #9CC7AC;

      --hairline: #1E2C34;
      --hairline-strong: #2A3B45;

      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow-2: 0 4px 14px rgb(0 0 0 / 0.5);
    }
  }

  :root[data-theme="dark"] {
    --fg-1: #F5F1EA;
    --fg-2: #D2CCC0;
    --fg-3: #A8A296;
    --fg-accent: #FF945C;
    --fg-primary: #8FA0B5;

    --bg-page:    #0B1418;
    --bg-surface: #121E24;
    --bg-sunken:  #081014;
    --bg-tint-accent: #481A04;
    --bg-tint-primary: #08111E;
    --chip-free-bg: #1E2E3C;
    --chip-free-fg: #C7D2DE;
    --chip-cloud-bg: #4E1D06;
    --chip-cloud-fg: #FFB385;
    --chip-comm-bg: #16301F;
    --chip-comm-fg: #9CC7AC;

    --hairline: #1E2C34;
    --hairline-strong: #2A3B45;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 14px rgb(0 0 0 / 0.5);
  }

  /* ============================================================
     Base
     ============================================================ */
  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg-page);
    color: var(--fg-1);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 24px 96px;
  }

  a {
    color: var(--fg-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible {
    outline: 2px solid var(--fg-primary);
    outline-offset: 2px;
    border-radius: 2px;
  }

  p { margin: 0; }

  strong { font-weight: 600; color: var(--fg-1); }

  /* ============================================================
     Masthead
     ============================================================ */
  .masthead {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 52px 0 40px;
    border-bottom: 2px solid var(--fg-primary);
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin: 0;
  }

  .masthead h1 {
    font-size: clamp(38px, 8vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 600;
    margin: 0;
    color: var(--fg-primary);
    text-wrap: balance;
  }

  .lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--fg-2);
    max-width: 56ch;
  }

  .masthead-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: 0.02em;
  }

  /* ============================================================
     Sections
     ============================================================ */
  section { padding-top: 64px; }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
  }

  .section-head h2 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0;
    color: var(--fg-1);
    text-wrap: balance;
  }

  .section-head .eyebrow { color: var(--fg-accent); }

  .stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .stack p { max-width: 62ch; }
  .stack ul { margin: 0; padding-left: 20px; max-width: 62ch; color: var(--fg-2); }
  .stack li { margin-bottom: 8px; }
  .stack li:last-child { margin-bottom: 0; }

  /* ============================================================
     Numbered steps — a real sequence, so it is numbered
     ============================================================ */
  .steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 16px;
    align-items: start;
  }

  .steps li::before {
    content: counter(step);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    height: 26px;
    color: var(--fg-primary);
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    margin-top: 2px;
  }

  .steps h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--fg-1);
    letter-spacing: -0.01em;
  }

  .steps p { color: var(--fg-2); }

  /* ============================================================
     Feature list
     ============================================================ */
  .features {
    display: flex;
    flex-direction: column;
  }

  .feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 0;
    border-top: 1px solid var(--hairline);
  }
  .feature:last-child { border-bottom: 1px solid var(--hairline); }

  .feature-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 12px;
  }

  .feature h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--fg-1);
  }

  .feature p { color: var(--fg-2); max-width: 60ch; }

  .chip {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.5;
  }

  .chip-free {
    background: var(--chip-free-bg);
    color: var(--chip-free-fg);
  }

  .chip-cloud {
    background: var(--chip-cloud-bg);
    color: var(--chip-cloud-fg);
  }

  .chip-comm {
    background: var(--chip-comm-bg);
    color: var(--chip-comm-fg);
  }

  /* In-app navigation paths read as instrument labels */
  .path {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--bg-sunken);
    color: var(--fg-1);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--fg-3);
  }
  .legend span { display: inline-flex; align-items: center; gap: 8px; }

  /* ============================================================
     Tiers — three levels, each a superset of the one before
     ============================================================ */
  .tiers {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
  }

  .tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--hairline);
  }
  .tier:first-child { border-radius: 12px 12px 0 0; }
  .tier:last-child  { border-radius: 0 0 12px 12px; }
  .tier + .tier { border-top: none; }

  .tier-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
  }

  .tier h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--fg-1);
  }

  .tier .tier-cost {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
  }

  .tier p { color: var(--fg-2); }

  .tier ul {
    margin: 0;
    padding-left: 20px;
    color: var(--fg-2);
  }
  .tier li { margin-bottom: 6px; }
  .tier li:last-child { margin-bottom: 0; }

  /* ============================================================
     Callout
     ============================================================ */
  .callout {
    background: var(--bg-surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 24px 26px;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .callout .eyebrow { color: var(--fg-accent); }
  .callout p { color: var(--fg-2); }
  .callout ol, .callout ul { margin: 0; padding-left: 20px; color: var(--fg-2); }
  .callout li { margin-bottom: 8px; }
  .callout li:last-child { margin-bottom: 0; }

  /* ============================================================
     Priorities
     ============================================================ */
  .priorities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .priorities li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 14px;
    align-items: start;
    color: var(--fg-2);
  }

  .priorities li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 11px;
    border-radius: 999px;
    background: var(--coral);
  }

  /* ============================================================
     FAQ
     ============================================================ */
  .faq {
    display: flex;
    flex-direction: column;
  }

  .qa {
    padding: 24px 0;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .qa:last-child { border-bottom: 1px solid var(--hairline); }

  .qa h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--fg-primary);
    text-wrap: balance;
  }

  .qa p, .qa li { color: var(--fg-2); max-width: 62ch; }
  .qa ol, .qa ul { margin: 0; padding-left: 20px; }
  .qa li { margin-bottom: 8px; }
  .qa li:last-child { margin-bottom: 0; }

  /* ============================================================
     Footer
     ============================================================ */
  .colophon {
    margin-top: 72px;
    padding-top: 28px;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.9;
    color: var(--fg-3);
    letter-spacing: 0.02em;
  }

  /* ============================================================
     Language switch — mirrors the main site's LanguageSelector:
     native names, a persisted choice, browser language as default.
     ============================================================ */
  .topbar {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
  }

  .lang-select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    background: transparent;
    color: var(--fg-2);
    border: 1px solid var(--hairline-strong);
    border-radius: 8px;
    padding: 5px 30px 5px 12px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236E6A60' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .lang-select:hover { color: var(--fg-1); border-color: var(--fg-3); }
  .lang-select:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
  .lang-select option { background: var(--bg-surface); color: var(--fg-1); }

  @media (max-width: 560px) {
    .wrap { padding: 0 18px 72px; }
    .masthead { padding-top: 36px; }
    section { padding-top: 52px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }