/* p-routes.css · the "routes" pages of halal-solution.com, linked after site.css and pages.css. Round 2, 5 Oct 2026.
   rt- = shared by the three pages
   rb- = /recognised-foreign-halal-bodies/ (the register, every body by name)
   vs- = /jakim-vs-foreign-halal-certificate/ (the split page)
   cm- = /halal-contract-manufacturing-malaysia/ (two parties and a contract)
   Tokens only (site.css :root); the two non-token greys are the landing's JAKIM who-tag (#DCE2E5 / #3C4A53).
   Every font-size here is 12px or more. Radii: 24px cards and panels, 999px pills, 8px row highlights. */

/* ======================================================================== shared */
.rt-h2 { font-size: clamp(38px, 4.6vw, 66px); font-stretch: 80%; line-height: .94; letter-spacing: -.025em; margin: 0 0 22px; }
.rt-h2 span { font-weight: 280; }
.pg .cl { display: block; margin-top: 5px; font-family: var(--mono); font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--blue-ink); letter-spacing: 0; text-transform: none; }
.pg .cl a { color: var(--blue-ink); }
.rt-more { margin: 22px 0 0; font-size: 15px; color: var(--ink-2); }
.rt-more a { color: var(--blue-ink); text-underline-offset: 3px; }
.rt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rt-tag { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; padding: 5px 9px; border-radius: 6px; }
.rt-tag.jk { background: #DCE2E5; color: #3C4A53; }
.rt-tag.fh { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rt-tag.you { background: var(--ink); color: #fff; }
.rt-sw { display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 3px; margin-right: 9px; vertical-align: -1px; }
.rt-sw.sp { background: var(--ink); }
.rt-sw.fh { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rt-sw.hi { background: var(--blue); }
.rt-sw.ln { height: 0; border-radius: 0; border-top: 2px dashed var(--blue); vertical-align: 4px; }
/* the H1 stays the largest type on the page: night bands and the close are capped below it */
.rb-law h2, .cm-night h2 { font-size: clamp(36px, 4.6vw, 66px); }
/* keyboard focus: one blue-ink ring on cards, links and controls over paper */
.pg a:focus-visible, .pg button:focus-visible, .pg summary:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; border-radius: 6px; }
.pg-next-list a:focus-visible, .cm-index a:focus-visible { outline-offset: 4px; border-radius: 22px; }
.rt-iso .band.sp { fill: var(--ink); stroke: none; }
.rt-iso .band.fh { fill: #fff; stroke: var(--ink); stroke-width: .14; }
.rt-close .pg-close-in { align-items: end; }
.rt-close h2 { font-size: clamp(40px, 4.6vw, 64px); }
.pg-next-list .ico { overflow: visible; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ======================================================================== 1. the register */
.rb-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); column-gap: clamp(28px, 4vw, 64px); grid-template-areas: "title cab" "count count" "lead lead"; }
.rb-title { grid-area: title; align-self: end; }
.rb-title h1 { margin-bottom: 0; }
.rb-count { grid-area: count; }
.rb-lead { grid-area: lead; }
.rb-cab { grid-area: cab; align-self: end; margin: 0; padding: 14px 18px 14px; }
.rb-cab .iso { max-height: 300px; margin: 0 auto; }
.rb-cab figcaption { margin-top: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--mute); }

.rb-count { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(28px, 3.4vw, 48px) 0 0; border-top: 1.5px solid var(--ink); }
.rb-k { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: clamp(16px, 1.8vw, 24px) clamp(14px, 2vw, 28px) 0 0; }
.rb-k + .rb-k { border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 28px); }
.rb-k dd { margin: 0; font-stretch: 125%; font-weight: 780; font-size: clamp(40px, 4.9vw, 70px); line-height: .82; letter-spacing: -.055em; color: var(--ink); white-space: nowrap; }
.rb-date dd { color: var(--blue-ink); }
.rb-date dd span { display: inline-block; vertical-align: top; margin: .06em 0 0 .16em; font-size: max(12px, .26em); line-height: 1.08; font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; color: var(--ink); white-space: normal; width: 3.2em; }
.rb-k dt { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 14px; }

.rb-lead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(28px, 4.4vw, 80px); align-items: start; margin-top: clamp(32px, 3.6vw, 52px); }
.rb-doc { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 22px 24px 20px; box-shadow: 0 30px 70px -50px rgba(15, 27, 36, .5); }
.rb-doc-k { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 8px; }
.rb-doc-t { font-size: 21px; font-weight: 680; font-stretch: 86%; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; }
.rb-doc-m { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 16px; }
.rb-doc .btn { width: 100%; justify-content: center; }
.rb-doc .src { margin-top: 12px; }

