/* v5.css: assembled from section files on 2026-09-12. Loaded after styles.css, v2.css, v3.css. */

/* ===== v5: base ===== */
/* Nero Scaling v5 -- base.css
   Tokens, shared classes, type-scale overrides for inherited v4 elements,
   and the four base-owned sections: hero, VSL, FAQ, final CTA.
   Loaded first in the assembled assets/css/v5.css (order: base, mesh,
   problem, bento, booking, estimate). */

:root {
  --v5-beige: #F8F3EC;
  --v5-white: #FFFFFF;
  --v5-ink: #000;
  --v5-muted: rgba(0,0,0,.62);
  --v5-faint: rgba(0,0,0,.42);
  --v5-hair: rgba(0,0,0,.08);
  --v5-r-card: 20px;
  --v5-r-panel: 28px;
  --v5-r-ui: 12px;
  --v5-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.12), 0 32px 64px -32px rgba(0,0,0,.10);
  --v5-shadow-ui: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -10px rgba(0,0,0,.14);
  --v5-section-y: 96px;
  --v5-maxw: 1200px;
  --v5-gutter: 28px;
  /* Round 11 colour audit: only #FFFFFF/#000000/#F8F3EC/#008B8B (opacity
     variants allowed) may render. --cyan-deep and --cyan-hi (the latter
     redefined just below, plus the body[data-mood="daylight"] override
     further down) now alias the single brand cyan instead of the old
     #006e6e/#00b0b0 shades, so every existing var(--cyan-deep)/
     var(--cyan-hi) call site resolves to on-palette without hunting down
     each selector individually. */
  --cyan-deep: var(--cyan);
  --cyan-hi: var(--cyan);

  --fs-1: 44px;
  --fs-2: 22px;
  --fs-3: 18px;
  --fs-4: 16px;
  --fs-5: 14px;
  --fs-6: 12px;
  --fs-mark: clamp(24px, 10.4vw, 175px); /* floor low enough that the wordmark keeps scaling down to 320px */
  --fs-logo: 28px;
  --hdr-top: 14px; /* viewport top to the header pill; 40px at <=880px (round 14) */
}

/* Round 11 colour audit continued: styles.css's body[data-mood="daylight"]
   block (the homepage only) redeclares --cyan-hi:#006e6e directly on body,
   which beats the :root --cyan-hi alias above on specificity, not just load
   order. Same selector here, loaded after styles.css, wins the tie and
   keeps every var(--cyan-hi) user on the homepage (the "Accepting Partners"
   pill among them) on the single brand cyan. */
body[data-mood="daylight"] { --cyan-hi: var(--cyan); }

/* styles.css's body[data-mood="daylight"] .footer rule darkens the footer to
   #0a0a0a on the homepage only (every other page already renders #000 via
   styles.css's plain .footer rule). Same selector, loaded after, ties on
   specificity and wins so the footer is #000000 everywhere. */
body[data-mood="daylight"] .footer { background: #000; }

@media (max-width:720px) {
  :root {
    --fs-1: 30px;
    --fs-2: 19px;
    --fs-3: 17px;
    --fs-4: 15px;
    --fs-5: 13px;
    --fs-6: 12px;
    --v5-section-y: 56px;
    --v5-gutter: 20px;
    --fs-logo: var(--fs-2);
  }
}

/* Re-point v3.css's type-scale tokens at ours. Plain :root, no media query,
   so it wins by source order over both v3.css's plain :root and its own
   ≤720px media override -- our fs-* tokens already carry the responsive step. */
:root {
  --t-heading: var(--fs-1);
  --t-sub: var(--fs-2);
  --t-body: var(--fs-4);
  --t-label: var(--fs-6);
  --t-faq: var(--fs-3);
  --t-quote: var(--fs-2);
  --t-num: var(--fs-1);
}

body {
  background: var(--v5-beige);
  color: var(--v5-ink);
  font-family: var(--body);
  font-size: var(--fs-4);
}
html { scroll-padding-top: calc(var(--hdr-top) + 82px); }

/* ===================== Shared classes ===================== */
.v5-wrap {
  max-width: var(--v5-maxw);
  margin: 0 auto;
  padding: 0 var(--v5-gutter);
}

.v5-h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--v5-ink);
  margin: 0;
  text-wrap: balance;
}
.v5-h2 em { font-style: normal; color: var(--cyan); }

.v5-lead {
  font-family: var(--body);
  font-size: var(--fs-3);
  line-height: 1.5;
  color: var(--v5-muted);
  margin: 0;
}

.v5-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--fs-6);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cyan);
}

.v5-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-5);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--v5-beige);
  color: var(--v5-ink);
  border: none;
}

.v5-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.5);
  color: var(--v5-ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-5);
  transition: background .2s, border-color .2s;
}
.v5-btn-ghost:hover {
  background: #fff;
  border-color: rgba(0,0,0,.24);
}
.v5-btn-ghost:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ===================== Type-scale overrides for inherited v4 elements =====================
   styles.css / v2.css / v3.css set literal font sizes (and, in v3.css, sizes
   driven by the --t-* tokens we've already re-pointed above) on these same
   elements. Every rule here matches or exceeds the specificity of the rule it
   overrides so it wins at every width; !important is used only where the
   overridden rule itself used !important. */

.pill-logo { font-size: var(--fs-logo); --logo-nudge: .1em; }

/* optical centring for Agrandir Wide caps (measured: cap top .045em, baseline .75em, NS ink .055em to 1.576em in a 1.716em box) */
.pill[data-compact="true"] .pill-chip {
  inset: auto;
  top: -.295em;
  bottom: -.09em;
  left: -.285em;
  right: -.2em;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px -8px rgba(0,0,0,.12);
}

/* Higher specificity than styles.css's .pill-nav a (uppercase, .72rem) and
   v3.css's ≤1180px .pill-nav a (.68rem), so this one rule covers desktop,
   the ≤1180px step and the open mobile menu without a media query. */
.site-header .pill-nav a { font-size: var(--fs-5); text-transform: none; }
.pill-nav.open a { font-size: var(--fs-5); }

.pill-cta { font-size: var(--fs-6); }

.pill-menu-cta { font-size: var(--fs-5); }

.btn-label { font-size: var(--fs-5); }
.btn:not(.cta-merged-btn) .btn-label { font-size: var(--fs-5); }

.btn-sub { font-size: var(--fs-6); }
.btn:not(.cta-merged-btn) .btn-sub { font-size: var(--fs-6); }

.spots-label { font-size: var(--fs-6); }
.spots-left { font-size: var(--fs-6); }

.faq-q { font-size: var(--fs-3) !important; }
.faq-a { font-size: var(--fs-4) !important; }

.mobile-sticky-cta .btn { font-size: var(--fs-5); }

/* ===================== Spots pill ===================== */
.spots-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}
.spots-sep {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: .35;
}
.spots-pill {
  padding: 10px 28px 9px;
  gap: 6px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 24px -12px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.spots-left {
  color: var(--v5-ink);
  font-weight: 600;
}

/* ===================== Page CTA sizing =====================
   One line, text only. The `:not(.cta-merged-btn)` on each selector below
   is a no-op for matching (none of these buttons carry that class) but
   brings specificity to three classes, tying styles.css's ≤600px
   `.btn:not(.btn-sm):not(.cta-merged-btn)` padding override -- and a tie
   is won by source order, since v5.css loads after styles.css. */
.hx .btn:not(.cta-merged-btn),
.bn .btn:not(.cta-merged-btn),
.et .btn:not(.cta-merged-btn),
.fn .btn:not(.cta-merged-btn) {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  gap: 0;
}
.hx .btn .btn-label,
.bn .btn .btn-label,
.et .btn .btn-label,
.fn .btn .btn-label {
  font-size: var(--fs-5);
  line-height: 1;
}

.v5-fine {
  margin: 12px 0 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-6);
  line-height: 1.4;
  color: rgba(0,0,0,.7);
}

