/* Self-hosted, subset to the glyphs the pages use (Steve, 2026-09-24: keep the faces, the site has to be fast). Made by fontTools from the Google Fonts latin files; width axis pinned at 100. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("assets/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192-2193, U+2197, U+2605, U+2713; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192-2193, U+2197, U+2605, U+2713; }

/* GoldVara · Vault concept. Tokens first, then the page's own classes.
   Nothing here restyles .sc-stage, .sc-copy or any [data-sc-*] selector. */
:root {
  --sc-canvas: #0B0A08;
  --sc-surface: #16130F;
  --sc-ink: #F3ECDF;
  --sc-ink-soft: #AFA393;
  --sc-accent: #D8A83F;
  --sc-accent-ink: #15100A;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 30 30% 2%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
  --gold-2: #F1CC7A;         /* the lighter stop of the one accent, used only for hairlines on dark */
  --paper: #F6F0E4;          /* the receipt slip */
  --paper-ink: #15110C;
  --bar-h: 4.25rem;
}
html { background: var(--sc-canvas); }
body { color: var(--sc-ink); }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .5rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.sc-body { color: var(--sc-ink-soft); }
.sc-body strong, .sc-body b { color: var(--sc-ink); font-weight: 600; }
a { color: inherit; }
p a, li a, td a { text-decoration-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); }
p a:hover, li a:hover { color: var(--sc-accent); }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sec { padding-block: var(--sc-section); position: relative; }
.sec--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.sec--after-pin { padding-top: clamp(1.5rem, 4vw, 3rem); }
h1, h2, h3 { margin: 0; font-family: var(--sc-font-display); text-wrap: balance; }
h2.sc-display { font-variation-settings: "wdth" 100; }
.display { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-none); font-variation-settings: "wdth" 96; }
.display--xl { font-size: var(--sc-t-4xl); }
.display--lg { font-size: var(--sc-t-3xl); }
.display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.display--sm { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.08; }
.display em { font-style: normal; color: var(--sc-accent); }
.lede { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; margin: 0; }
.eyebrow { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); margin: 0 0 var(--sc-4); }
.num { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: var(--sc-4); }
.stack > :is(h1,h2,h3) + * { margin-top: var(--sc-5); }
.hair { height: 1px; border: 0; background: var(--sc-hairline); margin: var(--sc-7) 0; }

/* ------------------------------------------------------------ buttons -- */
/* Metallic gold (round two, note 10). A brushed-gold face, a thin liquid-gold rim that flows
   round the edge (a conic gradient turning through a registered angle), speeds up on hover,
   and a ripple where you click. No WebGL: the reference button's rim is a shader, this one
   is two gradients. */
@property --gv-flow { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; white-space: nowrap;
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--sc-accent-ink); text-shadow: 0 1px 0 rgba(255, 240, 200, .35);
  padding: .95em 1.6em; border-radius: 999px; border: 3px solid transparent; cursor: pointer;
  background:
    linear-gradient(180deg, #F3D07A 0%, #E3B851 38%, #CE9B2F 62%, #B7851E 100%) padding-box,
    conic-gradient(from var(--gv-flow), #5C3D0C 0deg, #FFF3C4 40deg, #9C6F17 85deg, #FFFBE6 125deg, #6E4A0F 175deg, #F9E39C 225deg, #8A6216 280deg, #FFF0B8 330deg, #5C3D0C 360deg) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, .55), inset 0 -1px 0 rgba(80, 52, 8, .45), var(--sc-e2), 0 10px 26px -10px rgba(216, 168, 63, .55);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), filter 140ms var(--sc-ease-out);
  animation: gv-flow 4.5s linear infinite;
}
/* brushed bands across the face */
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(112deg, rgba(255, 255, 255, 0) 0 5px, rgba(255, 255, 255, .10) 5px 7px, rgba(60, 40, 5, .07) 7px 11px);
  mix-blend-mode: overlay; }
/* the rim is the border itself (round six): a conic ring of liquid gold turning through --gv-flow */
.cta::after { content: none; }
@keyframes gv-flow { to { --gv-flow: 360deg; } }
.cta > * { position: relative; z-index: 2; }
.cta:hover { filter: brightness(1.06) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255, 244, 210, .6), inset 0 -1px 0 rgba(80, 52, 8, .45), var(--sc-e3), 0 14px 30px -10px rgba(216, 168, 63, .7); transform: translateY(-1px); }
.cta:hover { animation-duration: 2s; }
.cta:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 2px 4px rgba(60, 40, 5, .35), inset 0 1px 2px rgba(60, 40, 5, .3), var(--sc-e1); }
.cta:active { animation-duration: .8s; }
.cta:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
.cta__ripple { position: absolute; z-index: 3; width: 1.25rem; height: 1.25rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 230, .55) 0%, rgba(255, 250, 230, 0) 70%);
  transform: translate(-50%, -50%) scale(0); animation: gv-ripple 600ms var(--sc-ease-out) forwards; }
@keyframes gv-ripple { to { transform: translate(-50%, -50%) scale(9); opacity: 0; } }
.cta--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); text-shadow: none; border-color: transparent; }
.cta--ghost::before, .cta--ghost::after { display: none; }
.cta--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-ink-soft); filter: none; }
.cta--lg { font-size: var(--sc-t-base); padding: 1.15em 2em; }
.cta--bar { font-size: var(--sc-t-sm); padding: .7em 1.2em; }
.link { color: var(--sc-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); text-underline-offset: .25em; }
.link:hover { color: var(--sc-accent); }
.link--soft { color: var(--sc-ink-soft); }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--sc-z-chrome); height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-5); padding-inline: var(--sc-gutter);
  color: var(--sc-ink);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent);
  transition: background 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-solid { background: color-mix(in oklab, var(--sc-canvas) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--sc-hairline); }
.bar__mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: var(--sc-track-snug); }
.bar__mark img { width: 34px; height: 34px; border-radius: 0; }
.bar__nav { display: flex; gap: var(--sc-5); margin-left: auto; }
.bar__link { text-decoration: none; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); position: relative; padding-block: .3rem; }
.bar__link:hover, .bar__link.is-on { color: var(--sc-ink); }
.bar__link.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--sc-accent); }
.bar__toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); border-radius: var(--sc-r-md); padding: .5rem .9rem; font-size: var(--sc-t-sm); }
@media (max-width: 1080px) {
  .bar { gap: var(--sc-4); }
  .bar__toggle { display: inline-block; }
  .bar__nav { position: fixed; inset: var(--bar-h) 0 auto 0; flex-direction: column; gap: 0; background: var(--sc-surface); padding: var(--sc-4) var(--sc-gutter) var(--sc-6); box-shadow: var(--sc-e3); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out); }
  .bar.is-open .bar__nav { opacity: 1; transform: none; pointer-events: auto; }
  .bar__link { font-size: var(--sc-t-lg); padding-block: .75rem; border-bottom: 1px solid var(--sc-hairline); }
  .cta--bar { margin-left: 0; }
}
@media (max-width: 520px) { .bar__mark span { display: none; } }

/* ---------------------------------------------------------------- hero -- */
.hero { --p: var(--sc-p, 0); }
.hero .sc-stage { perspective: 1200px; overflow: hidden; }
.hero__far, .hero__plate { position: absolute; inset: -6% -4%; width: 108%; height: 112%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.hero__far { filter: saturate(.8); opacity: .9; }
.hero__plate { opacity: 1; }
.hero__vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 40%, transparent 30%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 100%); }
.hero__floor { position: absolute; inset-inline: 0; bottom: 0; height: 32%; background: linear-gradient(to bottom, transparent, var(--sc-canvas)); z-index: 4; pointer-events: none; }
/* Steve's read of round six: the cards' angles had no perspective (the stage's perspective
   reaches its children only, and the cards are grandchildren), so a rotateY was just a squash.
   The perspective is now on this layer, vanishing point at the heap. */
.hero__planes { position: absolute; inset: 0; z-index: 5; pointer-events: none; transform-style: flat; perspective: 1300px; perspective-origin: 62% 46%; }
/* the cards sit above the shade and the floor fade (Steve: the bottom card was illegible under them); they carry their own contrast */
.plane {
  position: absolute; width: clamp(9rem, 16vw, 15rem); border-radius: 7px; overflow: hidden; display: grid; grid-template-rows: auto auto;
  border: 3px solid #A8977A; /* the print's rim, a muted tan (Steve: ivory was too strong) */
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .75), -22px 34px 48px -12px rgba(8, 5, 2, .8), 0 60px 90px -30px rgba(8, 5, 2, .6);
  background: var(--sc-surface); left: var(--x); top: var(--y); will-change: transform, opacity, filter; transform-style: flat; z-index: var(--z, 1);
}
/* the scale photos are shot under cool white light; grade them warm so they sit in the lamp's room */
/* landscape crop: the scale's white base and the pale cloth at the edges are cut, the item and the readout stay */
.plane img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 22%; scale: 1.07; transform-origin: 50% 40%; }
.plane__glaze { position: absolute; inset: 0 0 auto 0; aspect-ratio: 5 / 4; border-radius: inherit; background: radial-gradient(125% 120% at 50% 38%, transparent 46%, rgba(8, 5, 2, .6) 100%), linear-gradient(215deg, rgba(255, 214, 140, .28) 0%, rgba(255, 214, 140, .06) 30%, transparent 48%, rgba(8, 5, 2, .5) 100%); }
.plane::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 244, 220, .35), inset 0 0 0 1px rgba(8, 5, 2, .35); }
/* the caption is a strip under the photo (Steve's read of round six), so the readout is never covered */
.plane__cap { position: relative; z-index: 1; padding: .5rem .7rem .55rem; font-size: .76rem; letter-spacing: .02em; background: color-mix(in oklab, var(--sc-surface) 94%, var(--sc-accent)); color: var(--sc-ink); box-shadow: inset 0 1px 0 rgba(255, 228, 170, .12); }
.plane__cap b { display: block; font-family: var(--sc-font-display); font-weight: 600; }
.plane__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; align-items: end; }
.plane__cap b { grid-column: 1 / -1; }
.plane__pay { font-family: var(--sc-font-display); font-weight: 700; color: var(--gold-2); font-size: .9rem; letter-spacing: -.01em; }
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; opacity: 1; } /* a canvas keeps its bitmap size unless told to fill */
/* the block is centred in the stage on desktop (Steve, 2026-09-24): it used to hang from the bottom, which left the
   top third empty and put the button in the floor fade; on phones it still sits low, under the bottom-up shade */
.hero__copy { z-index: 6; max-width: min(56rem, 60vw); top: calc(var(--bar-h) + 3vh); bottom: 10vh; display: flex; flex-direction: column; justify-content: center; }
/* the size also caps at a tenth of the column, so "What's your old gold" is always one line */
.hero__copy .display--xl { font-size: min(clamp(2.6rem, 1.2rem + 4.4vw, 6rem), 8.6vh, calc(min(56rem, 60vw) / 9.9)); }
.hero__list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: .55rem; color: var(--sc-ink); font-size: var(--sc-t-base); max-width: 40ch; }
.hero__list li { padding-left: 1.4rem; position: relative; }
.hero__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7rem; height: 1px; background: var(--sc-accent); }
.hero__acts { display: flex; align-items: center; gap: var(--sc-5); margin-top: var(--sc-7); flex-wrap: wrap; }
.hero__acts .link { font-size: var(--sc-t-sm); }
.hero__shade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(100deg, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 55%, transparent 72%); }
@media (max-width: 860px) {
  .hero__shade { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 42%, color-mix(in oklab, var(--sc-canvas) 84%, transparent) 60%, color-mix(in oklab, var(--sc-canvas) 45%, transparent) 78%, transparent 92%); }
  .hero__copy { max-width: none; bottom: clamp(2rem, 6vh, 4rem); top: calc(var(--bar-h) + 2vh); justify-content: flex-end; }
  .hero__copy .display--xl { font-size: min(var(--sc-t-2xl), 6.4vh); }
  .hero__far, .hero__plate { object-position: 70% 50%; }
  .plane { width: 7.2rem; }
  .plane__cap { padding: .4rem .5rem; font-size: .75rem; }
  .plane__cap b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plane__cap > span:not(.plane__pay) { display: none; }
  .plane__pay { font-size: .78rem; }
  .plane--hide-m { display: none; }
  .hero__list { font-size: var(--sc-t-sm); }
}

