/* DataClerk homepage — self-contained stylesheet.
   Mirrors the Micrographics design system: one ground tone, hairline
   hierarchy, ink meaning, one graphite accent, two monospace fonts.
   Ground-uniform: hairlines separate regions, no tonal fills. Numbers never
   wrap; no emojis. Light/dark via [data-theme]. */

:root{
  --parchment:#F4F4F2; --paper:#FCFCFB; --ink:#1B1C1E; --graphite:#6B7280;
  --accent:#4B5563; --hairline:#BAC0C7; --hairline-soft:#E2E5E9;
  --error:#A24A3C; --success:#5C826B; --on-accent:#FCFCFB;
  --muted:#8B929B; --accent-hover:#3A424C;
}
:root[data-theme="dark"]{
  --parchment:#15171A; --paper:#191C20; --ink:#EAEDF1; --graphite:#9AA3AF;
  --accent:#C7CCD3; --hairline:#3A4049; --hairline-soft:#2A2F36;
  --error:#C76655; --success:#7FAA8C; --on-accent:#15171A;
  --muted:#6B7280; --accent-hover:#D6DAE0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--parchment); color:var(--ink);
  font-family:"IBM Plex Mono",monospace; font-size:12px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-top:65px;
}

/* micrographics scrollbars */
*{scrollbar-width:thin; scrollbar-color:var(--hairline) transparent}
*::-webkit-scrollbar{width:8px; height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--hairline); border:2px solid var(--parchment)}
*::-webkit-scrollbar-thumb:hover{background:var(--graphite)}
*::-webkit-scrollbar-corner{background:transparent}

/* unified focus ring — kill the browser blue; show a hairline halo on keyboard focus */
:focus{outline:none}
:focus-visible{outline:none; box-shadow:0 0 0 2px var(--hairline-soft)}

/* typography helpers */
.caps{font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:500}
.graphite{color:var(--graphite)}
.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}

/* Top bar */
.topbar{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:24px; padding:18px 32px; border-bottom:1px solid var(--hairline); background:var(--parchment)}
.topbar svg{width:16px; height:16px; display:block}
.wordmark{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:14px; letter-spacing:.05em; text-transform:uppercase}
.topbar .spacer{flex:1}

/* Language / theme switcher */
.lang{display:inline-flex; border:1px solid var(--hairline-soft)}
.lang button,.lang a{font:inherit; background:transparent; border:0; padding:6px 10px; color:var(--graphite); cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
.lang button[aria-pressed="true"],.lang a[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.lang button + button,.lang a + a{border-left:1px solid var(--hairline-soft)}

/* Buttons */
.btn{font:inherit; cursor:pointer; border:1px solid var(--hairline); background:transparent; color:var(--ink); padding:8px 14px; white-space:nowrap}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.topbar .btn{padding:6px 8px; display:inline-flex; align-items:center; justify-content:center}
.btn-block{display:block; width:100%; text-align:center; margin-top:24px}

/* Status dot */
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle}
.dot.idle{background:var(--muted)}

/* Card */
.card{border:1px solid var(--hairline); padding:20px; margin-bottom:28px}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px}
.field + .field{margin-top:16px}
.field label{color:var(--graphite)}
.input{font-family:"IBM Plex Mono",monospace; font-size:12px; background:var(--parchment); color:var(--ink); border:1px solid var(--hairline); border-radius:2px; padding:10px 12px; width:100%; height:37px}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--hairline-soft)}
textarea.input{resize:vertical; min-height:96px; line-height:1.5; height:auto}
.field .help{color:var(--muted); font-size:11px}
.form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field + .form-grid2,
.form-grid2 + .field,
.form-grid2 + .form-grid2{margin-top:16px}
.form-grid2 .field + .field{margin-top:0}
select.input{appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='square'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px; padding-right:34px}
:root[data-theme="dark"] select.input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3AF' stroke-width='1.6' stroke-linecap='square'><polyline points='6 9 12 15 18 9'/></svg>")}

