/* ============================================================
 * PayCal Technologies — Core Stylesheet
 * Theme: Windows 10 (light default / dark via OS preference)
 * Tokens sourced from paycal-private css/win10_{light,dark}/
 * ============================================================ */

/* ── Foundation variables (common defaults) ───────────────── */
:root {
  --text-base:           1.125rem;
  --text-adjustment:     0rem;
  --text:                clamp(0.75rem, calc(var(--text-base) + var(--text-adjustment)), 1.5rem);
  --line-height:         1.5;
  --spacing-base:        1rem;
  --spacing-adjustment:  0rem;
  --spacing:             clamp(0.60rem, calc(var(--spacing-base) + var(--spacing-adjustment)), 1.5rem);
  --font-xs:             0.50rem;
  --font-sm:             max(1rem, 1.00rem);
  --font-md:             1.10rem;
  --font-lg:             1.30rem;
  --font-xl:             1.70rem;
  --font-weight:         500;
  --sans-serif:          "Segoe UI", Roboto, "Open Sans", Lato, Verdana, Helvetica, Arial, sans-serif;
  --serif:               Merriweather, Garamond, "Times New Roman", serif;
  --monospace:           "Cascadia Code", "Consolas", "Courier New", Courier, monospace;
  --mar:                 var(--spacing);
  --mar-xs:              calc(var(--mar) / 4);
  --mar-sm:              calc(var(--mar) / 2);
  --mar-md:              var(--mar);
  --mar-lg:              calc(var(--mar) * 2);
  --pad:                 var(--spacing);
  --pad-xs:              calc(var(--pad) / 4);
  --pad-sm:              calc(var(--pad) / 2);
  --pad-md:              var(--pad);
  --pad-lg:              calc(var(--pad) * 2);
  --gap-xs:              var(--pad-xs);
  --gap-sm:              var(--pad-sm);
  --gap-md:              var(--pad-md);
  --gap-lg:              var(--pad-lg);
  --short-transition:    0.10s;
  --medium-transition:   0.30s;
}

