/* In the Moment Technology — brand system: "dawn on the water"
   Deep-navy ground, one warm dawn accent, serif display. Committed dark theme
   (matches the brand's world and Charlie's dark-navy preference). */
:root {
  --bg:      #0d1826;   /* deep navy — ocean before sunrise */
  --panel:   #142438;
  --card:    #16273b;
  --line:    #26394f;
  --text:    #eef2f7;   /* sea foam — never pure white */
  --muted:   #9db2cc;
  --accent:  #f2a65a;   /* dawn — first light */
  --accent-ink: #10203a;
  --sea:     #46b3a4;   /* sea glass */
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: min(960px, calc(100% - 40px));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #5a708c;
  transition: text-decoration-color .15s ease;
}
a:hover { text-decoration-color: var(--accent); }

.site { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- header / brand mark ---- */
header {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}
.nav {
  width: var(--wrap);
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.brand a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: -0.01em;
}
.brand .mark { width: 30px; height: 18px; flex: none; }
.nav-links { display: flex; gap: 20px; font-size: 14px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

/* ---- layout ---- */
main { flex: 1; width: var(--wrap); margin: 0 auto; padding: 72px 0; }
.hero { max-width: 780px; }

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 22px;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

p { margin: 0 0 16px; max-width: 68ch; }
.lede { font-size: 20px; color: var(--muted); max-width: 54ch; }

/* founder signature line — the 1997 brag, in Charlie's voice */
.sig {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--text);
  margin-top: 30px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}

/* ---- cards ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.card h2 { font-size: 19px; }
.card p:last-child { margin-bottom: 0; }
.card a { color: var(--accent); }

/* "what we do" split under the hero */
.does { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 52px; }
.does .lab { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sea); margin-bottom: 8px; }
.does p { color: var(--muted); margin: 0; }

/* ---- long-form sections (privacy / support) ---- */
.section {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.section p:last-child { margin-bottom: 0; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer-inner {
  width: var(--wrap);
  margin: 0 auto;
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-inner a { color: var(--muted); }
.footer-inner a:hover { color: var(--text); }

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

@media (max-width: 700px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .grid, .does { grid-template-columns: 1fr; }
  .does { gap: 22px; }
  main { padding: 48px 0; }
}