/* Always Allow shared system. Extracted 2026-08-26 from the boards canvas
   (the homepage source of truth, FACTS Part D rulings 28-38). Other pages
   import this file; homepage-only moments (the animated hero, the glass band)
   live in homepage.css, not here.

   Tokens are the settled system: canvas near-white, bone on surfaces never the
   floor, blue-slate ink, Petrol accent as fills and markers never text, all
   Inter, and the four-part depth ladder (rest, raised, float). */

/* This file has to stand on its own. The homepage also loads a large inline
   style block lifted from a frozen review page, and several things this
   sheet appears to own were in fact only ever supplied by that block, so a
   page loading system.css alone rendered differently. The four below were
   found that way on 2026-08-26 and are now declared here. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* Exactly `*`, matching the frozen block, not the broader `*, *::before,
   *::after`. The wider form is the better rule in the abstract, but it
   changes pseudo-element sizing on the locked homepage: it took 3px off the
   dropdown caret, which is drawn from two borders on a ::after. Matching the
   existing behaviour keeps every page identical to the approved one. */
* { box-sizing: border-box; }

/* The full-viewport wash layers are centred on the content column, so each
   overflows by about half a scrollbar width. The homepage never showed it
   because the frozen block clips the document; a page without that block
   scrolls sideways immediately. */
html, body { overflow-x: hidden; }

:root {
  --canvas: #FEFDFB;
  --bone: #F0ECE6;
  --bone-deep: #E7E0D4;
  --hairline: #E3DDD2;
  --ink: #344650;
  --muted: #427294;
  --accent: #1D5372;
  --chip-gold: #F3E5C2;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --shadow-rest: 0 1px 2px rgba(28,45,58,0.06), 0 2px 8px rgba(28,45,58,0.05);
  --shadow-raised: 0 2px 4px rgba(28,45,58,0.07), 0 10px 24px rgba(28,45,58,0.09);
  --shadow-float: 0 4px 8px rgba(28,45,58,0.08), 0 24px 48px rgba(28,45,58,0.14);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }

.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
section { margin-top: 104px; }
h2 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.018em; line-height: 1.15; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.lede { margin: 12px 0 0; font-size: 17px; color: var(--muted); max-width: 62ch; text-wrap: balance; }

/* Buttons. The primary is the accent as a fill, never as text. */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 11px 20px; border-radius: 8px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--bone-deep); background: var(--bone); color: var(--ink);
  box-shadow: 0 1px 0 rgba(28,45,58,0.05);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.btn.on-bone { background: #FFFFFF; }
.btn.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 84%, white),
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 86%, black));
  border-color: color-mix(in srgb, var(--accent) 86%, black);
  color: #FEFDFB;
  box-shadow: 0 1px 2px rgba(28,45,58,0.2), 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised); border-bottom-width: 1px; }
.btn.small { font-size: 13.5px; padding: 8px 15px; }

/* Navigation: the brand keycap plus flat links, straight on the page. */
.aa-nav { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; gap: 24px; }
/* The lockup grew 4% on her ask 2026-08-26, so it carries more of the bar
   against the Join a workshop button. One number does it: the keycap sizes
   itself in em, so the mark and the words scale together. */
.brand { display: flex; align-items: center; gap: 12px; font-size: 17.7px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
/* The keycap, moved here from the homepage 2026-08-26 (ruling 63) so it
   travels to every page with its shimmer and its Easter egg. Its size and
   colour used to come from two leftover rules in the generated homepage's own
   inline block, which is why a page built on this file alone got a smaller
   ink-coloured key. Written at .brand .keycap so this file wins wherever
   those leftovers still load. */
.brand span.keycap {
  position: relative;
  width: 2.876em; height: 2.026em; border-radius: 7px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bone) 100%);
  border: 1px solid rgba(52,70,80,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(28,45,58,0.06);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--sans); font-size: 0.9em; font-weight: 600; color: var(--accent);
  cursor: pointer; top: 0; transition: top 120ms ease;
}
/* The key's side wall, a real layer rather than a border (her note: the
   even outline showed no perspective): wider than the face, extending
   below it, Petrol glass at its top fading into the ink base. */