/* ------------------------------------------------------------ pan rails -- */
.rail { display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); height: 100%; align-items: center; }
.rail__lead { flex: 0 0 auto; width: clamp(18rem, 30vw, 26rem); padding-right: var(--sc-6); }
.rail__tail { flex: 0 0 auto; width: clamp(18rem, 28vw, 24rem); padding-left: var(--sc-4); }
.step { flex: 0 0 auto; width: clamp(17rem, 24vw, 22rem); display: grid; grid-template-rows: auto 1fr; gap: var(--sc-4); }
.step__fig { position: relative; aspect-ratio: 4 / 3; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2), var(--sc-edge); background: var(--sc-surface); }
.step__fig img { width: 100%; height: 100%; object-fit: cover; }
.step__n { position: absolute; top: .8rem; left: .8rem; width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center; background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-display); font-weight: 700; box-shadow: var(--sc-e1); }
.step h3 { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
/* step numerals above a How It Works section heading: gold badges, the step words beside them */
.stepno { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--sc-3); }
.stepno__n { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center; background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-display); font-weight: 700; font-size: 1.15rem; box-shadow: var(--sc-e1); }
.stepno__k { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); margin-left: .35rem; }
#steps45 .step__n { display: none; } /* the rail cards are stages of steps 4 and 5, not steps; the numerals live on the heading */
.step__k { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); margin: 0 0 .4rem; } /* the stage label above a rail card's title (How It Works, steps 4 and 5) */
.step p { margin: .5rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.cat { flex: 0 0 auto; width: clamp(17rem, 26vw, 24rem); }
.cat__fig { aspect-ratio: 5 / 4; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2), var(--sc-edge); background: var(--sc-surface); }
.cat__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
.cat:hover .cat__fig img { transform: scale(1.04); }
.cat h3 { margin-top: var(--sc-4); font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.cat p { margin: .4rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .rail > * + * { opacity: calc(.55 + .45 * clamp(0, (var(--sc-p, 0) * 6 - var(--i, 1) + 1), 1)); transform: translateY(calc((1 - clamp(0, (var(--sc-p, 0) * 6 - var(--i, 1) + 1), 1)) * 18px)); }
}
@media (prefers-reduced-motion: reduce) {
  .rail { height: auto; padding-block: var(--sc-6); }
}

/* ------------------------------------------------------------ the scale -- */
.scale { --p: var(--sc-p, 0); }
.scale .sc-stage { display: grid; align-items: center; padding-top: var(--bar-h); }
.scale__why { will-change: transform; }
@media (min-width: 861px) and (max-height: 820px) {
  .scale__why h2 { font-size: var(--sc-t-2xl); margin-bottom: var(--sc-4); }
  .feat { padding: .7rem 0; }
  .feat h3 { font-size: var(--sc-t-lg); }
  .feat p { font-size: .84rem; line-height: 1.45; }
}
.scale__bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 50% 60%; opacity: .32; filter: saturate(.7) blur(1px); }
.scale__vig { position: absolute; inset: 0; background: linear-gradient(90deg, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 45%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 100%); }
.scale__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.scale__why h2 { margin-bottom: var(--sc-6); }
.feat { margin: 0; padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline); }
.feat h3 { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.feat p { margin: .5rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 40ch; }
.receipt { position: relative; justify-self: end; width: min(100%, 30rem); }
.receipt__tag { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); margin: 0 0 var(--sc-3); }
.readout { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; background: #0F1712; border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); border-radius: var(--sc-r-md) var(--sc-r-md) 0 0; padding: .9rem 1.1rem; box-shadow: var(--sc-edge); }
.readout__lbl { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: #8FB39B; }
.readout__val { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); color: #D9F7DF; letter-spacing: -.02em; }
.readout__val small { font-size: max(.45em, .875rem); font-weight: 500; margin-left: .2em; color: #8FB39B; }
.slip { background: var(--paper); color: var(--paper-ink); border-radius: 0 0 var(--sc-r-md) var(--sc-r-md); padding: 1.1rem 1.2rem 1rem; box-shadow: var(--sc-e3); font-size: var(--sc-t-sm); position: relative; }
.slip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: repeating-linear-gradient(90deg, transparent 0 4px, color-mix(in oklab, var(--paper-ink) 25%, transparent) 4px 8px); }
.slip__hd { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px dashed color-mix(in oklab, var(--paper-ink) 30%, transparent); }
.slip__hd b { font-family: var(--sc-font-display); }
.slip__hd span { color: color-mix(in oklab, var(--paper-ink) 60%, transparent); }
.slip ol { list-style: none; margin: 0; padding: 0; }
.slip li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px dotted color-mix(in oklab, var(--paper-ink) 25%, transparent); opacity: .28; transform: translateY(6px); transition: opacity 280ms var(--sc-ease-out), transform 280ms var(--sc-ease-out); }
.slip li.is-on { opacity: 1; transform: none; }
.slip__thumb { width: 2.6rem; height: 2.6rem; border-radius: 4px; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,.28); }
.slip li > span:last-child { text-align: right; white-space: nowrap; }
.slip li.tot { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--paper-ink); margin-top: .3rem; padding-top: .8rem; font-size: var(--sc-t-base); }
.slip__note { margin: .8rem 0 0; font-size: var(--sc-t-xs); color: color-mix(in oklab, var(--paper-ink) 65%, transparent); }
.slip__acts { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.slip__acts span { font-size: var(--sc-t-xs); padding: .4rem .7rem; border-radius: 999px; font-weight: 600; }
.slip__acts .yes { background: #1E6E4E; color: #fff; }
.slip__acts .no { background: transparent; color: var(--paper-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--paper-ink) 35%, transparent); }
.scale__why .feat { opacity: 1; }
.scale__why--moved { padding-block: var(--sc-6) 0; }
.scale__why--moved h2 { font-size: var(--sc-t-2xl); margin-bottom: var(--sc-4); }
@media (max-width: 860px) {
  .scale__grid { grid-template-columns: 1fr; gap: var(--sc-5); align-content: center; }
  .scale__why h2 { font-size: var(--sc-t-xl); margin-bottom: var(--sc-3); }
  .feat { padding: .5rem 0; }
  .feat h3 { font-size: var(--sc-t-base); }
  .feat p { font-size: .8rem; line-height: 1.4; }
  .receipt { justify-self: stretch; }
  .slip { font-size: .8rem; padding: .8rem .9rem; }
  .readout { padding: .6rem .9rem; }
}

/* ------------------------------------------------------------ shipping -- */
.press { display: flex; align-items: center; justify-content: center; gap: var(--sc-6); flex-wrap: wrap; padding-block: var(--sc-5); border-top: 1px solid var(--sc-hairline); border-bottom: 1px solid var(--sc-hairline); }
.press__lbl { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }
.press img { height: 30px; width: auto; filter: brightness(0) invert(.92); opacity: .8; }
.press .bbb img { filter: none; opacity: 1; height: 42px; }
.press__grp { display: flex; align-items: center; justify-content: center; gap: var(--sc-6); flex-wrap: wrap; }
.press__sep { width: 1px; height: 36px; background: var(--sc-hairline-strong); flex: 0 0 auto; }
.press__tp { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; }
@media (max-width: 720px) { .press { flex-direction: column; gap: var(--sc-5); } .press__sep { width: 40%; height: 1px; } .press__grp { gap: var(--sc-4) var(--sc-5); } .press__grp img:not(.bbb img) { height: 22px; } .press__lbl { flex-basis: 100%; text-align: center; } }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--rev > :first-child { order: 2; }
.fig { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e3), var(--sc-edge); background: var(--sc-surface); aspect-ratio: 4 / 3; }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig--tall { aspect-ratio: 3 / 4; }
.guar { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-6); }
.guar li { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.guar b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); margin-bottom: .35rem; }
.guar p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } .guar { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- calculator -- */
.calcact .sc-stage { display: grid; align-items: center; overflow: hidden; padding-top: var(--bar-h); }
.calc__bg { position: absolute; inset: 0; pointer-events: none; }
.calc__plate { position: absolute; inset: -8% 0; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 70% 50%; opacity: .64; }
.calc__glow { position: absolute; right: 8%; top: 50%; width: 46vw; height: 46vw; max-width: 44rem; max-height: 44rem; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(216, 168, 63, .34), rgba(216, 168, 63, .08) 55%, transparent 72%); transform: scale(calc(.35 + var(--wfill, .2) * 1.1)); transition: transform 160ms var(--sc-ease-out); }
.calc { position: relative; z-index: 2; }
@media (max-width: 860px) { .calc__glow { right: -10%; width: 80vw; height: 80vw; } }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); position: relative; z-index: 2; }
.calc__ctl .lbl { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 .6rem; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { font: inherit; font-family: var(--sc-font-display); font-weight: 600; background: transparent; color: var(--sc-ink); border: 1px solid var(--sc-hairline-strong); border-radius: 999px; padding: .55rem 1.05rem; cursor: pointer; transition: background 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out); }
.chip:hover { border-color: var(--sc-ink-soft); }
.chip[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: linear-gradient(90deg, var(--sc-accent) var(--fill, 20%), var(--sc-hairline-strong) var(--fill, 20%)); border-radius: 2px; margin: .8rem 0 0; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sc-accent); border: 3px solid var(--sc-canvas); box-shadow: var(--sc-e2); cursor: grab; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--sc-accent); border: 3px solid var(--sc-canvas); box-shadow: var(--sc-e2); cursor: grab; }
.range:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; }
.ladder { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin-top: 1rem; }
.ladder span { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: .5rem; border-top: 2px solid var(--sc-hairline-strong); transition: color 160ms, border-color 160ms; }
.ladder span.is-on { color: var(--sc-accent); border-top-color: var(--sc-accent); }
.est { background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--sc-e3), var(--sc-edge); }
.est__tier { display: inline-block; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); border: 1px solid color-mix(in oklab, var(--sc-accent) 40%, transparent); border-radius: 999px; padding: .3rem .7rem; }
.est__big { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 5rem); letter-spacing: -.03em; line-height: 1; margin: var(--sc-4) 0 .4rem; }
.est__note { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.est__fine { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin: var(--sc-4) 0 var(--sc-5); }
.est__act { display: flex; justify-content: center; margin-top: var(--sc-4); }
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; gap: var(--sc-4); }
  .calc__ctl h2 { font-size: var(--sc-t-xl); }
  .calc__ctl .lede { font-size: var(--sc-t-sm); }
  .calc__ctl.stack > * + * { margin-top: .7rem; }
  .calc__ctl .lbl { margin-bottom: .3rem; }
  .chip { padding: .4rem .8rem; font-size: .85rem; }
  .ladder { margin-top: .5rem; }
  .est { padding: .9rem 1rem; }
  .est__big { font-size: 2.2rem; margin: .5rem 0 .2rem; }
  .est__fine { margin: .5rem 0 .7rem; }
}


/* ---------------------------------------------------------------- orbit -- */
/* Round two, note 9 (after 21st.dev's scroll-morph hero): the lots fly in from scatter to a
   ring round the heading, the ring opens into a wheel rising from the floor, and scrolling
   turns the wheel so every lot passes the top. site.js places every card; this is the look. */
