/*
 * components.css — shared landing-page component rules hoisted from the per-page
 * bundles. STRICT extraction: a rule is here only if every page that loads this file
 * either did not use it or already had the identical rule, so rendering is unchanged.
 * Loaded once between style.css and each page bundle. Fix a component here, once.
 */

/* Inline text link: underlined so it's distinguishable by more than colour
   (WCAG 1.4.1 — green-ink vs body ink is only ~2.6:1, under the 3:1 colour-only
   threshold). Shared across all landing/legal pages, so this one rule fixes them. */
a.lp-link{color:var(--green-ink);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
a.lp-link:hover{color:var(--green)}
em{font-style:italic}
.wrap--trust{max-width:1100px}
.h2--md{font-size:clamp(28px,4vw,42px);line-height:1.1}
.btn--wa{background:#fff;color:var(--ink);padding:13px 22px;border:1px solid rgba(20,33,43,.14);gap:10px}
.btn--wa:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:0 11px 22px -12px rgba(16,60,40,.4)}
.btn--wa svg{flex:none}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hchip svg{flex:none}
.trust__stats{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:8px;width:100%;max-width:820px}
.trust__chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.tchip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;box-shadow:0 3px 10px -7px rgba(16,60,40,.3);transition:transform .15s,border-color .15s,box-shadow .15s}
.tchip:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:0 9px 20px -9px rgba(16,60,40,.4)}
.tchip--solid{font-weight:700;color:var(--green-ink);background:var(--green-50);border-color:rgba(22,163,74,.18)}
.tchip--solid:hover{transform:none;border-color:rgba(22,163,74,.18);box-shadow:none}
.tchip--solid .dot{width:9px;height:9px;border-radius:50%;background:var(--green);animation:lypii-pulse 2s infinite}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(36px,5vw,64px);align-items:center}
.split__img img{display:block;width:100%;border-radius:24px;box-shadow:0 26px 52px -26px rgba(12,50,30,.4);object-fit:cover}
.split--reverse .split__img{order:2}
.split__body p{margin:0}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,30px);box-shadow:0 4px 16px -10px rgba(18,40,30,.14);transition:transform .18s ease,box-shadow .18s ease}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(12,60,35,.24)}
.feat-card h3{font-family:var(--font-head);font-weight:700;font-size:19px;line-height:1.25;color:var(--ink);margin:0 0 9px}
.feat-card p{margin:0;font-size:14.5px;line-height:1.62;color:var(--muted)}
.feat-tag{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);background:var(--green-50);border-radius:999px;padding:4px 10px;margin-bottom:14px;transition:background .18s ease,color .18s ease}
.feat-grid.is-arm .feat-card{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.feat-grid.is-arm .feat-card.is-in{opacity:1;transform:none}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;align-items:start}
.plan h3{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--ink);margin:0 0 4px}
.plan>p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.plan__price{display:flex;align-items:baseline;gap:5px;margin-bottom:20px}
.plan__price .amt{font-family:var(--font-head);font-weight:700;font-size:46px;line-height:1;color:var(--ink)}
.plan__price .per{font-size:16px;color:var(--muted)}
.plan__cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:600;font-size:15px;padding:13px 20px;border-radius:999px;margin-bottom:24px;transition:border-color .18s,color .18s,transform .18s,box-shadow .18s,background .18s;background:#fff;color:var(--ink);border:1px solid var(--line)}
.plan__cta:hover{border-color:var(--green-ink);color:var(--green-ink);transform:translateY(-2px)}
.plan__sep{height:1px;background:var(--line);margin-bottom:22px}
.plan__feats{display:flex;flex-direction:column;gap:13px}
.plan__feats span{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.plan__feats svg{flex:none;margin-top:2px}
/* .plan.plan--dark (not just .plan--dark): the base .plan { background:#fff } lives
   in the per-page CSS which loads AFTER components.css, so it would otherwise win on
   equal specificity and blank out the dark card. The compound selector guarantees the
   dark styling wins regardless of load order. */
.plan.plan--dark{background:var(--dark-bg);border:1px solid rgba(22,163,74,.4);box-shadow:0 30px 60px -30px rgba(12,60,35,.6);position:relative;overflow:hidden}
.plan--dark__blob{position:absolute;top:-90px;right:-70px;width:240px;height:240px;border-radius:50%;background:var(--green);opacity:.16;filter:blur(28px);pointer-events:none}
.plan--dark__inner{position:relative}
.plan--dark__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.plan--dark h3{color:#fff;margin:0}
.plan--dark .badge{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.plan--dark>.plan--dark__inner>p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.66)}
.plan--dark .plan__price .amt{color:#fff}
.plan--dark .plan__price .per{color:rgba(255,255,255,.6)}
.plan--dark .plan__cta{background:var(--green-ink);color:#fff;border:none;box-shadow:0 14px 30px -12px rgba(16,120,60,.7)}
.plan--dark .plan__cta:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(16,120,60,.8);color:#fff}
.plan--dark .plan__cta span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--green)}
.plan--dark .plan__sep{background:rgba(255,255,255,.12)}
.plan--dark .plan__feats span{color:rgba(255,255,255,.82)}
.plans-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.plans-foot span{display:inline-flex;align-items:center;gap:8px;background:var(--green-50);border:1px solid rgba(22,163,74,.16);border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink)}
.plans-foot svg{flex:none}
.plans-note{text-align:center;margin:18px auto 0;max-width:46em;font-size:14.5px;line-height:1.6;color:var(--muted)}
.plans.is-arm .plan{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.plans.is-arm .plan.is-in{opacity:1;transform:none}
.ptable.is-arm{opacity:0;transform:translateY(14px)}
.ptable.is-arm.is-in{opacity:1;transform:none}
.plat-list{display:flex;flex-direction:column;gap:15px;margin-bottom:24px}
.plat-list .tx{font-size:15px;line-height:1.6;color:var(--ink-soft)}
.plat-list strong{color:var(--ink);font-weight:700}
.plat-logos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.plat-logo{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 16px;box-shadow:0 4px 14px -10px rgba(16,60,40,.25)}
/* Platforms flip-cards — shared by the 5 service pages (was duplicated in each page bundle). Flip trigger (:hover / .is-flipped) is in the hover block below; reduced-motion transition-off is in the reduced-motion block. Each page's JS toggles .is-flipped on .techcard. */
.techgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; perspective:1100px; }
.techcard { border-radius:16px; display:block; }
.techcard__inner { position:relative; display:block; width:100%; min-height:104px; transition:transform .55s cubic-bezier(.4,.15,.2,1); transform-style:preserve-3d; }
.techcard__face { position:absolute; inset:0; display:grid; place-items:center; padding:18px 16px; border-radius:16px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.techcard__front { background:#fff; border:1px solid var(--line); box-shadow:0 4px 14px -10px rgba(16,60,40,.25); }
.techcard__front img { max-height:34px; max-width:72%; width:auto; object-fit:contain; opacity:.9; }
.techcard__back { background:var(--green-ink); color:#fff; transform:rotateY(180deg); text-align:center; }
.techcard__back span { font-weight:600; font-size:13.5px; line-height:1.4; }
.techgrid__note { grid-column:1 / -1; margin:2px 0 0; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.techgrid__note svg { flex:none; }
.plat-logo img{max-height:30px;max-width:100%;width:auto;object-fit:contain;opacity:.85}
.limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:18px 40px;max-width:920px;margin:0 auto}
.limit{display:flex;gap:13px}
.limit svg{flex:none;margin-top:2px}
.limit span{font-size:15px;line-height:1.6;color:rgba(255,255,255,.74)}
.limit strong{color:#fff;font-weight:700}
.limits.is-arm .limit{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.limits.is-arm .limit.is-in{opacity:1;transform:none}
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.step-card{position:relative;min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,30px);box-shadow:0 4px 16px -8px rgba(18,40,30,.1);transition:transform .18s ease,box-shadow .18s ease}
.step-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(12,60,35,.24)}
.step-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.step-card__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--green-50);color:var(--green-ink)}
.step-card__n{font-family:var(--font-head);font-weight:700;font-size:34px;line-height:1;color:rgba(22,163,74,.18)}
.step-card__label{display:block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink);margin-bottom:6px}
.step-grid.is-arm .step-card{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.step-grid.is-arm .step-card.is-in{opacity:1;transform:none}
.step-card h3{font-family:var(--font-head);font-weight:600;font-size:19px;color:var(--ink);margin:0 0 8px}
.step-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.faq:hover{box-shadow:0 14px 30px -16px rgba(12,60,35,.22);border-color:rgba(22,163,74,.3)}
.cta h2{font-family:var(--font-head);font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;color:#fff}
.reviews-grid.is-arm .review{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.reviews-grid.is-arm .review.is-in{opacity:1;transform:none}
.ptable-wrap{margin:40px 0 0}
.ptable-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:0 4px}
.ptable-head .k{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink)}
.ptable-head .sub{font-size:13.5px;color:var(--muted)}
.ptable__colhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ptable__colhead .c1{flex:1 1 260px;min-width:0;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ptable__colhead .c2{display:flex;align-items:center;gap:14px;margin-left:auto}
.ptable__colhead .c2 span{font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ptable__colhead .c2 .pri{min-width:128px;text-align:right}
.ptable__row:first-of-type{border-top:none}
.ptable__task{flex:1 1 260px;min-width:0;font-size:15px;line-height:1.45;color:var(--ink);font-weight:600}
.ptable__meta{display:flex;align-items:center;gap:14px;margin-left:auto}
.ptable__ind svg{flex:none}
.ptable__price{flex:none;min-width:128px;text-align:right;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink)}
.ptable-note{margin:14px 4px 0;font-size:13px;line-height:1.55;color:var(--muted)}
.city-chip svg{flex:none}
.drev{display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:clamp(22px,2.8vw,28px);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.drev__avatar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(63,203,133,.18);color:#3FCB85;font-family:var(--font-head);font-weight:700;font-size:15px}
.drev__link{flex:none;display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-weight:600;font-size:11.5px;color:rgba(255,255,255,.6);transition:color .15s ease}
.drev__link:hover{color:#3FCB85}
.drev__meta{display:flex;flex-direction:column;min-width:0}
.drev__meta small{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.35}
.drev__meta strong{font-weight:700;font-size:14.5px;color:#fff;line-height:1.25}
.drev__person{display:flex;align-items:center;gap:12px;margin-top:auto}
.drev__quote{margin:0 0 18px;font-size:15px;line-height:1.62;color:rgba(255,255,255,.84);flex:1}
.drev__stars{display:flex;gap:3px}
.drev__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.kb-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:13px;color:var(--muted);margin-bottom:18px}
.kb-crumbs a{display:inline-flex;align-items:center;gap:5px;color:var(--muted);text-decoration:none}
.kb-crumbs a:hover{color:var(--green-ink)}
.kb-crumbs span[aria-current]{color:var(--ink);font-weight:600}
.kb-meta{display:inline-flex;align-items:center;gap:6px}
.other-card{text-decoration:none;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,30px);box-shadow:0 4px 16px -10px rgba(18,40,30,.14);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.other-card .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--green-50);color:var(--green-ink);margin-bottom:16px}
.other-card .more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--green-ink)}
.other-card h3{font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--ink);margin:0 0 8px}
.other-card p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.other-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(12,60,35,.24);border-color:rgba(22,163,74,.3)}
.other-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}

