/* ============================================================================
   /  (homepage) — "The Lit Vitrine" layout
   ----------------------------------------------------------------------------
   STRUCTURE and COPY come from /preview-b-final. This file carries only the
   rules that page's markup actually uses: the nav, footer, cookie banner and
   account menu are rendered by inject.js and already styled by styles.css, so
   every shell selector is filtered out here rather than duplicated.

   SCOPING: every rule is prefixed `body.home-v2`. Class names like .hero,
   .section, .btn, .faq-item and .lead already exist in the global styles.css
   for other pages; the body-class prefix outranks those (0,2,x vs 0,1,x)
   without editing them. Same pattern as pricing.css.

   TOKENS: the preview palette is declared on body.home-v2 rather than :root,
   so it cannot leak onto any other page. Custom properties inherit, so every
   descendant rule below resolves against it.
   ========================================================================== */

body.home-v2 {
  --ink:        #16140f;   /* warm near-black, body text on light */
  --teal:       #0d5c63;   /* Vitrine Teal — framing color for dark fields */
  --teal-deep:  #0a4a50;   /* teal hover fill */
  --teal-dark:  #073338;   /* deepest section ground */
  --coral:      #ff7a59;   /* Signal Coral — the single accent */
  --coral-deep: #f2613f;   /* coral hover/pressed */
  /* Signal Coral measures 2.99:1 as text on the teal field, a hair under the 3:1
     large-text bar, so coral TEXT on a dark field uses this one step lighter
     (3.45:1 on teal, 6.8:1 on ink). Coral FILLS still use --coral: contrast there
     is carried by the ink text sitting on top of it. */
  --coral-light:#ff8f70;
  --cream:      #f1ede3;   /* reading color on dark fields */
  --paper:      #f7f5f0;   /* light-field background + card surface */
  --paper-line: rgba(22,20,15,.10);
  --dim-on-dark:rgba(244,241,232,.78);
  --dim:        #6d6452;

  /* state colors — feedback only, never decorative (per DESIGN.md).
     These were declared as `--cancel: var(--cancel)`, which is a self-reference:
     the spec makes such a declaration invalid at computed-value time, so every
     `color: var(--cancel)` in this sheet fell back to `inherit` and every
     `background: var(--validate)` to transparent. Error text across the preview
     (upload failures, verify verdicts, the account danger zone) rendered in
     plain ink and read as ordinary copy. Literal values, per DESIGN.md. */
  --cancel:     #8a2a1f;   /* invalid / error / destructive */
  --validate:   #2f5d3d;   /* verified / success */

  /* Lit-vitrine type system: one sans, three jobs -- Montserrat ExtraBold/Bold for
     display, the same face at 500/600 for body, mono for artifact strings. */
  --display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --sans:  'Montserrat', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --col: clamp(20rem, 92vw, 74rem);

  /* measured heights of the two fixed bands above the fold, so the hero can size
     itself to "hero + trust strip = one viewport" without magic numbers */
  --nav: 77px;
  --strip: 134px;
  --trust-gutter: clamp(26px, 3vw, 44px);

  /* spacing scale from DESIGN.md — section furniture uses these, never ad-hoc px */
  --s-xs:  4px;
  --s-sm:  8px;
  --s-md:  16px;
  --s-lg:  28px;
  --s-xl:  44px;
  --s-2xl: 76px;
  --s-3xl: 96px;

  --sh-1: 0 1px 2px rgba(7,51,56,.06), 0 2px 6px rgba(7,51,56,.05);
  --sh-2: 0 2px 4px rgba(7,51,56,.05), 0 8px 22px rgba(7,51,56,.08);
  --ring: 0 0 0 3px rgba(13,92,99,.18);

  /* fractal noise, ~tiny tile, used as overlay on dark fields */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* premium elevation: paired shadow (cast) + ambient, ink-tinted */
  /* top highlight edge (light catching the upper rim) */

  --coral-face:    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%, rgba(140,44,20,.16));
  --coral-face-hi: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%, rgba(140,44,20,.16));
  --coral-edge:    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,38,18,.24);
  --coral-lift:    0 1px 2px rgba(22,20,15,.2), 0 8px 18px -6px rgba(191,64,36,.55);
  --coral-lift-hi: 0 2px 4px rgba(22,20,15,.22), 0 14px 26px -8px rgba(191,64,36,.6);
  --coral-press:   inset 0 1px 3px rgba(120,38,18,.32), 0 1px 2px rgba(22,20,15,.2);
}

body.home-v2 *::before,
body.home-v2 *::after { box-sizing: border-box; }
body.home-v2 { margin: 0; padding: 0; }
body.home-v2 {
  overflow-x: clip;
  font-family: var(--sans);
  /* The pages carry lang="bg", which switches Montserrat's Cyrillic to the
     Bulgarian locl forms: d -> g-shape, i -> u, p -> n, t -> m, sh -> u-shape.
     Those are the typographically correct Bulgarian shapes, but at display
     sizes they read as handwriting rather than as a printed record, which is
     the wrong voice for a certificate. Force the upright forms site-wide.
     Keep lang="bg" -- it still drives hyphenation, spellcheck and SEO. */
  font-feature-settings: 'locl' 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.home-v2::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035;
  mix-blend-mode: multiply;
}
/* The preview lifted every direct child of body above the grain overlay with
   `body > *`. Scoped here that also hit the shell elements inject.js appends to
   body — the top promo banner and the cookie banner — overriding their
   `position: fixed` with `relative`, so both dropped out of the viewport and
   rendered at the very bottom of the page while the body still reserved 56px
   at the top for a banner that was no longer there. Only the page's own
   content needs lifting. */
