/* Home */
.home { display: grid; padding-bottom: 8px; }

/* ---------- Hero: the model's surface. It moves only when touched or while the guide thinks. ---------- */
.hero { --hl: .52; --hc: .14; position: relative; isolation: isolate; display: grid; align-items: end; min-height: 88svh; overflow: hidden; color: #fff;
  margin-top: calc(-1 * (var(--topbar-h) + var(--safe-t))); border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: linear-gradient(150deg, oklch(var(--hl) var(--hc) var(--h-lapis)), oklch(var(--hl) var(--hc) var(--h-tyrian)) 45%, oklch(var(--hl) var(--hc) var(--h-madder)) 75%, oklch(var(--hl) var(--hc) var(--h-viridian))); }
:root[data-theme="dark"] .hero { --hl: .44; --hc: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { --hl: .44; --hc: .12; } }
.hero .pigment { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; touch-action: pan-y; }
.hero-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, oklch(0 0 0 / .22), transparent 26%, transparent 48%, oklch(0 0 0 / .32)); }
.hero-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: calc(var(--topbar-h) + var(--safe-t) + 28px) var(--gutter) 26px; display: grid; gap: 14px; pointer-events: none; }
.hero-in > * { pointer-events: auto; }
.hero-kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 .75rem/1.2 var(--f-mono); letter-spacing: .04em; opacity: .94; }
.hero-kicker i { font-style: normal; opacity: .6; }
.hero-kicker .brand-mark path { stroke: #fff; }
.hero-title { font: 800 var(--t-hero)/.8 var(--f-display); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -.06em; margin: 6px 0 4px -.045em; outline: none; text-shadow: 0 2px 40px oklch(0 0 0 / .14); }
.hero-sub { max-width: 28em; font: 500 1.125rem/1.45 var(--f-body); opacity: .95; text-wrap: pretty; }
.hero-ask { display: flex; align-items: center; gap: 10px; height: 58px; margin-top: 8px; padding: 0 6px 0 18px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / .16); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .34), 0 14px 34px -14px oklch(0 0 0 / .4); transition: background var(--d-2), box-shadow var(--d-2); }
.hero-ask:focus-within { background: oklch(1 0 0 / .22); box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / .7), 0 14px 34px -14px oklch(0 0 0 / .4); }
.hero-ask .mm { width: 16px; height: 16px; box-shadow: 0 0 0 2px oklch(1 0 0 / .7); }
.hero-ask input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; caret-color: #fff; font: 500 var(--t-callout)/1 var(--f-body); outline: none; }
.hero-ask input::placeholder { color: oklch(1 0 0 / .8); }
.hero-send { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: oklch(.25 .05 268); transition: transform var(--d-1) var(--ease-out); }
.hero-send:active { transform: scale(.92); }
.hero-send .ico { width: 20px; height: 20px; }
.hero-chips { display: flex; gap: 8px; margin: 2px calc(-1 * var(--gutter)) 0; padding: 2px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
.hero-chips::-webkit-scrollbar { display: none; }
.hero-chip { flex: none; min-height: 38px; padding: 0 15px; border: 0; border-radius: var(--r-pill); background: oklch(1 0 0 / .14); color: #fff;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .3); font: 600 var(--t-foot)/1 var(--f-body); -webkit-tap-highlight-color: transparent; transition: background var(--d-2), transform var(--d-1) var(--ease-out); }
.hero-chip:hover { background: oklch(1 0 0 / .22); }
.hero-chip:active { transform: scale(.96); }

/* ---------- Home sections ---------- */
.h-sec { width: 100%; max-width: 1180px; margin: 0 auto; padding: 68px var(--gutter) 0; }
.h-head { display: grid; gap: 10px; margin-bottom: 24px; }
.h-row { grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 640px) { .h-row { grid-template-columns: minmax(0, 1fr) auto; } }
.h-row .h-more { justify-self: start; }
@media (min-width: 640px) { .h-row .h-more { justify-self: end; } }
.h-title { max-width: 15em; font: 780 var(--t-1)/1.02 var(--f-display); font-variation-settings: "wdth" 82; letter-spacing: -.04em; }
.h-lede { max-width: 34em; color: var(--ink-2); font-size: 1.125rem; line-height: 1.5; }
.h-more { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 4px; color: var(--lapis); text-decoration: none; white-space: nowrap; font: 650 var(--t-sub)/1 var(--f-body); }
.h-more .ico { width: 18px; height: 18px; transition: transform var(--d-2) var(--ease-out); }
.h-more:hover .ico { transform: translateX(3px); }

/* ---------- Three layers: an exploded device ---------- */
.stack { --p: 1; position: relative; height: 480px; margin: 0 calc(-1 * var(--gutter)); display: grid; place-items: center; perspective: 1700px; overflow: hidden; }
.stack-in { position: relative; width: 232px; height: 404px; transform-style: preserve-3d;
  transform: translateY(calc(var(--p) * 28px)) rotateX(calc(var(--p) * 56deg)) rotateZ(calc(var(--p) * -36deg)) scale(calc(1 - var(--p) * .1)); }
.plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--p) * 96px)); transition: opacity var(--d-3) var(--ease-flow); }
.plane-interface { --i: 0; } .plane-person { --i: 1; } .plane-model { --i: 2; }
.stack[data-solo] .plane { opacity: .1; }
.stack[data-solo="interface"] .plane-interface, .stack[data-solo="person"] .plane-person, .stack[data-solo="model"] .plane-model { opacity: 1; }
.plane-pin { position: absolute; right: 0; top: 30%; width: 1px; height: 1px; }
.stack-tag { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 7px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); box-shadow: var(--e-2), inset 0 0 0 1px var(--line); font: 650 .75rem/1 var(--f-body); white-space: nowrap; opacity: 0; pointer-events: none; }
.stack-tag .sw { width: 12px; height: 12px; border-radius: 4px; }
.plane-person .dev { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--ink) calc(var(--p) * 45%), transparent); }
.plane-model .dev { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--tyrian) calc(var(--p) * 70%), transparent); }
.dev { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 10px; padding: 16px 14px 14px; border-radius: 36px; }
.plane-interface .dev { background: var(--surface); box-shadow: var(--e-3), inset 0 0 0 1px var(--line); }
.plane-person .dev, .plane-model .dev { background: color-mix(in oklch, var(--surface) calc(var(--p) * 20%), transparent); }
.plane-interface [data-l]:not([data-l="interface"]), .plane-person [data-l]:not([data-l="person"]), .plane-model [data-l]:not([data-l="model"]) { visibility: hidden; }
.dev-bar { display: flex; align-items: center; gap: 4px; height: 26px; font: 700 .8125rem/1 var(--f-display); }
.dev-back .ico { width: 18px; height: 18px; color: var(--lapis); stroke-width: 2.4; }
.dev-dot { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.dev-sum { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; border-radius: 13px; font: 650 .71875rem/1.4 var(--f-body); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tyrian) 45%, transparent); }
.dev-sum .mm { margin-top: 2px; width: 10px; height: 10px; }
.dev-field, .dev-text { grid-row: 3; grid-column: 1; }
.dev-field { border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--lapis); }
.dev-text { align-self: start; padding: 11px 12px; font: 500 .8125rem/1.5 var(--f-body); }
.dev-ink { color: var(--ink); }
.dev-text .flux { font-weight: 600; }
.dev-caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 1px; vertical-align: -3px; background: var(--ink); }
.dev-acts { display: flex; gap: 6px; }
.dev-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); font: 650 .6875rem/1 var(--f-body); }
.dev-btn .rmark { width: 8px; height: 8px; }
.dev-primary { margin-left: auto; background: var(--lapis); color: var(--on-ink); box-shadow: none; }
.dev-primary .r-none { box-shadow: inset 0 0 0 1.5px var(--on-ink); }
.dev-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.dev-keys i { height: 24px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line); }
.layer-cards { display: grid; gap: 10px; margin-top: 4px; }
.layer-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 15px 16px; border: 0; border-radius: var(--r-lg); text-align: left;
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); -webkit-tap-highlight-color: transparent; transition: box-shadow var(--d-2), transform var(--d-1) var(--ease-out); }
.layer-card:active { transform: scale(.985); }
.layer-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), var(--e-1); }
.layer-card .sw { grid-row: span 2; width: 40px; height: 40px; border-radius: 13px; }
.lc-t { font: 720 var(--t-callout)/1.2 var(--f-display); }
.lc-s { grid-column: 2; font-size: var(--t-foot); line-height: 1.45; color: var(--ink-2); }
.sw-person { background: var(--ink); }
.sw-interface { background: linear-gradient(135deg, var(--surface-2) 50%, var(--lapis) 50%); box-shadow: inset 0 0 0 1px var(--line); }
.sw-model { background: var(--pigment); }

