/* ==============================================================
   UpadhiSetu — home page components (upadhisetu.com)

   Extends assets/site.css rather than replacing it: the header,
   footer, .wrap, .btn and typography tokens stay shared with
   about/privacy/terms/security so every page reads as one site.
   Everything new here is namespaced `u-` so nothing collides.

   Motion policy: every animation is decorative and every one is
   disabled under prefers-reduced-motion. Content is never revealed
   BY animation alone — elements start visible in the reduced case,
   so a user who blocks motion still sees the whole page.
   ============================================================== */

/* ==============================================================
   ENTERPRISE LAYER

   Emoji and springy motion read as consumer-grade. This layer swaps
   them for a drawn icon set, tighter type, flatter and more precise
   surfaces, and motion that is short and linear rather than bouncy.
   ============================================================== */
:root {
  --ink-deep:  #0B120D;   /* near-black with the brand's green bias */
  --ink-deep2: #131C16;
  --hair:      rgba(11,18,13,.09);
  --hair-2:    rgba(11,18,13,.14);
  /* Flatter, tighter elevation. Enterprise UI reads precise, not puffy. */
  --e-1: 0 1px 2px rgba(11,18,13,.05), 0 1px 1px rgba(11,18,13,.04);
  --e-2: 0 2px 4px rgba(11,18,13,.05), 0 8px 16px -6px rgba(11,18,13,.10);
  --e-3: 0 4px 8px rgba(11,18,13,.06), 0 24px 44px -18px rgba(11,18,13,.20);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* icon system — currentColor, optically aligned */
.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; fill: none;
     stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.i-lg { width: 1.35em; height: 1.35em; }
.u-icon-box {
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--green-tint); color: var(--green-deep); font-size: 1.1rem;
  border: 1px solid rgba(23,130,62,.14);
}
.u-icon-box.amber { background: #FFF6E6; color: var(--saffron-dp); border-color: rgba(245,166,35,.2); }
.u-icon-box.neutral { background: var(--paper2); color: var(--ink-2); border-color: var(--hair); }

/* tighter, more deliberate headings */
.sec-head h2, .u-h1 { letter-spacing: -.025em; }
.eyebrow {
  font-size: .7rem !important; letter-spacing: .12em !important; text-transform: uppercase;
  font-weight: 700 !important;
}

/* enterprise credibility strip */
.u-creds {
  display: grid; gap: 0; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--white);
  box-shadow: var(--e-1); margin-top: 2rem;
}
@media (min-width: 52rem) { .u-creds { grid-template-columns: repeat(4, 1fr); } }
.u-cred { padding: 1.1rem 1.15rem; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.u-cred:last-child { border-right: 0; }
@media (min-width: 52rem) { .u-cred { border-bottom: 0; } }
.u-cred .i { color: var(--green-deep); font-size: 1.1rem; }
.u-cred b { display: block; margin: .5rem 0 .15rem; font-size: .92rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.u-cred span { font-size: var(--t--1); color: var(--muted); line-height: 1.5; }

/* deep band — gravitas without shouting */
.u-deep {
  background:
    radial-gradient(46rem 24rem at 88% -10%, rgba(23,130,62,.20), transparent 62%),
    linear-gradient(180deg, var(--ink-deep), var(--ink-deep2));
  color: #E8EDE9; border-block: 1px solid rgba(255,255,255,.06);
}
.u-deep h2, .u-deep h3 { color: #fff; }
.u-deep .eyebrow { color: #6FD08C !important; }
.u-deep p { color: rgba(232,237,233,.72); }
.u-deep .u-tcard {
  background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.1); box-shadow: none;
  backdrop-filter: blur(2px);
}
.u-deep .u-tcard:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); transform: none; }
.u-deep .u-tcard h3 { color: #fff; }
.u-deep .u-tcard p { color: rgba(232,237,233,.66); }
/* Specific enough to beat `.u-tcard .u-tic`, which is defined later and
   would otherwise paint a pale-green chip onto the dark band. */
.u-deep .u-icon-box,
.u-deep .u-tcard .u-tic { background: rgba(111,208,140,.12); color: #6FD08C; border: 1px solid rgba(111,208,140,.2); }
.u-deep a { color: #8FDCA6; }
.u-deep .u-tcard .u-tic .i { color: #6FD08C; }

/* ---------- reading progress ---------- */
.u-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--green), var(--saffron));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- hero ---------- */
.u-hero {
  position: relative; overflow: clip;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) 0 clamp(2rem, 1rem + 4vw, 4rem);
  background:
    radial-gradient(60rem 32rem at 12% -10%, #EAF5EE 0%, rgba(234,245,238,0) 62%),
    radial-gradient(46rem 30rem at 105% 8%, #FFF3DE 0%, rgba(255,243,222,0) 60%),
    var(--white);
}
/* Slow-drifting colour field. Purely decorative, sits behind content. */
.u-hero::before {
  content: ""; position: absolute; z-index: 0; inset: -30% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(28rem 18rem at 20% 40%, rgba(23,130,62,.10), transparent 70%),
    radial-gradient(24rem 16rem at 78% 30%, rgba(245,166,35,.12), transparent 70%);
  filter: blur(6px);
  animation: u-drift 34s ease-in-out infinite alternate;
}
@keyframes u-drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

.u-hero-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .u-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.u-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem .4rem .5rem; border-radius: 100px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--e-1);
  font-size: var(--t--1); font-weight: 650; color: var(--ink-2);
}
.u-pill b {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--green-tint); color: var(--green-deep);
  padding: .15rem .5rem; border-radius: 100px; font-weight: 700;
}
.u-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(23,130,62,.55); animation: u-ping 2.4s ease-out infinite;
}
@keyframes u-ping {
  0%   { box-shadow: 0 0 0 0 rgba(23,130,62,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(23,130,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,130,62,0); }
}

.u-h1 {
  margin: 1.1rem 0 .8rem;
  font-size: clamp(2rem, 1.35rem + 3.1vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.022em; font-weight: 800; color: var(--ink);
}
.u-h1 .u-ink-green { color: var(--green-deep); }
/* Hand-drawn underline that draws itself once in view. */
.u-underline { position: relative; white-space: nowrap; }
.u-underline svg {
  position: absolute; left: 0; right: 0; bottom: -.18em; width: 100%; height: .34em;
  overflow: visible; pointer-events: none;
}
.u-underline path {
  fill: none; stroke: var(--saffron); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
}
.in .u-underline path, .u-hero .u-underline path { animation: u-draw 1.1s .45s ease-out forwards; }
@keyframes u-draw { to { stroke-dashoffset: 0; } }

.u-sub {
  font-size: clamp(1rem, .96rem + .3vw, 1.18rem);
  color: var(--ink-2); max-width: 34rem; line-height: 1.65;
}

.u-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* The primary action on the whole site: install the Android app. */
.u-install-btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .85rem 1.4rem .85rem 1.1rem; border-radius: 14px;
  background: linear-gradient(180deg, #1E9349, var(--green-deep));
  color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: var(--lift-green); border: 1px solid rgba(255,255,255,.14);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.u-install-btn:hover { transform: translateY(-1px); }
.u-install-btn:active { transform: translateY(0); }
.u-install-btn small { display: block; font-size: .72rem; font-weight: 600; opacity: .82; }
.u-install-btn strong { display: block; font-size: 1rem; line-height: 1.2; }
/* Sheen sweep on hover. */
.u-install-btn::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .55s ease;
}
.u-install-btn:hover::after { left: 120%; }

.u-ghost-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.25rem; border-radius: 14px;
  background: var(--white); color: var(--ink); text-decoration: none;
  font-weight: 650; border: 1px solid var(--line-2); box-shadow: var(--lift-1);
  transition: transform .18s ease, border-color .18s ease;
}
.u-ghost-btn:hover { transform: translateY(-1px); border-color: var(--green); }

.u-trust-strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-top: 1.5rem;
  font-size: var(--t--1); color: var(--muted);
}
.u-trust-strip span { display: inline-flex; align-items: center; gap: .4rem; }
.u-tick { color: var(--green); font-weight: 800; }

