/* collect.quest — the launch site's shared shell (export17, 6 Oct 2026).
   Both skins: dark is the default; light follows the visitor's system setting
   (prefers-color-scheme), and [data-theme] on <html> forces either for review.
   Tokens were sampled from the export17 renders, not invented. Pages that still
   use vault.css are untouched until their own batch moves them across. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --bg:#080706;
  --panel:#0E0D0B;
  --rule:#2A2620;
  --text:#F0E9DA;
  --text-2:#CFC7B8;
  --text-3:#9C9486;
  --accent:#D8A94E;          /* eyebrows, links */
  --btn:#D8A94E;             /* solid button */
  --btn-text:#17140F;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --wrap:1152px;
  --gutter:64px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F6F1E7; --panel:#FBF8F2; --rule:#D8CFBE;
    --text:#17140F; --text-2:#3B352B; --text-3:#6B6355;
    --accent:#7A5714; --btn:#17140F; --btn-text:#F6F1E7;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F6F1E7; --panel:#FBF8F2; --rule:#D8CFBE;
  --text:#17140F; --text-2:#3B352B; --text-3:#6B6355;
  --accent:#7A5714; --btn:#17140F; --btn-text:#F6F1E7;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-2);font:400 18px/1.56 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--btn);color:var(--btn-text);padding:8px 12px;border-radius:6px}

.eyebrow{font:500 13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 30px}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--text);letter-spacing:-.01em;margin:0}
.h1{font-size:52px;line-height:1;max-width:12em}
.h1.narrow{max-width:9.2em}
.h2{font-size:48px;line-height:1.04}
.lede{font-size:19px;line-height:31px;color:var(--text-2);margin:28px 0 0;max-width:680px}
.body{font-size:18px;line-height:28px;color:var(--text-2);margin:20px 0 0;max-width:740px}
.note{font-size:16px;line-height:24px;color:var(--text-3)}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:999px;background:var(--btn);color:var(--btn-text);font:600 17px/1 var(--sans);text-decoration:none;white-space:nowrap}
.btn.small{height:42px;padding:0 22px;font-size:15px}
.arrow{color:var(--accent);font:500 17px/1 var(--sans);text-decoration:none;white-space:nowrap}
.arrow::after{content:" \2192"}
.arrow:hover,.btn:hover{text-decoration:underline;text-underline-offset:4px}
.ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ⛔ RETIRED BY NAV-SHELL-2 (2026-10-10): no page uses the rules in this block any more.
   Every page's header, menu and footer now come from assets/shell.css, rendered
   by scripts/site-shell.mjs, and scripts/test-site-shell.mjs fails a page that
   uses these old classes. Kept, not deleted, for the rulings recorded in the
   comments here; delete together once nothing needs the history. */