.orbitact .sc-stage { overflow: hidden; }
.orbit__glow { position: absolute; left: 50%; bottom: -20vh; width: 90vw; height: 60vh; translate: -50% 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 168, 63, .22), rgba(216, 168, 63, .06) 55%, transparent 72%); opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.orbitact.is-wheel .orbit__glow { opacity: 1; }
.orbit__head { position: absolute; left: 50%; top: 0; width: min(92vw, 36rem); translate: -50% 0; text-align: center; z-index: 3; will-change: transform; }
.orbit__head .lede { margin: var(--sc-4) auto 0; max-width: 44ch; }
.sec--before-pin { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.phero__list { margin-top: var(--sc-5); max-width: 60ch; }
.phero__list li + li { margin-top: .1rem; }
.orbit { position: absolute; inset: 0; z-index: 2; }
.orb { position: absolute; left: 0; top: 0; width: 7.5rem; height: 7.5rem; border-radius: 12px; overflow: hidden; background: var(--sc-surface);
  box-shadow: 0 18px 40px -14px rgba(8, 5, 2, .8), 0 0 0 1px rgba(255, 228, 170, .1); will-change: transform, opacity; transform-origin: 50% 50%; opacity: 0; }
.orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 228, 170, .3); background: linear-gradient(200deg, rgba(255, 214, 140, .14), transparent 45%, rgba(8, 5, 2, .28)); opacity: .9; }
.orb.is-apex { box-shadow: 0 24px 50px -14px rgba(8, 5, 2, .9), 0 0 0 1px rgba(255, 228, 170, .22), 0 0 40px -6px rgba(216, 168, 63, .45); }
.orbit__focus { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 4; text-align: center; display: grid; gap: .15rem; justify-items: center; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.orbit__focus b { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.orbit__focus span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.orbit__focus .num { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--sc-accent); letter-spacing: -.02em; line-height: 1; margin-top: .3rem; }
.orbit__focus.is-swap { transition: none; opacity: 0; }
.orbit__more { position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); translate: -50% 0; z-index: 30; margin: 0; text-align: center; width: min(92vw, 44rem); opacity: 0; transition: opacity 300ms var(--sc-ease-out); padding: .5rem 1rem; border-radius: 999px; background: color-mix(in oklab, var(--sc-canvas) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.orbitact.is-wheel .orbit__more, .orbit__more:focus-within { opacity: 1; }
.orbitact .lots { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .orb { width: 5.2rem; height: 5.2rem; border-radius: 9px; }
  .orbit__head { width: 88vw; }
  .orbit__head h2 { font-size: var(--sc-t-xl); }
  .orbit__head .lede { display: none; }
  .orbit__focus b { font-size: var(--sc-t-base); }
  .orbit__focus .num { font-size: 1.6rem; }
  .orbit__more { font-size: var(--sc-t-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit__head { position: static; translate: none; margin: 0 auto var(--sc-6); }
  .orbit, .orbit__focus, .orbit__glow { display: none; }
  .orbit__more { position: static; translate: none; opacity: 1; margin-top: var(--sc-5); }
  .cta { animation: none; }
  .cta__ripple { display: none; }
}

/* -------------------------------------------------------------- tables -- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); }
.tbl caption { text-align: left; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); padding-bottom: .6rem; }
.tbl th, .tbl td { text-align: left; padding: .85rem .9rem; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
.tbl th { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.tbl td.rate, .tbl td.n { font-family: var(--sc-font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.tbl tr.hl td { background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }
.tbl td b { font-family: var(--sc-font-display); }
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--sc-6); border-radius: var(--sc-r-md); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); box-shadow: var(--sc-edge); }
.scrollhint { text-align: center; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: .5rem 0 0; }
.scrollhint .arr { display: inline-block; }
.scrollhint.is-done { display: none; }
@media (prefers-reduced-motion: no-preference) { .scrollhint.in-view .arr { animation: gv-nudge 1.2s ease-in-out 4; } @keyframes gv-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } }
.stamp--spot { margin-top: var(--sc-5); } .stamp--spot b { color: var(--sc-ink); font-weight: 600; }
.tblwrap .tbl th:first-child, .tblwrap .tbl td:first-child { padding-left: 1.1rem; }
.stamp { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: var(--sc-4) 0 0; }
.stamp::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #3FBF7F; margin-right: .5rem; vertical-align: middle; }
.bullets { color: var(--sc-ink-soft); padding-left: 1.2rem; margin: var(--sc-4) 0 0; max-width: 60ch; }
.bullets li + li { margin-top: .3rem; }
.cmp td.yes { color: #7FD9A8; }
.cmp td.no { color: var(--sc-ink-soft); }
.cmp th.gv, .cmp td.gv { background: color-mix(in oklab, var(--sc-accent) 9%, transparent); }
.cmp td:first-child { color: var(--sc-ink); }
.rowreveal tbody tr { will-change: clip-path; }

/* ------------------------------------------------------------- flow bits -- */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.two > .sticky { position: sticky; top: calc(var(--bar-h) + 1.5rem); }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } .two > .sticky { position: static; } }
.lots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); margin-top: var(--sc-6); }
.lots[hidden] { display: none; } /* the hidden attribute must beat the grid display (the collapsed purchases grid on What We Buy) */
.lot { text-decoration: none; display: block; }
.lot__fig { aspect-ratio: 1; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2), var(--sc-edge); background: var(--sc-surface); }
.lot__fig img { width: 100%; height: 100%; object-fit: cover; }
.lot__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; align-items: baseline; }
.lot__cap b { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); display: block; }
.lot__cap span { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); display: block; margin-top: .15rem; }
.lot__cap .pay { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); color: var(--sc-accent); white-space: nowrap; }
.lot__note { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: .3rem 0 0; }
.lots--grid { grid-template-columns: repeat(4, 1fr); }
.lots--grid .lot__cap b { font-size: var(--sc-t-sm); }
.lots--grid .lot__cap .pay { font-size: var(--sc-t-base); }
.lots .lot.is-hidden { display: none; }
@media (max-width: 1000px) { .lots--grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .lots, .lots--grid { grid-template-columns: repeat(2, 1fr); gap: var(--sc-4); } }
@media (max-width: 480px) { .lots, .lots--grid { grid-template-columns: 1fr; } }
/* the founder's note (round four): centred, framed, tight */
.founder { max-width: 46rem; margin-inline: auto; text-align: center; padding: clamp(2rem, 4vw, 3.2rem) clamp(1.25rem, 4vw, 3rem); border: 1px solid color-mix(in oklab, var(--sc-accent) 28%, transparent); border-radius: var(--sc-r-lg); background: color-mix(in oklab, var(--sc-surface) 55%, transparent); box-shadow: var(--sc-edge); display: grid; justify-items: center; gap: var(--sc-4); }
.founder__lbl { margin: 0; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); }
.founder__pic { width: clamp(5.5rem, 9vw, 7.5rem); height: clamp(5.5rem, 9vw, 7.5rem); border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: var(--sc-e2), 0 0 0 3px var(--sc-canvas), 0 0 0 4px color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.founder__q { margin: .3rem 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); letter-spacing: var(--sc-track-snug); line-height: 1.2; text-wrap: balance; max-width: 22ch; }
.founder__by { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 52ch; }
.founder__by b { color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 600; }
.founder .cta--ghost { margin-top: .4rem; text-transform: none; letter-spacing: var(--sc-track-normal); font-size: var(--sc-t-sm); }
.quote { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-5); align-items: center; margin-top: var(--sc-9); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline); }
.quote img { width: clamp(5rem, 10vw, 8rem); height: clamp(5rem, 10vw, 8rem); border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: var(--sc-e2), var(--sc-edge); }
.quote blockquote { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.2; text-wrap: balance; }
.quote p { margin: .6rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 60ch; }
@media (max-width: 600px) { .quote { grid-template-columns: 1fr; } }
.tp { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-6); align-items: center; }
.tp__score { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -.04em; line-height: 1; }
.tp__score small { display: block; font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0; color: var(--sc-ink-soft); margin-top: .3rem; }
.stars { color: #00B67A; letter-spacing: .1em; font-size: 1.3rem; }
.faq details { border-top: 1px solid var(--sc-hairline); }
.faq details:last-of-type { border-bottom: 1px solid var(--sc-hairline); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; translate: 0 -50%; color: var(--sc-accent); font-weight: 400; font-size: 1.4em; transition: transform 160ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--sc-accent); }
.faq details p { margin: 0 0 1.2rem; color: var(--sc-ink-soft); max-width: 62ch; line-height: 1.6; }
/* Steve: the group headings were eyebrow labels and hard to read next to the questions; they are headings now, one step above the question size */
.faq h3 { margin: var(--sc-8) 0 var(--sc-4); font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-tight); line-height: 1.05; color: var(--sc-ink); text-transform: none; }
.faq h3:first-of-type { margin-top: var(--sc-5); }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); }
.card { background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--sc-e2), var(--sc-edge); }
.card h3 { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.card .tag { display: inline-block; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); margin-bottom: .6rem; }
.card ul { margin: var(--sc-4) 0; padding-left: 1.1rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.card ul li + li { margin-top: .4rem; }
@media (max-width: 860px) { .cards2 { grid-template-columns: 1fr; } }
/* Steve (round ten): this block ran its own type. Now the site's: display headings, body-size
   items, the marks in the site's gold and grey rather than green and red. */
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6) clamp(2rem, 6vw, 5rem); margin-top: var(--sc-7); }
.yesno h3 { margin: 0; }
.yesno ul { margin: var(--sc-5) 0 0; padding: 0; list-style: none; }
.yesno li { padding: .85rem 0 .85rem 1.8rem; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink); font-size: var(--sc-t-base); position: relative; line-height: 1.5; }
.yesno .no li { color: var(--sc-ink-soft); }
.yesno li::before { position: absolute; left: 0; top: .85rem; font-family: var(--sc-font-display); font-weight: 700; line-height: 1.5; }
.yesno .yes li::before { content: "✓"; color: var(--sc-accent); }
.yesno .no li::before { content: "✗"; color: var(--sc-ink-soft); opacity: .7; }
.yesno p { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 48ch; }
@media (max-width: 860px) { .yesno { grid-template-columns: 1fr; } }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-5); margin-top: var(--sc-6); }
.stages > div { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.stages .k { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); margin: 0 0 .4rem; }
.stages h3 { font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.stages p { margin: .5rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
@media (max-width: 1000px) { .stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stages { grid-template-columns: 1fr; } }
.logos { display: flex; gap: var(--sc-6); flex-wrap: wrap; align-items: center; margin-top: var(--sc-4); }
.logos img { height: 28px; width: auto; filter: brightness(0) invert(.9); opacity: .85; }
/* Steve (round ten): the grid felt tight; wider gutters, more air above each item and below its title */
.verify { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); margin-top: var(--sc-7); }
.verify > div { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-5); }
.verify h3 { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); }
.verify .big { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); margin: .8rem 0 .6rem; line-height: 1.15; }
.verify p { margin: .4rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 48ch; }
@media (max-width: 860px) { .verify { grid-template-columns: 1fr; } }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); margin-top: var(--sc-6); }
.way { background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: clamp(1.2rem, 2.5vw, 1.8rem); box-shadow: var(--sc-e1), var(--sc-edge); display: grid; align-content: start; gap: .4rem; }
.way h3 { font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.way .k { font-size: var(--sc-t-xs); color: var(--sc-accent); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.way p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.way a.link { margin-top: .4rem; font-size: var(--sc-t-sm); }
@media (max-width: 1000px) { .ways { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ways { grid-template-columns: 1fr; } }
.prose { max-width: 66ch; }
.beat { list-style: none; margin: 0 0 1.3rem; padding: 0; max-width: 30rem; }
.beat li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-base); }
.beat li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.beat b { font-family: var(--sc-font-display); color: var(--sc-ink); }
.beat span { color: var(--sc-accent); font-family: var(--sc-font-display); font-weight: 600; }
.beat li:last-child span { color: var(--sc-ink-soft); font-weight: 500; }
.prose p, .prose li { color: var(--sc-ink-soft); line-height: 1.65; }
.prose p { margin: 0 0 1.1rem; }
.prose h2 { margin: var(--sc-8) 0 var(--sc-4); font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.prose h3 { margin: var(--sc-6) 0 var(--sc-3); font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }
.prose li + li { margin-top: .4rem; }
.prose blockquote { margin: var(--sc-6) 0; padding-left: 1.2rem; border-left: 1px solid var(--sc-accent); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.35; }
.prose blockquote footer { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: .5rem; }
.byline { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin: var(--sc-4) 0 0; }
.cta-row { display: flex; gap: var(--sc-4); flex-wrap: wrap; align-items: center; margin-top: var(--sc-6); }

/* ---------------------------------------------------------- inner hero -- */
.phero { position: relative; padding: calc(var(--bar-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(3rem, 7vw, 6rem); overflow: hidden; min-height: 62vh; display: grid; align-items: end; }
.phero__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; max-width: none; object-fit: cover; opacity: .38; filter: saturate(.75); }
.phero__mask { position: absolute; inset: 0; background: linear-gradient(90deg, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 42%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 100%), linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 60%, transparent), transparent 40%, var(--sc-canvas)); }
.phero__copy { position: relative; z-index: 2; max-width: 52rem; min-width: 0; }
.phero__copy .display--xl { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.4rem); }
.phero__copy .lede { margin-top: var(--sc-5); }
.crumb { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .04em; margin: 0 0 var(--sc-4); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--sc-accent); }
.phero--short { min-height: 0; padding-top: calc(var(--bar-h) + clamp(2rem, 6vw, 4rem)); padding-bottom: clamp(1.5rem, 4vw, 3rem); }

