/* RAVAD front page — sections that only exist on the home page. Builds on assets/ds/ravad-ds.css tokens. */

/* ---------- Hero: live product stage ---------- */
.home-hero h1 { max-width: 13ch; }
.home-hero .words .accent .w { color: var(--brand-500); }
/* The owner dashboard is the face of the page: a wider column, growing toward the right edge on wide screens. */
@media (min-width: 1024px) { .home-hero .hero__grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.24fr); } }
@media (min-width: 1280px) { .home-hero .stage { margin-right: calc(-1 * clamp(0px, (100vw - 1280px) / 2, 210px)); } }
.home-hero .stage__live { top: -18px; right: 28px; }
.stage { position: relative; padding-bottom: 120px; }
.stage__screen { position: relative; transform: perspective(1800px) rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transition: transform 1.1s var(--ease-soft), box-shadow 1.1s var(--ease-soft); }
.stage:hover .stage__screen { box-shadow: 0 50px 90px -34px rgba(6, 58, 99, .42); }
/* A soft "live data" highlight sweeping down the table */
.stage__scan { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; overflow: hidden; pointer-events: none; }
.stage__scan::before { content: ""; position: absolute; left: 0; right: 0; height: 70px; top: -70px; background: linear-gradient(180deg, rgba(0, 130, 198, 0), rgba(0, 130, 198, .10) 55%, rgba(0, 130, 198, .22) 56%, rgba(0, 130, 198, 0) 57%); animation: scan 5.5s cubic-bezier(.45, 0, .25, 1) 1.8s infinite; }
@keyframes scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(560px); opacity: 0; } }
.stage__live { position: absolute; right: 18px; top: 54px; display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font: 600 13px var(--font-body); color: var(--ink); box-shadow: var(--shadow-2); }
.stage__live .dot { color: var(--success); }
.stage__feed { position: absolute; left: -20px; bottom: 0; width: min(290px, 62%); display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .9); border-radius: 16px; padding: 10px 14px; box-shadow: 0 18px 40px -18px rgba(6, 58, 99, .35), 0 0 0 1px var(--line); opacity: 0; transform: translateX(-18px) scale(.96); animation: toast 9.6s infinite; animation-delay: calc(var(--i) * 1.1s + 1.6s); }
.toast__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--brand-100); color: var(--brand-600); }
.toast__ic .icon { width: 19px; height: 19px; }
.toast--amber .toast__ic { background: var(--warning-bg); color: var(--warning); }
.toast--mint .toast__ic { background: var(--success-bg); color: var(--success); }
.toast b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.3; }
.toast small { color: var(--muted); font-size: 13px; }
@keyframes toast {
  0% { opacity: 0; transform: translateX(-18px) scale(.96); animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
  8%, 80% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  90%, 100% { opacity: 0; transform: translateY(-8px) scale(.97); }
}
.toast__ic { animation: tick 9.6s infinite; animation-delay: calc(var(--i) * 1.1s + 1.6s); }
@keyframes tick { 0%, 6% { transform: scale(.6); } 12% { transform: scale(1.12); } 16%, 100% { transform: none; } }
@media (max-width: 700px) {
  .stage { padding-bottom: 0; }
  .stage__screen { transform: none; }
  .stage__feed { position: relative; left: 0; width: 100%; margin-top: -28px; padding: 0 12px; }
}

/* ---------- Outcomes for owners ---------- */
.outcomes { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .outcomes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .outcomes { grid-template-columns: repeat(4, 1fr); } }
.outcome { --c: var(--brand-600); --tint: #e8f3fb; position: relative; display: flex; flex-direction: column; padding: 30px 28px 32px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--tint) 0%, #fff 46%); }
.outcome--mint { --c: #0b8a57; --tint: #e5f5ed; }
.outcome--amber { --c: #0e7c86; --tint: #e3f4f5; }
.outcome--navy { --c: #063a63; --tint: #e6edf5; }
.outcome__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s-6); }
.outcome .icon-tile { background: #fff; color: var(--c); box-shadow: 0 8px 20px -12px rgba(6, 58, 99, .35); }
.outcome.lift:hover .icon-tile { background: var(--c); color: #fff; }
.outcome.lift::before { background: var(--c); }
.outcome__tag { font: 700 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.outcome h3 { font-size: 1.3rem; margin-bottom: var(--s-3); }
.outcome p { color: var(--muted); margin: 0; }

/* ---------- Owner analytics ---------- */
.owner { display: grid; gap: var(--s-8); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .owner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.owner .checks { margin: var(--s-5) 0 var(--s-6); }
.dash { position: relative; padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 50px 90px -50px rgba(6, 58, 99, .45); }
.dash::before { content: ""; position: absolute; inset: -40px 0 auto auto; width: 320px; height: 320px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 130, 198, .16), rgba(0, 130, 198, 0)); }
.dash__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.dash__tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.dash__tabs button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: 600 13px var(--font-body); color: var(--muted); cursor: pointer; transition: background .4s var(--ease-soft), color .4s var(--ease-soft), box-shadow .4s; }
.dash__tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(6, 58, 99, .35); }
.dash__tabs button:hover { color: var(--ink); }
.dash__view[hidden] { display: none; }
.dash__caption { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }
.dash__note { margin: 12px 0 0; font-size: 12px; color: var(--subtle); text-align: right; }
.dash__head b { font: 800 1.1rem var(--font-head); color: var(--ink); }
.dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash__kpis > div { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.dash__kpis small { display: block; font-size: 12.5px; color: var(--muted); }
.dash__kpis b { display: block; margin: 4px 0 2px; font: 800 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.1 var(--font-head); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash__kpis em { font-style: normal; font-size: 12px; color: var(--muted); }
.dash__kpis em.up { color: var(--success); font-weight: 600; }
.dash__chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin: 8px 0 18px; padding: 12px 6px 0; border-bottom: 1px solid var(--line); background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 37px; }
.dash__chart span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--brand-500), #5fbbe9); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-soft); transition-delay: calc(var(--b) * 60ms + .3s); }
.dash__chart span:last-child { background: linear-gradient(180deg, var(--success), #5fd3a1); }
.dash.is-in .is-run .dash__chart span { transform: none; }
.dash__alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash__alerts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--ink-2); background: var(--surface-2); opacity: 0; transform: translateX(16px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.dash__alerts li:nth-child(1) { transition-delay: .9s; } .dash__alerts li:nth-child(2) { transition-delay: 1.02s; }
.dash__alerts li:nth-child(3) { transition-delay: 1.14s; } .dash__alerts li:nth-child(4) { transition-delay: 1.26s; }
.dash.is-in .is-run .dash__alerts li { opacity: 1; transform: none; }
.dash__alerts .icon { width: 18px; height: 18px; flex: none; }
.dash__alerts .is-warn .icon { color: var(--warning); }
.dash__alerts .is-bad .icon { color: var(--danger); }
.dash__alerts .is-ok { background: var(--success-bg); }
.dash__alerts .is-ok .icon { color: var(--success); }
.dash__alerts .is-info .icon { color: var(--brand-500); }
@media (max-width: 560px) { .dash__kpis { grid-template-columns: 1fr 1fr; } .dash__kpis > div:last-child { display: none; } }

/* ---------- Products: two equal cards with a peek of the real screen ---------- */
.pcards { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pcards { grid-template-columns: 1fr 1fr; } }
.pcard { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px) 0; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; }
.pcard:hover { color: inherit; }
.pcard__tag { display: inline-flex; align-items: center; gap: 12px; font: 700 13px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--brand-600); margin-bottom: var(--s-4); }
.pcard__tag .icon-tile { width: 42px; height: 42px; border-radius: 12px; }
.pcard h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--s-4); }
.pcard .checks { margin-bottom: var(--s-5); }
.pcard__addon { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: var(--s-5); border-radius: 12px; background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); }
.pcard__addon .icon { width: 18px; height: 18px; color: var(--brand-500); }
.pcard .link-arrow { margin-bottom: var(--s-6); }
.pcard__peek { display: block; margin-top: auto; height: 230px; overflow: hidden; border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 40px -24px rgba(6, 58, 99, .35); transform: translateY(14px); transition: transform .8s var(--ease-soft); }
.pcard__peek img { width: 100%; }
.pcard__peek--mock .frame-browser { border: 0; box-shadow: none; border-radius: 0; }
.pcard:hover .pcard__peek { transform: translateY(0); }
/* Product cards: two app cards rising from the bottom edge, cropped like a peek */
.pcard__peek--cards { position: relative; height: 270px; margin-inline: calc(-1 * clamp(28px, 4vw, 44px)); padding: 26px clamp(20px, 3vw, 36px) 0; border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(180deg, rgba(232, 243, 251, 0) 0%, #e8f3fb 55%, #e3f4ee 100%); }
.pcard__peek--cards .phones { padding: 0; }
.pcard__peek--cards .rcard__win { box-shadow: 0 24px 50px -24px rgba(6, 58, 99, .45), 0 0 0 1px rgba(15, 23, 42, .06); }
.pcard { overflow: hidden; }
@media (max-width: 560px) { .pcard__peek--cards { height: 210px; } }

/* ---------- Also from RAVAD ---------- */
.extra__grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .extra__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.extra__card { display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; }
.extra__card:hover { color: inherit; }
.extra__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s-5); }
.extra__kicker { font: 600 13px var(--font-body); color: var(--brand-600); margin-bottom: 4px; }
.extra__card h3 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.extra__card p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.extra__card .link-arrow { margin-top: auto; font-size: var(--fs-sm); }

