/* ==========================================================================
   VeriTrace SaaS — application layout layer
   ==========================================================================
   Loaded AFTER the vendored theme (assets/css/main.css) so upstream stays
   byte-identical and can be re-copied from veritrace.in without conflicts.

   Only layout the marketing theme has no component for lives here: the
   checkout/payment layout, key-value rows for use inside a card, and the
   console's quota meters. Everything else still uses the theme's own classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Checkout / payment — wide details + narrow summary
   The theme's .grid--sidebar is `1fr 1.35fr` (narrow column first), which is
   backwards for a checkout: it made the order summary WIDER than the form.
   -------------------------------------------------------------------------- */
.pay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.pay-layout__main { display: grid; gap: 1.25rem; min-width: 0; }

/* The summary is short, so it sits as a plain static card.
   Do NOT make this sticky with a max-height/overflow: that produced an inner
   scrollbar and clipped the pay button and the note beneath it. Plain flow means
   every row, the button and the note are always visible and the page scrolls. */
.pay-aside { position: static; }

@media (max-width: 960px) {
  .pay-layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Key/value rows
   The theme's .status-list is a STANDALONE component with its own border,
   radius and shadow — nesting it inside a .card produced a double box plus
   oversized 1.15rem row padding. These rows are for use *inside* a card.
   -------------------------------------------------------------------------- */
.kv { display: flex; flex-direction: column; margin: 0; }
.kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--bd-soft);
}
.kv__row:first-child { padding-top: 0; }
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--tx-lo); font-size: var(--fs-sm); flex: 0 0 auto; }
.kv__v {
  color: var(--tx-hi);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kv__v--mono { font-family: var(--ff-mono); font-weight: 500; font-size: var(--fs-xs); }
.kv__row--total {
  align-items: center;
  border-top: 1px solid var(--bd-mid);
  border-bottom: 0;
  margin-top: 0.35rem;
  padding-top: 1rem;
}
.kv__row--total .kv__v {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vt-navy);
}

/* Summary card header */
.pay-plan { margin-bottom: 0.35rem; }
.pay-plan__name { font-size: var(--fs-h4); font-weight: 700; color: var(--tx-hi); }

/* --------------------------------------------------------------------------
   Pricing — three plans
   The theme's .price-grid is repeat(3, 1fr), which is exactly right for
   Free / Starter / Enterprise; the modifier is kept so the count is explicit
   and a future plan cannot silently orphan a card on a second row.
   -------------------------------------------------------------------------- */
.price-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .price-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .price-grid--3 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* Equal-height plan cards.
   The theme grids plans with `align-items: start`, so a card with fewer feature rows is
   shorter and its CTA floats at a different height than its neighbours. Stretching the row
   and pushing the button to the bottom of each card puts every CTA on one baseline. */
.price-grid { align-items: stretch; }
.price-grid > .price { height: 100%; }
.price > .btn { margin-top: auto; align-self: stretch; }

/* --------------------------------------------------------------------------
   Numbered feature blocks (.fblock)
   .fblock is a 2-column grid — `78px minmax(0,1fr)` — with the index in the
   first cell and content in the second. Every child is a grid item, so the
   tag, the heading and the paragraph must be wrapped in ONE content div;
   leaving them as siblings auto-places the paragraph into the 78px index
   cell and it wraps to a few characters per line.
   -------------------------------------------------------------------------- */
.fblock__body { min-width: 0; }
.fblock__tag { margin-bottom: 1.1rem; }
.fblock p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   CTA band
   .cta-band is a rounded panel, so it must be placed inside a .container (see
   page.tsx). These rules fix the centred typography: the theme's own
   `.eyebrow::before` dash is left-only, which visually shifts a centred
   eyebrow off-axis, and the theme sets `.cta-band p { max-width: 56ch }`
   without a comfortable line height for white-on-blue.
   -------------------------------------------------------------------------- */
.cta-band__eyebrow { color: rgba(255, 255, 255, 0.82); }
.cta-band__eyebrow::before { display: none; }
.cta-band .cta-band__sub {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
  text-align: center;
}
.cta-band h2 { max-width: 20ch; text-align: center; }
.cta-band__inner { gap: 1.35rem; }
.cta-band__inner .hero__cta { justify-content: center; margin: 0; }

/* --------------------------------------------------------------------------
   Printing flow — the printing guide as a scroll-driven story on the landing page.
   Uses the theme's .scrolly layout (sticky stage + steps). These rules style the
   building QR card and the step headers.
   -------------------------------------------------------------------------- */