/* ===================== Section guard ===================== */
.hx, .vx, .fq, .fn { position: relative; }

/* ===================== HERO ===================== */
.hx {
  background: var(--v5-white);
  padding: 0 !important;
}
.hx-inner {
  text-align: center;
  padding: 104px var(--v5-gutter) 40px;
  max-width: 900px;
}
.hx-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--v5-ink);
  margin: 0 auto;
  max-width: 820px;
  text-wrap: balance;
}
.hx-sub {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-2);
  color: var(--cyan);
  margin: 18px 0 0;
}
.hx-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.hx-spots { margin-top: 26px; }
.hx-ghost { min-height: 48px; }

@media (max-width:720px) {
  .hx-inner { padding: 64px 20px 28px; }
  .hx-actions { flex-direction: column; align-items: stretch; }
  .hx-ghost { width: 100%; justify-content: center; }
}

/* ===================== VSL ===================== */
.vx {
  background: var(--v5-white);
  padding: 0 0 var(--v5-section-y);
}
.vx .v5-wrap { max-width: 1348px; }
.vx-frame {
  border-radius: 24px;
  padding: clamp(12px, 3.5vw, 48px);
}
.vx-window {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--v5-shadow);
  aspect-ratio: 16/9;
}
.vx-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.vx-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vx-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--v5-shadow-ui);
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-5);
  color: var(--v5-ink);
  transition: transform .2s ease;
}
.vx-hint svg { color: var(--cyan); }
.vx-hit:hover .vx-hint { transform: translateY(-1px); }
.vx-hit:focus-visible { outline: none; }
.vx-hit:focus-visible .vx-hint { outline: 2px solid var(--cyan); outline-offset: 3px; }

.vx-unmute {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.92);
  color: var(--v5-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--v5-shadow-ui);
  transition: background .2s ease;
}
.vx-unmute:hover { background: #fff; }
.vx-unmute:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.vx-window.is-live .vx-hit,
.vx-window.is-live .vx-unmute { display: none; }

@media (max-width:720px) {
  .vx .vx-frame { padding: 10px; border-radius: 18px; }
  .vx-unmute { width: 40px; height: 40px; right: 10px; bottom: 10px; }
  .vx-hint { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-hint, .vx-unmute { transition: none; }
}

/* ===================== FAQ ===================== */
.fq {
  background: var(--v5-beige);
  padding: var(--v5-section-y) 0;
}
.fq-grid {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 72px;
  align-items: start;
}
.fq-head {
  position: sticky;
  top: 120px;
}
.fq-list {
  max-width: none;
  margin: 0;
}

.fq .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--v5-hair);
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.fq .faq-item:first-child {
  border-top: 1px solid var(--v5-hair);
}
.fq .faq-q {
  padding: 22px 0;
  gap: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-weight: 500;
  color: var(--v5-ink);
  cursor: pointer;
}
.fq .faq-a {
  padding: 0 48px 24px 0;
  color: var(--v5-muted);
  font-family: var(--body);
}
.fq .faq-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  color: var(--v5-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  rotate: none;
  transform: none;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), background .2s ease;
}
.fq .faq-item[open] .faq-toggle {
  background: #fff;
  color: var(--v5-ink);
  rotate: none;
  transform: none;
}
.fq .faq-item.is-open .faq-toggle {
  transform: rotate(45deg);
}
.fq:not(.js-faq) .faq-item[open] .faq-toggle {
  transform: rotate(45deg);
}
.fq .faq-item[open] .faq-a {
  animation: none;
}

@media (max-width:900px) {
  .fq-grid { grid-template-columns: 1fr; gap: 32px; }
  .fq-head { position: static; top: auto; }
}

/* ===================== FINAL CTA ===================== */
.fn {
  background: var(--v5-white);
  padding: var(--v5-section-y) 0;
  border-radius: 0 0 var(--v5-r-panel) var(--v5-r-panel);
  position: relative;
  z-index: 1;
}
.fn-panel {
  border-radius: var(--v5-r-panel);
  padding: 104px 32px;
  text-align: center;
}
.fn-sub {
  margin: 16px auto 0;
  max-width: 560px;
}
.fn .cta-block .v5-fine { margin-top: -12px; }

@media (max-width:720px) {
  .fn-panel { padding: 64px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .fq .faq-toggle{transition:none !important;}
  .fq .faq-a{animation:none !important;}
}

/* ===== v5: mesh ===== */
/* Nero Scaling v5 -- mesh drift host + fallback styling */

[data-mesh] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #F8F3EC;
}

[data-mesh="soft"] {
  background-image: radial-gradient(70% 80% at 72% 18%, rgba(0,139,139,.55) 0%, rgba(0,139,139,0) 70%);
}

[data-mesh="rich"] {
  background-image:
    radial-gradient(60% 75% at 20% 20%, rgba(0,139,139,.85) 0%, rgba(0,139,139,0) 70%),
    radial-gradient(55% 70% at 85% 80%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(80% 90% at 80% 10%, rgba(0,139,139,.5) 0%, rgba(0,139,139,0) 70%);
}

[data-mesh="beige"] {
  background-image: none;
}

[data-mesh="mixed"] {
  background-image:
    radial-gradient(60% 70% at 12% 88%, rgba(0,139,139,.55) 0%, rgba(0,139,139,0) 70%),
    radial-gradient(55% 65% at 88% 12%, rgba(0,139,139,.4) 0%, rgba(0,139,139,0) 70%);
}

.mesh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}

.mesh-canvas.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mesh-canvas {
    transition: none;
  }
}


/* ===== v5: problem ===== */
/* Problem: hover-switch (yummygum "when good stops being enough" pattern) */

.pb{
  background:linear-gradient(180deg,var(--v5-beige) 0%,var(--v5-white) 35%,var(--v5-white) 100%);
  padding:var(--v5-section-y) 0;
}

.pb-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:72px;
  align-items:center;
}

.pb-lead{
  margin-top:16px;
  max-width:460px;
}

.pb-list{
  list-style:none;
  margin:36px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.pb-item{
  margin:0;
}

.pb-tab{
  appearance:none;
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:0;
  border-radius:14px;
  background:transparent;
  font-family:var(--body);
  font-weight:500;
  font-size:var(--fs-3);
  color:var(--v5-muted);
  cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}

.pb-tab:hover{
  color:var(--v5-ink);
}

.pb-tab.is-active{
  background:#fff;
  color:var(--v5-ink);
  box-shadow:var(--v5-shadow-ui);
}

.pb-tab:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.pb-icon{
  flex:none;
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.04);
  color:var(--cyan);
  transition:background .25s ease;
}

.pb-icon .ico{
  display:block;
  width:22px;
  height:22px;
}

.pb-tab.is-active .pb-icon{
  background:var(--cyan-soft);
}

.pb-tab-text{
  min-width:0;
}

.pb-stage{
  position:relative;
}

.pb-card{
  position:relative;
  z-index:1;
  background:#fff;
  border-radius:var(--v5-r-card);
  box-shadow:var(--v5-shadow);
  overflow:hidden;
}

