/* r88 (2026-10-13): the homepage's own section types, for every subpage. Subpages were composed of dense light-sheet text
   blocks while the homepage alternates a few big light sections (one heading, one lead, one big picture) with dark theatre
   sections (one line, tiles with drawings, document clippings). These classes reproduce the homepage's measured values
   (Schibsted Grotesk display, 44/48 section heads, 60/68 statements, #050506 dark, 16px tiles) so a subpage built from
   them reads as the same designer. Prefix vs- so nothing collides with site3.css, pages.css or the r59 sheets.
   Build agents: compose from these; do not restyle them in page CSS. */
:root{--vs-dark:#050506;--vs-ink:#18181b;--vs-mut:#52525b;--vs-sub:#71717a;--vs-on:#f4f4f6;--vs-on2:#a1a1aa;--vs-line:#e4e4e7;
  --vs-display:"Schibsted Grotesk",Inter,-apple-system,"Segoe UI",sans-serif;--vs-sans:Inter,-apple-system,"Segoe UI",sans-serif;--vs-mono:"Geist Mono",ui-monospace,monospace}

/* ---------- frame ---------- */
.vs-sec,.vs-dark,.vs-statement{position:relative;display:block;width:100%;box-sizing:border-box}
.vs-wrap{max-width:1440px;margin:0 auto;padding:0 75px;box-sizing:border-box}
.vs-sec{padding:144px 0 0}
.vs-sec.vs-last{padding-bottom:144px}
.vs-dark{background:var(--vs-dark);color:var(--vs-on);padding:150px 0 120px;margin-top:144px}
.vs-dark+.vs-dark,.vs-statement+.vs-dark,.vs-dark+.vs-statement{margin-top:0}
.vs-statement{background:var(--vs-dark);color:var(--vs-on);padding:210px 0 200px;margin-top:144px;text-align:center}

/* ---------- light section head: heading left, one lead right (the homepage's #today) ---------- */
.vs-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:96px;align-items:end}
.vs-k{display:block;margin:0 0 14px;font:500 14px/20px var(--vs-sans);letter-spacing:-.011em;color:var(--vs-sub)}
.vs-head h2,.vs-h2{margin:0;max-width:900px;font:500 44px/48px var(--vs-display);letter-spacing:-.018em;color:var(--vs-ink);text-wrap:balance}
.vs-lead{margin:6px 0 0;max-width:460px;font:400 18px/28px var(--vs-sans);letter-spacing:-.011em;color:var(--vs-mut)}
.vs-head.vs-stack{grid-template-columns:minmax(0,1fr);row-gap:16px}
.vs-head.vs-stack .vs-lead{max-width:640px}
/* the big picture under a head, at the homepage's width */
.vs-shot{margin:64px 0 0;padding:0}
.vs-shot picture,.vs-shot img{display:block;width:100%;height:auto}
.vs-shot img{border-radius:16px}
.vs-shot figcaption{margin:16px 0 0;font:400 13px/20px var(--vs-sans);color:var(--vs-sub)}
/* a light two-column row: copy beside one picture, for a page's single most important idea */
.vs-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:center;margin-top:64px}
.vs-split.vs-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.vs-split.vs-flip>:first-child{order:2}
.vs-split h3{margin:0;font:500 32px/36px var(--vs-display);letter-spacing:-.018em;color:var(--vs-ink);text-wrap:balance}
.vs-split p{margin:16px 0 0;font:400 16px/26px var(--vs-sans);letter-spacing:-.011em;color:var(--vs-mut)}
.vs-split ul{margin:20px 0 0;padding:0;list-style:none}
.vs-split li{position:relative;padding:8px 0 8px 22px;font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
.vs-split li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;border-radius:2px;background:#2554e8}
.vs-split picture,.vs-split img{display:block;width:100%;height:auto;border-radius:16px}

/* ---------- dark statement: one line, the light rule, one sub (the homepage's #statement) ---------- */
.vs-say{margin:0 auto;max-width:1100px;font:500 60px/68px var(--vs-display);letter-spacing:-.02em;color:var(--vs-on);text-wrap:balance}
.vs-say .vs-dim{color:#8b8b93}
.vs-line{display:block;width:min(560px,64%);height:1px;margin:46px auto 0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0))}
.vs-sub{margin:28px auto 0;max-width:760px;font:400 22px/30px var(--vs-sans);letter-spacing:-.014em;color:var(--vs-on2)}

