/* ============================================================
   slipdock.ai — marketing site layer

   Loads AFTER assets/slipdock.css and adds only what a multi-page public
   site needs that the product design system does not: a header, a footer,
   a hero, prose rhythm, comparison tables, and an explicit theme override
   so the toggle can beat the OS preference.

   Rules inherited and NOT broken here:
     · amber (--sd-amber*) means "a human must act". Nothing else. Ever.
     · beacon means the agent is acting. live/green means it is done.
     · square corners, hard offset shadows, zero blur.
     · 44px touch targets, 16px inputs, no horizontal overflow at 375px.
   ============================================================ */

/* ── explicit theme overrides ─────────────────────────────────
   slipdock.css declares dark inside @media (prefers-color-scheme: dark),
   specificity (0,1,0). These attribute selectors are (0,2,0), so a manual
   choice wins in both directions regardless of source order. With JS off
   nothing is stamped and the OS preference stands. */
:root[data-theme="light"] {
  --sd-canvas:#FFFFFF; --sd-surface:#F2F5F8; --sd-paper:#FFFFFF;
  --sd-line:#D8E0E8;   --sd-line2:#EAEFF4;
  --sd-ink:#0D1B2A;    --sd-ink2:#38485C;  --sd-ink3:#5F6E80;
  --sd-ink-invert:#FFFFFF;
  --sd-hull:#0E5C86;   --sd-hull-strong:#0A4667; --sd-hull-soft:#E3EFF6;
  --sd-hull-ink:#073A56; --sd-on-hull:#FFFFFF;
  --sd-beacon:#00A5BA; --sd-beacon-soft:#D6F2F6; --sd-beacon-text:#00707E;
  --sd-amber:#F5A623;  --sd-amber-soft:#FDEFD5;  --sd-amber-text:#8A5300;
  --sd-on-amber:#0D1B2A;
  --sd-live:#1E8E4A;   --sd-live-strong:#17703A; --sd-live-soft:#DEF2E5;
  --sd-live-text:#17703A;
  --sd-danger:#D14343; --sd-danger-soft:#FBE3E3; --sd-danger-text:#B3302F;
}
:root[data-theme="dark"] {
  --sd-canvas:#0D1520; --sd-surface:#131E2C; --sd-paper:#111B27;
  --sd-line:#26364A;   --sd-line2:#1B2938;
  --sd-ink:#E6EDF5;    --sd-ink2:#A9B8C9;  --sd-ink3:#7C8B9E;
  --sd-ink-invert:#0D1520;
  --sd-hull:#3D9BD1;   --sd-hull-strong:#62B4E2; --sd-hull-soft:#14304A;
  --sd-hull-ink:#BBDCF2; --sd-on-hull:#06121C;
  --sd-beacon:#22C3D6; --sd-beacon-soft:#0C3540; --sd-beacon-text:#46D2E3;
  --sd-amber:#F5B547;  --sd-amber-soft:#3A2A0C;  --sd-amber-text:#F0BC63;
  --sd-on-amber:#1A1200;
  --sd-live:#3BB56B;   --sd-live-strong:#3BB56B; --sd-live-soft:#0F2E1D;
  --sd-live-text:#5FCB88;
  --sd-danger:#E86A6A; --sd-danger-soft:#3A1717; --sd-danger-text:#F08A8A;
}
/* The dark ink slab behind .sd-term must stay dark in both themes, and its
   text must stay legible there. */
:root[data-theme="dark"] .sd-term { background:#060C14; color:#D6E3EF; border-color:#060C14; }

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ── skip link ────────────────────────────────────────────── */
.sd-skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sd-hull); color:var(--sd-on-hull);
  padding:12px var(--sd-4); font-weight:600; text-decoration:none;
}
.sd-skip:focus { left:0; color:var(--sd-on-hull); }

/* ── header ───────────────────────────────────────────────── */
.sd-header {
  border-bottom:2px solid var(--sd-ink);
  background:var(--sd-canvas);
}
.sd-header__in {
  max-width:1060px; margin:0 auto; padding:var(--sd-3) var(--sd-4);
  display:flex; align-items:center; gap:var(--sd-4); flex-wrap:wrap;
}
/* The wordmark is the primary navigation control, so it gets a full target at
   every pointer type rather than being sized by its 26px glyph. */
.sd-header .sd-logo { min-height:44px; padding-right:var(--sd-2); }
.sd-header .sd-logo:focus-visible { outline:3px solid var(--sd-beacon); outline-offset:2px; }