/* the register: country blocks set in newspaper columns, each a disclosure holding its bodies */
.rb-reg { padding: clamp(8px, 2vw, 32px) 0 clamp(48px, 5vw, 80px); }
.rb-reg-h { max-width: 17em; }
.rb-reg-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(28px, 4.4vw, 80px); align-items: start; margin-bottom: clamp(24px, 3vw, 40px); }
.rb-reg-lede { color: var(--ink-2); max-width: 42em; margin: 0; }
.rb-spread { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 18px 20px 16px; }
.rb-spread figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; }
.rb-spread ul { list-style: none; margin: 0; padding: 0; }
.rb-spread li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.rb-spread li b { font-weight: 500; color: var(--ink-2); }
.rb-spread li em { font-style: normal; font-stretch: 125%; font-weight: 760; font-size: 24px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.rb-spread .src { margin-top: 10px; }
.rb-pips { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.rb-pips i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); }

.rb-reg-body { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: clamp(14px, 1.8vw, 24px); align-items: start; }
.rb-az { position: sticky; top: calc(var(--nav) + 20px); }
.rb-az ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-az a, .rb-az span { display: grid; place-items: center; width: 40px; height: 24px; border-radius: 7px; font-family: var(--mono); font-size: 13px; font-weight: 500; text-decoration: none; }
.rb-az a { color: var(--blue-ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.rb-az a:hover { box-shadow: inset 0 0 0 1.5px var(--blue-ink); }
.rb-az span { color: var(--mute); box-shadow: inset 0 0 0 1px var(--line-2); }
.rb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 12px; }
.rb-fold { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--white); border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.rb-fold:hover { background: var(--ink); color: #fff; }
.rb-fold:focus-visible, .rb-cty summary:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.rb-key { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rb-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 8px 0; box-shadow: 0 30px 80px -60px rgba(15, 27, 36, .45); }
.rb-col + .rb-col { border-left: 1px solid var(--line-2); }
.rb-col { align-self: stretch; }
.rb-l { padding: 16px clamp(16px, 1.6vw, 22px) 10px; scroll-margin-top: calc(var(--nav) + 20px); }
.rb-letter { font-stretch: 125%; font-weight: 780; font-size: 30px; line-height: 1; letter-spacing: -.03em; color: var(--ink); margin: 0 0 2px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.rb-cont { display: flex; align-items: baseline; gap: 10px; }
.rb-cont span { font-family: var(--mono); font-size: 12px; font-weight: 400; font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.rb-cty { border-bottom: 1px solid var(--line-2); }
.rb-cty:last-child { border-bottom: 0; }
.rb-cty summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px 10px; align-items: center; column-gap: 10px; padding: 10px 0 8px; cursor: pointer; list-style: none; }
.rb-cty summary::-webkit-details-marker { display: none; }
.rb-cty summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(-45deg); justify-self: center; }
.rb-cty[open] summary::after { transform: rotate(45deg); margin-top: -4px; }
.rb-c { font-size: 16px; font-weight: 620; line-height: 1.25; color: var(--ink); min-width: 0; }
.rb-c small { display: block; font-size: 13px; font-weight: 400; color: var(--mute); margin-top: 1px; }
.rb-pg { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--mute); margin-top: 3px; }
.rb-num { font-stretch: 125%; font-weight: 760; font-size: 22px; line-height: 1; letter-spacing: -.02em; color: var(--ink); text-align: right; }
.rb-names { list-style: none; margin: 0 0 10px; padding: 0; }
.rb-names li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 6px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.rb-en { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--blue-ink); padding-top: 1px; }
.rb-bn { min-width: 0; overflow-wrap: anywhere; }
.rb-np { grid-column: 2; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.rb-auth { display: inline-block; font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.rb-reg > .wrap > .src { margin-top: 14px; }

/* what recognition means: the appointment cycle */
.rb-rec { background: var(--paper-2); padding: clamp(64px, 7vw, 112px) 0; }
.rb-rec-text { max-width: 48em; margin-bottom: clamp(40px, 4.4vw, 64px); }
.rb-rec-text p:not(.src) { color: var(--ink-2); margin: 0 0 12px; }
.rb-cycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.rb-cycle::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: var(--ink); }
.rb-st { position: relative; padding: 0 clamp(16px, 2vw, 32px) 0 0; }
.rb-st > b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 22px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.rb-st:last-child > b { box-shadow: inset 0 0 0 2px var(--blue-ink); color: var(--blue-ink); }
.rb-st h3 { font-size: clamp(21px, 1.8vw, 26px); font-stretch: 86%; line-height: 1.08; margin: 0 0 10px; }
.rb-st p:not(.src) { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; max-width: 22em; }

/* the law on the night band */
.rb-law h2 { max-width: 16em; }
.rb-law-in { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, .75fr); gap: clamp(28px, 5vw, 88px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .16); }
.rb-quotes { display: grid; gap: clamp(26px, 3vw, 40px); }
.rb-q { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; }
.rb-q p { margin: 0; }
.rb-q .rb-q-n { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #7FD0F5; padding-top: 8px; }
.rb-q p:not(.rb-q-n) { font-size: clamp(20px, 1.85vw, 27px); line-height: 1.4; font-weight: 300; font-stretch: 94%; letter-spacing: -.01em; color: #fff; }
.rb-q mark { background: rgba(127, 208, 245, .16); color: #fff; font-weight: 400; border-radius: 4px; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rb-law-note { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: clamp(20px, 2.4vw, 32px); align-self: start; }
.rb-law-note p:not(.src) { font-size: 16.5px; line-height: 1.6; color: var(--on-night); margin: 0 0 14px; }

/* how to check: steps beside a drawn page of the PDF */
.rb-check { padding: clamp(64px, 7vw, 112px) 0 clamp(40px, 4vw, 64px); }
.rb-check-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5.4vw, 96px); align-items: start; }
.rb-check-lede { color: var(--ink-2); margin: 0 0 22px; max-width: 36em; }
.rb-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.rb-steps li { position: relative; padding: 20px 0 18px 72px; border-top: 1px solid var(--line); }
.rb-steps li:last-child { border-bottom: 1px solid var(--line); }
.rb-sn { position: absolute; left: 0; top: 18px; font-stretch: 125%; font-weight: 780; font-size: 40px; line-height: 1; letter-spacing: -.04em; color: var(--blue-ink); }
.rb-steps h3 { font-size: 22px; font-stretch: 88%; margin: 0 0 6px; }
.rb-steps p:not(.src) { font-size: 16.5px; color: var(--ink-2); margin: 0 0 6px; max-width: 36em; }
.rb-sheet-fig { margin: 8px 0 0; position: sticky; top: calc(var(--nav) + 28px); }
.rb-sheet { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 22px clamp(18px, 2.2vw, 30px) 28px; box-shadow: 0 2px 0 var(--paper-2), 0 4px 0 rgba(15, 27, 36, .06), 0 44px 90px -54px rgba(15, 27, 36, .55); }
.rb-sheet-pg { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--mute); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rb-sheet-c { margin: 20px 0 14px; text-align: center; font-size: 16px; font-weight: 700; font-stretch: 100%; letter-spacing: .1em; color: var(--ink); }
.rb-sheet-h, .rb-sheet-r { display: grid; grid-template-columns: 30px minmax(0, 1.5fr) minmax(0, 1fr) 56px; gap: 12px; }
.rb-sheet-h { padding: 9px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.rb-sheet-r { padding: 16px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.rb-sheet-r.hl { background: var(--blue-soft); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.rb-sheet-r .n { font-family: var(--mono); font-size: 13px; color: var(--ink); padding-left: 4px; }
.rb-sheet-r .o { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rb-sheet-r .o i { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 4px; }
.rb-sheet-r .c { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.rb-sheet-r .lg { width: 52px; height: 52px; border-radius: 8px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.rb-sheet-fig figcaption { margin-top: 22px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--mute); max-width: 44em; }

/* two questions about the list */
.rb-qs { padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 5vw, 80px); }
.rb-q2 { display: grid; grid-template-columns: 96px minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(20px, 3.4vw, 56px); padding: clamp(36px, 4vw, 56px) 0; border-top: 1.5px solid var(--ink); }
.rb-q2-n { margin: 0; font-stretch: 125%; font-weight: 780; font-size: clamp(40px, 4vw, 56px); line-height: .85; letter-spacing: -.04em; color: var(--blue-ink); }
.rb-q2 h3 { margin: 0; font-size: clamp(26px, 2.5vw, 38px); font-stretch: 82%; line-height: 1.04; }
.rb-q2 > div p { color: var(--ink-2); max-width: 40em; margin: 0 0 16px; }

/* what the list means: four cases in one ruled panel, each with who certifies */
.rb-you { padding: 0 0 clamp(64px, 7vw, 104px); }
.rb-you .kicker { padding-top: clamp(40px, 4.4vw, 64px); border-top: 1.5px solid var(--ink); }
.rb-you-lede { color: var(--ink-2); margin: 0 0 clamp(22px, 2.6vw, 34px); max-width: 40em; }
.rb-cases { list-style: none; margin: 0; padding: 0 clamp(20px, 3vw, 44px); background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 80px -64px rgba(15, 27, 36, .45); }
.rb-case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(24px, 4vw, 64px); padding: clamp(24px, 2.8vw, 36px) 0; border-top: 1px solid var(--line); }
.rb-case:first-child { border-top: 0; }
.rb-case-h { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.rb-case-h .ico { width: 64px; height: 64px; margin-top: -6px; }
.rb-case-h h3 { margin: 4px 0 0; font-size: clamp(22px, 2vw, 28px); font-stretch: 84%; line-height: 1.08; }
.rb-case-b > p { color: var(--ink-2); margin: 0 0 8px; max-width: 44em; }
.rb-routes { list-style: none; margin: 10px 0 0; padding: 0; }
.rb-routes > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-top: 1px dashed var(--line); }
.rb-routes > li > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.rb-routes p { margin: 2px 0 0; color: var(--ink-2); }
.rb-case-more { margin-top: 10px !important; font-size: 15.5px; }
.rb-fit { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 8px clamp(24px, 3vw, 40px); align-items: start; margin-top: 18px; padding: 24px 28px; border-left: 4px solid var(--green); border-radius: 24px; }
.rb-fit .note-t { padding-top: 3px; }
.rb-fit > div p:not(.src) { font-size: 16px; color: var(--ink-2); max-width: 46em; }
.rb-fit-act { align-self: center; }

/* ======================================================================== 2. JAKIM vs foreign */
.vs-kick { margin-top: clamp(28px, 4vw, 56px); }
.vs-head { position: relative; }
.vs-head::before { content: ''; position: absolute; top: -8px; bottom: 26px; left: 50%; border-left: 2px dashed var(--mute); opacity: .55; }
.vs-h1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(56px, 7vw, 120px); margin: 0 !important; }
.vs-h1 .b { font-weight: 720; letter-spacing: -.028em; text-align: right; }
.vs-h1 .l { font-weight: 280; }
.vs-hinge { position: relative; margin: clamp(18px, 2vw, 26px) 0 0; text-align: center; }
.vs-hinge span { display: inline-block; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 999px; padding: 9px 18px; }
.vs-answer { max-width: 44em; margin: clamp(22px, 2.6vw, 34px) auto 0; }
.vs-scene { margin: clamp(36px, 4vw, 56px) 0 0; }
.vs-board { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(18px, 2.4vw, 34px); background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 48px 48px; box-shadow: 0 34px 90px -60px rgba(15, 27, 36, .5); }
.vs-board .iso { max-height: 420px; margin: 0 auto; }
.vs-legend { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(56px, 7vw, 120px); margin-top: clamp(22px, 2.4vw, 32px); }
.vs-legend::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--mute); opacity: .55; }
.vs-lg-k { display: flex; align-items: center; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.vs-lg dl { margin: 0; }
.vs-lg dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.vs-lg dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-top: 2px; }
.vs-lg dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.vs-scene figcaption { margin: 22px auto 0; max-width: 62em; text-align: center; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--mute); }