#printing-guide { scroll-margin-top: 88px; }

.build-stage { display: grid; place-items: center; }

.build-card {
  width: min(340px, 100%);
  padding: 1.15rem 1.2rem 1.3rem;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--bd-soft);
  box-shadow: var(--shadow-lg);
}
.build-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.build-card__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-faint);
}

.build-qr {
  position: relative;
  aspect-ratio: 1;
  margin: 0.9rem 0;
  padding: 10px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--bd-soft);
  overflow: hidden;
}
.build-qr svg { width: 100%; height: 100%; display: block; }

/* read line sweeping the finished code */
.build-qr__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(14, 159, 110, 0.22), transparent);
  animation: build-scan 3.1s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes build-scan {
  0%, 100% { top: -30%; }
  50% { top: 100%; }
}

.build-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-xs);
  color: var(--tx-lo);
}
.build-card__meta .mono { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--tx-lo); }
.build-card__phase { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--vt-blue); }

.build-bar {
  height: 4px;
  margin-top: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--vt-mist-2);
  overflow: hidden;
}
.build-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  transition: width 0.5s var(--ease-out);
}

/* Step headers */
.step-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.85rem; }
.step-head__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--vt-blue-50);
  border: 1px solid var(--blue-a16);
  color: var(--vt-blue);
  flex: none;
}
.step-head__n {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-blue);
}
.scrolly__step .h4 { margin: 0 0 0.55rem; }

/* When GSAP is unavailable the section falls back to showing everything: this
   overrides the theme's single-active-step dimming so every step stays legible. */
.scrolly--static .scrolly__step { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .build-qr__scan { animation: none; opacity: 0.5; }
}

@media (max-width: 900px) {
  .scrolly__sticky { top: 84px; }
}

/* --------------------------------------------------------------------------
   Company name + logo upload
   -------------------------------------------------------------------------- */
.company-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
}
@media (max-width: 520px) {
  .company-row { grid-template-columns: 1fr; align-items: start; }
}

.logo-picker { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; }
.logo-picker__cap {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx-hi);
}

.logo-picker__drop {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  gap: 0;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--bd-strong);
  background: var(--vt-mist);
  color: var(--vt-blue);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.logo-picker__drop:hover { border-color: var(--vt-blue); background: var(--vt-blue-50); }
.logo-picker__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.logo-picker__hint {
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-lo);
  line-height: 1;
  margin-top: 2px;
}

.logo-picker__preview {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bd-mid);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.logo-picker__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-picker__clear {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--bd-mid);
  background: #fff;
  color: var(--vt-red);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.logo-picker__clear:hover { background: var(--vt-red-50); }

.review-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--bd-soft);
  flex: none;
}

/* --------------------------------------------------------------------------
   Styled file picker (components/FilePick.tsx)
   The native control cannot be themed, so the input is hidden and a themed
   button drives it. The input stays in the DOM and focusable.
   -------------------------------------------------------------------------- */
.filepick { display: flex; flex-direction: column; gap: 0.5rem; }
.filepick__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Keep the real input reachable by keyboard, and show the focus ring on the button. */
.filepick__input:focus-visible + .filepick__name { box-shadow: var(--shadow-xs); }
.filepick__name {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--tx-faint);
  overflow-wrap: anywhere;
}
.filepick__name.is-set { color: var(--vt-blue); }

/* --------------------------------------------------------------------------
   Welcome / post-payment success page
   -------------------------------------------------------------------------- */
.welcome-head { text-align: center; }

.welcome-mark {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 1.4rem;
  border-radius: 26px;
  background: var(--vt-teal-50);
  border: 1px solid rgba(14, 159, 110, 0.28);
  color: var(--vt-teal);
  box-shadow: 0 10px 34px -14px rgba(14, 159, 110, 0.6);
}
.welcome-mark svg { width: 46px; height: 46px; }
/* Stroke-draw: the shield outlines, then the tick lands. */
.welcome-mark__shield,
.welcome-mark__tick {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
.welcome-mark.is-in .welcome-mark__shield {
  animation: vt-draw 0.85s var(--ease-out) forwards;
}
.welcome-mark.is-in .welcome-mark__tick {
  animation: vt-draw 0.5s var(--ease-out) 0.55s forwards;
}
@keyframes vt-draw { to { stroke-dashoffset: 0; } }

.welcome-title { margin: 0 0 0.7rem; }
.welcome-lede {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--tx-mid);
  font-size: var(--fs-lead);
  animation: vt-rise 0.6s var(--ease-out) both;
}
@keyframes vt-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.welcome-card { animation: vt-rise 0.6s var(--ease-out) both; }

