/* henna — by OPENXEL.
   Every colour is a token from brand/PALETTE.md with its measured ratio.
   Cornflower is the only filled-CTA colour; on the dark fill the label is
   Moonlit #14181F, never white (white measures 3.97:1 there and fails AA). */

:root {
  --canvas:#FFFFFF; --canvas-soft:#F7F9FC; --canvas-sunk:#EEF2F8;
  --ink:#14181F; --ink-mute:#5B6478; --ink-faint:#8B93A6;
  --hairline:#E3E8EF; --hairline-firm:#C6D0DE;
  --primary:#3A6FE0; --primary-deep:#2C5FD1; --on-primary:#FFFFFF;
  --lay-data:#6B4FBF; --lay-agents:#3A6FE0; --lay-infra:#0E7C8C;
  --lay-secure:#A62F45; --lay-brand:#9A5B14;
  --shadow:0 1px 2px rgba(20,24,31,.05), 0 8px 24px rgba(20,24,31,.06);
  --maxw:1120px;
  color-scheme: light dark;
}
:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:#14181F; --canvas-soft:#1E2229; --canvas-sunk:#24282F;
    --ink:#ECEFF5; --ink-mute:#98A2B8; --ink-faint:#6C7689;
    --hairline:#34383F; --hairline-firm:#4C5057;
    --primary:#467BEB; --primary-deep:#5F8DF0; --on-primary:#14181F;
    --lay-data:#B9A6F5; --lay-agents:#467BEB; --lay-infra:#4FC3D1;
    --lay-secure:#FF7D96; --lay-brand:#E3A45C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"] {
  --canvas:#14181F; --canvas-soft:#1E2229; --canvas-sunk:#24282F;
  --ink:#ECEFF5; --ink-mute:#98A2B8; --ink-faint:#6C7689;
  --hairline:#34383F; --hairline-firm:#4C5057;
  --primary:#467BEB; --primary-deep:#5F8DF0; --on-primary:#14181F;
  --lay-data:#B9A6F5; --lay-agents:#467BEB; --lay-infra:#4FC3D1;
  --lay-secure:#FF7D96; --lay-brand:#E3A45C;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--canvas); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}
