/* BidMate · precise and calm. Tokens first. */
:root {
  color-scheme: light;
  --night: 246, 241, 231;   /* the film's paper tone: scrims and text halos in the hero */
  --ink: #F6F1E7;
  --ink-2: #FFFFFF;
  --ink-3: #EDE6D8;
  --line: #2A5CA8;
  --line-dim: rgba(29, 70, 140, .09);
  --paper: #10233F;
  --paper-dim: rgba(16, 35, 63, .74);
  --copper: #1D5BD8;
  --ready: #2A6FDB;
  --missing: #C98A12;
  --approved: #1E9A68;
  --bad: #D4462F;
  --good: #1E9A68;

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: var(--copper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }

/* Fixed background environment: the film runs behind the whole site */
.env { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgb(var(--night)); overflow: hidden; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 60% 55%; will-change: transform; opacity: 0; transition: opacity 1s var(--ease); }
.has-film .film { opacity: 1; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.has-video .film-video { opacity: 1; }
@media (max-width: 640px) { .film-video { object-position: 62% 50%; } }
.film-veil { position: absolute; inset: 0; background: var(--ink); opacity: 0; will-change: opacity; }
.env-grid { position: absolute; inset: 0;
  background:
    linear-gradient(var(--line-dim) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--line-dim) 1px, transparent 1px) 0 0 / 48px 48px;
  opacity: .5; }
.has-film .env-grid { opacity: .5; }
.env::after { content: none; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }

/* Type */
.eyebrow, .band-num, .step-num, .tally-label, .layers-label, .bench-sheet {
  font: 500 14px/1.2 var(--f-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--line);
  margin: 0 0 18px;
}
h1, h2, h3, .display {
  font-family: var(--f-display);
  font-stretch: 118%;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: clamp(44px, 6.6vw, 96px); margin-bottom: 28px; }
h3 { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; font-stretch: 110%; font-weight: 650; }
p { margin: 0 0 14px; }
.lede { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.5; color: var(--paper); max-width: 44ch; }
strong { font-weight: 650; color: var(--paper); }
strong.bad, .hl-bad { color: var(--bad); }
strong.good, .hl-good { color: var(--good); }
.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap.narrow { max-width: 760px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid var(--copper);
  background: var(--copper); color: var(--ink);
  font: 600 15px/1 var(--f-body); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s;
  box-shadow: 0 0 0 0 rgba(29,91,216,0.0);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(29,91,216,0.55); }
.btn:active { transform: translateY(0); }
.btn-ghost { background: rgba(255,255,255,.55); color: var(--paper); border-color: rgba(16,35,63,0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--paper); box-shadow: none; }
.btn-small { padding: 10px 18px; font-size: 14px; }
.btn-wide { width: 100%; }
.btn:disabled { background: transparent; color: var(--paper-dim); border-color: rgba(16,35,63,0.2); cursor: not-allowed; transform: none; box-shadow: none; }

/* Nav */
.nav {
  position: fixed; top: 14px; left: 50%; z-index: 50;
  transform: translateX(-50%);
  width: min(var(--maxw), 100% - 2 * var(--gutter));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 10px 10px 18px;
  border: 1px solid rgba(29,70,140,0.14); border-radius: 999px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: background .4s, border-color .4s;
}
.nav.is-solid { background: rgba(255,255,255,0.92); border-color: rgba(29,70,140,0.22); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--f-display); font-stretch: 115%; }
.brand-mark { width: 26px; height: 26px; color: var(--paper); transition: transform .8s var(--ease); }
.brand:hover .brand-mark { transform: rotate(90deg); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { text-decoration: none; font-size: 14px; color: var(--paper-dim); position: relative; transition: color .3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { transform: scaleX(1); }

/* HERO */
.hero { position: relative; }
.stage { position: relative; height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; }
.scene { position: absolute; inset: -10%; perspective: 1500px; }
.plan {
  position: absolute; left: 50%; top: 50%;
  width: 118%; height: 118%;
  transform-origin: 50% 60%;
  will-change: transform;
}
.plan .wall { fill: none; stroke: var(--line); stroke-width: 2.2; opacity: .55; }
.plan .wall-thin { fill: none; stroke: var(--line); stroke-width: 1; opacity: .28; }
.plan .grid { stroke: var(--line); stroke-width: .6; opacity: .08; }
.plan .fx { fill: none; stroke: var(--line); stroke-width: 1.6; opacity: .5; transition: stroke .5s, opacity .5s; }
.plan .fx.on { stroke: var(--copper); opacity: 1; }
.plan .fx-glow { fill: var(--copper); opacity: 0; transition: opacity .6s; filter: blur(6px); }
.plan .fx-glow.on { opacity: .55; }
.plan .run { fill: none; stroke: var(--copper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(29,91,216,0.8)); }
.plan .run-ghost { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; opacity: .22; }
.plan .panel { fill: var(--ink-3); stroke: var(--copper); stroke-width: 2; }

.scene { transition: opacity .8s; }
.has-film .scene { opacity: 0; }
.replay { position: absolute; right: var(--gutter); bottom: 28px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(16,35,63,.2); background: rgba(255,255,255,.75); color: var(--paper); font: 500 13px var(--f-body); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .3s, transform .3s var(--ease); }
.replay:hover { border-color: var(--copper); transform: translateY(-1px); }
.replay svg { width: 15px; height: 15px; }
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  background:
    linear-gradient(90deg, rgba(var(--night),.95) 0%, rgba(var(--night),.82) 34%, rgba(var(--night),0) 64%),
    linear-gradient(180deg, rgba(var(--night),.6) 0%, rgba(var(--night),0) 22%);
}

.bands { position: absolute; inset: 0; pointer-events: none; }
.band {
  position: absolute; left: var(--gutter); top: 50%;
  width: min(820px, 58vw);
  transform: translateY(-50%);
  opacity: 0;
  will-change: opacity, transform;
}
.band h1 { font-size: clamp(50px, 7vw, 116px); line-height: .98; text-shadow: 0 2px 30px rgba(var(--night),.8); }
.band h2 { font-size: clamp(48px, 6.6vw, 108px); margin-bottom: 30px; text-shadow: 0 2px 30px rgba(var(--night),.8); }
.band-line { font: 650 clamp(34px, 4.3vw, 64px)/1.08 var(--f-display); font-stretch: 112%; text-wrap: balance; text-shadow: 0 2px 24px rgba(var(--night),.9); }
.band-num { color: var(--copper); }
.chapters { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 14px; }
.chapters button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 1.5px solid var(--copper); background: transparent; cursor: pointer; transition: transform .4s var(--ease), background .4s; }
.chapters button.on { background: var(--copper); transform: scale(1.35); }
.chapters button:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.static-hero .chapters { display: none; }
.band-settle, .band-1 { pointer-events: auto; }
.band[aria-hidden="true"] { pointer-events: none; }
.band-1 .cta-row { margin-top: 30px; }
.hero-proof { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-proof li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--paper); text-shadow: 0 1px 12px rgba(var(--night),.9); }
.hero-proof svg { width: 16px; height: 16px; color: var(--good); flex: none; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.scroll-cue { margin-top: 38px; display: flex; align-items: center; gap: 12px; font: 500 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }
.scroll-cue span { width: 1px; height: 38px; background: linear-gradient(var(--copper), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.loader { position: absolute; right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 10px; font: 500 12px var(--f-mono); color: var(--paper-dim); letter-spacing: .1em; text-transform: uppercase; }
.loader svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.loader circle { fill: none; stroke-width: 3; }
.loader-track { stroke: rgba(29,70,140,0.2); }
.loader-bar { stroke: var(--copper); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s; }

/* The rest of the page, with the copper thread running through it */
.rest { position: relative; }
.thread { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.thread path { fill: none; stroke: var(--copper); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75; filter: drop-shadow(0 0 4px rgba(29,91,216,0.6)); }

.section { position: relative; padding: clamp(80px, 11vw, 140px) 0; }
.section p { color: var(--paper-dim); }
.section .lede { color: var(--paper); }

/* Problem */
.problem .display { font-size: clamp(46px, 7vw, 110px); max-width: 14em; }
.problem .lede { max-width: 52ch; font-size: clamp(21px, 2.1vw, 30px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 64px 0 48px; border-top: 1px solid rgba(29,70,140,0.18); border-bottom: 1px solid rgba(29,70,140,0.18); }
.stat { margin: 0; padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid rgba(29,70,140,0.18); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-num { margin: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font: 700 clamp(46px, 4.4vw, 70px)/1 var(--f-display); font-stretch: 118%; color: var(--bad) !important; font-variant-numeric: tabular-nums; }
.stat-num small { font: 600 14px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
.stat figcaption { color: var(--paper); font-size: 16px; line-height: 1.5; }
.stat-src { margin: auto 0 0; font: 400 11px var(--f-mono); letter-spacing: .06em; color: rgba(29,70,140,0.7) !important; }
.bidday { margin-top: 12px; border-radius: 24px; border: 1px solid rgba(29,70,140,0.2); background: rgba(255,255,255,0.82); overflow: hidden; box-shadow: 0 40px 100px -40px rgba(16,35,63,0.225); }
.bd-head { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; padding: 24px 28px; border-bottom: 1px solid rgba(29,70,140,0.14); flex-wrap: wrap; }
.bd-kicker { font: 500 14px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--copper) !important; margin: 0 0 8px; }
.bd-job { margin: 0; font-size: 18px; color: var(--paper) !important; }
.bd-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgba(16,35,63,0.084); border: 1px solid rgba(29,70,140,0.2); }
.bd-switch button { position: relative; z-index: 1; border: 0; background: none; color: var(--paper-dim); font: 600 15px var(--f-body); padding: 12px 22px; border-radius: 999px; cursor: pointer; transition: color .4s var(--ease); white-space: nowrap; }
.bd-switch button[aria-pressed="true"] { color: var(--ink); }
.bd-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--bad); transition: transform .55s var(--ease), background .55s var(--ease); }
.bidday.is-bm .bd-thumb { transform: translateX(100%); background: var(--good); }
.bd-body { display: grid; grid-template-columns: 1.35fr 1fr; }
.bd-items { list-style: none; margin: 0; padding: 14px; display: grid; gap: 8px; border-right: 1px solid rgba(29,70,140,0.14); }
.bd-item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; transition: background .5s var(--ease), border-color .5s var(--ease); }
.bd-item .ico { grid-row: span 2; width: 26px; height: 26px; }
.bd-item .nm { font-size: 17px; color: var(--paper); font-weight: 500; }
.bd-item .st { grid-column: 2; font: 500 13px var(--f-mono); letter-spacing: .02em; }
.bd-item .amt { grid-row: 1; grid-column: 3; font: 600 17px var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.bd-item .act { grid-column: 3; justify-self: end; }
.bd-item.s-missed { background: rgba(212,70,47,0.08); border-color: rgba(212,70,47,0.35); }
.bd-item.s-missed .ico, .bd-item.s-missed .st, .bd-item.s-missed .amt { color: var(--bad); }
.bd-item.s-missed .nm { text-decoration: line-through; text-decoration-color: rgba(212,70,47,0.7); }
.bd-item.s-found { background: rgba(29,70,140,0.07); border-color: rgba(29,70,140,0.3); }
.bd-item.s-found .ico, .bd-item.s-found .st { color: var(--ready); }
.bd-item.s-found .amt { color: var(--paper-dim); }
.bd-item.s-ok { background: rgba(30,154,104,0.08); border-color: rgba(30,154,104,0.4); }
.bd-item.s-ok .ico, .bd-item.s-ok .st, .bd-item.s-ok .amt { color: var(--good); }
.bd-item.flash { animation: flash .7s var(--ease); }
@keyframes flash { 30% { transform: scale(1.015); } }
.bd-meter { padding: 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.bd-label { margin: 0; font: 500 14px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); }
.bd-profit { margin: 0; font: 800 clamp(52px, 5.4vw, 84px)/1 var(--f-display); font-stretch: 118%; font-variant-numeric: tabular-nums; color: var(--bad) !important; transition: color .5s var(--ease); }
.bidday.is-bm .bd-profit { color: var(--copper) !important; }
.bidday.is-full .bd-profit { color: var(--good) !important; }
.bd-bar { position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(-45deg, rgba(212,70,47,0.35) 0 6px, rgba(212,70,47,0.12) 6px 12px); }
.bd-fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--copper), #5B8DEF); transition: width .9s var(--ease), background .6s; }
.bidday.is-full .bd-fill { background: linear-gradient(90deg, #1E9A68, var(--good)); }
.bd-note { margin: 0; font-size: 17px; color: var(--paper) !important; min-height: 3em; }
.bd-all { align-self: flex-start; }
.bd-foot { margin: 0; padding: 12px 28px 16px; font: 400 12px var(--f-mono); color: rgba(29,70,140,0.7) !important; border-top: 1px solid rgba(29,70,140,0.1); }
.band-sub { margin-top: 26px; max-width: 36ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; color: var(--paper); text-shadow: 0 2px 20px rgba(var(--night),.9); }

/* Steps */
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 26px; border: 1px solid rgba(29,70,140,0.14); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6)); transition: border-color .4s, transform .5s var(--ease); }
.step:hover { border-color: rgba(29,91,216,0.45); transform: translateY(-4px); }
.step-art { height: 150px; margin: -6px -6px 18px; border-radius: 12px; background: rgba(255,255,255,0.7); border: 1px solid rgba(29,70,140,0.08); display: grid; place-items: center; }
.step-art svg { width: 100%; height: 100%; }
.step-num { color: var(--copper); margin-bottom: 10px; }
.step h3 { margin-bottom: 10px; }
.draw * { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.draw .thin { stroke-width: 1; opacity: .55; }
.draw .front { fill: var(--ink-2); }
.draw .cu { stroke: var(--copper); stroke-width: 2; }
.draw .dash { stroke-dasharray: 5 5; }
.draw .ring { animation: ring 3s var(--ease) infinite; transform-origin: 60px 55px; }
@keyframes ring { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(1.15); } }

/* Interactive bench */
.bench { margin-top: 44px; border: 1px solid rgba(29,70,140,0.18); border-radius: 22px; background: rgba(255,255,255,0.92); box-shadow: 0 40px 100px -40px rgba(16,35,63,0.21), inset 0 1px 0 rgba(16,35,63,0.05); overflow: hidden; }
.bench-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid rgba(29,70,140,0.12); flex-wrap: wrap; }
.bench-sheet { margin: 0; color: var(--paper-dim); }
.layers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.layers-label { margin: 0 6px 0 0; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(29,70,140,0.22); font-size: 13px; cursor: pointer; color: var(--paper-dim); transition: all .3s var(--ease); user-select: none; }
.toggle span svg { width: 14px; height: 14px; }
.toggle input:checked + span { color: var(--paper); background: rgba(29,70,140,0.12); border-color: rgba(29,70,140,0.45); }
.toggle input:not(:checked) + span { text-decoration: line-through; opacity: .6; }
.toggle input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 2px; }
.toggle:nth-child(2) svg { color: var(--ready); }
.toggle:nth-child(3) svg { color: var(--missing); }
.toggle:nth-child(4) svg { color: var(--approved); }