.pb-card-under{
  position:absolute;
  left:18px;
  right:18px;
  bottom:-12px;
  height:40px;
  background:rgba(255,255,255,.6);
  border-radius:0 0 var(--v5-r-card) var(--v5-r-card);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.12);
  z-index:0;
}

.pb-art{
  height:260px;
  display:grid;
}

.pb-illo{
  grid-area:1/1;
  place-self:center;
  width:auto;
  height:auto;
  max-width:78%;
  max-height:210px;
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
}

.pb-illo.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .35s ease,transform .35s ease,visibility 0s;
}

.pb-progress{
  position:relative;
  height:2px;
  background:rgba(0,139,139,.12);
  overflow:hidden;
}

.pb-progress-fill{
  position:absolute;
  inset:0;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

.pb-panels{
  display:grid;
  padding:28px 32px 32px;
}

.pb-panel{
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
}

.pb-panel.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .35s ease,transform .35s ease,visibility 0s;
}

.pb-title{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:var(--fs-2);
  line-height:1.25;
  color:var(--v5-ink);
}

.pb-copy{
  margin:10px 0 0;
  font-size:var(--fs-4);
  color:var(--v5-muted);
  line-height:1.6;
}

.pb-fix{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--v5-hair);
}

.pb-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

@media (prefers-reduced-motion: reduce){
  .pb-tab,
  .pb-icon,
  .pb-illo,
  .pb-panel{
    transition:none !important;
  }
  .pb-progress{
    display:none;
  }
}

@media (max-width:1100px){
  .pb-grid{
    gap:48px;
  }
}

@media (max-width:900px){
  .pb-grid{
    grid-template-columns:1fr;
  }
  /* The tab list and its single-stage card are a desktop-only pattern; at
     this width the .pb-deck carousel below (built by problem-switcher.js,
     styled in the round-6 block near the end of this file) replaces them. */
  .pb-list,
  .pb-stage{
    display:none;
  }
}


/* ===== v5: bento ===== */
/* Nero Scaling v5 -- Bento (Solution) section. Every rule scoped under .bn */

.bn {
  background: var(--v5-white);
  padding: var(--v5-section-y) 0;
}

/* ---------- Head ---------- */

.bn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.bn-head .v5-h2 {
  max-width: 640px;
}

.bn-head .btn {
  flex: none;
}

@media (max-width: 720px) {
  .bn-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Grid ---------- */

.bn-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.bn-span-7 { grid-column: span 7; }
.bn-span-5 { grid-column: span 5; }
.bn-span-4 { grid-column: span 4; }

@media (max-width: 1100px) {
  .bn-card { grid-column: span 6; }
}

@media (max-width: 720px) {
  .bn-card { grid-column: span 12; }
}

/* ---------- Card ---------- */

.bn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--v5-white);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.10);
  border-radius: var(--v5-r-card);
  padding: 28px 0 0 28px;
  overflow: hidden;
  min-height: 440px;
}

.bn-card .v5-label {
  display: block;
  margin-right: 28px;
}

.bn-title {
  margin: 12px 28px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-2);
  line-height: 1.25;
  color: var(--v5-ink);
}

.bn-copy {
  margin: 10px 28px 0 0;
  font-size: var(--fs-4);
  line-height: 1.6;
  color: var(--v5-muted);
  max-width: 46ch;
}
/* Desktop grid: copy runs the width of the card, one step down the scale.
   The <=900px carousel keeps fs-4 (fs-5 is 13px on a phone). */
@media (min-width: 901px) {
  .bn-copy { max-width: none; font-size: var(--fs-5); }
}

/* ---------- Visual (mesh window, bleeds bottom-right) ---------- */

.bn-visual {
  margin-top: auto;
  position: relative;
  background: rgba(0,0,0,.025);
  height: 230px;
  border-top-left-radius: 16px;
}

.bn-span-7 .bn-visual,
.bn-span-5 .bn-visual {
  height: 250px;
}

@media (max-width: 720px) {
  .bn-card .bn-visual {
    height: 220px;
  }
}

.bn-ui {
  position: absolute;
  top: 24px;
  left: 24px;
}

.bn-ui--center {
  left: 50%;
  transform: translateX(-50%);
}

/* ==================================================================
   Mockups
   ================================================================== */

/* ---------- 1. SPECIALIST -- filter panel ---------- */

.bn-filter {
  width: 290px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  padding: 18px 20px;
  box-sizing: border-box;
}

.bn-filter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-6);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--v5-faint);
  margin-bottom: 14px;
}

.bn-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: var(--fs-5);
  font-family: var(--body);
}

.bn-chip.is-active {
  background: var(--cyan);
  color: #fff;
}

.bn-chip.is-off {
  background: rgba(0, 0, 0, .04);
  color: var(--v5-faint);
  text-decoration: line-through;
}

/* ---------- 2. GUARANTEED -- chart panel ---------- */

.bn-chart {
  width: 290px;
  height: 200px;
  position: relative;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  padding: 16px 18px;
  box-sizing: border-box;
}

.bn-chart-head {
  display: flex;
  margin-bottom: 10px;
}

.bn-chart-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--v5-hair);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--fs-6);
  color: var(--v5-muted);
}

.bn-chart-line-label {
  position: absolute;
  right: 18px;
  bottom: calc(42% + 6px);
  font-size: var(--fs-6);
  font-weight: 600;
  color: var(--cyan);
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--v5-shadow-ui);
  z-index: 2;
}

.bn-chart-line {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 42%;
  border-top: 1px dashed var(--cyan);
}

.bn-bars {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  height: 130px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.bn-bars span {
  flex: 1;
  background: rgba(0, 139, 139, .16);
  border-top: 3px solid var(--cyan);
  border-radius: 2px 2px 0 0;
}

/* ---------- 3. FOCUSED -- seat grid ---------- */

.bn-seat {
  width: 300px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  padding: 18px 20px;
  box-sizing: border-box;
}

.bn-seat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.bn-seat-title {
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--v5-ink);
}

.bn-seat-tag {
  background: var(--cyan-soft);
  color: var(--cyan-deep);
  font-size: var(--fs-6);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.bn-seat-grid {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  gap: 8px;
}

.bn-seat-tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px dashed rgba(0, 0, 0, .16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bn-seat-tile svg {
  opacity: .35;
}

/* ---------- 4. EXCLUSIVE -- dot-grid map ---------- */

.bn-map {
  position: relative;
  width: 280px;
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  padding: 14px;
}

.bn-map-svg {
  display: block;
}

.bn-map-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  box-shadow: var(--v5-shadow-ui);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: var(--fs-6);
  font-weight: 600;
  color: var(--v5-ink);
}

/* ---------- 5. ALIGNED -- ledger ---------- */

.bn-ledger {
  width: 280px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  overflow: hidden;
}

.bn-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: var(--fs-5);
  border-top: 1px solid var(--v5-hair);
  color: var(--v5-ink);
}

.bn-ledger-row:first-child {
  border-top: none;
}

.bn-ledger-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v5-faint);
}

.bn-ledger-row.is-charge {
  background: var(--cyan-soft);
}

.bn-ledger-row.is-charge .bn-ledger-value {
  color: var(--cyan-deep);
  font-weight: 600;
}

/* ---------- 6. ACQUISITION -- sponsored post card ---------- */

.bn-ad {
  width: 250px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  overflow: hidden;
}

.bn-ad-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.bn-ad-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan);
  display: inline-block;
}

.bn-ad-id {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bn-ad-name {
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--v5-ink);
}