/* ---------- header ---------- */
.mark{display:block;width:72px;height:26px;background:var(--text);
  -webkit-mask:url(/assets/brand/quest-wordmark-cream.svg) no-repeat left center/contain;
          mask:url(/assets/brand/quest-wordmark-cream.svg) no-repeat left center/contain}
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;height:83px;gap:28px}
.top-nav{display:flex;gap:28px;margin-left:auto;margin-right:auto}
.top-nav a,.top-util a.signin{font:500 15px/1 var(--sans);color:var(--text-2);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.top-nav a:hover{color:var(--text)}
.top-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.top-util{display:flex;align-items:center;gap:32px}
.top-util a.signin{color:var(--text)}

/* phone menu: a <details>, no JavaScript */
.menu{display:none}
.menu>summary{list-style:none;cursor:pointer;width:48px;height:48px;border:1px solid var(--rule);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text)}
.menu>summary::-webkit-details-marker{display:none}
.menu .i-close{display:none}
.menu[open] .i-open{display:none}
.menu[open] .i-close{display:block}
.sheet{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--rule);padding:6px 20px 24px}
.sheet a.row{display:flex;justify-content:space-between;align-items:center;height:53px;border-bottom:1px solid var(--rule);font:500 18px/1 var(--sans);color:var(--text);text-decoration:none}
.sheet a.row[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sheet .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.sheet .pair a{display:flex;align-items:center;justify-content:center;height:50px;border:1px solid var(--rule);border-radius:999px;color:var(--text);text-decoration:none;font:500 16px/1 var(--sans)}

/* ---------- sections ---------- */
.sec{border-top:1px solid var(--rule);padding:96px 0}
.sec:first-of-type{border-top:0}
.hero{padding:118px 0 112px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:center}
.split.wide-art{grid-template-columns:minmax(0,1fr) minmax(0,560px)}
.split.art-left{grid-template-columns:320px minmax(0,1fr)}
.split.art-left .art{order:-1}
.split.art-left.art-wide{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.dash{list-style:none;padding:0;margin:26px 0 0;max-width:460px}
.dash li{position:relative;padding-left:24px;margin:0 0 12px;font-size:16px;line-height:23px;color:var(--text-2)}
.dash li::before{content:"\2014";position:absolute;left:0;color:var(--accent)}

/* app frames: drawn in the design, replaced by real app captures before
   publication. Until then each is an honest placeholder, never mock data. */
.frames{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:22px 22px;margin-top:36px}
.frame{position:relative;border:1px solid var(--rule);border-radius:28px;background:var(--panel);min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.frame.tall{min-height:440px}
.frame.short{min-height:300px}
.frame .pending{font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.frame .what{font:400 22px/1.15 var(--serif);color:var(--text);margin:0}
.frame .why{font-size:13px;line-height:18px;color:var(--text-3);margin:10px 0 0;max-width:240px}
.cap{display:flex;gap:10px;align-items:baseline;margin:14px 0 0;font:500 17px/1.3 var(--sans);color:var(--text-2)}
.cap b{font:500 13px/1 var(--mono);color:var(--accent);letter-spacing:.06em}
.art-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.art-pair.duo .frame{min-height:270px}

.band{border:1px solid var(--rule);border-radius:22px;background:var(--panel);text-align:center;padding:84px 32px}
.band .ctas{justify-content:center}
.band .body{max-width:560px;margin-left:auto;margin-right:auto}
.band .free{color:var(--accent);font-weight:600;font-size:16px;margin:18px 0 0}

/* ⛔ RETIRED BY NAV-SHELL-2 (2026-10-10): no page uses the rules in this block any more.
   Every page's header, menu and footer now come from assets/shell.css, rendered
   by scripts/site-shell.mjs, and scripts/test-site-shell.mjs fails a page that
   uses these old classes. Kept, not deleted, for the rulings recorded in the
   comments here; delete together once nothing needs the history. */
/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:56px 0 34px;margin-top:96px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:24px}
.foot .mark{width:80px;height:29px}
.foot .line{font:italic 400 21px/27px var(--serif);color:var(--text-2);margin:18px 0 0;max-width:260px}
.foot h4{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin:6px 0 22px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 18px}
.foot li a{font-size:15px;color:var(--text-2);text-decoration:none}
.foot li a:hover{color:var(--text)}
.foot-base{display:flex;justify-content:space-between;border-top:1px solid var(--rule);margin-top:30px;padding-top:22px;font-size:14px;color:var(--text-3)}
.foot-base a{color:var(--text-3);text-decoration:none}

/* ---------- phone ---------- */
@media (max-width:1000px){
  .top-nav,.top-util a.signin{display:none}
  .menu{display:block}
  .top-util{margin-left:auto;gap:10px}
}
@media (max-width:760px){
  :root{--gutter:20px}
  body{font-size:16px}
  .top-in{height:71px}
  .mark{width:64px;height:23px}
  .sec.hero{padding:40px 0 52px}
  .sec{padding:56px 0}
  .eyebrow{font-size:12px;margin-bottom:22px}
  .h1{font-size:32px;line-height:33px;max-width:300px}
  .h2{font-size:32px;line-height:34px}
  .lede,.body{font-size:17px;line-height:28px;margin-top:20px}
  .split,.split.wide-art,.split.art-left,.split.art-left.art-wide{grid-template-columns:1fr;gap:36px}
  .frames{grid-template-columns:1fr}
  .frame{min-height:400px;width:100%;max-width:312px;margin:0 auto}
  .art-pair .frame{max-width:312px}
  .art-pair{grid-template-columns:1fr}
  .art-pair.duo{grid-template-columns:1fr 1fr;gap:12px}
  .art-pair.duo .frame{min-height:166px;padding:14px;border-radius:18px}
  .art-pair.duo .frame .what{font-size:16px}
  .art-pair.duo .frame .why{display:none}
  .band{padding:44px 20px;text-align:left}
  .band .ctas{justify-content:flex-start}
  .foot{margin-top:56px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 16px}
  .foot-brand{grid-column:1/-1}
  .foot-base{flex-direction:row;gap:12px;font-size:13px}
}

/* ---------- batch 2: Lexi, Products, Promoters, Partners ---------- */
/* A dependency marker. Visible on purpose: a claim or frame that rests on
   something not on main (a held PR, a gate, an unbuilt feature) says so on the
   page until the dependency lands. Never published while present. */
/* A screenshot frame hugs its image: the pending-frame min-height on .frame
   is for frames still waiting on a capture, and a shot is never pending.
   Without this a short capture floated centered in 420px of empty frame. */
.frame.shot{padding:10px;background:#000;justify-content:center;overflow:hidden;max-width:100%;min-height:0}
.frame.shot picture,.frame.shot img{display:block;width:100%;height:auto;border-radius:20px}
/* A capture with one image per skin: dark by default, light when the page is light
   (system setting, or [data-theme] forcing either), the same switch as the tokens above. */
.frame.shot picture.skin-light{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .frame.shot picture.skin-light{display:block}
  :root:not([data-theme="dark"]) .frame.shot picture.skin-dark{display:none}
}
:root[data-theme="light"] .frame.shot picture.skin-light{display:block}
:root[data-theme="light"] .frame.shot picture.skin-dark{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .frame.shot picture.skin-dark:only-child{display:block}}
:root[data-theme="light"] .frame.shot picture.skin-dark:only-child{display:block}
/* A card photograph (not a phone capture) sits on the page panel in the light
   skin rather than a black slab. Phone captures are framed below. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .frame.shot:not(.full):has(> picture){background:var(--panel);border-color:var(--rule);box-shadow:0 10px 28px rgba(20,22,27,.08)}
}
:root[data-theme="light"] .frame.shot:not(.full):has(> picture){background:var(--panel);border-color:var(--rule);box-shadow:0 10px 28px rgba(20,22,27,.08)}
/* How · the Haves hero: above phone width the capture and its note stack in
   one column, no wider than a 390px capture plus the frame's padding (narrower
   when the art column is). Phones keep the column above (≤760px). */
@media (min-width:761px){
  .art-pair.art-stack{grid-template-columns:minmax(0,412px);justify-content:center}
}
/* How · Wants: above phone width the capture keeps its full 390px in the art
   column and the listings frame sits under the text, so neither column runs
   on empty beside the other. Phones keep source order: text, capture, note,
   listings. */
@media (min-width:761px){
  .split.wants-flow{align-items:start;row-gap:40px}
  .split.wants-flow>.art-pair{display:contents}
  .split.wants-flow .art-shot{grid-column:2;grid-row:1/span 2;width:100%;max-width:412px;justify-self:center}
  .split.wants-flow .shot-under{grid-column:1;grid-row:2;width:100%;max-width:340px}
}
/* A caption for captures, set under the frames rather than inside one. */
.art-note{max-width:312px;margin:0 auto;text-align:center}
.art-note .what{font:400 18px/1.2 var(--serif);color:var(--text);margin:0}
.art-note .why{font-size:13px;line-height:18px;color:var(--text-3);margin:6px 0 0}
.art-note>.why:first-child{margin-top:0}
.art:not(.art-pair)>.art-note,.art-shot>.art-note,.shot-under>.art-note,#what-you-have .frames .art-note{margin-top:14px}
/* A full screenshot: the original image as it is, with a thin black border
   and nothing else (no bezel, no padding, no panel). Width-led with
   height:auto so the aspect ratio holds, and nothing that could crop it (no
   fixed height, no cover). The border sits on the image and follows the
   capture's own rounded corners, measured on the files and set in proportion
   (radius / width, radius / height), so the clip takes only the corner pixels
   outside the screen's own curve: 16px on the 1320x2868 captures (their
   corners are transparent, softened over ~2px); 11px on
   Insurance and beQuest; the spreadsheet capture is square. */
.frame.shot.full{padding:0;border:0;border-radius:0;background:none;box-shadow:none;min-height:0}
.frame.shot.full picture{border-radius:0}
.frame.shot.full img{box-sizing:border-box;border:1px solid #000;border-radius:1.212% / .558%;height:auto;max-width:100%;object-fit:contain;background:#0E0D0B}
/* Behind each capture, its own screen colour, so the softened (part
   see-through) corner pixels blend as they do on the phone, not into the page. */
.frame.shot.full img[src*="-light"]{background:#F2ECDB}
.frame.shot.full img:is([src$="/insurance-light-demo.png"],[src$="/insurance-dark-demo.png"]){border-radius:.833% / .384%}
/* A whole iPhone capture shown inside the iPhone 16 frame (Rob's supplied
   frame PNG, byte-identical, 1359x2736; screen opening x90..1268,
   y90..2645, corner radius ~185). The picture box IS the screen opening
   (a hair larger, under the bezel, so no seam shows), and the capture fills
   it edge to edge: object-fit cover, anchored at the top, so the app's top
   line always shows and anything extra comes off the bottom. Captures are
   prepared to the screen's shape first (status bar and Safari bar cut off,
   the app's own plain header and tab-bar colour run out to the edges), so
   in practice nothing is trimmed. Crop, never stretch. The frame is drawn
   over the capture, so a GIF keeps moving (Rob, ORD-20261020-2315). */
.frame.shot.full.phone{position:relative;padding:0;aspect-ratio:1359/2736;isolation:isolate}
.frame.shot.full.phone picture,.frame.shot.full.phone>img{position:absolute;left:6.55%;top:3.22%;width:86.9%;height:93.56%;margin:0;z-index:1}
.frame.shot.full.phone picture img{width:100%;height:100%}
.frame.shot.full.phone img,.frame.shot.full.phone img[src]{display:block;box-sizing:border-box;border:0;border-radius:15.726% / 7.238%;background:none;max-width:none;object-fit:cover;object-position:50% 0}
.frame.shot.full.phone::after{content:"";position:absolute;inset:0;background:url(/assets/device/iphone-16-black-portrait.png) 0 0/100% 100% no-repeat;z-index:2;pointer-events:none}
/* How · What you have: where a row holds a screenshot beside a pending frame,
   the pending frame grows to match so the numbered captions share a line. A
   screenshot frame never grows. */
#what-you-have .frames{align-items:start}
#what-you-have .frames>div{display:flex;flex-direction:column}
#what-you-have .frames>div>.frame:not(.shot){flex:1 1 auto}
/* Case · hero on a short desktop screen (≤820px tall): tighter vertical
   spacing so Start Here stays in the first view even when the headline wraps
   to five lines (it does on some systems' font rendering). Every type size is
   unchanged; taller screens and phones are untouched. */
@media (min-width:761px) and (max-height:820px){
  .sec.hero.case-hero{padding-top:28px}
  .case-hero .eyebrow{margin-bottom:20px}
  .case-hero .lede{margin-top:18px}
  .case-hero .ctas{margin-top:24px}
}
.frames.three{grid-template-columns:repeat(3,minmax(0,320px))}
/* Act · Trading Post: the picker sits left of the selling options at every
   width, phone included (Rob, ORD 2026-10-21: "(a) to be left of (b)"). */
.frames.trading-post-pair{grid-template-columns:repeat(2,minmax(0,340px))}
/* Product spec rows: YOU GET / USE IT / LIMITS / PRICE */
.spec{margin:26px 0 0;max-width:620px;border-top:1px solid var(--rule)}
.spec .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.spec dt{font:500 12px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.spec dd{margin:0;font-size:17px;line-height:26px;color:var(--text-2)}
.aside-note{border:1px solid var(--rule);border-radius:16px;background:var(--panel);padding:22px 26px;font-size:17px;line-height:27px;color:var(--text-2)}
/* Partners: topics in two columns */
.topics{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:30px}
.topic{border-top:1px solid var(--rule);padding:22px 0}
.topic h3{font-size:28px;line-height:1.15}
.topic p{margin:10px 0 0;font-size:17px;line-height:26px;color:var(--text-2)}
@media (max-width:1100px){.frames.three{grid-template-columns:repeat(2,minmax(0,320px))}}
@media (max-width:760px){
  .frames.three{grid-template-columns:1fr}
  .spec .row{grid-template-columns:1fr;gap:4px}
  .topics{grid-template-columns:1fr}
  .topic h3{font-size:24px}
}
/* Dealers: blocks carried verbatim from the live page */
.carried-photo figure{margin:0}
.carried-photo img{width:100%;height:auto;border-radius:22px;border:1px solid var(--rule)}
.carried-plain .plain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.carried-plain h2{font-size:28px;line-height:1.15}
.carried-plain p{margin:12px 0 0;font-size:17px;line-height:26px;color:var(--text-2)}
.dealer-band .dealer-cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px}
.dealer-band .dealer-cta .body{margin:0 auto;font-size:15px;line-height:23px;color:var(--text-3);max-width:560px}
.dealer-band .dealer-cta a:not(.btn){color:var(--accent)}
@media (max-width:760px){
  .carried-plain .plain{grid-template-columns:1fr;gap:28px}
  .carried-photo img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;object-position:40% 50%}
  .dealer-band .dealer-cta{align-items:flex-start}
  .dealer-band .dealer-cta .body{margin:0}
}

/* Card shop and show: two-up editorial photos */
.shop-show-photos{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.shop-show-photos .carried-photo{margin:0}
@media (max-width:760px){
  .shop-show-photos{grid-template-columns:1fr;gap:18px}
}

/* How It Works: eight-step grid */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 28px;margin-top:48px;align-items:start}
.step-num{font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--accent);margin:0 0 4px}
.step-title{font:600 20px/1.2 var(--serif);color:var(--text-1);margin:0 0 16px}
.step-line{font-size:17px;line-height:26px;color:var(--text-2);margin:16px 0 0}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
  .steps .frame:not(.shot){max-width:312px;margin-left:auto;margin-right:auto}
}
.step-wide{grid-column:1/-1;max-width:820px}
.grade-blocks{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px;align-items:start}
.grade-block{display:flex;flex-direction:column;gap:16px}
.grade-desc{font-size:.97rem;line-height:1.55;color:var(--txt);margin:0}
.grade-block .frame:not(.phone) img{max-height:480px;width:auto;object-fit:contain}
@media (max-width:760px){.step-wide{max-width:none}.grade-blocks{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto;gap:40px}.grade-block .frame:not(.phone) img{max-height:420px}}

/* ---------- pricing: the live page's content, carried verbatim ----------
   The live <main> (ledger generated by check-tier-copy-parity, the #755 ARC card,
   gift months, the pull line) moves into the new shell untouched. These are the
   live vault.css rules for exactly the classes it uses, scoped under .legacy and
   re-pointed at this shell's tokens so the light skin works. Rules are copied,
   not redesigned. */
.legacy{--ink:var(--bg);--line:var(--rule);--line-2:var(--rule);--line-3:var(--rule);--gold:var(--accent);--gold-dim:var(--accent);--text-4:var(--text-2);--text-5:var(--text-3)}
.legacy .hold{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.legacy .section{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(56px,7vw,92px)}
.legacy > .section{border-top:0}
.legacy > header.section{padding-bottom:clamp(36px,4.5vw,56px)}
.legacy > .section:not(header){padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(36px,4.5vw,64px)}
.legacy > .section:last-child{padding-bottom:clamp(64px,8vw,112px)}
.legacy h1.display{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.2vw,86px);line-height:1.02;letter-spacing:-.015em;color:var(--text);margin:0}
.legacy p.body-lg{font-size:clamp(16px,1.35vw,18px);line-height:1.62;color:var(--text-4);margin:0}
.legacy p.body{font-size:16px;line-height:1.65;color:var(--text-4);margin:0}
.legacy .visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legacy .ledger{width:100%;border-collapse:collapse;font-size:15px}
.legacy .ledger thead th{position:sticky;top:83px;z-index:5;background:var(--ink);padding:14px 8px;text-align:right;font-weight:400;vertical-align:bottom}
.legacy .ledger thead th:first-child{text-align:left}
.legacy .ledger .t-name{font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--text);display:block}
.legacy .ledger .t-price{font-family:var(--mono);font-size:clamp(12px,1.3vw,14px);color:var(--text-3);display:block;margin-top:4px;white-space:nowrap}
.legacy .ledger th.lit{background:var(--panel)}
.legacy .ledger th.lit .t-name{font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--gold)}
.legacy .ledger th.lit .t-price{color:var(--gold)}
.legacy .ledger td.lit{background:rgba(216,169,78,.06)}
.legacy .ledger tr.sec{border-top:0;padding:0}
.legacy .ledger .sec th{position:static;background:none;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-align:left;padding:clamp(30px,3.4vw,44px) 0 10px;border-bottom:1px solid var(--line-2)}
.legacy .ledger tbody td{padding:16px 8px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-size:clamp(13px,1.4vw,15px);color:var(--text-3);white-space:nowrap}
.legacy .ledger tbody th{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;font-family:var(--sans);font-size:clamp(14.5px,1.5vw,16px);color:var(--text-2);line-height:1.35}
.legacy .ledger .yes{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);vertical-align:middle}
.legacy .ledger .no{color:var(--text-5)}
.legacy .ledger th[scope="row"] summary{gap:8px}
.legacy .ledger th[scope="row"] .rowname{flex:0 1 auto}
.legacy .ledger th[scope="row"] .rowinfo{color:var(--gold-dim);opacity:1}
.legacy .ledger th[scope="row"] .rowline{font-size:13px;line-height:1.5;color:var(--text-4);opacity:1;margin-top:6px}
.legacy .ledger tbody tr:last-child th,.legacy .ledger tbody tr:last-child td{border-bottom:1px solid var(--line-2)}
.legacy .note{border:1px solid var(--line-2);border-radius:16px;background:var(--panel);padding:clamp(24px,3vw,34px);font-size:inherit;line-height:inherit;color:inherit}
.legacy .note h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,30px);color:var(--text)}
.legacy .note p{margin-top:14px;font-size:16px;line-height:1.65;color:var(--text-3);max-width:60ch}
.legacy .note a{color:var(--accent)}
.legacy .pull{border-left:2px solid var(--gold-dim);padding-left:clamp(18px,3vw,26px)}
.legacy .pull p{font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:var(--text-2);max-width:56ch;margin:0}
@media (min-width:900px){
  .legacy .ledger tbody td,.legacy .ledger tbody th{padding-top:20px;padding-bottom:20px}
  .legacy .ledger thead th{padding-bottom:20px}
  .legacy .ledger{table-layout:fixed}
  .legacy .ledger thead th:first-child{width:37%}
  .legacy .ledger thead th:not(:first-child){width:21%}
}
@media (max-width:760px){.legacy .ledger thead th{top:71px}}
@media (max-width:480px){
  .legacy .ledger{table-layout:fixed}
  .legacy .ledger thead th:first-child{width:38%}
  .legacy .ledger tbody td{white-space:normal;line-height:1.3;padding-top:14px;padding-bottom:14px}
  .legacy .ledger tbody th{padding-top:14px;padding-bottom:14px}
  .legacy .ledger th[scope="row"] .rowinfo{font-size:10.5px}
}
@media (max-width:400px){
  .legacy .ledger tbody td{padding-left:4px;padding-right:4px}
  .legacy .ledger tbody th{padding-right:8px;font-size:13.5px}
  .legacy .ledger thead th{padding-left:4px;padding-right:4px}
  .legacy .ledger .t-price{white-space:normal;font-size:11px;line-height:1.35}
  .legacy .ledger tbody td{font-size:12.5px}
}