.brand span.keycap::before {
  content: ""; position: absolute; z-index: -1;
  left: -2px; right: -2px; top: 38%; bottom: -5px;
  border-radius: 9px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 55%, white) 0%,
    color-mix(in srgb, var(--accent) 65%, var(--ink)) 35%,
    var(--ink) 75%);
  box-shadow: 0 5px 9px rgba(28,45,58,0.3);
  transition: bottom 120ms ease, left 120ms ease, right 120ms ease;
}
/* The discovery shimmer, her round-twenty ask: a sheen sweeps the key face
   and re-shines about every two seconds, so the eye finds the egg. */
.brand span.keycap::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 32%, rgba(255,255,255,0.85) 44%,
    color-mix(in srgb, var(--accent) 20%, transparent) 52%, transparent 64%);
  background-size: 230% 100%; background-position: 180% 0;
  animation: keyShine 2.2s ease-in-out infinite;
}
@keyframes keyShine {
  0% { background-position: 180% 0; }
  38%, 100% { background-position: -80% 0; }
}
/* The press moves the key with top, never transform: a transform makes the
   keycap a stacking context, which lifts the wall in front of the face. */
.brand:hover span.keycap { top: 2px; }
.brand:hover span.keycap::before { bottom: -3px; left: -1px; right: -1px; }
.brand { position: relative; }
/* The hint and the three cursor states, the live one popped forward. */
.brand span.egg-hint {
  position: absolute; top: calc(100% + 10px); left: 0; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.9em; font-weight: 400;
  letter-spacing: 0.02em; color: var(--accent);
  opacity: 0; translate: 0 -3px; pointer-events: none;
  transition: opacity 200ms ease 250ms, translate 200ms ease 250ms;
}
.egg-words { font-size: 0.9em; }
.egg-cycle { display: inline-flex; align-items: center; gap: 6px; }
.egg-c {
  display: grid; place-items: center; width: 14px; height: 14px;
  opacity: 0.4; color: var(--muted);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.egg-c img, .egg-c svg { width: 11px; height: 11px; object-fit: contain; display: block; }
.egg-c.egg-on { opacity: 1; color: var(--ink); transform: scale(1.3); }
.brand:hover span.egg-hint { opacity: 1; translate: 0 0; }
.aa-foot .brand span.egg-hint { top: auto; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
/* The cursor states themselves. The Claude mark spins through sixteen
   pre-rotated frames swapped on a CSS variable; the static png is the
   fallback and the reduced-motion state. */
html.cursor-claude, html.cursor-claude * { cursor: var(--egg-cursor, url(/assets/cursor-claude.png) 4 4, auto) !important; }
html.cursor-openai, html.cursor-openai * { cursor: url(/assets/cursor-openai.svg) 4 4, auto !important; }
@media (prefers-reduced-motion: reduce) {
  .brand span.keycap::after { animation: none; }
  .brand span.keycap, .brand span.egg-hint { transition: none; }
}
.navlinks { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; }
.navlinks a { color: var(--ink); }
.navlinks a:not(.btn):hover { border-bottom: 1.5px solid var(--ink); }
/* The Work together dropdown (2026-08-26): a native details element, no
   marker, a caret drawn in ink, and a floating glass panel in the depth
   ladder. The engagement routes live here; the panel links override the
   flat-link hover underline. */
.nav-menu { position: relative; }
.nav-menu summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  color: var(--ink);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg); transition: transform 160ms ease;
}
.nav-menu[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
/* Her note 2026-08-26: the rounded card read as a box sitting on the page.
   It takes the returning nav bar's treatment instead, so it reads as the
   background going soft rather than a panel arriving.

   The bar can be a flat tint because it spans the viewport and has no side
   edges to show. A panel does, and a straight edge on a tone region is the
   thing ruling 38 forbids, so the tint and its blur live on a masked layer
   that feathers out in every direction. The layer sits behind the links
   rather than around them: masking the panel itself would fade the words
   at the edges too. */
/* backdrop-filter is reset explicitly. The frozen review page's own rule sets
   blur(18px) on this element, and dropping the background without dropping
   the filter left the panel blurring its own rectangle: that unfeathered box,
   clipped to the border box, was the straight edge in her screenshot, not the
   soft layer below. */
.nav-menu-panel {
  position: absolute; top: calc(100% + 6px); left: -20px; z-index: 50;
  min-width: 210px; display: grid; gap: 2px; padding: 14px 20px 18px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* The soft layer hangs off the menu, not off the panel. Measured 2026-08-26:
   as the panel's own ::before it was clipped to the panel's border box, so
   the blur stopped dead on a straight vertical line at the panel edge, which
   is the thing being removed. Out here nothing clips it, and it is wider and
   taller than the panel so the feather completes in the spare room.

   The ellipse also has to reach transparent INSIDE the layer: a mask sized
   past its own box stays opaque to the edge and draws the same hard line. */
.nav-menu[open]::after {
  content: ""; position: absolute; z-index: 49; pointer-events: none;
  left: -74px; width: 350px; top: calc(100% - 14px); height: 220px;
  background: color-mix(in srgb, var(--canvas) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15);
  /* The vertical radius must be at most half the height, because the centre
     sits at 48% and the transparent stop is at 96% of the radius: anything
     larger puts that stop outside the box and the layer terminates on a
     straight horizontal line instead of fading. Measured at 56%: the mask
     was still 21% opaque at the top edge and 6% at the bottom, so the blur
     ended on a visible line above the panel. At 48% both edges reach 0. */
  -webkit-mask-image: radial-gradient(52% 48% at 50% 48%, black 46%, transparent 96%);
  mask-image: radial-gradient(52% 48% at 50% 48%, black 46%, transparent 96%);
}
/* Written long enough to beat the flat-link hover, which is .navlinks
   a:not(.btn):hover and was still drawing a heavy underline under every
   panel row, and the old rounded-card hover, which was still filling the
   row with bone. A panel row moves in colour only. */
/* The markup this expects: .navlinks > details.nav-menu > .nav-menu-panel > a.
   Written that long deliberately, to beat the flat-link hover. font-size and
   text-stroke are declared rather than inherited because the frozen block
   supplies both on the homepage and nowhere else, so a page on this file
   alone rendered the rows a quarter larger and a half-weight lighter. */
.navlinks .nav-menu-panel a:not(.btn) {
  padding: 7px 0; border-radius: 0; background: none; border-bottom: 0;
  font-size: 11.2px; -webkit-text-stroke: 0;
  color: var(--ink); transition: color 140ms ease;
}
.navlinks .nav-menu-panel a:not(.btn):hover,
.navlinks .nav-menu-panel a:not(.btn):focus-visible {
  border-bottom: 0; background: none; color: var(--accent);
}
/* The trigger kept the browser's own focus ring after a click, a hard blue
   rectangle over the bar. Keyboard focus still gets a visible ring. */
.nav-menu summary:focus { outline: none; }
.nav-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* The phone menu, her call 2026-08-27.

   The links used to be hidden below 940px with nothing to replace them, so a
   narrow window or any phone left Partnerships and About unreachable: they are
   not in the footer either. Measured, the whole lockup needs 635px and the
   shell is the viewport less 48, so the links fit down to about 683px; 940 was
   hiding them roughly 250px early. Below 720 they move into a sheet instead of
   disappearing.

   The sheet reaches both viewport edges, which is what lets it carry a flat
   tint: like the returning nav bar it has no side edges to show. Its bottom
   fades out on a layer behind the words, never on the words themselves. */
.nav-burger { display: none; }
@media (max-width: 720px) {
  .nav-burger {
    display: grid; gap: 4px; place-content: center;
    width: 44px; height: 40px; padding: 0; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.55);
    background: color-mix(in srgb, var(--canvas) 52%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), var(--shadow-rest);
  }
  .nav-burger span {
    display: block; width: 18px; height: 1.5px; border-radius: 1px;
    background: var(--ink); transition: transform 180ms ease, opacity 140ms ease;
  }
  .aa-nav.nav-open .nav-burger span:first-child { transform: translateY(5.5px) rotate(45deg); }
  .aa-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .aa-nav.nav-open .nav-burger span:last-child { transform: translateY(-5.5px) rotate(-45deg); }
  .nav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .aa-nav { position: relative; }
  .navlinks {
    position: absolute; top: calc(100% + 6px); left: -24px; right: -24px; z-index: 60;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 14px 24px 26px;
  }
  .aa-nav.nav-open .navlinks { display: flex; }
  /* The tint reaches both viewport edges, so it has no sides to show. It
     fades at the top as well as the bottom: starting flat below the bar drew
     a straight line across the page, which is the thing the tone rules are
     about. The ramps sit in the gap and the padding, not across the words,
     and the layer is behind them so the words never fade with it. */
  .navlinks::before {
    content: ""; position: absolute; left: 0; right: 0; top: -26px; bottom: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--canvas) 78%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 12%, black 76%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, black 12%, black 76%, transparent 100%);
  }
  .navlinks a:not(.btn) { padding: 12px 0; font-size: 15px; border-bottom: 0; }
  .navlinks a:not(.btn):hover { border-bottom: 0; color: var(--accent); }
  .navlinks .btn.primary { margin-top: 14px; text-align: center; font-size: 15px; padding: 11px 20px; }
  /* The engagement routes read as a plain list in the sheet: a dropdown
     inside a dropdown is a second thing to open on a small screen. */
  .navlinks .nav-menu { position: static; }
  .navlinks .nav-menu summary { display: none; }
  .navlinks .nav-menu[open]::after { display: none; }
  .navlinks .nav-menu-panel {
    position: static; display: grid; gap: 0; min-width: 0; padding: 0;
  }
  .navlinks .nav-menu-panel a:not(.btn) { font-size: 15px; padding: 12px 0; }
  @media (prefers-reduced-motion: reduce) {
    .nav-burger span { transition: none; }
  }
}