.bench-body { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 420px; }
.sheet { position: relative; border-right: 1px solid rgba(29,70,140,0.12); background:
  linear-gradient(var(--line-dim) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, var(--line-dim) 1px, transparent 1px) 0 0 / 24px 24px, #FBF8F1; }
.sheet-svg { width: 100%; height: auto; aspect-ratio: 3 / 2; position: sticky; top: 90px; }
.sheet-svg .w { fill: none; stroke: var(--line); stroke-width: 1.8; opacity: .5; }
.sheet-svg .w2 { fill: none; stroke: var(--line); stroke-width: 1; opacity: .25; }
.sheet-svg .mk { transition: opacity .45s var(--ease), transform .45s var(--ease); transform-box: fill-box; transform-origin: center; cursor: pointer; }
.sheet-svg .mk.is-dim { opacity: .28; }
.sheet-svg .mk.is-hidden { opacity: 0; transform: scale(.6); pointer-events: none; }
.sheet-svg .mk.is-focus .halo { opacity: 1; }
.sheet-svg .halo { fill: none; stroke: var(--copper); stroke-width: 1.5; opacity: 0; transition: opacity .3s; }
.sheet-svg .meas { fill: none; stroke-width: 2; }
.sheet-svg .meas.unverified { stroke-dasharray: 6 5; }
.sheet-note { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.9); border: 1px solid rgba(29,70,140,0.2); font: 500 12px var(--f-mono); color: var(--paper) !important; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.sheet-note.show { opacity: 1; transform: none; }

.lines { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.line-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: background .3s, border-color .3s; }
.line:hover, .line.is-focus { background: rgba(29,70,140,0.07); border-color: rgba(29,70,140,0.18); }
.line-name { font-size: 15px; color: var(--paper); line-height: 1.3; }
.line-meta { grid-column: 1; display: flex; gap: 10px; align-items: center; font: 400 12px var(--f-mono); color: var(--paper-dim); }
.line-qty { grid-row: 1; grid-column: 2; font: 500 15px var(--f-mono); text-align: right; color: var(--paper); font-variant-numeric: tabular-nums; }
.line-qty.dashed { text-decoration: underline dashed rgba(16,35,63,0.5); text-underline-offset: 4px; }
.line-act { grid-column: 2; justify-self: end; }
.chip { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--f-mono); letter-spacing: .04em; }
.chip svg { width: 13px; height: 13px; }
.chip.s-ready { color: var(--ready); }
.chip.s-missing { color: var(--missing); }
.chip.s-approved { color: var(--approved); }
.mini { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(16,35,63,0.25); background: transparent; color: var(--paper); font: 500 12px var(--f-body); cursor: pointer; transition: all .3s var(--ease); }
.mini:hover { border-color: var(--copper); color: var(--copper); }
.mini.primary { background: var(--copper); border-color: var(--copper); color: var(--ink); }
.mini.primary:hover { color: var(--ink); filter: brightness(1.08); }
.mini.quiet { border-color: transparent; color: var(--paper-dim); }