/* ---------------------------------------------------------------- forms -- */
.formpage { padding-top: calc(var(--bar-h) + clamp(2rem, 6vw, 4rem)); }
.form { position: relative; background: linear-gradient(180deg, color-mix(in oklab, var(--sc-accent) 9%, var(--sc-surface)) 0%, var(--sc-surface) 36%); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3), var(--sc-edge); padding: clamp(1.4rem, 3vw, 2.4rem); }
.form::before { content: ""; position: absolute; top: 0; left: 1.4rem; right: 1.4rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #F3D07A 30%, #CE9B2F 70%, transparent); }
.form__steps { display: flex; gap: .4rem; margin: 0 0 var(--sc-6); padding: 0; list-style: none; counter-reset: s; }
.form__steps li { flex: 1; font-size: var(--sc-t-xs); letter-spacing: .04em; color: var(--sc-ink-soft); padding-top: .6rem; border-top: 2px solid var(--sc-hairline-strong); }
.form__steps li.is-on { color: var(--sc-ink); border-top-color: var(--sc-accent); }
.form__steps li.is-done { border-top-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.form__steps li b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-sm); letter-spacing: 0; }
.form__steps li.is-on b { color: var(--sc-accent); }
.fs { border: 0; padding: 0; margin: 0; }
.fs[hidden] { display: none; }
.fs > legend { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); margin-bottom: var(--sc-4); }
.fs .q { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: color-mix(in oklab, var(--sc-accent) 78%, var(--sc-ink)); margin: var(--sc-5) 0 .6rem; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: block; padding: .8rem 1rem; border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, var(--sc-hairline-strong)); background: color-mix(in oklab, var(--sc-accent) 4%, transparent); border-radius: var(--sc-r-md); font-size: var(--sc-t-sm); transition: border-color 140ms, background 140ms; }
.opt input:checked + span { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); color: var(--sc-ink); }
.opt input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.opt--wide span { padding: 1rem 1.1rem; }
.opt small { display: block; color: var(--sc-ink-soft); margin-top: .2rem; font-size: var(--sc-t-xs); }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--sc-t-sm); color: var(--sc-ink); }
.field label .req { color: var(--sc-accent); }
.field input, .field select, .field textarea { font: inherit; color: var(--sc-ink); background: var(--sc-canvas); border: 1px solid color-mix(in oklab, var(--sc-accent) 18%, var(--sc-hairline-strong)); border-radius: var(--sc-r-md); padding: .8rem .9rem; width: 100%; transition: border-color 140ms; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.field input[aria-invalid="true"] { border-color: #E08A7A; }
.field .err { color: #E08A7A; font-size: var(--sc-t-xs); display: none; }
.field.is-bad .err { display: block; }
.opts + .err { display: none; margin-top: .6rem; }
.opts.is-bad + .err { display: block; }
.field textarea { min-height: 6.5rem; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sc-4); }
@media (max-width: 600px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.drop { border: 1px dashed color-mix(in oklab, var(--sc-accent) 45%, var(--sc-hairline-strong)); background: color-mix(in oklab, var(--sc-accent) 3%, transparent); border-radius: var(--sc-r-lg); padding: var(--sc-6) var(--sc-4); text-align: center; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); display: grid; gap: .5rem; justify-items: center; cursor: pointer; transition: border-color 140ms, background 140ms; }
.drop:hover, .drop.is-over { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 6%, transparent); }
.drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.drop b { color: var(--sc-ink); font-family: var(--sc-font-display); }
.drop .cta { pointer-events: none; }
.drop__list { list-style: none; margin: .6rem 0 0; padding: 0; font-size: var(--sc-t-xs); display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.drop__list li { padding: .3rem .6rem; border-radius: 999px; background: var(--sc-canvas); }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: var(--sc-4); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--sc-accent); }
.check a { color: var(--sc-ink); }
.check .err { display: none; grid-column: 2; color: #E08A7A; font-size: var(--sc-t-xs); }
.check.is-bad .err { display: block; }
.check.is-bad input { outline: 2px solid #E08A7A; outline-offset: 1px; }
.fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: .6rem 0 0; line-height: 1.5; }
.form__nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sc-4); margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.form__nav .cta { white-space: normal; text-align: center; }
.form__note { margin: var(--sc-4) 0 0; padding: .9rem 1rem; border-radius: var(--sc-r-md); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); color: var(--sc-ink); font-size: var(--sc-t-sm); display: none; }
.form__note.is-on { display: block; }
/* trust strip under the two forms: four marks, one caption each */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-3) var(--sc-4); margin-top: var(--sc-5); padding: var(--sc-5) var(--sc-4); border-radius: var(--sc-r-lg); background: color-mix(in oklab, var(--sc-surface) 72%, transparent); box-shadow: var(--sc-edge); }
.trust__cell { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; text-decoration: none; color: inherit; padding: .5rem .25rem; border-radius: var(--sc-r-md); transition: background .2s; }
a.trust__cell:hover { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.trust__mark { height: 46px; display: flex; align-items: center; justify-content: center; }
.trust__mark img { height: 42px; width: auto; }
.trust__jm { height: 34px !important; filter: brightness(0) invert(.92); opacity: .9; }
.trust__mark--tp { flex-direction: column; gap: .3rem; }
.tp { font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--sc-ink); display: inline-flex; align-items: center; gap: .2rem; line-height: 1; }
.tp__star { color: #00B67A; font-size: 1.25rem; line-height: 1; }
.tpstars { display: inline-flex; gap: 2px; }
.tpstars i { width: 19px; height: 19px; background: #00B67A; display: grid; place-items: center; }
.tpstars i::after { content: "★"; color: #fff; font-size: 13px; line-height: 1; }
.tpstars i.p70 { background: linear-gradient(90deg, #00B67A 70%, #3B3B3B 70%); }
.trust__cap { display: flex; flex-direction: column; gap: .15rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.4; text-wrap: balance; }
.trust__cap b { color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm); }
.trust__lic { flex-direction: column; gap: .2rem; font-family: var(--sc-font-display); color: var(--sc-ink); line-height: 1; }
.trust__lic b { font-size: 1.05rem; letter-spacing: .05em; font-weight: 700; }
.trust__lic span { font-size: .8rem; color: var(--sc-accent); letter-spacing: .06em; }
@media (max-width: 600px) { .trust { grid-template-columns: 1fr 1fr; padding: var(--sc-4) var(--sc-3); } .trust__cell:last-child { grid-column: 1 / -1; } }
.trust__tp { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.trust__tp .tpbox { width: min(100%, 22rem); }
.trust__tpcap { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.aside h3 { font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); margin-top: var(--sc-6); }
.aside h3:first-child { margin-top: 0; }
.aside p, .aside li { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.aside p { margin: .5rem 0 0; }
.aside .next { list-style: none; margin: .5rem 0 0; padding: 0; }
.aside .next li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--sc-hairline); }
.aside .next b { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); padding-top: .15rem; }
.aside .fig { margin-bottom: var(--sc-5); aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------- close -- */
.close .sc-stage { display: grid; grid-template-rows: 1fr; }
.close__inner { display: grid; place-content: center; text-align: center; padding: var(--sc-gutter); gap: var(--sc-5); position: relative; z-index: 2; }
.close__inner .display--lg { max-width: 18ch; margin-inline: auto; }
.close__inner .lede { margin-inline: auto; text-align: center; }
.close__acts { display: flex; gap: var(--sc-4); justify-content: center; align-items: center; flex-wrap: wrap; }
.close__plate { position: absolute; inset: -6% 0; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: 50% 70%; opacity: .75; }
.close__inner { padding-top: 16vh; }
.close__shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 62%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 100%); }
@media (max-width: 860px) { .close__plate { opacity: .6; object-position: 50% 88%; } .close__shade { background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 25%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 70%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 100%); } }
.close__glow { position: absolute; left: 50%; top: 45%; width: 70vw; height: 70vw; max-width: 60rem; max-height: 60rem; translate: -50% -50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%); pointer-events: none; }
.foot { position: relative; z-index: 2; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); border-top: 1px solid var(--sc-hairline); background: var(--sc-canvas); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sc-6); padding-block: var(--sc-7) var(--sc-6); }
.foot__col { display: grid; gap: .45rem; align-content: start; justify-items: start; }
.foot__col b { color: var(--sc-ink); font-family: var(--sc-font-display); margin-bottom: .3rem; }
.foot__col a { text-decoration: none; }
.foot__col a:hover { color: var(--sc-ink); }
.foot__social { display: flex; gap: 1.2rem; margin-top: .6rem; }
.foot__social a { display: grid; place-items: center; width: 44px; height: 44px; margin: -12px; color: var(--sc-ink-soft); }
.foot__social svg { width: 20px; height: 20px; fill: currentColor; }
.foot__social a:hover { color: var(--sc-accent); }
.faq__search { margin-bottom: var(--sc-6); }
.faq__search input { width: 100%; padding: .9rem 1.2rem; border: 1px solid var(--sc-hairline-strong); border-radius: 999px; background: var(--sc-canvas); color: var(--sc-ink); font: inherit; font-size: var(--sc-t-base); }
.faq__search input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.faq__none { display: none; color: var(--sc-ink-soft); padding: var(--sc-5) 0; } .faq__none.is-on { display: block; }
.foot__mark { display: inline-flex; align-items: center; gap: .6rem; color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.foot__mark img { border-radius: 0; }
.foot__muted { color: var(--sc-ink-soft); }
.foot__bbb { margin-top: .6rem; }
.foot__fine { display: grid; gap: .4rem; padding-block: var(--sc-5) var(--sc-7); font-size: var(--sc-t-xs); border-top: 1px solid var(--sc-hairline); }
.foot__fine a { text-decoration: none; }
.foot__fine a:hover { color: var(--sc-ink); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr; } }
.close + .foot { position: relative; z-index: 2; border-top-color: var(--sc-hairline); }

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .plane, .hero__far, .hero__plate { transform: none !important; filter: none !important; }
  .hero__dust { display: none; }
  .slip li { opacity: 1; transform: none; }
  .rail > * { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------- layout overrides -- */
.lots--cats { margin-top: 0; }
.two--form { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
@media (max-width: 860px) { .two--form { grid-template-columns: 1fr; } .lots--cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lots--cats { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }
.m-only { display: none; } /* phone-only copy; .m-hide is its desktop twin (site.css phone block) */

/* scroll-lit paragraph (fora.so reference): words brighten as they are read */
[data-gv-lit] .lit { display: inline; opacity: .28; will-change: opacity; color: var(--sc-ink); }
@media (prefers-reduced-motion: reduce) { [data-gv-lit] .lit { opacity: 1; } }
@media (min-width: 861px) and (max-height: 700px) { .orbit__head h2 { font-size: var(--sc-t-2xl); } .orbit__head .lede { display: none; } }

/* round two, note 6: the row under the recent-purchases grid sits centred */
.lots--grid + .cta-row { justify-content: center; text-align: center; }

/* quality pass 2026-09-24: no clipped button labels on narrow phones */
@media (max-width: 480px) { .cta { white-space: normal; text-align: center; } }

/* ------------------------------------------------------ round six ---------- */
/* 1. The rotating word in the hero headline (after 21st.dev's animated-hero): the words
   stack in one grid cell so the slot is always as wide as the widest word, and each one
   rises in while the last one lifts out. */
/* Steve's read of round six: the slot is now exactly as wide as the word showing (site.js
   measures each word and animates the width), the words enter from the right and leave to the
   left, and whatever follows the slot ("worth today?") slides with it, so there is never a gap.
   The headline sits on set lines: "What's your old gold" / "<word> worth today?" / the em. */
.rot { display: inline-grid; justify-items: start; vertical-align: top; color: var(--sc-accent); text-align: left; overflow-x: clip; overflow-y: visible; transition: width 560ms var(--sc-ease-out); }
.rot > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateX(.45em); transition: transform 560ms var(--sc-ease-out), opacity 360ms var(--sc-ease-out); will-change: transform, opacity; }
.rot > span.is-in { opacity: 1; transform: none; }
.rot > span.is-out { opacity: 0; transform: translateX(-.45em); }
.hero__h1 { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .rot { transition: none; } .rot > span { transition: opacity 200ms linear; transform: none !important; } }

/* 2. Calculator backdrop: the hero's gold heap, sharp, growing with the weight slider
   (Steve's pick from four on 2026-09-24; the blur, coins and rain options are gone). */
.calc__plate { object-position: 62% 55%; opacity: .6; filter: brightness(.82) saturate(1.05); transform-origin: 62% 55%; scale: calc(1.02 + var(--wfill, .2) * .16); transition: scale 240ms var(--sc-ease-out); }

/* 3. The lots: the photos are shot under cool white light on a pale surface, so the cards
   are graded warm and their corners fall off into the dark; the wheel gets depth so the
   cards on either side turn toward the reader, and every card opens on click. */
.orbit { perspective: 1400px; }
.orb { cursor: zoom-in; pointer-events: auto; }
.orb::after { opacity: 1; background: radial-gradient(118% 118% at 50% 42%, transparent 46%, rgba(8, 5, 2, .62) 100%), linear-gradient(200deg, rgba(255, 214, 140, .16), transparent 45%, rgba(8, 5, 2, .28));
  box-shadow: inset 0 1px 0 rgba(255, 228, 170, .32), inset 0 0 0 1px rgba(255, 228, 170, .1), inset 0 0 26px rgba(8, 5, 2, .5); }
.orb.is-apex::after { background: radial-gradient(118% 118% at 50% 42%, transparent 58%, rgba(8, 5, 2, .5) 100%), linear-gradient(200deg, rgba(255, 214, 140, .14), transparent 45%, rgba(8, 5, 2, .2)); }
.orbit__more-link { display: block; margin-top: .15rem; }
.orbit__hint { display: block; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: .1rem; }
@media (hover: none) { .orbit__hint { display: none; } }

/* the lightbox: one photo at a time, the lot's name, weight and payout under it */
.lb { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lb.is-open { display: flex; }
.lb__box { display: grid; gap: var(--sc-4); justify-items: center; max-width: min(92vw, 56rem); }
.lb__img { width: min(84vw, 60vh, 40rem); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--sc-surface);
  box-shadow: 0 40px 90px -20px rgba(8, 5, 2, .95), 0 0 0 1px rgba(255, 228, 170, .18); }
.lb__cap { text-align: center; display: grid; gap: .15rem; justify-items: center; }
.lb__cap b { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }
.lb__cap span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lb__cap .num { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--sc-accent); letter-spacing: -.02em; line-height: 1; margin-top: .3rem; }
.lb__cap .link { margin-top: .5rem; font-size: var(--sc-t-sm); }
.lb__btn { position: absolute; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-canvas) 72%, transparent); color: var(--sc-ink); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lb__btn:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.lb__x { top: 1rem; right: 1rem; }
.lb__prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lb__next { right: 1rem; top: 50%; translate: 0 -50%; }
@media (max-width: 860px) { .lb__prev { left: .5rem; } .lb__next { right: .5rem; } .lb__img { width: min(84vw, 56vh); } }
html.has-lb { overflow: hidden; }