/* Custom business solutions: large block */
.custom { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: var(--s-6); padding: clamp(32px, 5vw, 72px); border-radius: var(--r-xl); background: linear-gradient(135deg, #f3f8fc 0%, #e4f0f9 100%); border: 1px solid var(--brand-200); }
.custom::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0, 130, 198, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 130, 198, .07) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse at 80% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 40%, #000 0%, transparent 70%); }
@media (min-width: 1000px) { .custom { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.custom .eyebrow { background: none; }
.custom h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); max-width: 18ch; }
.custom__steps { list-style: none; counter-reset: cs; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: var(--s-6) 0 var(--s-6); padding: 0; }
@media (min-width: 640px) { .custom__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.custom__steps li { counter-increment: cs; position: relative; padding-top: 14px; border-top: 2px solid var(--brand-200); }
.custom__steps li::before { content: "0" counter(cs); display: block; font: 700 12px var(--font-body); letter-spacing: .1em; color: var(--brand-600); margin-bottom: 4px; }
.custom__steps li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--brand-600); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-soft); transition-delay: calc(var(--n, 0) * .25s + .3s); }
.custom__steps li:nth-child(2) { --n: 1; } .custom__steps li:nth-child(3) { --n: 2; } .custom__steps li:nth-child(4) { --n: 3; }
.custom.is-in .custom__steps li::after { transform: none; }
.custom__steps b { display: block; font: 700 1rem var(--font-head); color: var(--ink); }
.custom__steps span { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
.custom__grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.custom__tile { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .85); border: 1px solid #fff; box-shadow: 0 20px 40px -30px rgba(6, 58, 99, .35); opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft), box-shadow .7s var(--ease-soft); transition-delay: calc(var(--i) * .12s + .2s); }
.custom.is-in .custom__tile { opacity: 1; transform: none; }
.custom.is-in .custom__tile:hover { transform: translateY(-6px); transition-delay: 0s; }
.custom__tile .icon-tile { margin-bottom: 6px; }
.custom__tile b { font: 700 1.05rem var(--font-head); color: var(--ink); }
.custom__tile span:last-child { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
@media (max-width: 520px) { .custom__grid { grid-template-columns: 1fr; } }

/* ---------- Testimonials: one featured quote + four short ones ---------- */
.voices { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .voices { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; } }
.voices__grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .voices__grid { grid-template-columns: 1fr 1fr; }
  .voices__grid > .voice:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.voice { margin: 0; display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.voice blockquote { margin: 0 0 var(--s-5); font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.voice figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.voice figcaption img { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); padding: 4px; background: #fff; }
.voice figcaption b { display: block; color: var(--ink); font-size: 15px; }
.voice figcaption small { color: var(--muted); font-size: 13px; }
.voice--featured { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 48px); background: var(--panel-gradient); border: 0; color: #fff; }
.voice__mark { position: absolute; right: 24px; top: -30px; font: 800 220px/1 var(--font-head); color: rgba(255, 255, 255, .08); pointer-events: none; }
.voice__stars { color: #ffc94a; letter-spacing: 3px; font-size: 18px; margin-bottom: var(--s-4); }
.voice--featured blockquote { font: 600 clamp(1.15rem, 1rem + .5vw, 1.35rem)/1.55 var(--font-head); color: #fff; letter-spacing: -.01em; }
.voice--featured figcaption b { color: #fff; }
.voice--featured figcaption small { color: var(--on-navy-muted); }
.voice--featured figcaption img { border-color: transparent; }

/* ---------- About the company (deep-blue panel) ---------- */
.company { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); padding: clamp(32px, 5vw, 72px); border-radius: var(--r-xl); }
@media (min-width: 1000px) { .company { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; } }
.company h2 { max-width: 16ch; }
.company__intro > p { font-size: var(--fs-lg); max-width: 52ch; }
.company__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, .16); }
.company__stats .stat__value { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); }
.company__label { margin: 0 0 var(--s-4); font: 700 13px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #9fd6f6; }
.company__more { display: grid; gap: 12px; }
.company__link { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); text-decoration: none; transition: background .5s var(--ease-soft), border-color .5s, transform .6s var(--ease-soft); }
.company__link:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); transform: translateX(6px); }
.company__link b { display: block; color: #fff; font: 700 1.05rem var(--font-head); }
.company__link small { display: block; margin-top: 2px; color: var(--on-navy-muted); font-size: var(--fs-sm); line-height: 1.45; }
.company__link > span:nth-child(2) { flex: 1; }
.company .company__go { width: 20px; height: 20px; color: #fff; opacity: .7; transition: transform .5s var(--ease-soft), opacity .5s; }
.company__link:hover .company__go { transform: translateX(4px); opacity: 1; }
@media (max-width: 560px) { .company__stats { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .toast { opacity: 1; transform: none; }
  .stage__scan { display: none; }
  .dash__chart span, .dash__alerts li, .custom__tile { opacity: 1 !important; transform: none !important; }
  .custom__steps li::after { transform: none; }
}

/* ---------- FAQ: intro + contact card | questions ---------- */
.faqx { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .faqx { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); } .faqx__intro { position: sticky; top: 110px; } }
.faqx__intro h2 { max-width: 12ch; }
.faqx__card { margin-top: var(--s-6); padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(6, 58, 99, .4); display: grid; gap: 10px; justify-items: start; }
.faqx__card .icon-tile { margin-bottom: 4px; }
.faqx__card b { font: 700 1.15rem var(--font-head); color: var(--ink); }
.faqx__card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.faqx__phone { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 8px; font: 700 1.2rem var(--font-head); color: var(--ink); text-decoration: none; }
.faqx__phone .icon { width: 20px; height: 20px; color: var(--brand-500); }
.faqx__phone:hover { color: var(--brand-600); }

/* FAQ polish: numbered questions and a deep-blue help card */
.faqx .faq { counter-reset: q; }
.faqx .faq summary { justify-content: flex-start; }
.faqx .faq summary::before { counter-increment: q; content: counter(q, decimal-leading-zero); flex: none; width: 34px; font: 700 12px var(--font-body); letter-spacing: .1em; color: var(--brand-500); }
.faqx .faq summary::after { margin-left: auto; }
.faqx .faq details > div { padding-left: 82px; }
@media (max-width: 560px) { .faqx .faq details > div { padding-left: 24px; } }
.faqx__card { position: relative; overflow: hidden; isolation: isolate; background: var(--panel-gradient); border: 0; box-shadow: 0 40px 70px -40px rgba(6, 58, 99, .55); }
.faqx__card::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.faqx__card b, .faqx__phone { color: #fff; }
.faqx__card p { color: var(--on-navy-muted); }
.faqx__phone .icon { color: #9fd6f6; }
.faqx__phone:hover { color: #fff; text-decoration: underline; }

/* =========================================================================
   Product pages (templates/page-product.php) — same language as the home page
   ========================================================================= */
.product-hero h1 { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); }
.crumbs { display: flex; gap: 8px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-4); }
.crumbs a { text-decoration: none; font-weight: 600; }
.product-stage { padding-bottom: 0; }
.product-stage .frame-browser { box-shadow: 0 50px 90px -40px rgba(6, 58, 99, .42); }

/* Problems */
.pgrid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pain-card { padding: 30px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(12, 34, 54, .04); }
.pain-card__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-100); color: var(--brand-600); margin-bottom: var(--s-5); }
.pain-card h3 { font-size: 1.25rem; margin-bottom: var(--s-3); }
.pain-card p { color: var(--muted); margin: 0; }
/* The better way: the old way struck through above the result */
.win-card .pain-card__ic { background: var(--success-bg); color: var(--success); }
.win-card__was { display: block; margin: -4px 0 8px; color: var(--muted); font-size: var(--fs-sm); }
.win-card__was s { text-decoration-color: rgba(214, 69, 69, .7); text-decoration-thickness: 2px; }

/* Inside the product: tabs + panel card */
.modules .tabs__list { justify-content: center; }
.module { display: grid; gap: var(--s-7); align-items: center; grid-template-columns: minmax(0, 1fr); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(6, 58, 99, .4); }
@media (min-width: 1000px) { .module { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.module h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.025em; }
.module__text > p { color: var(--muted); font-size: var(--fs-lg); }
.module .checks { margin: var(--s-5) 0 0; }

/* Works with + security */
.facts { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { --c: var(--brand-600); --tint: #e8f3fb; padding: clamp(28px, 4vw, 40px); border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--tint) 0%, #fff 55%); }
.fact--mint { --c: #0b8a57; --tint: #e5f5ed; }
.fact .icon-tile { background: #fff; color: var(--c); box-shadow: 0 8px 20px -12px rgba(6, 58, 99, .35); margin-bottom: var(--s-5); }
.fact .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fact .chips .badge { background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); padding: 6px 12px; }

/* Testimonials with a single quote */
@media (min-width: 1000px) { .voices--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-inline: auto; } }

/* =========================================================================
   About page
   ========================================================================= */
.story h2 .accent { color: var(--brand-500); }
/* About: the company in four numbers */
.about-numbers { padding-top: clamp(8px, 2vw, 24px); }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -48px rgba(6, 58, 99, .45); }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbers > div { display: grid; gap: 6px; align-content: start; padding: clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 32px); border-left: 1px solid var(--line); }
.numbers > div:nth-child(odd) { border-left: 0; }
@media (min-width: 900px) { .numbers > div:nth-child(odd) { border-left: 1px solid var(--line); } .numbers > div:first-child { border-left: 0; } }
@media (max-width: 899px) { .numbers > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.numbers .stat__value { font-size: clamp(2.1rem, 1.5rem + 1.8vw, 2.9rem); color: var(--ink); }
.numbers > div:last-child .stat__value { color: var(--brand-500); }
.numbers .stat__label { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.about-more { margin-top: var(--s-5); }
.story { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .story { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-8); } }
.story h2 { max-width: 16ch; }
.story__text p { font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.75; }
.about-also { margin: var(--s-6) 0 0; text-align: center; color: var(--muted); }
.about-also a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.about-also .icon { width: 14px; height: 14px; }
.where { display: grid; gap: var(--s-6); align-items: center; grid-template-columns: minmax(0, 1fr); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); }
@media (min-width: 900px) { .where { grid-template-columns: 1fr 1fr; } }
.where__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.where__list li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); }
.where__list .icon { color: var(--brand-500); margin-top: 2px; }
.where__list b { display: block; font: 700 13px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.where__list a { font-weight: 600; text-decoration: none; }

/* =========================================================================
   Contact page
   ========================================================================= */
.contact-layout { display: grid; gap: var(--s-8); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.contact-intro h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 3.8rem); }
.next { list-style: none; margin: var(--s-6) 0 var(--s-6); padding: 0; display: grid; gap: 14px; position: relative; }
.next::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, var(--brand-500), #3cc39a); opacity: .35; }
.next li { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.next li > span { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--brand-200); font: 800 15px var(--font-head); color: var(--brand-600); box-shadow: 0 8px 18px -12px rgba(0, 106, 166, .5); }
.next b { display: block; color: var(--ink); font: 700 1.05rem var(--font-head); }
.next small { color: var(--muted); font-size: var(--fs-sm); }
.contact-direct { display: grid; gap: 12px; }
.contact-direct > div { display: flex; gap: 12px; align-items: flex-start; }
.contact-direct .icon { color: var(--brand-500); margin-top: 2px; }
.contact-direct b { display: block; font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-direct a { font-weight: 600; text-decoration: none; }
.contact-direct a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.contact-trust .trust { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
/* Phones and tablets: the form comes right after the headline; steps, contacts and logos follow it. */
@media (max-width: 1023px) {
  .contact-layout { gap: 0; }
  .contact-intro { display: contents; }
  .contact-intro > .eyebrow { justify-self: start; }
  .contact-layout > .contact-card-form { order: 1; margin: var(--s-2) 0 var(--s-4); }
  .contact-intro > .next, .contact-intro > .contact-direct, .contact-intro > .contact-trust { order: 2; }
}
.contact-card-form { padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: 0 50px 90px -50px rgba(6, 58, 99, .45); }
.contact-card-form h2 { margin-bottom: 4px; }
.contact-card-form .wpcf7 form.form { margin-top: var(--s-5); }
.contact-card-form .btn, .contact-card-form input[type="submit"] { width: 100%; }
.contact-card-form input[type="submit"] { min-height: 54px; border: 0; border-radius: 12px; background: var(--brand-600); color: #fff; font: 600 1rem var(--font-body); cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0, 106, 166, .55); transition: background .2s; }
.contact-card-form input[type="submit"]:hover { background: var(--brand-700); }
.contact-card-form textarea { min-height: 140px; height: 150px; }

/* Product pages: screens sit flat and straight (no 3D tilt) */
.product-stage .stage__screen, .product-stage:hover .stage__screen { transform: none; }
.product-hero .hero__grid { align-items: center; }

/* ---------- Product hero with an app screen (Home Care, Adult Day Care) ---------- */
@media (min-width: 1024px) { .product-hero--app .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); } }
.product-stage.stage--app { padding-bottom: 84px; }
/* On wide screens the screen grows toward the right edge instead of staying postcard-sized. */
@media (min-width: 1280px) { .product-stage.stage--app { margin-right: calc(-1 * clamp(0px, (100vw - 1280px) / 2, 150px)); } }
.stage--app .stage__screen .frame-browser { box-shadow: 0 50px 100px -40px rgba(6, 58, 99, .45); }
/* Docs: three phones instead of a browser window */
.stage--phones { padding-top: 12px; }
.stage--phones .stage__screen { max-width: 720px; margin-inline: auto; }
.stage--phones .stage__feed { z-index: 5; }
.feat__media .phones { padding-bottom: 8px; }
.stage--app .stage__feed { left: -16px; bottom: 0; width: min(300px, 56%); }
@media (min-width: 1024px) { .stage--app .stage__feed { left: -40px; } }
@media (max-width: 700px) {
  .product-stage.stage--app { padding-bottom: 0; }
  .stage--app .stage__feed { left: 0; width: 100%; margin-top: -24px; }
  .stage__feed .toast:nth-child(n+2) { display: none; } /* stacked toasts would reserve empty space on phones */
}

/* ---------- Inside the product: alternating feature rows ---------- */
.feats { overflow: hidden; }
.feat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto clamp(48px, 6vw, 88px); }
.feat-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px -14px rgba(6, 58, 99, .4); font: 600 15px var(--font-body); color: var(--ink-2); text-decoration: none; transition: transform .35s var(--ease-soft), border-color .35s, color .35s; }
.feat-nav a .icon { width: 18px; height: 18px; color: var(--brand-500); }
.feat-nav a:hover, .feat-nav a:focus-visible { transform: translateY(-2px); border-color: var(--brand-200); color: var(--brand-700); }
.feat { display: grid; gap: clamp(36px, 4.5vw, 72px); align-items: center; grid-template-columns: minmax(0, 1fr); scroll-margin-top: 110px; }
.feat + .feat { margin-top: clamp(80px, 9vw, 136px); }
@media (min-width: 1000px) {
  .feat { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .feat--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .feat--flip .feat__text { order: 2; }
}
.feat__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s-5); font: 700 13px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); }
.feat__kicker .icon { width: 18px; height: 18px; }
.feat__num { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; background: linear-gradient(140deg, var(--brand-500), #0a6aa8); color: #fff; font: 800 15px var(--font-head); letter-spacing: 0; box-shadow: 0 12px 24px -12px rgba(0, 130, 198, .85); }
.feat h3 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: var(--s-4); }
.feat__text > p { color: var(--muted); font-size: var(--fs-lg); margin-bottom: var(--s-5); }
.feat .checks { margin-bottom: 0; }
.feat__note { display: flex; align-items: center; gap: 14px; margin-top: var(--s-6); padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color .35s, box-shadow .35s; }
.feat__note .icon-tile { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.feat__note .icon-tile .icon { width: 20px; height: 20px; }
.feat__note > .icon { width: 20px; height: 20px; margin-left: auto; flex: none; color: var(--brand-500); transition: transform .35s var(--ease-soft); }
.feat__note:hover { border-color: var(--brand-200); color: var(--ink); box-shadow: 0 14px 30px -20px rgba(6, 58, 99, .45); }
.feat__note:hover > .icon { transform: translateX(4px); }
/* A soft colored panel sits behind each screen, offset to the outside edge. */
.feat__media { position: relative; isolation: isolate; }
.feat__media::before { content: ""; position: absolute; z-index: -1; inset: 10% -6% -7% 14%; border-radius: 36px; background: linear-gradient(140deg, #cde8fb 0%, #e2f4ec 100%); }
.feat--flip .feat__media::before { inset: 10% 14% -7% -6%; background: linear-gradient(220deg, #d5e9fb 0%, #e9eefb 100%); }
.feat__media .frame-browser { box-shadow: 0 40px 80px -36px rgba(6, 58, 99, .45); transition: transform 1.1s var(--ease-soft), box-shadow 1.1s var(--ease-soft); }
.feat:hover .feat__media .frame-browser { transform: translateY(-6px); box-shadow: 0 54px 96px -40px rgba(6, 58, 99, .5); }
@media (max-width: 999px) {
  .feat__media::before, .feat--flip .feat__media::before { inset: 8% -4% -5% 8%; }
}
/* Wide screens: screens grow past the container toward the outer edge. */
@media (min-width: 1280px) {
  .feat__media { margin-right: calc(-1 * clamp(0px, (100vw - 1280px) / 2, 110px)); }
  .feat--flip .feat__media { margin-right: 0; margin-left: calc(-1 * clamp(0px, (100vw - 1280px) / 2, 110px)); }
}

/* Also included */
.extra__card.incl p { margin-bottom: 0; }
.extra__card.incl .badge { background: var(--success-bg); color: var(--success); }

@media (prefers-reduced-motion: reduce) {
  .feat:hover .feat__media .frame-browser, .feat-nav a:hover { transform: none; }
}

/* Feature rows: one callout card with the key number, overlapping the inner bottom corner of the screen */
.feat__callout { position: absolute; z-index: 2; left: -40px; bottom: -40px; display: flex; align-items: center; gap: 12px; max-width: 290px; padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 22px 44px -18px rgba(6, 58, 99, .4), 0 0 0 1px var(--line); }
.feat--flip .feat__callout { left: auto; right: -40px; }
.feat__callout-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--brand-100); color: var(--brand-600); }
.feat__callout-ic .icon { width: 21px; height: 21px; }
.feat__callout--mint .feat__callout-ic { background: var(--success-bg); color: var(--success); }
.feat__callout--amber .feat__callout-ic { background: var(--warning-bg); color: var(--warning); }
.feat__callout b { display: block; color: var(--ink); font: 700 16px/1.25 var(--font-head); }
.feat__callout small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.feat__media.is-in .feat__callout { animation: callout-in .9s var(--ease-spring) .5s both; }
@keyframes callout-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 999px) {
  .feat__callout, .feat--flip .feat__callout { position: relative; left: auto; right: auto; bottom: auto; margin: -22px auto 0; width: max-content; max-width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { .feat__media.is-in .feat__callout { animation: none; } }

/* =========================================================================
   Legal notice (templates/page-evvprivacynotice.php, inc/legal.php)
   ========================================================================= */
.legal-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.legal-hero h1 { max-width: 18ch; font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); }
.legal-hero__meta { display: inline-flex; align-items: center; gap: 8px; margin: var(--s-4) 0 0; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.legal-hero__meta .icon { width: 16px; height: 16px; color: var(--brand-500); }
.legal { padding-top: 0; }
.legal__grid { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .legal__grid { grid-template-columns: 270px minmax(0, 1fr); gap: 56px; } }
.legal__nav { display: none; }
@media (min-width: 1000px) {
  .legal__nav { position: sticky; top: 104px; display: block; max-height: calc(100vh - 130px); overflow: auto; padding: 22px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
}
.legal__nav > p { margin: 0 0 10px; font: 700 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); }
.legal__nav ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: legal; }
.legal__nav a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--ink-2); font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: background .3s, color .3s; }
.legal__nav a:hover, .legal__nav a:focus-visible { background: var(--brand-50); color: var(--brand-700); }
.legal__doc { max-width: 860px; padding: clamp(26px, 4vw, 60px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -48px rgba(6, 58, 99, .45); color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }
.legal__doc p { margin: 0 0 1em; }
.legal__doc a { color: var(--brand-600); text-decoration: underline; text-decoration-color: rgba(0, 130, 198, .35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__doc a:hover { text-decoration-color: currentColor; }
.legal__kicker { margin: 0 0 var(--s-4) !important; font: 700 13px var(--font-body); letter-spacing: .14em; color: var(--brand-600); }
.legal__h { display: flex; align-items: center; gap: 12px; margin: 2.2em 0 .9em; font-size: 1.2rem; font-weight: 800; letter-spacing: .04em; color: var(--ink); scroll-margin-top: 110px; }
.legal__h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.legal__lead { color: var(--muted); }
.legal__qa { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0 0 1.2em; }
@media (min-width: 760px) { .legal__qa { grid-template-columns: 1fr 1fr; } }
.legal__q { padding: 18px 20px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); }
.legal__q b { display: block; margin-bottom: 6px; color: var(--ink); font: 700 1rem/1.35 var(--font-head); }
.legal__q p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.legal__toc-list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin: 0 0 1em; padding: 0; list-style: none; }
@media (min-width: 760px) { .legal__toc-list { grid-template-columns: 1fr 1fr; } }
.legal__doc .legal__toc-list a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: border-color .3s, background .3s, transform .3s var(--ease-soft); }
.legal__doc .legal__toc-list a:hover { border-color: var(--brand-200); background: var(--brand-50); transform: translateY(-1px); }
.legal__toc-list span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--brand-100); color: var(--brand-700); font: 800 13px var(--font-head); }
.legal__sec { display: flex; align-items: center; gap: 14px; margin: 2.6em 0 .8em; padding-top: 1.6em; border-top: 1px solid var(--line); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 800; letter-spacing: .03em; line-height: 1.35; color: var(--ink); scroll-margin-top: 110px; }
.legal__sec span { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: linear-gradient(140deg, var(--brand-500), #0a6aa8); color: #fff; font: 800 15px var(--font-head); letter-spacing: 0; box-shadow: 0 10px 22px -12px rgba(0, 130, 198, .85); }
.legal__sub { margin: 1.6em 0 .6em; font-size: 1.08rem; color: var(--ink); }
.legal__short { padding: 14px 18px; border-radius: 14px; border-left: 4px solid var(--brand-500); background: var(--brand-50); color: var(--ink); }
.legal__short b { margin-right: 6px; color: var(--brand-700); }
.legal__list { display: grid; gap: 10px; margin: 0 0 1.2em; padding: 0; list-style: none; }
.legal__list li { position: relative; padding: 14px 18px 14px 44px; border-radius: 14px; background: var(--surface-2); }
.legal__list li::before { content: ""; position: absolute; left: 18px; top: 1.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); }
.legal__list b, .legal__doc p > b { color: var(--ink); }
.legal__addr { display: inline-block; margin: 0 0 1em; padding: 16px 22px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-style: normal; line-height: 1.7; }
.legal__top { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.6em; font-size: var(--fs-sm); font-weight: 600; text-decoration: none !important; }
.legal__top .icon { width: 16px; height: 16px; transform: rotate(-90deg); }