.warning { border: 1px solid rgba(201,138,18,0.4); border-radius: 14px; padding: 14px; background: rgba(201,138,18,0.06); animation: rise .5s var(--ease); }
.warning h4 { margin: 0 0 10px; font: 650 16px/1.25 var(--f-display); font-stretch: 108%; display: flex; gap: 8px; align-items: center; color: var(--paper); }
.warning h4 svg { width: 16px; height: 16px; color: var(--missing); flex: none; }
.warning dl { margin: 0 0 12px; display: grid; gap: 8px; }
.warning dt { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--missing); }
.warning dd { margin: 2px 0 0; font-size: 14px; color: var(--paper-dim); line-height: 1.45; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bench-foot { display: grid; grid-template-columns: auto auto 1fr; gap: 20px 40px; align-items: center; padding: 18px 22px; border-top: 1px solid rgba(29,70,140,0.12); background: rgba(255,255,255,0.6); }
.tally-label { margin-bottom: 6px; }
.tally-num { margin: 0; font: 700 34px/1 var(--f-display); font-stretch: 115%; color: var(--paper) !important; font-variant-numeric: tabular-nums; }
.tally-num .of { font-size: 18px; color: var(--paper-dim); font-weight: 500; }
.tally-num.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { color: var(--copper); transform: translateY(-3px); } }
.finish { justify-self: end; display: flex; align-items: center; gap: 16px; text-align: right; }
.finish-state { margin: 0; font-size: 14px; max-width: 30ch; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.finish-state svg { width: 15px; height: 15px; flex: none; }

/* Labels */
.label-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.label-card { position: relative; padding: 30px 26px; border-radius: 18px; border: 1px solid rgba(29,70,140,0.14); background: rgba(255,255,255,0.7); overflow: hidden; transition: transform .5s var(--ease), border-color .4s; }
.label-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: currentColor; opacity: .9; }
.label-card:hover { transform: translateY(-4px); }
.label-icon { width: 38px; height: 38px; margin-bottom: 22px; }
.label-card h3 { color: var(--paper); margin-bottom: 10px; }
.s-ready { color: var(--ready); }
.s-missing { color: var(--missing); }
.s-approved { color: var(--approved); }
.label-card:hover { border-color: currentColor; }

