/* Home Measure site and web app. Drafting-paper light, ink-dark at night; teal for actions,
   dimension orange for measurements (as in the app's plans). */
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400 700; font-display: swap; src: url(/fonts/hanken-grotesk.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono.woff2) format('woff2'); }

:root {
  --paper: #F3F1EC;
  --paper-2: #EAE7DF;
  --card: #FFFFFF;
  --ink: #0F1E21;
  --muted: #56676A;
  --line: rgba(15, 30, 33, 0.12);
  --grid: rgba(10, 118, 111, 0.06);
  --teal: #0A766F;
  --teal-ink: #FFFFFF;
  --teal-soft: rgba(10, 118, 111, 0.1);
  --dim: #C2410C;
  --danger: #B42318;
  --shadow: 0 1px 2px rgba(15, 30, 33, 0.06), 0 12px 32px -12px rgba(15, 30, 33, 0.18);
  --radius: 18px;
  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --body: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B1416;
    --paper-2: #101C1F;
    --card: #142326;
    --ink: #E8F0EE;
    --muted: #9DB4B1;
    --line: rgba(232, 240, 238, 0.13);
    --grid: rgba(43, 179, 167, 0.07);
    --teal: #2BB3A7;
    --teal-ink: #062A27;
    --teal-soft: rgba(43, 179, 167, 0.14);
    --dim: #FB8A4C;
    --danger: #F97066;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font: 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-underline-offset: 3px; }
img, svg, canvas { max-width: 100%; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 0.86em; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
h1, h2, h3 { line-height: 1.08; margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--display); letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; color: var(--teal); }

/* Header */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); background: color-mix(in srgb, var(--paper) 78%, transparent); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.top nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.top nav a { color: var(--ink); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--teal); }
@media (max-width: 760px) { .top nav .hide-sm { display: none; } .top nav { gap: 14px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font: 600 15.5px/1 var(--body); text-decoration: none; cursor: pointer; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: var(--teal-ink); box-shadow: 0 8px 20px -10px var(--teal); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Footer */
.foot { border-top: 1px solid var(--line); margin-top: 96px; padding: 40px 0 56px; font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--teal); }
.foot .small { color: var(--muted); font-size: 13.5px; margin-left: auto; }

/* Text pages (privacy, support, terms) */
.doc { width: min(760px, 100% - 32px); margin: 48px auto 0; }
.doc h1 { font-size: clamp(40px, 6vw, 60px); margin-bottom: 8px; }
.doc h2 { font-size: 30px; margin: 40px 0 10px; }
.doc h3 { font: 650 18px/1.3 var(--body); margin: 24px 0 6px; }
.doc .card { padding: 8px 28px 24px; margin-top: 24px; }
.doc li { margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.brand, .top nav a { white-space: nowrap; }
@media (max-width: 480px) { .top .wrap { gap: 10px; } .brand { font-size: 15.5px; gap: 8px; } .brand img { width: 26px; height: 26px; } .top nav { gap: 12px; } .top nav .btn { padding: 0 12px; } }