img,svg { max-width:100%; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
code,kbd { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
code { font-size:.9em; background:var(--canvas-sunk); padding:.12em .38em; border-radius:4px; }
kbd { font-size:.82em; background:var(--canvas-sunk); border:1px solid var(--hairline-firm);
      border-bottom-width:2px; border-radius:5px; padding:.15em .45em; white-space:nowrap; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
/* A narrow measure, without moving the left edge. Constraining .wrap itself
   would centre the block and break alignment with every full-width section. */
.narrow > * { max-width:760px; }

/* ---------------------------------------------------------------- masthead */
header.site {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hairline);
}
header.site .wrap { display:flex; align-items:center; gap:20px; height:60px; }
/* The wordmark is artwork, not type — it is the OPENXEL logo. The product name
   sits beside it as text. These are never composed into one lockup: Revision 7b
   retired the lockup, and a wordmark plus a word is not one. */
.brand { display:flex; align-items:center; gap:0; font-weight:600; letter-spacing:.01em;
         color:var(--ink); font-size:15px; white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand .wm { display:block; height:16px; width:auto; }
/* The wordmark ships in two cuts because its letters are Moonlit on light and
   Paper on dark — one file cannot serve both grounds. */
.brand .wm-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .wm-light { display:none; }
  :root:not([data-theme="light"]) .brand .wm-dark  { display:block; }
}
:root[data-theme="dark"] .brand .wm-light { display:none; }
:root[data-theme="dark"] .brand .wm-dark  { display:block; }
.brand .bar { color:var(--ink-faint); font-weight:300; margin:0 7px 0 9px; }
.brand .prod { color:var(--primary); }
nav.site { margin-left:auto; display:flex; gap:22px; align-items:center; }
nav.site a { color:var(--ink-mute); font-size:14px; }
nav.site a:hover { color:var(--ink); text-decoration:none; }

/* -------------------------------------------------------------------- type */
h1,h2,h3 { line-height:1.2; letter-spacing:-.017em; margin:0 0 .5em; }
h1 { font-size:clamp(34px,5.2vw,54px); font-weight:640; }
h2 { font-size:clamp(24px,3.1vw,32px); font-weight:620; margin-top:0; }
h3 { font-size:19px; font-weight:600; }
p { margin:0 0 1.1em; }
.lede { font-size:clamp(17px,2.1vw,20px); color:var(--ink-mute); line-height:1.6; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
           color:var(--ink-faint); margin:0 0 14px; }
section { padding:clamp(56px,8vw,92px) 0; }
section + section { border-top:1px solid var(--hairline); }
.sec-head { max-width:680px; margin-bottom:44px; }
.sec-head p { color:var(--ink-mute); margin-bottom:0; }

/* ------------------------------------------------------------------ hero */
.hero { padding-top:clamp(56px,9vw,104px); padding-bottom:clamp(48px,7vw,80px); }
.hero h1 { max-width:15ch; }
.hero .lede { max-width:56ch; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:32px; }
.btn { display:inline-block; font-size:15px; font-weight:600; padding:11px 20px; border-radius:8px;
       border:1px solid var(--hairline-firm); background:var(--canvas); color:var(--ink); }
.btn:hover { background:var(--canvas-sunk); text-decoration:none; }
.btn.cta { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn.cta:hover { background:var(--primary-deep); border-color:var(--primary-deep); }
.cta-note { font-size:13.5px; color:var(--ink-faint); }

/* ------------------------------------------------------------- the flow */
.flow { display:grid; gap:20px; grid-template-columns:repeat(4,1fr); counter-reset:step; }
.step { position:relative; background:var(--canvas-soft); border:1px solid var(--hairline);
        border-radius:12px; padding:22px 20px 20px; }
.step::before {
  counter-increment:step; content:counter(step);
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--primary); color:var(--on-primary); font-size:13px; font-weight:700;
  margin-bottom:14px;
}
.step h3 { margin-bottom:6px; }
.step p { font-size:14.5px; color:var(--ink-mute); margin:0; }
.step .keys { margin-top:10px; font-size:13px; color:var(--ink-faint); }

/* ------------------------------------------------------------ card grids */
.grid { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); }
.grid.two { grid-template-columns:repeat(2,1fr); }
.card { background:var(--canvas-soft); border:1px solid var(--hairline); border-radius:12px; padding:24px; }
.card h3 { margin-bottom:8px; }
.card p:last-child { margin-bottom:0; }
.card p { font-size:14.5px; color:var(--ink-mute); }
.card .tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em;
             text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }

/* ------------------------------------------------------- the data diagram */
.diagram { background:var(--canvas-sunk); border:1px solid var(--hairline); border-radius:12px;
           padding:26px; overflow-x:auto; }
.diagram pre { margin:0; font-size:13px; line-height:1.75; color:var(--ink-mute); white-space:pre; }
.diagram pre b { color:var(--ink); font-weight:600; }

/* --------------------------------------------------------------- tables */
.table { width:100%; border-collapse:collapse; font-size:14.5px; }
.table th,.table td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--hairline);
                      vertical-align:top; }
.table th { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
            font-weight:600; }
.table td:first-child { font-weight:600; white-space:nowrap; }
.scroll-x { overflow-x:auto; }

/* ------------------------------------------------------------------ prose */
.prose { max-width:760px; }
.prose h2 { margin-top:2.2em; font-size:24px; }
.prose h3 { margin-top:1.8em; }
.prose ul { padding-left:1.2em; margin:0 0 1.1em; }
.prose li { margin-bottom:.5em; }
.prose .table { margin:0 0 1.6em; }
.prose blockquote { margin:0 0 1.4em; padding:14px 18px; background:var(--canvas-soft);
                    border-left:3px solid var(--primary); border-radius:0 8px 8px 0; }