/* Warning card */
.warn-card { border: 1px solid rgba(201,138,18,0.35); border-radius: 20px; padding: 28px; background: linear-gradient(180deg, rgba(201,138,18,0.07), rgba(255,255,255,0.7)); }
.warn-card header { display: flex; align-items: center; gap: 8px; font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--missing); margin-bottom: 14px; }
.warn-card header svg { width: 16px; height: 16px; }
.warn-card h3 { font-size: 26px; margin-bottom: 20px; }
.warn-card dl { margin: 0; display: grid; gap: 0; }
.warn-card dl > div { padding: 14px 0; border-top: 1px solid rgba(29,70,140,0.12); display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.warn-card dt { font: 500 12px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--line); }
.warn-card dd { margin: 0; color: var(--paper); }

/* What you get */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.feat { padding: 28px; border-radius: 18px; border: 1px solid rgba(29,70,140,0.16); background: rgba(255,255,255,0.72); display: flex; flex-direction: column; gap: 12px; transition: border-color .4s, transform .5s var(--ease);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); }
.feat:hover { border-color: rgba(29,91,216,0.45); transform: translateY(-3px); }
.feat h3 { font-size: clamp(20px, 1.7vw, 24px); }
.feat p { margin: 0; color: var(--paper-dim); }
.feat-ico { width: 34px; height: 34px; color: var(--line); }
.feat-ico.good { color: var(--good); }
.feat-ico.warn { color: var(--missing); }
.feat-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feat-chips li { display: flex; align-items: center; gap: 10px; font: 500 14px var(--f-mono); }
.feat-chips svg { width: 18px; height: 18px; }
.feat-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.feat-steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; color: var(--paper); }
.feat-steps li::before { content: "0" counter(s); font: 500 13px var(--f-mono); color: var(--missing); }