.vs-cmp-sec { padding: clamp(8px, 2vw, 32px) 0 clamp(56px, 6vw, 88px); }
.vs-cmp-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 88px); align-items: end; }
.vs-cmp-head .rt-h2 { margin: 0; }
.vs-cmp-head > p { color: var(--ink-2); max-width: 36em; margin: 0; }
.vs-cmp { margin-top: clamp(28px, 3vw, 40px); }
.vs-cmp thead th.vs-h-my, .vs-cmp thead th.vs-h-ab { font-family: var(--f); font-size: 20px; font-weight: 700; font-stretch: 84%; letter-spacing: -.01em; text-transform: none; color: var(--ink); padding-top: 18px; padding-bottom: 16px; }
.vs-cmp thead th small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.vs-cmp thead th.vs-h-my { box-shadow: inset 0 4px 0 var(--ink); }
.vs-cmp thead th.vs-h-ab { box-shadow: inset 0 1.5px 0 var(--ink), inset 0 3px 0 var(--paper), inset 0 4.5px 0 var(--ink); }
.vs-cmp td { line-height: 1.55; }
.vs-rh { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.vs-rh .ico { width: 40px; height: 40px; }
.vs-cell { list-style: none; margin: 8px 0 8px; padding: 0; }
.vs-cell li { padding: 7px 0; border-top: 1px solid var(--line-2); }
.vs-cell li:last-child { border-bottom: 1px solid var(--line-2); }
.vs-cell b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.vs-cmp td.vs-no { vertical-align: middle; text-align: center; background: repeating-linear-gradient(135deg, transparent 0 10px, var(--line-2) 10px 11px), var(--paper); }
.vs-set { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 6px 12px; }
.vs-why { display: block; margin: 10px auto 0; max-width: 18em; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 981px) {
  .vs-cmp .tscroll { overflow: clip; }
  .vs-cmp table { table-layout: fixed; }
  .vs-cmp thead th:first-child { width: 20%; }
  .vs-cmp thead th.vs-h-my, .vs-cmp thead th.vs-h-ab { width: 40%; }
  .vs-cmp thead th { position: sticky; top: var(--nav); z-index: 2; }
  .vs-cmp td + td, .vs-cmp th + th { border-left: 1.5px dashed var(--line); }
}

.vs-when { background: var(--paper-2); padding: clamp(64px, 7vw, 112px) 0; }
.vs-when .rt-h2 { max-width: 15em; margin-bottom: clamp(30px, 3.4vw, 48px); }
.vs-when-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vs-when-in::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--mute); opacity: .55; }
.vs-side { padding: 0 clamp(24px, 4vw, 72px); }
.vs-side:first-child { padding-left: 0; }
.vs-side:last-child { padding-right: 0; }
.vs-side-k { display: flex; align-items: center; margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 34px); font-stretch: 84%; line-height: 1.05; }
.vs-side ul { list-style: none; margin: 0; padding: 0; }
.vs-side li { position: relative; padding: 15px 0 15px 36px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.vs-side li::before { content: ''; position: absolute; left: 0; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.vs-watch { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-items: start; margin-top: clamp(32px, 3.6vw, 48px); padding: 22px 26px; background: var(--white); border: 1px solid var(--line); border-radius: 24px; }
.vs-watch .ico { width: 64px; height: 64px; }
.vs-watch p { margin: 0 0 12px; color: var(--ink-2); max-width: 52em; }
.vs-watch p:last-child { margin-bottom: 0; }
.vs-watch b { color: var(--ink); }
.vs-watch .vs-watch-k { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 4px 0 10px; }

.vs-qs { padding: clamp(40px, 4vw, 64px) 0 clamp(64px, 7vw, 104px); }
.vs-q { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); padding: clamp(40px, 4.4vw, 64px) 0; border-top: 1.5px solid var(--ink); }
.vs-q:first-child { border-top: 0; }
.vs-q-l { position: sticky; top: calc(var(--nav) + 28px); align-self: start; }
.vs-q-n { margin: 0 0 16px; font-stretch: 125%; font-weight: 780; font-size: clamp(40px, 4vw, 60px); line-height: .8; letter-spacing: -.04em; color: var(--blue-ink); }
.vs-q h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); font-stretch: 82%; line-height: 1.02; max-width: 14em; }
.vs-q-r > p { color: var(--ink-2); max-width: 38em; }
.vs-list, .cm-dash { list-style: none; margin: 0 0 1em; padding: 0; max-width: 40em; }
.vs-list li, .cm-dash li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); line-height: 1.55; }
.vs-list li::before, .cm-dash li::before { content: ''; position: absolute; left: 2px; top: 21px; width: 12px; height: 2px; background: var(--blue); }
.vs-checks { list-style: none; counter-reset: ck; margin: 0 0 1em; padding: 0; max-width: 40em; }
.vs-checks li { counter-increment: ck; position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; }
.vs-checks li::before { content: counter(ck, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--blue-ink); }
.vs-checks b { color: var(--ink); }