.prose blockquote p:last-child { margin-bottom:0; }
.meta { font-size:13.5px; color:var(--ink-faint); margin-bottom:2.4em; }

/* ----------------------------------------------------------------- footer */
footer.site { border-top:1px solid var(--hairline); background:var(--canvas-soft);
              padding:44px 0 52px; font-size:14px; }
footer.site .cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
footer.site h4 { font-size:12px; text-transform:uppercase; letter-spacing:.06em;
                 color:var(--ink-faint); margin:0 0 12px; font-weight:600; }
footer.site ul { list-style:none; margin:0; padding:0; }
footer.site li { margin-bottom:8px; }
footer.site a { color:var(--ink-mute); }
footer.site a:hover { color:var(--ink); }
.endorse { color:var(--ink-mute); margin:0 0 6px; }
.fine { color:var(--ink-faint); font-size:13px; margin:0; }

/* ------------------------------------------------------------ responsive */
@media (max-width:920px) {
  .flow { grid-template-columns:repeat(2,1fr); }
  .grid { grid-template-columns:repeat(2,1fr); }
  footer.site .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .flow,.grid,.grid.two { grid-template-columns:1fr; }
  footer.site .cols { grid-template-columns:1fr; }
  nav.site { gap:16px; }
  nav.site a.hide-sm { display:none; }
}

/* ------------------------------------------------------------------- story */
.story .wrap { }
.story p { font-size:17px; line-height:1.72; color:var(--ink-mute); }
.story p strong { color:var(--ink); }
.story blockquote { margin:26px 0; padding:18px 22px; background:var(--canvas-soft);
                    border-left:3px solid var(--primary); border-radius:0 10px 10px 0; }
.story blockquote p { margin:0; font-size:17px; color:var(--ink); }

/* ----------------------------------------- layer accents: labels, never fills
   PALETTE.md §4 — these are the five OPENXEL layer colours. They may carry a
   label or a hairline. They are never a button, never a filled ground, and
   never used where Cornflower belongs.
   NOT every accent survives being small text on a soft ground. Measured on
   --canvas-soft #F7F9FC and #1E2229, at the 11px the .tag is set in:

     Data   5.70 / 7.47   ok        Secure 6.39 / 6.55   ok
     Infra  4.65 / 7.64   ok        Brand  5.13 / 7.39   ok
     Agents 4.40 / 4.02   FAILS AA  <- Cornflower. Never a .tag.

   PALETTE.md's figures are against pure white and pure Moonlit; a card ground
   costs the difference. Cornflower is also the action colour, so using it as a
   label near a button muddies what it means. Both reasons point the same way.
   This is the failure PALETTE §7 retired --sky #007AFF for: 4.02:1, "large or
   graphical only, and they were being used as small caps." */
.tag.data   { color:var(--lay-data); }
.tag.infra  { color:var(--lay-infra); }
.tag.secure { color:var(--lay-secure); }
.tag.brand  { color:var(--lay-brand); }
.card.acc { border-top:2px solid var(--hairline); }
.card.acc-data   { border-top-color:var(--lay-data); }
.card.acc-agents { border-top-color:var(--lay-agents); }
.card.acc-infra  { border-top-color:var(--lay-infra); }
.card.acc-secure { border-top-color:var(--lay-secure); }
.card.acc-brand  { border-top-color:var(--lay-brand); }

/* ------------------------------------------------- the 'cannot find it' box */
.help { margin-top:30px; padding:24px 26px; background:var(--canvas-soft);
        border:1px solid var(--hairline); border-left:3px solid var(--lay-secure);
        border-radius:0 12px 12px 0; }
.help h3 { margin:8px 0 10px; }
.help p { font-size:15px; color:var(--ink-mute); }
.help p:last-child { margin-bottom:0; }
.help .fine { font-size:13.5px; }