/* Shared by every page under landing/. One copy on purpose: three copies of the
   deployment guide and four copies of the demo names all drifted apart today. */
:root{
  /* The product's own tokens, not an approximation of them. */
  --bg:#0f1419; --panel:#151c27; --panel-2:#1b2430; --panel-3:#202b3a;
  --border:#2d3a4f; --border-soft:#22303f;
  --text:#e7ecf3; --muted:#8b9bb4; --muted-2:#7385a1;
  --accent:#3b82f6; --accent-strong:#2563eb; --accent-soft:#1b2d4d; --accent-text:#bcd4ff;
  --good:#34d399; --warn:#f59e0b; --danger:#ef4444;
  --catalog:#3b82f6; --sales:#22c55e;

  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --rail-w:216px;
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-text); text-decoration-color:rgba(188,212,255,.35); text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
img{max-width:100%; height:auto; display:block}
/* The UA stylesheet gives figure 40px side margins, which quietly ate 80px
   of a 300px grid column on the about page. */
figure{margin:0}
code,kbd,pre{font-family:var(--mono)}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:1fr; max-width:1320px; margin:0 auto; padding:0 24px}
@media (min-width:1120px){
  .shell{grid-template-columns:var(--rail-w) minmax(0,1fr); gap:56px; padding:0 40px}
}

/* Left rail mirrors the product's catalog tree: same affordance, same job. */
.rail{display:none}
@media (min-width:1120px){
  .rail{
    display:block; position:sticky; top:0; align-self:start;
    height:100vh; padding:28px 0 40px; overflow-y:auto;
    border-right:1px solid var(--border-soft);
  }
}
.rail__brand{display:flex; align-items:center; gap:9px; margin-bottom:26px}
.rail__mark{width:11px; height:11px; border-radius:3px; background:var(--accent); flex:none}
.rail__name{font:600 15px/1 var(--sans); letter-spacing:.2px}
.rail__group{font:500 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); margin:22px 0 9px}
.rail a{display:block; padding:5px 10px 5px 0; color:var(--muted); text-decoration:none; font-size:13.5px; border-left:2px solid transparent; padding-left:11px}
.rail a:hover{color:var(--text); border-left-color:var(--border)}
.rail a.is-active{color:var(--text); border-left-color:var(--accent)}

.main{padding:0 0 96px; min-width:0}

/* ---------- section header: a column row from the product ---------- */
.sec{padding:76px 0 0; scroll-margin-top:24px}
.sec-head{display:flex; align-items:baseline; gap:11px; margin:0 0 8px; flex-wrap:wrap}
.badge{
  font:600 10px/1 var(--mono); letter-spacing:.06em;
  padding:4px 6px; border-radius:4px; flex:none;
  background:var(--accent-soft); color:var(--accent-text);
}
.badge--fk{background:#25313f; color:#9fb6d6}
.badge--n{background:transparent; color:var(--muted-2); border:1px solid var(--border)}
.sec-code{font:500 13px/1 var(--mono); color:var(--muted-2)}
.sec-name{font:700 clamp(26px,3.4vw,38px)/1.14 var(--cond); letter-spacing:-.015em; margin:0}
.sec-lede{color:var(--muted); max-width:var(--measure); margin:0 0 26px; font-size:17px}

/* ---------- hero ---------- */
.hero{padding:64px 0 12px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font:500 12px/1 var(--mono); letter-spacing:.05em; color:var(--muted-2);
  border:1px solid var(--border-soft); border-radius:999px; padding:7px 13px; margin-bottom:26px;
}
.eyebrow b{color:var(--good); font-weight:600}
h1{
  font:700 clamp(38px,6.2vw,74px)/1.03 var(--cond);
  letter-spacing:-.028em; margin:0 0 22px; max-width:17ch;
}
h1 .dim{color:var(--muted-2)}
.hero__sub{font-size:19px; color:var(--muted); max-width:60ch; margin:0 0 30px}
.hero__sub strong{color:var(--text); font-weight:600}

.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:600 15px/1 var(--sans); padding:13px 19px; border-radius:8px;
  text-decoration:none; border:1px solid transparent; white-space:nowrap;
}
.btn--primary{background:var(--accent-strong); color:#fff}
.btn--primary:hover{background:var(--accent)}
.btn--ghost{border-color:var(--border); color:var(--text)}
.btn--ghost:hover{border-color:var(--muted-2); background:var(--panel)}

/* The hero rows appear the way an introspection returns columns. */
.rows{list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--border-soft); max-width:var(--measure)}
.rows li{
  display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:center;
  padding:13px 2px; border-bottom:1px solid var(--border-soft);
  font-size:15px;
}
.rows .k{font:600 10px/1 var(--mono); color:var(--accent-text); background:var(--accent-soft); border-radius:4px; padding:4px 0; text-align:center}
.rows .t{font:400 12.5px/1 var(--mono); color:var(--muted-2); white-space:nowrap}
@media (max-width:560px){
  .rows li{grid-template-columns:26px 1fr}
  .rows .t{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .rows li{animation:row-in .42s cubic-bezier(.2,.7,.3,1) backwards}
  .rows li:nth-child(1){animation-delay:.10s}
  .rows li:nth-child(2){animation-delay:.19s}
  .rows li:nth-child(3){animation-delay:.28s}
  @keyframes row-in{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
}

/* ---------- screenshots ---------- */
.shot{margin:30px 0 0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--panel)}
.shot img{width:100%}
.shot figcaption{
  padding:11px 15px; border-top:1px solid var(--border-soft);
  font-size:13.5px; color:var(--muted); background:var(--panel-2);
}
/* A dialog shot is portrait; it should not tower over the page. */
.shot--tall{max-width:760px}
/* Diagrams are always wider than the canvas. Let the hero shot say so. */
.shot--bleed{margin-right:calc(-1 * max(24px, (100vw - 1320px) / 2 + 40px)); border-right:0; border-radius:10px 0 0 10px}
@media (max-width:1119px){.shot--bleed{margin-right:-24px}}

/* ---------- prose ---------- */
.prose{max-width:var(--measure)}
.prose p{margin:0 0 17px}
.prose p.lead{font-size:18px; color:var(--text)}
.prose strong{font-weight:600}
.aside{
  border-left:2px solid var(--border); padding:2px 0 2px 17px; margin:24px 0;
  color:var(--muted); font-size:15px;
}

/* ---------- cards ---------- */
.grid{display:grid; gap:14px; margin-top:26px}
@media (min-width:720px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}}
.card{border:1px solid var(--border-soft); border-radius:10px; padding:19px; background:var(--panel)}
.card h3{margin:0 0 7px; font:600 16px/1.3 var(--sans)}
.card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}
.card__tag{font:500 10.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:10px}