/* ------------------------------------------- page heroes, round seven (2026-09-24) -- */
/* Two columns: the copy on the left, a cluster of posed cards in its own column on the right,
   so text never crosses a photo. The cards take the homepage treatment (rim, pose, depth,
   caption strip); real lots get their name and payout from data.js through data-gv-plane. */
.phero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } /* round twenty-five: start, not center, so the copy and the cards begin on the same line on every page */
/* Round eight (Steve): angled cards belong to the homepage only. Page heroes carry a lot flow
   instead: two slow columns of flat cards, one rising, one sinking, masked at both ends, paused
   on hover, any card opens the lightbox. Phones get one row sliding left. */
.phero__flow { position: relative; height: 30rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.flow__col { display: flex; flex-direction: column; animation: gv-flow-up var(--flow-t, 44s) linear infinite; will-change: transform; }
.flow__col--rev { animation-name: gv-flow-down; --flow-t: 56s; }
.phero__flow:hover .flow__col { animation-play-state: paused; }
@keyframes gv-flow-up { to { transform: translateY(-50%); } }
@keyframes gv-flow-down { from { transform: translateY(-50%); } to { transform: none; } }
.flc { flex: 0 0 auto; margin: 0 0 1rem; width: 100%; display: grid; padding: 0; border: 3px solid #A8977A; border-radius: 7px; overflow: hidden; background: var(--sc-surface); color: var(--sc-ink); font: inherit; text-align: left; cursor: zoom-in;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .75); }
.flc img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 22%; display: block; }
.flc__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; align-items: end; padding: .5rem .7rem .55rem; font-size: .76rem; letter-spacing: .02em; background: color-mix(in oklab, var(--sc-surface) 94%, var(--sc-accent)); box-shadow: inset 0 1px 0 rgba(255, 228, 170, .12); }
.flc__cap b { grid-column: 1 / -1; font-family: var(--sc-font-display); font-weight: 600; }
.flc__cap .num { font-family: var(--sc-font-display); font-weight: 700; color: var(--gold-2); font-size: .9rem; }
.flc:hover { border-color: var(--gold-2); }
.phero__aside { margin-top: var(--sc-4); }
.stepline { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.phero__grid > .stepline { grid-column: 1 / -1; margin-top: 0; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); } /* its own full-width row under the hero, so the five flow across (Steve) */
.stepline li { display: inline-flex; align-items: center; gap: .45rem; }
.stepline b { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sc-accent); color: var(--sc-accent-ink); display: grid; place-items: center; font-family: var(--sc-font-display); font-weight: 700; font-size: .78rem; }
@media (max-width: 860px) {
  .phero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .phero__flow { height: auto; grid-template-columns: 1fr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .flow__col { flex-direction: row; animation-name: gv-flow-left; --flow-t: 36s; }
  .flow__col--rev { display: none; }
  .flc { width: 9.5rem; margin: 0 .75rem 0 0; }
  @keyframes gv-flow-left { to { transform: translateX(-50%); } }
}

/* ---------------------------------------- inner-page atmosphere, round seven -- */
/* Steve: the inner pages read as "mostly black" next to the homepage. Sections now carry a
   dimmed photo plate with a vignette, or a gold glow, or both, behind their content. The
   plate is clipped by its own box (never overflow on .sec, which would kill the sticky column). */
.sec__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sec > .wrap { position: relative; z-index: 1; }
.sec__plate { position: absolute; inset: -10% 0; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: var(--plate-pos, 50% 50%); opacity: var(--plate-o, .22); filter: saturate(.8) blur(var(--plate-blur, 0px)); }
.sec__vig { position: absolute; inset: 0; background:
  linear-gradient(to bottom, var(--sc-canvas) 0%, transparent 24%, transparent 70%, var(--sc-canvas) 100%),
  linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 85%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 45%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%); }
.sec__bg--top .sec__plate { inset: -5vh 0 auto; height: 110vh; }
.sec__bg--top .sec__vig { inset: -5vh 0 auto; height: 110vh; background:
  linear-gradient(to bottom, var(--sc-canvas) 0%, transparent 20%, transparent 55%, var(--sc-canvas) 100%),
  linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 85%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 45%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%); }
.sec__glow { position: absolute; width: 60vw; height: 60vw; max-width: 56rem; max-height: 56rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 168, 63, .2), rgba(216, 168, 63, .05) 55%, transparent 72%); }
.sec__glow--tl { left: -22vw; top: -22vw; }
.sec__glow--br { right: -22vw; bottom: -22vw; }
.sec__glow--r { right: -28vw; top: 50%; translate: 0 -50%; }
@media (prefers-reduced-motion: reduce) { .flow__col { animation: none; } }

/* ------------------------------------------ Live Payouts, round nine (2026-09-25) -- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tblwrap--rates { margin-top: var(--sc-6); background: color-mix(in oklab, var(--sc-surface) 82%, transparent); box-shadow: var(--sc-edge), 0 24px 60px -30px rgba(0, 0, 0, .8); }
.tbl--rates { font-size: var(--sc-t-base); }
.tbl--rates th, .tbl--rates td { padding: 1rem 1.1rem; }
.tbl--rates thead th { border-bottom: 1px solid var(--sc-hairline-strong); vertical-align: bottom; }
.tbl--rates th.rate, .tbl--rates td.rate { text-align: right; }
.tbl--rates th.rate small { display: block; font-size: .68rem; letter-spacing: .04em; text-transform: none; color: var(--sc-ink-soft); margin-top: .15rem; opacity: .8; }
.tbl--rates td.rate { font-size: var(--sc-t-lg); color: var(--sc-ink); }
.tbl--rates td.wt { color: var(--sc-ink-soft); } /* the weight column only; keyed by class so the coins table's amounts (also column two) stay bright */
.tbl--rates tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--sc-ink) 3%, transparent); }
.tbl--rates tbody tr:hover td { background: color-mix(in oklab, var(--sc-accent) 9%, transparent); }
.tbl--rates tbody tr.top td.rate { color: var(--gold-2); }
.tbl--rates tbody tr:last-child td { border-bottom: 0; }
.tag--sm { display: inline-block; font-family: var(--sc-font-text); font-size: .76rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-accent); border: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent); border-radius: 999px; padding: .1em .55em; margin-left: .5rem; vertical-align: middle; }
.tbl__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; margin-top: var(--sc-4); }
.tbl__foot .stamp, .tbl__foot .sc-body { margin: 0; }
@media (max-width: 860px) { .tbl--rates { font-size: var(--sc-t-sm); } .tbl--rates th, .tbl--rates td { padding: .8rem .7rem; } .tbl--rates td.rate { font-size: var(--sc-t-base); } .tbl--rates th.rate small { display: none; } }

/* reference lots as printed cards: the homepage's rim and caption strip */
/* every lot card wears the hero card's print: tan rim, sepia photo, one tight caption strip (Steve, round twenty) */
.lots--cards .lot, .lots--grid .lot, .lots--cats .cat { border: 3px solid #A8977A; border-radius: 7px; overflow: hidden; background: var(--sc-surface); box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .75); }
.lots--cards .lot__fig, .lots--grid .lot__fig, .lots--cats .cat__fig { border-radius: 0; box-shadow: none; aspect-ratio: 5 / 4; }
.lots--cards .lot__fig img, .lots--grid .lot__fig img, .lots--cats .cat__fig img { object-position: 50% 22%; }
.lots--cards .lot__cap, .lots--grid .lot__cap { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; align-items: end; padding: .5rem .7rem .55rem; font-size: .76rem; letter-spacing: .02em; background: color-mix(in oklab, var(--sc-surface) 94%, var(--sc-accent)); box-shadow: inset 0 1px 0 rgba(255, 228, 170, .12); }
.lots--cards .lot__cap > div, .lots--grid .lot__cap > div { display: contents; }
.lots--cards .lot__cap b, .lots--grid .lot__cap b { grid-column: 1 / -1; font-size: inherit; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lots--cards .lot__cap span, .lots--grid .lot__cap span { margin: 0; font-size: inherit; }
.lots--cards .lot__cap .pay, .lots--grid .lot__cap .pay { font-size: .9rem; color: var(--gold-2); }
.lots--cats .cat h3 { margin: 0; padding: .55rem .8rem 0; font-size: var(--sc-t-base); background: color-mix(in oklab, var(--sc-surface) 94%, var(--sc-accent)); }
.way__row { display: flex; gap: .4rem; align-items: baseline; margin-top: auto; } .way__row .link { display: inline; } .way__or { color: var(--sc-ink-soft); }
.lots--cats .cat p { margin: 0; padding: .25rem .8rem .7rem; font-size: .8rem; color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-surface) 94%, var(--sc-accent)); }
.lots--cards .lot__note, .lots--grid .lot__note { padding: 0 .9rem .7rem; margin: 0; background: color-mix(in oklab, var(--sc-surface) 94%, var(--sc-accent)); }

/* About hero (round ten): the flow carries what GoldVara is made of, not lots. Logo cards and
   fact cards on the same rim and caption strip as the lot cards. */