.sd-nav { display:flex; align-items:center; gap:2px; flex-wrap:wrap; flex:1 1 auto; }
.sd-nav a {
  font-size:14px; font-weight:500; color:var(--sd-ink2); text-decoration:none;
  padding:10px var(--sd-3); min-height:44px; display:inline-flex; align-items:center;
  border:2px solid transparent;
}
.sd-nav a:hover { color:var(--sd-ink); background:var(--sd-surface); }
.sd-nav a[aria-current="page"] {
  color:var(--sd-ink); font-weight:600; border-bottom-color:var(--sd-hull);
}
.sd-nav a:focus-visible { outline:3px solid var(--sd-beacon); outline-offset:-1px; }

.sd-themetoggle {
  font-family:var(--sd-mono); font-size:12px; line-height:1;
  min-height:44px; min-width:44px; padding:0 var(--sd-3);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--sd-paper); color:var(--sd-ink2);
  border:2px solid var(--sd-line); cursor:pointer;
}
.sd-themetoggle:hover { border-color:var(--sd-ink); color:var(--sd-ink); }
.sd-themetoggle:focus-visible { outline:3px solid var(--sd-beacon); outline-offset:2px; }
.sd-themetoggle[hidden] { display:none; }

/* On a phone the three-part header wraps into three stacked rows and eats half
   the first screen. Pair the wordmark with the toggle on one row and let the
   nav take the full width below it — two rows of 44px targets instead of
   three rows of mostly whitespace. */
@media (max-width:719px) {
  .sd-header__in { gap:var(--sd-2); padding:var(--sd-2) var(--sd-4); }
  .sd-header .sd-logo { flex:1 1 auto; }
  .sd-logo__word { font-size:18px; }
  .sd-themetoggle { order:2; }
  .sd-nav { order:3; flex:1 0 100%; gap:0; margin:0 calc(-1 * var(--sd-2)); }
  .sd-nav a { padding:10px var(--sd-2); font-size:14px; }
}

/* ── page shell ───────────────────────────────────────────── */
.sd-main { display:block; }
.sd-page { max-width:820px; margin:0 auto; padding:var(--sd-8) var(--sd-4) var(--sd-10); }
.sd-page--wide { max-width:1060px; }
.sd-page--narrow { max-width:700px; }

.sd-band { border-bottom:1px solid var(--sd-line); background:var(--sd-surface); }
.sd-band--plain { background:transparent; }
.sd-band__in { max-width:1060px; margin:0 auto; padding:var(--sd-9) var(--sd-4); }

/* ── type rhythm ──────────────────────────────────────────── */
.sd-h1 { font-size:34px; font-weight:700; line-height:1.15; letter-spacing:-0.02em;
         margin:0 0 var(--sd-4); }
.sd-lede { font-size:18px; line-height:1.55; color:var(--sd-ink2); max-width:62ch; }
.sd-prose h2 { margin-top:var(--sd-8); font-size:23px; }
.sd-prose h3 { margin-top:var(--sd-6); }
.sd-prose > :first-child { margin-top:0; }
.sd-prose p, .sd-prose li { max-width:70ch; }
.sd-prose ul, .sd-prose ol { margin:0 0 var(--sd-4); padding-left:var(--sd-5); color:var(--sd-ink2); }
.sd-prose li { margin-bottom:var(--sd-2); }
.sd-prose strong { color:var(--sd-ink); }
.sd-prose code:not(.sd-term code) {
  font-size:0.9em; background:var(--sd-surface); border:1px solid var(--sd-line);
  padding:1px 5px; color:var(--sd-ink);
}
.sd-kicker {
  font-family:var(--sd-mono); font-size:12px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--sd-ink3);
  margin:0 0 var(--sd-3);
}
.sd-answer {
  font-size:17px; border-left:4px solid var(--sd-hull);
  padding:var(--sd-1) 0 var(--sd-1) var(--sd-4); margin:0 0 var(--sd-6);
  color:var(--sd-ink);
}
.sd-answer p { color:var(--sd-ink); margin-bottom:var(--sd-3); }
.sd-answer p:last-child { margin-bottom:0; }

/* ── hero ─────────────────────────────────────────────────── */
.sd-hero { max-width:1060px; margin:0 auto; padding:var(--sd-9) var(--sd-4) var(--sd-8); }
.sd-hero h1 { font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-0.025em;
              margin:0 0 var(--sd-4); max-width:16ch; }