body.home-v2 > main { position: relative; z-index: 1; }
body.home-v2 img,
body.home-v2 svg,
body.home-v2 iframe { display: block; max-width: 100%; }
body.home-v2 a { color: inherit; text-decoration: none; }
body.home-v2 button { font: inherit; color: inherit; cursor: pointer; }
body.home-v2 [hidden] { display: none !important; }
body.home-v2 :where(a,
body.home-v2 button,
body.home-v2 summary,
body.home-v2 [tabindex]):focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(13,92,99,.45); border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
body.home-v2 *::before,
body.home-v2 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body.home-v2 .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.home-v2 .col { width: var(--col); margin-inline: auto; padding-inline: 28px; }
body.home-v2 .section { padding: clamp(56px, 7vh, 96px) 0; }
body.home-v2 .h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
body.home-v2 .eyebrow { font-family: var(--sans); font-weight: 600; font-size: .9rem; letter-spacing: .01em; color: var(--teal); display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s-md); }
body.home-v2 .eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--teal); }
body.home-v2 .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .95rem; border-radius: 11px; border: 0; transition: transform .18s var(--ease), background .18s var(--ease); }
body.home-v2 .btn-lime { background: var(--coral); color: var(--ink); padding: 16px 30px; }
body.home-v2 .btn-lime:hover { transform: translateY(-2px); background: var(--coral-deep); }
body.home-v2 .btn-outline-light { border: 1.5px solid rgba(255,255,255,.32); color: var(--cream); padding: 15px 24px; background: transparent; }
body.home-v2 .btn-outline-light:hover { background: rgba(255,255,255,.08); }
@media (max-width: 560px) {
body.home-v2 .hero-btns .btn,
body.home-v2 .start-cta .btn,
body.home-v2 .final-btns .btn {
    display: block; width: 100%; text-align: center;
  }
body.home-v2 .hero-btns .btn span,
body.home-v2 .start-cta .btn span,
body.home-v2 .final-btns .btn span { display: inline; }
}
body.home-v2 .hero { position: relative; background: var(--teal); overflow: hidden; }
@media (min-width: 941px) {
body.home-v2 .hero { min-height: calc(100svh - var(--nav) - var(--strip)); display: flex; align-items: center; }
body.home-v2 .hero > .col { width: var(--col); }
body.home-v2 .hero-grid { padding-block: 8px; }
body.home-v2 .hero-doc { width: min(100%, 700px, calc((100svh - var(--nav) - var(--strip) - 48px) * 0.72)); }
body.home-v2 .hero-copy { padding: clamp(8px, 1.6vh, 40px) 0; }
body.home-v2 .hero h1 { margin-bottom: clamp(12px, 2.4vh, 28px); }
body.home-v2 .hero .lead { margin-bottom: clamp(10px, 1.4vh, 16px); }
body.home-v2 .hero-tag { margin-bottom: clamp(12px, 2vh, 26px); }
}
body.home-v2 .hero-grid { display: grid; grid-template-columns: .92fr 1.18fr; gap: 40px; align-items: center; padding-top: clamp(20px, 4vh, 48px); width: 100%; }
@media (max-width: 940px) {
body.home-v2 .hero-grid { grid-template-columns: 1fr; align-items: start; gap: 28px; }
}
@media (min-width: 941px) and (max-width: 1200px) {
body.home-v2 .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 32px; }
}
body.home-v2 .hero-copy { padding: clamp(28px, 3vh, 48px) 0; }
body.home-v2 .hero-tag { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,122,89,.14); color: var(--cream); border: 1px solid rgba(255,122,89,.4); font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .005em; padding: 9px 16px; border-radius: 100px; margin-bottom: 26px; }
body.home-v2 .hero-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
body.home-v2 .hero h1 { font-family: var(--display); font-weight: 700; color: var(--cream); font-size: clamp(2.7rem, 5.8vw, 5rem); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 28px; text-wrap: balance; }
body.home-v2 .hero h1 em { font-style: normal; font-weight: 600; color: var(--coral-light); }
body.home-v2 .hero h1 .u { color: var(--coral-light); }
body.home-v2 .hero .lead { color: var(--dim-on-dark); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 33rem; line-height: 1.62; margin: 0 0 8px; font-weight: 400; }
body.home-v2 .hero-formats { max-width: 33rem; margin: 0 0 28px; font-size: .9rem; line-height: 1.55; color: var(--dim-on-dark); }
body.home-v2 .hero-btns { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 33rem; }
body.home-v2 .hero-btns .btn { justify-content: center; }
body.home-v2 .hero-fine {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(244,241,232,.14);
}
body.home-v2 .hero-price { margin: 0; font-size: 13px; color: rgba(244,241,232,.82); }
body.home-v2 .hero-price b { color: var(--cream); font-weight: 700; }
@media (max-width: 560px) {
body.home-v2 .hero-tag { align-items: flex-start; border-radius: 12px; font-size: 12px; padding: 8px 13px; }
body.home-v2 .hero-tag::before { margin-top: 6px; }
}
body.home-v2 .hero-doc-col { position: relative; display: grid; place-items: center; padding: clamp(16px, 3vh, 36px) 0; perspective: 1300px; }
body.home-v2 .hero-doc-col { animation: doc-up .9s var(--ease) both; }
@keyframes doc-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
body.home-v2 .hero-doc {
  --rx: 4deg; --ry: -9deg; --lift: -6px;
  --sx: -8px; --sy: 24px; --glare-x: 50%; --glare-y: 50%; --glare-o: 0;
  position: relative; width: min(100%, 700px); margin: 0;
  border-radius: 14px; background: var(--paper);
  box-shadow:
    var(--sx) 6px 10px rgba(0,0,0,.10),
    var(--sx) var(--sy) clamp(40px, calc(40px + var(--sy)), 110px) rgba(0,0,0,.42);
  /* Resting transform is a plain 2D translate, NOT rotateX/rotateY at 0deg.
     Chromium rasterizes any layer carrying a 3D rotation at 1 device px per CSS
     px and then upscales it to the display, so on a 2x screen the certificate
     was being drawn into a 395px texture and blown up to 790px — measured 3.7x
     less detail than the same image untransformed (510 vs 1875 gradient energy;
     at 1x, where there is no upscale, the two are identical). The angle made no
     difference: 2deg cost exactly as much as 14deg, because the penalty is
     triggered by the presence of a 3D rotation, not its magnitude.
     So the document renders flat and full-resolution until the pointer actually
     engages it; .is-tilting below opts back into 3D for the duration. */
  transform: translateY(var(--lift));
  border: 1px solid rgba(0,0,0,.06); padding: 13px; overflow: visible;
}
body.home-v2 .hero-doc.is-tilting {
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
}
@media (max-width: 940px) {
body.home-v2 .hero-doc { width: min(88%, 460px); }
}
body.home-v2 .hero-cert { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid rgba(0,0,0,.05); }
body.home-v2 .hero-doc.is-tilting .hero-cert { transform: translateZ(1px); }
@media (min-width: 941px) {
body.home-v2 .hero-copy { padding: 0; }
body.home-v2 .hero-grid { padding-top: clamp(16px, 2.4vh, 32px); }
body.home-v2 .hero h1 { font-size: clamp(2.1rem, 3.4vw, 3.15rem); margin-bottom: 14px; line-height: 1.04; }
body.home-v2 .hero-tag { margin-bottom: 14px; }
body.home-v2 .hero .lead { margin-bottom: 7px; font-size: 1.02rem; line-height: 1.52; }
body.home-v2 .hero-formats { margin-bottom: 26px; font-size: .86rem; }
body.home-v2 .hero-btns .btn { padding-block: 13px; }
body.home-v2 .hero-doc-col { padding: 0; }
body.home-v2 .hero-doc { width: auto; max-width: 420px; max-height: calc(100svh - var(--nav) - var(--strip) - 96px); }
body.home-v2 .hero-cert { width: auto; max-width: 100%; max-height: calc(100svh - var(--nav) - var(--strip) - 122px); }
}
@media (min-width: 941px) and (max-height: 680px) {
body.home-v2 .hero { min-height: 0; }
}
body.home-v2 .hero-doc::after {
  content: ''; position: absolute; inset: 13px; border-radius: 8px; pointer-events: none; z-index: 4;
  background: radial-gradient(60% 60% at var(--glare-x) var(--glare-y), rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  opacity: var(--glare-o); mix-blend-mode: soft-light; transition: opacity .3s var(--ease);
}
body.home-v2 .hero-sheen {
  position: absolute; inset: 12px; border-radius: 8px; overflow: hidden; pointer-events: none; z-index: 3;
}
body.home-v2 .hero-sheen::before {
  content: ''; position: absolute; top: -60%; left: -30%; width: 38%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55) 45%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.55) 55%, transparent);
  transform: rotate(8deg) translateX(0);
  animation: sheen 6.5s ease-in-out 1.4s infinite;
}
@keyframes sheen {
  0%   { transform: rotate(8deg) translateX(-40%); opacity: 0; }
  8%   { opacity: 1; }
  22%  { transform: rotate(8deg) translateX(420%); opacity: 0; }
  100% { transform: rotate(8deg) translateX(420%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body.home-v2 .hero-sheen { display: none; }
}
body.home-v2 .hero-seal {
  position: absolute; z-index: 5; top: -22px; right: -22px;
  width: clamp(76px, 18%, 96px); aspect-ratio: 1;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.4));
  /* translateZ only reads inside the preserve-3d context, which now exists only
     while tilting. 1300px perspective magnifies a 70px lift by 1300/(1300-70) =
     1.0569, so the resting state substitutes that exact scale — otherwise the
     seal visibly pops the moment the pointer enters. */
  transform: rotate(-8deg) scale(1.0569);
  animation: seal-in .6s var(--ease) .5s both;
}
@keyframes seal-in { from { opacity: 0; transform: rotate(-8deg) translateZ(70px) scale(.4); } to { opacity: 1; transform: rotate(-8deg) translateZ(70px) scale(1); } }
body.home-v2 .hero-doc.is-tilting .hero-seal { transform: rotate(-8deg) translateZ(70px); }
@media (max-width: 940px) {
body.home-v2 .hero-seal { top: -16px; right: -10px; }
}
body.home-v2 .trust { background: var(--ink); color: var(--cream); padding-bottom: 4px; }
body.home-v2 .trust-inner {
  display: grid; grid-template-columns: 21.2fr 28fr 23.6fr 27.2fr;
  column-gap: var(--trust-gutter);
  padding-top: 29px;
  padding-bottom: 15px;
}
body.home-v2 .trust-fact {
  display: grid; grid-template-columns: auto 1fr; column-gap: 11px;
  align-content: center; align-items: start; position: relative;
}
body.home-v2 .trust-fact + .trust-fact::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--trust-gutter) / -2);
  width: 1px; background: rgba(244,241,232,.14);
}
body.home-v2 .trust-fact__ico {
  width: 31px; height: 31px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,122,89,.14); color: var(--coral);
  /* optical: centre the 31px tile on the ~19px title line, not on its top edge */
  margin-top: -6px;
}
body.home-v2 .trust-fact__ico svg { width: 17px; height: 17px; }
body.home-v2 .trust-fact__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.home-v2 .trust-fact__title {
  font-family: var(--sans); font-weight: 700; font-size: .88rem; line-height: 1.2;
  color: var(--cream); letter-spacing: -.01em;
}
body.home-v2 .trust-fact__sub { font-size: .78rem; line-height: 1.38; color: rgba(244,241,232,.72); text-wrap: pretty; }
@media (max-width: 900px) {
body.home-v2 .trust-inner { grid-template-columns: repeat(2, 1fr); row-gap: 22px; padding-top: 30px; padding-bottom: 22px; }
body.home-v2 .trust-fact:nth-child(odd)::before { display: none; }
}
@media (max-width: 480px) {
body.home-v2 .trust-inner { grid-template-columns: 1fr; row-gap: 18px; }
body.home-v2 .trust-fact::before { display: none; }
}
@media (min-width: 901px) {
@supports (grid-template-rows: subgrid) {
body.home-v2 .trust-inner { grid-template-rows: auto auto; row-gap: 3px; }
body.home-v2 .trust-fact { grid-row: span 2; grid-template-rows: subgrid; }
body.home-v2 .trust-fact__ico { grid-area: 1 / 1; }
body.home-v2 .trust-fact__body { display: contents; }
body.home-v2 .trust-fact__title { grid-area: 1 / 2; min-width: 0; }
body.home-v2 .trust-fact__sub { grid-area: 2 / 2; min-width: 0; }
}
}
body.home-v2 .h2 em { font-style: normal; font-weight: 600; color: var(--teal); }
body.home-v2 .get .h2 em,
body.home-v2 .audience .h2 em { color: var(--coral-light); }
body.home-v2 .field-edge { border-top: 1px solid var(--paper-line); }
body.home-v2 .section-lead { max-width: 62ch; margin: var(--s-lg) 0 0; font-size: 1.12rem; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
body.home-v2 .note {
  max-width: 76ch; margin: var(--s-lg) 0 0; padding-top: var(--s-md);
  border-top: 1px solid var(--paper-line);
  font-size: .95rem; line-height: 1.55; color: var(--dim); text-wrap: pretty;
}
body.home-v2 .note--dark { border-top-color: rgba(244,241,232,.18); color: var(--dim-on-dark); }
body.home-v2 .mono-inline { font-family: var(--mono); font-weight: 500; font-size: .88em; letter-spacing: .03em; }
body.home-v2 .start { background: var(--paper); }
body.home-v2 .start-list {
  list-style: none; margin: var(--s-xl) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0 clamp(28px, 5vw, 76px);
  border-bottom: 1px solid var(--paper-line);
}
@media (min-width: 780px) {
body.home-v2 .start-list { grid-template-columns: 1fr 1fr; }
}
body.home-v2 .start-item { border-top: 1px solid var(--paper-line); padding-block: var(--s-md); }
body.home-v2 .start-item__h {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.22rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
}
body.home-v2 .start-item__p { display: block; margin-top: var(--s-xs); font-size: .95rem; line-height: 1.45; color: var(--dim); }
body.home-v2 .start-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md) var(--s-lg); margin-top: var(--s-xl); }
body.home-v2 .start-cta__note { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--dim); max-width: 34ch; }
body.home-v2 .get { background: var(--teal); color: var(--cream); }
body.home-v2 .get .eyebrow { color: var(--cream); }
body.home-v2 .get .eyebrow::before { background: var(--coral); }
body.home-v2 .get .h2 { color: var(--cream); }
body.home-v2 .get .section-lead { color: var(--dim-on-dark); }
body.home-v2 .bind { margin-top: var(--s-xl); display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) {
body.home-v2 .bind { grid-template-columns: repeat(3, 1fr); }
}
body.home-v2 .bind--bare { border-top: 1px solid rgba(244,241,232,.22); }
body.home-v2 .bind__cell { padding: var(--s-lg) 0; border-top: 1px solid rgba(244,241,232,.16); }
body.home-v2 .bind__cell:first-child { border-top: 0; }
@media (min-width: 860px) {
body.home-v2 .bind__cell {
    border-top: 0; border-left: 1px solid rgba(244,241,232,.16);
    padding: var(--s-lg) clamp(22px, 2.4vw, 34px) var(--s-md);
  }
body.home-v2 .bind__cell:first-child { border-left: 0; padding-left: 0; }
body.home-v2 .bind__cell:last-child { padding-right: 0; }
}
body.home-v2 .bind__n {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--cream);
  margin-bottom: var(--s-md);
}
body.home-v2 .bind__n::after { content: ''; width: 22px; height: 1px; background: var(--coral); opacity: .55; }
body.home-v2 .bind__h { font-family: var(--display); font-weight: 700; font-size: 1.42rem; line-height: 1.16; letter-spacing: -.01em; color: var(--cream); margin: 0 0 var(--s-sm); }
body.home-v2 .bind__p { margin: 0; font-size: 1rem; line-height: 1.56; color: rgba(244,241,232,.82); text-wrap: pretty; }
body.home-v2 .deliver {
  margin-top: var(--s-lg); padding: var(--s-md) var(--s-lg); border-radius: 12px;
  background: rgba(7,51,56,.42); border: 1px solid rgba(244,241,232,.14);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-sm) var(--s-md);
}
body.home-v2 .deliver__label {
  font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: -.01em;
  color: var(--cream); flex: none;
}
body.home-v2 .deliver__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
body.home-v2 .deliver__list li { font-size: .96rem; font-weight: 500; color: rgba(244,241,232,.88); }
body.home-v2 .deliver__list li + li::before { content: '·'; color: rgba(244,241,232,.45); padding: 0 9px; font-weight: 700; }
@media (max-width: 620px) {
body.home-v2 .deliver { flex-direction: column; align-items: flex-start; gap: 12px; }
body.home-v2 .deliver__list { flex-direction: column; gap: 7px; }
body.home-v2 .deliver__list li + li::before { content: none; padding: 0; }
}
body.home-v2 .honest {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--cream);
  padding: clamp(64px, 12vh, 200px) 0;
}
body.home-v2 .honest::before {   /* faint cobalt glow from below, gives the dark room depth */
  content: ''; position: absolute; left: 50%; bottom: -30%; width: 120%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, oklch(0.52 0.09 195 / 0.30), transparent 65%);
  pointer-events: none;
}
body.home-v2 .honest-inner { position: relative; z-index: 1; max-width: 24ch; margin-inline: auto; text-align: center; }
@media (min-width: 700px) {
body.home-v2 .honest-inner { max-width: none; }
}
@media (max-width: 600px) {
body.home-v2 .honest-inner { max-width: 100%; }
}
body.home-v2 .honest-kicker {
  font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 26px; opacity: .85;
}
body.home-v2 .honest h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1.03; letter-spacing: -.015em;
  margin: 0; text-wrap: balance;
}
body.home-v2 .honest--long h2 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); line-height: 1.04; }
body.home-v2 .honest h2 em { font-style: normal; font-weight: 600; color: var(--coral); }
body.home-v2 .honest-sub { max-width: 46ch; margin: var(--s-lg) auto 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: rgba(244,241,232,.75); text-wrap: pretty; }
body.home-v2 .honest--long .honest-sub { max-width: 58ch; font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.65; }
body.home-v2 #how { background: var(--cream); }
body.home-v2 .steps { display: grid; grid-template-columns: 1fr; gap: var(--s-md); margin-top: var(--s-xl); align-items: center; }
@media (min-width: 820px) {
body.home-v2 .steps { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; }
body.home-v2 .steps .step__arrow { align-self: center; }
}
body.home-v2 .step {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--paper-line); border-radius: 18px;
  padding: 30px 28px 32px; min-height: 210px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  box-shadow: 0 1px 2px rgba(22,20,15,.04), 0 14px 30px rgba(22,20,15,.06);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