/* ---------- the two paths ----------
   The first decision a visitor makes. Deliberately two equal-weight
   cards rather than a primary/secondary pair: neither side of the
   marketplace is the "main" audience, and a worker who feels like the
   afterthought does not install the app. */
.u-paths { display: grid; gap: .9rem; grid-template-columns: 1fr; margin-top: 1.7rem; }
@media (min-width: 30rem) { .u-paths { grid-template-columns: 1fr 1fr; } }
.u-path {
  position: relative; overflow: hidden; text-decoration: none;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 1.15rem 1.2rem; box-shadow: var(--e-1);
  display: grid; gap: .15rem; align-content: start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.u-path:hover { transform: translateY(-2px); box-shadow: var(--e-2); }
.u-path-ic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.15rem; margin-bottom: .5rem;
}
.u-path b { font-size: 1.02rem; font-weight: 780; color: var(--ink); line-height: 1.25; }
.u-path span { font-size: var(--t--1); color: var(--muted); line-height: 1.5; }
.u-path .u-go {
  margin-top: .6rem; font-size: var(--t--1); font-weight: 700;
  display: inline-flex; align-items: center; gap: .35rem;
}
.u-path .u-go::after { content: "\2192"; transition: transform .2s ease; }
.u-path:hover .u-go::after { transform: translateX(3px); }
/* worker path */
.u-path-work { border-color: rgba(23,130,62,.28); }
.u-path-work:hover { border-color: var(--green); }
.u-path-work .u-path-ic { background: var(--green-tint); }
.u-path-work .u-go { color: var(--green-deep); }
/* employer path */
.u-path-post { border-color: rgba(245,166,35,.35); }
.u-path-post:hover { border-color: var(--saffron); }
.u-path-post .u-path-ic { background: #FFF3DE; }
.u-path-post .u-go { color: var(--saffron-dp); }

/* ---------- phone ---------- */
.u-stage { position: relative; display: grid; place-items: center; min-height: 30rem; }
.u-phone {
  position: relative; width: min(19rem, 76vw); aspect-ratio: 9 / 19;
  background: #10160F; border-radius: 2.4rem; padding: .55rem;
  box-shadow: var(--lift-3), 0 0 0 1px rgba(0,0,0,.35);
  animation: u-float 14s ease-in-out infinite alternate;
}
@keyframes u-float {
  from { transform: translateY(-3px); }
  to   { transform: translateY(3px); }
}
.u-screen {
  position: relative; height: 100%; border-radius: 2rem; overflow: hidden;
  background: var(--paper); display: grid; grid-template-rows: auto 1fr auto;
}
.u-screen-top {
  background: var(--white); padding: 1.5rem .9rem .6rem; border-bottom: 1px solid var(--line);
}
.u-screen-top h4 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--ink); }
.u-screen-top p { margin: .1rem 0 0; font-size: .68rem; color: var(--muted); }
.u-feed { position: relative; overflow: hidden; }
.u-feed-track { position: absolute; inset: 0; padding: .7rem; display: grid; gap: .6rem; align-content: start; }
/* Three app views cross-fade, so the phone shows the product rather than a still. */
.u-view { position: absolute; inset: 0; padding: .7rem; display: grid; gap: .55rem; align-content: start; opacity: 0; }
.u-view-1 { animation: u-cycle 13.5s 0s infinite; }
.u-view-2 { animation: u-cycle 13.5s 4.5s infinite; }
.u-view-3 { animation: u-cycle 13.5s 9s infinite; }
@keyframes u-cycle {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
.u-jobcard {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: .6rem .65rem; box-shadow: var(--lift-1);
}
.u-jobcard .u-jt { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.u-jobcard h5 { margin: 0; font-size: .78rem; font-weight: 750; color: var(--ink); }
.u-jobcard .u-wage { font-size: .8rem; font-weight: 800; color: var(--green-deep); }
.u-jobcard p { margin: .18rem 0 0; font-size: .63rem; color: var(--muted); }
.u-badge {
  display: inline-block; margin-top: .4rem; padding: .12rem .45rem; border-radius: 100px;
  font-size: .58rem; font-weight: 750; background: var(--green-tint); color: var(--green-deep);
}
.u-badge.amber { background: #FFF0D2; color: #8A5A00; }
.u-screen-nav {
  display: flex; justify-content: space-around; padding: .5rem .3rem .7rem;
  background: var(--white); border-top: 1px solid var(--line);
  font-size: .55rem; color: var(--muted); text-align: center;
}
.u-screen-nav b { color: var(--green-deep); }

/* Cards that drift beside the phone. */
.u-float-card {
  position: absolute; z-index: 2; background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: .6rem .75rem; box-shadow: var(--lift-2);
  font-size: var(--t--1); display: flex; align-items: center; gap: .55rem; max-width: 15rem;
}
.u-float-card b { display: block; font-size: .78rem; color: var(--ink); }
.u-float-card span { color: var(--muted); font-size: .68rem; }
.u-fc-ic {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--green-tint); flex: none; font-size: .9rem;
}
.u-fc-1 { top: 8%; left: -6%; animation: u-bob 11s ease-in-out infinite alternate; }
.u-fc-2 { bottom: 16%; right: -6%; animation: u-bob 11s 1.2s ease-in-out infinite alternate-reverse; }
@keyframes u-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@media (max-width: 61.99rem) { .u-fc-1, .u-fc-2 { display: none; } }

/* ==============================================================
   WALKTHROUGH — the whole journey inside a phone.

   Describing a flow in prose asks the reader to imagine it. Showing
   the actual screens, in order, does not. Both roles share the first
   four steps (install, number, OTP, choose a side) and then branch,
   because that is genuinely how the app works.
   ============================================================== */
.u-walk { background: var(--paper); border-block: 1px solid var(--line); }
.u-walk-grid { display: grid; gap: clamp(1.5rem,1rem + 3vw,3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .u-walk-grid { grid-template-columns: .95fr 1.05fr; } }

/* flow switch */
.u-tabs {
  display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 100px;
  background: var(--paper2); border: 1px solid var(--line); margin-bottom: 1.3rem;
}
.u-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: .55rem 1.1rem; border-radius: 100px; background: transparent; color: var(--muted);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.u-tab[aria-selected="true"] { background: var(--white); color: var(--green-deep); box-shadow: var(--lift-1); }

/* step list */
.u-wsteps { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: w; }
.u-wstep {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  padding: .8rem .9rem; border-radius: 13px; border: 1px solid transparent;
  cursor: pointer; background: transparent;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  text-align: left; font: inherit; width: 100%;
}
.u-wstep:hover { background: var(--white); border-color: var(--line); }
.u-wstep[aria-current="step"] {
  background: var(--white); border-color: var(--green); box-shadow: var(--lift-1); transform: translateX(2px);
}
.u-wstep-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--paper2); color: var(--muted); font-weight: 800; font-size: .76rem;
  transition: background .2s ease, color .2s ease;
}
.u-wstep[aria-current="step"] .u-wstep-n { background: var(--green); color: #fff; }
.u-wstep.done .u-wstep-n { background: var(--green-tint); color: var(--green-deep); }
.u-wstep b { display: block; font-size: .95rem; font-weight: 730; color: var(--ink); }
.u-wstep span { display: block; font-size: var(--t--1); color: var(--muted); line-height: 1.5; margin-top: .1rem; }

/* Timer bar on the active step — it plays like a video, so the reader
   can see how long is left rather than wondering if it has frozen. */
.u-wstep-bar { grid-column: 2; height: 3px; border-radius: 3px; background: var(--paper2); margin-top: .55rem; overflow: hidden; display: none; }
.u-wstep[aria-current="step"] .u-wstep-bar { display: block; }
.u-wstep-bar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 3px; }
.u-wstep[aria-current="step"] .u-wstep-bar i { animation: u-fill var(--dwell, 3.6s) linear forwards; }
.u-walk.paused .u-wstep-bar i { animation-play-state: paused; }
@keyframes u-fill { to { width: 100%; } }

/* play / pause */
.u-wnav .u-play-toggle { display: inline-flex; align-items: center; gap: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .u-wstep-bar { display: none !important; }
}

/* phone + screens */
.u-walk-stage { position: sticky; top: 5rem; display: grid; place-items: center; }
@media (max-width: 61.99rem) { .u-walk-stage { position: static; } }
.u-wphone {
  width: min(18rem, 74vw); aspect-ratio: 9 / 19; background: #10160F;
  border-radius: 2.3rem; padding: .5rem; box-shadow: var(--lift-3), 0 0 0 1px rgba(0,0,0,.35);
}
.u-wscreen-wrap { position: relative; height: 100%; border-radius: 1.95rem; overflow: hidden; background: var(--paper); }
.u-wscreen {
  position: absolute; inset: 0; display: none; grid-template-rows: auto 1fr auto;
  background: var(--paper); animation: u-swipe .38s cubic-bezier(.22,.8,.3,1);
}
.u-wscreen.on { display: grid; }
@keyframes u-swipe { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.u-wbar {
  background: var(--white); border-bottom: 1px solid var(--line); padding: 1.25rem .85rem .55rem;
}
.u-wbar h5 { margin: 0; font-size: .9rem; font-weight: 800; color: var(--ink); }
.u-wbar p  { margin: .1rem 0 0; font-size: .64rem; color: var(--muted); }
.u-wbody { padding: .75rem; display: grid; gap: .5rem; align-content: start; overflow: hidden; }
.u-wfoot {
  padding: .55rem .75rem .75rem; background: var(--white); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; font-size: .53rem; color: var(--muted);
}
.u-wfoot b { color: var(--green-deep); }

/* small building blocks used inside the screens */
.u-wcard { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: .55rem .6rem; box-shadow: var(--lift-1); }
.u-wrow { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.u-wcard h6 { margin: 0; font-size: .74rem; font-weight: 750; color: var(--ink); }
.u-wcard p  { margin: .14rem 0 0; font-size: .6rem; color: var(--muted); line-height: 1.45; }
.u-wamt { font-size: .76rem; font-weight: 800; color: var(--green-deep); }
.u-wtag {
  display: inline-block; margin-top: .35rem; padding: .1rem .42rem; border-radius: 100px;
  font-size: .55rem; font-weight: 750; background: var(--green-tint); color: var(--green-deep);
}
.u-wtag.amber { background: #FFF0D2; color: #8A5A00; }
.u-wtag.grey  { background: var(--paper2); color: var(--muted); }
.u-wbtn {
  margin-top: .1rem; text-align: center; padding: .5rem; border-radius: 9px;
  background: var(--green); color: #fff; font-size: .68rem; font-weight: 750;
}
.u-wbtn.ghost { background: var(--white); color: var(--green-deep); border: 1px solid var(--green); }
.u-wfield {
  background: var(--white); border: 1px solid var(--line-2); border-radius: 9px;
  padding: .5rem .6rem; font-size: .7rem; color: var(--ink); display: flex; justify-content: space-between;
}
.u-wfield i { font-style: normal; color: var(--muted); }
.u-wlabel { font-size: .58rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.u-otp { display: flex; gap: .32rem; }
.u-otp span {
  flex: 1; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px;
  background: var(--white); border: 1px solid var(--line-2); font-weight: 800; font-size: .85rem; color: var(--ink);
}
.u-otp span.fill { border-color: var(--green); color: var(--green-deep); }
.u-play {
  display: flex; gap: .55rem; align-items: center; background: var(--white);
  border: 1px solid var(--line); border-radius: 11px; padding: .6rem; box-shadow: var(--lift-1);
}
.u-play img { width: 40px; height: 40px; border-radius: 9px; object-fit: contain; background: var(--green-tint); padding: 4px; }
.u-play b { display: block; font-size: .76rem; color: var(--ink); }
.u-play span { font-size: .58rem; color: var(--muted); }
.u-play .u-inst { margin-left: auto; background: var(--green); color: #fff; font-size: .6rem; font-weight: 750; padding: .32rem .65rem; border-radius: 100px; }
.u-wsearch {
  background: var(--white); border: 1px solid var(--line-2); border-radius: 100px;
  padding: .42rem .7rem; font-size: .64rem; color: var(--muted); display: flex; gap: .4rem; align-items: center;
}

/* prev / next */
.u-wnav { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1rem; }
.u-wnav button {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: var(--t--1);
  padding: .5rem 1rem; border-radius: 100px; border: 1px solid var(--line-2);
  background: var(--white); color: var(--ink); box-shadow: var(--lift-1);
}
.u-wnav button:disabled { opacity: .45; cursor: default; }
.u-wnav .u-wcount { font-size: var(--t--1); color: var(--muted); min-width: 4.5rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .u-wscreen { animation: none; }
  .u-wstep, .u-tab { transition: none; }
}

/* ---------- install band (the page's primary conversion) ---------- */
.u-install {
  background:
    radial-gradient(50rem 26rem at 80% 0%, rgba(23,130,62,.10), transparent 60%),
    var(--paper);
  border-block: 1px solid var(--line);
}
.u-install-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 58rem) { .u-install-grid { grid-template-columns: 1.1fr .9fr; } }

.u-steps { display: grid; gap: .9rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.u-step {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1rem; box-shadow: var(--lift-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.u-step:hover { transform: translateX(2px); border-color: var(--green); box-shadow: var(--e-2); }
.u-step-n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font-weight: 800; font-size: .85rem; flex: none;
}
.u-step h4 { margin: 0 0 .15rem; font-size: .98rem; font-weight: 750; color: var(--ink); }
.u-step p { margin: 0; font-size: var(--t--1); color: var(--muted); line-height: 1.55; }

.u-spec {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1.3rem;
}
.u-spec div {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem;
}
.u-spec dt { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.u-spec dd { margin: .2rem 0 0; font-size: .9rem; font-weight: 700; color: var(--ink); }

/* ---------- how it works ---------- */
.u-lanes { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 54rem) { .u-lanes { grid-template-columns: 1fr 1fr; } }
.u-lane {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.5rem; box-shadow: var(--lift-1); overflow: hidden;
}
.u-lane::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--green), #4FBE7B);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s ease;
}
.u-lane.inv::before { background: linear-gradient(90deg, var(--saffron), #FFCE7A); }
.in .u-lane::before { transform: scaleX(1); }
.u-role {
  display: inline-block; font-size: .68rem; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-deep); background: var(--green-tint);
  padding: .22rem .6rem; border-radius: 100px;
}
.u-lane.inv .u-role { color: var(--saffron-dp); background: #FFF3DE; }
.u-lane h3 { margin: .7rem 0 1rem; font-size: var(--t-2); font-weight: 780; }
.u-flow { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.u-flow li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.u-flow .u-fn {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-deep); font-weight: 800; font-size: .74rem; flex: none;
}
.u-lane.inv .u-fn { background: #FFF3DE; color: var(--saffron-dp); }
.u-flow p { margin: 0; font-size: var(--t-0); color: var(--ink-2); line-height: 1.55; }

/* ---------- category marquee ---------- */
.u-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.u-marquee-track { display: flex; gap: .8rem; width: max-content; animation: u-slide 28s linear infinite; }
.u-marquee:hover .u-marquee-track { animation-play-state: paused; }
@keyframes u-slide { to { transform: translateX(-50%); } }
.u-chip {
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  padding: .6rem 1.05rem; box-shadow: var(--lift-1); font-weight: 650; color: var(--ink-2);
}
.u-chip i { font-style: normal; font-size: 1.05rem; }

/* ---------- trust ---------- */
.u-trust { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 44rem) { .u-trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .u-trust { grid-template-columns: repeat(3, 1fr); } }
.u-tcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem; box-shadow: var(--lift-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.u-tcard:hover { transform: translateY(-2px); box-shadow: var(--e-2); }
.u-tcard .u-tic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--green-tint); font-size: 1.15rem; margin-bottom: .8rem;
}
.u-tcard h3 { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 750; }
.u-tcard p { margin: 0; font-size: var(--t-0); color: var(--muted); line-height: 1.6; }

/* ---------- faq ---------- */
.u-faq { display: grid; gap: .7rem; margin-top: 2rem; max-width: 52rem; }
.u-faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 1.1rem; box-shadow: var(--lift-1); overflow: hidden;
}
.u-faq summary {
  cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.u-faq summary::-webkit-details-marker { display: none; }
.u-faq summary::after { content: "+"; font-size: 1.3rem; color: var(--green); font-weight: 700; line-height: 1; }
.u-faq details[open] summary::after { content: "\2013"; }
.u-faq p { margin: 0 0 1rem; color: var(--ink-2); font-size: var(--t-0); line-height: 1.65; }

/* ---------- closing band ---------- */
.u-close {
  position: relative; overflow: clip; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--green-deep), #125C2A 55%, #0C4A22);
  border-radius: var(--r); padding: clamp(2rem, 1.2rem + 3.5vw, 3.6rem) 1.5rem;
  box-shadow: var(--lift-3);
}
.u-close::before {
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%;
  background: radial-gradient(24rem 14rem at 30% 40%, rgba(245,166,35,.28), transparent 70%);
  animation: u-drift 18s ease-in-out infinite alternate;
}
.u-close > * { position: relative; z-index: 1; }
.u-close h2 { color: #fff; font-size: var(--t-4); margin: 0 0 .6rem; }
.u-close p { color: rgba(255,255,255,.86); max-width: 42ch; margin: 0 auto; }
.u-close .u-cta-row { justify-content: center; }
.u-close .u-ghost-btn { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }
.u-close .u-ghost-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }

/* ---------- scroll reveal ---------- */
.u-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }
.u-rv.in { opacity: 1; transform: none; }
.u-rv[data-d="1"] { transition-delay: .08s; }
.u-rv[data-d="2"] { transition-delay: .16s; }
.u-rv[data-d="3"] { transition-delay: .24s; }
.u-rv[data-d="4"] { transition-delay: .32s; }
.u-rv[data-d="5"] { transition-delay: .4s; }

/* ==============================================================
   Reduced motion: everything decorative stops, and anything that
   animates INTO view is shown outright. A page that stays blank
   because its reveal never ran is a broken page, not a calm one.
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
  .u-rv { opacity: 1; transform: none; transition: none; }
  .u-hero::before, .u-close::before, .u-phone, .u-fc-1, .u-fc-2,
  .u-marquee-track, .u-dot { animation: none !important; }
  .u-view { animation: none !important; opacity: 1; position: relative; }
  .u-view-2, .u-view-3 { display: none; }
  .u-underline path { stroke-dashoffset: 0; animation: none; }
  .u-lane::before { transform: scaleX(1); transition: none; }
  .u-install-btn, .u-ghost-btn, .u-step, .u-tcard { transition: none; }
  .u-progress { display: none; }
}

/* ---------- services grid ----------
   Replaces the old marquee. The heading promises "the trades inside them",
   so the card actually names them and gives the real count from the app
   catalog rather than scrolling categories and trades past in one flat row. */
.u-svc {
  display: grid; gap: clamp(.9rem, 2vw, 1.25rem); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.u-svc-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.3rem 1.35rem 1.2rem; box-shadow: var(--lift-1);
  display: grid; gap: .55rem; align-content: start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.u-svc-card:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--line-2); }
.u-svc-card h3 { margin: .15rem 0 0; font-size: var(--t-1); font-weight: 750; letter-spacing: -.015em; }
.u-svc-card p { margin: 0; font-size: var(--t--1); color: var(--muted); line-height: 1.65; }
.u-svc-n {
  justify-self: start; margin-top: .3rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green-deep); background: var(--green-tint);
  border: 1px solid rgba(23,130,62,.16); border-radius: 100px; padding: .24rem .62rem;
}

/* ---------- coverage ---------- */
.u-cov { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; padding: 0; margin: 0; }
.u-cov li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  padding: .6rem 1.1rem; box-shadow: var(--lift-1);
  font-weight: 650; font-size: var(--t-0); color: var(--ink-2);
}
.u-cov li svg { color: var(--green); width: 1.05em; height: 1.05em; }
.u-cov-note { margin-top: 1.5rem; font-size: var(--t--1); color: var(--muted); max-width: 54ch; }

@media (prefers-reduced-motion: reduce) {
  .u-svc-card { transition: none; }
}