.flc--fact { cursor: default; }
.flc--fact .flc__face { display: grid; place-items: center; align-content: center; gap: .3rem; aspect-ratio: 5 / 4; padding: 1.2rem; background: linear-gradient(160deg, #221D16, #16130F); text-align: center; }
.flc--fact .flc__face > img { width: 72%; max-height: 3.2rem; object-fit: contain; filter: brightness(0) invert(.92); opacity: .92; }
.flc--fact .flc__face > img[src*="bbb.org"] { width: 82%; max-height: 3rem; filter: none; opacity: 1; }
.flc__big { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.02em; line-height: 1; color: var(--gold-2); }
.flc__sm { font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.flc--tp .flc__big { font-size: clamp(2rem, 3vw, 2.8rem); color: var(--sc-ink); }
.flc--tp .stars { font-size: 1rem; letter-spacing: .06em; }
.flc--fact .flc__cap { grid-template-columns: 1fr; }
.fig--desk { display: block; }
@media (max-width: 860px) { .fig--desk { display: none; } }

/* ------------------------------------------------ mobile-first, 2026-09-24 -- */
/* Steve: 85 to 90% of visitors are on phones. Type floor 17px body, nothing under 14px. Rounds
   thirteen and fifteen (his iPhone recording): solid bar and a compact button; the hero is copy
   over the photo (no cards, no dust) sized from the small viewport so it clears the bar; the
   How it works and What we buy rails are swipe decks, one card per swipe; the sample offer is
   preloaded, no pin; the calculator is static with no backdrop, and never driven by scroll;
   the lots wheel stays, as on desktop; scroll wipes are off; tables keep their first column. */
@media (max-width: 860px) {
  :root { --sc-t-xs: .875rem; --sc-t-sm: .9375rem; --sc-t-base: 1.0625rem; }
  .plane__cap, .plane__pay, .feat p, .slip, .ladder span, .chip, .trust__lic span, .flc__cap, .tbl--rates th.rate small, .tag--sm, .crumb, .fine, .form__steps li, .q, .opt small, .stamp, .scrollhint, .foot__fine, .press__lbl, .eyebrow { font-size: .875rem; }
  .tbl { font-size: var(--sc-t-sm); }
  /* chrome: the bar is solid on phones (the hero headline showed through it), the button one line */
  .bar, .bar.is-solid { background: var(--sc-canvas); box-shadow: 0 1px 0 var(--sc-hairline); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cta--bar { font-size: .8rem; padding: .62em 1em; white-space: nowrap; }
  /* hero: iPhone Safari reports two viewport heights; the copy box is built from the small one, so the type is too */
  .hero__copy { top: calc(var(--bar-h) + 2svh); bottom: clamp(2rem, 6svh, 4rem); }
  .hero__copy .display--xl { font-size: min(var(--sc-t-2xl), 6.2svh); }
  .plane, .hero__dust { display: none !important; }
  /* round sixteen (Steve): the hero is one screen, not a 2.4-screen pin ("three swipes to leave it"), and its copy flows below the bar instead of hanging in an absolute box that could rise under it */
  .hero { height: auto !important; }
  .hero .sc-stage, .hero [data-sc-stage] { position: relative !important; height: auto !important; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__copy { position: relative; inset: auto; top: auto; bottom: auto; max-width: none; padding: calc(var(--bar-h) + 5svh) var(--sc-gutter) 7svh; transform: none !important; opacity: 1 !important; justify-content: flex-start; }
  /* the How it works deck ends at step 5: the two closing links are hidden on phones */
  #how .rail__tail--moved { display: none; }
  /* the calculator is one card on phones: controls and result together, no fine print, no second link */
  .calc { background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: var(--sc-5) var(--sc-4); box-shadow: var(--sc-e3), var(--sc-edge); }
  .calc__ctl > .sc-body, .est__fine, .est .cta-row .link { display: none; }
  .est { background: none; box-shadow: none; border-radius: 0; padding: var(--sc-5) 0 0; margin-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
  .est .cta-row { margin-top: var(--sc-4) !important; }
  /* round seventeen (Steve's second recording), all phone-only */
  .m-hide { display: none; } .m-only { display: inline; }
  .step__n { top: auto; bottom: .8rem; }
  .scale__bg, .scale__vig { display: none; }
  .press { align-items: center; text-align: center; }
  .press__grp { width: 100%; justify-content: center; }
  .press .bbb img { height: 50px; }
  .ladder { display: none; }
  /* amount and pill share a row; the pill drops under the amount only when the row is too narrow (Steve's phone clipped "ELITE BRACKET", round twenty) */
  /* the bracket pill has one place on phones: under the amount (it was beside it on wide phones and above it on narrow ones, round twenty-one) */
  .est { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; overflow: hidden; }
  .est__big { margin: 0; order: -1; }
  .est__tier { margin: 0; }
  .est__note { margin-top: .2rem; }
  .tbl--rates .wt { display: none; }
  .tbl--rates td .wt-m { display: block; font-weight: 400; color: var(--sc-ink-soft); font-size: .8rem; margin-top: .15rem; white-space: nowrap; }
  /* round eighteen (Steve's third recording): the bracket pill on one row beside the amount for every bracket name; more air between the hero's lines */
  .est__big { font-size: 2.4rem; }
  .est__tier { white-space: nowrap; font-size: .875rem; letter-spacing: .04em; padding: .3rem .6rem; }
  .display { line-height: 1.12; }
  /* round nineteen (Steve's fourth recording, Live Payouts): the hero lot flow is a swipe row, not a marquee (a touch froze it and it could not be swiped); the weight-reference lots are a swipe deck; the "top rate" tag is a plain pill under its row label; captions sit tighter */
  .phero__flow { height: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); scrollbar-width: none; -webkit-mask-image: none; mask-image: none; margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); }
  .phero__flow::-webkit-scrollbar { display: none; }
  .phero__flow .flow__col { animation: none !important; flex-direction: row; gap: .75rem; }
  .phero__flow .flc { width: 62vw; max-width: 20rem; margin: 0; scroll-snap-align: start; }
  .flc__cap { padding: .5rem .7rem .55rem; gap: .1rem .5rem; }
  .flc__cap b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbl--rates .tag--sm { display: block; width: max-content; margin-top: .3rem; white-space: nowrap; }
  .lots--cards { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); scrollbar-width: none; gap: var(--sc-4); margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); }
  .lots--cards::-webkit-scrollbar { display: none; }
  .lots--cards .lot { flex: 0 0 62vw; max-width: 20rem; scroll-snap-align: start; scroll-snap-stop: always; }
  .lots--cards .lot__cap, .lots--grid .lot__cap { font-size: .875rem; }

  [data-sc-reveal] { clip-path: none !important; }
  /* the pans become swipe decks: the engine sets the act height and translates the rail inline; !important hands them back */
  .pan-static { height: auto !important; }
  .pan-static .sc-stage, .pan-static [data-sc-stage] { position: relative !important; height: auto !important; overflow: visible !important; }
  .pan-static .rail { transform: none !important; flex-direction: row; align-items: stretch; height: auto; gap: var(--sc-4); padding: var(--sc-3) var(--sc-gutter) var(--sc-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pan-static .rail::-webkit-scrollbar { display: none; }
  .pan-static .rail > * { opacity: 1 !important; transform: none !important; flex: 0 0 78vw; width: 78vw !important; max-width: 24rem; scroll-snap-align: start; scroll-snap-stop: always; padding-inline: 0 !important; }
  .rail__lead--moved { padding-block: var(--sc-8) 0; }
  .rail__tail--moved { padding-block: var(--sc-3) var(--sc-7); }
  .rail__tail--moved .rail__tail { width: auto; padding-left: 0; }
  /* the sample offer is preloaded: no pin, the receipt fully printed */
  .scale { height: auto !important; }
  .scale .sc-stage, .scale [data-sc-stage] { position: relative !important; height: auto !important; overflow: visible !important; display: block; padding: var(--sc-8) 0 var(--sc-7); }
  .scale__grid { display: block; }
  .scale .slip li { opacity: 1 !important; transform: none !important; }
  /* the calculator is a control, not a scene: no pin, no backdrop */
  .calcact { height: auto !important; }
  .calcact .sc-stage, .calcact [data-sc-stage] { position: relative !important; height: auto !important; overflow: visible !important; display: block; padding: var(--sc-8) 0 var(--sc-7); }
  .calc__bg { display: none; }
  /* rates tables: first column stays put while the rates pan */
  .tblwrap { background: linear-gradient(to right, var(--sc-surface) 30%, transparent), linear-gradient(to left, var(--sc-surface) 30%, transparent) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .45), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .45), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
  .tblwrap .tbl th:first-child, .tblwrap .tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--sc-surface); box-shadow: 2px 0 0 var(--sc-hairline); }
}

/* ------------------------------------------ round twenty-two: form pages, plain pages, thank-you -- */
/* a warm glow behind the heading of the form pages (Steve: 'all very dark, add a little colour') */
.formpage::before { content: ""; position: absolute; z-index: 0; left: -18vw; top: -6vh; width: 68vw; height: 68vw; max-width: 42rem; max-height: 42rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(216, 168, 63, .20), rgba(216, 168, 63, .05) 55%, transparent 72%); }
.formpage > .wrap { position: relative; z-index: 1; }
/* plain pages: Terms, Privacy, SMS Terms, thank-you, payment details. Same shell, one reading column */
.plainpage { position: relative; padding-top: calc(var(--bar-h) + clamp(2rem, 6vw, 4rem)); padding-bottom: var(--sc-9); }
.plainpage > .wrap { position: relative; z-index: 1; }
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); margin: var(--sc-7) 0 var(--sc-3); }
.prose h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); margin: var(--sc-5) 0 var(--sc-2); }
.prose p, .prose li { color: var(--sc-ink-soft); line-height: 1.65; }
.prose p { margin: 0 0 var(--sc-4); }
.prose ul, .prose ol { margin: 0 0 var(--sc-4); padding-left: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .15em; }
.prose strong { color: var(--sc-ink); }
.plain__meta { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin: 0 0 var(--sc-6); }
.thanks { max-width: 44rem; margin-inline: auto; text-align: center; }
.thanks .display { margin-bottom: var(--sc-4); }
.thanks .lede { margin: 0 auto var(--sc-6); }
.thanks .cta-row { justify-content: center; }
.thanks__mark { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sc-5); background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem; box-shadow: var(--sc-e2); }
.thanks .next { list-style: none; text-align: left; margin: var(--sc-6) auto 0; padding: 0; max-width: 36rem; }
.thanks .next li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.thanks .next b { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); padding-top: .15rem; }
/* Trustpilot's live TrustBox (Steve, round twenty-two: the account's own code, not a typed count) */
.tpbox { min-height: 24px; width: 100%; }
.tpcombo { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: min(100%, 22rem); }
.tpcombo__badge { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; color: var(--sc-ink); }
.tpcombo__word { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1; }
.tpcombo__score { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.wrap--solo { max-width: min(var(--sc-maxw), 52rem); margin-inline: auto; }
.tpbox iframe { max-width: 100%; }
.press__tp { width: min(100%, 22rem); }
.form .fine.err { display: none; }
.opts.is-bad + .fine.err { display: block; }
@media (max-width: 860px) {
  /* the button row stacks: primary first and full width, Back under it. Two nowrap buttons on one flex row
     forced the whole card past the viewport at Steve's text size (round twenty-two, WebKit at 120%) */
  .form__nav { display: grid; grid-template-columns: 1fr; gap: .7rem; justify-items: stretch; }
  .form__nav > span { display: none; }
  .form__nav .cta { width: 100%; padding: .8em 1.2em; font-size: var(--sc-t-base); }
  .form__nav [data-next], .form__nav [data-submit] { order: -1; }
  .form__nav [data-back] { order: 1; }
  .formpage::before { left: -30vw; top: -4vh; width: 110vw; height: 110vw; }
}

/* ------------------------------------------ round twenty-seven: What We Buy (Steve's screenshot) -- */
/* category cards: the caption fills the card to its bottom edge on every card, not only the tallest */
.lots--cats .cat { display: flex; flex-direction: column; }
.lots--cats .cat p { flex: 1; }
/* round twenty-eight: the warm sepia grade is off every lot photo sitewide (Steve: the rich colour of gold and jewelry makes the site pop) */
@media (max-width: 860px) {
  .is-wwb .phero__flow { display: none; } /* the scale photos leave the What We Buy hero on phones (Steve) */
}

/* ------------------------------------------ round twenty-nine: About (Steve's screenshots) -- */
/* credential cards that can be checked are links; the shield marks the city license */
a.flc--link { text-decoration: none; cursor: pointer; }
a.flc--link:hover, a.flc--link:focus-visible { border-color: var(--gold-2); }
a.flc--link:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.flc__shield { width: 2.4rem; height: 2.4rem; fill: var(--gold-2); margin-bottom: .2rem; }
.phero__flow--facts .flc:not(.flc--link) { cursor: default; }
/* the reviews block: score, stars, then Trustpilot's own count line, one column */
.tp--stack { display: grid; grid-template-columns: 1fr; justify-items: start; align-content: center; gap: .7rem; }
.tp--stack .tpbox { width: min(100%, 22rem); }
@media (max-width: 860px) { .tp--stack { justify-items: center; text-align: center; margin-top: var(--sc-5); } }

/* ------------------------------------------ round thirty: the shipping pages the notifications link to -- */
.guide__step { margin-top: var(--sc-7); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.guide__step:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.guide__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: var(--sc-4); }
.guide__fig { aspect-ratio: 4 / 3; }
.help { margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.help__list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: var(--sc-3); max-width: 46rem; }
.help__list li { display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); line-height: 1.55; }
.help__list b { font-family: var(--sc-font-display); color: var(--sc-ink); }
.qr { margin: 0; display: grid; gap: var(--sc-4); justify-items: start; }
.qr__code { width: min(100%, 18rem); aspect-ratio: 1; border-radius: var(--sc-r-lg); background: #FFFDF7; color: #2B2417; display: grid; place-items: center; text-align: center; padding: 1.2rem; box-shadow: var(--sc-e3); border: 6px solid #FFFDF7; outline: 3px solid #A8977A; }
.qr__code span { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); }
.qr__code small { display: block; font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); color: #6B5E47; margin-top: .5rem; }
.qr figcaption { color: var(--sc-ink-soft); max-width: 46rem; line-height: 1.55; }
.rules { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: var(--sc-4); }
.rules li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-lg); background: var(--sc-surface); box-shadow: var(--sc-edge); }
.rules__n { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center; background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-display); font-weight: 700; }
.rules b { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); display: block; margin-bottom: .3rem; }
.rules p { margin: 0; color: var(--sc-ink-soft); line-height: 1.55; }
.label__missing { display: none; }
body.is-missing .label__found { display: none; }
body.is-missing .label__missing { display: block; }
@media (max-width: 860px) {
  .guide__body { grid-template-columns: 1fr; }
  .guide__fig { order: -1; }
  .help__list li { grid-template-columns: 1fr; gap: .2rem; }
  .qr { justify-items: center; text-align: center; }
}