/* ---------- feature table ---------- */
.ftable{width:100%; border-collapse:collapse; margin-top:24px; font-size:15px}
.ftable th{
  text-align:left; font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); padding:0 12px 10px 0; border-bottom:1px solid var(--border);
}
.ftable td{padding:12px 12px 12px 0; border-bottom:1px solid var(--border-soft); vertical-align:top; color:var(--muted)}
.ftable td:first-child{color:var(--text); white-space:nowrap; font-weight:500}

/* ---------- status ---------- */
.status{display:grid; gap:10px; margin-top:24px}
.status li{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start; list-style:none; font-size:15.5px; color:var(--muted)}
.status .m{font:600 13px/1.4 var(--mono)}
.status .yes .m{color:var(--good)}
.status .no .m{color:var(--warn)}
.status b{color:var(--text); font-weight:600}

/* ---------- code ---------- */
pre{
  background:#0b1016; border:1px solid var(--border); border-radius:9px;
  padding:16px 18px; overflow-x:auto; margin:18px 0 0;
  font-size:13.5px; line-height:1.75; color:#cfe0f5;
}
pre .c{color:var(--muted-2)}
pre .p{color:var(--good)}

/* ---------- faq ---------- */
.faq{margin-top:26px; max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--border-soft); padding:16px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:16px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--accent); font-family:var(--mono); margin-right:10px}
.faq details[open] summary::before{content:"−"}
.faq p{margin:11px 0 0 24px; color:var(--muted); font-size:15px}

/* ---------- footer ---------- */
.foot{margin-top:86px; padding-top:26px; border-top:1px solid var(--border-soft); color:var(--muted-2); font-size:14px}
.foot__links{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px}
.foot__links a{color:var(--muted)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:9; background:var(--panel); padding:10px 14px; border-radius:6px}

/* ---------- inner pages ---------- */
/* Pages other than the landing carry a top bar instead of the rail's brand,
   so the rail stays a pure table of contents. */
.page-head{padding:52px 0 0}
.page-head h1{font:700 clamp(32px,4.6vw,52px)/1.06 var(--cond); letter-spacing:-.022em; margin:0 0 14px; max-width:20ch}
.page-head .kicker{
  display:inline-block; font:500 12px/1 var(--mono); letter-spacing:.06em;
  color:var(--muted-2); margin-bottom:18px;
}
.page-head p{color:var(--muted); font-size:18px; max-width:var(--measure); margin:0}
.crumb{display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--muted-2); padding-top:22px}
.crumb a{color:var(--muted)}

.bio{display:grid; gap:28px; margin-top:34px}
@media (min-width:840px){.bio{grid-template-columns:300px minmax(0,1fr); gap:38px; align-items:start}}
.bio__photo{border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--panel)}
.bio__facts{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--border-soft)}
.bio__facts li{display:grid; grid-template-columns:130px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:15px}
.bio__facts dt,.bio__facts .lbl{font:500 12px/1.5 var(--mono); color:var(--muted-2); letter-spacing:.03em}

.steps{list-style:none; counter-reset:s; margin:26px 0 0; padding:0}
.steps li{counter-increment:s; display:grid; grid-template-columns:30px 1fr; gap:16px; padding:0 0 26px}
.steps li::before{
  content:counter(s); font:600 12px/28px var(--mono); text-align:center;
  width:28px; height:28px; border-radius:7px; background:var(--accent-soft); color:var(--accent-text);
}
.steps h3{margin:3px 0 6px; font:600 17px/1.35 var(--sans)}
.steps p{margin:0; color:var(--muted); font-size:15.5px}
.steps code{background:var(--panel-2); border:1px solid var(--border-soft); border-radius:5px; padding:1px 6px; font-size:13px}

.doclist{list-style:none; margin:22px 0 0; padding:0}
.doclist li{border-bottom:1px solid var(--border-soft); padding:16px 0}
.doclist a{font-weight:600; font-size:16.5px; text-decoration:none}
.doclist a:hover{text-decoration:underline}
.doclist p{margin:5px 0 0; color:var(--muted); font-size:14.5px}
.doclist .path{font:400 12px/1 var(--mono); color:var(--muted-2); display:block; margin-top:7px}

.note{
  border:1px solid var(--border); border-left:3px solid var(--warn);
  border-radius:0 8px 8px 0; padding:15px 18px; margin:24px 0; background:var(--panel);
  font-size:15px; color:var(--muted);
}
.note b{color:var(--text)}