body.home-v2 .step:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(22,20,15,.06), 0 22px 46px rgba(22,20,15,.12); }
@media (min-width: 820px) {
body.home-v2 .steps .step:nth-of-type(2) { transform: translateY(26px); }
body.home-v2 .steps .step:nth-of-type(2):hover { transform: translateY(21px); }
}
body.home-v2 .step__ghost {
  position: absolute; top: -22px; right: -6px; z-index: 0;
  font-family: var(--display); font-weight: 700; font-size: 11rem; line-height: 1;
  color: var(--teal); opacity: .07; pointer-events: none; user-select: none;
}
body.home-v2 .step__h { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 2.8vw, 2.8rem); line-height: 1.04; letter-spacing: -.015em; color: var(--ink); margin: 0; }
body.home-v2 .step__p { position: relative; z-index: 1; color: var(--dim); margin: 0; font-size: 1.08rem; line-height: 1.5; }
body.home-v2 .note--steps { margin-top: var(--s-lg); }
@media (min-width: 820px) {
body.home-v2 .note--steps { margin-top: var(--s-2xl); }
}
body.home-v2 .step__arrow { display: none; }
@media (min-width: 820px) {
body.home-v2 .step__arrow { display: grid; place-items: center; color: var(--teal); font-size: 1.5rem; padding: 0 14px; opacity: .55; }
}
body.home-v2 .audience { background: var(--teal); color: var(--cream); overflow: hidden; }
body.home-v2 .audience .col { text-align: center; }
body.home-v2 .audience .eyebrow { color: var(--coral); justify-content: center; }
body.home-v2 .audience .eyebrow::before { background: var(--coral); }
body.home-v2 .audience h2 { color: var(--cream); }
body.home-v2 .audience .lead { color: var(--dim-on-dark); max-width: 44ch; margin: 14px auto 0; }
body.home-v2 .aud-carousel {
  margin-top: 52px; display: flex; flex-direction: column; gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body.home-v2 .aud-row { overflow-x: clip; overflow-y: visible; padding: 18px 0; }
body.home-v2 .aud-track {
  display: flex; align-items: center; width: max-content; gap: 56px;
  will-change: transform;
}
body.home-v2 .aud-row--a .aud-track { animation: aud-marq 210s linear infinite; }
body.home-v2 .aud-row--b .aud-track { animation: aud-marq 224s linear infinite reverse; }
@keyframes aud-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
body.home-v2 .aud-track { animation: none !important; }
body.home-v2 .aud-row { overflow-x: auto; }
}
body.home-v2 .aud-item {
  --d: calc(108px * var(--s, 1));        /* disc diameter, varied per item */
  position: relative; flex: 0 0 auto; width: var(--d);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  cursor: default; text-align: center;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
body.home-v2 .aud-ill {
  width: var(--d); height: var(--d); border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--cream);
  box-shadow: 0 8px 22px rgba(7,51,56,.28);
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s cubic-bezier(.22,1,.36,1),
              filter .4s cubic-bezier(.22,1,.36,1);
  filter: saturate(.92);
}
body.home-v2 .aud-ill img { width: 78%; height: 78%; object-fit: contain; display: block; }
body.home-v2 .aud-name {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(.78rem, .7rem + .25vw, .94rem); line-height: 1.22;
  color: rgba(244,241,232,.62); letter-spacing: 0;
  transition: color .35s cubic-bezier(.22,1,.36,1);
}
body.home-v2 .aud-and { display: block; font-weight: 400; font-size: .82em; color: rgba(244,241,232,.4); }
body.home-v2 .aud-item:hover { transform: translateY(-6px); }
body.home-v2 .aud-item:hover .aud-ill {
  transform: scale(1.08); filter: saturate(1.06);
  box-shadow: 0 0 0 4px var(--coral), 0 14px 30px rgba(7,51,56,.4);
}
body.home-v2 .aud-item:hover .aud-name { color: var(--cream); }
body.home-v2 .aud-item:hover .aud-and { color: rgba(244,241,232,.7); }
@media (prefers-reduced-motion: reduce) {
body.home-v2 .aud-item,
body.home-v2 .aud-ill { transition: none; }
body.home-v2 .aud-item:hover { transform: none; }
body.home-v2 .aud-item:hover .aud-ill { transform: none; }
}
@media (max-width: 560px) {
body.home-v2 .aud-item { --d: calc(82px * var(--s, 1)); }
body.home-v2 .aud-carousel { gap: 22px; }
body.home-v2 .aud-track { gap: 34px; }
}
body.home-v2 .cases { background: var(--paper); }
body.home-v2 .cases .col { text-align: center; }
body.home-v2 .cases .eyebrow { color: var(--teal); justify-content: center; }
body.home-v2 .cases .h2 { color: var(--ink); }
@media (max-width: 620px) {
body.home-v2 .br-wide { display: none; }
}
body.home-v2 .cases .lead { max-width: 52ch; color: var(--dim); margin: 16px auto 0; }
body.home-v2 .reviews-wrap { position: relative; margin-top: 44px; }
body.home-v2 .reviews-grid {
  text-align: left;
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scroll-padding: 0 4px;
  padding: 8px 4px 22px;             /* room for hover-lift, no clipping */
  scrollbar-width: thin; scrollbar-color: var(--teal) transparent;
}
body.home-v2 .reviews-grid::-webkit-scrollbar { height: 8px; }
body.home-v2 .reviews-grid::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 8px; }
body.home-v2 .reviews-grid::-webkit-scrollbar-track { background: transparent; }
body.home-v2 .reviews-nav {
  position: absolute; top: calc(50% - 8px); transform: translateY(-50%);
  z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--teal); color: var(--cream);
  border: none; font-size: 1.5rem; line-height: 1; padding-bottom: 3px;
  box-shadow: 0 8px 22px rgba(7,51,56,.28);
  transition: background-color .2s cubic-bezier(.22,1,.36,1), opacity .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