/* Rules */
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 52px; }
.rule svg { width: 60px; height: 40px; margin-bottom: 20px; }
.rule svg * { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rule svg .cu { stroke: var(--copper); stroke-width: 2.4; }
.rule svg .dash { stroke-dasharray: 5 4; }
.rule h3 { margin-bottom: 10px; font-size: 20px; }

/* FAQ */
.faq-list { margin-top: 40px; display: grid; gap: 12px; }
.faq-list details { border: 1px solid rgba(29,70,140,0.16); border-radius: 16px; background: rgba(255,255,255,0.6); transition: border-color .4s, background .4s; }
.faq-list details:hover { border-color: rgba(29,70,140,0.32); }
.faq-list details[open] { border-color: rgba(29,91,216,0.45); background: rgba(255,255,255,0.9); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 60px 22px 24px; position: relative; font: 600 clamp(18px, 1.8vw, 21px)/1.3 var(--f-display); font-stretch: 108%; transition: color .3s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--copper), var(--copper)) center / 14px 2px no-repeat, linear-gradient(var(--copper), var(--copper)) center / 2px 14px no-repeat;
  transition: transform .4s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(135deg); }
.faq-list summary:hover { color: var(--copper); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 24px 22px; max-width: 64ch; margin: 0; }

/* Demo */
.demo-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.demo-points li { display: flex; gap: 10px; align-items: center; color: var(--paper); }
.demo-points svg { width: 18px; height: 18px; color: var(--approved); flex: none; }
.form { padding: 30px; border-radius: 22px; border: 1px solid rgba(29,70,140,0.2); background: rgba(255,255,255,0.85); box-shadow: 0 40px 100px -40px rgba(16,35,63,0.21); }
.form-fields { display: grid; gap: 16px; }
.form label { display: grid; gap: 7px; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--line); }
.form input, .form select {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(29,70,140,0.22);
  background: rgba(255,255,255,0.8); color: var(--paper); font: 400 16px var(--f-body); letter-spacing: 0; text-transform: none;
  transition: border-color .3s, box-shadow .3s; appearance: none; -webkit-appearance: none;
}
.form select { background-image: linear-gradient(45deg, transparent 50%, var(--line) 50%), linear-gradient(135deg, var(--line) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.form input:focus, .form select:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(29,91,216,0.2); }
.form input[aria-invalid="true"] { border-color: var(--missing); }
.form-error { color: var(--missing) !important; font-size: 14px; margin: 0; }
.form-done { text-align: center; padding: 30px 10px; animation: rise .6s var(--ease); outline: none; }
.form-done svg { width: 44px; height: 44px; color: var(--approved); margin: 0 auto 18px; }
.form-done h3 { font-size: 28px; margin-bottom: 10px; }

/* Footer */
.footer { border-top: 1px solid rgba(29,70,140,0.12); padding: 48px 0 56px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer p { margin: 0; color: var(--paper-dim); font-size: 15px; }
.footer-small { font: 400 12px var(--f-mono) !important; }

/* Reveals: each moment has its own entrance */
[data-reveal] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-reveal="mask"] { opacity: 1; transform: none; filter: none; }
.w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--wi) * 55ms); }
[data-reveal="mask"].in .w { opacity: 1; transform: none; filter: none; }
.band .w { transition: none; }
.step-art .draw > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.step.in .step-art .draw > * { stroke-dashoffset: 0; }

