/* =============================================================================
   Customer Service Pro — Sub-page shell
   Shared by: privacy, terms, security, careers, press
   (status.html keeps its own inline styles because it has the live status panel)
============================================================================= */

:root {
  /* page.css is self-contained: the static sub-pages (careers, contact,
     privacy, security, terms, thanks, press, 404) load THIS FILE ALONE and
     never tokens.css, which is why the colour tokens below are duplicated
     rather than imported. Motion tokens must be duplicated for the same
     reason -- a var() defined only in tokens.css resolves to nothing here
     and silently disables the transition that references it.
     Keep this value identical to --ease-drawer in tokens.css. */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --bg: #04120C;
  --panel: rgba(255,255,255,0.04);
  --panel-2: rgba(255,255,255,0.07);
  --hairline: rgba(255,255,255,0.08);
  --hairline-2: rgba(255,255,255,0.14);
  --ink: #F4FBF7;
  --ink-soft: #B7C5BD;
  --ink-faint: #6E847A;
  --mint: #3FCF8E;
  --mint-soft: #6FE1AA;
  --mint-glow: rgba(63, 207, 142, 0.42);
  --mint-glow-2: rgba(63, 207, 142, 0.16);
  --mint-rim: rgba(63, 207, 142, 0.55);
  --rose: #FF7A8A;
  --amber: #FFC56A;
  --display: "Fraunces", Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Light theme override — matches the homepage's data-theme=light system */
html[data-theme="light"] {
  --bg:        #F4F7F3;
  --panel:     rgba(11, 28, 18, 0.04);
  --panel-2:   rgba(11, 28, 18, 0.07);
  --hairline:  rgba(11, 28, 18, 0.10);
  --hairline-2:rgba(11, 28, 18, 0.16);
  --ink:       #07140C;
  --ink-soft:  #2E3D33;
  --ink-faint: #5C6E62;
  --mint-glow:   rgba(28, 138, 79, 0.28);
  --mint-glow-2: rgba(28, 138, 79, 0.10);
  --mint-rim:    rgba(28, 138, 79, 0.45);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(80% 60% at 70% -10%, rgba(28, 138, 79, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #F4F7F3 0%, #EFF3ED 100%);
}
html[data-theme="light"] .brand img { filter: none; }
html[data-theme="light"] .brand .ink-dot { text-shadow: none; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* dvh so the sticky footer doesn't shift when mobile Safari's URL bar
     collapses; vh retained as the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(63, 207, 142, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #06170F 0%, #04120C 70%, #03100A 100%);
  pointer-events: none;
  z-index: 0;
}
.top, main, footer.base { position: relative; z-index: 1; }
a { color: var(--mint); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--mint); color: #001A0B; }
*:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 2px;
}

.top {
  padding: 24px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--hairline);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: 18px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
/* Brand orb. These pages carry the same mark as the main site: js/eye.js
   renders the WebGL orb into #stage and adds .live once it has actually
   drawn; until then -- and for good, where WebGL is unavailable -- the inline
   SVG holds the slot. The slot must stay square: eye.js hardcodes
   camera.aspect = 1, so a non-square host letterboxes the sphere. */
.brand-eye { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.brand-eye canvas { width: 100%; height: 100%; display: block; }
/* The halo cannot live in the WebGL scene -- one big enough to read falls
   outside the camera frustum and clips -- so it is a box-shadow. */
.brand-eye.live { box-shadow: 0 0 12px 1px var(--mint-glow-2); }
.brand-eye.live ~ .mark, .eye-slot.live ~ .mark { display: none; }
.eye-slot { position: relative; display: block; width: 100%; height: 100%; }
.eye-slot canvas { width: 100%; height: 100%; display: block; }
.brand .mark { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 0 12px var(--mint-glow-2)); }
.brand .pro { font-style: italic; margin-left: 0.18em; }
.brand .ink-dot { color: var(--mint); font-weight: 600; margin-left: 0.06em; text-shadow: 0 0 10px var(--mint-glow); }

main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 56px);
}

h1 {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "wght" 460;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}
h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "wght" 460;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 48px 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  margin: 28px 0 8px;
  color: var(--ink);
  text-wrap: balance;
}

.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 48px;
  font-variant-numeric: tabular-nums;
}
.lede {
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "wght" 380;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 32px;
  text-wrap: balance;
}
.callout {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--panel);
  padding: 20px 24px;
  margin: 24px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.callout strong { color: var(--amber); font-weight: 500; }