/* ======================================================================== 3. contract manufacturing */
.cm-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cm-copy h1 { margin-bottom: 24px; }
.cm-fig { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 calc((min(100vw, var(--max)) - 100vw) / 2 - var(--gut)) 0 0; border-right: 0; border-radius: 24px 0 0 24px; padding: clamp(20px, 2.6vw, 40px) clamp(20px, 3vw, 48px) clamp(18px, 2vw, 28px); }
.cm-fig .iso { grid-row: 1; grid-column: 1; max-height: 460px; max-width: 760px; }
.cm-fig figcaption { grid-row: 3; max-width: 52em; margin-top: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--mute); }
.cm-call { grid-row: 2; grid-column: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; margin: 16px 0 0; max-width: none; padding: 14px 16px 6px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 50px -30px rgba(15, 27, 36, .5); }
.cm-call p { margin: 0; }
.cm-call .cm-call-k { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); padding-bottom: 8px; }
.cm-call-r { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.cm-call-r .cm-call-n { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--blue-ink); padding-top: 2px; }
.cm-call-r span b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.cm-call-r .rt-sw { margin: 3px 0 0; }
.cm-call-r .rt-sw.ln { width: 16px; margin-top: 9px; }

.cm-two { padding: clamp(8px, 2vw, 32px) 0 clamp(56px, 6vw, 88px); }
.cm-two-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.cm-two-head .rt-h2 { margin: 0; }
.cm-two-head p:not(.src):not(.kicker) { margin: 0 0 8px; color: var(--ink-2); max-width: 36em; }
.cm-dia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .62fr) minmax(0, 1fr); grid-template-areas: "maker hinge owner" ". drop ." "prod prod prod"; align-items: stretch; margin: clamp(36px, 4vw, 56px) 0 0; }
.cm-maker { grid-area: maker; }
.cm-owner { grid-area: owner; }
.cm-hinge { grid-area: hinge; }
.cm-drop { grid-area: drop; }
.cm-prod { grid-area: prod; justify-self: center; width: min(100%, 860px); }
.cm-party, .cm-prod { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 2.2vw, 30px); box-shadow: 0 34px 80px -58px rgba(15, 27, 36, .5); }
.cm-pk { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.cm-pt { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.cm-pt .ico { width: 56px; height: 56px; }
.cm-pt p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.cm-pt p b { display: block; margin-bottom: 4px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; font-stretch: 84%; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); }
.cm-party dl, .cm-prod dl { margin: 0; }
.cm-party dl div, .cm-prod dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.cm-party dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-party dt, .cm-prod dt { padding-top: 3px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.cm-party dd, .cm-prod dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.cm-prod dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.cm-prod dl div:nth-last-child(-n+2) { border-bottom: 0; }
.cm-hinge { position: relative; display: grid; grid-template-columns: minmax(14px, 1fr) auto minmax(14px, 1fr); align-items: center; overflow: hidden; }
.cm-line { display: block; border-top: 2px dashed var(--ink-2); }
.cm-doc { position: relative; display: grid; justify-items: center; gap: 8px; max-width: 210px; padding: 0 6px; text-align: center; }
.cm-doc::after { content: ''; position: absolute; left: 50%; top: 100%; height: 1200px; border-left: 2px dashed var(--ink-2); }
.cm-doc .cm-big { width: 108px; height: 108px; background: var(--paper); border-radius: 50%; }
.cm-doc p { margin: 0; padding: 0 0 6px; background: var(--paper); font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.cm-doc p b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 680; font-stretch: 90%; line-height: 1.2; color: var(--ink); }
.cm-drop { display: grid; justify-items: center; height: 44px; }
.cm-drop span { display: block; height: 100%; border-left: 2px dashed var(--ink-2); }

.cm-night h2 { max-width: 17em; }
.cm-night-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid rgba(255, 255, 255, .16); }
.cm-nq p { margin: 0 0 12px; }
.cm-nq .cm-nq-n { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: #7FD0F5; }
.cm-nq p:not(.cm-nq-n):not(.src) { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; font-weight: 300; font-stretch: 94%; color: #fff; }
.cm-night-note { margin: clamp(24px, 3vw, 36px) 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--on-night-2); max-width: 60em; }

.cm-rules { background: var(--paper-2); padding: clamp(64px, 7vw, 112px) 0; }
.cm-panel { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 3.6vw, 56px); box-shadow: 0 40px 100px -72px rgba(15, 27, 36, .5); }
.cm-panel-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4.4vw, 72px); align-items: end; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1.5px solid var(--ink); }
.cm-panel-head .rt-h2 { margin: 0; }
.cm-panel-head > p { margin: 0; font-size: 16.5px; color: var(--ink-2); }
.cm-grp { padding-top: clamp(26px, 3vw, 38px); }
.cm-grp + .cm-grp { border-top: 1px solid var(--line); margin-top: clamp(10px, 1.4vw, 18px); }
.cm-grp-h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; font-size: clamp(22px, 2vw, 28px); font-stretch: 84%; line-height: 1.1; }
.cm-grp-h span { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--mute); flex: none; }
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-grp:nth-child(2) .cm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-rule { padding: 22px clamp(18px, 2.2vw, 32px) 18px; border-left: 1px solid var(--line); }
.cm-list > .cm-rule:first-child { border-left: 0; padding-left: 0; }
.cm-grp:nth-child(2) .cm-rule:nth-child(odd) { border-left: 0; padding-left: 0; }
.cm-grp:nth-child(2) .cm-rule:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.cm-rn { display: block; margin-bottom: 14px; font-stretch: 125%; font-weight: 780; font-size: 44px; line-height: .8; letter-spacing: -.04em; color: var(--blue-ink); }
.cm-rule p:not(.src) { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cm-rule strong { color: var(--ink); font-weight: 680; }
.cm-fees { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.cm-fees > li { padding: 20px clamp(14px, 1.6vw, 22px) 16px; border-left: 1px solid var(--line); }
.cm-fees > li:first-child { border-left: 0; padding-left: 0; }
.cm-fees .ico { width: 44px; height: 44px; margin: 0 0 8px -4px; }
.cm-fee-v { margin: 0 0 8px; font-stretch: 100%; font-weight: 760; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; letter-spacing: -.03em; color: var(--blue-ink); white-space: nowrap; }
.cm-fee-v .cm-rn { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; font-stretch: 100%; letter-spacing: .1em; line-height: 1.2; color: var(--mute); }
.cm-fee-d { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cm-fee-note { margin: 18px 0 0; padding: 16px 18px; background: var(--paper); border-radius: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cm-panel > .src { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.cm-index { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cm-index a { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 15.5px; font-weight: 600; transition: border-color .25s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.cm-index a:hover { border-color: var(--blue-ink); transform: translateY(-2px); }
.cm-index .ico { width: 40px; height: 40px; flex: none; }

.cm-chaps { padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 7vw, 104px); }
.cm-ch { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); column-gap: clamp(28px, 5vw, 88px); padding: clamp(40px, 4.4vw, 64px) 0; border-top: 1.5px solid var(--ink); scroll-margin-top: calc(var(--nav) + 12px); }
.cm-ch:first-child { border-top: 0; }
.cm-ch > * { grid-column: 2; }
.cm-ch > .cm-ch-l { grid-column: 1; grid-row: 1 / span 30; align-self: start; position: sticky; top: calc(var(--nav) + 28px); }
.cm-ch-top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.cm-ch-l h2 { margin: 0; font-size: clamp(34px, 3.2vw, 48px); font-stretch: 82%; line-height: 1.02; }
.cm-ch-l h2 span { font-weight: 300; }
.cm-ch-top .ico { width: 56px; height: 56px; margin-left: -4px; }
.cm-ch-top p { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
.cm-ch > p, .cm-ch > h3 { max-width: 42rem; }
.cm-ch > p { color: var(--ink-2); margin: 0 0 18px; }
.cm-ch > h3 { margin: 26px 0 10px; font-size: clamp(22px, 1.9vw, 27px); font-stretch: 86%; line-height: 1.12; }
.cm-ch > h3:first-of-type { margin-top: 0; }
.cm-dash li { font-size: 16.5px; }
.cm-steps { list-style: none; margin: 0 0 18px; padding: 0; max-width: 42rem; }
.cm-steps li { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.cm-steps li:last-child { border-bottom: 1px solid var(--line); }
.cm-steps .rt-tag { margin: 2px 0 0; justify-self: start; }
.cm-steps p { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }
.cm-due { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); border-radius: 6px; padding: 2px 8px; white-space: nowrap; vertical-align: 1px; }
.cm-ready { max-width: 42rem; margin: 6px 0 0; padding: 24px 26px 22px; border-left: 4px solid var(--green); border-radius: 24px; }
.cm-ready ul { list-style: none; margin: 0 0 12px; padding: 0; }
.cm-ready li { position: relative; padding: 8px 0 8px 30px; border-top: 1px solid rgba(60, 122, 18, .18); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.cm-ready li::before { content: ''; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* ======================================================================== responsive */
@media (max-width: 1180px) {
  .rb-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-col:nth-child(3) { border-left: 0; }
  .rb-col:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .rb-fit { grid-template-columns: minmax(0, 1fr); }
  .rb-fit-act { align-self: start; }
  .cm-fees { grid-template-columns: 1fr; }
  .cm-fees > li, .cm-fees > li:first-child { display: grid; grid-template-columns: 44px minmax(150px, 210px) minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .cm-fees > li:last-child { border-bottom: 0; }
  .cm-fees .ico { margin: 0; grid-row: 1 / span 2; }
  .cm-fees .cm-fee-d, .cm-fees .src { grid-column: 3; }
  .cm-fees .cm-fee-v { grid-row: 1 / span 2; }
  .cm-fees .cm-fee-d { grid-row: 1; }
  .cm-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .rb-hgrid { grid-template-columns: minmax(0, 1fr) 200px; }
  .rb-cab { padding: 10px 12px; }
  .rb-cab .iso { max-height: 170px; }
  .rb-cab figcaption { display: none; }
  .rb-reg-head, .rb-check-in, .vs-cmp-head, .cm-top, .cm-two-head, .cm-panel-head { grid-template-columns: 1fr; }
  .rb-spread { max-width: 420px; }
  .rb-reg-body { grid-template-columns: 1fr; }
  .rb-az { position: static; }
  .rb-az ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .rb-az a { width: 34px; height: 34px; }
  .rb-az .rb-az-x { display: none; }
  .rb-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .rb-cycle::before { display: none; }
  .rb-law-in { grid-template-columns: 1fr; }
  .rb-law-note { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 22px; }
  .rb-sheet-fig { position: static; max-width: none; }
  .rb-q2 { grid-template-columns: 72px minmax(0, 1fr); row-gap: 16px; }
  .rb-q2 > div { grid-column: 2; }
  .rb-case { grid-template-columns: 1fr; row-gap: 14px; }
  .vs-q { grid-template-columns: 1fr; gap: 18px; }
  .vs-q-l { position: static; }
  .cm-fig { margin-right: calc(-1 * var(--gut)); }
  .cm-dia { grid-template-columns: 1fr; grid-template-areas: "maker" "hinge" "owner" "drop" "prod"; }
  .cm-hinge { grid-template-columns: 1fr; justify-items: center; overflow: visible; padding: 8px 0; }
  .cm-line { width: 0; height: 26px; border-top: 0; border-left: 2px dashed var(--ink-2); }
  .cm-doc { max-width: 340px; }
  .cm-doc::after { display: none; }
  .cm-prod dl { grid-template-columns: 1fr; }
  .cm-prod dl div:nth-last-child(2) { border-bottom: 1px solid var(--line-2); }
  .vs-lg dl div { grid-template-columns: 96px minmax(0, 1fr); }
  .cm-ch { grid-template-columns: 1fr; }
  .cm-ch > *, .cm-ch > .cm-ch-l { grid-column: 1; grid-row: auto; position: static; }
  .cm-ch-l { margin-bottom: 20px; }
}
/* 641-980px: the comparison stays a real two-column table (pages.css stacks tables below 980px) */
@media (min-width: 641px) and (max-width: 980px) {
  .pg-table.vs-cmp thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .pg-table.vs-cmp table { display: table; table-layout: fixed; width: 100%; }
  .pg-table.vs-cmp tbody { display: table-row-group; }
  .pg-table.vs-cmp tbody tr, .pg-table.vs-cmp thead tr { display: table-row; padding: 0; }
  .pg-table.vs-cmp tbody th, .pg-table.vs-cmp td, .pg-table.vs-cmp thead th { display: table-cell; width: auto; padding: 14px 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .pg-table.vs-cmp thead th:first-child { width: 22%; }
  .pg-table.vs-cmp thead th.vs-h-my, .pg-table.vs-cmp thead th.vs-h-ab { font-size: 17px; }
  .pg-table.vs-cmp tbody tr:last-child > * { border-bottom: 0; }
  .pg-table.vs-cmp td + td { border-left: 1.5px dashed var(--line); }
  .pg-table.vs-cmp td::before { content: none; }
  .pg-table.vs-cmp td { padding-left: 14px; }
  .vs-rh { grid-template-columns: 1fr; row-gap: 6px; }
  .vs-rh .ico { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  .rb-lead { grid-template-columns: 1fr; }
  .vs-head::before, .vs-legend::before { display: none; }
  .vs-h1 { grid-template-columns: 1fr; }
  .vs-h1 .b { text-align: left; }
  .vs-hinge { text-align: left; }
  .vs-legend { grid-template-columns: 1fr; row-gap: 22px; }
  .vs-when-in { grid-template-columns: 1fr; }
  .vs-when-in::before { display: none; }
  .vs-side, .vs-side:first-child, .vs-side:last-child { padding: 0; }
  .vs-side + .vs-side { margin-top: 32px; padding-top: 32px; border-top: 2px dashed var(--line); }
}
@media (max-width: 640px) {
  .rb-hgrid { grid-template-columns: 1fr; grid-template-areas: "title" "count" "lead"; }
  .rb-cab { display: none; }
  .rb-count { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-k dd { font-size: 40px; }
  .rb-date { grid-column: 1 / -1; border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); margin-top: 18px; }
  .rb-ledger { grid-template-columns: 1fr; padding: 4px 0; }
  .rb-col + .rb-col { border-left: 0; border-top: 0; }
  .rb-col .rb-cont { display: none; }
  .rb-col .rb-cont + .rb-cty { border-top: 1px solid var(--line-2); }
  .rb-l { padding: 12px 16px 6px; }
  .rb-letter { font-size: 24px; padding-bottom: 6px; }
  .rb-cycle { grid-template-columns: 1fr; row-gap: 26px; }
  .rb-cycle::before { display: block; left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; }
  .rb-st { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 0; }
  .rb-st > b { grid-row: 1 / span 3; margin: 0; }
  .rb-st h3 { padding-top: 10px; }
  .rb-q { grid-template-columns: 1fr; gap: 6px; }
  .rb-q .rb-q-n { padding-top: 0; }
  .rb-steps li { padding-left: 58px; }
  .rb-sn { font-size: 34px; }
  .rb-sheet-h, .rb-sheet-r { grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1fr) 36px; gap: 8px; }
  .rb-sheet-r .lg { width: 36px; height: 36px; }
  .rb-sheet-r .o { font-size: 13px; }
  .rb-sheet-r .c { font-size: 12px; }
  .rb-q2 { grid-template-columns: 1fr; }
  .rb-q2 > div { grid-column: 1; }
  .rb-case-h { grid-template-columns: 48px minmax(0, 1fr); }
  .rb-case-h .ico { width: 48px; height: 48px; margin-top: -2px; }
  .rb-fit { padding: 20px 20px; }
  .pg-table.vs-cmp thead tr, .pg-table.vs-cmp thead th { display: inline; padding: 0; }
  .vs-cmp td.vs-sp { border-left: 3px solid var(--ink); padding-left: 12px; margin-top: 8px; }
  .vs-cmp td.vs-fh { border-left: 4px double var(--ink); padding-left: 12px; margin-top: 8px; }
  .vs-cmp td.vs-no { text-align: left; padding: 10px 12px; }
  .vs-why { margin-left: 0; }
  .vs-lg dl div { grid-template-columns: 96px minmax(0, 1fr); }
  .vs-watch { grid-template-columns: 1fr; padding: 20px; }
  .vs-watch .ico { width: 48px; height: 48px; }
  .cm-call { grid-template-columns: 1fr; box-shadow: none; }
  .cm-fig figcaption { grid-row: 3; }
  .cm-party dl div, .cm-prod dl div { grid-template-columns: 1fr; gap: 2px; }
  .cm-prod dl { grid-template-columns: 1fr; }
  .cm-prod dl div:nth-last-child(2) { border-bottom: 1px solid var(--line-2); }
  .cm-night-in { grid-template-columns: 1fr; }
  .cm-list, .cm-grp:nth-child(2) .cm-list { grid-template-columns: 1fr; }
  .cm-rule, .cm-list > .cm-rule:first-child, .cm-grp:nth-child(2) .cm-rule:nth-child(odd) { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .cm-rule:last-child { border-bottom: 0 !important; }
  .cm-rule > * { grid-column: 2; }
  .cm-rule > .cm-rn { grid-column: 1; grid-row: 1 / span 2; font-size: 32px; margin: 2px 0 0; }
  .cm-fees > li, .cm-fees > li:first-child { grid-template-columns: 40px minmax(0, 1fr); }
  .cm-fees .ico { width: 40px; height: 40px; grid-row: 1; }
  .cm-fees .cm-fee-v { grid-row: 1; grid-column: 2; }
  .cm-fees .cm-fee-d, .cm-fees .src { grid-column: 1 / -1; grid-row: auto; }
  .cm-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-index a { border-radius: 18px; font-size: 14px; padding: 10px 12px 10px 10px; }
  .cm-steps li { grid-template-columns: 1fr; row-gap: 6px; }
}