/* ============================================================================
   bold-v149.css — Claude "bold" aesthetic elevation (2026-07-20)
   Operator explicitly authorized a bolder visual direction on top of the
   accepted v147 design. Loaded LAST (after refine-v148). Guardrails held:
   Talktide green #3ab15d, MY/ID imagery, hero video, corrected logo, seven-
   product carousel, Tabler icons only, readable type, no dark-green surfaces.
   Decorative/elevation layer only — headline size and hero copy stay in the
   video safe area.
   ============================================================================ */

/* --- Hero: eyebrow pill badge ---------------------------------------------- */
.hero .hcopy .eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:999px;
  background:rgba(58,177,93,.12);
  border:1px solid rgba(58,177,93,.30);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(31,122,68,.10);
}

/* --- Hero: headline confidence (size unchanged) ---------------------------- */
.hero .hcopy h1{ letter-spacing:-.022em; }

/* --- Hero: tactile glass benefit pills with gradient icon coins ------------- */
.hero .hcopy .hero-checks{ gap:12px 14px; }
.hero .hcopy .hero-check{
  padding:10px 15px 10px 11px; border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(31,122,68,.14);
  -webkit-backdrop-filter:blur(10px) saturate(115%); backdrop-filter:blur(10px) saturate(115%);
  box-shadow:0 8px 22px rgba(15,63,36,.08);
  transition:transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s;
}
.hero .hcopy .hero-check:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,63,36,.14); }
.hero .hcopy .hero-check i.ti{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(140deg,#2f9d51,#28894a);
  color:#fff !important; font-size:16px;
  box-shadow:0 4px 10px rgba(47,154,80,.30);
}
/* Mobile hero sits on a dark scrim with white text -> keep chips dark-tinted */
@media (max-width:860px){
  .hero .hcopy .hero-check{
    background:rgba(18,58,38,.34);
    border:1px solid rgba(255,255,255,.20);
  }
}

/* --- Site-wide: content-area primary/ghost CTAs ---------------------------
   Scoped to `main` so the header "Contact Sales" (on the green header) is not
   repainted. Matches the hero CTA language across every page.               */
main .btn.btn-primary{
  background:linear-gradient(135deg,#3ab15d 0%,#2c9a4e 100%) !important;
  box-shadow:0 12px 28px rgba(31,142,73,.28);
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s;
}
main .btn.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(31,142,73,.40);
}
main .btn.btn-ghost{
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .22s cubic-bezier(.22,.61,.36,1), background .22s, box-shadow .22s;
}
main .btn.btn-ghost:hover{ transform:translateY(-2px); }

/* --- Site-wide: feature bullet icons -> gradient coins ----------------------
   .fic was a flat mint circle with a green glyph; lift to the same gradient
   coin as the hero chips for a consistent, vivid icon language.              */
.flist .fi .fic{
  background:linear-gradient(140deg,#2f9d51,#28894a) !important;
  box-shadow:0 5px 12px rgba(47,154,80,.26);
}
.flist .fi .fic .ti{ color:#fff !important; }

/* --- Site-wide: unify remaining icon wrappers as gradient coins ------------
   Proof stats, connected-journey steps, compliance cards and the process
   support strip shared a flat/outlined icon look. Lift them to the same
   rounded-square gradient coin as the hero chips so the whole page speaks one
   vivid icon language. Glyphs shrink to sit balanced inside the coin.        */
.stats .stat .si,
.flow .ic,
.compl .cmpl .ic,
.proc .psup .ic{
  background:linear-gradient(140deg,#2f9d51,#28894a) !important;
  border:0 !important;
  border-radius:13px !important;
  box-shadow:0 6px 15px rgba(47,154,80,.24) !important;
}
.stats .stat .si .ti,
.flow .ic .ti,
.compl .cmpl .ic .ti,
.proc .psup .ic .ti{
  color:#fff !important;
  font-size:22px !important;
}
.stats .stat .si{ width:44px !important; height:44px !important; }

/* --- Deep pass DR1 note: coin fill deepened to #2f9d51->#28894a so white
   glyphs clear WCAG 3:1 non-text contrast (was #3ab15d, ~2.75:1). Brand accent
   #3ab15d preserved on eyebrows, labels and links. -------------------------- */

/* --- Deep pass DR3: comfortable tap target for the product "Explore X" CTAs
   on touch. They measured ~32-37px tall on mobile; give them a 44px min touch
   height without changing desktop layout.                                    */
@media (max-width:860px){
  .feature-product-action{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
}

/* --- Deep pass DR8: reading comfort ----------------------------------------
   Headings already use text-wrap:balance. Add text-wrap:pretty to running copy
   so the last line never drops a single orphan word. Progressive enhancement —
   ignored by engines that do not support it.                                 */
.hero .hcopy p.lead,
.section-heading-v133 p,
.compl .cmpl p,
.pstep p,
.flow .flow-card,
.story p{
  text-wrap:pretty;
}

/* --- Deep pass DR9: tactile press state on primary CTAs --------------------
   Adds a brief pressed depth so taps/clicks feel responsive (paired with the
   existing hover lift; neutralized under reduced-motion by the global rule).  */
main .btn.btn-primary:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(31,142,73,.30); }