/* email + code row */
.welcome-row { display: flex; align-items: flex-start; gap: 0.9rem; flex-wrap: wrap; }
.welcome-row__icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--vt-blue-50);
  border: 1px solid var(--blue-a16);
  color: var(--vt-blue);
}
.welcome-row > div { flex: 1 1 20rem; }

/* installer progress rail */
.buildbar {
  position: relative;
  height: 8px;
  margin: 1.3rem 0 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--vt-mist-2);
  overflow: hidden;
}
.buildbar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--vt-blue), #2E7CF6);
  transition: width 0.25s linear;
}
.buildbar__glow {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 124, 246, 0.5), transparent 68%);
  transition: left 0.25s linear;
  pointer-events: none;
}

.buildlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.buildlog li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--tx-faint);
  transition: color 0.3s var(--ease-out);
}
.buildlog__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bd-mid);
  flex: none;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.buildlog li.is-active { color: var(--vt-blue); }
.buildlog li.is-active .buildlog__dot {
  background: var(--vt-blue);
  box-shadow: 0 0 0 4px var(--blue-a16);
  animation: vt-pulse 1.2s ease-in-out infinite;
}
.buildlog li.is-done { color: var(--tx-mid); }
.buildlog li.is-done .buildlog__dot { background: var(--vt-teal); }
.buildlog__ok {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-teal);
}
@keyframes vt-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--blue-a16); }
  50% { box-shadow: 0 0 0 7px var(--blue-a10); }
}

.builddone { animation: vt-rise 0.5s var(--ease-out) both; }

/* numbered steps */
.welcomesteps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.welcomesteps li { display: flex; gap: 0.9rem; align-items: flex-start; }
.welcomesteps__n {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--vt-blue);
  flex: none;
  padding-top: 0.15rem;
}
.welcomesteps strong { display: block; font-size: var(--fs-sm); color: var(--tx-hi); }
.welcomesteps em { font-style: normal; font-size: var(--fs-xs); color: var(--tx-lo); }

/* trust quote */
.welcome-quote {
  margin: var(--sp-6) 0 0;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--vt-blue);
  background: var(--vt-mist);
  border-radius: 0 var(--radius) var(--radius) 0;
  animation: vt-rise 0.6s var(--ease-out) both;
}
.welcome-quote p {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 600;
  color: var(--vt-navy);
  line-height: 1.4;
}
.welcome-quote cite {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--tx-lo);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-mark__shield,
  .welcome-mark__tick { stroke-dashoffset: 0; animation: none; }
  .welcome-mark.is-in .welcome-mark__shield,
  .welcome-mark.is-in .welcome-mark__tick { animation: none; }
  .welcome-lede, .welcome-card, .builddone, .welcome-quote { animation: none; }
  .buildlog li.is-active .buildlog__dot { animation: none; }
}

/* --------------------------------------------------------------------------
   Success page — one screen: compact header, build on the left, details right.
   -------------------------------------------------------------------------- */
.succ-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.succ-mark {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--vt-teal-50);
  border: 1px solid rgba(14, 159, 110, 0.28);
  color: var(--vt-teal);
  box-shadow: 0 8px 26px -12px rgba(14, 159, 110, 0.55);
}
.succ-mark svg { width: 30px; height: 30px; }
.succ-mark path { stroke-dasharray: 130; stroke-dashoffset: 130; animation: vt-draw 0.8s var(--ease-out) forwards; }
.succ-mark path:last-child { animation-delay: 0.5s; animation-duration: 0.45s; }
.succ-title { margin: 0; }
.succ-sub { margin: 0.3rem 0 0; color: var(--tx-lo); font-size: var(--fs-sm); }
.succ-sub strong { color: var(--tx-hi); }

.succ-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: start;
}
@media (max-width: 960px) {
  .succ-grid { grid-template-columns: 1fr; }
}
.succ-side { display: grid; gap: 1rem; }

.succ-build { padding: clamp(1.2rem, 2.2vw, 1.7rem); }