body.home-v2 .reviews-nav:hover { background: var(--teal-dark); }
body.home-v2 .reviews-nav:active { transform: translateY(-50%) scale(.94); }
body.home-v2 .reviews-nav--prev { left: -10px; }
body.home-v2 .reviews-nav--next { right: -10px; }
body.home-v2 .reviews-nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 700px) {
body.home-v2 .reviews-nav { display: none; }
}
body.home-v2 .review {
  flex: 0 0 clamp(290px, 78vw, 360px);   /* fixed card width; one+peek on mobile */
  scroll-snap-align: start;
  background: var(--cream); border: 1px solid var(--paper-line); border-radius: 12px;
  padding: 24px 24px 20px; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
body.home-v2 .review:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(7,51,56,.1); }
body.home-v2 .review-head { display: grid; gap: 12px 13px; align-items: center; }
body.home-v2 .review-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.home-v2 .review-name { font-family: var(--sans); font-weight: 700; font-size: .96rem; color: var(--ink); }
body.home-v2 .review-role { font-family: var(--sans); font-weight: 500; font-size: .8rem; color: var(--dim); }
body.home-v2 .review-quote {
  font-family: var(--display); font-weight: 500; font-size: 1.04rem; line-height: 1.48;
  color: var(--ink); margin: 18px 0; text-wrap: pretty;
}
body.home-v2 .review-use {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--paper-line);
  display: flex; flex-direction: column; gap: 3px;
}
body.home-v2 .review-use__when {
  font-family: var(--sans); font-weight: 700; font-size: .82rem; color: var(--teal);
  line-height: 1.3;
}
body.home-v2 .review-use__label {
  display: block;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 5px;
}
body.home-v2 .review-use__file { font-family: var(--mono); font-size: .73rem; color: var(--dim); margin-top: 4px; }
body.home-v2 .reviews-note {
  font-family: var(--sans); font-size: .78rem; color: var(--dim);
  margin: 18px auto 0; max-width: 52ch; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
body.home-v2 .review { transition: none; }
body.home-v2 .review:hover { transform: none; }
}
body.home-v2 .legal { background: var(--cream); }
body.home-v2 .legal-h { max-width: 30ch; margin-bottom: var(--s-lg); }
body.home-v2 .legal-inner {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-xl); align-items: center;
  max-width: 980px; margin-inline: auto;
}
body.home-v2 .legal-inner:has(.legal-body) { align-items: start; margin-inline: 0; }
@media (max-width: 700px) {
body.home-v2 .legal-inner { grid-template-columns: 1fr; gap: var(--s-md); }
}
body.home-v2 .legal-glyph { font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 9vw, 7rem); color: var(--teal); line-height: 1; }
body.home-v2 .legal-body { display: grid; gap: var(--s-md); }
body.home-v2 .legal-text { font-size: 1.28rem; line-height: 1.62; color: var(--ink); margin: 0; text-wrap: pretty; }
body.home-v2 .legal-body .legal-text { font-size: 1.18rem; max-width: 66ch; }
body.home-v2 .legal-text--sub { font-size: 1.02rem; color: var(--dim); }
body.home-v2 .legal-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-lg) var(--s-xl); max-width: 980px; margin-top: var(--s-xl); padding-top: var(--s-lg);
  border-top: 1px solid rgba(22,20,15,.12);
}
body.home-v2 .legal-note { margin: 0; flex: 1 1 320px; max-width: 60ch; font-size: .95rem; line-height: 1.5; color: var(--dim); }
body.home-v2 .legal-partner { display: flex; flex-direction: column; gap: var(--s-sm); align-items: flex-end; text-align: right; }
body.home-v2 .legal-partner__brand { height: 38px; width: auto; object-fit: contain; }
body.home-v2 .legal-partner__label { font-size: .78rem; line-height: 1.2; color: var(--dim); letter-spacing: .01em; }
@media (max-width: 700px) {
body.home-v2 .legal-partner { align-items: flex-start; text-align: left; }
}
body.home-v2 .legal-text a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
body.home-v2 .legal-heading + .legal-text { font-size: 1.08rem; line-height: 1.6; color: var(--dim); }
body.home-v2 .faq-list { max-width: 980px; margin-top: 28px; }
body.home-v2 .faq-item { border-top: 1px solid var(--paper-line); }
body.home-v2 .faq-item:last-child { border-bottom: 1px solid var(--paper-line); }
body.home-v2 .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 26px 0; font-weight: 600; font-size: 1.32rem; line-height: 1.3; }
body.home-v2 .faq-item summary::-webkit-details-marker { display: none; }
body.home-v2 .faq-chev { flex: none; width: 20px; height: 20px; position: relative; }
body.home-v2 .faq-chev::before,
body.home-v2 .faq-chev::after { content: ''; position: absolute; background: var(--teal); transition: transform .24s var(--ease), opacity .24s var(--ease); }
body.home-v2 .faq-chev::before { top: 9px; left: 0; width: 20px; height: 2px; }
body.home-v2 .faq-chev::after { left: 9px; top: 0; width: 2px; height: 20px; }
body.home-v2 .faq-item[open] .faq-chev::after { transform: scaleY(0); opacity: 0; }
/* styles.css styles the OLD FAQ, which was a <button> plus a JS toggle: there
   `.faq-answer` is `display:none` until JS adds `.open`, and a second rule pins
   it to `max-height:0; overflow:hidden`. Both are plain class selectors that
   still match here, so every <details> stayed visually shut even when open.
   Open/closed is therefore driven off [open] here rather than left to the UA:
   an unconditional `display:block` would defeat the native hiding and leave
   every answer permanently unfolded. */