.callout.muted { color: var(--ink-faint); }

p { color: var(--ink-soft); margin: 0 0 16px; max-width: 65ch; text-wrap: pretty; }
ul, ol { color: var(--ink-soft); padding-left: 22px; margin: 0 0 16px; max-width: 65ch; }
li { margin-bottom: 8px; text-wrap: pretty; }
li::marker { color: var(--mint); }
strong { color: var(--ink); font-weight: 500; }
code {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 56px 0;
}

footer.base {
  padding: 32px clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
footer.base a { color: var(--ink-soft); }

/* =============================================================================
   Contact form
============================================================================= */
.contact-form {
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
}
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-form label .optional {
  color: var(--ink-mute, rgba(110, 120, 116, 0.7));
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  margin-left: 4px;
  font-style: italic;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  transition:
    background 220ms var(--ease-drawer),
    border-color 220ms var(--ease-drawer),
    box-shadow 220ms var(--ease-drawer);
  appearance: none;
  -webkit-appearance: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  background: var(--panel-2);
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(63, 207, 142, 0.12);
}
.contact-form input:user-invalid,
.contact-form select:user-invalid,
.contact-form textarea:user-invalid {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(255, 122, 138, 0.10);
}
.contact-form input:user-invalid:focus,
.contact-form select:user-invalid:focus,
.contact-form textarea:user-invalid:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(63, 207, 142, 0.12);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-faint);
  opacity: 0.6;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--sans);
}
.contact-form select {
  cursor: pointer;
  /* Chevron color updated #6EFBA6 → #3FCF8E (post-emerald rebalance) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%233FCF8E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
/* Dropdown option chrome — browsers paint the open menu from the
   <option> element directly, NOT from the parent <select>. Must set
   both bg + color per theme so the open menu is readable. */
.contact-form select option {
  background: #04120C;
  color: #F4FBF7;
}
html[data-theme="light"] .contact-form select option {
  background: #FFFFFF;
  color: #07140C;
}
.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 22px 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  /* Base: dark-on-light in dark mode, light-on-dark in light mode (auto-flips
     via tokens). Was hardcoded #03100A which became invisible-on-dark in
     light mode (#03100A text on #07140C button bg). */
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 8px 28px rgba(63, 207, 142,0.08);
  transition:
    background 220ms var(--ease-drawer),
    border-color 220ms var(--ease-drawer),
    color 220ms var(--ease-drawer),
    box-shadow 220ms var(--ease-drawer),
    transform 160ms var(--ease-drawer);
}
/* Light mode: drop the white inset highlight so the button reads as solid
   dark instead of dark-with-translucent-cap (the inset highlight was
   designed for a near-white button base). */
html[data-theme="light"] .submit-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 24px rgba(7, 20, 12, 0.18);
}
.submit-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .submit-btn:hover {
    background: var(--mint-soft);
    border-color: var(--mint-soft);
    /* Hover bg is always emerald-light in both themes — text must stay
       dark to remain readable. Override the var(--bg) base. */
    color: #001A0B;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.45),
      0 12px 36px rgba(63, 207, 142,0.22);
  }
}
.submit-btn .ico {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mint);
  color: #001A0B;
  font-size: 12px;
  box-shadow: 0 0 12px var(--mint-glow);
  transition: transform 320ms var(--ease-drawer);
}
@media (hover: hover) and (pointer: fine) {
  .submit-btn:hover .ico { transform: translate(3px, -1px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { background: var(--bg); }
}

/* =============================================================================
   Theme toggle — bottom-left fixed widget (matches homepage)
============================================================================= */
.theme-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 32px rgba(0,0,0,0.20);
  transition:
    background 320ms var(--ease-drawer),
    border-color 320ms var(--ease-drawer),
    transform 220ms var(--ease-drawer),
    box-shadow 320ms var(--ease-drawer);
}
html[data-theme="light"] .theme-toggle {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  box-shadow: 0 12px 28px rgba(11,28,18,0.10);
}
.theme-toggle:hover {
  border-color: var(--mint-rim);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 18px 44px rgba(0,0,0,0.28),
    0 0 24px var(--mint-glow-2);
}
.theme-toggle:active { transform: translateY(0) scale(0.98); }

.theme-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  overflow: hidden;
  transition: background 320ms ease;
}
html[data-theme="light"] .theme-toggle-track { background: rgba(11,28,18,0.08); }

.theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mint);
  display: grid;
  place-items: center;
  color: #001A0B;
  box-shadow: 0 0 12px var(--mint-glow-2), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 380ms var(--ease-drawer);
}
.theme-toggle.is-dark .theme-toggle-knob { transform: translateX(20px); }

.theme-toggle-knob svg {
  position: absolute;
  inset: 2px;
  transition: opacity 240ms ease, transform 360ms var(--ease-drawer);
}
.theme-toggle.is-light .ico-sun  { opacity: 1; transform: rotate(0);     }
.theme-toggle.is-light .ico-moon { opacity: 0; transform: rotate(-90deg); }
.theme-toggle.is-dark  .ico-sun  { opacity: 0; transform: rotate(90deg);  }
.theme-toggle.is-dark  .ico-moon { opacity: 1; transform: rotate(0);     }

.theme-toggle-label {
  position: relative;
  display: inline-grid;
  width: 36px;
  height: 16px;
  overflow: hidden;
  color: var(--ink);
}
.theme-toggle-label > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transition: opacity 240ms ease, transform 320ms var(--ease-drawer);
}
.theme-toggle.is-light .lbl-light { opacity: 1; transform: translateY(0);   }
.theme-toggle.is-light .lbl-dark  { opacity: 0; transform: translateY(100%); }
.theme-toggle.is-dark  .lbl-light { opacity: 0; transform: translateY(-100%); }
.theme-toggle.is-dark  .lbl-dark  { opacity: 1; transform: translateY(0);    }

@media (max-width: 560px) {
  .theme-toggle-label { display: none; }
  .theme-toggle { padding-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle-knob, .theme-toggle-knob svg,
  .theme-toggle-label > span { transition: none !important; }
}

/* ============================================================================
   MOBILE OVERRIDES — sub-page shell at narrow widths.
   Desktop unchanged above 720px.
============================================================================ */
@media (max-width: 720px) {
  .content { padding: 40px 20px 56px; }
  h1 { font-size: clamp(30px, 8vw, 42px); }
  h2 { font-size: clamp(20px, 5vw, 24px); margin: 36px 0 10px; }
  h3 { font-size: 15px; margin: 24px 0 8px; }
  .meta { margin: 0 0 28px; font-size: 10px; }
  .lede { font-size: 17px; margin: 0 0 22px; }
  hr { margin: 36px 0; }
  p, ul, ol { font-size: 15.5px; }
  .callout { padding: 16px 18px; margin: 18px 0; font-size: 11.5px; }

  /* Contact form: tighter spacing + tappable inputs (16px font-size
     prevents iOS auto-zoom on focus) */
  .contact-form { gap: 18px; margin: 24px 0; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    min-height: 48px;
    font-size: 16px;
  }
  .contact-form textarea { min-height: 140px; }
  .contact-form button[type="submit"] {
    min-height: 48px;
    width: 100%;
    justify-content: center;
  }

  /* Footer: stack columns */
  footer.base {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 20px;
    font-size: 10px;
  }

  /* Theme toggle: respect iOS safe-area + auto-hide when the user is
     typing so it doesn't obstruct form fields (mobile contact form). */
  .theme-toggle {
    left: calc(12px + env(safe-area-inset-left, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transition: opacity 220ms ease, transform 220ms var(--ease-drawer);
  }
  body:has(input:focus, textarea:focus, select:focus) .theme-toggle {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }
  /* Reserve scroll space at the bottom of sub-pages so the last form
     fields / CTAs aren't pinned under the floating chrome at rest. */
  main { padding-bottom: 96px; }
}

/* =============================================================================
   Skip link — keyboard a11y. Mirrors styles.css (React pages); static
   sub-pages need their own copy since they don't load the main stylesheet.
   page.css has no --r-pill token, so the radius is a 999px literal.
============================================================================= */
.skip-link {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--mint); color: #001A0B;
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  z-index: 1000; text-decoration: none;
  /* Off-screen via transform, not `top` — GPU-composited, no layout thrash.
     Mirrors styles.css. */
  transform: translateY(calc(-100% - 32px));
  transition: transform 220ms var(--ease-drawer);
}
.skip-link:focus-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

@media (max-width: 460px) {
  .content { padding: 32px 16px 64px; }
  h1 { font-size: 28px; }
  .lede { font-size: 16px; }
}