/* ---------- dark section head ---------- */
.vs-dh{margin:0 0 44px;text-align:center;font:500 44px/49px var(--vs-display);letter-spacing:-.018em;color:#f9f9f9;text-wrap:balance}
.vs-dlead{margin:-28px auto 48px;max-width:640px;text-align:center;font:400 18px/28px var(--vs-sans);color:var(--vs-on2)}
.vs-note{display:block;max-width:640px;margin:44px auto 0;text-align:center;font:400 13px/20px var(--vs-sans);color:#8b8b93}

/* ---------- dark tiles with drawings (the homepage's data bento): 3 + 3, square / fill / square ---------- */
.vs-tiles{position:relative;display:flex;flex-wrap:wrap;gap:7.5px;max-width:1072px;margin:0 auto}
.vs-tile{position:relative;height:292.5px;border-radius:16px;overflow:hidden;background:#09090b radial-gradient(120% 75% at 50% 0%,rgba(255,255,255,.06),rgba(255,255,255,0) 62%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vs-tile.is-square{flex:0 0 292.5px}
.vs-tile.is-fill{flex:1 1 300px}
.vs-tile>svg,.vs-tile>.d-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.vs-tc{position:absolute;inset:0;display:flex;flex-direction:column;gap:3.75px;padding:24px 25.5px}
.vs-tc.align-btm{justify-content:flex-end}
.vs-tc .t{display:block;margin:0 0 10px;font:500 11px/16px var(--vs-mono);letter-spacing:.06em;text-transform:uppercase;color:#7c8594}
.vs-tc .n{display:block;font:500 42px/44px var(--vs-sans);letter-spacing:-.04em;color:#f5f5f6}
.vs-tc .l{display:block;margin-top:7.5px;max-width:225px;font:400 14px/19.6px var(--vs-sans);color:var(--vs-on2)}
.vs-tile.is-fill .vs-tc .l{max-width:22rem}

/* ---------- dark document clippings: the source as a clipping, the quoted words marked, the point under it ---------- */
.vs-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.vs-clips.c2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:0 auto}
.vs-clip{margin:0;display:flex;flex-direction:column}
.vs-doc{position:relative;background:#f7f7f4;color:#1d2027;border-radius:6px;padding:20px 22px 22px;box-shadow:0 20px 40px -18px rgba(0,0,0,.7);transform:rotate(-.4deg)}
.vs-clip:nth-child(2) .vs-doc{transform:rotate(.35deg)}.vs-clip:nth-child(3) .vs-doc{transform:rotate(-.25deg)}
.vs-doc::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:8px;background:linear-gradient(135deg,#f7f7f4 33.33%,transparent 33.33%) 0 0/12px 12px,linear-gradient(225deg,#f7f7f4 33.33%,transparent 33.33%) 0 0/12px 12px}
.vs-src{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #dedcd4;font:500 11px/16px var(--vs-mono);letter-spacing:.04em;text-transform:uppercase;color:#6b6a63}
.vs-src b{font-weight:600;color:#2a2a27}.vs-src span{text-transform:none;letter-spacing:0;white-space:nowrap}
.vs-doc blockquote{margin:0;font:400 17px/28px Georgia,"Times New Roman",serif;color:#3a3a36}
.vs-doc mark{background:linear-gradient(180deg,transparent 58%,rgba(37,84,232,.22) 58%);color:#14161b;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vs-clip figcaption{margin:22px 2px 0;font:500 17px/26px var(--vs-sans);letter-spacing:-.012em;color:var(--vs-on);text-wrap:balance}

/* ---------- light cards that open something (the homepage's #see): picture on top, label, title, one line ---------- */
.vs-cards{display:grid;grid-template-columns:repeat(var(--vs-cols,2),minmax(0,1fr));gap:16px;margin-top:56px}
.vs-card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);text-decoration:none;color:inherit}
.vs-card picture,.vs-card img{display:block;width:100%;height:auto}
.vs-card .vs-cb{padding:22px 24px 26px}
.vs-card .vs-cb small{display:block;font:500 13px/18px var(--vs-sans);color:var(--vs-sub)}
.vs-card .vs-cb b{display:block;margin-top:6px;font:500 20px/26px var(--vs-display);letter-spacing:-.015em;color:var(--vs-ink)}
.vs-card .vs-cb p{margin:8px 0 0;font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}

/* ---------- the panel system's labels match the homepage's (plain grey 14px, no mono dot) ---------- */
:root .pg .pg-light .pf-k,:root .pg .pg-light .sx-over,:root .pg .pg-light .t-k,:root .pg .pg-light .cx-over,:root .pg .pg-light .oc-head .overline,:root .pg .pg-light .mstrip>.overline,:root .pg .pg-light .why-head .overline{
  font:500 14px/20px var(--vs-sans)!important;letter-spacing:-.011em!important;text-transform:none!important;color:var(--vs-sub)!important}
:root .pg .pg-light .pf-k::before,:root .pg .pg-light .sx-over::before,:root .pg .pg-light .t-k::before,:root .pg .pg-light .cx-over::before,:root .pg .pg-light .oc-head .overline::before,:root .pg .pg-light .mstrip>.overline::before,:root .pg .pg-light .why-head .overline::before{display:none!important}
:root .pg .pg-light .sh-intro h2{font:500 44px/48px var(--vs-display)!important;letter-spacing:-.018em!important}
:root .pg .pg-quote p,:root .pg .pg-quote blockquote{font-family:var(--vs-display)!important}

/* ---------- tablets and phones ---------- */
@media (max-width:1099px){
  .vs-head{grid-template-columns:1fr;row-gap:16px}
  .vs-tile.is-square,.vs-tile.is-fill{flex:1 1 calc(50% - 4px)}
  .vs-clips{grid-template-columns:1fr;gap:36px}.vs-doc{transform:none!important}
  .vs-split,.vs-split.vs-flip{grid-template-columns:1fr;row-gap:32px}.vs-split.vs-flip>:first-child{order:0}
}
@media (max-width:767px){
  .vs-wrap{padding:0 20px}
  .vs-sec{padding-top:88px}.vs-sec.vs-last{padding-bottom:88px}
  .vs-dark{padding:96px 0 80px;margin-top:88px}
  .vs-statement{padding:120px 0 112px;margin-top:88px}
  .vs-head h2,.vs-h2,.vs-dh{font-size:32px;line-height:36px}
  .vs-lead,.vs-dlead{font-size:17px;line-height:26px}
  .vs-say{font-size:40px;line-height:44px}
  .vs-sub{font-size:17px;line-height:25px}
  .vs-shot{margin-top:40px}
  .vs-tile.is-square,.vs-tile.is-fill{flex:1 1 100%;height:auto;min-height:200px}
  .vs-tile>svg,.vs-tile>.d-art{opacity:.55}
  .vs-tc{position:relative}
  .vs-split h3{font-size:26px;line-height:31px}
  .vs-cards{grid-template-columns:1fr}
}
/* older page sheets box every blockquote; a clipping's quote is the document's own text */
.vs-doc blockquote{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:none!important;font:400 17px/28px Georgia,"Times New Roman",serif!important;color:#3a3a36!important;quotes:none}
.vs-doc blockquote::before,.vs-doc blockquote::after{content:none!important;display:none!important}

/* ===== r88b: patterns from the reference research (Redica, Vercel, Stripe, Linear) ===== */
/* the dark opener: a two-tone heading and a short lead, left-aligned, the way the homepage's law section opens */
.vs-oh{margin:0;max-width:980px;font:500 52px/58px var(--vs-display);letter-spacing:-.018em;color:#f4f4f6;text-wrap:balance}
.vs-oh .vs-dim{color:#8b8b93}
.vs-olead{margin:16px 0 0;max-width:640px;font:400 18px/28px var(--vs-sans);letter-spacing:-.011em;color:var(--vs-on2)}
.vs-oh+.vs-olead+.vs-clips,.vs-oh+.vs-clips,.vs-olead+.vs-clips{margin-top:56px}
/* the light slab: the light sheet rises over the dark section above it with a 56px top radius */
.vs-slab{position:relative;z-index:1;background:#f9f9f9;border-radius:56px 56px 0 0;margin-top:-56px;padding-top:144px}
/* caption columns under one big picture: a bold lead-in and one short line each */
.vs-caps{display:grid;grid-template-columns:repeat(var(--vs-cols,3),minmax(0,1fr));column-gap:40px;row-gap:24px;margin-top:40px}
.vs-caps>div{padding-top:16px;border-top:1px solid var(--vs-line)}
.vs-caps b{display:block;font:500 15px/23px var(--vs-sans);letter-spacing:-.011em;color:var(--vs-ink)}
.vs-caps p,.vs-caps span{display:block;margin:4px 0 0;font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
.vs-caps .vst{margin-bottom:8px}
/* zig-zag rows, 120px apart (vs-split, stacked) */
.vs-rows{display:flex;flex-direction:column;row-gap:120px;margin-top:72px}
.vs-rows>.vs-split{margin-top:0}
.vs-split .vs-more{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font:500 15px/22px var(--vs-sans);color:#2554e8;text-decoration:none}
.vs-split .vs-more::after{content:"\2192"}
/* an accordion with media (Stripe Billing): one row open with a wide picture and captions, the rest closed rows.
   <details class="vs-acc-i" name="x" open><summary><span class="vs-acc-t">Title</span><span class="vs-acc-s">one line</span></summary>
   <div class="vs-acc-b"><picture>..</picture><div class="vs-caps">..</div></div></details> (name= makes them exclusive) */
.vs-acc{margin-top:56px;border-top:1px solid var(--vs-line)}
.vs-acc-i{border-bottom:1px solid var(--vs-line)}
.vs-acc-i>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 24px;align-items:center;column-gap:32px;min-height:72px;padding:12px 0}
.vs-acc-i>summary::-webkit-details-marker{display:none}
.vs-acc-i>summary::after{content:"";width:12px;height:12px;justify-self:end;border-right:1.6px solid var(--vs-sub);border-bottom:1.6px solid var(--vs-sub);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.vs-acc-i[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.vs-acc-t{font:500 24px/30px var(--vs-display);letter-spacing:-.015em;color:var(--vs-ink)}
.vs-acc-s{font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
.vs-acc-b{padding:8px 0 40px}
.vs-acc-b picture,.vs-acc-b img{display:block;width:100%;height:auto;border-radius:16px}
/* the spec accordion (Linear "Tech specs"): heading and one line left, groups right; an open group is a two-column list */
.vs-spec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;align-items:start}
.vs-spec>div:first-child h2{margin:0;font:500 44px/48px var(--vs-display);letter-spacing:-.018em;color:var(--vs-ink);text-wrap:balance}
.vs-spec>div:first-child p{margin:16px 0 0;font:400 16px/26px var(--vs-sans);color:var(--vs-mut)}
.vs-spec>div:first-child a{display:inline-block;margin-top:16px;font:500 15px/22px var(--vs-sans);color:#2554e8;text-decoration:none}
.vs-spec-list{border-top:1px solid var(--vs-line)}
.vs-spec-list details{border-bottom:1px solid var(--vs-line)}
.vs-spec-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;font:500 17px/24px var(--vs-sans);letter-spacing:-.012em;color:var(--vs-ink)}
.vs-spec-list summary::-webkit-details-marker{display:none}
.vs-spec-list summary small{margin-left:10px;font:400 14px/20px var(--vs-sans);color:var(--vs-sub)}
.vs-spec-list summary::after{content:"+";font:400 22px/1 var(--vs-sans);color:var(--vs-sub)}
.vs-spec-list details[open] summary::after{content:"\2212"}
.vs-spec-list dl{margin:0 0 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
.vs-spec-list dl>div{display:contents}
.vs-spec-list dt{padding:12px 0;border-top:1px solid rgba(16,24,40,.06);font:500 15px/23px var(--vs-sans);color:var(--vs-ink)}
.vs-spec-list dd{margin:0;padding:12px 0;border-top:1px solid rgba(16,24,40,.06);font:400 14px/22px var(--vs-sans);color:var(--vs-mut)}
.vs-spec-list dd code,.vs-spec-list .vs-cite{font:500 12.5px/18px var(--vs-mono);color:var(--vs-sub)}
.vs-spec-list>p{margin:16px 0 0;font:400 13px/20px var(--vs-sans);color:var(--vs-sub)}
/* a plain comparison table, when one is truly needed: no box, no fill, hairlines only (max 3 columns, 6 rows) */
.vs-table{width:100%;border-collapse:collapse;margin-top:48px}
.vs-table th{padding:0 24px 12px 0;text-align:left;font:500 13px/20px var(--vs-sans);color:var(--vs-sub);border-bottom:1px solid var(--vs-line)}
.vs-table td,.vs-table tbody th{padding:16px 24px 16px 0;border-bottom:1px solid var(--vs-line);text-align:left;vertical-align:top;font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
.vs-table tbody th{font-weight:500;color:var(--vs-ink)}
/* a strip of steps, short words each (first week, the run) */
.vs-steps{display:grid;grid-template-columns:repeat(var(--vs-cols,4),minmax(0,1fr));column-gap:32px;margin-top:56px;counter-reset:vss}
.vs-steps>div{counter-increment:vss;padding-top:20px;border-top:1px solid var(--vs-line)}
.vs-steps>div::before{content:counter(vss);display:block;margin-bottom:14px;font:500 14px/20px var(--vs-sans);color:#2554e8}
.vs-steps b{display:block;font:500 17px/24px var(--vs-sans);letter-spacing:-.012em;color:var(--vs-ink)}
.vs-steps p{margin:6px 0 0;font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
@media (max-width:1099px){.vs-spec{grid-template-columns:1fr;row-gap:32px}.vs-caps,.vs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.vs-oh{font-size:34px;line-height:39px}.vs-slab{border-radius:28px 28px 0 0;margin-top:-28px;padding-top:88px}
  .vs-caps,.vs-steps{grid-template-columns:1fr}.vs-rows{row-gap:72px;margin-top:48px}
  .vs-acc-i>summary{grid-template-columns:minmax(0,1fr) 24px}.vs-acc-s{display:none}.vs-acc-t{font-size:20px;line-height:26px}
  .vs-spec-list dl{grid-template-columns:1fr}.vs-spec-list dd{border-top:0;padding-top:0}}

/* ===== r88c: promoted from build agent A ===== */
.vs-caps .vs-more,.vs-acc-b .vs-more{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font:500 15px/22px var(--vs-sans);color:#2554e8;text-decoration:none}
.vs-caps .vs-more{margin-top:12px}
.vs-caps .vs-more::after,.vs-acc-b .vs-more::after{content:"\2192"}
/* the 2120x1680 product pictures, shown full width, crop to 3:2 from the top so one picture never outgrows the screen */
@media (min-width:768px){.vs-shot.vs-crop img{aspect-ratio:3/2;object-fit:cover;object-position:50% 0}}
/* a spec group's count sits beside its title, not in the middle of the row */
.vs-spec-list summary>span{min-width:0}
.vs-spec-list summary>small,.vs-spec-list summary>span>small{margin-right:auto}
@media (max-width:767px){.vs-spec>div:first-child h2{font-size:32px;line-height:36px}}

/* ===== r88d: promoted from build agent B ===== */
/* pages.css (older, loaded on every subpage) animates any .vs-doc forever; a clipping is still */
.vs-clip .vs-doc{animation:none!important}
.vs-olead+.vs-clips.c2{margin-left:0}
@media (max-width:1099px){.vs-clips.c2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .vs-spec-list summary{padding:14px 0}
  .vs-spec-list summary small{display:block;margin:2px 0 0}
  .vs-spec-list dl{grid-template-columns:minmax(0,1fr)}
  .vs-table,.vs-table tbody,.vs-table tr,.vs-table th,.vs-table td{display:block;width:auto}
  .vs-table colgroup,.vs-table thead{display:none}
  .vs-table tbody tr{padding:18px 0;border-bottom:1px solid var(--vs-line)}
  .vs-table tbody th,.vs-table td{padding:0;border:0}
  .vs-table td{margin-top:10px}
  .vs-table td::before{content:attr(data-l);display:block;font:500 13px/20px var(--vs-sans);color:var(--vs-sub)}
}

/* ===== r88e: the review's shared fixes (one designer across all four groups) ===== */
/* proof that is not counts: a dark statement with caption columns instead of tiles */
.vs-dark .vs-caps>div{border-top-color:rgba(255,255,255,.12)}
.vs-dark .vs-caps b{color:#f4f4f6}
.vs-dark .vs-caps p,.vs-dark .vs-caps span{color:#a1a1aa}
.vs-dark .vs-caps{margin-top:8px}
/* 3- and 4-tile proof rows, so no subpage repeats the homepage's six-tile bento */
.vs-tiles.t3,.vs-tiles.t4{display:grid;gap:7.5px;max-width:1072px}
.vs-tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vs-tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1290px}
.vs-tiles.t3 .vs-tile,.vs-tiles.t4 .vs-tile{flex:none;height:260px}
/* a word in the number slot: three words at most, smaller than a figure */
.vs-tc .n.w{font:500 28px/32px var(--vs-sans);letter-spacing:-.02em}
/* the accordion with media: one layout for every page, copy left and picture right, 72px rows, no hover recolour */
.vs-acc-i>summary{min-height:72px}
.vs-acc-i>summary:hover .vs-acc-t{color:var(--vs-ink)}
.vs-acc-b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:center}
.vs-acc-b>picture,.vs-acc-b>img{grid-column:2;grid-row:1}
.vs-acc-b>:not(picture):not(img){grid-column:1;grid-row:1}
.vs-acc-b .vs-caps{grid-template-columns:minmax(0,1fr);margin-top:0;row-gap:16px}
.vs-acc-b p{font:400 16px/26px var(--vs-sans);color:var(--vs-mut);margin:0 0 12px}
/* the spec list: 2fr/3fr rows, the heading column sticks, 15px answers, citation inside the answer */
.vs-spec-list dl{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.vs-spec-list dd{font:400 15px/23px var(--vs-sans)}
.vs-spec-list dd .vs-cite,.vs-spec-list dd code{display:block;margin-top:4px}
@media (min-width:1100px){.vs-spec>div:first-child{position:sticky;top:96px}}
/* any light section straight after a dark one rises as the slab, so every page draws it the same way */
.vs-dark+.vs-sec,.vs-statement+.vs-sec{background:#f9f9f9;border-radius:56px 56px 0 0;margin-top:-56px;padding-top:144px;position:relative;z-index:1}
/* claim-boundary lines are read, not small print */
.vs-note{font:400 15px/23px var(--vs-sans)}
.vs-sec .vs-note,.vs-slab .vs-note{color:var(--vs-mut)}
.vs-dark .vs-note{color:#a1a1aa}
.vs-shot figcaption{font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
.vs-spec-list>p{font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
/* row pictures crop their empty skeleton bottoms */
@media (min-width:768px){.vs-split img{aspect-ratio:4/3;object-fit:cover;object-position:50% 0}}
@media (max-width:1099px){.vs-tiles.t4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .vs-dark+.vs-sec,.vs-statement+.vs-sec{border-radius:28px 28px 0 0;margin-top:-28px;padding-top:88px}
  .vs-acc-b{grid-template-columns:1fr;row-gap:20px}.vs-acc-b>picture,.vs-acc-b>img,.vs-acc-b>:not(picture):not(img){grid-column:1;grid-row:auto}
  .vs-acc-s{display:block;grid-column:1;font-size:14px;line-height:20px}
  .vs-acc-i>summary{grid-template-columns:minmax(0,1fr) 24px;row-gap:2px}.vs-acc-i>summary::after{grid-row:1;grid-column:2}
  /* numeric tiles go two-up and compact, so proof is not a long dark scroll */
  .vs-tiles,.vs-tiles.t3,.vs-tiles.t4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-tile.is-square,.vs-tile.is-fill,.vs-tiles.t3 .vs-tile,.vs-tiles.t4 .vs-tile{height:auto;min-height:150px}
  .vs-tc{padding:18px 16px}.vs-tc .n{font-size:32px;line-height:34px}.vs-tc .n.w{font-size:20px;line-height:24px}.vs-tc .l{font-size:13.5px}
}

/* ===== r88f: final review ===== */
/* phones: an open accordion row reads copy first, then its picture, on every page */
@media (max-width:1099px){.vs-acc-b>picture,.vs-acc-b>img{order:2}}
/* dark caption columns carry a heading's weight, not a footnote's */
.vs-dark .vs-caps>div{padding-top:20px}
.vs-dark .vs-caps b{font:500 20px/26px var(--vs-display);letter-spacing:-.015em}
.vs-dark .vs-caps p,.vs-dark .vs-caps span{margin-top:8px}

/* ===== r89 (2026-10-13): four components that carry depth without paragraphs, measured from the references ===== */
/* Markup for each lives in scratchpad/r89/research/snippets.html. Tokens only: the zinc greys, #2554e8, the three faces,
   16px radii. No new colours, fonts, shadows or gradients. */

/* --- shared line icon: one set, one stroke, one colour (paste only icons from snippets.html) --- */
.vs-ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* --- FEATURE GRID (Stripe Connect's 4 columns on rails, Vercel Fluid's 3x2, Linear Security's 2 columns):
   each item a line icon, a bold title and one line, on a left rail with a short blue tick at the title. No boxes.
   <div class="vs-feat" style="--vs-cols:3"><div><svg class="vs-ic">..</svg><b>Title</b><p>One line.</p></div>..</div> --- */
.vs-feat{display:grid;grid-template-columns:repeat(var(--vs-cols,3),minmax(0,1fr));column-gap:32px;row-gap:48px;margin:64px 0 0;padding:0;list-style:none}
.vs-feat>*{position:relative;margin:0;padding:0 8px 0 20px;border-left:1px solid var(--vs-line)}
.vs-feat .vs-ic{display:block;width:22px;height:22px;margin:0 0 18px;color:#2554e8}
.vs-feat b{position:relative;display:block;font:500 17px/24px var(--vs-sans);letter-spacing:-.012em;color:var(--vs-ink)}
.vs-feat b::before{content:"";position:absolute;left:-21px;top:3px;width:1px;height:18px;background:#2554e8}
.vs-feat p{margin:6px 0 0;font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
.vs-feat .vs-cite{display:block;margin-top:8px;font:500 12.5px/18px var(--vs-mono);color:var(--vs-sub)}
.vs-head+.vs-feat,.vs-shot+.vs-feat{margin-top:64px}
/* what it will not do: the same grid, a muted icon and tick */
.vs-feat.vs-no .vs-ic{color:var(--vs-sub)}
.vs-feat.vs-no b::before{background:var(--vs-sub)}
.vs-dark .vs-feat>*{border-left-color:rgba(255,255,255,.12)}
.vs-dark .vs-feat b{color:#f4f4f6}
.vs-dark .vs-feat p{color:#a1a1aa}
.vs-dark .vs-feat .vs-ic{color:#a1a1aa}
.vs-dark .vs-feat b::before{background:#f4f4f6}

/* --- HOW IT WORKS (Redica home: the heading left, the counted steps right; Vercel Fluid's sticky head beside its sequence):
   numbered discs on one rail, a title, one line, and what the step gives you.
   <div class="vs-how"><div class="vs-how-in"><p class="vs-k">..</p><h2>..</h2><p class="vs-lead">..</p></div>
   <ol class="vs-how-s"><li><b>Step</b><p>One line.</p><span class="vs-out">What you get</span></li>..</ol></div> --- */
.vs-how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
.vs-how-in h2{margin:0;font:500 44px/48px var(--vs-display);letter-spacing:-.018em;color:var(--vs-ink);text-wrap:balance}
.vs-how-in .vs-lead{margin-top:20px}
.vs-how-in .vs-more{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font:500 15px/22px var(--vs-sans);color:#2554e8;text-decoration:none}
.vs-how-in .vs-more::after{content:"\2192"}
@media (min-width:1100px){.vs-how-in{position:sticky;top:120px}}
.vs-how-s{margin:0;padding:0;list-style:none;counter-reset:vsh}
.vs-how-s>li{position:relative;counter-increment:vsh;margin:0;padding:0 0 44px 64px}
.vs-how-s>li:last-child{padding-bottom:0}
.vs-how-s>li::before{content:counter(vsh);position:absolute;left:0;top:0;box-sizing:border-box;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--vs-sans);color:#2554e8;background:#fff;box-shadow:inset 0 0 0 1px var(--vs-line)}
.vs-how-s>li::after{content:"";position:absolute;left:18px;top:44px;bottom:8px;width:1px;background:var(--vs-line)}
.vs-how-s>li:last-child::after{display:none}
.vs-how-s b{display:block;padding-top:5px;font:500 20px/26px var(--vs-display);letter-spacing:-.015em;color:var(--vs-ink)}
.vs-how-s p{margin:8px 0 0;font:400 16px/26px var(--vs-sans);color:var(--vs-mut)}
.vs-how-s .vs-out{display:inline-flex;align-items:baseline;gap:10px;margin-top:12px;font:500 14px/20px var(--vs-sans);color:var(--vs-ink)}
.vs-how-s .vs-out::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:#2554e8;transform:translateY(-1px)}
.vs-dark .vs-how-in h2{color:#f4f4f6}
.vs-dark .vs-how-in h2 .vs-dim{color:#8b8b93}
.vs-dark .vs-how-in .vs-lead{color:var(--vs-on2)}
.vs-dark .vs-how-s>li::before{background:#09090b;color:#f4f4f6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vs-dark .vs-how-s>li::after{background:rgba(255,255,255,.12)}
.vs-dark .vs-how-s b,.vs-dark .vs-how-s .vs-out{color:#f4f4f6}
.vs-dark .vs-how-s p{color:#a1a1aa}

/* --- COMPARISON (Stripe Billing's problem column beside its answer; Vercel Fluid's table with one winning column):
   rows aligned across columns, the old way muted with a dash, the new way in ink on a white column with the blue marker.
   <div class="vs-vs"><div class="vs-vs-h"><span></span><span>Today</span><span>With Veritura</span></div>
   <div class="vs-vs-r"><b>Row</b><span data-l="Today">..</span><span data-l="With Veritura">..</span></div>..</div>
   Two columns without row labels: add class c2 and drop the <b> and the first header <span>. --- */
.vs-vs{margin-top:56px}
.vs-vs-h,.vs-vs-r{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr)}
.vs-vs.c2 .vs-vs-h,.vs-vs.c2 .vs-vs-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vs-vs-h{border-bottom:1px solid var(--vs-line)}
.vs-vs-h>*{padding:14px 24px 14px 0;font:500 13px/20px var(--vs-sans);color:var(--vs-sub)}
.vs-vs-h>:last-child{padding-left:48px;color:var(--vs-ink);background:#fff;border-radius:12px 12px 0 0}
.vs-vs-r{border-bottom:1px solid var(--vs-line)}
.vs-vs-r:last-child{border-bottom:0}
.vs-vs-r>*{position:relative;padding:18px 24px 18px 0;font:400 15px/23px var(--vs-sans);color:var(--vs-sub)}
.vs-vs-r>b{font-weight:500;color:var(--vs-ink)}
.vs-vs-r>span{padding-left:24px}
.vs-vs-r>span::before{content:"";position:absolute;left:2px;top:29px;width:10px;height:1.5px;background:#a1a1aa}
.vs-vs-r>span:last-child{padding-left:48px;color:var(--vs-ink);background:#fff}
.vs-vs-r>span:last-child::before{left:24px;top:26px;width:8px;height:8px;border-radius:2px;background:#2554e8}
.vs-vs-r:last-child>span:last-child{border-radius:0 0 12px 12px}
.vs-vs+.vs-note{margin-top:28px;text-align:left;margin-left:0}

/* --- STAT BAND (Stripe Radar and Billing: four figures in a row between hairlines; Redica's numbers band):
   only counts the page itself states; each label says what was counted.
   <div class="vs-stats" style="--vs-cols:4"><div><span class="vs-n">20</span><p>checks on every certificate</p></div>..</div> --- */
.vs-stats{display:grid;grid-template-columns:repeat(var(--vs-cols,4),minmax(0,1fr));margin-top:56px;border-top:1px solid var(--vs-line);border-bottom:1px solid var(--vs-line)}
.vs-stats>*{margin:0;padding:32px 24px 34px;border-left:1px solid var(--vs-line)}
.vs-stats>:first-child{border-left:0;padding-left:0}
.vs-stats .vs-n{display:block;font:500 48px/52px var(--vs-display);letter-spacing:-.03em;color:var(--vs-ink);font-variant-numeric:tabular-nums}
.vs-stats .vs-n.w{padding-top:14px;font-size:28px;line-height:38px;letter-spacing:-.02em}
.vs-stats p{margin:10px 0 0;max-width:260px;font:400 15px/23px var(--vs-sans);color:var(--vs-mut)}
.vs-stats .vs-cite{display:block;margin-top:6px;font:500 12.5px/18px var(--vs-mono);color:var(--vs-sub)}
.vs-dark .vs-stats,.vs-dark .vs-stats>*{border-color:rgba(255,255,255,.12)}
.vs-dark .vs-stats .vs-n{color:#f4f4f6}
.vs-dark .vs-stats p{color:#a1a1aa}

/* ===== r89 shared fixes ===== */
/* a document clipping placed on a light page (group D's statute pull quotes) keeps a dark caption; on dark it stays light */
.pg-light .vs-clip figcaption{color:var(--vs-ink)}
.pg-light .vs-dark .vs-clip figcaption{color:var(--vs-on)}
.art-sec>.vs-clip,.vs-sec .vs-wrap>.vs-clip{max-width:640px;margin:40px 0}
/* the open accordion row: the copy column starts level with the picture's top edge (it was centred, floating low beside an empty top) */
.vs-acc-b{align-items:start}
/* r90 (owner: "some images may be a touch too big"): pictures sized toward the references (Redica rows ~530px, a hero
   window ~850px). At 1440 a row picture is 640px, an open accordion picture 680px, the one big picture 1040px and centred.
   Copy columns keep a 520px measure. Desktop only; tablets and phones stack. */
@media (min-width:1100px){
  .vs-split{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
  .vs-split.vs-flip{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
  .vs-split>div:not(:has(picture)){max-width:520px}
  .vs-split.vs-flip>div:not(:has(picture)){justify-self:end;width:100%}
  .vs-acc-b{grid-template-columns:minmax(0,1fr) minmax(0,680px)}
  .vs-shot{max-width:1040px;margin-left:auto;margin-right:auto}
  .vs-shot+.vs-caps,.vs-shot+.vs-note{max-width:1040px;margin-left:auto;margin-right:auto}
}
/* a light two-sentence heading breaks before its payoff and keeps the ink colour, as the homepage's light headings do;
   on dark (vs-say, vs-oh, vs-dark h2) vs-dim stays the dim grey */
.vs-head h2 .vs-dim,.vs-h2 .vs-dim,.vs-spec>div:first-child h2 .vs-dim,.vs-how-in h2 .vs-dim{display:block}
.vs-dh .vs-dim,.vs-dark .vs-head h2 .vs-dim{color:#8b8b93}

@media (max-width:1099px){
  .vs-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-how{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .vs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs-stats>*:nth-child(odd){border-left:0;padding-left:0}
  .vs-stats>*:nth-child(n+3){border-top:1px solid var(--vs-line)}
  .vs-dark .vs-stats>*:nth-child(n+3){border-top-color:rgba(255,255,255,.12)}
}
@media (max-width:767px){
  .vs-feat{grid-template-columns:minmax(0,1fr);row-gap:32px;margin-top:40px}
  .vs-feat .vs-ic{margin-bottom:14px}
  .vs-how-in h2{font-size:32px;line-height:36px}
  .vs-how-s>li{padding:0 0 32px 52px}
  .vs-how-s>li::before{width:32px;height:32px;font-size:13px}
  .vs-how-s>li::after{left:16px;top:40px}
  .vs-how-s b{padding-top:3px;font-size:18px;line-height:24px}
  .vs-how-s p{font-size:15px;line-height:23px}
  .vs-vs{margin-top:40px}
  .vs-vs-h{display:none}
  .vs-vs-r,.vs-vs.c2 .vs-vs-r{grid-template-columns:minmax(0,1fr);padding:16px 0}
  .vs-vs-r:last-child{border-bottom:0}
  .vs-vs-r>*{padding:0}
  .vs-vs-r>b{margin-bottom:6px}
  .vs-vs-r>span{display:flex;flex-direction:column;padding:6px 0 6px 22px}
  .vs-vs-r>span::before{left:2px;top:35px}
  .vs-vs-r>span[data-l]::after{content:attr(data-l);order:-1;font:500 13px/20px var(--vs-sans);color:var(--vs-sub)}
  .vs-vs-r>span:last-child{margin-top:6px;padding:10px 14px 12px 36px;border-radius:10px}
  .vs-vs-r>span:last-child::before{left:14px;top:37px}
  .vs-vs-r:last-child>span:last-child{border-radius:10px}
  .vs-stats{margin-top:40px}
  .vs-stats>*{padding:22px 16px 24px}
  .vs-stats .vs-n{font-size:36px;line-height:40px}
  .vs-stats .vs-n.w{padding-top:12px;font-size:22px;line-height:28px}
  .vs-stats p{font-size:15px;line-height:22px}
}

/* ===== r89 review: no body copy under 15px on phones (builder B's report, then every shared component checked) ===== */
.vs-how-s .vs-out{font-size:15px;line-height:22px}
@media (max-width:767px){
  .vs-acc-s{font-size:15px;line-height:22px}
  .vs-tc .l{font-size:15px;line-height:20px}
  .vs-vs-r>span[data-l]::after{font-size:14px;line-height:20px}
  .vs-vs-r>span,.vs-vs-r>b{font-size:15px;line-height:23px}
  .vs-how-s .vs-out{font-size:15px;line-height:22px}
}
/* a boundary note under a left-aligned light grid or band reads from the left edge, like the grid it closes */
.vs-sec .vs-feat+.vs-note,.vs-sec .vs-stats+.vs-note,.vs-sec .vs-how+.vs-note,.vs-sec .vs-vs+.vs-note{text-align:left;margin:32px 0 0;max-width:720px}