body.home-v2 .faq-answer { max-height: none; overflow: visible; border: 0; padding: 0 0 28px; color: var(--dim); max-width: 70ch; font-size: 1.12rem; line-height: 1.6; }
body.home-v2 .faq-item .faq-answer { display: none; }
body.home-v2 .faq-item[open] .faq-answer { display: block; }
/* Only faq_a0 and faq_a7 run to several paragraphs; the later `.faq-answer p`
   block sets `margin: 0`, which welds them into one block of text. One extra
   class here outranks it without disturbing the single-paragraph answers. */
body.home-v2 .faq-item .faq-answer p { margin: 0 0 12px; }
body.home-v2 .faq-item .faq-answer p:last-child { margin-bottom: 0; }
body.home-v2 .faq-answer ul { margin: 0 0 12px; padding-left: 1.2em; }
body.home-v2 .faq-answer li { margin: 4px 0; }
body.home-v2 .faq-answer a { color: var(--teal); text-decoration: underline; }
body.home-v2 .final { background: var(--teal); color: var(--cream); text-align: center; }
body.home-v2 .final h2 { font-family: var(--display); font-weight: 700; color: var(--cream); font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 var(--s-md); text-wrap: balance; }
body.home-v2 .final h2 .u { color: var(--coral-light); }
body.home-v2 .final-sub { max-width: 54ch; margin: 0 auto var(--s-lg); font-size: 1.08rem; line-height: 1.6; color: var(--dim-on-dark); text-wrap: pretty; }
body.home-v2 .final-btns { display: flex; flex-wrap: wrap; gap: var(--s-md); justify-content: center; }
body.home-v2 .final-note { margin: var(--s-md) 0 0; font-size: 13px; font-weight: 600; color: rgba(244,241,232,.8); }
body.home-v2 .final-fine { margin: var(--s-lg) auto 0; padding-top: var(--s-md); max-width: 46ch; font-size: 13px; line-height: 1.5; color: rgba(244,241,232,.8); border-top: 1px solid rgba(244,241,232,.14); }
body.home-v2 .hero-doc { cursor: zoom-in; }
@keyframes ticker-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ticker-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,122,89,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,122,89,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,89,0); } }
body.home-v2 .hero-examine {
  position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(6px) translateZ(40px);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--cream);
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: .01em;
  padding: 8px 15px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
  opacity: 0; transition: opacity .28s var(--ease), transform .28s var(--ease); pointer-events: none;
}
body.home-v2 .hero-examine svg { color: var(--coral); }
body.home-v2 .hero-doc:hover .hero-examine,
body.home-v2 .hero-doc:focus-visible .hero-examine { opacity: 1; transform: translateX(-50%) translateY(0) translateZ(40px); }
body.home-v2 .lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: oklch(0.13 0.02 195 / 0.96);
  flex-direction: column;
}
body.home-v2 .lb.is-open { display: flex; animation: lb-in .25s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
body.home-v2 .lb__bar { display: flex; align-items: center; gap: 16px; padding: 16px clamp(16px, 4vw, 40px); color: var(--cream); }
body.home-v2 .lb__title { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 2vw, 1.3rem); }
body.home-v2 .lb__hint { margin-left: auto; font-family: var(--sans); font-size: 12.5px; color: rgba(244,241,232,.6); }
body.home-v2 .lb__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--cream); font-size: 1.1rem; line-height: 1; transition: background .18s var(--ease); }
body.home-v2 .lb__close:hover { background: rgba(255,255,255,.12); }
body.home-v2 .lb__stage { flex: 1; display: grid; place-items: center; padding: 0 clamp(12px, 4vw, 48px) clamp(20px, 5vh, 48px); overflow: hidden; }
body.home-v2 .lb__img {
  max-width: min(640px, 92vw); max-height: 86vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.6);
  cursor: zoom-in; transition: transform .12s linear; will-change: transform;
}
body.home-v2 .lb__stage.is-zoomed .lb__img { cursor: zoom-out; }
@media (max-width: 560px) {
body.home-v2 .lb__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body.home-v2 .lb.is-open { animation: none; }
body.home-v2 .lb__img { transition: none; }
}
@media (max-width: 600px) {
body.home-v2 .col { padding-inline: 20px; }
body.home-v2 .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
body.home-v2 .hero-btns { gap: 10px; }
body.home-v2 .hero-btns .btn { width: 100%; justify-content: center; }
body.home-v2 .honest { padding: clamp(48px, 9vh, 80px) 0; }
body.home-v2 .honest h2 { font-size: clamp(1.6rem, 6.6vw, 2.6rem); line-height: 1.12; word-break: keep-all; overflow-wrap: normal; hyphens: manual; text-wrap: pretty; }
body.home-v2 .honest-sub { font-size: 1.02rem; }
body.home-v2 .faq-item summary { font-size: 1.12rem; padding: 22px 0; }
body.home-v2 .faq-answer { font-size: 1.02rem; }
body.home-v2 .legal-text { font-size: 1.12rem; }
body.home-v2 .final .btn { width: 100%; justify-content: center; }
}
body.home-v2 .page-head .eyebrow { color: var(--coral); }
body.home-v2 .page-head .eyebrow::before { background: var(--coral); }
@keyframes emrule { to { transform: scaleX(1); } }
@keyframes dz-pulse { 0% { box-shadow: 0 0 0 0 rgba(13,92,99,.0); } 40% { box-shadow: 0 0 0 6px rgba(13,92,99,.16); } 100% { box-shadow: 0 0 0 0 rgba(13,92,99,0); } }
@media (max-height: 880px) {
body.home-v2 .promo .btn-outline-light { padding-block: 9px; }
}
@keyframes reveal { to { opacity: 1; transform: none; } }
body.home-v2 .page-head--art .eyebrow {
  text-decoration: none; transition: opacity .18s var(--ease);
}
body.home-v2 .page-head--art .eyebrow:hover { opacity: .72; }
body.home-v2 .art-rail .btn { justify-content: center; padding: 13px 18px; font-size: .88rem; }
body.home-v2 .promo .btn-outline-light { flex: none; padding: 11px 18px; font-size: .88rem; border-width: 1px; }
body.home-v2 .faq .faq-list { max-width: 820px; }
body.home-v2 .faq-item { border-top: 1px solid var(--paper-line); }
body.home-v2 .faq-item:last-child { border-bottom: 1px solid var(--paper-line); }
body.home-v2 .faq-chev { position: relative; width: 18px; height: 18px; flex: none; }
body.home-v2 .faq-chev::before,
body.home-v2 .faq-chev::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px;
  background: var(--teal); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .24s var(--ease), opacity .24s var(--ease); }