@media (hover:hover) {
  .feat-card:hover .feat-tag{background:#DCEFE3}
  .ptable__row:hover{background:var(--green-50)}
  .ptable__row:hover .ptable__price{color:var(--green-ink)}
  .plat-list .row:hover,.plat-list .row.is-hi{background:var(--green-50)}
  .plat-list .row:hover .ic,.plat-list .row.is-hi .ic{background:var(--green-ink);color:#fff}
  .techcard:hover .techcard__inner,.techcard.is-flipped .techcard__inner{transform:rotateY(180deg)}
  .city-chip:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
  .drev:hover{transform:translateY(-4px);border-color:rgba(63,203,133,.4);background:rgba(255,255,255,.06)}
}

@media (prefers-reduced-motion:reduce) {
  .feat-grid.is-arm .feat-card,.feat-grid.is-arm .feat-card.is-in{opacity:1;transform:none;transition:none}
  .feat-card .ic,.feat-tag{transition:none}
  .plans.is-arm .plan,.plans.is-arm .plan.is-in,.ptable.is-arm,.ptable.is-arm.is-in{opacity:1;transform:none;transition:none}
  .plan,.ptable,.ptable__row{transition:none}
  .limits.is-arm .limit,.limits.is-arm .limit.is-in{opacity:1;transform:none;transition:none}
  .step-grid.is-arm .step-card,.step-grid.is-arm .step-card.is-in{opacity:1;transform:none;transition:none}
  .reviews-grid.is-arm .review,.reviews-grid.is-arm .review.is-in{opacity:1;transform:none;transition:none}
  .techcard__inner{transition:none}
}

@media (max-width:767px) {
  .feat-card{flex:0 0 80%;scroll-snap-align:center}
  .plat-logos{grid-template-columns:1fr 1fr}
  .feat-grid,.step-grid,.other-grid,.reviews-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:4px 24px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .feat-grid::-webkit-scrollbar,.step-grid::-webkit-scrollbar,.other-grid::-webkit-scrollbar,.reviews-grid::-webkit-scrollbar{display:none}
  .split--reverse .split__img{order:0}
  .step-card,.other-card,.review{flex:0 0 84%;scroll-snap-align:center}
}

@media (max-width:600px) {
  .ptable__colhead{display:none}
  .ptable__meta{margin-left:0;flex:1 1 100%;justify-content:space-between}
  .ptable__price{min-width:0}
}

@media (max-width:1023px) {
  .feat-grid,.step-grid,.other-grid,.reviews-grid{grid-template-columns:repeat(2,1fr);gap:18px}
}

/* Mobile-only shared tweaks. */
@media (max-width: 767px) {
  /* Opt-in: show a split's photo after its text (class added in markup). */
  .split--mimglast .split__img { order: 2; }
  /* .ptable header is hidden on mobile, so drop the first row's top border. */
  .ptable__colhead + .ptable__row { border-top: none; }
}