/* ---- artifact list ---- */
.bfiles { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.bfile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--vt-mist);
  border: 1px solid var(--bd-soft);
}
.bfile__ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--bd-soft);
  color: var(--vt-blue);
}
.bfile__body { min-width: 0; display: flex; flex-direction: column; }
.bfile__name {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--vt-navy);
  font-weight: 500;
}
.bfile__note { font-size: 0.72rem; color: var(--tx-faint); }
/* the wire that "draws" toward the artifact as it lands */
.bfile__wire {
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, var(--vt-blue), transparent);
  opacity: 0.5;
}
.bfile__tick {
  margin-left: auto;
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vt-teal-50);
  color: var(--vt-teal);
  border: 1px solid rgba(14, 159, 110, 0.3);
}

/* ---- output artifact ---- */
.bout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--vt-blue-50), #fff 70%);
  border: 1px solid var(--bd-blue);
  box-shadow: var(--shadow-blue);
}
.bout__ico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--grad-accent);
  color: #fff;
}
.bout__body { min-width: 0; display: flex; flex-direction: column; }
.bout__name {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--vt-navy);
}
.bout__note { font-size: 0.72rem; color: var(--tx-lo); }
.bout .badge { margin-left: auto; }

/* ---- right column ---- */
.succ-steps { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.succ-steps li { display: flex; gap: 0.7rem; align-items: flex-start; }
.succ-steps__n {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vt-blue-50);
  color: var(--vt-blue);
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  font-weight: 700;
}
.succ-steps strong { display: block; font-size: var(--fs-sm); color: var(--tx-hi); }
.succ-steps em { font-style: normal; font-size: var(--fs-xs); color: var(--tx-lo); }

/* "In the app" — sits directly under the installer inside the same card */
.succ-next {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--bd-soft);
}

/* the "agent code is emailed only" note */
.succ-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--vt-mist);
  border: 1px solid var(--bd-soft);
  color: var(--tx-lo);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.succ-note svg { flex: none; margin-top: 2px; color: var(--vt-blue); }

/* Full-width closing band. Reuses the theme's .cta-band, only overriding type. */
.succ-band { margin-top: var(--sp-6); }
.succ-band__eyebrow { color: rgba(255, 255, 255, 0.78); }
.succ-band h2 { max-width: 30ch; text-align: center; }
.succ-band__sub {
  max-width: 58ch;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .succ-mark path { stroke-dashoffset: 0; animation: none; }
}

/* --------------------------------------------------------------------------
   Console — quota meters, code output, secret reveal
   -------------------------------------------------------------------------- */
.console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 900px) { .console-grid { grid-template-columns: 1fr; } }

.meter { margin-top: 0.9rem; }
.meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.meter__value {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--vt-navy);
  line-height: 1.1;
}
.meter__of { font-size: var(--fs-xs); color: var(--tx-lo); }
.meter__track {
  height: 6px;
  margin-top: 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--vt-mist-2);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  transition: width 0.6s var(--ease-out);
}

.code-out {
  margin-top: 1.25rem;
  max-height: 18rem;
  overflow: auto;
  background: var(--vt-mist);
  border: 1px solid var(--bd-soft);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--vt-navy);
  white-space: pre;
}

.secret {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--vt-mist);
  border: 1px solid var(--bd-mid);
  border-radius: var(--radius-sm);
}
.secret__value {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--vt-navy);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Footer legal row
   The vendored theme only resets `font`/`color` on <button>, so a bare trigger renders
   with the browser's own chrome next to the plain footer links. This makes the
   SupportCall trigger sit exactly like the neighbouring <a> links.
   -------------------------------------------------------------------------- */
.footer__legal button.link-u {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
}
.footer__legal button.link-u::after { display: none; }
.footer__legal button.link-u:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Button hover — fill the surface, not just the label
   The vendored `.btn--ghost:hover` only shifted the border and text colour, which is easy
   to miss on a white card. The ghost variant now fills with the brand colour and inverts
   its label, so every secondary action reads as pressable. `.btn--primary` already carries
   a solid gradient (its hover just slides it), so it is left alone.
   -------------------------------------------------------------------------- */
.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-bg: var(--vt-blue);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--vt-blue);
  box-shadow: var(--shadow-blue);
}
/* The shine sweep is white-on-white once the fill lands — soften it. */
.btn--ghost:hover::after { opacity: 0.55; }

/* Disabled controls must not advertise the hover fill. */
.btn--ghost:disabled,
.btn--ghost[aria-disabled='true'] {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--tx-lo);
  --btn-bd: var(--bd-soft);
  box-shadow: none;
  transform: none;
}