body.home-v2 .faq-chev::after { transform: translate(-50%, -50%) rotate(90deg); }
body.home-v2 .faq-item[open] .faq-chev::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
body.home-v2 .faq-answer { padding: 0 0 24px; }
body.home-v2 .faq-answer p { margin: 0; font-size: 1.02rem; line-height: 1.62; color: var(--dim); max-width: 70ch; }
body.home-v2 .faq-answer strong { color: var(--ink); }
body.home-v2 .faq-answer a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
body.home-v2 .cmodal__actions .btn { padding: 13px 24px; }
@keyframes cmodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmodal-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
body.home-v2 .cmodal__actions .btn { width: 100%; justify-content: center; }
}
body.home-v2 ::selection { background: rgba(255,122,89,.28); }
body.home-v2 .auth-form .btn { width: 100%; justify-content: center; margin-top: 4px; }
body.home-v2 .plan .btn { width: 100%; justify-content: center; margin-top: auto; }
body.home-v2 .util-center .btn { justify-content: center; }
body.home-v2 .head-split .eyebrow { color: var(--coral); }
body.home-v2 .head-split .eyebrow::before { background: var(--coral); }
body.home-v2 .btn-lime { box-shadow: var(--sh-1); position: relative; overflow: hidden; }
body.home-v2 .btn-lime:hover { box-shadow: var(--sh-2); }
body.home-v2 .btn-lime::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none;
}
body.home-v2 .btn-lime:hover::after { transform: translateX(120%); }
body.home-v2 .btn:focus-visible,
body.home-v2 input:focus-visible,
body.home-v2 select:focus-visible,
body.home-v2 textarea:focus-visible,
body.home-v2 summary:focus-visible { outline: none; box-shadow: var(--ring); }
body.home-v2 .section + .section { position: relative; }
body.home-v2 [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
body.home-v2 [data-reveal][data-reveal-d="1"] { transition-delay: .08s; }
body.home-v2 [data-reveal][data-reveal-d="2"] { transition-delay: .16s; }
body.home-v2 [data-reveal][data-reveal-d="3"] { transition-delay: .24s; }
body.home-v2 [data-reveal][data-reveal-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
body.home-v2 [data-reveal] { opacity: 1; transform: none; transition: none; }
}
body.home-v2 .section .eyebrow,
body.home-v2 .head-split .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
@keyframes sealspin { to { transform: rotate(360deg); } }
@keyframes ribbon { to { transform: translateX(-100%); } }
body.home-v2 .shero .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,122,89,.16); color: var(--coral);
  border: 1px solid rgba(255,122,89,.42);
  font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .01em;
  padding: 8px 16px; border-radius: 100px; margin: 0 0 24px;
}
body.home-v2 .shero .eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
body.home-v2 .hero { isolation: isolate; }
body.home-v2 .hero::before {  /* depth: gradient + coral aurora + dark vignette */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(115% 90% at 88% -12%, rgba(255,122,89,.26), transparent 50%),
    radial-gradient(90% 85% at -6% 112%, rgba(7,51,56,.6), transparent 60%),
    linear-gradient(158deg, var(--teal) 0%, var(--teal-deep) 58%, var(--teal-dark) 100%);
}
body.home-v2 .hero::after {  /* fine film grain (no lines) */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: var(--grain); background-size: 200px 200px;
}
body.home-v2 .hero > .col,
body.home-v2 .hero-grid { position: relative; z-index: 1; }
body.home-v2 .hero__ribbon {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1;
  /* fade the ribbon out across the copy column so it never runs behind the hero
     text; it only reads under the certificate, where there is nothing else */
  -webkit-mask-image: linear-gradient(to right, transparent 0 44%, #000 62%);
  mask-image: linear-gradient(to right, transparent 0 44%, #000 62%);
  font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); letter-spacing: .18em;
  color: rgba(244,241,232,.13); white-space: nowrap; overflow: hidden; pointer-events: none; user-select: none;
}
body.home-v2 .hero__ribbon span { display: inline-block; padding-left: 100%; animation: ribbon 40s linear infinite; }
@media (prefers-reduced-motion: reduce) {
body.home-v2 .hero__ribbon span { animation: none; padding-left: 4%; }
}
@media (max-width: 940px) {
body.home-v2 .hero__ribbon { display: none; }
}
body.home-v2 .btn-lime {
  background-image: var(--coral-face);
  box-shadow: var(--coral-edge), var(--coral-lift);
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .22s var(--ease);
}
body.home-v2 .btn-lime:hover {
  background-color: var(--coral-deep);
  background-image: var(--coral-face-hi);
  box-shadow: var(--coral-edge), var(--coral-lift-hi);
}
body.home-v2 .btn-lime:active { transform: translateY(1px); box-shadow: var(--coral-press); }
body.home-v2 .hero-doc { filter: drop-shadow(0 30px 60px rgba(7,51,56,.45)); }
body.home-v2::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: var(--grain); background-size: 200px 200px;
  opacity: .025; mix-blend-mode: multiply;
}
body.home-v2 .legal-doc p.note {
  max-width: 76ch; margin: var(--s-xl) 0 0; padding-top: var(--s-md);
  border-top: 1px solid var(--paper-line);
  font-size: .95rem; line-height: 1.55; color: var(--dim);
}
@keyframes status-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
body.home-v2 .btn:disabled { opacity: .45; cursor: not-allowed; }
body.home-v2 .btn:disabled:hover { transform: none; }
body.home-v2 .btn-lime:disabled:hover { background-color: var(--coral); background-image: var(--coral-face); box-shadow: var(--coral-edge), var(--coral-lift); }
@keyframes issued-spin { to { transform: rotate(360deg); } }
@keyframes seal-press {
  from { opacity: 0; transform: rotate(-8deg) scale(1.5); }
  to   { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@media (max-width: 560px) {
body.home-v2 .issued-actions .btn,
body.home-v2 .issued-actions .btn-outline-light { width: 100%; justify-content: center; }
body.home-v2 .issued-actions form .btn { width: 100%; }
body.home-v2 .issued-foot__row .btn { width: 100%; justify-content: center; }
}


/* Production styles.css carries `.section { margin-bottom: 2.5rem }` (and a
   margin on .hero) for the old page rhythm. This page alternates flush dark and
   light fields and does all its spacing with padding, so those inherited
   margins opened 30-80px paper bands between fields that are meant to butt.
   Neutralise them for this page only. */
body.home-v2 main > section,
body.home-v2 .section,
body.home-v2 .hero {
  margin-top: 0;
  margin-bottom: 0;
}

/* Production styles.css styles #faq for the OLD page: `#faq { margin-top: 80px }`
   plus `#why,#contacts,#docs,#faq { max-width: 1100px; margin-inline: auto }` and
   `#faq > * { max-width: 980px }`. Those are ID selectors, so they outrank the
   class-scoped rules above and were clamping this full-bleed field to 1100px,
   narrowing .col to 980px, and opening an 80px paper band before the FAQ.
   `body.home-v2 #faq` is (1,1,1) and wins back. The id itself has to stay: the
   shared footer links to /#faq. */
body.home-v2 #faq {
  margin: 0;
  max-width: none;
}
body.home-v2 #faq > * {
  max-width: none;
}
body.home-v2 #faq > .col {
  width: var(--col);
}


