/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   osyrin.com — the business site.

   ⭐ SAME TYPE AND PALETTE AS osysharp.com, A DIFFERENT LAYOUT (owner, 2026-09-14). The first version shared
      osysharp's layout grammar and read "like you just removed some things from the osysharp site". So the two share
      what makes them one family — Inter and JetBrains Mono, and osysharp's `cerulean` palette itself
      (Platform.Tools.SiteGen/Palettes.cs, the default there since 2026-09-17) and the language's own dark ground — and share NO layout
      device. osysharp.com: a left-aligned editorial column, numbered mono eyebrows, hairline chapter rules, orange-bar
      pull quotes, code panels on the right, one paper ground. osyrin.com: centred; rounded SHEETS of alternating
      ground (paper · ink · tint · one ember); the ring of the mark as the visual idea (the hero orbit, the flow's
      stops, the doors' knobs, the tiles' corner rings); a floating capsule header; a giant wordmark to close.
   ⚑ Keep it that way: before adding an osysharp component here, draw this page's own version of it.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#eef3f3; --card:#ffffff; --wash:#dbe8e8; --rule:#c1d4d4; --rule-2:#98b3b3;
  --ink:#0b1f25; --ink-2:#3d585f; --ink-3:#6b878d;
  --accent:#00566f; --accent-wash:#d7ecf3;
  --tint:#e6eeee; --glow:rgba(0,86,111,.13);
  /* the dark sheets, and what reads on them */
  --sheet-ink:#08161b; --on-ink:#e7f1f2; --on-ink-2:#9fbdc1; --on-ink-3:#6e8f96; --accent-on-ink:#5fc8e8;
  /* the ACCENT sheet, and what reads on it. Still spelled `ember` throughout: the class is a layout role — the one
     saturated sheet — not a colour name, and renaming it would touch the markup for nothing. */
  --on-ember:#f2fafc; --on-ember-2:rgba(242,250,252,.88); --on-ember-3:rgba(242,250,252,.66);
  /* the language's own identity, used only where Osy# appears (osysharp's cerulean, dark register) */
  --osy-ground:#08161b; --osy-ink:#e7f1f2; --osy-ink-2:#9fbdc1; --osy-accent:#5fc8e8;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --display:'opsz' 32;
  --page:1180px; --air:clamp(88px,11vw,160px);
  --gutter:clamp(10px,1.4vw,20px); --sheet-radius:clamp(24px,3.2vw,44px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#08161b; --card:#0f2229; --wash:#163038; --rule:#22444f; --rule-2:#34606e;
    --ink:#e7f1f2; --ink-2:#9fbdc1; --ink-3:#6e8f96;
    --accent:#5fc8e8; --accent-wash:#0a2a35;
    --tint:#0c1e24; --glow:rgba(95,200,232,.10);
    --sheet-ink:#040e12;
    /* the accent is a LIGHT cyan in dark mode, so what reads on the accent sheet inverts with it */
    --on-ember:#062028; --on-ember-2:rgba(6,32,40,.86); --on-ember-3:rgba(6,32,40,.60);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  font-variation-settings:'opsz' 14;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-variation-settings:var(--display);margin:0;color:inherit;text-wrap:balance}
p{margin:0}
a{color:inherit}
b{font-weight:600}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.in{max-width:var(--page);margin-inline:auto;padding-inline:32px}
.in.narrow{max-width:920px}
/* centred is the default here; the few left-aligned places say so */
.in:not(.duo){text-align:center}
/* ⚠ THE CAP AND THE CENTRING ARE IN TWO RULES, AND A CENTRED h2 THAT IS NOT A DIRECT `.in` CHILD GETS ONLY THE
   CAP — so it sits FLUSH LEFT in its container and reads as a skew, not as a bug. Cost a round trip on
   `.dw-h2` (2026-09-21): capped to 702px inside an 820px head, 59px off centre, owner saw it immediately.
   ⛔ Do NOT "fix" this by moving margin-inline:auto onto the h2 rule. Measured across all 5 pages: 32 h2s, 29
   are direct .in children and already auto, 1 is .dw-h2, and TWO are deliberately left-aligned (`.how` and
   /start/'s "Build your first application") — a global auto margin would centre those two and break them.
   If you add a centred h2 outside `.in`, give it `max-width:none` or `margin-inline:auto` yourself. */
.in > h2{margin-inline:auto}
h2{font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(34px,4.8vw,64px);max-width:20ch}
.chip + h2{margin-top:22px}
.big{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:60ch;margin:24px auto 0;text-wrap:pretty}
.big b{color:var(--ink)}

/* the label — a pill with the mark's ring in it (osysharp's is a mono eyebrow; this page has none) */
.chip{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;line-height:1;padding:8px 15px 8px 11px;
  border-radius:999px;background:var(--card);border:1px solid var(--rule);color:var(--ink-2)}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;border:2.5px solid var(--accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;line-height:1;
  text-decoration:none;border-radius:999px;padding:15px 24px;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s,filter .15s}
.btn.sm{padding:11px 17px;font-size:14.5px}
.btn.f{background:var(--ink);color:var(--paper)}
.btn.f:hover{background:var(--accent);color:var(--on-ember)}
.btn.o{box-shadow:inset 0 0 0 1.5px var(--rule-2);color:var(--ink)}
.btn.o:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.e{background:var(--accent);color:var(--on-ember)}
.btn.e:hover{filter:brightness(1.08)}
.btn.ghost{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-ink) 30%,transparent);color:var(--on-ink)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--on-ink)}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:20px;
  color:var(--accent);background:var(--accent-wash);margin-left:8px;vertical-align:2px}
.wm{font-weight:800;letter-spacing:-.04em}
.wm .hash{font-family:var(--mono);font-weight:500;color:var(--accent)}
.em{color:var(--accent)}