/* Phones and the static hero */
.static-hero .hero { height: auto; }
.static-hero .stage { position: relative; height: 100svh; min-height: 620px; }
.static-hero .band { display: none; }
.static-hero .band-1, .static-hero .band-settle { display: block; opacity: 1; }
.static-hero .band-1 { top: 22%; transform: none; }
.static-hero .band-settle { top: auto; bottom: 9%; transform: none; }
.static-hero .band-settle { display: none !important; }
.static-hero .scroll-cue { display: none; }

@media (max-width: 980px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(29,70,140,0.18); }
  .bd-body { grid-template-columns: 1fr; }
  .bd-items { border-right: 0; border-bottom: 1px solid rgba(29,70,140,0.14); }
  .bd-switch { width: 100%; }
  .bd-switch button { padding: 12px 10px; font-size: 14px; }
  .nav-links { display: none; }
  .split { grid-template-columns: 1fr; }
  .steps, .label-cards, .rule-grid, .feat-grid { grid-template-columns: 1fr; }
  @media (min-width: 640px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
  .rule-grid { gap: 32px; }
  .bench-body { grid-template-columns: 1fr; }
  .sheet { border-right: 0; border-bottom: 1px solid rgba(29,70,140,0.12); aspect-ratio: 3 / 2; }
  .bench-foot { grid-template-columns: 1fr 1fr; }
  .finish { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; text-align: left; }
  .finish-state { justify-content: flex-start; }
  .band { width: calc(100% - 2 * var(--gutter)); }
  .scrim { background: linear-gradient(180deg, rgba(var(--night),.55) 0%, rgba(var(--night),.5) 45%, rgba(var(--night),.3) 80%, rgba(var(--night),0) 100%); }
  .thread { display: none; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; padding-right: 0; }
  .stat + .stat { border-top: 1px solid rgba(29,70,140,0.18); }
  body { font-size: 16px; }
  .warn-card dl > div { grid-template-columns: 1fr; gap: 4px; }
  .bench-bar { flex-direction: column; align-items: flex-start; }
  .finish { flex-direction: column; align-items: stretch; }
  .finish .btn { width: 100%; }
  .form { padding: 22px; }
  .nav { padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  [data-reveal], .w { opacity: 1 !important; transform: none !important; filter: none !important; }
}
.mini:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* Glass: panels float over the film instead of hiding it */
.step, .bench, .label-card, .warn-card, .faq-list details, .form, .bidday, .nav {
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
}
.bench { background: rgba(255,255,255,0.8); }
.step { background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.5)); }