.sd-hero__lede { font-size:19px; max-width:60ch; color:var(--sd-ink2); }
.sd-cta { display:flex; gap:var(--sd-3); flex-wrap:wrap; margin-top:var(--sd-6); }

/* ── grids ────────────────────────────────────────────────── */
.sd-grid { display:grid; gap:var(--sd-4); grid-template-columns:1fr; }
@media (min-width:720px) {
  .sd-grid--2 { grid-template-columns:repeat(2,1fr); }
  .sd-grid--3 { grid-template-columns:repeat(3,1fr); }
}
.sd-grid .sd-card { margin-bottom:0; height:100%; }
.sd-card h3 { margin-top:0; }
.sd-card > :last-child { margin-bottom:0; }
.sd-card--beacon { border-color:var(--sd-beacon); box-shadow:4px 4px 0 var(--sd-beacon); }
.sd-card--live   { border-color:var(--sd-live);   box-shadow:4px 4px 0 var(--sd-live); }

/* ── link list ────────────────────────────────────────────── */
.sd-links { list-style:none; margin:0; padding:0; }
.sd-links li { margin:0; border-bottom:1px solid var(--sd-line2); }
.sd-links li:last-child { border-bottom:0; }
.sd-links a {
  display:block; padding:var(--sd-3) 0; min-height:44px; text-decoration:none;
  color:var(--sd-hull); font-weight:600;
}
.sd-links a:hover { text-decoration:underline; }
.sd-links .sd-links__note { display:block; color:var(--sd-ink3); font-weight:400; font-size:14px; }

/* ── tables ───────────────────────────────────────────────── */
.sd-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:var(--sd-6); }
table.sd-table {
  border-collapse:collapse; width:100%; min-width:520px;
  font-size:14.5px; background:var(--sd-paper);
  border:2px solid var(--sd-ink);
}
table.sd-table--narrow { min-width:360px; }
.sd-table th, .sd-table td {
  text-align:left; padding:10px var(--sd-3);
  border-bottom:1px solid var(--sd-line); vertical-align:top;
}
.sd-table thead th {
  background:var(--sd-surface); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--sd-ink3); font-family:var(--sd-mono);
  font-weight:500; border-bottom:2px solid var(--sd-ink);
}
.sd-table tbody tr:last-child td { border-bottom:0; }
.sd-table td.sd-num, .sd-table th.sd-num { font-family:var(--sd-mono); white-space:nowrap; }
.sd-table caption { caption-side:bottom; padding-top:var(--sd-3);
  font-size:13px; color:var(--sd-ink3); text-align:left; }
.sd-yes { color:var(--sd-live-text); font-weight:600; }
.sd-no  { color:var(--sd-danger-text); font-weight:600; }
/* A number we are deliberately not publishing yet. Reads as unfinished, which
   it is — and pointedly NOT amber, which only ever means "a human must act". */
.sd-tbc {
  color:var(--sd-ink3); font-style:italic;
  border-bottom:1px dashed var(--sd-ink3);
}