/* The hero + trust strip are meant to fill exactly one viewport, so the dark
   field ends at the fold and scrolling reveals the light sections. The preview
   subtracted its own in-flow nav (77px); here the bar is fixed and the body is
   padded instead, so --nav must equal the real chrome above the hero, which
   changes when inject.js shows the promo banner. --strip is the trust strip. */
body.home-v2 {
  --nav: var(--navbar-h, 89px);
  --strip: 134px;   /* the trust strip at the 18px root, same as the preview */
}
body.home-v2.has-top-promo-banner {
  --nav: calc(var(--navbar-h, 89px) + var(--promo-h, 62px));
}

/* styles.css gives the OLD hero `padding: 44px 20px 92px`. This hero does all
   its spacing on .hero-grid / .hero-copy, so that inherited 136px was pushing
   the dark field past the fold. */
body.home-v2 .hero {
  padding: 0;
}

/* The site-wide promo banner ("register and get 1 free certificate") says the
   same thing this hero's own tag and CTA already say, and it costs 62px of the
   fold — the difference between the dark field ending exactly at the viewport
   edge and overshooting it. Hidden here only; every other page still shows it.
   Remove this block to bring it back. */
body.home-v2 .top-promo-banner { display: none; }
html.has-top-promo-banner body.home-v2,
body.home-v2.has-top-promo-banner { padding-top: var(--navbar-h, 89px); }
body.home-v2.has-top-promo-banner { --nav: var(--navbar-h, 89px); }