/* ==========================================================================
   PORT (goldvara-vault theme). Rules below exist only in the theme, not in the
   concept at scrollcraft/builds/vault/.
   ========================================================================== */

/* Empty rates store (phase 2, 2026-09-24): every block that shows a figure
   carries data-gv-needs-rates and hides; the notice shows in its place. A
   stale store is not empty: it keeps showing last-known rates, honestly stamped. */
.gv-norates { display: none; }
body.gv-no-rates [data-gv-needs-rates] { display: none !important; }
body.gv-no-rates .gv-norates {
  display: block; max-width: var(--sc-measure); margin: var(--sc-5) 0; padding: var(--sc-4) var(--sc-5);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  color: var(--sc-ink); font-size: var(--sc-t-base); line-height: var(--sc-leading-body);
}
body.gv-no-rates .gv-norates a { color: var(--sc-accent); }

/* Gravity Forms in the Vault form (phase 4, 2026-09-24). The live forms 7, 14 and 19 render
   inside div.form.gv-gf and borrow the concept's form look: steps, fields, choice cards,
   drop zone, check rows, button row. Rules the old theme learned the hard way still hold
   (DECISIONS.md 2026-08-23): GF's own sheets load after this one and win ties, so every rule
   GF also styles is scoped through .gform_wrapper.gravity-theme; controls stay at 16px or
   more (iOS zooms below that); textareas resize vertically only; the footer never uses
   flex-wrap; the kit address block hides in CSS, never in Gravity Forms. */
.gv-gf .gform_wrapper.gravity-theme { margin: 0; }
.gv-gf .gform_wrapper.gravity-theme form { margin: 0; }
.gv-gf .gform_wrapper.gravity-theme .gform_heading { margin: 0; }
.gv-gf .gform_wrapper.gravity-theme .gform_required_legend { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: 0 0 var(--sc-4); }
.gv-gf .gform_wrapper.gravity-theme .gfield_required { color: var(--sc-accent); }
.gv-gf .gform_wrapper.gravity-theme .gform_fields { row-gap: var(--sc-5); column-gap: var(--sc-4); }

/* steps: the concept's .form__steps */
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps { display: flex; gap: .4rem; margin: 0 0 var(--sc-6); padding: 0; border: 0; }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step { flex: 1; display: block; width: auto; height: auto; margin: 0; padding: .6rem 0 0; border-top: 2px solid var(--sc-hairline-strong); font-size: var(--sc-t-xs); letter-spacing: .04em; color: var(--sc-ink-soft); opacity: 1; }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step_active { color: var(--sc-ink); border-top-color: var(--sc-accent); }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step_completed { border-top-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step_number { display: block; position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 700; letter-spacing: 0; color: inherit; line-height: 1.4; }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step_active .gf_step_number { color: var(--sc-accent); }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step_completed .gf_step_number::before,
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step_completed .gf_step_number::after { display: none; }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step_label { display: block; font-size: inherit; font-weight: 400; line-height: 1.4; padding: 0; margin: 0; }

/* labels: group questions read like the concept's .q, single fields like .field label */
.gv-gf .gform_wrapper.gravity-theme .gform_fields legend.gfield_label,
.gv-gf .gform_wrapper.gravity-theme .gform_fields .gfield--type-fileupload .gfield_label { font-size: var(--sc-t-xs); font-weight: 400; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: color-mix(in oklab, var(--sc-accent) 78%, var(--sc-ink)); margin: 0 0 .6rem; padding: 0; }
.gv-gf .gform_wrapper.gravity-theme .gform_fields label.gfield_label { font-size: var(--sc-t-sm); font-weight: 400; line-height: var(--sc-leading-body); color: var(--sc-ink); margin: 0 0 .35rem; }

/* inputs: the concept's .field controls */
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="text"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="email"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="tel"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="number"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields select,
.gv-gf .gform_wrapper.gravity-theme .gform_fields textarea {
  font-family: inherit; font-size: max(16px, var(--sc-t-base)); line-height: var(--sc-leading-body); color: var(--sc-ink); background: var(--sc-canvas);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 18%, var(--sc-hairline-strong)); border-radius: var(--sc-r-md);
  padding: .8rem .9rem; width: 100%; max-width: 100%; transition: border-color 140ms;
}
/* Gravity Forms sizes text controls with `input:not([type=radio]):not([type=checkbox])...`
   selectors, whose :not() arguments push them past any class chain here (line-height 2 and a
   32px min-height, measured 2026-09-24). The four sizing properties are pinned instead. */
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="text"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="email"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="tel"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="number"],
.gv-gf .gform_wrapper.gravity-theme .gform_fields select { line-height: var(--sc-leading-body) !important; padding: .8rem .9rem !important; min-height: 0 !important; font-size: max(16px, var(--sc-t-base)) !important; }
.gv-gf .gform_wrapper.gravity-theme .gform_fields textarea { min-height: 6.5rem; height: 6.5rem; resize: vertical; }
.gv-gf .gform_wrapper.gravity-theme .gform_fields input::placeholder,
.gv-gf .gform_wrapper.gravity-theme .gform_fields textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.gv-gf .gform_wrapper.gravity-theme .gform_fields input:focus,
.gv-gf .gform_wrapper.gravity-theme .gform_fields select:focus,
.gv-gf .gform_wrapper.gravity-theme .gform_fields textarea:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.gv-gf .gform_wrapper.gravity-theme .gform_fields .gfield_error input,
.gv-gf .gform_wrapper.gravity-theme .gform_fields .gfield_error textarea { border-color: #E08A7A; }

/* multi-choice and radio groups: the concept's .opt cards */
.gv-gf .gform_wrapper.gravity-theme .gfield--type-multi_choice .gfield_checkbox,
.gv-gf .gform_wrapper.gravity-theme .gfield--type-radio .gfield_radio { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.gv-gf .gform_wrapper.gravity-theme .gfield--type-multi_choice .gchoice,
.gv-gf .gform_wrapper.gravity-theme .gfield--type-radio .gchoice { position: relative; margin: 0; display: block; }
.gv-gf .gform_wrapper.gravity-theme .gfield--type-multi_choice .gchoice input,
.gv-gf .gform_wrapper.gravity-theme .gfield--type-radio .gchoice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.gv-gf .gform_wrapper.gravity-theme .gfield--type-multi_choice .gchoice label,
.gv-gf .gform_wrapper.gravity-theme .gfield--type-radio .gchoice label {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: .8rem 1rem; font-size: var(--sc-t-sm); font-weight: 400; line-height: var(--sc-leading-body); color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, var(--sc-hairline-strong)); background: color-mix(in oklab, var(--sc-accent) 4%, transparent);
  border-radius: var(--sc-r-md); transition: border-color 140ms, background 140ms; cursor: pointer;
}
.gv-gf .gform_wrapper.gravity-theme .gchoice:has(input:checked) label,
.gv-gf .gform_wrapper.gravity-theme .gchoice input:checked + label { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); }
.gv-gf .gform_wrapper.gravity-theme .gchoice:has(input:focus-visible) label { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* single checkboxes (consent, "also text me"): the concept's .check row */
.gv-gf .gform_wrapper.gravity-theme .gfield--type-consent .ginput_container_consent,
.gv-gf .gform_wrapper.gravity-theme .gfield--type-checkbox .gchoice { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: 0; }
.gv-gf .gform_wrapper.gravity-theme .gfield--type-consent input[type="checkbox"],
.gv-gf .gform_wrapper.gravity-theme .gfield--type-checkbox input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--sc-accent); }
.gv-gf .gform_wrapper.gravity-theme .gfield--type-consent label,
.gv-gf .gform_wrapper.gravity-theme .gfield--type-checkbox .gchoice label { font-size: var(--sc-t-sm); font-weight: 400; line-height: 1.5; color: var(--sc-ink-soft); margin: 0; }
.gv-gf .gform_wrapper.gravity-theme .gfield--type-consent label a { color: var(--sc-ink); }
.gv-gf .gform_wrapper.gravity-theme .gfield--type-consent legend.gfield_label { display: none; }

/* descriptions and small print: the concept's .fine */
.gv-gf .gform_wrapper.gravity-theme .gfield_description,
.gv-gf .gform_wrapper.gravity-theme .gform_fileupload_rules { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.5; padding: .6rem 0 0; }
.gv-gf .gform_wrapper.gravity-theme .gfield_description a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .15em; }

/* file upload: the concept's .drop */
.gv-gf .gform_wrapper.gravity-theme .gform_drop_area {
  border: 1px dashed color-mix(in oklab, var(--sc-accent) 45%, var(--sc-hairline-strong)); background: color-mix(in oklab, var(--sc-accent) 3%, transparent);
  border-radius: var(--sc-r-lg); padding: var(--sc-6) var(--sc-4); text-align: center; color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
  display: grid; gap: .5rem; justify-items: center; transition: border-color 140ms, background 140ms;
}
.gv-gf .gform_wrapper.gravity-theme .gform_drop_area:hover,
.gv-gf .gform_wrapper.gravity-theme .gform_drop_area.hover { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 6%, transparent); }
.gv-gf .gform_wrapper.gravity-theme .gform_drop_instructions { display: block; margin: 0; color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 700; }
.gv-gf .gform_wrapper.gravity-theme .gform_fields .gform_button_select_files {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: .06em; text-transform: uppercase;
  padding: .95em 1.6em; border-radius: 999px; background: transparent; color: var(--sc-ink); border: 0; box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); cursor: pointer;
}
.gv-gf .gform_wrapper.gravity-theme .gform_fields .gform_button_select_files:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--sc-ink-soft); }
.gv-gf .gform_wrapper.gravity-theme .ginput_preview { font-size: var(--sc-t-xs); color: var(--sc-ink); padding: .3rem .6rem; border-radius: 999px; background: var(--sc-canvas); display: inline-flex; gap: .4rem; margin: .4rem .4rem 0 0; }

/* the button row: the concept's .form__nav */
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer,
.gv-gf .gform_wrapper.gravity-theme .gform_footer { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); margin: var(--sc-6) 0 0; padding: var(--sc-5) 0 0; border-top: 1px solid var(--sc-hairline); }
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer .gform_next_button,
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer .gform_button,
.gv-gf .gform_wrapper.gravity-theme .gform_footer .gform_button { margin-left: auto; }
/* GF buttons are <input>s, so the concept CTA's brushed ::before band cannot sit on them;
   everything else about the gold button carries over */
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_next_button,
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_button,
.gv-gf .gform_wrapper.gravity-theme .gform_footer input.gform_button {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  color: var(--sc-accent-ink); text-shadow: 0 1px 0 rgba(255, 240, 200, .35); white-space: normal; text-align: center;
  padding: .95em 1.6em; border-radius: 999px; border: 3px solid transparent; cursor: pointer; width: auto; min-height: 0;
  background:
    linear-gradient(180deg, #F3D07A 0%, #E3B851 38%, #CE9B2F 62%, #B7851E 100%) padding-box,
    conic-gradient(from var(--gv-flow), #5C3D0C 0deg, #FFF3C4 40deg, #9C6F17 85deg, #FFFBE6 125deg, #6E4A0F 175deg, #F9E39C 225deg, #8A6216 280deg, #FFF0B8 330deg, #5C3D0C 360deg) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, .55), inset 0 -1px 0 rgba(80, 52, 8, .45), var(--sc-e2), 0 10px 26px -10px rgba(216, 168, 63, .55);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), filter 140ms var(--sc-ease-out);
  animation: gv-flow 4.5s linear infinite;
}
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_button,
.gv-gf .gform_wrapper.gravity-theme .gform_footer input.gform_button { padding: 1.15em 2em; }
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_next_button:hover,
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_button:hover,
.gv-gf .gform_wrapper.gravity-theme .gform_footer input.gform_button:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-1px); }
.gv-gf .gform_wrapper.gravity-theme input.gform_next_button:focus-visible,
.gv-gf .gform_wrapper.gravity-theme input.gform_button:focus-visible,
.gv-gf .gform_wrapper.gravity-theme input.gform_previous_button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  padding: .95em 1.6em; border-radius: 999px; border: 3px solid transparent; background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); cursor: pointer; width: auto; margin: 0;
}
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--sc-ink-soft); }
@media (max-width: 860px) {
  /* primary first and full width, Previous under it (the concept's round twenty-two rule) */
  .gv-gf .gform_wrapper.gravity-theme .gform_page_footer,
  .gv-gf .gform_wrapper.gravity-theme .gform_footer { display: grid; grid-template-columns: 1fr; gap: .7rem; justify-items: stretch; }
  .gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_next_button,
  .gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_button,
  .gv-gf .gform_wrapper.gravity-theme .gform_footer input.gform_button { order: -1; width: 100%; margin: 0; padding: .8em 1.2em; }
  .gv-gf .gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button { order: 1; width: 100%; padding: .8em 1.2em; }
}