/* Hero headline: a calm entrance on load, then it scrolls away like the rest of the page */
.band-1 { opacity: 1; animation: heroIn 1.1s var(--ease) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(calc(-50% + 24px)); } to { opacity: 1; transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-1 { animation: none; } }
.band-1 { top: calc(50% + 44px); }
@media (max-height: 1000px) { .band-1 h1 { font-size: clamp(44px, 5.6vw, 88px); } .band-1 .band-sub { margin-top: 20px; } }

/* Stat tiles: the same light frosted cards as the How it works steps */
.stats { gap: 16px; border-top: 0; border-bottom: 0; }
.stat, .stat:first-child { padding: 26px; border: 1px solid rgba(29,70,140,.14); border-left: 1px solid rgba(29,70,140,.14); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); }
.stat + .stat, .stat:nth-child(n+3) { border-top: 1px solid rgba(29,70,140,.14); }

/* Problem: pain points in the estimator's own words */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0 56px; }
.pain { padding: 30px 28px; border-radius: 18px; border: 1px solid rgba(29,70,140,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  display: flex; flex-direction: column; gap: 14px; transition: border-color .4s, transform .5s var(--ease); }
.pain:hover { border-color: rgba(212,70,47,.45); transform: translateY(-3px); }
.pain h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.12; }
.pain p { margin: 0; color: var(--paper-dim); font-size: 16px; }
.pain.is-bad h3 { color: var(--bad); }
@media (max-width: 980px) { .pains { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pains { grid-template-columns: 1fr; } }

/* Hero copy sits on a clear frosted panel, like the cards below */
.band-1 { padding: 34px 38px 32px; border-radius: 22px; border: 1px solid rgba(29,70,140,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 30px 80px -40px rgba(16,35,63,.3); width: min(780px, 60vw); }
.band-1 h1, .band-1 .band-sub, .hero-proof li { text-shadow: none; }
.brand-mark { width: 30px; height: 30px; }
.brand:hover .brand-mark { transform: none; }
/* Tighter hand-off from the hero into "Sound familiar?" */
.stage { height: 88vh; height: 88svh; min-height: 640px; }
.problem { padding-top: clamp(28px, 4vw, 56px); }
@media (max-width: 980px) { .band-1 { width: auto; left: var(--gutter); right: var(--gutter); padding: 24px 22px; } }
/* Hero layout that always fits: the panel sits in the flow, clear of the menu, never clipped */
.stage { display: flex; align-items: center; height: auto; min-height: 88vh; min-height: 88svh; padding: 104px var(--gutter) 48px; }
.band-1, .static-hero .band-1 { position: relative; top: auto; left: auto; right: auto; transform: none; animation: heroIn2 1.1s var(--ease) both; }
@keyframes heroIn2 { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-height: 820px) { .band-1 h1 { font-size: clamp(40px, 5vw, 76px); } .band-1 { padding: 26px 32px 24px; } .hero-proof { margin-top: 18px; } .band-1 .cta-row { margin-top: 22px; } }
@media (max-width: 980px) { .band-1 { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .band-1 { animation: none; } }
.hero .bands { position: relative; inset: auto; width: 100%; max-width: var(--maxw); margin: 0 auto; z-index: 2; }
/* Hero hand-off: the panel sits on the bottom of the stage, so the gap to
   "Sound familiar?" is fixed and matches the gap between sections
   (two section paddings), measured from the last proof tick. */
.stage { align-items: flex-end; padding-bottom: 0; }
.problem { padding-top: calc(2 * clamp(80px, 11vw, 140px) - 57px); }
@media (max-height: 820px), (max-width: 980px) { .problem { padding-top: calc(2 * clamp(80px, 11vw, 140px) - 28px); } }
@media (max-height: 820px) and (min-width: 981px) { .problem { padding-top: calc(2 * clamp(80px, 11vw, 140px) - 48px); } }

/* Booking modal: Calendly opens over the page, like a popup */
.cal-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16,35,63,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: calFade .25s ease; }
.cal-modal[hidden] { display: none; }
.cal-card { position: relative; width: min(1120px, 100%); max-height: calc(100svh - 40px); display: flex; flex-direction: column; background: #F6F1E7; border-radius: 22px; box-shadow: 0 40px 120px -30px rgba(16,35,63,.6); padding: 14px 14px 10px; animation: calRise .4s var(--ease); }
.cal-stage { flex: 1; min-height: 0; overflow: auto; border-radius: 14px; background: #F6F1E7; -webkit-overflow-scrolling: touch; }
.cal-stage .calendly-inline-widget { min-width: 280px; height: min(760px, calc(100svh - 120px)); }
.cal-loading { margin: 0; padding: 60px 20px; text-align: center; color: var(--paper-dim); }
.cal-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--paper); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(16,35,63,.25); z-index: 2; }
.cal-alt { margin: 8px 0 2px; text-align: center; font-size: 13px; }
.cal-alt a { color: var(--copper); }
.cal-open body { overflow: hidden; }
@keyframes calFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes calRise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .cal-modal { padding: 10px; } .cal-close { top: 8px; right: 8px; } .cal-card { padding: 8px 8px 6px; } }

.cal-blocked { padding: 70px 20px; text-align: center; }
.cal-blocked p { margin: 0 0 18px; color: var(--paper-dim); }

/* Booking popup in the dark Cal.com style */
.cal-modal { background: rgba(8,8,10,.72); }
.cal-card { background: #0f0f10; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 140px -20px rgba(0,0,0,.8); }
.cal-stage { background: #141414; border: 1px solid rgba(255,255,255,.08); }
.cal-stage .calendly-inline-widget { background: #141414; }
.cal-loading, .cal-blocked p { color: rgba(255,255,255,.7); }
.cal-alt a { color: rgba(255,255,255,.7); }
.cal-close { background: #fff; color: #111; }
.cal-blocked .btn { background: #fff; color: #111; }

/* Wordmark: lowercase, tight, compact (River/Vestris style) */
.brand { font: 700 25px/1 var(--f-display); font-stretch: 100%; letter-spacing: -.045em; gap: 9px; }
.brand-mark { width: 32px; height: 32px; }

/* BidMate wordmark: the burst is the dot of the i (brand sheet) */
.brand { gap: 0; font: 800 29px/1 var(--f-display); font-stretch: 100%; letter-spacing: -.035em; color: #182A48; }
.brand .wm { display: inline-block; white-space: nowrap; }
.wm-i { position: relative; display: inline-block; margin-left: .03em; }
.wm-burst { position: absolute; left: 50%; top: -.1em; width: .5em !important; height: .5em !important; max-width: none !important; transform: translateX(-50%); color: #182A48; overflow: visible; }

/* Standalone burst mark */
.logo-tile { display: block; width: 76px; height: 76px; border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(24,42,72,.55); }
.logo-tile use { transform-box: fill-box; transform-origin: center; transition: transform 1.2s var(--ease); }
.logo-tile:hover use { transform: rotate(45deg); }
.demo-logo { width: 88px; height: 88px; margin: 0 0 26px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-logo { width: 56px; height: 56px; border-radius: 16px; }

/* Booking popup: show the whole calendar without scrolling.
   Calendly puts its own class on the holder and fills it with an iframe, so size the holder itself. */
.cal-card { width: min(1000px, 100%); height: min(780px, calc(100svh - 32px)); max-height: none; }
.cal-stage { height: auto; overflow: hidden; display: flex; }
.cal-stage iframe { width: 100% !important; height: 100% !important; min-height: 0; border: 0; flex: 1; background: #fff; }
.cal-stage .calendly-spinner { display: none; }
.cal-blocked, .cal-loading { margin: auto; }
@media (max-width: 640px) { .cal-modal { padding: 0; } .cal-card { width: 100%; height: 100svh; border-radius: 0; padding: 6px; } .cal-close { top: 10px; right: 10px; } }