/* Short desktop viewports (1366x768, 1280x800, 1600x900 …). The copy stack is
   taller than the room the fold leaves once the chrome and trust strip are
   subtracted, so the dark field overshot by 15-75px on exactly the laptop sizes
   most visitors use. Tighten the stack rather than let it push past the fold.
   Below 941px the layout stacks and is meant to scroll, so this stays desktop-only. */
/* Gentle tier for ~900px-tall viewports. The hero top spacing above comes out
   of the hero's own height, so these need ~35px trimmed from the copy stack to
   keep the dark field on the fold. Margin trims only — the type stays at full
   design size here; the 860px tier below does the heavier work. */
@media (min-width: 941px) and (max-height: 920px) {
  body.home-v2 .hero-grid { padding-top: 0; }
  /* h1 is clamp(2.1rem, 3.4vw, 3.15rem) while its column is a fraction of the
     grid, so past ~1500px the type outgrows the column and the headline takes an
     extra line — the hero was 22px taller at 1600x900 than at 1440x900. Cap the
     vw term on short viewports so the line count stays put. */
  body.home-v2 .hero h1 { font-size: clamp(2.1rem, 3.1vw, 2.9rem); }
  body.home-v2 .hero-tag { margin-bottom: 7px; }
  body.home-v2 .hero h1 { margin-bottom: 8px; }
  body.home-v2 .hero .lead { margin-bottom: 4px; }
  body.home-v2 .hero-formats { margin-bottom: 9px; }
  body.home-v2 .hero-fine { margin-top: 7px; padding-top: 7px; }
}

/* The hero's own top padding (--hero-top) comes out of its fold budget, so on
   ~900px-tall screens the copy stack needs ~35px trimmed to keep the dark field
   ending exactly at the viewport edge. Margin trims only here — the type stays
   at full design size; the 860px tier below does the heavier work. */
@media (min-width: 941px) and (max-height: 920px) {
  body.home-v2 .hero-grid { padding-top: 6px; }
  body.home-v2 .hero-formats { margin-bottom: 14px; }
  body.home-v2 .hero-fine { margin-top: 10px; padding-top: 10px; }
  body.home-v2 .hero-tag { margin-bottom: 10px; }
}

@media (min-width: 941px) and (max-height: 860px) {
  body.home-v2 .hero-grid { padding-top: 8px; gap: 28px; }
  body.home-v2 .hero-tag { margin-bottom: 9px; }
  body.home-v2 .hero h1 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); margin-bottom: 10px; }
  body.home-v2 .hero .lead { margin-bottom: 6px; font-size: .97rem; line-height: 1.45; }
  body.home-v2 .hero-formats { margin-bottom: 14px; font-size: .82rem; }
  body.home-v2 .hero-btns .btn { padding-block: 11px; }
  body.home-v2 .hero-fine { margin-top: 9px; padding-top: 9px; }
}
@media (min-width: 941px) and (max-height: 800px) {
  body.home-v2 .hero-grid { padding-top: 4px; gap: 22px; }
  body.home-v2 .hero h1 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 8px; }
  body.home-v2 .hero-formats { margin-bottom: 10px; }
  body.home-v2 .hero-fine { margin-top: 7px; padding-top: 7px; }
}

/* The trust strip's four facts rewrap as the viewport narrows, so its height
   is a step function of width, not a constant. Measured at the 18px root:
   >=1400 -> 134, 1220-1399 -> 147, 1060-1219 -> 167, 941-1059 -> 186.
   The fold math subtracts --strip, so it has to follow those steps or the dark
   field overshoots by exactly the difference. */
@media (min-width: 941px) and (max-width: 1399px) { body.home-v2 { --strip: 147px; } }
@media (min-width: 941px) and (max-width: 1219px) { body.home-v2 { --strip: 167px; } }
@media (min-width: 941px) and (max-width: 1059px) { body.home-v2 { --strip: 186px; } }

/* The preview bumps the root em so the whole page renders at the density it was
   designed for: every rem in this file assumes an 18px root, and at the browser
   default of 16px the page came out ~11% smaller than the design in every
   dimension. Unscoped `html` on purpose — home.css is linked by this page only,
   so it cannot reach any other page. */
html {
  font-size: 112.5%;
}


/* ============================================================================
   Parity fixes — production rules that reach this page's components
   ----------------------------------------------------------------------------
   Found by diffing computed styles of all 490 elements against
   /preview-b-final. Everything below restores the preview's value.
   ========================================================================== */

/* styles.css:1048 sets the OLD hero's gradient with !important, which beats any
   specificity. This is the one !important rule in styles.css that reaches this
   page — the hero was rendering a gradient over a transparent ground instead of
   the flat teal field the design calls for. */
body.home-v2 .hero {
  background: var(--teal) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* `.faq-item { width:100%; max-width:600px }` plus the old card treatment
   (background, radius, shadow, hover border) — the FAQ rows were half width, so
   every question wrapped to two lines and the section ran 164px long. */
body.home-v2 .faq-item {
  max-width: none;
  width: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  overflow: visible;
}
body.home-v2 .faq-item:last-child { border-bottom: 1px solid var(--paper-line); }
body.home-v2 .faq-item:hover { border-color: var(--paper-line); box-shadow: none; }
body.home-v2 .faq-item + .faq-item { margin-top: 0; }

/* The answer panel was getting the old white card treatment. */
body.home-v2 .faq-answer {
  width: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  position: static;
  text-align: start;
}

/* `#faq h2 { font-size: 2rem; font-weight: 600; letter-spacing: .01em }` is an
   ID selector, so it outranked .h2 and rendered the FAQ heading at 36px/600
   while every other section heading is 63px/700. */
body.home-v2 #faq .h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0;
}

/* The old list indent (`li { margin-left: 20px }`) was narrowing these rows. */
body.home-v2 .start-item { margin: 0; }

/* styles.css gives .legal-note a warning-box treatment (tinted background,
   padding, rounded corner). In this design it is a quiet line of small print. */
body.home-v2 .legal-note {
  padding: 0;
  background: none;
  border-radius: 0;
  border-left: 0;
}

/* styles.css:6387 `ul li { list-style-type: disc; margin-left: 20px }` for the
   old prose pages. Every list on this page is a custom component that supplies
   its own markers and spacing, and the 20px indent was widening the delivery
   strip by 120px (6 items) — enough to wrap its label onto a second line — and
   narrowing the start-list rows. The preview has no li margin anywhere. */
body.home-v2 main ul li {
  margin-left: 0;
  list-style-type: none;
}
/* the FAQ answers are the one place that does want real bullets */
body.home-v2 .faq-answer ul li {
  list-style-type: disc;
}

/* styles.css `ul { margin-top: 12px; line-height: 1.6 }` likewise. */
body.home-v2 main ul {
  margin-top: 0;
}
body.home-v2 .start-list { margin-top: var(--s-xl); }
body.home-v2 .faq-answer ul { margin: 0 0 12px; }

/* Breathing room between the bar and the hero content. The nav and the hero are
   both teal, so without it the copy reads as starting flush against the bar.
   This is a deliberate step away from /preview-b-final, which has none.
   box-sizing is border-box, so the padding comes out of the hero's own height
   and the dark field still ends exactly at the fold. */
body.home-v2 .hero {
  padding-top: var(--hero-top, 72px);
}
@media (min-width: 941px) and (max-height: 860px) {
  body.home-v2 { --hero-top: 44px; }
}
@media (max-width: 940px) {
  body.home-v2 { --hero-top: 40px; }
}