.bn-ad-sponsored {
  font-size: var(--fs-6);
  color: var(--v5-faint);
}

.bn-ad-seg {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.bn-ad-seg-item {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-6);
  font-weight: 600;
}

.bn-ad-seg-item.is-active {
  background: var(--cyan);
  color: #fff;
}

.bn-ad-seg-item.is-off {
  background: rgba(0, 0, 0, .05);
  color: var(--v5-faint);
}

.bn-ad-image {
  height: 104px;
  background: radial-gradient(80% 90% at 30% 20%, rgba(0, 139, 139, .28), rgba(0, 139, 139, 0) 70%), var(--v5-beige);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bn-ad-body {
  padding: 10px 12px 12px;
}

.bn-ad-headline {
  margin: 0 0 8px;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--v5-ink);
}

.bn-ad-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bn-ad-url {
  font-size: var(--fs-6);
  color: var(--v5-faint);
}

.bn-ad-btn {
  flex: none;
  background: var(--cyan);
  color: #fff;
  font-size: var(--fs-6);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
}

/* ---------- 7. CUSTOM -- browser flow ---------- */

.bn-flow {
  width: 280px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  overflow: hidden;
}

.bn-flow-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--v5-hair);
}

.bn-flow-url {
  display: inline-block;
  background: rgba(0, 0, 0, .04);
  color: var(--v5-faint);
  font-size: var(--fs-6);
  padding: 4px 10px;
  border-radius: 999px;
}

.bn-flow-body {
  padding: 18px;
}

.bn-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
}

.bn-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  box-shadow: var(--v5-shadow-ui);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: var(--fs-5);
  color: var(--v5-ink);
  white-space: nowrap;
}

.bn-flow-step.is-done {
  background: var(--cyan);
  color: #fff;
}

.bn-flow-arrow {
  flex: none;
  color: var(--v5-faint);
}

/* ---------- 8. APPOINTMENTS -- sms thread ---------- */

.bn-sms {
  width: 290px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  padding: 16px 18px;
  box-sizing: border-box;
}

.bn-sms-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--v5-ink);
}

.bn-sms-head div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bn-sms-name {
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--v5-ink);
}

.bn-sms-sub {
  font-size: var(--fs-6);
  color: var(--v5-faint);
}

.bn-sms-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bn-bubble {
  margin: 0;
  padding: 9px 12px;
  font-size: var(--fs-5);
  max-width: 80%;
  border-radius: 14px 14px 14px 4px;
  line-height: 1.45;
}

.bn-bubble.is-in {
  background: var(--v5-beige);
  color: var(--v5-ink);
  align-self: flex-start;
}

.bn-bubble.is-out {
  background: var(--cyan);
  color: #fff;
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
}

.bn-sms-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-6);
  font-weight: 600;
  color: var(--cyan);
}

/* ---------- 9. OWNED -- assets list ---------- */

.bn-assets {
  width: 360px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  overflow: hidden;
}

.bn-assets-head {
  padding: 14px 18px;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--v5-ink);
  border-bottom: 1px solid var(--v5-hair);
}

.bn-assets-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--v5-hair);
  font-size: var(--fs-5);
  color: var(--v5-ink);
}

.bn-assets-name {
  flex: 1;
}

.bn-assets-tag {
  flex: none;
  background: var(--cyan-soft);
  color: var(--cyan-deep);
  font-size: var(--fs-6);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- 10. COMPOUNDING -- weekly report ---------- */

.bn-report {
  width: 290px;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow-ui);
  padding: 18px 20px;
  box-sizing: border-box;
}

.bn-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.bn-report-title {
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--v5-ink);
}

.bn-report-week {
  font-size: var(--fs-6);
  color: var(--v5-faint);
}

.bn-report-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.bn-report-label {
  font-size: var(--fs-6);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--v5-faint);
}

.bn-report-trend {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cyan-soft);
  color: var(--cyan-deep);
  font-size: var(--fs-6);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.bn-report-spark {
  display: block;
  width: 100%;
  height: auto;
  margin: 6px 0 14px;
}

.bn-report-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-5);
  color: var(--v5-ink);
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--v5-hair);
  border-radius: 999px;
}

/* ---------- Responsive scale (mockups shrink so nothing text-bearing clips) ---------- */

@media (max-width:1100px) {
  .bn .bn-ui { transform: scale(.9); transform-origin: top left; }
  .bn .bn-ui--center { transform: translateX(-50%) scale(.9); transform-origin: top center; }
}

@media (max-width:720px) {
  .bn .bn-ui { transform: scale(.78); transform-origin: top left; }
  .bn .bn-ui--center { transform: translateX(-50%) scale(.78); transform-origin: top center; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .bn * {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== v5: booking ===== */
/* Nero Scaling v5 -- booking section (Calendly composed card) */

.bk {
  background: var(--v5-white);
  padding: var(--v5-section-y) 0;
  /* Safe loading height shown before assets/js/booking-embed.js hears
     Calendly's first calendly.page_height message and overwrites this
     with the real content height (see that file for the mechanism). */
  --bk-embed-h: 660px;
  --bk-crop-top: 0px;
  --bk-crop-side: 0px;
  --bk-crop-bottom: 0px;
}

/* Round 11: Vignesh called the whole-page dark-zone treatment (the deleted
   "v5 round 10: dark zone at booking" block above) wrong -- only the
   homepage booking section should read black, not a scroll-driven fade
   across .bn/.bk/.et. Same-specificity rule placed after the base .bk rule
   above wins on source order and simply sets it black outright. The
   schedule page's own #schedule.bk (id selector, higher specificity) still
   overrides this back to white -- see that page's inline style. */
.bk {
  background: var(--v5-beige);
}

.bk-title2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0;
}

.bk-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: #fff;
  border-radius: var(--v5-r-panel);
  box-shadow: var(--v5-shadow);
  overflow: hidden;
  max-width: 1120px;
  margin: 0 auto;
}

/* left pane: mesh gradient + call details */

.bk-info {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--v5-ink);
}

.bk-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.bk-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-5);
  color: var(--v5-ink);
}

.bk-meta svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.bk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bk-steps li {
  display: flex;
  gap: 14px;
  align-items: center;
}

.bk-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.bk-icon .ico {
  display: block;
  width: 30px;
  height: 30px;
}

.bk-steps p {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: 1.55;
  color: var(--v5-ink);
}

.bk-bottom {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}

/* Pill and intake line match the card's text weight (Montserrat 600),
   so they read as heavy as the 16px 500 steps beside them. Scoped to
   .bk only -- the hero and final pills keep the display-font pill. */
.bk .v5-fine {
  font-weight: 600;
  color: rgba(0,0,0,.78);
}

/* right pane: white crop wrapper hosting Calendly */

.bk-cal {
  background: #fff;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 8px 8px 0;
}

.bk-crop {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  height: calc(var(--bk-embed-h) - var(--bk-crop-top) - var(--bk-crop-bottom));
  transition: height .25s ease;
}

.bk-widget {
  position: absolute;
  top: calc(-1 * var(--bk-crop-top));
  left: calc(-1 * var(--bk-crop-side));
  width: calc(100% + 2 * var(--bk-crop-side));
  height: var(--bk-embed-h);
  min-width: 320px;
  background: #fff;
  transition: height .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .bk-crop,
  .bk-widget {
    transition: none;
  }
}

.bk-widget iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