/* sheets — the page is built from these, not from full-width bands divided by rules */
.sheet{margin-inline:var(--gutter);border-radius:var(--sheet-radius);padding-block:var(--air)}
.sheet + .sheet{margin-top:var(--gutter)}
.ink{background:var(--sheet-ink);color:var(--on-ink)}
.ink .big{color:var(--on-ink-2)}
.ink .big b{color:var(--on-ink)}
.ink .quiet{color:var(--on-ink-3)}
.ink .chip{background:color-mix(in srgb,var(--on-ink) 6%,transparent);border-color:color-mix(in srgb,var(--on-ink) 14%,transparent);color:var(--on-ink-2)}
.ink .chip::before{border-color:#5BBFE8}
.ink .em{color:#5BBFE8}
.tint{background:var(--tint)}
.ember{background:var(--accent);color:var(--on-ember)}
@media (prefers-color-scheme:dark){.ink{box-shadow:inset 0 0 0 1px #26282c}}

/* header — a floating capsule ────────────────────────────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;padding:12px var(--gutter) 0;pointer-events:none}
.capsule{pointer-events:auto;max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:7px 7px 7px 18px;
  border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 14px 34px -22px rgba(28,26,24,.35)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.02em;
  font-variation-settings:var(--display);color:var(--ink)}
.mark{width:26px;height:26px;color:var(--accent);flex:none}
.mark rect{fill:var(--ink)}
.capsule nav{display:flex;gap:2px;margin-left:auto;font-size:14.5px}
.capsule > .btn{min-width:160px;justify-content:center;text-align:center}
.capsule nav a{text-decoration:none;color:var(--ink-2);padding:9px 13px;border-radius:999px}
.capsule nav a:hover{background:var(--wash);color:var(--ink)}
/* the current page. NO weight change: bolding one item makes the nav a different WIDTH on every page, and the
   nav is right-aligned, so the whole menu shifts. The pill and the accent ink say it without moving anything. */
.capsule nav a[aria-current]{background:var(--accent-wash);color:var(--accent)}
.capsule nav a[aria-current]:hover{background:var(--accent-wash);color:var(--accent)}
.capsule nav a.ext::after{content:" ↗";color:var(--ink-3)}
@media (max-width:940px){.capsule nav{display:none}.capsule .btn{margin-left:auto}}

/* hero — centred, and the orbit ──────────────────────────────────────────────────────────────────────────────── */
/* ⚠ THE BOTTOM PADDING IS LOAD-BEARING AND WAS ADDED 2026-09-21. The hero never had any: first the <figure>
   below it supplied the space with its own top margin, then the Deploy-your-way section did. Reordered to
   hero → "AI made software easy to write" (owner: hook, then problem, then solution), the next thing is a
   dark .sheet — and with no padding the CTA buttons sat 0px above its rounded top edge, reading as buttons
   stuck on a black slab. The one-pager carried its own copy of this rule for the same reason; that override
   is gone now that the rule lives here. */
.hero{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,7vw,104px);overflow:hidden}
.hero h1{font-weight:800;letter-spacing:-.05em;line-height:.93;font-size:clamp(50px,8.6vw,128px);margin:26px auto 30px}
.lede{font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:var(--ink-2);max-width:40ch;margin:0 auto;text-wrap:pretty}
.lede b{color:var(--ink)}
/* ⚠ 40ch IS A HERO MEASURE, AND IT LOOKS WRONG IN A `.narrow` SECTION. `.in` is 1180 and `.in.narrow` is 920,
   but the h2 inside either runs to ~850px while .lede stops at ~580 — so in a narrow section the body sets as a
   thin column under a heading half again as wide, which reads as a broken column rather than as emphasis
   (owner, 2026-09-21, on /start/: "the last two sections are very narrow"). In a full-width `.in` the contrast
   is the point, so only the narrow case is widened, to the same 56ch `.shero .lede` already uses. */
.in.narrow .lede{max-width:56ch}
h2 + .lede, h1 + .lede{margin-top:clamp(18px,2vw,26px)}

/* The orbit is a half disc standing on the dark sheet below it: three rings centred on the bottom edge. Every size is
   a share of the orbit's width, so the picture is the same at any width.
   ⭐ IT READS OUTWARDS FROM OSYRIN (owner, 2026-09-17). The core is the product; the middle band is the three ways to
      get it, one wedge each; the outer band is the applications it carries, one wedge each. The first version read
      inwards — the visitor's app at the centre, wrapped in Osyrin, wrapped in the cloud — which is a fine idea and
      put the product third in its own picture.
   The bands are cut into wedges by a conic MASK rather than by drawing arcs: the fill, the border and the glow are
   all masked together, so a wedge is one shape and there is no second thing to keep in step. The angles are derived,
   not guessed — a boundary at θ from the +x axis is at conic angle (90 − θ), gaps are 2.5° wide, and the bottom half
   (conic 90°–270°) is below the horizon and clipped by the orbit's own overflow. */
.orbit{position:relative;width:min(1120px,calc(100% - 2 * var(--gutter)));aspect-ratio:2/1;margin:clamp(56px,7vw,96px) auto 0;overflow:hidden}
.ring{position:absolute;left:50%;top:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.r3{width:100%;border:1.5px solid var(--rule);background:radial-gradient(closest-side,transparent 62%,var(--glow))}
.r2{width:70%;background:var(--accent-wash);border:1.5px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.r1{width:38%;background:var(--sheet-ink)}
/* ⛔ THE DIVISIONS ARE LINES, NOT WEDGES. The first cut of this used a conic mask to slice each band into filled
   wedges with gaps between them, and the owner's verdict was a "saw blade" (2026-09-17) — which is exactly what a
   ring of gapped wedges is. A division only needs a line. So: both bands are continuous again, and the SVG below
   draws two dividers across BOTH of them for the three ways to run it, plus one lighter tick inside each for the two
   applications it holds. Six applications, not eight, and every one of them belongs to a named way of running.
   ⚑ The outer ring used to turn, 180s to the revolution. It cannot now: the slices mean something and the names are
   fixed to them. A diagram that carries meaning holds still. */
.cuts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* ⚠ A DIVIDER IS NOT ONE LINE — it is two, because it crosses two different things. Drawn at one weight the whole
   way out it cut the accent band clean in three: "way too hard sliced" (owner, 2026-09-17). Across the BAND it is
   barely there, just enough to say the three parts are distinct; across the RIM, where the slices carry names and
   must actually be told apart, it is plain, and a step stronger than the tick that splits each one in two. */
.div{fill:none}
.div.in{stroke:color-mix(in srgb,var(--accent) 16%,transparent);stroke-width:.34}
.div.out{stroke:var(--rule-2);stroke-width:.45}
.tick{stroke:var(--rule-2);stroke-width:.3;fill:none;opacity:.6}
/* The names sit ON the arc, which is the whole point of drawing them in SVG: a straight label laid over a curve
   reads as a sticker. Sized in viewBox units so the whole picture scales as one thing — 2.5 units is 14px at the
   orbit's full 1120px. Below the width where the chips withdraw they would be too small to read, so they go too. */
.an{fill:var(--ink-2);font-family:var(--mono);font-size:2.5px;letter-spacing:.18px;text-transform:uppercase;text-anchor:middle}
.core{position:absolute;left:50%;top:76%;transform:translateX(-50%);color:var(--on-ink);font-weight:800;letter-spacing:-.035em;
  line-height:1;font-size:clamp(17px,2.9vw,40px);text-align:center;font-variation-settings:var(--display)}
/* ⚠ EVERY DIMENSION HERE IS IN `em`, DELIBERATELY. The band is a share of the orbit's width; a chip in fixed pixels
   keeps its size while the band closes around it, and below ~720px "Enterprise" crossed both edges of its band at
   once. Caught by the geometry check, not by eye — the failure is a couple of pixels wide and lives in a 20px window
   of viewport width. */
.orb{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
  background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:.6em 1.05em .6em .8em;
  font-size:clamp(12px,1.25vw,15px);font-weight:600;line-height:1;color:var(--ink);box-shadow:0 14px 30px -20px rgba(11,31,37,.4)}
.orb::before{content:"";width:.55em;height:.55em;border-radius:50%;border:.14em solid var(--accent);flex:none}
/* One chip per wedge, at the wedge's middle angle on the band's mid-radius (27% of the width — the band runs 19% to
   35%). left = 50 + 27·cos θ; top = 100 − 54·sin θ, because the box is half as tall as it is wide.
   ⚠ A chip is placed by its CENTRE but clears by its nearest CORNER: at 27% the corner nearest the middle still sits
   well outside the inner disc at every width, which is the bug the four feature chips had here before. */
.w1{left:26.62%;top:73%}  /* self-host,    150° */
.w2{left:50%;top:46%}     /* public cloud,  90° */
.w3{left:73.38%;top:73%}  /* enterprise,    30° */
.caps{display:none}
/* 760, not 700: the chips are withdrawn while the band is still comfortably wider than they are, rather than at the
   width where they finally break. The caps list below carries the same three words from here down. */
@media (max-width:760px){
  .orb{display:none}
  .an{display:none}
  .caps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0 auto;padding:22px 16px 40px}
  .caps li{background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:8px 13px;font-size:14px;font-weight:600}
}

/* ── DEPLOY YOUR WAY — one diagram, four boundaries ────────────────────────────────────────────────────────────
   Replaces the .hd hero diagram (owner, 2026-09-21: "it's instead of the diagram that shows things running on
   osyrin on the frontpage"). The old one answered "what is Osyrin"; this one answers "where does it run", which
   is the question the four offerings exist to settle.

   ⛔ EVERY IDENTIFIER IS `dw`, NOT `osy` AND NOT `dep`. The source artefact is authored as `.osy` with
     --osy-ground/-ink/-accent. All four are ALREADY TAKEN here: `.osy` is the dark Osy#-language sheet below and
     those tokens are its palette. `.dep` — the obvious second choice, and the one I tried — is taken too, by the
     .plat ring graphic's deployment chips further down this file, whose rules come LATER and therefore win: the
     section computed to position:absolute, landed at x=-590 and collapsed its tab strip to 22px with Self-host
     sitting on top of Dedicated. Sixth collision of this shape in this file (--glow, .an, .t1, .cs, .osy, .dep),
     so if you rename it again, MEASURE the prefix against every class and token first rather than looking.
   ⚠ The artefact also asked for 'Inter Tight'. This site loads Inter and JetBrains Mono and nothing else, so
     that would have fallen back to system-ui — every heading in the section rendering in SF or Segoe while the
     rest of the page is Inter. It maps to --sans instead; do not add a third webfont for one section.
   ⛔ ITS PALETTE IS ITS OWN AND STAYS ITS OWN (owner, 2026-09-21: "it has also lost all it's proper coloring").
     I first mapped --dw-blue onto the site's --accent (#00566f, a deep teal) on the reasoning that one design
     system beats two. Side by side against the artefact that was plainly worse: the pill, the "Your
     organization" label, the app borders, the cylinders and every connector went from a mid blue to near-black,
     and the diagram stopped reading as a diagram. The blues below are the artefact's own and are not to be
     "harmonised" again. Fonts DO map to --sans/--mono, because the alternative is a webfont this site does not
     load falling back to system-ui.
   ⚠ IT IS DELIBERATELY WIDER THAN THE SITE'S --page (1180), AND WAS WIDENED TWICE. At 1180 the two columns
     squeezed ("Shared infrastructure. Hard application boundaries." to two lines, every cylinder label to
     three); at 1280 it still read as inset, because the dark sheet DIRECTLY BELOW IT is full-bleed minus
     --gutter — on a 1524px window that is 1484 against this section's 1280, and the eye reads the 200px
     difference as a mistake rather than as a margin. It now tracks the same `100% - 2*--gutter` as the sheets,
     capped at 1440 so it cannot sprawl on a 2560 display. A diagram is not a text column.
   ⚠ The bottom margin is NOT decoration either: with margin-bottom 0 this section's card ended ~15px above that
     dark sheet, which reads as two blocks colliding. Top and bottom are now the same clamp. */
.dw {
  --dw-display: var(--sans);
  --dw-body: var(--sans);
  --dw-mono: var(--mono);
  --dw-ground: #ECF1F1;
  --dw-panel: #F7FAFA;
  --dw-ink: #0E171A;
  --dw-muted: #4A5C62;
  --dw-line: #C5D3D3;
  --dw-blue: #2E9BD6;
  --dw-blue-deep: #1B6A94;
  --dw-blue-tint: #DCEEF7;
  --dw-blue-line: #9CCBE6;
  --dw-other: #E1E8EA;
  --dw-other-ink: #6B7D83;
  --dw-ease: cubic-bezier(.2,.7,.2,1);
  box-sizing: border-box;
  width: min(1440px, 100% - 2 * var(--gutter));
  margin: clamp(72px,8vw,120px) auto clamp(72px,8vw,112px);
  padding: 0 24px;
  font-family: var(--dw-body);
  color: var(--dw-ink);
  -webkit-font-smoothing: antialiased;
}
.dw *, .dw *::before, .dw *::after { box-sizing: border-box; }
.dw svg.dw-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Show-per-mode helper: <span data-for="shared dedicated"> */
.dw[data-mode="shared"] [data-for]:not([data-for~="shared"]),
.dw[data-mode="dedicated"] [data-for]:not([data-for~="dedicated"]),
.dw[data-mode="enterprise"] [data-for]:not([data-for~="enterprise"]),
.dw[data-mode="selfhost"] [data-for]:not([data-for~="selfhost"]) { display: none; }

/* Header */
.dw-head { text-align: center; max-width: 820px; margin: 0 auto 36px; }
.dw-eyebrow { font-family: var(--dw-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dw-muted); margin: 0 0 14px; }
.dw-h2 { max-width: none; font-family: var(--dw-display); font-weight: 700; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 16px; }
.dw-h2 span { color: var(--dw-blue-deep); display: block; }
.dw-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--dw-muted); margin: 0; }

/* Tabs */
.dw-tabsrow { display: flex; justify-content: center; align-items: stretch; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.dw-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--dw-line); border-radius: 16px; flex: 1 1 600px; max-width: 1120px; }
.dw-tab, .dw-selfhost { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 12px 14px; min-height: 60px; border-radius: 12px; border: 1px solid transparent; background: transparent; text-decoration: none; transition: background .25s, border-color .25s, color .25s; }
.dw-tab .dw-i, .dw-selfhost .dw-i { font-size: 26px; color: var(--dw-muted); transition: color .25s; }
.dw-tab b, .dw-selfhost b { display: block; font-family: var(--dw-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.dw-tab small, .dw-selfhost small { display: block; font-size: 13px; color: var(--dw-muted); margin-top: 2px; transition: color .25s; }
.dw-tab:hover { background: var(--dw-panel); }
.dw-tab[aria-selected="true"] { background: var(--dw-ink); color: #fff; }
.dw-tab[aria-selected="true"] small { color: #A9BCC2; }
.dw-tab[aria-selected="true"] .dw-i { color: #5BBFE8; }
.dw-selfhost { background: #fff; border-color: var(--dw-line); border-radius: 16px; padding: 12px 22px; }
.dw-selfhost:hover { border-color: var(--dw-blue); }
.dw-tab:focus-visible, .dw-selfhost:focus-visible, .dw a:focus-visible { outline: 2px solid var(--dw-blue); outline-offset: 2px; }
/* /cloud/ carries the SAME diagram with only the two Cloud shapes. The grid is repeat(4) for the home page, so
   two tabs in it would sit in the left half with 560px of empty strip beside them — the count is a modifier. */
.dw-tabs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 460px; max-width: 640px; }
.dw-note { max-width: 860px; margin: 22px auto 0; font-size: 14.6px; line-height: 1.6; text-align: center; color: var(--dw-muted); }
.dw-note b { color: var(--dw-ink); }
.dw-note a { color: var(--dw-blue-deep); }

/* Stage */
.dw-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); background: var(--dw-panel); border: 1px solid var(--dw-line); border-radius: 24px; overflow: hidden; }
.dw-left { padding: 32px; min-width: 0; display: flex; flex-direction: column; }
.dw-dia { margin: auto 0; }
.dw-right { padding: 36px 36px 36px 32px; border-left: 1px solid var(--dw-line); background: #fff; }
.dw-lefthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.dw-h3 { font-family: var(--dw-display); font-weight: 700; font-size: 26px; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 6px; }
.dw-sub { font-size: 16px; line-height: 1.45; color: var(--dw-muted); margin: 0; }
.dw-chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--dw-line); font-size: 13.5px; font-weight: 500; }
.dw-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--dw-blue); }

.dw-free { display: inline-flex; align-items: center; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--dw-blue-deep); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .2s; }
.dw-free:hover { background: var(--dw-ink); }
.dw-cta { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--dw-line); }
.dw-cta span { font-size: 13.5px; line-height: 1.45; color: var(--dw-muted); }
.dw-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--dw-ink); color: #fff; font-family: var(--dw-display); font-size: 16px; font-weight: 600; text-decoration: none; transition: background .2s; }
.dw-btn .dw-i { font-size: 18px; transition: transform .2s; }
.dw-btn:hover { background: var(--dw-blue-deep); }
.dw-btn:hover .dw-i { transform: translateX(3px); }

/* Diagram: three nested boundaries. Organization > zone > each app. */
.dw-org { border: 1.5px solid transparent; border-radius: 22px; padding: 0; transition: border-color .5s, padding .6s var(--dw-ease), background .5s; }