/* errors */
.gv-gf .gform_wrapper.gravity-theme .gform_validation_errors { border: 1px solid #E08A7A; border-radius: var(--sc-r-md); background: color-mix(in oklab, #E08A7A 8%, transparent); box-shadow: none; padding: .9rem 1rem; margin: 0 0 var(--sc-5); }
.gv-gf .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error { font-size: var(--sc-t-sm); color: var(--sc-ink); font-weight: 400; }
.gv-gf .gform_wrapper.gravity-theme .gfield_validation_message,
.gv-gf .gform_wrapper.gravity-theme .validation_message { color: #E08A7A; font-size: var(--sc-t-xs); background: none; border: 0; padding: .4rem 0 0; margin: 0; }

/* per-form content fields carry inline styles from the Elementor era; bring them into the Vault type */
.gv-gf .gform_wrapper.gravity-theme #field_7_1 h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl) !important; letter-spacing: var(--sc-track-snug); line-height: 1.2 !important; padding: 0 !important; margin: 0; color: var(--sc-ink); }
.gv-gf .gform_wrapper.gravity-theme #field_7_1 h2 b { font-weight: inherit; }
.gv-gf .gform_wrapper.gravity-theme #field_7_1 h2 br { display: none; }
.gv-gf .gform_wrapper.gravity-theme #field_7_1 h2 span { display: block; margin-top: .5rem; font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-base) !important; letter-spacing: 0; color: var(--sc-ink-soft); line-height: var(--sc-leading-body); }
.gv-gf .gform_wrapper.gravity-theme #field_7_10 p { font-size: var(--sc-t-xs) !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--sc-ink-soft); }
.gv-gf .gform_wrapper.gravity-theme #field_14_17 { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: color-mix(in oklab, var(--sc-accent) 78%, var(--sc-ink)); }

/* /request-kit/ address (field 7_20): Google autocomplete fills street, city, state and ZIP
   from the one-line box above, so only the apartment line shows. Hide in CSS, never with
   Gravity Forms' own hide, which removes the inputs and empties every address (2026-08-23). */
.gv-gf #field_7_20 > .gfield_label,
.gv-gf #field_7_20 .ginput_address_line_1,
.gv-gf #field_7_20 .ginput_address_city,
.gv-gf #field_7_20 .ginput_address_state,
.gv-gf #field_7_20 .ginput_address_zip,
.gv-gf #field_7_20 .ginput_address_line_2 > label { display: none; }

/* the step heading gv-forms.js writes above each page, and the required note it moves under
   the form: the concept's .fs > legend and trailing .fine */
.gv-gf .gv-gf__legend { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.2; color: var(--sc-ink); margin: 0 0 var(--sc-4); }
.gv-gf .gform_wrapper.gravity-theme .gform_heading.gv-gf__after { margin: var(--sc-4) 0 0; }
.gv-gf .gform_wrapper.gravity-theme .gform_heading.gv-gf__after .gform_required_legend { margin: 0; }
/* the kit-type question: the live form hides its label, the concept shows the same words */
.gv-gf .gform_wrapper.gravity-theme #field_7_2 legend.gfield_label { position: static; width: auto; height: auto; margin: 0 0 .6rem; clip: auto; clip-path: none; overflow: visible; white-space: normal; display: block; }
/* name, email and phone two to a row on wider screens, as the concept's .grid2 does */
@media (min-width: 861px) {
  .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_14_10, .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_14_11,
  .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_14_12, .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_14_13,
  .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_7_3, .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_7_4,
  .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_7_5, .gv-gf .gform_wrapper.gravity-theme .gform_fields #field_7_6 { grid-column: span 6; }
}
/* selects (payment form): Safari paints a pale native box, unreadable on the dark card */
.gv-gf .gform_wrapper.gravity-theme .gform_fields select {
  -webkit-appearance: none; appearance: none; background-color: var(--sc-canvas); color: var(--sc-ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-accent) 50%), linear-gradient(135deg, var(--sc-accent) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - .9rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat;
  padding-right: 2.6rem !important;
}
.gv-gf .gform_wrapper.gravity-theme .gform_fields select option { color: #111; }
/* single-file upload (payment form photo ID): the concept's ghost button on the native picker */
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="file"] { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 100%; }
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="file"]::file-selector-button {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: .06em; text-transform: uppercase;
  padding: .8em 1.4em; margin-right: .9rem; border-radius: 999px; border: 0; background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); cursor: pointer;
}
.gv-gf .gform_wrapper.gravity-theme .gform_fields input[type="file"]::-webkit-file-upload-button {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: .06em; text-transform: uppercase;
  padding: .8em 1.4em; margin-right: .9rem; border-radius: 999px; border: 0; background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); cursor: pointer;
}
.gv-gf .gform_wrapper.gravity-theme .gfield_required_text { color: var(--sc-accent); font-style: normal; font-size: var(--sc-t-xs); }
/* Gravity Forms scrolls to the form on errors and page changes; keep that clear of the fixed bar */
.gv-gf .gform_anchor, .gv-gf .gform_wrapper, .gv-gf .gform_validation_errors { scroll-margin-top: calc(var(--bar-h) + 1rem); }
/* email typo hint (assets/js/email-suggest.js, carried from goldvara-theme): the correction is
   never applied unless the customer clicks it */
.gv-phone-hint,
.gv-email-hint { margin-top: .4rem; font-size: var(--sc-t-sm); line-height: 1.4; color: var(--sc-ink-soft); }
.gv-email-hint__accept { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--sc-accent); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.gv-email-hint__accept:hover, .gv-email-hint__accept:focus-visible { color: var(--sc-ink); }
/* Vault wording on the forms (inc/vault-forms.php): second lines under choices, photo tips */
.gv-gf .gform_wrapper.gravity-theme .gchoice label .gv-gf__sub { display: block; margin-top: .2rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.gv-gf .gform_wrapper.gravity-theme .gv-gf__tip { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.5; margin: 0 0 var(--sc-4); }
/* payment method cards (gv-forms.js): the dropdown stays in the page, under the cards, for the form's logic */
.gv-gf .gform_wrapper.gravity-theme .gv-gf__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.gv-gf .gform_wrapper.gravity-theme .gv-gf__cards .gchoice { position: relative; margin: 0; }
.gv-gf .gform_wrapper.gravity-theme .gv-gf__cards .gchoice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.gv-gf .gform_wrapper.gravity-theme .gv-gf__cards .gchoice label {
  display: block; margin: 0; padding: 1rem 1.1rem; font-size: var(--sc-t-sm); line-height: var(--sc-leading-body); color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, var(--sc-hairline-strong)); background: color-mix(in oklab, var(--sc-accent) 4%, transparent);
  border-radius: var(--sc-r-md); transition: border-color 140ms, background 140ms; cursor: pointer;
}
.gv-gf .gform_wrapper.gravity-theme .gv-gf__cards .gchoice:has(input:checked) label { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); }
.gv-gf .gform_wrapper.gravity-theme .gv-gf__cards .gchoice:has(input:focus-visible) label { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.gv-gf .gform_wrapper.gravity-theme .gv-gf--cards select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gv-gf .gform_wrapper.gravity-theme .gform_fields .gv-gf--cards label.gfield_label { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: color-mix(in oklab, var(--sc-accent) 78%, var(--sc-ink)); }
.gv-gf .gform_wrapper.gravity-theme .gv-gf--cards .ginput_container { position: relative; }
/* the shipping-label page's real QR image (plugin v1.3) in the concept's QR box */
.qr__code img { display: block; width: 100%; height: auto; }

/* Estimate form in Unvault's layout, one piece at a time (inc/vault-estimate-pieces.php; inert until form 14 has the piece fields) */
.gv-gf .gform_wrapper.gravity-theme .gv-q { font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; margin: 0 0 .35rem; color: var(--sc-ink); }
.gv-gf .gform_wrapper.gravity-theme .gv-qsub { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.gv-gf .gform_wrapper.gravity-theme .gform_drop_area { padding: 2.25rem 1rem; }
.gv-gf .gform_wrapper.gravity-theme .gform_button_select_files { font-weight: 600; }
.gv-gf .gform_wrapper.gravity-theme .gv-tips__more { margin: .7rem 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.gv-gf .gform_wrapper.gravity-theme .gv-tips__title { margin: var(--sc-5) 0 .6rem; font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); }
.gv-gf .gform_wrapper.gravity-theme .gv-tips { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
@media (min-width: 720px) { .gv-gf .gform_wrapper.gravity-theme .gv-tips { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.gv-gf .gform_wrapper.gravity-theme .gv-tip { margin: 0; scroll-snap-align: start; }
.gv-gf .gform_wrapper.gravity-theme .gv-tip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sc-r-md); }
.gv-gf .gform_wrapper.gravity-theme .gv-tip figcaption { padding: .5rem .1rem 0; font-size: var(--sc-t-xs); line-height: 1.45; color: var(--sc-ink-soft); }
.gv-gf .gform_wrapper.gravity-theme .gv-metal .gfield_radio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 720px) { .gv-gf .gform_wrapper.gravity-theme .gv-metal .gfield_radio { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gv-gf .gform_wrapper.gravity-theme .gv-metal .gchoice label { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .5rem .4rem .55rem; text-align: center; font-size: var(--sc-t-xs); }
.gv-gf .gform_wrapper.gravity-theme .gv-sw { display: block; width: 100%; height: 2.75rem; border-radius: var(--sc-r-sm); background: #26221c; }
.gv-gf .gform_wrapper.gravity-theme .gv-sw--yellow { background: linear-gradient(135deg, #f5dc8e, #c79a2e 55%, #f0d27c); }
.gv-gf .gform_wrapper.gravity-theme .gv-sw--white { background: linear-gradient(135deg, #f6f2ea, #cfc7b8 55%, #efe9de); }
.gv-gf .gform_wrapper.gravity-theme .gv-sw--rose { background: linear-gradient(135deg, #f4cfc0, #b97a66 55%, #edc0ae); }
.gv-gf .gform_wrapper.gravity-theme .gv-sw--silver { background: linear-gradient(135deg, #ececec, #8f8f8f 55%, #dadada); }
.gv-gf .gform_wrapper.gravity-theme .gv-sw--platinum { background: linear-gradient(135deg, #f3f5f7, #b4b8be 55%, #e8eaec); }
.gv-gf .gform_wrapper.gravity-theme .gv-sw--other { background: linear-gradient(135deg, #3a342b, #2a261f); }
.gv-gf .gform_wrapper.gravity-theme .gv-purity .gfield_radio { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.gv-gf .gform_wrapper.gravity-theme .gv-purity .gchoice label { text-align: center; }
.gv-gf .gform_wrapper.gravity-theme .gv-big .gfield_radio { grid-template-columns: 1fr; }
.gv-gf .gform_wrapper.gravity-theme .gv-big .gchoice label { padding: 1rem 1.1rem; font-size: var(--sc-t-base); }
.gv-gf .gform_wrapper.gravity-theme .gv-short .gfield_radio { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.gv-gf .gform_wrapper.gravity-theme .gv-cert .gfield_label::after { content: "High impact"; margin-left: .6rem; padding: .1rem .5rem; border-radius: 99px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-accent-ink); background: var(--sc-accent); vertical-align: .1rem; }
.gv-gf .gform_wrapper.gravity-theme .gv-small label.gfield_label { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.gv-gf .gform_wrapper.gravity-theme .gf_page_steps .gf_step.gf_step_hidden { display: none; }
.formpage.gv-later h1, .formpage.gv-later .crumb { display: none; }
@media (max-width: 719px) { .formpage:has(.gv-metal) .crumb { display: none; } }
.gv-gf .gform_wrapper.gravity-theme .gv-cert .gform_drop_area { padding: .9rem 1rem; }
.gv-gf .gform_wrapper.gravity-theme .gv-cert .gform_button_select_files { padding: .5rem 1.1rem; font-size: var(--sc-t-xs); }
.gv-gf .gform_wrapper.gravity-theme .ginput_preview { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gv-gf .gform_wrapper.gravity-theme .gv-thumb { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--sc-r-sm); border: 1px solid var(--sc-hairline-strong); flex: none; }
/* Hidden from view but still rendered: Gravity Forms ignores a click on a display:none button. */
.gv-gf .gform_wrapper.gravity-theme .gform_page:has(.gv-next) .gform_next_button { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.gv-gf .gform_wrapper.gravity-theme .gform_page_footer.gv-lifted { margin: var(--sc-4) 0 0; padding-top: 0; border-top: 0; }