/* ── Win10 Light tokens (default) ─────────────────────────── */
:root {
  color-scheme: light dark;

  --nav-menu-back:                       #ECEEF1;
  --nav-menu-fore:                       #1F1F1F;
  --system-tray-back:                    #E0E4E8;
  --text-color:                          #1F1F1F;
  --text-muted:                          #5C5C5C;
  --panel-footer-back:                   #E8EDF2;

  --border-size:                         1px;
  --border-radius:                       4px;
  --radius-button:                       calc(var(--border-radius) * 2);
  --radius-control:                      var(--border-radius);
  --radius-panel:                        var(--border-radius);
  --radius-dialog:                       var(--border-radius);
  --radius-cell:                         var(--border-radius);
  --radius-article:                      var(--border-radius);
  --border-inset-color:                  #D2D7DE;

  --work-back:                           #E6EBF1;
  --work-fore:                           #1F1F1F;
  --work-details-border:                 #D2D7DE;
  --work-entry-back:                     #F3F5F7;
  --work-entry-fore:                     #1F1F1F;

  --cal-day-fore:                        #1F1F1F;
  --cal-day-hover-fore:                  #1F1F1F;
  --cal-day-radius:                      4px;
  --cal-day-shadow:                      0 1px 2px rgba(0, 0, 0, 0.08);
  --cal-day-hover-glow:                  0 0 0 2px rgba(0, 120, 212, 0.22);

  --color-bg:                            #EAEEF2;
  --color-bg-soft:                       color-mix(in srgb, #EAEEF2 86%, #F0F2F4);
  --color-bg-elevated:                   color-mix(in srgb, #F1F3F6 90%, #ECEEF1);
  --color-bg-overlay:                    rgba(0, 0, 0, 0.40);
  --color-surface:                       #F1F3F6;
  --color-surface-muted:                 color-mix(in srgb, #F1F3F6 90%, #ECEEF1);
  --color-surface-strong:                #E6EAEE;
  --input-bg:                            var(--color-surface);

  --color-border:                        var(--color-text);
  --color-border-soft:                   color-mix(in srgb, #D2D7DE 72%, #F1F3F6);
  --color-border-strong:                 color-mix(in srgb, #D2D7DE 84%, black);

  --color-text:                          #1F1F1F;
  --color-text-muted:                    #5C5C5C;
  --color-text-inverse:                  #FFFFFF;
  --color-text-disabled:                 #000000;

  --color-primary:                       #005A9E;
  --color-primary-hover:                 #DEECF9;
  --color-primary-active:                color-mix(in srgb, #005A9E 82%, black);
  --color-primary-soft:                  color-mix(in srgb, #005A9E 18%, #F1F3F6);
  --color-on-primary:                    #FFFFFF;

  --color-success:                       #2E7D32;
  --color-warning:                       #EF6C00;
  --color-danger:                        #C42B1C;
  --color-info:                          #0288D1;

  --color-hover:                         rgba(127, 127, 127, 0.10);
  --color-active:                        rgba(127, 127, 127, 0.16);
  --color-focus-ring:                    #005A9E;
  --color-selection:                     color-mix(in srgb, #005A9E 24%, #F5F6F8);
  --color-highlight:                     rgba(255, 232, 122, 0.22);
  --color-disabled-bg:                   rgba(127, 127, 127, 0.08);

  --elevation-1-bg:                      color-mix(in srgb, #F1F3F6 92%, #ECEEF1);
  --elevation-2-bg:                      color-mix(in srgb, #F1F3F6 84%, #ECEEF1);
  --elevation-3-bg:                      color-mix(in srgb, #F1F3F6 76%, #ECEEF1);
  --overlay-backdrop:                    rgba(0, 0, 0, 0.58);

  --shadow-sm:                           0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md:                           0 6px 16px rgba(0, 0, 0, 0.18);
  --shadow-lg:                           0 16px 38px rgba(0, 0, 0, 0.24);

  --button-bg:                           #E7EBEF;
  --button-bg-hover:                     color-mix(in srgb, var(--button-bg) 90%, black);
  --button-bg-active:                    var(--color-primary-hover);
  --button-text:                         #1F1F1F;
  --button-border:                       #BFC6CF;
  --button-border-active:                #004D87;
  --button-primary-bg:                   #005A9E;
  --button-primary-text:                 #FFFFFF;
  --button-secondary-bg:                 #E2E7EC;
  --button-secondary-text:               #1F1F1F;
  --button-danger-text:                  #C42B1C;

  --panel-bg:                            #F1F3F6;
  --panel-text:                          #1F1F1F;
  --panel-border:                        #D2D7DE;
  --panel-head-bg:                       linear-gradient(180deg, #F5F7FA 0%, #E8EDF2 100%);
  --panel-head-text:                     #1F1F1F;

  --dialog-bg:                           #F3F5F7;
  --dialog-text:                         #1F1F1F;
  --dialog-border:                       #D2D7DE;
  --dialog-overlay:                      var(--overlay-backdrop);

  --calendar-bg:                         #EAEEF2;
  --calendar-border:                     #D2D7DE;
  --calendar-day-bg:                     #F5F7F9;
  --calendar-day-hover:                  #EAF3FC;
  --calendar-day-today:                  color-mix(in srgb, #0078D4 12%, #FFFFFF);
  --calendar-day-selected:               color-mix(in srgb, #0078D4 22%, #FFFFFF);
  --calendar-event-bg:                   var(--color-primary-soft);
  --calendar-event-text:                 var(--work-entry-fore, #1F1F1F);
  --calendar-range-bg:                   color-mix(in srgb, #0078D4 18%, #EAEEF2);
  --heading-accent-color:                var(--color-primary);
  --theme-signature-color:               var(--heading-accent-color);
}

/* ── Win10 Dark tokens (OS dark preference) ───────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --nav-menu-back:                     #202020;
    --nav-menu-fore:                     #F2F2F2;
    --system-tray-back:                  #191919;
    --text-color:                        #EDEDED;
    --text-muted:                        #A8A8A8;
    --panel-footer-back:                 #202429;

    --border-inset-color:                #3A3F45;

    --work-back:                         #181B1F;
    --work-fore:                         #EDEDED;
    --work-details-border:               #3A3F45;
    --work-entry-back:                   #22262B;
    --work-entry-fore:                   #EDEDED;

    --cal-day-fore:                      #EDEDED;
    --cal-day-hover-fore:                #FFFFFF;
    --cal-day-shadow:                    0 1px 2px rgba(0, 0, 0, 0.40);
    --cal-day-hover-glow:                0 0 0 2px rgba(58, 160, 243, 0.32);

    --color-bg:                          #111315;
    --color-bg-soft:                     color-mix(in srgb, #111315 86%, #202020);
    --color-bg-elevated:                 color-mix(in srgb, #1C1F23 90%, #202020);
    --color-bg-overlay:                  rgba(0, 0, 0, 0.40);
    --color-surface:                     #1C1F23;
    --color-surface-muted:               color-mix(in srgb, #1C1F23 90%, #202020);
    --color-surface-strong:              #202020;

    --color-border-soft:                 color-mix(in srgb, #3A3F45 72%, #1C1F23);
    --color-border-strong:               color-mix(in srgb, #3A3F45 84%, black);

    --color-text:                        #EDEDED;
    --color-text-muted:                  #C8C8C8;
    --color-text-inverse:                #0D1A26;
    --color-text-disabled:               color-mix(in srgb, #EDEDED 56%, #1C1F23);

    --color-primary:                     #57B3FF;
    --color-primary-hover:               #1A334A;
    --color-primary-active:              color-mix(in srgb, #57B3FF 82%, black);
    --color-primary-soft:                color-mix(in srgb, #57B3FF 18%, #1C1F23);
    --color-on-primary:                  #0D1A26;

    --color-danger:                      #FF5F56;
    --color-focus-ring:                  #57B3FF;
    --color-selection:                   color-mix(in srgb, #57B3FF 24%, #111315);

    --elevation-1-bg:                    color-mix(in srgb, #1C1F23 92%, #202020);
    --elevation-2-bg:                    color-mix(in srgb, #1C1F23 84%, #202020);
    --elevation-3-bg:                    color-mix(in srgb, #1C1F23 76%, #202020);

    --shadow-sm:                         0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md:                         0 6px 16px rgba(0, 0, 0, 0.28);
    --shadow-lg:                         0 16px 38px rgba(0, 0, 0, 0.36);

    --button-bg:                         #2A2E33;
    --button-bg-hover:                   color-mix(in srgb, var(--color-primary-hover) 88%, white);
    --button-bg-active:                  var(--color-primary-hover);
    --button-text:                       #FFFFFF;
    --button-border:                     #525A63;
    --button-border-active:              #73BCF7;
    --button-primary-bg:                 #57B3FF;
    --button-primary-text:               #0D1A26;
    --button-secondary-bg:               #23262A;
    --button-secondary-text:             #EDEDED;
    --button-danger-text:                #FF5F56;

    --panel-bg:                          #1C1F23;
    --panel-text:                        #EDEDED;
    --panel-border:                      #3A3F45;
    --panel-head-bg:                     linear-gradient(180deg, #2A2D31 0%, #202429 100%);
    --panel-head-text:                   #F2F2F2;

    --dialog-bg:                         #23262A;
    --dialog-text:                       #EDEDED;
    --dialog-border:                     #3A3F45;

    --calendar-bg:                       #111315;
    --calendar-border:                   #3A3F45;
    --calendar-day-bg:                   #1C1F23;
    --calendar-day-hover:                #263546;
    --calendar-day-today:                color-mix(in srgb, #57B3FF 12%, #1C1F23);
    --calendar-day-selected:             color-mix(in srgb, #57B3FF 22%, #1C1F23);
    --calendar-range-bg:                 color-mix(in srgb, #57B3FF 18%, #111315);
    --calendar-event-text:               var(--work-entry-fore, #EDEDED);
    --heading-accent-color:              var(--color-primary);
    --theme-signature-color:             var(--heading-accent-color);
  }
}

/* ── Manual theme override via <html data-theme="dark|light"> */
html[data-theme="dark"] {
  color-scheme: dark;
  --nav-menu-back: #202020; --nav-menu-fore: #F2F2F2; --system-tray-back: #191919;
  --text-color: #EDEDED; --text-muted: #A8A8A8; --panel-footer-back: #202429;
  --border-inset-color: #3A3F45;
  --work-back: #181B1F; --work-fore: #EDEDED; --work-details-border: #3A3F45;
  --work-entry-back: #22262B; --work-entry-fore: #EDEDED;
  --cal-day-fore: #EDEDED; --cal-day-hover-fore: #FFFFFF;
  --cal-day-shadow: 0 1px 2px rgba(0,0,0,0.40);
  --color-bg: #111315; --color-bg-soft: color-mix(in srgb, #111315 86%, #202020);
  --color-bg-elevated: color-mix(in srgb, #1C1F23 90%, #202020);
  --color-surface: #1C1F23; --color-surface-muted: color-mix(in srgb, #1C1F23 90%, #202020);
  --color-surface-strong: #202020;
  --color-border-soft: color-mix(in srgb, #3A3F45 72%, #1C1F23);
  --color-border-strong: color-mix(in srgb, #3A3F45 84%, black);
  --color-text: #EDEDED; --color-text-muted: #C8C8C8;
  --color-text-inverse: #0D1A26; --color-text-disabled: color-mix(in srgb, #EDEDED 56%, #1C1F23);
  --color-primary: #57B3FF; --color-primary-hover: #1A334A;
  --color-primary-active: color-mix(in srgb, #57B3FF 82%, black);
  --color-primary-soft: color-mix(in srgb, #57B3FF 18%, #1C1F23);
  --color-on-primary: #0D1A26; --color-danger: #FF5F56; --color-focus-ring: #57B3FF;
  --color-selection: color-mix(in srgb, #57B3FF 24%, #111315);
  --elevation-1-bg: color-mix(in srgb, #1C1F23 92%, #202020);
  --elevation-2-bg: color-mix(in srgb, #1C1F23 84%, #202020);
  --elevation-3-bg: color-mix(in srgb, #1C1F23 76%, #202020);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 6px 16px rgba(0,0,0,0.28);
  --shadow-lg: 0 16px 38px rgba(0,0,0,0.36);
  --button-bg: #2A2E33; --button-bg-hover: color-mix(in srgb, var(--color-primary-hover) 88%, white);
  --button-text: #FFFFFF; --button-border: #525A63; --button-border-active: #73BCF7;
  --button-primary-bg: #57B3FF; --button-primary-text: #0D1A26;
  --button-secondary-bg: #23262A; --button-secondary-text: #EDEDED;
  --panel-bg: #1C1F23; --panel-text: #EDEDED; --panel-border: #3A3F45;
  --panel-head-bg: linear-gradient(180deg, #2A2D31 0%, #202429 100%); --panel-head-text: #F2F2F2;
  --dialog-bg: #23262A; --dialog-text: #EDEDED; --dialog-border: #3A3F45;
  --calendar-bg: #111315; --calendar-border: #3A3F45; --calendar-day-bg: #1C1F23;
  --calendar-day-hover: #263546;
  --calendar-day-today: color-mix(in srgb, #57B3FF 12%, #1C1F23);
  --calendar-day-selected: color-mix(in srgb, #57B3FF 22%, #1C1F23);
  --calendar-range-bg: color-mix(in srgb, #57B3FF 18%, #111315);
  --heading-accent-color: var(--color-primary); --theme-signature-color: var(--heading-accent-color);
}

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #EAEEF2; --color-surface: #F1F3F6; --color-text: #1F1F1F;
  --color-text-muted: #5C5C5C; --color-text-inverse: #FFFFFF;
  --color-primary: #005A9E; --color-primary-hover: #DEECF9; --color-on-primary: #FFFFFF;
  --color-primary-active: color-mix(in srgb, #005A9E 82%, black);
  --color-primary-soft: color-mix(in srgb, #005A9E 18%, #F1F3F6);
  --color-focus-ring: #005A9E; --color-border-soft: color-mix(in srgb, #D2D7DE 72%, #F1F3F6);
  --panel-bg: #F1F3F6; --panel-text: #1F1F1F; --panel-border: #D2D7DE;
  --panel-head-bg: linear-gradient(180deg, #F5F7FA 0%, #E8EDF2 100%); --panel-head-text: #1F1F1F;
  --button-bg: #E7EBEF; --button-text: #1F1F1F; --button-border: #BFC6CF;
  --button-primary-bg: #005A9E; --button-primary-text: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 6px 16px rgba(0,0,0,0.18);
  --heading-accent-color: #005A9E; --theme-signature-color: var(--heading-accent-color);
}

/* ── Base reset ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  text-rendering: optimizeLegibility;
  scrollbar-gutter: stable;
  overflow-y: auto;
}

html, body {
  width: 100%;
  min-height: 100%;
  font-family: var(--sans-serif);
  font-size: var(--text, 1.125rem);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--theme-signature-color, var(--heading-accent-color, var(--color-text)));
  letter-spacing: 0.04rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--short-transition) ease;
}

a:hover {
  color: var(--color-primary-active, var(--color-primary));
  text-decoration: underline;
}

p { font-family: var(--sans-serif); line-height: var(--line-height); }

img { display: block; max-width: 100%; height: auto; }

/* ── Site layout ──────────────────────────────────────────── */
.landing {
  width: min(1040px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0;
}

.pct-main {
  display: block;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-md);
  padding: var(--pad-md) var(--pad-lg) var(--pad-md);
  border-bottom: var(--border-size) solid var(--color-border-soft);
  min-width: 0;
}

.brand {
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}

.brand:hover {
  color: var(--color-text);
  text-decoration: none;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 4rem 0;
}

.hero-copy {
  display: flex;
  flex-direction: column;
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.hero-copy h1 {
  margin: 0 0 var(--mar-md);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero-text {
  margin: 0 0 var(--mar-lg);
  color: var(--color-text-muted);
  font-size: var(--font-md);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

.hero-image img {
  width: 100%;
  border: var(--border-size) solid var(--color-border-soft);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 var(--pad-lg);
  border: var(--border-size) solid var(--button-border);
  border-radius: var(--radius-button);
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-family: var(--sans-serif);
  font-size: var(--font-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--short-transition) ease, box-shadow var(--short-transition) ease;
}

.button:hover {
  background-color: var(--color-primary-active, var(--button-primary-bg));
  color: var(--button-primary-text);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.link {
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  text-decoration: none;
  transition: color var(--short-transition) ease;
}

.link:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-md);
  padding: var(--pad-md) var(--pad-lg);
  border-top: var(--border-size) solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  min-width: 0;
}

.site-footer p {
  margin: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm) var(--gap-md);
  min-width: 0;
  max-width: 100%;
}

.site-footer nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--short-transition) ease;
  overflow-wrap: anywhere;
}

.site-footer nav a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--border-size) solid var(--button-border);
  border-radius: var(--radius-button);
  background-color: var(--button-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--short-transition) ease,
              color var(--short-transition) ease,
              border-color var(--short-transition) ease;
}

.theme-toggle:hover {
  background-color: var(--button-bg-hover, var(--color-hover));
  color: var(--color-text);
  border-color: var(--button-border-active);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.theme-toggle svg {
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Language switcher ────────────────────────────────────── */
.lang-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  max-width: 100%;
}

.lang-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.45rem;
  border: var(--border-size) solid transparent;
  border-radius: var(--radius-control);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--short-transition) ease,
              background-color var(--short-transition) ease,
              border-color var(--short-transition) ease;
}

.lang-switcher a:hover {
  color: var(--color-text);
  background-color: var(--color-hover);
  text-decoration: none;
}

.lang-switcher a[aria-current="true"] {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-color: var(--color-primary-active);
}

.lang-switcher a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .site-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--gap-sm);
    padding-inline: var(--pad-md);
  }

  .lang-switcher {
    width: 100%;
    justify-content: center;
  }

  .theme-toggle {
    align-self: flex-end;
  }

  .site-footer {
    align-items: center;
    flex-direction: column;
    padding-inline: var(--pad-md);
    text-align: center;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 2.5rem 0;
  }

  .hero-image {
    order: -1;
  }

  .principles-table th,
  .principles-table td {
    display: block;
    padding-right: 0;
  }
}

/* ── Sections ─────────────────────────────────────────────── */
.section {
  padding: 2.5rem 0;
  border-top: var(--border-size) solid var(--color-border-soft);
}

.section h2 {
  margin: 0 0 var(--mar-md);
  font-size: var(--font-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 680px;
}

/* ── List ─────────────────────────────────────────────────── */
.list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--font-md);
}

.list li {
  line-height: var(--line-height);
}

/* ── Principles table ─────────────────────────────────────── */
.principles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.principles-table th {
  padding: 0.65rem 2rem 0.65rem 0;
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  border-bottom: var(--border-size) solid var(--color-border-soft);
  vertical-align: top;
}

.principles-table td {
  padding: 0.65rem 0;
  border-bottom: var(--border-size) solid var(--color-border-soft);
  color: var(--color-text-muted);
  vertical-align: top;
}