@media (max-width: 900px) {
  .bk-card {
    grid-template-columns: 1fr;
  }
  .bk-info {
    padding: 32px 24px;
  }
  .bk {
    /* Safe loading height for the mobile stacked layout; booking-embed.js
       replaces this once Calendly reports its real height. */
    --bk-embed-h: 700px;
  }
}

@media (max-width: 720px) {
  .bk-card {
    border-radius: 22px;
  }
}

/* Calendly needs 320px. Below 720px the calendar pane drops its padding, and at
   360px and under the card runs edge to edge so the crop box is never narrower
   than the widget's min-width. */
@media (max-width:720px){
  .bk .bk-cal{padding:0;}
}
@media (max-width:360px){
  .bk .bk-card{margin-left:calc(-1 * var(--v5-gutter));margin-right:calc(-1 * var(--v5-gutter));border-radius:0;}
}

/* ===== v5: estimate ===== */
/* =============================================================================
   estimate.css — section.et (#calculator)
   A blurred, non-interactive replica of /calculator's UI that teases the real
   tool. Every figure inside the mockup is a placeholder block, never text.
   ========================================================================== */

@property --et-p {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 35%;
}

.et {
  background: var(--v5-white);
  padding: var(--v5-section-y) 0;
}

.et-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}

.et-lead {
  margin: 16px 0 32px;
  max-width: 420px;
}

.et-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.et-btn { margin-top: 4px; }

/* ---------- Stage (the fake window) ---------- */

.et-stage {
  display: block;
  border-radius: var(--v5-r-panel);
  padding: 48px;
  text-decoration: none;
}

.et-window {
  position: relative;
  background: #fff;
  border-radius: var(--v5-r-ui);
  box-shadow: var(--v5-shadow);
  overflow: hidden;
}

/* Browser bar stays sharp: it is chrome, not part of the blurred product. */
.et-bar {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--v5-hair);
}

.et-url {
  font-family: var(--body);
  font-size: var(--fs-6);
  color: var(--v5-faint);
  background: rgba(0, 0, 0, .04);
  padding: 5px 14px;
  border-radius: 999px;
}

.et-body {
  filter: blur(5px);
  padding: 28px;
}

.et-heading-ph {
  width: 60%;
  height: 1.4em;
  border-radius: 6px;
  background: rgba(0, 0, 0, .14);
}

.et-cols {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  margin-top: 20px;
}

/* ---------- Sliders ---------- */

.et-sliders {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.et-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.et-row-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--fs-6);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.et-value-ph {
  display: inline-block;
  width: 3.5em;
  height: 1em;
  border-radius: 4px;
  background: rgba(0, 0, 0, .14);
}

.et-track {
  --et-p: 35%;
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .1);
}

.et-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--cyan);
  width: var(--et-p);
}

.et-thumb {
  position: absolute;
  top: 50%;
  left: var(--et-p);
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid #fff;
  box-shadow: var(--v5-shadow-ui);
}

.et-row:nth-child(1) .et-track { --et-p: 35%; }
.et-row:nth-child(2) .et-track { --et-p: 20%; }
.et-row:nth-child(3) .et-track { --et-p: 45%; }
.et-row:nth-child(4) .et-track { --et-p: 60%; }

.et-row:nth-child(1) .et-track { animation: et-drift-1 8s ease-in-out infinite alternate; }
.et-row:nth-child(2) .et-track { animation: et-drift-2 7s ease-in-out infinite alternate .4s; }
.et-row:nth-child(3) .et-track { animation: et-drift-3 9s ease-in-out infinite alternate .8s; }
.et-row:nth-child(4) .et-track { animation: et-drift-4 10s ease-in-out infinite alternate 1.2s; }

@keyframes et-drift-1 { from { --et-p: 23%; } to { --et-p: 47%; } }
@keyframes et-drift-2 { from { --et-p: 8%; }  to { --et-p: 32%; } }
@keyframes et-drift-3 { from { --et-p: 33%; } to { --et-p: 57%; } }
@keyframes et-drift-4 { from { --et-p: 48%; } to { --et-p: 72%; } }

/* ---------- Result panel ---------- */

.et-result {
  border-radius: 12px;
  background: var(--v5-beige);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.et-result-label-ph {
  width: 45%;
  height: .8em;
  border-radius: 4px;
  background: rgba(0, 0, 0, .14);
}

.et-result-number-ph {
  width: 6em;
  height: 1.6em;
  border-radius: 8px;
  background: rgba(0, 0, 0, .14);
}

.et-result-bar-ph {
  display: block;
  height: .6em;
  border-radius: 4px;
  background: rgba(0, 0, 0, .14);
}

.et-result-bar-ph-a { width: 90%; }
.et-result-bar-ph-b { width: 75%; }
.et-result-bar-ph-c { width: 55%; }

/* ---------- Calculate pill ---------- */

.et-calc {
  margin-top: 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cyan);
  color: #fff;
  font-family: var(--display);
  font-size: var(--fs-5);
}

/* ---------- Overlay ---------- */

.et-overlay {
  position: absolute;
  inset: 40px 0 0 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .35));
}

.et-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--v5-ink);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: var(--v5-shadow-ui);
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-5);
  transition: transform 200ms ease;
}

.et-chip svg {
  width: 16px;
  height: 16px;
  color: var(--cyan);
  flex-shrink: 0;
}

.et-stage:hover .et-chip {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .et-track { animation: none !important; }
  .et-chip { transition: none; }
  .et-stage:hover .et-chip { transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .et-grid {
    grid-template-columns: 1fr;
  }
  .et-stage {
    padding: 20px;
  }
  .et-cols {
    grid-template-columns: 1fr;
  }
}

/* ===== v5: silk ===== */
.silk-zone{position:relative;isolation:isolate;background:var(--v5-beige);}
.silk-zone > .hx, .silk-zone > .vx{background:transparent;}
/* the bottom 180px fades out so the silk dissolves into the flat beige of the next section */
.silk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s ease;-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 180px), transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 180px), transparent 100%);}
.silk-canvas.is-ready{opacity:1;}
@media (prefers-reduced-motion: reduce){.silk-canvas{transition:none;}}

/* Round 11: silk in the simple header (terms, privacy, schedule). The host
   is the header itself, a 56px floating pill since round 15 ([data-silk],
   silk.js sizes the canvas off host.clientWidth/clientHeight, so it fits --
   no forced min-height or aspect ratio to fight there). isolation:isolate +
   overflow:hidden keep the canvas's negative z-index contained to the
   header instead of it painting behind the whole page. The default
   .silk-canvas mask fades its bottom 180px to transparent for the tall
   hero zone; in a 56px pill that would swallow almost the entire canvas, so
   it's turned off here. */
.silk-header{isolation:isolate;overflow:hidden;}
.silk-header .silk-canvas{-webkit-mask-image:none;mask-image:none;}

/* ===== v5: footer ===== */
/* .fn's rounded bottom corners (base.css) tuck into this section, so the
   footer needs to ride up under them. Both declarations below beat
   styles.css's .footer{padding:60px 0 36px} on specificity-tie + source
   order (v5.css loads after styles.css), and padding-top is a longhand
   overriding just that one edge of the shorthand. */
.footer {
  margin-top: calc(-1 * var(--v5-r-panel));
  padding-top: calc(var(--v5-r-panel) + 56px);
  overflow: hidden;
}

.fx {
  display: table;
  margin: 0 auto;
}

.fx-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  /* insets match the wordmark's side bearings so the text lines up with the N and G */
  padding-left: calc(var(--fs-mark) * 0.06);
  padding-right: calc(var(--fs-mark) * 0.04);
}