.dw-orgband { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--dw-ease), opacity .4s; }
.dw[data-mode="enterprise"] .dw-orgband { max-height: 520px; opacity: 1; }
.dw-orgband-in { background: var(--dw-blue-tint); border: 1.5px solid var(--dw-blue-deep); border-radius: 16px; padding: 16px 18px 16px; color: #0E3A52; }
.dw-orghead { text-align: center; margin-bottom: 14px; }
.dw-orghead strong { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dw-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dw-orghead strong .dw-i { font-size: 20px; color: var(--dw-blue-deep); }
.dw-orghead span { display: block; font-size: 13.5px; color: #2F5468; margin-top: 1px; }
.dw-orggroups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dw-orggroups > div { min-width: 0; padding: 0 4px 0 12px; border-left: 1px solid var(--dw-blue-line); }
.dw-orggroups > div:first-child { border-left: 0; padding-left: 2px; }
.dw-orggroups h4 { margin: 0 0 5px; font-family: var(--dw-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dw-blue-deep); white-space: nowrap; }
.dw-orggroups ul { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--dw-ink); }
.dw-orggroups li { white-space: nowrap; }

.dw-inherit { display: flex; flex-direction: column; align-items: center; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--dw-ease), opacity .4s .15s; }
.dw[data-mode="enterprise"] .dw-inherit { max-height: 90px; opacity: 1; }
.dw-inherit i { display: block; width: 1.5px; height: 14px; background: var(--dw-blue-deep); }
.dw-inherit span { font-family: var(--dw-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dw-blue-deep); padding: 7px 0 4px; }
.dw-inherit i:last-child { height: 14px; }

.dw-zone { position: relative; border: 1.5px solid transparent; border-radius: 18px; padding: 0; transition: border-color .5s, padding .6s var(--dw-ease), background .5s; }
.dw[data-mode="dedicated"] .dw-zone, .dw[data-mode="enterprise"] .dw-zone { border-color: var(--dw-blue); padding: 16px 16px 18px; background: rgba(255, 255, 255, .7); }
.dw[data-mode="selfhost"] .dw-zone { border-color: var(--dw-blue); border-style: dashed; padding: 16px 16px 18px; background: rgba(255, 255, 255, .7); }
.dw[data-mode="selfhost"] .dw-zonehead { max-height: 70px; opacity: 1; margin-bottom: 14px; }
.dw-ctrs { padding: 0 6px; position: relative; z-index: 1; }
.dw-ctrs .dw-dots { padding: 0; }
.dw-ctrs .dw-mini { width: 100%; max-width: 170px; justify-content: center; padding: 10px 8px; }
.dw-zonehead { max-height: 0; opacity: 0; overflow: hidden; text-align: center; transition: max-height .6s var(--dw-ease), opacity .4s, margin .6s var(--dw-ease); }
.dw[data-mode="dedicated"] .dw-zonehead { max-height: 70px; opacity: 1; margin-bottom: 14px; }
.dw[data-mode="enterprise"] .dw-zonehead { max-height: 70px; opacity: 1; margin-bottom: 14px; }
.dw-zonehead strong { display: block; font-family: var(--dw-display); font-size: 18px; font-weight: 600; color: var(--dw-blue-deep); }
.dw-zonehead > span { font-size: 14px; color: var(--dw-muted); }

.dw-row { display: flex; align-items: flex-end; }
.dw-group { flex: var(--n) 1 0; min-width: 0; padding: 0 6px; overflow: hidden; transition: flex-grow .7s var(--dw-ease), opacity .35s, padding .7s var(--dw-ease); }
.dw-dbs .dw-group, .dw-apps .dw-group { overflow: visible; }
.dw-group.dw-others { overflow: hidden; }
.dw:not([data-mode="shared"]) .dw-others { flex-grow: .0001; opacity: 0; padding: 0; }
.dw-glabel { display: block; text-align: center; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--dw-other-ink); margin-bottom: 10px; max-height: 20px; transition: max-height .5s, opacity .3s, margin .5s; }
.dw-yours .dw-glabel { color: var(--dw-blue-deep); font-weight: 600; }
.dw:not([data-mode="shared"]) .dw-glabel { max-height: 0; opacity: 0; margin: 0; overflow: hidden; }
.dw-cols { display: flex; gap: 8px; align-items: flex-end; }
.dw-col { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.dw-dots { flex: 0 0 22px; text-align: center; color: var(--dw-other-ink); letter-spacing: 2px; padding-bottom: 18px; }

.dw-app { position: relative; width: 100%; max-width: 104px; min-width: 44px; padding: 10px 4px 8px; border-radius: 10px; background: var(--dw-other); border: 1px solid transparent; color: var(--dw-other-ink); text-align: center; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
.dw-app .dw-i { display: block; margin: 0 auto 4px; font-size: 18px; }
.dw-app::after, .dw-db::before { content: ""; position: absolute; left: 50%; width: 1px; background: #B4C2C6; }
.dw-app::after { top: calc(100% + 1px); height: 20px; }
.dw-yours .dw-app { background: #fff; border-color: var(--dw-blue); color: var(--dw-ink); box-shadow: 0 0 0 3px rgba(46, 155, 214, .14); }
.dw-yours .dw-app .dw-i { color: var(--dw-blue); }
.dw-yours .dw-app::after, .dw-yours .dw-db::before { background: var(--dw-blue); }

.dw-band { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; padding: 16px 20px; border-radius: 14px; background: var(--dw-ink); color: #E6EEF1; box-shadow: 0 -6px 44px rgba(46, 155, 214, .28), 0 8px 0 -1px #C9D6D9; }
.dw-band .dw-i { font-size: 26px; color: #5BBFE8; }
.dw-band strong { display: block; font-family: var(--dw-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dw-band small { display: block; font-size: 13.5px; color: #A9BCC2; margin-top: 2px; }
.dw-native { font-family: var(--dw-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5BBFE8; border: 1px solid #2B4651; border-radius: 999px; padding: 5px 10px; }

.dw-dbs { align-items: flex-start; margin-top: 8px; }
.dw-db { position: relative; width: 100%; padding-top: 22px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--dw-other-ink); }
.dw-db::before { top: 0; height: 22px; }
.dw-cyl { position: relative; display: block; width: 42px; height: 36px; margin: 0 auto 8px; border-radius: 21px / 7px; background: #D3DCDF; border: 1px solid #B4C2C6; }
.dw-cyl::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 14px; border-radius: 50%; background: #E6ECEE; border: 1px solid #B4C2C6; }
.dw-yours .dw-db { color: var(--dw-ink); font-weight: 500; }
.dw-yours .dw-cyl { background: #8CCBEE; border-color: var(--dw-blue); }
.dw-yours .dw-cyl::before { background: #C4E4F6; border-color: var(--dw-blue); }
.dw-dbs .dw-dots { padding: 30px 0 0; }

.dw-store { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--dw-line); background: #fff; font-size: 14.5px; text-align: center; }
.dw-store .dw-i { font-size: 20px; color: var(--dw-muted); }
.dw:not([data-mode="shared"]) .dw-store { border-color: var(--dw-blue-line); }
.dw:not([data-mode="shared"]) .dw-store .dw-i { color: var(--dw-blue); }

.dw-zones { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--dw-ease), opacity .4s .1s; }
.dw[data-mode="enterprise"] .dw-zones { max-height: 420px; opacity: 1; }
.dw-fan { height: 1.5px; margin: 0 16.666%; background: var(--dw-blue-deep); }
.dw-zones ul { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dw-zones li { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px 14px; background: #fff; border: 1.5px solid var(--dw-blue); border-radius: 12px; }
.dw-zones li::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1.5px); width: 1.5px; height: 14px; background: var(--dw-blue-deep); }
.dw-zones li b { font-family: var(--dw-display); font-size: 15.5px; font-weight: 600; color: var(--dw-ink); }
.dw-zones li small { font-size: 12px; color: var(--dw-muted); margin: 6px 0 4px; }
.dw-zones li em { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border: 1px solid var(--dw-line); border-radius: 7px; background: var(--dw-panel); font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--dw-ink); white-space: nowrap; }
.dw-zones li em .dw-i { font-size: 16px; color: var(--dw-blue); }
.dw-zones li em .dw-chev { margin-left: auto; font-size: 14px; color: var(--dw-muted); }
.dw-same { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; font-family: var(--dw-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dw-blue-deep); white-space: nowrap; }
.dw-same::before, .dw-same::after { content: ""; flex: 1; height: 1px; background: var(--dw-blue-line); }

/* Right column */
.dw-right .dw-h3 { font-size: 28px; }
.dw-right .dw-sub { margin-bottom: 26px; }
.dw-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.dw-feats li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.dw-feats .dw-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--dw-blue-tint); color: var(--dw-blue-deep); display: grid; place-items: center; font-size: 22px; }
.dw-feats b { display: block; font-family: var(--dw-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; margin-bottom: 2px; }
.dw-feats span { font-size: 14.5px; line-height: 1.45; color: var(--dw-muted); }
.dw-lead { font-family: var(--dw-display); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; color: var(--dw-blue-deep); margin: 0 0 8px; }
.dw-callout { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--dw-ink); color: #E6EEF1; }
.dw-callout .dw-i { font-size: 26px; color: #5BBFE8; }
.dw-callout b { display: block; font-family: var(--dw-display); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 6px; }
.dw-callout span { font-size: 14.5px; line-height: 1.45; color: #A9BCC2; }
.dw-panel { animation: dw-in .45s var(--dw-ease); }
@keyframes dw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Self-host containers */
.dw-mini { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: var(--dw-ink); color: #E6EEF1; box-shadow: 0 -4px 28px rgba(46, 155, 214, .25); }
.dw-mini .dw-i { font-size: 22px; color: #5BBFE8; }
.dw-mini b { display: block; font-family: var(--dw-display); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.dw-mini small { display: block; font-size: 12px; color: #A9BCC2; }

/* Responsive */
@media (max-width: 1020px) {
  .dw-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-stage { grid-template-columns: minmax(0, 1fr); }
  .dw-right { border-left: 0; border-top: 1px solid var(--dw-line); padding: 32px; }
}
@media (max-width: 640px) {
  .dw { padding: 48px 14px; }
  .dw-tabs { grid-template-columns: minmax(0, 1fr); }
  .dw-left, .dw-right { padding: 22px 16px; }
  .dw-lefthead { flex-direction: column; }
  .dw-cta { flex-direction: column; align-items: flex-start; }
  .dw-others .dw-col:nth-child(2) { display: none; }
  .dw-group { padding: 0 3px; }
  .dw-cols { gap: 5px; }
  .dw-app { font-size: 11.5px; }
  .dw-db { font-size: 11px; }

  /* ⚑ TWO PHONE DEFECTS, BOTH INVISIBLE TO EVERY ASSERTION AND BOTH OBVIOUS IN A SCREENSHOT (390px, 2026-09-21).
     The labels under the three "yours" cylinders overlapped into "App databadetabadetabase (yours)(yours)(yours)"
     — "App database" is ~60px at 11px and the column is ~35px, so each one ran straight over its neighbours. And
     .dw-glabel is white-space:nowrap, so "Other organizations" clipped mid-word to "Other organiza".
     The fix keeps the meaning rather than shrinking type until it fits: ONE cylinder per group says exactly what
     three identical ones said, and it leaves the label the width it needs. The APPS row above keeps all three,
     because "App" fits. */
  .dw-dbs .dw-yours .dw-col:nth-child(2), .dw-dbs .dw-yours .dw-col:nth-child(3),
  .dw-dbs .dw-yours .dw-dots { display: none; }
  .dw-glabel { white-space: normal; max-height: 42px; line-height: 1.25; }
  .dw-cyl { width: 34px; height: 30px; }
  .dw-zones ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dw-zones li + li::before { display: none; }
  .dw-fan { display: none; }
  .dw-orggroups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .dw-orggroups > div:nth-child(odd) { border-left: 0; padding-left: 2px; }
  .dw-orgband-in { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw *, .dw *::before, .dw *::after { transition: none !important; animation: none !important; }
}

/* ── THE PLATFORM GRAPHIC — four layers, reading OUTWARD from the core ─────────────────────────────────────────
   Brief, owner 2026-09-18. The radial idea is kept because it is the distinctive one; what changes is that the
   graphic now carries the HIERARCHY instead of a taxonomy:

       core        Osyrin — the application operating system
       model       one application model: data, UI, workflows, security, APIs, AI
       deployment  where that same model runs: public cloud · enterprise · self-host
       applications what you build on it: six domains that are plainly EXAMPLES, not products

   ⚠ The old `.orbit` rules below are NOT dead: `/preview/hero/` still renders the two alternatives on them. This
     is a new set of names rather than an edit of those, so choosing differently later costs nothing.
   ⚑ ONE COORDINATE SYSTEM. The rings are CSS circles centred on the bottom-middle; the SVG is a 200×100 viewBox
     with the same centre, so 1 viewBox unit = 0.5% of the width in both. Every position below is computed from
     left = 50 + R·cosθ and top = 100 − 2R·sinθ (the box is half as tall as it is wide), never eyeballed. */
.plat{margin:clamp(56px,7vw,96px) 0 0;padding:0}
.plat-w{position:relative;width:min(1120px,calc(100% - 2 * var(--gutter)));aspect-ratio:2/1;margin-inline:auto;
  overflow:hidden;container-type:inline-size}
/* ⛔ NOT `vw` FOR ANYTHING INSIDE. The graphic is min(1120px, …), so past 1120px the viewport keeps growing and the
     circle does not — a vw-sized label drifts off its ring. Container units track the ring itself. */
.pr{position:absolute;left:50%;top:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.pr-a{width:100%;border:1.5px solid var(--rule);background:radial-gradient(closest-side,transparent 62%,var(--glow))}
.pr-d{width:78%;background:var(--card);border:1px solid var(--rule)}
.pr-m{width:50%;background:var(--accent-wash);border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.pr-c{width:32%;background:var(--sheet-ink)}
/* ⭐ THE SEMICIRCLE IS DELIBERATE, AND THIS LINE IS WHAT SAYS SO. Cropped without it the circle reads as an
     accident of the viewport; sitting on a rule it reads as a foundation the page stands on. */
.plat-w::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--rule-2) 12%,var(--rule-2) 88%,transparent)}
.plat-cuts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* A divider only needs a line — a ring of gapped wedges is a saw blade (owner, 2026-09-17). Each band is divided
   at its own weight: the model band barely, the deployment band plainly, the rim in between. */
.tk{fill:none}
.tk.m{stroke:color-mix(in srgb,var(--accent) 22%,transparent);stroke-width:.34}
.tk.d{stroke:var(--rule-2);stroke-width:.4}
.tk.a{stroke:var(--rule);stroke-width:.45}
.mn{fill:var(--accent);opacity:.72;font-family:var(--mono);font-size:2.35px;letter-spacing:.2px;
  text-transform:uppercase;text-anchor:middle}
.plat-core{position:absolute;left:50%;top:79%;transform:translateX(-50%);width:28%;text-align:center;
  color:var(--on-ink);font-weight:800;letter-spacing:-.035em;line-height:1;font-variation-settings:var(--display);
  font-size:max(20px,3.25cqw)}
.plat-core small{display:block;margin-top:.5em;font-family:var(--mono);font-size:max(9px,.3em);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.35;color:#5BBFE8;
  font-variation-settings:normal}
/* Deployment and applications are two different KINDS of thing, so they are two different objects: a pill with a
   ring bullet for an environment, a card with an icon for something you build. */
.dep,.app{position:absolute;left:var(--l);top:var(--t);transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;background:var(--card);
  color:var(--ink);line-height:1}
.dep{gap:.58em;padding:.6em 1.05em .6em .82em;font-weight:700;font-size:max(12px,1.28cqw);
  box-shadow:0 14px 30px -20px rgba(11,31,37,.42),inset 0 0 0 1.5px var(--rule-2)}
.dep::before{content:"";width:.56em;height:.56em;border-radius:50%;border:.15em solid var(--accent);flex:none}
.app{gap:.5em;padding:.52em .9em;font-weight:600;font-size:max(11px,1.1cqw);border-radius:.85em;
  box-shadow:0 10px 24px -18px rgba(11,31,37,.4),inset 0 0 0 1px var(--rule)}
.app svg{width:1.18em;height:1.18em;flex:none;color:var(--accent);fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.plat-cap{margin:clamp(26px,3vw,40px) auto 0;max-width:46ch;font-weight:700;letter-spacing:-.025em;
  font-size:clamp(17px,1.9vw,24px);color:var(--ink);text-wrap:balance}
/* A gentle one-time emergence — the layers arrive from the core outward. Never a rotation: the slices carry
   meaning now, and a diagram that means something holds still. */
@media (prefers-reduced-motion:no-preference){
  .pr,.plat-cuts,.plat-core,.dep,.app{animation:plat-rise .7s cubic-bezier(.22,1,.36,1) both}
  .pr-c{animation-delay:.04s} .pr-m{animation-delay:.12s} .pr-d{animation-delay:.2s} .pr-a{animation-delay:.28s}
  .plat-cuts{animation-delay:.3s} .plat-core{animation-delay:.1s}
  .dep{animation-delay:.34s} .app{animation-delay:.42s}
}
@keyframes plat-rise{from{opacity:0;transform:translate(-50%,-50%) scale(.965)}}
.plat-core{animation-name:plat-rise-c}
@keyframes plat-rise-c{from{opacity:0;transform:translateX(-50%) translateY(6px)}}
.plat-cuts{animation-name:plat-fade}
@keyframes plat-fade{from{opacity:0}}

/* ── under 900px the ring cannot carry its own words, so it is REPLACED rather than emptied ───────────────────
   ⛔ MEASURED on the previous graphic: below 760px every arc label and every chip was `display:none` and a phone
      got three empty circles. Owner, 2026-09-18: "without anything in the org it just looks like an eye and doesnt
      say anything". The same four layers, same four grounds, same order — outward from the core, as rows. */
.plat-sm{display:none}
@media (max-width:900px){
  .plat-w,.plat-cap{display:none}
  .plat-sm{display:grid;gap:10px;max-width:440px;margin:0 auto;text-align:left}
  .ps{border-radius:16px;padding:15px 16px}
  .ps p{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
  .ps span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
  .ps-c{background:var(--sheet-ink);text-align:center;padding:20px 16px}
  .ps-c b{display:block;font-weight:800;letter-spacing:-.035em;font-size:27px;line-height:1.05;color:var(--on-ink);
    font-variation-settings:var(--display)}
  .ps-c span{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
    color:#5BBFE8}
  .ps-m{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 30%,transparent)}
  .ps-d{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
  .ps-a{background:var(--tint);box-shadow:inset 0 0 0 1px var(--rule)}
  .plat-smc{margin:18px 0 0;font-weight:700;letter-spacing:-.02em;font-size:19px;color:var(--ink);text-align:center}
}

/* the shift ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.shift h2{max-width:17ch}
.move{max-width:1120px;margin:clamp(56px,7vw,100px) auto 0;padding-inline:32px;text-align:center}
.move .lead{color:var(--on-ink-2);font-size:clamp(17px,1.5vw,20px)}
.track{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,34px);margin-top:26px}
.end{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left}
.end .w{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)}
.end .v{font-weight:800;letter-spacing:-.045em;line-height:1;font-size:clamp(28px,4.4vw,62px);font-variation-settings:var(--display)}
.from .v{color:var(--on-ink-3)}
.to .v{color:#5BBFE8}
.track .line{position:relative;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--on-ink-3),#5BBFE8)}
.track .line::after{content:"";position:absolute;right:0;top:50%;width:12px;height:12px;border-top:2px solid #5BBFE8;
  border-right:2px solid #5BBFE8;transform:translateY(-50%) rotate(45deg)}
@media (max-width:760px){
  .track{grid-template-columns:1fr;justify-items:center}
  .end{align-items:center;text-align:center}
  .track .line{width:2px;height:52px;background:linear-gradient(180deg,var(--on-ink-3),#5BBFE8)}
  .track .line::after{right:auto;top:auto;left:50%;bottom:0;transform:translateX(-50%) rotate(135deg)}
}

/* how it works — the argument holds still, the picture converges ─────────────────────────────────────────────── */
.how{padding-block:var(--air)}
.duo .big{margin-inline:0}
.cap{font-size:15px;color:var(--ink-3);text-align:center;margin:18px auto 0;max-width:40ch;line-height:1.5}

/* ⚑ `.more` OUTLIVED THE SECTION IT WAS WRITTEN FOR. The "build · run · we run it" flow was deleted on
   2026-09-21 as redundant with the Deploy-your-way graphic above and the four outcomes below; .flow/.node/
   .verb/.role/.txt/.main went with it, measured unused. This one did not — the ownership section here and
   three links on /start/ still carry it. */
.more{margin-top:16px;font-weight:600;text-decoration:none;font-size:15px}
.more:hover{color:var(--accent)}

/* four outcomes — tiles of different sizes and grounds ──────────────────────────────────────────────────────── */
.outcomes{padding-block:var(--air)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(52px,6vw,84px);text-align:left}
.tile{position:relative;overflow:hidden;border-radius:clamp(22px,2.4vw,32px);padding:clamp(28px,3vw,44px);min-height:clamp(250px,22vw,320px);
  display:flex;flex-direction:column;justify-content:flex-end}
/* each tile carries the ring, large and faint, off its corner */
.tile::after{content:"";position:absolute;width:240px;aspect-ratio:1;border-radius:50%;border:34px solid currentColor;opacity:.07;right:-80px;top:-80px}
.tile h3{font-weight:800;letter-spacing:-.035em;line-height:1.04;font-size:clamp(26px,2.6vw,36px);max-width:16ch}
.tile p{margin-top:14px;font-size:16.5px;line-height:1.55;max-width:46ch}
.t1{grid-column:span 2;background:var(--accent);color:var(--on-ember)}
.t1 p{color:var(--on-ember-2)}
.t2{background:var(--card);border:1px solid var(--rule)}
.t2 p,.t4 p{color:var(--ink-2)}
.t3{background:var(--sheet-ink);color:var(--on-ink)}
.t3 p{color:var(--on-ink-2)}
.t4{grid-column:span 2;background:var(--tint)}
.t1 h3,.t4 h3{font-size:clamp(30px,3.4vw,48px)}
@media (max-width:820px){.bento{grid-template-columns:1fr}.t1,.t4{grid-column:auto}.tile{min-height:0}}
.statement .quiet{color:var(--on-ember-3)}

/* ownership — doors, drawn as doors ─────────────────────────────────────────────────────────────────────────── */
.own{padding-block:var(--air)}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(52px,6vw,84px)}
/* ⚠ The arch is a FIXED radius, never 999px: when corner radii add up past the box, CSS shrinks ALL four by the same
   factor, so a 999px top would crush the 28px bottom corners to a few pixels. */
.door{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:200px 200px 28px 28px;
  padding:clamp(104px,9.5vw,136px) clamp(24px,2.6vw,36px) clamp(30px,3vw,40px)}
.door::before{content:"";position:absolute;left:50%;top:clamp(40px,3.8vw,54px);width:36px;height:36px;border-radius:50%;
  border:6.5px solid var(--accent);transform:translateX(-50%)}
.door h3{font-size:clamp(22px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.door p{margin-top:12px;color:var(--ink-2);font-size:16px;line-height:1.55}
@media (max-width:820px){.doors{grid-template-columns:1fr}}

/* the language, in its own clothes ──────────────────────────────────────────────────────────────────────────── */
.osy{background:var(--osy-ground);color:var(--osy-ink);padding-block:clamp(64px,8vw,110px)}
.osy .big-wm{font-size:clamp(56px,7vw,96px);line-height:1;margin-bottom:20px;font-variation-settings:var(--display)}
.osy .big-wm .hash{color:var(--osy-accent)}
.osy .line{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--osy-ink-2);max-width:52ch;margin:0 auto}
.osy .line b{color:var(--osy-ink)}
.btn.osybtn{background:var(--osy-accent);color:#06212a;margin-top:30px}
.btn.osybtn:hover{background:#ffa266}
@media (prefers-color-scheme:dark){.osy{background:#0b0d12;box-shadow:inset 0 0 0 1px #2a2f3d}}

/* plans ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.plans h2{max-width:18ch}
/* ⚠ AN ACCENT BUTTON ON A DARK SHEET TAKES THE DARK REGISTER'S ACCENT, like everything else that sits there
   (.ink .em, the bullets). On the light register it was the DIMMEST thing on the sheet — the opposite of what a
   primary call is for. It showed up when the palette went cerulean, whose light accent is a deep teal; with the
   old ember it was merely lucky. */
.ink .btn.e{background:#5BBFE8;color:var(--sheet-ink)}
.fine{margin:18px auto 0;font-size:14.5px;line-height:1.55;color:var(--ink-3);max-width:72ch}
/* ⚠ `.fine` is --ink-3, which on a DARK sheet is near-invisible rather than merely quiet. It first landed on one
   when the enterprise summary moved onto an ink sheet; a screenshot caught it, nothing else would have. */
.ink .fine{color:var(--on-ink-3)}
.more{margin:clamp(26px,3vw,40px) auto 0}
.more a{font-weight:600;font-size:17px;text-decoration:none;color:var(--accent)}
.more a:hover{text-decoration:underline;text-underline-offset:3px}

/* .claim — a core statement set as a statement. The "why now" section it was written for was deleted on
   2026-09-21 (owner: the top of the page already makes that argument, and better); /self-host/ and
   /enterprise/ still use it, which is why it is still here. */
.claim{margin:30px auto 0;font-weight:800;letter-spacing:-.03em;line-height:1.15;font-size:clamp(24px,2.6vw,34px);font-variation-settings:var(--display)}
/* a two-sentence claim wraps as one otherwise, the second sentence starting on the first line */
.claim .em{display:block}

/* footer — the wordmark, large ──────────────────────────────────────────────────────────────────────────────── */
.foot{padding-top:clamp(56px,7vw,90px);overflow:hidden}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 32px;text-align:left}
.arch{font-size:15px;color:var(--ink-2);text-wrap:pretty}
.arch b{color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:22px;font-size:14.5px}
.links a{color:var(--ink-3);text-decoration:none}
.links a:hover{color:var(--accent)}
/* The page ends on the wordmark standing on its baseline: only the descender of the "y" runs off the bottom. With
   line-height .8 the crop went through the middle of every letter and read as a rendering fault. */
.giant{margin:clamp(20px,3vw,40px) 0 -.2em;font-weight:800;letter-spacing:-.065em;line-height:1;font-size:clamp(92px,22vw,340px);
  text-align:center;white-space:nowrap;color:var(--wash);user-select:none;font-variation-settings:var(--display)}

@media (max-width:620px){
  .in,.move{padding-inline:22px}
  .capsule{padding-left:14px}
  .hero h1{margin:22px auto 24px}
  .btn{padding:14px 20px}
  .door{border-radius:170px 170px 24px 24px}
}

/* ── /plans/ ─────────────────────────────────────────────────────────────────────────────────────────────────────
   The home page carries the four columns as a summary; this page is where each of them is actually explained, and
   where Enterprise gets the room it needs. It reuses the sheets and the chips from the home page rather
   than inventing a second vocabulary — a second page of a site is not a second site. */
.phero{padding:clamp(120px,14vw,190px) 0 clamp(40px,5vw,64px)}
.phero h1{font-weight:800;letter-spacing:-.05em;line-height:.96;font-size:clamp(42px,6.4vw,92px);margin:26px auto 26px;max-width:16ch}
.phero .lede{margin-inline:auto}

/* enterprise — a grid of what it includes, because "talk to us" tells a buyer nothing about whether to */
.ekit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(40px,5vw,64px);text-align:left}
/* `.ekit` is three columns, so FOUR cards strand the fourth on a row of its own. Four reads as 2x2 or not at all. */
.ekit.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ekit article{background:color-mix(in srgb,var(--on-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--on-ink) 12%,transparent);
  border-radius:clamp(16px,1.8vw,22px);padding:clamp(20px,2.2vw,28px)}
.ekit h3{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0}
.ekit p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--on-ink-2)}

/* the open questions, two up */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px) clamp(28px,3.4vw,56px);
  margin-top:clamp(40px,5vw,64px);text-align:left}
.qa h3{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0}
.qa p{margin:9px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.qa p b{color:var(--ink)}

@media (max-width:900px){
  .ekit{grid-template-columns:1fr}
  .qa{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────────────────────
   /start — THE DEVELOPER JOURNEY.
   ⛔ EVERY COMMAND ON THAT PAGE WAS RUN, NOT REMEMBERED (owner, 2026-09-18: "we know what the verbs look like, we
      have the source code so I dont think the fact that you cannot download it is a reason to not build it").
      The terminal panels quote real `osy` output. If a verb changes, the page is wrong — re-run it, do not patch
      the prose. The step whose product does not exist yet carries `.soon`, which is the only honest way to show a
      journey whose last mile is not open.
   ───────────────────────────────────────────────────────────────────────────── */
.shero{padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(30px,4vw,54px)}
.shero h1{font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(38px,5.2vw,74px);
  max-width:19ch;margin:26px auto 0}
.shero .lede{max-width:56ch;margin:22px auto 0;font-size:clamp(17px,1.45vw,20px);line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.shero .rule{width:64px;height:2px;background:var(--accent);margin:34px auto 0;opacity:.5}

/* the honest status strip: what of this journey runs today */
.today{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.today span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:7px 13px;border-radius:999px;
  background:var(--wash);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule)}
.today span b{font-weight:500;color:var(--accent)}

/* ── the numbered steps ─────────────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;text-align:left;max-width:860px;margin-inline:auto}
.steps > li{counter-increment:s;position:relative;padding-left:76px;padding-bottom:52px}
.steps > li::before{content:counter(s);position:absolute;left:0;top:-6px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:17px;font-weight:500;
  color:var(--accent);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
/* the spine, drawn between the markers rather than behind them */
.steps > li::after{content:"";position:absolute;left:23.25px;top:48px;bottom:8px;width:1.5px;background:var(--rule)}
.steps > li:last-child{padding-bottom:0}
.steps > li:last-child::after{display:none}
/* ⚠ THE STEPS SECTION MUST CARRY ITS OWN BOTTOM AIR. Its last `li` has `padding-bottom:0` (the spine stops with
   the last marker), and a bare `section` has no padding of its own — so the final step's button ended up flush
   against the rounded top edge of the dark `.sheet` that follows, at a measured 0px. Every sibling section here
   carries ~50px of bottom padding; this one carried none. Same failure as `.hero` had on the home page after the
   reorder, which is why both now state it rather than inherit it. */
.guide{padding-top:clamp(46px,5.5vw,84px)}
.steps h3{font-size:clamp(20px,1.7vw,25px);margin:0;letter-spacing:-.02em}
.steps .sub{margin:9px 0 0;color:var(--ink-2);line-height:1.62;max-width:60ch;text-wrap:pretty}
.steps .sub + .sub{margin-top:11px}
.steps .soon{display:inline-block;margin-left:11px;vertical-align:2px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--accent);
  padding:4px 9px;border-radius:999px;background:var(--accent-wash)}

/* ── terminal panels ────────────────────────────────────────────────────────── */
.term{margin-top:18px;border-radius:14px;background:var(--sheet-ink);padding:18px 20px;overflow-x:auto;
  font-family:var(--mono);font-size:13.5px;line-height:1.75;-webkit-overflow-scrolling:touch}
.term div{white-space:pre;color:var(--on-ink-2)}
.term .p{color:var(--on-ink)}                      /* a command you type */
.term .p::before{content:"$ ";color:#5BBFE8}
.term .ok{color:#5BBFE8}              /* the tool's own success line */
.term .c{color:var(--on-ink-3);font-style:italic}  /* our annotation, never output */
.term.win .p::before{content:"> "}

/* ── the recording ───────────────────────────────────────────────────────────
   A REAL asciinema cast of the commands in the column beside it: `osy init`, a real headless `claude -p` session,
   then `osy check`. Re-record with `make start-cast` — the command IS the recipe, which is the whole reason this
   is a cast and not a video. The player is vendored under /vendor/asciinema/ rather than hotlinked: the site
   loads no third-party JS, and a CDN going stale must not be able to break a page.
   ⚠ It is loaded ONLY when it scrolls into view (207KB), so nothing about it is on the critical path. */
.rec{display:grid;gap:12px;align-content:start}
/* the claim the whole section exists to substantiate, and the two ways into the evidence for it */
.proofcard{padding:clamp(16px,1.7vw,20px) clamp(18px,1.9vw,22px);border-radius:14px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule);text-align:left}
.pclaim{margin:0;font-weight:700;font-size:clamp(16px,1.35vw,18.5px);letter-spacing:-.015em;color:var(--ink);
  line-height:1.3}
.psub{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.pacts{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:9px}
.pacts .btn{font-size:14px;padding:10px 16px}

main > section:not(.sheet):has(+ .sheet){padding-bottom:clamp(56px,7vw,104px)}

/* ── the proof panel ─────────────────────────────────────────────────────────
   Collapsed until asked for. That is not only layout: the cast is 1.1MB and the player 207KB, and a reader who
   never opens this never fetches either. ⚠ It is `hidden` BY SCRIPT, not in the markup — with JavaScript off
   the evidence must still be readable, so it renders open. */
/* ⚠ NOT `.proof` — /enterprise/ already owns that name further down the file (`max-width:62ch`), and the panel
   silently inherited it: every pane rendered 595px wide inside a 1180px page, with the source browser's two
   columns at 220px each. A class name in this file is global; check before reusing one. */
.evid{padding-block:clamp(30px,3.6vw,48px)}
.evid[hidden]{display:none}
.evidin{border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);
  padding:clamp(22px,2.6vw,38px)}
.evid h2{text-align:left;margin-inline:0;max-width:24ch}
.evid .lede{text-align:left;margin-inline:0;max-width:62ch;font-size:clamp(16px,1.35vw,18px)}
/* Result · Prompt · Source · Final check · Full build IS the proof structure — it reconstructs the experiment —
   so the strip is a contained object with its own surface, not a row of ordinary page links. */
.ptabs{display:flex;flex-wrap:wrap;gap:4px;margin:clamp(22px,2.4vw,30px) 0 0;
  padding:5px;border-radius:14px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--rule)}
.ptabs button{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:clamp(14.5px,1.25vw,16px);font-weight:600;color:var(--ink-3);padding:10px 16px;border-radius:10px;
  letter-spacing:-.012em;transition:color .12s,background-color .12s}
@media (hover:hover){.ptabs button:hover{color:var(--ink);background:var(--card)}}
.ptabs button[aria-selected="true"]{color:var(--card);background:var(--accent);
  box-shadow:0 1px 0 rgba(8,22,27,.10),0 6px 16px -10px rgba(8,22,27,.5)}
@media (max-width:620px){
  .ptabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ptabs::-webkit-scrollbar{display:none}
  .ptabs button{flex:0 0 auto;white-space:nowrap;padding:10px 13px;font-size:14px}
}
.ppane{margin-top:clamp(18px,2vw,26px);text-align:left}
.ppane[hidden]{display:none}
.ppane > h3{font-size:clamp(17px,1.5vw,20px);margin:0 0 8px;letter-spacing:-.02em;color:var(--ink)}
.ppane > p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:66ch;text-wrap:pretty}

/* provenance — evidence, not documentation, so it is a table and it is short */
.prov{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:4px}
.prov th{text-align:left;font-weight:600;color:var(--ink-3);padding:9px 14px 9px 0;vertical-align:top;
  white-space:nowrap;width:1%;border-top:1px solid var(--rule);font-size:13.5px}
.prov td{padding:9px 0;color:var(--ink-2);border-top:1px solid var(--rule);line-height:1.5}
.prov tr:first-child th,.prov tr:first-child td{border-top:0}
.prov code{font-family:var(--mono);font-size:13px;color:var(--ink)}

/* the source browser: a tree on the left, the file on the right */
.srcbrowse{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start}
.srctree{margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:13px;line-height:1.9}
.srctree li{margin:0}
.srctree .dir{color:var(--ink-3)}
.srctree button{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--accent);
  padding:1px 7px;border-radius:7px;text-align:left;width:100%}
.srctree button:hover{background:var(--accent-wash)}
.srctree button[aria-current="true"]{background:var(--accent);color:var(--card)}
/* ⚠ text-align:left is LOAD-BEARING, not tidiness. These blocks used to sit inside `.uc`, which set it; the
   use cases are sections now and a section centres its children, so a <pre> inherited centre and every line of
   code floated to the middle of the box. Same for the note under it and the may / may-not pair. */
.srcfile{margin:0;border-radius:12px;background:var(--sheet-ink);overflow:auto;max-height:520px;text-align:left}
.srcfile pre{margin:0;padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.7;
  color:var(--on-ink-2);white-space:pre;tab-size:2}
.srcfile .k{color:#5BBFE8}.srcfile .s{color:#9adfbd}.srcfile .c{color:var(--on-ink-3);font-style:italic}
.srcfile .a{color:#efd49b}
.srcnote{margin:16px 0 0;font-size:14px;line-height:1.65;color:var(--ink-2);max-width:72ch;text-wrap:pretty;
  text-align:left}
.srcnote code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
/* the agent's own comment, quoted verbatim — it gets its own line because inline it wrapped into two
   disconnected boxes mid-sentence */
.srcnote q{quotes:none;display:block;margin-top:9px;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  color:var(--ink);background:var(--wash);box-shadow:inset 0 0 0 1px var(--rule);border-radius:9px;
  padding:9px 12px;border-left:3px solid var(--accent)}
.srcname{margin:0 0 8px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
@media (max-width:760px){.srcbrowse{grid-template-columns:minmax(0,1fr)}.srcfile{max-height:380px}}

/* the cast lives in a pane now, so it gets the pane's width rather than a capped one */
.castwrap{margin:0}

/* the cast runs the FULL measure under the grid, not beside it: 84 columns in the side column scaled to ~6px a
   character, which is not something anybody can follow. Across `.in` it is more than twice that. */
.castwrap{margin:clamp(30px,3.6vw,50px) 0 0}
/* ⚠ THE WIDTH SETS THE HEIGHT HERE, so this cap is a height cap wearing a width. `fit:'width'` derives the
   font from the box, so at the full measure the terminal renders at ~21px and the box runs past 900px tall —
   taller than a laptop viewport. 900px keeps it readable and lands the box near 750px. */
.castwrap .cast{max-width:900px}
.vidcap{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.6;text-align:left;text-wrap:pretty}
/* the breathing room goes HERE, on the container, because the player measures the box it is handed and will
   respect this. Putting it on `.ap-player` instead is space already spent — see the warning below. */
.cast{border-radius:14px;overflow:hidden;background:var(--sheet-ink);padding:12px 14px;
  box-shadow:0 1px 0 var(--rule),0 18px 44px -24px rgba(8,22,27,.42)}
/* ⚠ NO PADDING ON THE PLAYER. It sizes its terminal from the container it is handed, so padding added
   afterwards is space it has already spent — the 80-column terminal then runs PAST the rounded edge instead of
   scaling into it (measured: text clipped mid-character at the right edge). The terminal fills the box; the
   rounded corners come from `overflow:hidden` on `.cast`.
   ⚑ The player renders `.ap-player`, NOT `.asciinema-player` — that is the theme class. */
.cast .ap-player{padding:0}
/* the player's own terminal palette, matched to `.term` so a cast and a static block read as one surface */
.asciinema-player-theme-osy{
  --term-color-foreground:#c7d6da; --term-color-background:var(--sheet-ink);
  --term-color-0:#0b1519; --term-color-1:#e6807a; --term-color-2:#7fd1a6; --term-color-3:#e3c37e;
  --term-color-4:#5BBFE8; --term-color-5:#c9a5e0; --term-color-6:#6fcfd6; --term-color-7:#c7d6da;
  --term-color-8:#5c7078; --term-color-9:#f09a94; --term-color-10:#9adfbd; --term-color-11:#efd49b;
  --term-color-12:#84d2f2; --term-color-13:#dbbcee; --term-color-14:#93e0e5; --term-color-15:#eef3f3}
/* before the player is created there is nothing to size the box, so the column would jump when it loads */
.cast[data-pending]{aspect-ratio:84/30}
.cast noscript p{margin:0;padding:18px 20px;font-family:var(--mono);font-size:13px;color:var(--on-ink-2)}
/* on a phone the terminal keeps a readable size and the box pans instead of shrinking the font to nothing */
/* ⚠ THE SCROLLER HAS TO BE `.ap-player`, NOT `.cast`. Below 700px the player is given `fit:false` and an 11px
   font so the text stays legible, which makes its 84-column terminal ~572px wide inside a ~274px box — and the
   player sets `overflow:hidden` on itself, so the right half was simply CUT OFF with nothing to scroll.
   `.cast{overflow-x:auto}` measured scrollWidth === clientWidth and did nothing: the overflow was never its. */
@media (max-width:700px){.cast .ap-player{overflow-x:auto;-webkit-overflow-scrolling:touch}}
@media (max-width:700px){[data-check-out] div{white-space:pre-wrap}}
/* the payoff: a few real seconds of the app the run above just built */
.vid{margin:0;border-radius:14px;overflow:hidden;background:var(--card);
  box-shadow:0 1px 0 var(--rule),0 18px 44px -24px rgba(8,22,27,.42)}
.vid video{display:block;width:100%;height:auto}

/* ── what you never do ──────────────────────────────────────────────────────── */
.never{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:38px;text-align:left}
.never li{list-style:none;padding:16px 18px;border-radius:13px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-2);font-size:15px;line-height:1.5}
.never li b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

/* ── the sample table ───────────────────────────────────────────────────────── */
.samp{margin-top:30px;text-align:left;border-collapse:collapse;width:100%;font-size:15px}
.samp td{padding:11px 14px;border-top:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.samp tr:first-child td{border-top:0}
.samp td:first-child{font-family:var(--mono);font-size:13.5px;color:var(--accent);white-space:nowrap;width:1%}

@media (max-width:700px){
  .steps > li{padding-left:0}
  .steps > li::before{position:static;margin-bottom:14px}
  .steps > li::after{display:none}
  .term{font-size:12.5px;padding:15px 16px}
}

/* ── /start, second pass: the quick-start, the screenshot, and the panels ────────────────────────────────────────
   Review asked for the first successful application to come BEFORE the compiler explanation, and for a real
   picture of it. Both are load-bearing: the reader decides whether this is worth their afternoon from the
   screenshot, not from step 4. ⛔ The screenshot is a REAL RUN of the `todo` sample, driven and captured with
   Playwright, not a mockup — replace it by re-running the capture, never by editing the image. */
.quick{padding-block:clamp(34px,4.5vw,60px)}
/* ⚑ BOTTOM-ALIGNED, NOT TOP (owner, 2026-09-22: "can we move the rigth hand side down sit its aligned on the
   bottom isntead?"). The two columns are different heights and always will be — the left is a fixed sequence of
   commands, the right is a video whose height follows its aspect ratio — so one edge or the other has to be the
   one that lines up. The bottom is the one the eye reads as deliberate here, because both columns END on their
   closing line. On a phone the grid is one column and this has no effect. */
.qgrid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,3.4vw,52px);align-items:end;text-align:left}
.qgrid h2{margin:0 0 14px;text-align:left}
.qstep{margin-top:22px}
.qstep .k{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.qstep .term{margin-top:0}
/* the prompt you hand the agent — a said thing, not a typed thing, so it must not look like a terminal */
.ask{margin:0;padding:15px 18px;border-radius:12px;background:var(--accent-wash);
  border-left:3px solid var(--accent);color:var(--ink);font-size:15.5px;line-height:1.6;text-wrap:pretty}
.ask em{color:var(--ink-2);font-style:normal;display:block;margin-top:7px;font-size:13.5px}

/* the shot itself */
.shot{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 var(--rule),0 18px 44px -24px rgba(8,22,27,.42)}
.shot img{display:block;width:100%;height:auto}
.shot img.dk{display:none}
@media (prefers-color-scheme:dark){.shot img.lt{display:none}.shot img.dk{display:block}}
.shotcap{margin:16px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.6;text-align:left;max-width:82ch;
  text-wrap:pretty}
/* the hand-off from the demonstration to the guide. It sits UNDER the two-column grid rather than at the foot of
   the text column: the image column ends ~500px higher than the text, so a button in the left column deepens that
   hole, while a centred line across both closes the section. */
/* ⛔ NOT A BUTTON, AND NOT BEFORE THE EVIDENCE. As a centred CTA between the demonstration and the proof panel
   it read "this section is finished, move on" immediately before the strongest material on the page. It is now
   the first thing in the steps: see it → verify it → do it yourself. */
.handoff{margin:0 0 clamp(26px,3vw,40px);font-size:clamp(19px,1.9vw,24px);line-height:1.35;
  letter-spacing:-.02em;font-weight:600;color:var(--ink);text-wrap:balance}
.handoff span{display:block;font-size:clamp(15px,1.3vw,17px);font-weight:500;color:var(--ink-3);
  letter-spacing:0;margin-bottom:3px}
.shotcap b{color:var(--ink-2);font-weight:600}
.shotcap code{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}

/* ── "what you need" / "why start locally" panels ──────────────────────────────────────────────────────────── */
.need{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px;text-align:left;
  list-style:none;padding:0}
@media (max-width:900px){.need{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.need{grid-template-columns:minmax(0,1fr)}}
.need li{padding:15px 17px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);
  color:var(--ink-2);font-size:14.8px;line-height:1.5;display:flex;gap:11px;align-items:flex-start}
.need li::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:7px}
.need li b{color:var(--ink);font-weight:600}

/* the stack list — what you define vs what the platform provides */
.stackl{list-style:none;margin:30px 0 0;padding:0;text-align:left;display:grid;gap:1px;background:var(--rule);
  border-radius:14px;overflow:hidden}
.stackl li{background:var(--paper);padding:16px 20px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline}
.stackl b{color:var(--accent);font-weight:600;font-size:15.5px}
.stackl span{color:var(--ink-2);font-size:15px;line-height:1.55}
@media (max-width:640px){.stackl li{grid-template-columns:1fr;gap:5px}}

/* an expandable full transcript, so step 4 stays short in the flow */
details.more-out{margin-top:12px}
details.more-out summary{cursor:pointer;font-size:13.5px;color:var(--accent);font-weight:600;list-style:none}
details.more-out summary::-webkit-details-marker{display:none}
details.more-out summary::before{content:"▸ ";font-size:11px}
details.more-out[open] summary::before{content:"▾ "}
details.more-out .term{margin-top:12px}

@media (max-width:860px){ .qgrid{grid-template-columns:1fr} }

/* The samples table's first column is `white-space:nowrap` so a command never wraps mid-flag — which pushes the
   page 95px wider than a phone. Below 640px each row becomes two stacked blocks instead. Measured, not guessed:
   scrollWidth was 485 against a 390 viewport. */
@media (max-width:640px){
  .samp, .samp tbody, .samp tr, .samp td{display:block;width:auto}
  .samp tr{border-top:1px solid var(--rule);padding:13px 0}
  .samp tr:first-child{border-top:0}
  .samp td{border-top:0;padding:0}
  .samp td:first-child{white-space:normal;overflow-wrap:anywhere;width:auto;margin-bottom:5px}
}


/* ── /enterprise/ ───────────────────────────────────────────────────────────────────────────────────────────────
   The org-governance story: two developer populations, and a boundary an app cannot widen. Sourced from the org
   design work on the `osysharp-harness` tree and the zone model on `osysharp-aos`; written present tense per the
   owner (SITE-27) because it is what enterprise buys when enterprise is sold.
   ⛔ The two-column `.pops` table IS the argument — org declares, apps consume and can never widen. Keep those two
      columns visibly unequal in authority; do not "balance" them into a feature comparison. */
.pops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(34px,4vw,52px);text-align:left}
.pops article{padding:clamp(20px,2.2vw,28px);border-radius:clamp(16px,1.8vw,22px);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule)}
.pops article.gov{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 30%,transparent)}
.pops .who{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.pops article.gov .who{color:var(--accent)}
.pops h3{font-size:clamp(19px,1.6vw,23px);margin:0 0 12px;letter-spacing:-.02em}
.pops ul{margin:0;padding-left:19px;color:var(--ink-2);font-size:15.3px;line-height:1.6}
.pops li + li{margin-top:7px}
.pops li b{color:var(--ink);font-weight:600}
@media (max-width:760px){ .pops{grid-template-columns:1fr} }

/* the one-line consequence under it, set as a statement */
.consequence{max-width:54ch;margin:clamp(30px,3.4vw,44px) auto 0;font-size:clamp(19px,1.9vw,25px);line-height:1.4;
  letter-spacing:-.02em;color:var(--accent);text-wrap:balance;font-variation-settings:var(--display)}

/* capability rows on the paper ground (the plans page's .ekit is for the dark sheet) */
.caps2{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(34px,4vw,52px);text-align:left}
.caps2 article{padding:clamp(19px,2vw,25px);border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.caps2 h3{font-size:17.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0;color:var(--ink)}
.caps2 p{margin:9px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.caps2 .src{display:block;margin-top:11px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── /enterprise/, second pass ──────────────────────────────────────────────────────────────────────────────────
   ⛔ THE PAGE'S DIFFERENTIATION IS AN ARCHITECTURAL IDEA, NOT A FEATURE LIST. Everything below exists to show a
      RELATIONSHIP — organisation → policy → application → agent → data — because isolated cards cannot. If a
      future edit turns any of this back into a three-up grid of capabilities, it has lost the argument. */

/* a core product statement, set as a statement. `.claim` on paper, `.claim.on-ink` on a dark sheet. */
.claim{max-width:26ch;margin:clamp(26px,3vw,40px) auto;font-size:clamp(23px,2.7vw,38px);line-height:1.18;
  letter-spacing:-.03em;color:var(--accent);text-wrap:balance;font-weight:800;font-variation-settings:var(--display)}
.claim.on-ink{color:#5BBFE8}
.claim.wide{max-width:34ch}
.sheet > .in > .claim:last-child{margin-bottom:0}
/* four cards read as 2×2; auto-fit strands the fourth on its own row at 1440 */
.caps2.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── /cloud/ · the capability model ───────────────────────────────────────────────────────────────────────
   ⚑ THE GEOMETRY IS THE ARGUMENT. Eight capabilities AROUND one application says "your application, and
     everything the platform already puts around it"; the same nine cards in a flat list say "nine features".
     So the centre cell is load-bearing — if this ever degrades to a plain grid the section loses its point.
   ⚠ Below 900px three columns cannot hold it, so the centre goes FULL WIDTH AND FIRST (`order:-1`) rather than
     landing in an arbitrary middle cell, which reads as one more feature card.
   ⛔ THE CENTRE CELL IS `.hub`, NOT `.core` — `.core` is TAKEN, by an absolutely-positioned label at the top of
     this file, and reusing it dropped this card out of the grid and painted it over the hero's buttons. Same
     failure as the `.proof` collision on /start/: a generic class name on a hand-authored site is a landmine. */
.capm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,14px);
  max-width:1020px;margin:clamp(26px,3vw,40px) auto 0}
.capm article{padding:clamp(15px,1.6vw,19px);border-radius:14px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule);text-align:left}
.capm h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.capm p{margin:7px 0 0;font-size:13.8px;line-height:1.5;color:var(--ink-2)}
.capm .hub{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent);
  display:grid;place-content:center;text-align:center}
.capm .hub h3{font-size:clamp(17px,1.7vw,21px);letter-spacing:-.025em}
.capm .hub p{margin-top:6px;font-size:13.4px}
@media(max-width:900px){
  .capm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capm .hub{grid-column:1/-1;order:-1;padding:clamp(18px,2.2vw,24px)}
}
@media(max-width:560px){.capm{grid-template-columns:minmax(0,1fr)}}

/* ── /cloud/ · local → production, as four beats with arrows between them ─────────────────────────────────
   The arrows are list items so the row is one flex line at any width; they rotate rather than disappear when
   the row stacks, because a stacked list with no arrows stops reading as a sequence. */
.flow{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:0;
  list-style:none;max-width:1000px;margin:clamp(24px,2.8vw,36px) auto 0;padding:0}
.flow li{flex:1 1 0;min-width:150px;padding:15px 16px;border-radius:12px;text-align:center;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.flow b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.flow span{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.flow .arr{flex:0 0 36px;min-width:0;padding:0;background:none;box-shadow:none;
  display:grid;place-items:center;color:var(--ink-3);font-size:18px}
@media(max-width:760px){
  .flow{flex-direction:column;max-width:420px}
  .flow .arr{flex:0 0 28px;transform:rotate(90deg)}
}

/* ══ /use-cases/ ═══════════════════════════════════════════════════════════════════════════════════════════
   ⚑ THE UNIT OF READING IS THE EXAMPLE, NOT THE SHEET. Five of the six use cases share ONE section, separated
     by hairlines, so the page stays a page. Give each its own `.sheet` and the page doubles in height saying
     nothing more.

   .picker — six doors, one per example. Each card carries a KIND, a real application and a qualifier, because a
   card that cannot name an application is the "build dashboards faster" tile this page exists to avoid. */
.picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);
  max-width:1120px;margin:0 auto}
.pk{display:block;padding:clamp(18px,1.9vw,24px);border-radius:16px;background:var(--card);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .18s,transform .18s,background .18s}
.pk b{display:block;margin:10px 0 0;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  color:var(--ink)}
.pkk{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent)}
.pkd{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-3)}
@media(hover:hover){.pk:hover{background:var(--accent-wash);transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 38%,transparent)}}
.pk:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:940px){.picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.picker{grid-template-columns:minmax(0,1fr)}}

/* .flagrow — real source beside the shape it produces. The code is the left column on purpose: it is the
   evidence, and the diagram is the summary. */
.flagrow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,2vw,26px);
  align-items:start;margin:clamp(26px,3vw,38px) 0 0;text-align:left}
.flagrow .srcnote{margin-top:14px}
@media(max-width:980px){.flagrow{grid-template-columns:minmax(0,1fr)}}

/* .stack — the application ON TOP of the system it reads, with the model in between. Top-down, because that is
   the order the reader meets it in: the app is what they want, the lakehouse is what they already have. */
.stack{display:flex;flex-direction:column;align-items:stretch}
.stk{padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px);border-radius:14px;text-align:center}
.stk b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.stk span{display:block;margin-top:5px;font-size:13.4px;line-height:1.5}
.stk.top{background:var(--sheet-ink);color:var(--on-ink)}
.stk.top span{color:var(--on-ink-2)}
.stk.mid{background:var(--accent-wash);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
.stk.mid span{color:var(--ink-2)}
.stk.base{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.stk.base span{color:var(--ink-3)}
.stkline{display:block;width:1.5px;height:20px;margin:0 auto;background:var(--accent);opacity:.45}

/* .numl — the five beats. Two columns so five short steps do not become a tall ladder. */
.numl{list-style:none;counter-reset:n;margin:clamp(28px,3.2vw,42px) 0 0;padding:0;text-align:left;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.numl li{counter-increment:n;position:relative;padding-left:46px}
.numl li::before{content:counter(n);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;
  background:var(--accent);color:var(--card)}
.numl b{display:block;font-size:16px;letter-spacing:-.015em}
.numl span{display:block;margin-top:5px;font-size:14.4px;line-height:1.55;color:var(--ink-2)}
@media(max-width:760px){.numl{grid-template-columns:minmax(0,1fr)}}

/* ⛔ `.uc`, `.ucn`, `.uch2`, `.ucg`, `.ucw`, `.ucp` REMOVED 2026-09-22. Every use case is now its own SECTION
   shaped exactly like the flagship — chip, h2, lede, diagram, real source, five beats, takeaway — so the
   hairline-separated article wrapper and its two-card pair have no users left. Owner: all six should have
   "approximately the same depth, specificity and visual richness as the existing Databricks use case".
   `.ucsrc` and `.ucnote` survive because they still style a code block's top margin and the integrations note. */
.ucsrc{margin-top:clamp(14px,1.6vw,18px);text-align:left}
.ucnote{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 20px;
  margin:clamp(18px,2vw,24px) auto 0;padding:15px 22px;border-radius:12px;max-width:920px;text-align:center;
  background:var(--wash);font-size:14.6px;line-height:1.6;color:var(--ink-2)}
.ucmore{flex:none;font-weight:600;color:var(--accent);text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.ucmore:hover{border-bottom-color:var(--accent)}
.ucmore:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ucnote b{color:var(--ink)}
.ucnote code{font-family:var(--mono);font-size:13px;color:var(--ink)}


/* .sfacts — measured, so it is set like a measurement. ⛔ Every number here has a date and a source in the page
   comment; re-measure before deploy rather than carrying one forward. */
.sfacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(24px,2.8vw,34px) 0 0}
.sfacts span{padding:9px 16px;border-radius:999px;font-family:var(--mono);font-size:13px;
  color:var(--on-ink);background:color-mix(in srgb,var(--on-ink) 8%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-ink) 16%,transparent)}

/* The end of the flagship flow hands off to /cloud/ in one line — the only mention of deployment on this page. */
.handoff2{margin:clamp(28px,3vw,40px) auto 0;font-size:clamp(16px,1.35vw,18px);color:var(--ink-3)}
.handoff2 a{color:var(--accent);font-weight:600}

/* ══ /use-cases/ · THE VISUALS THAT REPLACED FOUR REPEATS OF THE SAME TWO CARDS ════════════════════════════
   ⛔ `.ucg` (What you write / What Osyrin supplies) IS A GOOD DEVICE AND IT SURVIVES IN EXACTLY ONE PLACE —
     the final "or just build the whole thing", where summarising the whole proposition is the point. It was
     rendered five times and the middle of the page read as documentation (owner, 2026-09-22). Everywhere else
     the DIAGRAM carries the distinction, and the prose is roughly a third shorter for it.
   ⚑ The design principle behind every one of these: YOU WRITE WHAT MAKES THE APPLICATION YOURS; OSYRIN SUPPLIES
     WHAT MAKES IT AN APPLICATION. It is not a headline anywhere — it is why the visuals are shaped as they are. */

/* .lc — an approval LIFECYCLE, with the real world attached. The rail alone would be a form; the row of
   conditions under it is what the headline ("survive the real world") actually promises. */
.lc{margin:clamp(22px,2.6vw,32px) 0 0}
.lcr{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;counter-reset:x}
.lcr li{flex:1 1 0;min-width:0;position:relative;padding:15px 14px;border-radius:12px;text-align:center;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.lcr li + li{margin-left:26px}
.lcr li + li::before{content:"";position:absolute;left:-22px;top:50%;width:18px;height:1.5px;
  background:var(--accent);opacity:.5}
.lcr b{display:block;font-size:15.5px;letter-spacing:-.015em;color:var(--ink)}
.lcr span{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.lcr li.on{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
.lcx{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.lcx .lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-right:4px}
.lcx li:not(.lab){padding:7px 13px;border-radius:999px;background:var(--wash);font-size:13.6px;color:var(--ink-2)}
@media(max-width:820px){
  .lcr{flex-direction:column}
  .lcr li + li{margin-left:0;margin-top:22px}
  .lcr li + li::before{left:50%;top:-18px;width:1.5px;height:14px}
}

/* .fan — the connector used wherever several things converge on one. Stems from each column centre, a rail
   across the OUTER centres, one stem down the middle. `--n` is the column count.
   ⚠ It replaced a three-sided bracket whose top edges floated in the gaps between cards and read as a stray
     rounded rectangle. And it is a <div>, not an <i>: the bracket was an <i>, inline by default, which collapsed
     its percentage margins and borders into a 2px sliver — invisible, and at page scale that looks like a design
     choice rather than a bug. Measured both times, not eyeballed (2026-09-22). */
.fan{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));height:28px}
.fan i{justify-self:center;width:1.5px;height:13px;background:var(--accent);opacity:.5}
.fan::before,.fan::after{content:"";position:absolute;background:var(--accent);opacity:.5}
.fan::before{left:calc(50% / var(--n));right:calc(50% / var(--n));top:13px;height:1.5px}
.fan::after{left:50%;top:13px;width:1.5px;height:15px;transform:translateX(-50%)}
@media(max-width:700px){
  .fan{grid-template-columns:minmax(0,1fr);height:22px}
  .fan i{height:11px}
  .fan i + i{display:none}
  .fan::before{display:none}
  .fan::after{top:11px;height:11px}
}

/* .per — three people, one application. The fan is the whole point: there is no second application behind it. */
.per{margin:clamp(22px,2.6vw,32px) 0 0}
.perrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.perrow article{padding:clamp(15px,1.7vw,20px);border-radius:14px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule);text-align:center}
.perrow b{display:block;margin-top:3px;font-size:16px;letter-spacing:-.015em}
/* The card reads identity FIRST, then what that identity is permitted to see. Two mono labels do the work a
   paragraph would otherwise have to: same application, different identity, different permitted view. */
.perid,.persees{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.perid{color:var(--accent)}
.persees{margin-top:13px;padding-top:11px;border-top:1px solid var(--rule);color:var(--ink-3)}
.perwhat{display:block;margin-top:5px;font-size:13.6px;line-height:1.5;color:var(--ink-2)}
.perapp{padding:clamp(16px,1.8vw,22px);border-radius:14px;text-align:center;
  background:var(--sheet-ink);color:var(--on-ink)}
.perapp b{display:block;font-size:17px;letter-spacing:-.02em}
.perapp span{display:block;margin-top:5px;font-size:13.8px;line-height:1.5;color:var(--on-ink-2)}
.perrule{margin:14px auto 0;padding-top:13px;max-width:none;
  border-top:1px solid color-mix(in srgb,var(--on-ink) 16%,transparent);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#5BBFE8}
@media(max-width:700px){.perrow{grid-template-columns:minmax(0,1fr)}}

/* .gov — THE SECURITY BOUNDARY IS DRAWN AROUND THE AGENT, and that is the argument in one picture: a governed
   principal INSIDE the application, not a privileged integration bolted onto it. Do not let the box become a
   background tint; the border is what says "surrounded". */
.gov{margin:clamp(22px,2.6vw,32px) 0 0}
.govtop,.govapp{padding:14px 18px;border-radius:12px;text-align:center}
.govtop{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.govapp{background:var(--sheet-ink);color:var(--on-ink)}
.govtop b,.govapp b{display:block;font-size:15.5px;letter-spacing:-.015em}
.govtop span,.govapp span{display:block;margin-top:4px;font-size:13.4px;line-height:1.5}
.govtop span{color:var(--ink-3)}
.govapp span{color:var(--on-ink-2)}
.govline{display:block;width:1.5px;height:18px;margin:0 auto;background:var(--accent);opacity:.5}
.govbox{position:relative;padding:clamp(24px,2.6vw,32px) clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px);
  border-radius:16px;background:var(--accent-wash);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 52%,transparent)}
.govlabel{position:absolute;top:-10px;left:50%;transform:translateX(-50%);margin:0;padding:3px 12px;
  border-radius:999px;background:var(--accent);color:var(--card);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.govrow{display:flex;align-items:stretch;gap:0}
.govrow > div{flex:1 1 0;min-width:0;padding:14px 12px;border-radius:11px;text-align:center;background:var(--card);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.govrow b{display:block;font-size:14.6px;letter-spacing:-.015em}
.govrow span{display:block;margin-top:4px;font-size:12.8px;line-height:1.45;color:var(--ink-3)}
.govrow .ar{flex:0 0 34px;display:grid;place-items:center;background:none;box-shadow:none;color:var(--accent);
  padding:0;font-size:17px}
@media(max-width:760px){
  .govrow{flex-direction:column}
  .govrow .ar{flex:0 0 26px;transform:rotate(90deg)}
}

/* The agent gets the page's only two-column use case: the boundary diagram earns its width, and the six lines
   of source beside it are the same claim in the language. Below 980px the source falls under the diagram. */
.agrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,26px);
  align-items:start;margin-top:clamp(22px,2.6vw,32px)}
/* ⚠ The source sits in HALF the page here, so a line that is comfortable full-width is not. The sweep fails any
   `.srcfile pre` whose scrollWidth exceeds its box at 1024+ — a code sample the reader has to drag sideways
   reads as unfinished, and `overflow:auto` hides that from everything except a measurement. */
@media(max-width:1180px){.agrow .srcfile pre{font-size:11.5px}}
.agrow .srcnote{margin-top:14px}
@media(max-width:980px){.agrow{grid-template-columns:minmax(0,1fr)}}

/* The one line on this page worth setting larger than its neighbours — it is the whole agent proposition. */
.big-claim{font-size:clamp(18px,1.8vw,24px);line-height:1.4;color:var(--ink);font-weight:600;
  letter-spacing:-.018em;max-width:44ch}

/* .conv — many homes, one model. The sources are a row because they are peers; the application's OWN data is
   one of them and is marked, because that is the claim: external and owned data are not two mechanisms. */
.conv{margin:clamp(22px,2.6vw,32px) 0 0}
.convrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.convrow article{padding:13px 12px;border-radius:12px;text-align:center;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule)}
.convrow b{display:block;font-size:14.6px;letter-spacing:-.015em}
.convrow span{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.convrow article.own{background:var(--accent-wash);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
.convrow article.own span{color:var(--accent)}
@media(max-width:700px){.convrow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ══ /use-cases/ · the components that brought the other five up to the Databricks section's depth ═════════
   ⚑ EVERY USE CASE IS NOW A SELF-CONTAINED PRODUCT STORY of the same shape: problem → diagram → real Osy# →
     a five-step sequence → a takeaway. The DIAGRAM is what varies (process flow · permitted views · capability
     boundary · convergence · anatomy); the rhythm deliberately does not, because the rhythm is what lets a
     visitor land on any one of them and know where to look. */

/* .chain — Identity → Roles → Security rules → Data. The arrows carry the argument: what a principal sees is
   decided upstream of any page, which is why a portal is not three front ends. */
.chain{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;margin:clamp(18px,2vw,24px) 0 0}
.chain li{list-style:none;flex:1 1 0;min-width:130px;padding:12px 14px;border-radius:11px;text-align:center;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);font-size:14.2px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);display:grid;place-items:center}
.chain .ar{flex:0 0 30px;min-width:0;padding:0;background:none;box-shadow:none;color:var(--accent);font-size:16px}
.chain li.end{background:var(--accent-wash);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
@media(max-width:820px){.chain{flex-direction:column}.chain .ar{flex:0 0 24px;transform:rotate(90deg)}}

/* .mayno — what the agent MAY do beside what it MAY NOT. Two columns because the contrast IS the point; a
   single list of capabilities would say nothing a normal integration could not also claim. */
.mayno{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  margin:clamp(20px,2.2vw,28px) 0 0}
.mayno > div{padding:clamp(18px,1.9vw,24px);border-radius:16px;text-align:left}
.mayno .may{background:var(--accent-wash);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 30%,transparent)}
.mayno .maynot{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.mayno h4{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mayno .may h4{color:var(--accent)}
.mayno .maynot h4{color:var(--ink-3)}
.mayno ul{margin:12px 0 0;padding:0;list-style:none}
.mayno li{position:relative;padding-left:22px;margin-top:8px;font-size:14.8px;line-height:1.5;color:var(--ink-2)}
.mayno li:first-child{margin-top:0}
.mayno .may li::before{content:"✓";position:absolute;left:1px;top:0;color:var(--accent);font-size:13px}
.mayno .maynot li::before{content:"✕";position:absolute;left:1px;top:0;color:var(--ink-3);font-size:12px}
@media(max-width:820px){.mayno{grid-template-columns:minmax(0,1fr)}}

/* .tkw — the takeaway that closes a use case. One line, set larger than body, never a headline. */
.tkw{margin:clamp(26px,3vw,38px) auto 0;max-width:46ch;font-size:clamp(17px,1.6vw,21px);line-height:1.4;
  font-weight:600;letter-spacing:-.018em;color:var(--ink);text-align:center}
.tkw.on-ink{color:var(--on-ink)}
.sheet.tint .tkw,.sheet.ink .tkw{max-width:48ch}

/* .srcs2 — the four labelled sources of the procurement example, stated as data rather than as connectors. */
.srcs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,14px);
  margin:clamp(18px,2vw,24px) 0 0}
.srcs2 div{padding:14px 16px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);
  text-align:left}
.srcs2 b{display:block;font-size:14.6px;letter-spacing:-.015em}
.srcs2 span{display:block;margin-top:4px;font-size:13.4px;line-height:1.5;color:var(--ink-3)}
@media(max-width:620px){.srcs2{grid-template-columns:minmax(0,1fr)}}

/* .sfl — what SpendFlow actually contains. Pills, because it is an inventory and reads faster as one. */
.sfl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(22px,2.4vw,30px) 0 0;padding:0;
  list-style:none;max-width:860px;margin-inline:auto}
.sfl li{padding:8px 14px;border-radius:999px;font-size:13.6px;color:var(--on-ink-2);
  background:color-mix(in srgb,var(--on-ink) 6%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-ink) 13%,transparent)}

/* ══ /integrations/ ═══════════════════════════════════════════════════════════════════════════════════════
   ⚑ THE PAGE'S ONE ARGUMENT: an external system becomes a GOVERNED CAPABILITY of an application, not an API
     island beside it. Every diagram here is a different view of that, and they are ordered so the enterprise
     story is REVEALED rather than led with — connect a system → use it in the model → same security → the
     organisation governs it → every application inherits → and so does an agent.
   ⛔ NOT AN iPaaS AND NOT A LOGO WALL. Osyrin is not moving data between systems, and "we have lots of
     connectors" is not the claim. If a section could be retitled "our integrations" it is the wrong section.

   .fan.out — the SAME connector read the other way: one thing fanning out to many. A mirror rather than a
   second component, because the geometry is identical and two copies would drift. */
.fan.out{transform:scaleY(-1)}
.fan.ex i,.fan.ex::before,.fan.ex::after{opacity:1}
.fan.out.ex::after{left:calc(50% / var(--n));transform:none}
.stkline.ex{opacity:1;width:2px}
/* ══ .entmark — the tier callout, top right of a section whose capability IS the enterprise layer ══════════
   ⛔ IT REPLACES A TINTED BAND ACROSS THOSE SECTIONS (SITE-92, deleted the same week it landed). Owner,
      2026-09-22: "I dont like that it's one flat color even if you change it to blueberry-milk, it also doesnt
      say enterprise at all." Both halves are the lesson. One ground over five sections reads as a wash rather
      than a boundary — the eye stops seeing an edge it has been looking at for 5,000px — and NO colour can say
      "enterprise": a tier is a fact a reader has to be TOLD, not a hue they are expected to decode.
   ⚠ IT IS NOT ON EVERY SECTION OF THE ENTERPRISE STORY, AND THAT IS THE POINT — see the page's own comment.
      A badge on something every plan already has is a false claim, and /plans/ makes the opposite promise in
      writing ("Security ... not features bought per plan").
   ⚑ ALIGNMENT: positioned against the SECTION, so the badge lands on the same vertical line whether the block
      is a full-bleed `.sheet` (inset by --gutter) or a bare `section` (full width) — both centre a 1180px `.in`
      inside themselves, so `50% - page/2 + 32px` resolves to the same page coordinate for both. Measured. */
section:has(> .in > .entmark){position:relative}
.entmark{position:absolute;top:0;right:max(var(--gutter),calc(50% - var(--page) / 2 + 32px));
  margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 11px;border-radius:999px;
  background:var(--accent-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  white-space:nowrap}
.entmark::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--accent)}
/* a .sheet holds its content --air below its own top edge; the badge follows the chip, not the card corner */
.sheet .entmark{top:var(--air)}
/* under ~820px there is no right margin to sit in — it flows above the chip instead, where `.in` centres it */
@media(max-width:820px){
  /* ⚠ `display:flex` + fit-content, NOT just position:static — the badge and the `.chip` after it are BOTH
     inline-flex, so a static badge shares the chip's line instead of sitting above it. Measured at 390. */
  .entmark{position:static;display:flex;width:fit-content;margin:0 auto 16px}
  .sheet .entmark{top:auto}
}

.expath{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.expath::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* .intg — the library. Each card carries a KIND, because the systems genuinely differ: some expose queryable
   entities, some storage, some capabilities. Claiming one shape for all of them would be the first thing an
   enterprise reader disbelieves. */
.cat{margin:clamp(26px,3vw,38px) 0 0;padding:0;list-style:none;border-radius:16px;overflow:hidden;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.cat li + li{border-top:1px solid var(--rule)}
.cat a{display:grid;grid-template-columns:172px minmax(0,1fr) 208px 20px;align-items:center;
  gap:clamp(12px,1.6vw,24px);padding:clamp(15px,1.7vw,19px) clamp(16px,1.9vw,22px);
  text-align:left;text-decoration:none;transition:background .16s}
@media(hover:hover){.cat a:hover{background:var(--accent-wash)}}
.cat a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cat li.build{border-top:1.5px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.cat li.build a{background:color-mix(in srgb,var(--accent-wash) 62%,var(--card))}
@media(hover:hover){.cat li.build a:hover{background:var(--accent-wash)}}
.cat .build .catn{color:var(--accent)}
.cat .build .catk i{background:var(--card);color:var(--accent)}
.catn{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.catd{font-size:14.4px;line-height:1.5;color:var(--ink-2)}
.catk{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.catk i{font-style:normal;padding:4px 10px;border-radius:999px;background:var(--wash);white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.catgo{justify-self:end;font-size:16px;line-height:1;color:var(--rule-2);transition:color .16s,transform .16s}
@media(hover:hover){.cat a:hover .catgo{color:var(--accent);transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.cat a:hover .catgo{transform:none}}
@media(max-width:900px){
  .cat a{grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"n go" "d d" "k k";row-gap:9px}
  .catn{grid-area:n}.catd{grid-area:d}.catk{grid-area:k;justify-content:flex-start}
  .catgo{grid-area:go;align-self:center}
}
.intg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);
  margin:clamp(26px,3vw,38px) 0 0;text-align:left}
.intg article{display:flex;flex-direction:column;padding:clamp(17px,1.8vw,22px);border-radius:16px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.intg article.full{grid-column:1/-1}
.intg h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.intg p:not(.kind){margin:8px 0 0;font-size:14.4px;line-height:1.55;color:var(--ink-2)}
.intg .kind{align-self:flex-start;margin:14px 0 0;margin-top:auto;padding:5px 11px;border-radius:999px;background:var(--accent-wash);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
@media(max-width:940px){.intg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.intg{grid-template-columns:minmax(0,1fr)}}

/* .earch — the enterprise spine. Identity flows down, policy flows down, and data access flows THROUGH the
   governed boundary: three statements the reader should get from the shape before reading a word. The governed
   band is the only accent-bordered element, because it is the boundary everything else passes through. */
.earch{max-width:860px;margin:clamp(26px,3vw,38px) auto 0}
.ecap{margin:0 0 14px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.eb{padding:14px 18px;border-radius:12px;text-align:center;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule)}
.eb b{display:block;font-size:15.5px;letter-spacing:-.015em;color:var(--ink)}
.eb span{display:block;margin-top:4px;font-size:13.2px;line-height:1.45;color:var(--ink-3)}
.eb.gov{background:var(--accent-wash);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent)}
.eb.gov b{color:var(--ink)}
.eb.gov span{color:var(--ink-2)}
.eb.sys{background:var(--sheet-ink);color:var(--on-ink)}
.eb.sys b{color:var(--on-ink)}
.eb.sys span{color:var(--on-ink-2)}
.eapps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.eapps.caps article.ex{background:var(--accent-wash);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 38%,transparent)}
.eapps.caps article.ex span{color:var(--accent)}
.eapps article{padding:12px 10px;border-radius:11px;text-align:center;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule)}
.eapps b{display:block;font-size:14.4px;letter-spacing:-.015em}
.eapps span{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.einh{display:flex;align-items:center;gap:12px;margin:2px 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.einh::before,.einh::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.45}
@media(max-width:620px){.eapps{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.einh{white-space:normal;text-align:center;justify-content:center}
  .einh::before,.einh::after{display:none}}

/* .funnel — five callers, one enforcement point. The list on the left is the argument: the CALLER does not
   decide whether the policy applies, so all five arrive at the same box. */
.funnel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,.8fr);
  gap:clamp(12px,1.6vw,22px);align-items:center;margin:clamp(24px,2.8vw,34px) 0 0;text-align:left}
.fcallers{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.fcallers li{position:relative;padding:10px 14px;border-radius:10px;background:var(--card);font-size:14.4px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.fcallers li::after,.fbox::after{content:"";position:absolute;left:100%;top:50%;
  width:clamp(11px,1.5vw,21px);height:1.5px;background:var(--accent);opacity:.5}
.fbox{position:relative;padding:clamp(28px,3vw,36px) clamp(16px,1.8vw,22px) clamp(20px,2.2vw,26px);
  border-radius:16px;text-align:center;background:var(--sheet-ink);color:var(--on-ink)}
.fbox b{display:block;font-size:17px;letter-spacing:-.02em;color:var(--on-ink)}
.fbox span{display:block;margin-top:5px;font-size:13.4px;line-height:1.5;color:var(--on-ink-2)}
.fbox .govlabel{top:-10px}
.fsys{padding:16px;border-radius:12px;text-align:center;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule)}
.fsys b{display:block;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.fsys span{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
@media(max-width:860px){
  .funnel{grid-template-columns:minmax(0,1fr)}
  .fcallers li::after,.fbox::after{display:none}
  .fcallers{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
}

/* .twoway — conventional beside Osyrin. Not a scare diagram: the left column is what most teams have and it is
   drawn plainly. What differs is where enforcement SITS, and the two chains show that and nothing else. */
.twoway{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);
  margin:clamp(24px,2.8vw,34px) 0 0}
.twoway > div{display:flex;flex-direction:column;padding:clamp(18px,2vw,24px);border-radius:16px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.twoway .tnote{margin-top:auto;padding-top:12px}
.twoway > div.osy{background:var(--accent-wash);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
.twoway h4{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.twoway .osy h4{color:var(--accent)}
.tchain{margin:0;padding:0;list-style:none;display:grid;gap:0}
.tchain li{padding:10px 12px;border-radius:10px;text-align:center;font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.tchain li.sys{background:var(--sheet-ink);color:var(--on-ink)}
.tchain i{display:block;width:1.5px;height:11px;margin:0 auto;background:var(--accent);opacity:.5}
.tnote{margin:12px 0 0;font-size:13.4px;line-height:1.5;color:var(--ink-3);text-align:center}
@media(max-width:760px){.twoway{grid-template-columns:minmax(0,1fr)}}

/* .appframe — the running application, in a frame that says "this is a screen, not a diagram".
   ⏳ IT HOLDS A PLACEHOLDER TODAY and that is deliberate: no SpendFlow screenshot exists anywhere in the repo
     (checked every branch, 2026-09-22). A placeholder that SAYS it is one is honest; a stand-in screenshot of a
     different application would not be. Drop the image in and delete `.afsoon`. */
.appframe{margin:clamp(26px,3vw,38px) auto 0;max-width:1180px;border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,var(--on-ink) 7%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-ink) 16%,transparent)}
.afbar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--on-ink) 14%,transparent)}
.afbar i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--on-ink) 26%,transparent)}
.afbar span{margin-left:10px;font-family:var(--mono);font-size:11.5px;color:var(--on-ink-3)}
.afbody img{display:block;width:100%;height:auto}
.afsoon{display:grid;place-items:center;min-height:clamp(260px,26vw,380px);padding:28px;text-align:center}
.afsoon p{margin:0;max-width:44ch;font-size:14.5px;line-height:1.6;color:var(--on-ink-3)}
.afsoon p b{display:block;margin-bottom:6px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-ink-2)}

/* ⛔ `.owed` REMOVED 2026-09-22. It rendered "Open application · SOON", "See source · SOON" and "Watch it being
   built · SOON" under the proof section. Owner: "Disabled future controls make an otherwise finished page look
   unfinished… Add those actions back individually when the corresponding asset actually exists. Do not replace
   them with 'Coming soon' copy." So: a real link when there is a real thing behind it, and nothing until then. */

@media (max-width:720px){ .caps2.two{grid-template-columns:1fr} }

/* ── the security flow: one column, because it IS a sequence and a row of cards reads as alternatives ───────── */
.secflow{max-width:560px;margin:clamp(34px,4vw,52px) auto 0;text-align:left}
.secflow .sf{position:relative;padding:17px 20px;border-radius:14px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule)}
.secflow .sf + .sf{margin-top:34px}
/* the connector, drawn in the gap rather than as a character so it scales with the gap */
.secflow .sf + .sf::before{content:"";position:absolute;left:50%;top:-34px;width:1.5px;height:34px;
  background:linear-gradient(var(--rule-2),var(--accent))}
.secflow .sf + .sf::after{content:"";position:absolute;left:50%;top:-11px;width:7px;height:7px;
  transform:translateX(-50%) rotate(45deg);border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent)}
.secflow .k{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.secflow .d{margin:6px 0 0;font-size:14.8px;line-height:1.55;color:var(--ink-2)}
.secflow .sf.gate{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
.secflow .sf.gate .k{color:var(--accent)}
.secflow .sf.end{background:var(--sheet-ink);box-shadow:none}
.secflow .sf.end .k{color:var(--on-ink)}
.secflow .sf.end .d{color:var(--on-ink-2)}
/* what it is NOT — the distinction the whole section turns on */
.notthis{max-width:560px;margin:22px auto 0;padding:14px 18px;border-radius:12px;text-align:left;
  border:1px dashed var(--rule-2);color:var(--ink-3);font-size:14.5px;line-height:1.55}
.notthis b{color:var(--ink-2)}

/* ── the quiet alternative: an aside with an action, narrower than the row it follows ───────────────────────── */
.altbox{max-width:900px;margin:clamp(26px,3vw,38px) auto 0;padding:clamp(18px,2vw,24px);border-radius:14px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);text-align:left}
.alth{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.altbox p{margin:8px 0 0;font-size:14.8px;line-height:1.6;color:var(--ink-2)}
.altbox p b{color:var(--ink);font-weight:600}
.altcta{margin-top:14px !important}
.altcta .btn{font-size:14px;padding:9px 16px}

/* ── operations, grouped into four rather than listed as twelve ─────────────────────────────────────────────── */
.opsg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border-radius:16px;overflow:hidden;margin-top:clamp(32px,3.8vw,48px);text-align:left}
.opsg article{background:var(--paper);padding:clamp(20px,2.2vw,28px)}
.opsg h3{margin:0;font-size:12px;font-family:var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.opsg p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:700px){ .opsg{grid-template-columns:1fr} }
.opsg.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.opsg article.on{background:var(--accent-wash)}
.opsg article.on h3{color:var(--accent)}
.opsg b{color:var(--ink);font-weight:600}
@media (max-width:820px){ .opsg.three{grid-template-columns:1fr} }

/* ── enterprise integrations ────────────────────────────────────────────────────────────────────────────────────
   The argument is OWNERSHIP, not breadth — so the named kits are a compact strip and the reasoning carries the
   section. A future edit that grows this into a logo wall has swapped the argument for a catalogue. */
.kitg{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--rule);
  border-radius:16px;overflow:hidden;margin-top:clamp(32px,3.8vw,48px);text-align:left}
.kitg article{background:var(--paper);padding:clamp(18px,2vw,24px);display:flex;flex-direction:column}
.kitg h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.kitg p{margin:8px 0 0;font-size:14.6px;line-height:1.55;color:var(--ink-2)}
.kitg .pkg{display:block;margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--ink-3)}

/* ── standalone vs organisation ─────────────────────────────────────────────────────────────────────────────────
   Two cards, one accented, because the point is a COMPARISON and a plain pair reads as two unrelated features.
   The accented side is what the enterprise licence buys; the plain side must never look diminished, because the
   whole argument is that it is not. */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(34px,4vw,52px);text-align:left}
.vs article{padding:clamp(20px,2.2vw,28px);border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.vs article.org{background:var(--accent-wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent)}
.vs h3{margin:0;font-size:12px;font-family:var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.vs article.org h3{color:var(--accent)}
.vs .t{margin:11px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.vs p:not(.t){margin:9px 0 0;font-size:15.2px;line-height:1.6;color:var(--ink-2)}
@media (max-width:720px){ .vs{grid-template-columns:1fr} }

/* ── "why run your enterprise on Osyrin" — three arguments, as rows ──────────────────────────────────────────────
   ⛔ ROWS, NOT A THREE-UP. These are three steps of one argument (software got cheap → the estate needs a catalogue
      → an agent inside the catalogue must still be bound), and a card grid would read as three unrelated features
      — which is exactly the shape this page exists to avoid. Each row gets room for a real paragraph. */
.whyg{margin-top:clamp(40px,5vw,64px);text-align:left;display:grid;gap:1px;background:var(--rule);
  border-radius:18px;overflow:hidden}
/* numeral · claim · argument — three columns, so the row uses the width the page gives it rather than leaving a
   third of every row empty. `display:contents` lifts the wrapper's children into the row's own grid. */
.whyg article{background:var(--paper);padding:clamp(24px,2.8vw,38px);
  display:grid;grid-template-columns:auto minmax(0,23ch) minmax(0,1fr);gap:clamp(16px,2.2vw,34px);align-items:start}
.whyg article > div{display:contents}
.whyg .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);padding-top:7px}
.whyg h3{margin:0;font-size:clamp(20px,1.85vw,25px);font-weight:800;letter-spacing:-.03em;line-height:1.18;
  color:var(--ink);text-wrap:balance;font-variation-settings:var(--display)}
.whyg p{margin:0;font-size:16.2px;line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.whyg p b{color:var(--ink)}
@media (max-width:860px){ .whyg article{grid-template-columns:auto minmax(0,1fr)}
  .whyg h3{grid-column:2} .whyg p{grid-column:2;margin-top:12px} }
@media (max-width:620px){ .whyg article{grid-template-columns:1fr;gap:10px}
  .whyg .n{padding-top:0} .whyg h3,.whyg p{grid-column:1} }

/* ── /enterprise/, third pass: outcome → capability → proof ──────────────────────────────────────────────────────
   ⛔ THE PAGE'S ORDER IS THE ARGUMENT. Every section states the enterprise OUTCOME first, the platform capability
      second, and the mechanism last. A future edit that promotes a mechanism back to a headline has undone the
      revision — the old page led with "the boundary is compiled into the application", which is true, load-bearing,
      and answers a question the reader has not asked yet. */

/* the hero's capability strip — what this page is ABOUT, readable in one second */
.capstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(30px,3.4vw,44px) auto 0;max-width:72ch}
.capstrip span{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:7px 13px;border-radius:20px;color:var(--ink-2);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}

/* what the platform team controls — a list that reads as a boundary, not as six features */
.ctrl{margin-top:clamp(30px,3.4vw,44px);text-align:left;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);border-radius:16px;overflow:hidden}
.ctrl div{background:var(--paper);padding:clamp(17px,1.9vw,23px) clamp(19px,2.1vw,26px)}
.tint .ctrl div{background:var(--card)}
.ctrl b{display:block;font-size:16.5px;letter-spacing:-.01em;color:var(--ink)}
.ctrl span{display:block;margin-top:5px;font-size:14.8px;line-height:1.5;color:var(--ink-2)}
@media (max-width:700px){ .ctrl{grid-template-columns:1fr} }

/* the systems, named — set in type rather than as logos, because we have no right to anyone's mark */
.srcs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;
  margin:clamp(26px,3vw,38px) auto 0;max-width:70ch}
.srcs span{font-size:clamp(17px,1.7vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ink .srcs span{color:var(--on-ink)}
.srcs .sep{color:var(--rule-2);font-weight:400}
.ink .srcs .sep{color:var(--on-ink-3)}

/* a mechanism, demoted to proof: quieter than the claim above it, and explicitly labelled */
.proof{max-width:62ch;margin:clamp(24px,2.8vw,36px) auto 0;padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--rule);text-align:left;font-size:15.2px;line-height:1.6;color:var(--ink-2)}
.ink .proof{border-top-color:color-mix(in srgb,var(--on-ink) 16%,transparent);color:var(--on-ink-2)}
.proof .lbl{display:block;margin-bottom:9px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.ink .proof .lbl{color:var(--on-ink-3)}
.proof b{color:var(--ink)}
.ink .proof b{color:var(--on-ink)}

/* ── /#how, third movement: the one model REACHES OUT ────────────────────────────────────────────────────────────
   ⭐ The converge graphic said "many pieces become one model" and stopped there, which leaves the strongest thing
      Osyrin has as a footnote on another page. Brief: "not 'we integrate with things', but ONE APPLICATION MODEL
      THAT REACHES ACROSS YOUR EXISTING DATA" — and it runs BOTH WAYS, which is what makes it not a logo wall.
   ⛔ So the two-way arrow is not decoration. If a future edit drops it, the section is back to claiming a hook. */
.reach{margin-top:clamp(34px,4vw,54px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--rule)}
.both .ln{position:relative;height:1.5px;background:linear-gradient(90deg,var(--accent),var(--rule-2),var(--accent))}
.both .ln::before,.both .ln::after{content:"";position:absolute;top:-3px;width:7px;height:7px;
  transform:rotate(45deg);border-color:var(--accent)}
.both .ln::before{left:0;border-left:1.5px solid;border-bottom:1.5px solid}
.both .ln::after{right:0;border-right:1.5px solid;border-top:1.5px solid}