/* ===== Landing-page layout ===== */
.hp-anchor{scroll-margin-top:84px}
.hp{max-width:1200px; margin:0 auto; padding:0 40px}

/* Topbar additions: in-page anchor nav */
.hp-nav{display:inline-flex; gap:4px}
.hp-nav a{font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:500; color:var(--graphite); text-decoration:none; padding:6px 10px; white-space:nowrap}
.hp-nav a:hover{color:var(--ink)}

/* Hero */
.hp-hero{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; padding:80px 0 72px; border-bottom:1px solid var(--hairline); align-items:start}
.hp-eyebrow{color:var(--graphite); margin-bottom:20px; display:inline-flex; gap:8px; align-items:center}
.hp-eyebrow .dot.idle{background:var(--accent)}
.hp-hero h1{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:42px; line-height:1.12; letter-spacing:-0.01em; margin:0 0 20px}
.hp-hero .lede{color:var(--graphite); font-size:13px; line-height:1.75; max-width:54ch; margin:0 0 28px}
.hp-cta{display:flex; gap:12px; flex-wrap:wrap}

/* Spec plate */
.spec{border-top:1px solid var(--hairline); border-left:1px solid var(--hairline)}
.spec-head{padding:14px 16px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--paper)}
.spec-head .k{color:var(--graphite)}
.spec-row{display:grid; grid-template-columns:130px 1fr; padding:14px 16px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.spec-row .k{color:var(--graphite)}
.spec-row .v{border-left:1px solid var(--hairline-soft); padding-left:16px; margin-left:-16px; align-self:center}

/* Sections */
.hp-section{padding:72px 0; border-bottom:1px solid var(--hairline)}
.hp-section-head{margin-bottom:36px}
.hp-section h2{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:24px; line-height:1.25; margin:6px 0 10px}
.hp-section .intro{color:var(--graphite); margin:0; font-size:13px; line-height:1.7}

/* ===== Services table (the centerpiece) ===== */
.svc{border:1px solid var(--hairline); overflow-x:auto}
.svc table{width:100%; border-collapse:collapse; min-width:680px}
.svc thead th{
  font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.1em;
  font-size:10px; font-weight:500; color:var(--graphite); text-align:left;
  padding:14px 18px; border-bottom:1px solid var(--hairline); white-space:nowrap; background:var(--paper)
}
.svc thead th.r{text-align:right}
.svc tbody td{padding:16px 18px; border-bottom:1px solid var(--hairline-soft); vertical-align:top; font-size:12px; line-height:1.55}
.svc tbody tr:last-child td{border-bottom:0}
.svc .svc-name{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:13px; white-space:nowrap}
.svc .svc-pain{color:var(--graphite); min-width:240px}
.svc .price{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:13px; text-align:right; white-space:nowrap}
.svc-note{margin-top:14px; color:var(--muted); font-size:11px; line-height:1.6}

/* Capabilities ruled grid */
.cap{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline); border-left:1px solid var(--hairline)}
.cap .cell{padding:22px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.cap .ico{width:32px; height:32px; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--ink)}
.cap .ico svg{width:16px; height:16px}
.cap .t{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:13px; margin:0 0 6px}
.cap .d{color:var(--graphite); font-size:11px; line-height:1.6; margin:0}

/* Pipeline numbered strip */
.pipe{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline); border-left:1px solid var(--hairline)}
.pipe .step{padding:22px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.pipe .n{font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--graphite); margin-bottom:10px}
.pipe .l{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:13px; margin-bottom:4px}
.pipe .d{color:var(--graphite); font-size:11px; line-height:1.55; margin:0}

/* Philosophy pull-quote — centered */
.quote{max-width:78ch; margin:0 auto; text-align:center}
.quote .q{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:22px; line-height:1.45; margin:0 0 18px}
.quote .a{color:var(--graphite); font-size:12px}