.fx-give {
  margin: 0;
  max-width: none;
  white-space: nowrap;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-5);
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  text-align: left;
}
.fx-give a {
  color: rgba(255,255,255,.72);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fx-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.fx-links {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-5);
  color: rgba(255,255,255,.72);
}
.fx-links a {
  color: rgba(255,255,255,.72);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fx-links span {
  display: inline-block;
  color: rgba(255,255,255,.4);
  margin: 0 2px;
}
.fx-copy {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-5);
  color: rgba(255,255,255,.6);
}

.fx-mark {
  margin-top: 28px;
  margin-bottom: -0.08em;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-mark);
  line-height: .8;
  color: var(--cyan);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .fx { display: block; width: 100%; }
  .fx-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding-left: 0;
    padding-right: 0;
  }
  .fx-give { text-align: center; max-width: 480px; margin: 0 auto; white-space: normal; }
  .fx-legal { align-items: center; text-align: center; }
  .fx-mark { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-links a, .fx-give a { transition: none; }
}

/* ===== v5: header over silk ===== */
/* no black strip: the un-scrolled header sits on the silk, so its nav goes dark
   (overrides v2.css's white-on-black rules; the compact glass pill is unchanged) */
.silk-zone .nds-hero-bar{background:transparent;}
.pill[data-compact="false"] .pill-logo{color:var(--cyan);}
.pill[data-compact="false"] .pill-nav a{color:rgba(0,0,0,.72);}
.pill[data-compact="false"] .pill-nav a:hover{color:#000;}
.pill[data-compact="false"] .pill-burger span{background:#000;}

/* =====================================================================
   v5 round 6, section A: homepage mobile polish
   Everything below is scoped to index.html + main.js only (A1-A6 of the
   round-6 plan). Kept as one appended block, deliberately not folded
   into the sections above, so it never collides with the carousel work
   (problem/bento) landing in this same file at the same time.
   ===================================================================== */

/* ===== v5 round 6 / A1: mobile header (<=880px) =====
   Locks the pill to a flat 56px band regardless of scroll state, so the
   logo (19-28px depending on width) and the 24px-tall burger sit on the
   pill's centre line instead of crowding its top 24px (today's pill is
   75px tall because it inherits the desktop 12px/8px vertical padding).
   Also restores the desktop collapse-to-chip behaviour on compact --
   styles.css:1042-1045 deliberately kept the full wordmark on mobile;
   v5 wants the same "NS" collapse everywhere. */
@media (max-width: 880px) {
  .pill,
  .pill[data-compact="true"] {
    padding: 0 24px;
    min-height: 56px;
    align-items: center;
  }

  /* the closed nav must contribute zero height to the pill; styles.css
     gives it a 1px (transparent) border-top unconditionally */
  .pill-nav { border-top-width: 0; }
  .pill-nav.open { border-top-width: 1px; }

  /* restore the desktop collapse-to-chip behaviour that styles.css:1042-1045
     overrode for mobile (full wordmark always) */
  .pill[data-compact="true"] .lm-rest { max-width: 0; opacity: 0; }
  .pill[data-compact="true"] .lm-gap { width: 0; }
  .pill[data-compact="true"] .pill-chip { opacity: 1; transform: scale(1); }
  .pill[data-compact="true"] .pill-logo { margin-left: 10px; }

  /* mobile-only optical nudge for the logo ink within the 56px band --
     re-check against a live screenshot and adjust if the ink drifts off
     the pill's centre line (desktop nudge is .1em, set above). */
}

/* ===== v5 round 6 / A2: hero CTAs (<=720px) =====
   Column, centred (not stretched), sized like the sticky CTA (12px 20px
   padding, fs-5, height driven by padding rather than the 48px fixed
   height .hx .btn otherwise gets), and equal width -- both stretch to
   whichever is naturally wider via a single max-content grid column. */
@media (max-width: 720px) {
  .hx-actions {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
  }
  .hx-actions > .btn,
  .hx-actions > .hx-ghost {
    width: 100%;
    box-sizing: border-box;
  }
  .hx .btn:not(.cta-merged-btn) {
    height: auto;
    padding: 12px 20px;
  }
  .hx-ghost {
    padding: 12px 20px;
    min-height: 0;
    justify-content: center;
  }
}

/* ===== v5 round 6 / A3: hide the Solutions header CTA on mobile (<=900px) =====
   Desktop keeps .bn-head's button; mobile relies on the sticky CTA
   instead. .bn-head's markup belongs to the carousel work landing in
   this round, so this stays CSS-only -- no markup touched. */
@media (max-width: 900px) {
  .bn-head .btn { display: none; }
}

/* ===== v5 round 6 / A4: estimate section (<=900px) =====
   Centre the copy column and CTA, and tighten the copy-to-stage gap
   (64px -> 24px) and the stage's own padding so the section fits a
   single 375x812 screen. Shrink .et-stage padding further if it still
   doesn't fit at live measurement. */
@media (max-width: 900px) {
  .et-copy { text-align: center; }
  .et-lead { margin-left: auto; margin-right: auto; }
  .et-grid { gap: 24px; }
  .et-stage { padding: 14px; }
}

/* ===== v5 round 6 / A5: footer wordmark ink at the edges (<=720px) =====
   Solved from a live measurement at 1440px: at font-size 10.4vw the
   wordmark's rendered ink spans 83.7% of the viewport width (ink edges
   119px..1324px), i.e. ink-width ~= 8.048 x font-size. Solving
   ink = viewport - 12px (6px clearance each side) for font-size gives
   fs-mark = 12.425vw - 1.491px. This is a linear solve so the 6px
   clearance should hold across 320-430px; re-verify against a live
   screenshot and nudge the constant if the ink isn't ~6px off the edge. */
@media (max-width: 720px) {
  :root {
    --fs-mark: clamp(24px, calc(12.425vw - 1.491px), 175px);
  }
  .fx {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ===== v5 round 6 / A6: the page ends black under the sticky CTA (<=880px) =====
   Moves the 84px sticky-CTA clearance out of body (which left the page
   ending on beige) and into the footer's own bottom padding (its base
   36px, from styles.css, plus the 84px the sticky bar needs), so the
   page's last visible band is the footer's black, not beige. main.js
   toggles .is-dark on #mobileStickyCta via IntersectionObserver while
   the footer occupies the sticky bar's own ~90px footprint, swapping
   the fade from beige to black to match. Round 15 removed the bar's fade
   and .is-dark altogether: the CTA is a floating button now (end of file). */
@media (max-width: 880px) {
  body { padding-bottom: 0; }
  .footer { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* ===== v5 round 6: carousels =====
   Rho-style peek/swipe carousels, driven by assets/js/carousel.js on any
   [data-carousel] wrapper. Two instances: the Problem section's mobile
   deck (.pb-deck, cards built by problem-switcher.js) and the Solution
   bento grid (.bn-grid itself becomes the track at this width). Arrows
   (.cr-nav/.cr-prev/.cr-next) are shared, Rho spec, hidden >=901px. */

.cr-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.cr-prev,
.cr-next {
  appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--v5-ink);
  cursor: pointer;
  transition: opacity .16s ease;
}

.cr-prev svg,
.cr-next svg {
  display: block;
  width: 20px;
  height: 20px;
}

.cr-prev:disabled,
.cr-next:disabled {
  opacity: .3;
  cursor: default;
}

.cr-prev:focus-visible,
.cr-next:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (min-width: 901px) {
  .cr-nav {
    display: none;
  }
}

/* ---------- Problem: mobile deck ---------- */

.pb-deck {
  display: none;
}

@media (max-width: 900px) {
  .pb-deck {
    display: block;
    margin-top: 32px;
  }

  .pb-deck [data-carousel-track] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .pb-deck [data-carousel-track]::-webkit-scrollbar {
    display: none;
  }

  .pb-deck-card {
    flex: 0 0 92%;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--v5-r-card);
    box-shadow: var(--v5-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pb-deck-art {
    position: relative;
    height: 220px;
    display: grid;
    place-items: center;
  }

  .pb-deck-illo {
    width: auto;
    height: auto;
    max-width: 78%;
    max-height: 176px;
    object-fit: contain;
  }

  .pb-deck-panel {
    padding: 20px 24px 24px;
  }
}

/* ---------- Solution: bento carousel ---------- */

@media (max-width: 900px) {
  .bn-carousel [data-carousel-track].bn-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--v5-gutter);
    padding: 0 0 4px;
    margin-top: 48px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .bn-carousel [data-carousel-track].bn-grid::-webkit-scrollbar {
    display: none;
  }

  .bn-carousel .bn-card {
    flex: 0 0 92%;
    min-height: 0;
    scroll-snap-align: start;
  }
}

/* ===== v5 round 6: live-measured mobile fixes ===== */
@media (max-width: 900px) {
  /* grid children must be allowed to shrink or the carousel tracks widen the page */
  .pb-grid > *, .pb-deck, .bn-carousel { min-width: 0; }
  /* estimate: keep heading, copy, CTA and stage on one phone screen */
  .et .et-stage { max-height: 360px; }
}
@media (max-width: 880px) {
  /* closed menu row must not add the pill's row-gap, so logo and burger centre on the pill */
  .site-header .pill:not(.menu-open) { row-gap: 0; align-content: center; }
}
@media (max-width: 720px) {
  /* hero CTA label line box matches the sticky CTA (46.8px tall) */
  .hx .hx-actions .btn { font-size: var(--fs-5); line-height: 1.6; height: auto; min-height: 0; }
  .hx .hx-actions .btn .btn-label { line-height: 1.6; }
}

@media (max-width: 360px) {
  /* keep the one-line spots pill inside a 320px screen */
  .spots-pill { padding-left: 14px; padding-right: 14px; max-width: 100%; }
  .spots-pill .spots-label { gap: 6px; }
  .spots-pill .spots-label, .spots-pill .spots-left { letter-spacing: 0; }
}

/* ===== v5 round 10: type system ===== */
/* Header pill nav and footer text use the display face, like the logo and buttons. */
.site-header .pill-nav a,
.footer .fx-row,
.footer .fx-row a,
.footer .fx-row p,
.footer .fx-row span { font-family: var(--display); }

/* ===== v5 round 13: mobile header, menu, estimate chip, FAQ tap ===== */
@media (max-width: 880px) {
  /* One header row of the pill's full inner height (56px less its 1px
     borders), open or closed, so the logo and burger hold the same spot when
     the menu opens instead of jumping to the top corners. */
  .site-header .pill,
  .site-header .pill:not(.menu-open) { row-gap: 0; align-content: flex-start; }
  .site-header .pill-right { height: 54px; }

  /* Scrolled: the NS chip at the desktop logo size and the desktop side
     padding, so it fills the band the way the desktop chip does. The wordmark
     at the top of the page keeps the mobile size; 28px would not fit 360px. */
  .site-header .pill[data-compact="true"]:not(.menu-open) { padding: 0 16px; --fs-logo: 28px; }
  .site-header .pill-logo { transition: font-size .3s cubic-bezier(.4,0,.2,1); }
  /* chip's left edge (it overhangs the logo by .285em) lands on the pill
     padding */
  .site-header .pill[data-compact="true"]:not(.menu-open) .pill-logo { margin-left: .285em; }

  /* Menu open while scrolled: the NS chip opens back out to the full
     wordmark (the collapse, reversed) and collapses again on close. At the
     top of the page the wordmark is already showing, so nothing moves. */
  .site-header .pill.menu-open .lm-rest { max-width: 8ch; opacity: 1; }
  .site-header .pill.menu-open .lm-gap { width: .34em; }
  .site-header .pill.menu-open .pill-chip { opacity: 0; transform: scale(.9); }
  .site-header .pill.menu-open .pill-logo { margin-left: 0; }

  /* Menu: separator sits directly under the header row and spans wordmark
     edge to burger edge (v3.css's 8px margin-right cut it short); links tight;
     CTA set off from the links, with room under it. */
  .site-header .pill-nav { margin-right: 0; }
  .site-header .pill .pill-nav,
  .site-header .pill[data-compact="true"] .pill-nav { gap: 2px; }
  .site-header .pill-nav.open { margin-top: 0; padding-top: 12px; }
  .site-header .pill-nav a.pill-menu-cta { margin-top: 10px; } /* + the 2px gap = 12px */
  .site-header .pill.menu-open { padding-bottom: 20px; }
}

@media (max-width: 900px) {
  /* The stage is clipped to 360px here, so the overlay (which spans the whole
     window) centres its chip near the clipped edge. Pin the chip to the
     middle of the visible stage instead: half the stage, less the stage
     padding (14px) and the overlay's 40px inset. */
  .et .et-chip {
    position: absolute;
    left: 50%;
    top: calc(360px / 2 - 14px - 40px);
    translate: -50% -50%;
    white-space: nowrap;
  }
}

/* No grey tap flash on the question row, and no hover colour left stuck
   after a tap on touch screens. */
.fq .faq-q { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  /* muted, like a closed question (round 16); an open one stays ink via
     the more specific .is-open rule */
  .fq .faq-q:hover { color: rgba(0,0,0,.7); }
}

/* ===== v5 round 14: header off the screen edge, iPhone edge to edge =====
   iOS 26 Safari lets the page run behind its status bar and toolbar unless a
   fixed element touches that edge; then it paints a flat bar in the page
   colour instead. So nothing fixed may sit within a few px of the top or
   bottom edge, and nothing the fixed element paints itself may be what the
   visitor sees there (Safari does not sample pseudo-elements). */

/* The fixed wrapper starts 8px down; its padding carries the rest of
   --hdr-top, so the pill's own position is --hdr-top at every width. */
.site-header { top: 8px; padding-top: calc(var(--hdr-top) - 8px); }

/* Page colour behind the browser chrome and in overscroll. Safari takes it
   from body (confirmed on an iPhone: html alone did nothing), so both are
   set. main.js adds .foot-in while the footer is at the bottom of the
   screen, so the band under a black footer is black, not the page colour.
   Every section paints its own background (.pb its beige-to-white
   gradient), so body turning black shows nowhere else. */
html { background: var(--v5-beige); }
html.foot-in,
html.foot-in body { background: #000; }
/* 4px black strip on the bottom edge, shown only while the footer's black
   is already there (so it is never seen). It exists for iOS Safari, which
   colours its bottom bar from a full-width fixed element on that edge.
   Created by main.js. */
.edge-tint { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: #000; pointer-events: none; z-index: 899; }
html.foot-in .edge-tint { display: block; }

@media (max-width: 880px) {
  /* Phones: pill sits 40px down, with page showing above it. One number. */
  :root { --hdr-top: 40px; }
  /* the strip the header sits on at the top of a page: offset + pill + 14px */
  .nds-hero-bar { height: calc(var(--hdr-top) + 70px); }

  /* Open menu lifts slightly (scale from its centre). Same list as
     styles.css's mobile .pill transition, plus transform. */
  .site-header .pill {
    transition: width .52s cubic-bezier(.4,0,.2,1), padding .52s cubic-bezier(.4,0,.2,1), background .4s ease, border-color .4s ease, box-shadow .4s ease, border-radius .35s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease, transform .38s cubic-bezier(.4,0,.2,1);
  }
  .site-header .pill.menu-open { transform: scale(1.05); }

  /* Booking CTA floats: just the button, centred, clear of the bottom edge
     (round 15). No bar behind it, so nothing to recolour as the page
     scrolls under it, and nothing full-width for Safari to sample. */
  .mobile-sticky-cta {
    left: 50%;
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    padding: 0;
    background: none;
  }
  .mobile-sticky-cta .btn { box-shadow: none; }
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .site-header .pill.menu-open { transform: none; }
}

/* ===== v5 round 15: footer ends on the wordmark; floating silk header ===== */

/* The NERO SCALING wordmark is the last thing on every page: its ink sits
   3px above the page end. Measured live (Agrandir Wide at 43 to 150px): the
   line box ends .127em below the letters' lowest ink, so the bottom margin
   pulls that back and adds the 3px. The footer keeps no bottom padding of
   its own beyond the iPhone home-bar inset, where Safari reports one. */
.footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
.fx-mark { margin-bottom: calc(3px - .127em); }

@media (max-width: 880px) {
  /* The floating CTA would sit on the wordmark at the end of the page, so it
     steps aside once the footer's black reaches the bottom of the screen
     (html.foot-in, from main.js) and returns on the way back up. */
  .mobile-sticky-cta { transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s; }
  html.foot-in .mobile-sticky-cta,
  html.cta-in .mobile-sticky-cta {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .mobile-sticky-cta,
  html.foot-in .mobile-sticky-cta,
  html.cta-in .mobile-sticky-cta { transition: none; }
}

/* Schedule, terms and privacy (round 16): at the top of the page the silk
   header is the original full-width band, 68px, square, on the top edge.
   Once the page scrolls (main.js sets data-compact="true", as it does for
   the homepage pill) it eases into a floating pill like the other pages'
   header: --hdr-top down, compact-pill width, so it no longer touches the
   top edge and the page shows above it. */
.silk-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  box-shadow: none;
  transition: top .45s cubic-bezier(.4,0,.2,1), width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1), border-radius .45s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
/* Round 17: the header's own box paints no background or border, because
   iOS Safari takes its bar colour from a fixed element's own background
   and kept the band's beige after the header became a pill. The beige sits
   on ::before (under the silk canvas, which silk.js inserts later as a
   child) and the hairline on ::after (over the canvas, so it stays visible).
   Safari never samples pseudo-elements. */
.silk-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--v5-beige);
}
.silk-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border: 1px solid transparent;
  border-bottom-color: var(--v5-hair);
  border-radius: inherit;
  transition: border-color .3s ease;
}
.silk-header[data-compact="true"] {
  top: var(--hdr-top);
  width: min(960px, calc(100% - 32px));
  height: 56px;
  border-radius: 100px;
  box-shadow: 0 14px 40px rgba(0,0,0,.1);
}
.silk-header[data-compact="true"]::after { border-color: var(--v5-hair); }
/* beige top edge for the status bar, only while the band shows (main.js) */
.edge-tint-top { display: none; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--v5-beige); pointer-events: none; z-index: 999; }
.silk-header:not([data-compact="true"]) ~ .edge-tint-top { display: block; }
@media (prefers-reduced-motion: reduce) {
  .silk-header, .silk-header::after { transition: none; }
}
/* page content starts below the band */
body:has(> .silk-header) { padding-top: 68px; }

/* ===== v5 round 16: FAQ as separate boxes, closing call prompt =====
   Design after the 21st.dev "kokonutd/faq" component, rebuilt in plain
   CSS on the v5 tokens: one bordered box per question with the card radius,
   a chevron that turns over and goes cyan when open, muted question text
   that darkens when open. faq.js still runs the open/close animation. */
.fq .fq-list { display: flex; flex-direction: column; gap: 8px; }
.fq .faq-item,
.fq .faq-item:first-child {
  background: var(--v5-white);
  border: 1px solid var(--v5-hair);
  border-radius: var(--v5-r-card);
  transition: background-color .2s ease;
}
@media (hover: hover) {
  .fq .faq-item:not(.is-open):hover { background: color-mix(in srgb, var(--v5-beige) 50%, var(--v5-white)); }
}
.fq .faq-item.is-open,
.fq:not(.js-faq) .faq-item[open] { background: var(--v5-white); }
.fq .faq-q {
  padding: 18px 24px;
  color: rgba(0,0,0,.7);
  transition: color .2s ease;
}
.fq .faq-item.is-open .faq-q,
.fq:not(.js-faq) .faq-item[open] .faq-q { color: var(--v5-ink); }
.fq .faq-a { padding: 0 24px 20px; }
.fq .faq-toggle,
.fq .faq-item[open] .faq-toggle {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: transparent;
  color: var(--v5-muted);
  transition: transform .2s ease, color .2s ease;
}
.fq .faq-item.is-open .faq-toggle,
.fq:not(.js-faq) .faq-item[open] .faq-toggle {
  transform: rotate(180deg) scale(1.1);
  color: var(--cyan);
}
@media (prefers-reduced-motion: reduce) {
  .fq .faq-item, .fq .faq-q { transition: none; }
}
@media (max-width: 720px) {
  .fq .faq-q { padding: 16px 18px; }
  .fq .faq-a { padding: 0 18px 18px; }
}

/* Closing prompt: after the last question on phones; on desktop at the
   bottom of the left column, with the sticky heading stopping right above
   it at the end of the section. */
.fq-more-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-2);
  line-height: 1.25;
  color: var(--v5-ink);
}
.fq-more-sub {
  margin: 8px 0 20px;
  font-size: var(--fs-4);
  line-height: 1.6;
  color: var(--v5-muted);
}
/* Desktop (round 17): heading and block share the left column. The
   heading is pinned at 120px; the block starts at the column's halfway
   point and pins 24px under the heading once it gets there, so they meet
   halfway and then travel together. The heading's own box ends one block
   height (plus the gap) above the section end, so at the end both leave at
   the same moment. faq.js supplies --fq-title-h and --fq-more-h. */
@media (min-width: 901px) {
  .fq-grid { grid-template-areas: "side list"; align-items: stretch; }
  .fq-head {
    grid-area: side;
    align-self: start;
    position: static;
    height: calc(100% - var(--fq-more-h, 140px) - 24px);
  }
  .fq-head .v5-h2 { position: sticky; top: 120px; }
  .fq-list { grid-area: list; align-self: start; }
  .fq-more { grid-area: side; align-self: end; height: 50%; }
  .fq-more-inner { position: sticky; top: calc(120px + var(--fq-title-h, 110px) + 24px); }
}
@media (max-width: 900px) {
  .fq-more { text-align: center; }
}

/* ===== v5 round 17: FAQ list edge and question size; Solutions card spacing ===== */
/* styles.css draws a hairline above .faq-list; the boxes carry their own */
.fq .fq-list { border-top: 0; }
/* questions one step down the scale (16px, 15px on phones) */
.fq .faq-q { font-size: var(--fs-4) !important; }

/* Solutions cards: label, title and body text evenly 12px apart, and at
   least 24px between the text and the gradient box below it. */
.bn-copy { margin-top: 12px; margin-bottom: 24px; }