/* ---------- Laws ---------- */
.law-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 300px); gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.law-rail::-webkit-scrollbar { display: none; }
.law-card { position: relative; scroll-snap-align: start; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; min-height: 318px; padding: 22px 20px 20px;
  border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--e-1), inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow var(--d-2), transform var(--d-2) var(--ease-out); }
.law-card:hover { box-shadow: var(--e-2), inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.law-n { font: 800 4.75rem/.78 var(--f-display); font-variation-settings: "wdth" 75; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); }
.law-name { font: 600 .6875rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.law-link { color: var(--ink); text-decoration: none; }
.law-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.law-title { font: 780 1.5rem/1.04 var(--f-display); letter-spacing: -.035em; }
.law-rule { color: var(--ink-2); font-size: var(--t-sub); line-height: 1.45; }
.law-demo { position: relative; z-index: 1; padding-top: 14px; border-top: 1px solid var(--line); }
.ld-colour, .ld-reach { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 600 .75rem/1 var(--f-mono); color: var(--ink-2); }
.ld-colour span, .ld-reach span { display: inline-flex; align-items: center; gap: 7px; }
.ld-sw { width: 16px; height: 16px; border-radius: 6px; }
.ld-ink { background: var(--ink); } .ld-lapis { background: var(--lapis); } .ld-pig { background: var(--pigment); }
.ld-motion, .ld-rest { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-2);
  color: var(--ink); font: 600 var(--t-foot)/1 var(--f-body); box-shadow: inset 0 0 0 1px var(--line); touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.ld-track { display: flex; gap: 5px; align-items: center; height: 12px; }
.ld-track i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.ld-motion.is-on .ld-track i { background: var(--tyrian); animation: ld-bob 720ms var(--ease-flow) infinite; }
.ld-motion.is-on .ld-track i:nth-child(2) { animation-delay: 120ms; } .ld-motion.is-on .ld-track i:nth-child(3) { animation-delay: 240ms; }
@keyframes ld-bob { 50% { transform: translateY(-4px); } }
.ld-rest .switch { width: 44px; height: 26px; pointer-events: none; }
.ld-rest .switch::after { width: 20px; height: 20px; }
.ld-rest[aria-checked="true"] .switch { background: var(--lapis); box-shadow: none; }
.ld-rest[aria-checked="true"] .switch::after { transform: translateX(18px); }

/* ---------- Components grid ---------- */
.comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.comp-grid .card { grid-template-columns: 1fr; gap: 12px; padding: 14px 14px 16px; border-radius: 22px; }
.comp-grid .card-pic { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 15px; }
.comp-grid .card-pic .pic { width: 46%; height: auto; }
.comp-grid .card-s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.comp-grid .card-tag { position: static; order: -1; }
@media (min-width: 760px) { .comp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .comp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Patterns ---------- */
.rows { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.rows li + li { border-top: 1px solid var(--line); }
.row-link { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background var(--d-1); }
.row-link:hover { background: var(--surface-2); }
.row-pic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.row-pic .pic { width: 32px; height: 32px; }
.row-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-t { font: 720 var(--t-callout)/1.2 var(--f-display); }
.row-s { font-size: var(--t-foot); line-height: 1.4; color: var(--ink-2); }
.row-link > .ico { width: 18px; height: 18px; color: var(--ink-3); flex: none; }

/* ---------- Agents ---------- */
.agents-in { display: grid; gap: 14px; padding: 30px 22px; border-radius: var(--r-xl); background: oklch(.18 .016 268); color: oklch(.96 .005 268); box-shadow: var(--e-2); }
.agents .eyebrow { color: oklch(.72 .012 268); }
.agents .h-title { color: oklch(.98 .004 268); }
.agents .h-lede { color: oklch(.8 .01 268); }
.agent-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.agent-facts li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid oklch(.34 .02 268); }
.agent-facts b { font: 700 var(--t-callout)/1.3 var(--f-display); }
.agent-facts span { color: oklch(.78 .01 268); font-size: var(--t-sub); }
.agent-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.agents .btn-quiet { background: oklch(1 0 0 / .1); color: #fff; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .18); }
.agents .btn-lapis { background: oklch(.62 .16 262); color: #fff; }

@media (min-width: 760px) {
  .layer-cards { grid-template-columns: repeat(3, 1fr); }
  .stack { height: 560px; }
  .stack-in { width: 260px; height: 450px; }
  .agents-in { padding: 44px; grid-template-columns: 1.1fr 1fr; column-gap: 40px; }
  .agents-in > .eyebrow, .agents-in > .h-title, .agents-in > .h-lede { grid-column: 1; }
  .agent-facts { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .agent-acts { grid-column: 1; }
}
@media (min-width: 900px) { .law-rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; } }
@media (min-width: 1024px) {
  .hero { margin: 8px var(--gutter) 0; min-height: min(760px, calc(100dvh - var(--topbar-h) - 24px)); border-radius: var(--r-xl); }
  .hero-in { padding: 48px 48px 40px; }
  .h-sec { padding-top: 88px; }
}