/* Footer, the three-zone colophon: links and LGK left, the brand centred, the
   three marks right, copyright on its own line. This is the whole footer, as
   approved. It used to be split, with the flex version here and the grid
   version that actually renders living in homepage.css, so any page importing
   this file alone got a different footer and, worse, three inline SVGs with
   no size, which render at the replaced-element default of 300x150 each. */
.aa-foot { position: relative; margin-top: 104px; border-top: 1px solid var(--hairline); padding: 30px 0 44px; }
.foot-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.foot-grid .brand { justify-self: center; }
.foot-meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-self: start; }
.foot-meta a { color: var(--muted); }
.foot-meta a:hover { color: var(--ink); }
.knicks-orange { color: #F58426; font-weight: 600; }
.knicks-blue { color: #006BB6; font-weight: 600; }
.foot-soc { display: flex; align-items: center; gap: 14px; justify-self: end; }
/* Padding to the 24px minimum target with a matching negative margin, so the
   row looks unchanged. */
.soc-icon { color: var(--muted); display: inline-flex; padding: 5px; margin: -5px; }
.soc-icon:hover { color: var(--ink); border-bottom: 0; }
.soc-icon svg { width: 15px; height: 15px; display: block; }
.foot-copy { margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted); }
.aa-foot > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .foot-meta, .foot-soc { justify-self: center; }
}