/* ── terminal + copy ──────────────────────────────────────── */
.sd-code { position:relative; margin:0 0 var(--sd-6); }
.sd-code .sd-term { margin:0; }
.sd-copy {
  position:absolute; top:6px; right:6px;
  font-family:var(--sd-mono); font-size:11px; line-height:1;
  min-height:44px; min-width:44px; padding:0 12px; cursor:pointer;
  /* Opaque on purpose. A translucent fill would inherit whatever happens to be
     behind it, which makes its contrast a property of the layout rather than of
     the button — #D6E3EF on #16232F is 10.9:1 wherever it lands. */
  background:#16232F; color:#D6E3EF;
  border:1px solid #33485C;
}
.sd-copy:hover { background:#23384A; border-color:#5B7790; }
/* Narrow screens: transcript lines are long and scroll, so the button would sit
   on top of the first line. Give it a band of its own rather than covering the
   one line most worth reading. */
@media (max-width:719px) {
  .sd-code .sd-term { padding-top:56px; }
}
.sd-copy:focus-visible { outline:3px solid var(--sd-beacon); outline-offset:2px; }
.sd-copy[hidden] { display:none; }
.sd-term .g { color:#8FA6BC; }   /* comment / dim */
.sd-term .v { color:#7FE3A0; }   /* a value came back */

/* ── legend ───────────────────────────────────────────────── */
.sd-legend { display:grid; gap:var(--sd-3); grid-template-columns:1fr; margin:0 0 var(--sd-6); }
@media (min-width:640px) { .sd-legend { grid-template-columns:repeat(2,1fr); } }
.sd-legend__row {
  display:flex; gap:var(--sd-3); align-items:flex-start;
  border:1px solid var(--sd-line); padding:var(--sd-3); background:var(--sd-paper);
}
.sd-legend__row p { margin:4px 0 0; font-size:14px; }

/* ── faq ──────────────────────────────────────────────────── */
.sd-faq { border-top:1px solid var(--sd-line); }
.sd-faq details {
  border-bottom:1px solid var(--sd-line); padding:var(--sd-3) 0;
}
.sd-faq summary {
  cursor:pointer; font-weight:600; font-size:16px; color:var(--sd-ink);
  min-height:44px; display:flex; align-items:center; gap:var(--sd-2);
  list-style:none;
}
.sd-faq summary::-webkit-details-marker { display:none; }
.sd-faq summary::before {
  content:"+"; font-family:var(--sd-mono); color:var(--sd-hull); font-weight:700;
}
.sd-faq details[open] summary::before { content:"−"; }
.sd-faq summary:focus-visible { outline:3px solid var(--sd-beacon); outline-offset:2px; }
.sd-faq details > *:not(summary) { padding-left:calc(var(--sd-4) + 2px); }
.sd-faq details p:last-child { margin-bottom:var(--sd-2); }

/* ── footer ───────────────────────────────────────────────── */
.sd-footer { border-top:2px solid var(--sd-ink); background:var(--sd-surface); }
.sd-footer__in { max-width:1060px; margin:0 auto; padding:var(--sd-8) var(--sd-4); }
.sd-footer__cols { display:grid; gap:var(--sd-6); grid-template-columns:1fr; }
@media (min-width:720px) { .sd-footer__cols { grid-template-columns:repeat(4,1fr); } }
.sd-footer h2 {
  font-family:var(--sd-mono); font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--sd-ink3); font-weight:500;
  margin:0 0 var(--sd-2);
}
.sd-footer ul { list-style:none; margin:0; padding:0; }
.sd-footer li a {
  display:inline-flex; align-items:center; min-height:32px;
  font-size:14px; color:var(--sd-ink2); text-decoration:none;
}
/* Full 44px targets where a finger is doing the pointing; a compact footer
   where a mouse is. Stacking four columns of 44px rows on a phone is worth it;
   doing the same on a desktop is just a tall footer. */
@media (pointer: coarse) {
  .sd-footer li a, .sd-links a { min-height:44px; }
}
.sd-footer li a:hover { color:var(--sd-hull); text-decoration:underline; }
.sd-footer__status {
  margin-top:var(--sd-7); padding-top:var(--sd-5);
  border-top:1px dashed var(--sd-line);
  font-size:13.5px; color:var(--sd-ink3); max-width:70ch;
}
.sd-footer__status strong { color:var(--sd-ink2); }

/* ── breadcrumbs ──────────────────────────────────────────── */
.sd-crumbs { font-size:13px; color:var(--sd-ink3); margin:0 0 var(--sd-4);
             font-family:var(--sd-mono); }
.sd-crumbs a { color:var(--sd-ink3); }
.sd-crumbs a:hover { color:var(--sd-hull); }

/* ── misc ─────────────────────────────────────────────────── */
.sd-note {
  border:1px solid var(--sd-line); border-left:4px solid var(--sd-beacon);
  background:var(--sd-paper); padding:var(--sd-4); margin:0 0 var(--sd-6);
}
.sd-note > :last-child { margin-bottom:0; }
.sd-note--human { border-left-color:var(--sd-amber); }
.sd-note--plain { border-left-color:var(--sd-line); }
.sd-meta { font-size:13px; color:var(--sd-ink3); font-family:var(--sd-mono); }
.sd-stack > * + * { margin-top:var(--sd-4); }

@media (max-width:640px) {
  .sd-hero h1 { font-size:29px; max-width:none; }
  .sd-h1 { font-size:27px; }
  .sd-hero__lede, .sd-lede { font-size:17px; }
  .sd-band__in { padding:var(--sd-7) var(--sd-4); }
  .sd-page { padding:var(--sd-6) var(--sd-4) var(--sd-9); }
  .sd-cta .sd-btn { width:100%; }
}
@media print {
  .sd-header, .sd-footer, .sd-copy, .sd-themetoggle { display:none; }
  .sd-faq details { display:block; }
}