/* TCScales home v5 (2026-10-11): a premium pass over v4. Loads after v4.css and only overrides it.
   Same white ground, same ink + logo blue, same copy. What changes: body face, floating nav,
   pill buttons with a nested icon, nested "double bezel" frames, soft shadows, one easing family. */
.v5{
  --sans:"Geist", "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, Consolas, monospace;
  --ease:cubic-bezier(.23,1,.32,1);          /* entering, pressing */
  --ease-move:cubic-bezier(.32,.72,0,1);     /* things that travel */
  --r:2rem; --pad:.5rem;
  --shell:rgba(14,17,22,.04); --ring:rgba(14,17,22,.07);
  --lift:0 28px 56px -34px rgba(30,58,138,.34), 0 2px 6px -2px rgba(14,17,22,.05);
  caret-color:var(--blue);
}
html{ interpolate-size:allow-keywords; }
.v5 ::selection{ background:var(--blue); color:#fff; }
.v5 .btn, .v5 .nav a, .v5 .footer, .v5 .footer a, .v5 .footer h5, .v5 .footer p{ font-family:var(--sans); }
.v5 :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
.v5 .on-dark :focus-visible, .v5 .how :focus-visible{ outline-color:#fff; }

/* ── LABELS: small pill badge in place of the mono caps line ── */
.v5 .lbl{ display:inline-block; padding:.42rem .85rem; border-radius:999px; background:rgba(30,58,138,.07); color:var(--blue); font:500 .68rem/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.v5 .how .lbl, .v5 .on-dark .lbl{ background:rgba(255,255,255,.12); color:#fff; }
.v5 .marq__lbl{ display:table; margin-inline:auto; }
.v5 .how__tag{ color:rgba(255,255,255,.7); font-family:var(--sans); }

/* ── NESTED ICON: the arrow sits in its own circle, flush to the button's inner edge ── */
.v5 .ico{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:2rem; height:2rem; border-radius:50%; background:rgba(255,255,255,.16); transition:transform .5s var(--ease-move), background .2s ease; }
.v5 .ico svg{ width:14px; height:14px; }

/* ── NAV: a floating pill, detached from the top edge ── */
.v5 .nav, html.dark .v5 .nav{ top:14px; background:transparent; border-bottom:0; box-shadow:none; pointer-events:none; transition:transform .55s var(--ease-move); }
.v5 .nav.scrolled{ box-shadow:none; }
.v5 .nav.nav--hidden{ transform:translateY(calc(-100% - 28px)); }
.v5 .nav .container{ max-width:1240px; padding-inline:var(--gut); }
.v5 .nav-inner{ position:relative; height:66px; padding:0 .55rem 0 1.5rem; border-radius:999px; pointer-events:auto; }
.v5 .nav-inner::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); box-shadow:inset 0 0 0 1px rgba(14,17,22,.07), 0 18px 40px -22px rgba(14,17,22,.28); transition:box-shadow .4s ease; }
.v5 .nav-logo, .v5 .nav-links, .v5 .nav-actions{ position:relative; z-index:2; }
.v5 .nav-links a{ font-size:.98rem; transition:color .2s ease; }
.v5 .nav .btn-primary{ height:50px; padding:0 .5rem 0 1.25rem; gap:.75rem; border-radius:999px; font-weight:600; transition:background .2s ease, transform .16s var(--ease); }
.v5 .nav .btn-primary:hover{ transform:none; box-shadow:none; }
.v5 .nav .btn-primary:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .v5 .btn:hover .ico, .v5 .audit button:hover .ico, .v5 .line-btn:hover .ico, .v5 .proof__link:hover .ico{ transform:translate(2px,-2px) scale(1.06); }
}
@media (max-width:768px){
  .v5 .nav{ top:10px; }
  .v5 .nav .container{ padding-inline:.7rem; }
  .v5 .nav-inner{ height:58px; padding:0 .4rem 0 1.1rem; }
  .v5 .nav-actions .btn-primary{ height:42px; padding:0 .35rem 0 .95rem; font-size:.8rem; gap:.5rem; }
  .v5 .nav-actions .btn-primary .ico{ width:1.7rem; height:1.7rem; }
  .v5 .nav-hamburger{ min-width:42px; min-height:42px; }
  .v5 .nav-hamburger span{ transition:transform .45s var(--ease-move), opacity .2s ease; }
  /* menu: a full-screen frosted sheet; links rise in one after another */
  .v5 .nav-links, html.dark .v5 .nav-links{ position:fixed; inset:0; top:0; z-index:1; max-height:none; justify-content:flex-start; align-items:stretch; padding:7rem 1.6rem 2rem; background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px); border-top:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility 0s linear .35s; }
  .v5 .nav.mobile-open .nav-links{ max-height:none; opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s ease, visibility 0s; }
  .v5 .nav-links li{ border-bottom:1px solid var(--hair); opacity:0; transform:translateY(22px); transition:opacity .3s ease, transform .3s ease; }
  .v5 .nav.mobile-open .nav-links li{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .7s var(--ease-move); }
  .v5 .nav.mobile-open .nav-links li:nth-child(1){ transition-delay:.06s; }
  .v5 .nav.mobile-open .nav-links li:nth-child(2){ transition-delay:.11s; }
  .v5 .nav.mobile-open .nav-links li:nth-child(3){ transition-delay:.16s; }
  .v5 .nav.mobile-open .nav-links li:nth-child(4){ transition-delay:.21s; }
  .v5 .nav.mobile-open .nav-links li:nth-child(5){ transition-delay:.26s; }
  .v5 .nav-links a, html.dark .v5 .nav-links a{ padding:1.15rem 0; font:500 2rem/1.1 var(--serif); letter-spacing:-.02em; color:var(--ink); background:none; }
  .v5 .nav-links a:hover, .v5 .nav-links a.active{ background:none; color:var(--blue); }
  .v5 .nav-links .nav-mobile-cta{ border-bottom:0; margin-top:1.6rem; }
  .v5 .nav-mobile-cta a{ display:flex; align-items:center; justify-content:center; height:58px; padding:0; border-radius:999px; background:var(--blue); color:#fff !important; font:600 1rem var(--sans); letter-spacing:0; }
  html:has(.v5 .nav.mobile-open){ overflow:hidden; }
}

/* ── AUDIT FORM: field and button nested in one tray ── */
.v5 .audit{ gap:.4rem; padding:.4rem; border-radius:999px; background:var(--shell); box-shadow:inset 0 0 0 1px var(--ring); }
.v5 .audit input{ height:58px; padding:0 1.4rem; border:0; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgba(14,17,22,.1), 0 1px 2px rgba(14,17,22,.04); font-family:var(--sans); transition:box-shadow .2s ease; }
.v5 .audit input::placeholder{ color:#6B7280; }
.v5 .audit input:focus{ box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(30,58,138,.12); }
.v5 .audit input:focus-visible{ outline:0; }
.v5 .audit button{ display:inline-flex; align-items:center; gap:.8rem; height:58px; padding:0 .55rem 0 1.45rem; border-radius:999px; font-family:var(--sans); transition:background .2s ease, transform .16s var(--ease); }
.v5 .audit button:hover{ transform:none; }
.v5 .audit button:active{ transform:scale(.97); }
.v5 .audit-note{ padding-left:1.4rem; }
.v5 .close.on-dark .audit{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.v5 .close.on-dark .audit input{ box-shadow:none; }
.v5 .close.on-dark .audit button .ico{ background:rgba(10,18,48,.09); }
@media (max-width:560px){
  .v5 .audit{ border-radius:1.9rem; }
  .v5 .audit input, .v5 .audit button{ border-radius:1.5rem; }
  .v5 .audit button{ justify-content:space-between; padding-left:1.4rem; }
  .v5 .audit-note{ padding-left:.4rem; }
}

/* ── SECONDARY BUTTONS ── */
.v5 .line-btn{ height:52px; gap:.75rem; padding:0 .5rem 0 1.25rem; border:0; box-shadow:inset 0 0 0 1.5px var(--ink); font-family:var(--sans); transition:background .25s ease, color .25s ease, transform .16s var(--ease); }
.v5 .line-btn.lead-ico{ padding:0 1.25rem 0 .5rem; }
.v5 .line-btn:active{ transform:scale(.97); }
.v5 .line-btn .ico{ background:rgba(14,17,22,.07); }
.v5 .line-btn:hover .ico{ background:rgba(255,255,255,.16); }
.v5 .line-btn .ico svg, .v5 .fnd__ctas .line-btn .ico svg{ width:13px; height:13px; }
.v5 .proof__link{ display:inline-flex; align-items:center; gap:.7rem; padding:.35rem .35rem .35rem 1.05rem; border-radius:999px; background:rgba(30,58,138,.07); transition:background .2s ease; }
.v5 .proof__link .ico{ width:1.8rem; height:1.8rem; background:var(--blue); color:#fff; }
.v5 .proof__top{ align-items:center; }

/* ── DOUBLE BEZEL: an outer tray with a hairline, the real surface set inside it on a tighter curve ── */
.v5 .bezel{ padding:var(--pad); border-radius:var(--r); background:var(--shell); box-shadow:inset 0 0 0 1px var(--ring); }
.v5 .bezel > *{ border-radius:calc(var(--r) - var(--pad)); }

/* phone on the blue section: a soft outer ring */
.v5 .how .phone{ box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 0 0 11px rgba(255,255,255,.07), 0 50px 90px -30px rgba(3,8,30,.75); }

/* guarantee chart in a tray */
.v5 .xb__shell{ display:flex; min-height:0; }
.v5 .xb__core{ flex:1; display:flex; min-height:0; padding:1.5rem 1.7rem 1rem; background:#fff; box-shadow:var(--lift); }
.v5 .xb__chart{ flex:1; }
@media (max-width:760px){ .v5 .xb__shell{ order:2; } .v5 .xb__core{ padding:1rem 1rem .7rem; } }

/* ── PRICE: uneven grid. One blue card carries the price; three white cards carry the terms ── */
.v5 .price{ background:#EEF2FA; }
.v5 .price h2{ font-size:clamp(2.2rem,4.6vw,4rem); line-height:1; margin-top:1rem; }
.v5 .bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.9rem; margin-top:clamp(2rem,4vw,3.2rem); }
.v5 .bz{ grid-column:8 / 13; display:flex; }
.v5 .bz__in{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem; padding:clamp(1.4rem,2.4vw,2.2rem); background:#fff; box-shadow:var(--lift); }
.v5 .bz h3{ font-size:clamp(1.5rem,2.2vw,2rem); line-height:1.08; }
.v5 .bz p{ font-size:1.02rem; max-width:46ch; }
.v5 .bz--lead{ grid-column:1 / 8; grid-row:1 / 3; }
.v5 .bz--lead .bz__in{ background:var(--blue); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -30px rgba(30,58,138,.6); padding:clamp(1.6rem,3.4vw,3.2rem); min-height:clamp(300px,34vw,440px); }
.v5 .bz--lead .price__line{ margin:0; max-width:14em; font:500 clamp(1.9rem,3.7vw,3.5rem)/1.08 var(--serif); letter-spacing:-.025em; color:#fff; text-wrap:balance; }
.v5 .bz--lead .price__note{ margin:0; max-width:40ch; font-size:1rem; color:rgba(255,255,255,.82); }
.v5 .bz--wide{ grid-column:1 / 13; }
.v5 .bz--wide .bz__in{ flex-direction:row; align-items:baseline; gap:1rem 3rem; }
.v5 .bz--wide h3{ flex:0 0 40%; }
@media (max-width:860px){
  .v5 .bz, .v5 .bz--lead, .v5 .bz--wide{ grid-column:1 / -1; grid-row:auto; }
  .v5 .bz--lead .bz__in{ min-height:0; }
  .v5 .bz--wide .bz__in{ flex-direction:column; }
  .v5 .bz--wide h3{ flex:none; }
}

/* ── FOUNDER ── */
.v5 .fnd__grid > .bezel{ box-shadow:inset 0 0 0 1px var(--ring), var(--lift); }
@media (max-width:860px){ .v5 .fnd__grid > .bezel{ max-width:420px; } .v5 .fnd__img{ max-width:none; } }

/* ── FAQ: heading holds on the left, questions sit in a tray on the right ── */
.v5 .faq__grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:2rem clamp(2rem,5vw,5rem); align-items:start; }
.v5 .faq__list{ margin-top:0; max-width:none; padding:.4rem clamp(1.2rem,2.4vw,2.2rem); background:#fff; box-shadow:var(--lift); }
.v5 .faq__list details:first-child{ border-top:0; }
.v5 .faq__list details:last-child{ border-bottom:0; }
.v5 .faq__list summary{ align-items:center; padding:1.25rem 0; transition:color .2s ease; }
.v5 .faq__list summary::after{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:50%; background:rgba(30,58,138,.07); font:400 1.3rem/1 var(--sans); padding-bottom:.08em; box-sizing:border-box; transition:transform .5s var(--ease-move), background .2s ease, color .2s ease; }
.v5 .faq__list details[open] summary::after{ background:var(--blue); color:#fff; }
.v5 .faq__list details::details-content{ block-size:0; overflow:hidden; transition:block-size .45s var(--ease-move), content-visibility .45s allow-discrete; }
.v5 .faq__list details[open]::details-content{ block-size:auto; }
@media (hover:hover) and (pointer:fine){ .v5 .faq__list summary:hover{ color:var(--blue); } }
@media (min-width:901px){ .v5 .faq__head{ position:sticky; top:120px; } }
@media (max-width:900px){ .v5 .faq__grid{ grid-template-columns:1fr; } }

/* ── CLOSE: the navy block becomes an island with room around it ── */
.v5 .close.on-dark{ margin:clamp(.6rem,1.4vw,1.4rem); border-radius:var(--r); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 40px 80px -40px rgba(10,18,48,.6); }

/* ── ENTRANCE: used on three blocks only (price cards, founder photo, questions). Everything is visible without it. ── */
.rv-ready .v5 [data-in]{ opacity:0; transform:translateY(18px); filter:blur(6px); transition:opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay:calc(var(--i, 0) * 80ms); }
.rv-ready .v5 [data-in].is-in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){
  .v5 .ico, .v5 .nav, .v5 .nav-links li, .v5 .faq__list summary::after{ transition-duration:.01s; }
  .v5 .faq__list details::details-content{ transition:none; }
}

/* hero colour runs up behind the floating nav, so the pill sits on the field and not on a white band */
.v5 .hero{ margin-top:-66px; padding-top:calc(66px + clamp(48px,7vw,96px))!important; }
@media (max-width:768px){ .v5 .hero{ margin-top:-58px; padding-top:calc(58px + 44px)!important; } }

/* proof numbers: the tight tracking lets a round last digit (the 0 in 570) hang past the clipping box; give it room on the right */
.proof__big{ padding-right:.12em; }