/* Prose links. The reset above kills every underline, which is right for nav
   items, buttons and footer links because each has its own treatment, and
   wrong for body copy: an inline link in a paragraph became indistinguishable
   from the text around it. Long-form pages opt in with .prose or .doc-body. */
.prose a, .doc-body a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
  text-underline-offset: 3px;
}
.prose a:hover, .doc-body a:hover { text-decoration-color: var(--ink); }

/* Arrivals sharpen (ruling 38): scrolled-to content focuses in from a soft
   blur, the measured Riveter move. No effect where unsupported or unwanted.
   Scoped away from .motion-field: the hero's three carousel slides are
   sections too, and a blur-and-fade on the page's one loud moment is not
   what this was written for. */
@supports (animation-timeline: view()) {
  section:not(.motion-field), .patterns-grid {
    animation: arrive linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  @keyframes arrive {
    from { filter: blur(12px); opacity: 0.7; transform: translateY(14px); }
    to { filter: blur(0); opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    section:not(.motion-field), .patterns-grid { animation: none; }
  }
}

/* Reduced motion, the transforms the first pass missed. */
@media (prefers-reduced-motion: reduce) {
  .btn, .egg-c, .nav-menu summary::after { transition: none; }
}

/* ---- kit page modules, absorbed 2026-08-27 after the homepage merge ----
   The document layout ruling 67 approved on the Privacy mockup: rows with the
   heading in a left column, a hairline spanning the full width above each,
   the three plain opening answers with no label, and the footer rule sitting
   at the section rhythm. The tonal walk at page amplitude (ruling 54): other
   pages reuse the homepage's walk quieter, one peak, quiet ends. Nothing here
   is used by the homepage, which carries its own inline chrome. */
.walk { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* The layer runs the whole page, and the lower pool is placed a fixed
   distance down rather than at a percentage of the layer.

   It used to be a 820px-tall box holding a pool centred at 78% of that
   height, so the pool was still 37% opaque where the box stopped and the
   background stepped 8 grey levels in one row: a straight line across the
   page, measured 2026-08-27. Growing the box could not fix it, because a
   percentage centre moves down with the box and stays cut. This is the
   same rule as the masks: a feather has to reach its transparent stop
   inside its own box. */
.walk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background:
    radial-gradient(880px 480px at 82% 0%, color-mix(in srgb, var(--accent) var(--amp1, 10%), transparent), transparent 68%),
    radial-gradient(720px 400px at 10% 640px, color-mix(in srgb, var(--accent) var(--amp2, 6%), transparent), transparent 72%);
}
.page-content { position: relative; z-index: 1; }
.page-body { position: relative; background: var(--canvas); overflow-x: hidden; min-height: 100vh; }

.page-head { padding: 64px 0 8px; }
.page-head h1 {
  margin: 0; font-size: clamp(34px, 3.4vw, 46px); font-weight: 400;
  font-family: "DM Serif Display", Georgia, serif;
  letter-spacing: -0.005em; line-height: 1.08; text-wrap: balance;
}
.page-updated { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

.doc-shell { width: 100%; }
.doc-row {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px;
  padding: 34px 0 38px; border-top: 1px solid var(--hairline);
}
.doc-row:first-of-type { border-top: 0; }
.doc-key .num {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
.doc-key h2 {
  margin: 0; font-size: 24px; font-weight: 400; letter-spacing: 0;
  font-family: "DM Serif Display", Georgia, serif; line-height: 1.25; text-wrap: balance;
}
.doc-key .mark {
  display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--accent); margin-top: 14px;
}
.doc-body { max-width: 74ch; }
.doc-body p, .doc-body li { font-size: 16px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.doc-body p { margin: 0 0 14px; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body ul { margin: 0 0 14px; padding-left: 20px; }
.doc-body li { margin-bottom: 5px; }
@media (max-width: 820px) {
  .doc-row { grid-template-columns: 1fr; gap: 18px; padding: 26px 0 30px; }
  .doc-body { max-width: none; }
}
.doc-page .aa-foot { margin-top: 0; border-top: 1px solid var(--hairline); }

/* margin-top 0: the global section rule above would otherwise add 104px
   of blank space before the opening answers. */
section.short-version { margin-top: 0; padding: 26px 0 42px; }
.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.sv-item { position: relative; padding: 4px 34px; }
.sv-item:first-child { padding-left: 0; }
.sv-item:last-child { padding-right: 0; }
.sv-item + .sv-item::before {
  content: ""; position: absolute; left: 0; top: -2px; bottom: -2px; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(52,70,80,0.17) 24%, rgba(52,70,80,0.17) 76%, transparent);
}
.sv-item h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.008em; line-height: 1.35; font-family: var(--sans); }
.sv-item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sv-item a {
  color: var(--muted); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent);
  text-underline-offset: 3px;
}
.sv-item a:hover { color: var(--ink); text-decoration-color: var(--ink); }
@media (max-width: 820px) {
  .sv-grid { grid-template-columns: 1fr; gap: 22px; }
  .sv-item { padding: 0; }
  .sv-item + .sv-item::before { display: none; }
}