/* Operating principles — two columns */
.rules{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--hairline); border-left:1px solid var(--hairline)}
.rules .col{padding:26px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.rules h3{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:13px; margin:0 0 18px; text-transform:uppercase; letter-spacing:.1em}
.rules ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.rules li{display:flex; gap:12px; align-items:flex-start; color:var(--graphite); font-size:12px; line-height:1.6}
.rules li .mark{flex:0 0 auto; margin-top:3px; display:flex}
.rules li .mark svg{width:14px; height:14px; display:block}
.rules .always .mark{color:var(--success)}
.rules .never .mark{color:var(--error)}

/* Reach out / apply */
.apply{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start}
.apply-side .lead{color:var(--graphite); font-size:13px; line-height:1.7; margin:0 0 8px}
.apply-side .steps{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:16px}
.apply-side .steps li{display:flex; gap:14px; align-items:flex-start; color:var(--graphite); font-size:12px; line-height:1.6}
.apply-side .steps .nbadge{flex:0 0 auto; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--graphite); border:1px solid var(--hairline); padding:3px 7px}
.apply-note{margin-top:18px; color:var(--muted); font-size:11px; display:flex; gap:8px; align-items:flex-start}
.apply-note svg{width:13px; height:13px; flex:0 0 auto; margin-top:2px}

/* Footer */
.hp-footer{padding:44px 0 64px; display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.hp-footer .wm{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase}
.hp-footer .tag{color:var(--graphite); font-size:11px}
.hp-footer .spacer{flex:1}
.hp-footer .copy{color:var(--muted); font-size:11px}
.hp-footer .copy a{color:var(--muted); text-decoration:none}
.hp-footer .copy a:hover{color:var(--graphite)}
.hp-footer .version{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); border:1px solid var(--hairline-soft); padding:2px 8px}

@media(max-width:1024px){
  .hp-hero{grid-template-columns:1fr; gap:36px}
  .hp-nav{display:none}
  .cap{grid-template-columns:repeat(2,1fr)}
  .pipe{grid-template-columns:repeat(2,1fr)}
  .apply{grid-template-columns:1fr; gap:32px}
  .form-grid2{grid-template-columns:1fr}
  .form-grid2 .field + .field{margin-top:16px}
}
@media(max-width:720px){
  .hp{padding:0 20px}
  .hp-hero{padding:52px 0 44px}
  .hp-hero h1{font-size:30px}
  .hp-section{padding:48px 0}
  .hp-section h2{font-size:20px}
  .rules{grid-template-columns:1fr}
  .cap{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr}
  .topbar{padding:14px 20px; gap:12px}
  .topbar-cta{display:none}
  .quote .q{font-size:18px}
}

/* Contact form status (AJAX feedback) */
.form-status{margin-top:16px; padding:12px 14px; border:1px solid var(--hairline); border-radius:2px; font-size:12px; line-height:1.5}
.form-status[data-kind="ok"]{border-color:var(--success); color:var(--success)}
.form-status[data-kind="err"]{border-color:var(--error); color:var(--error)}
.form-status[hidden]{display:none}

/* Single-card screen (404) — centers a card below the topbar */
.auth{min-height:calc(100vh - 65px); display:flex; padding:40px 24px}
.auth > .card{margin:auto; width:100%; max-width:400px; padding:28px}
.auth-avatar{width:48px; height:48px; border:1px solid var(--hairline); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--graphite)}
.auth-avatar svg{width:24px; height:24px}
.auth h1{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:18px; line-height:1.3; letter-spacing:0; text-align:center; margin:0 0 4px}
.auth .sub{text-align:center; color:var(--graphite); margin:0 0 24px}
.auth .eyebrow{text-align:center; margin:0 0 6px}
.link{color:var(--accent); text-decoration:none; white-space:nowrap}
.link:hover{text-decoration:underline}