/* Final visual alignment with the Canva V2 boards. */
:root { --page: #f4f6f3; }

body {
  background:
    radial-gradient(65rem 42rem at 88% 4%, rgba(255, 235, 235, .56), transparent 70%),
    radial-gradient(52rem 44rem at 1% 42%, rgba(219, 244, 229, .55), transparent 72%),
    #f4f6f3;
  background-attachment: fixed;
}

/* Every light section shares the same continuous canvas; navy editorial blocks stay navy. */
.hero, .stats, .prod, .onb, .portal, .proof, .roi, .pricing, .solutions, .sec:not(.blog):not(.faq) {
  background: transparent !important;
}

.hdr-logo { display: inline-flex; align-items: center; flex: none; }
.hdr-logo-img { display: block; width: 188px; height: auto; max-width: none; }
.hdr-nav a { font-family: var(--body); font-weight: 400 !important; color: var(--ink-soft) !important; }
.hdr-nav a:not(.on) { font-weight: 400 !important; }
.hdr-nav a.on { font-weight: 800 !important; color: var(--ink) !important; }
.hdr-login, .lang-btn.on { font-weight: 700; }

/* Compact desktop rhythm: around 12% less visual height on laptop screens.
   Mobile keeps the more generous touch-friendly spacing below 900px. */
@media (min-width: 900px) {
  body { font-size: 15px; }
  .hdr { padding: 12px 0; }
  .hdr.scrolled { padding: 7px 0; }
  .hdr-logo-img { width: 170px; }
  .hdr-nav { gap: 21px; }
  .hdr-nav a, .hdr-login { font-size: 14px; }
  .hdr-cta { padding: 10px 17px; font-size: 13.5px; }
  .hero { padding-top: 96px; }
  .hero-grid { min-height: 64vh; }
  .hero-h1 { font-size: clamp(32px, 3.45vw, 47px); }
  .hero-sub { font-size: clamp(13.5px, 1vw, 15px); }
  .hero-badge { font-size: 13px; padding: 9px 17px 9px 14px; }
  .hero-cta { margin-top: 25px; }
  .hero-dots { margin-top: 31px; }
  .hero-dot.on { height: 34px; padding: 0 17px; }
  .hero-partner { height: 40px; }
  .sec { padding: clamp(48px, 6vw, 78px) 0; }
  .sec-h2 { font-size: clamp(26px, 3.15vw, 39px); }
  .sec-sub { font-size: 15px; margin-top: 12px; }
  .stats-cards, .onb-row { margin-top: 38px; }
  .prod-grid { margin-top: 36px; }
  .prod-card { padding: clamp(23px, 2.6vw, 34px); }
  .onb-ghost { min-height: 244px; padding: 22px 20px 26px; }
  .onb-active-photo { height: 196px; }
  .roi-cards { margin-top: 36px; }
  .calc2 { margin-top: 42px; }
  .proof-card { padding: clamp(30px, 3.4vw, 48px); }
  .finalcta-card { padding: clamp(35px, 5vw, 60px); }
}

/* Hero: compact copy, CTA stays in one row wherever the screen permits. */
.hero-h1 { font-size: clamp(34px, 3.9vw, 53px); max-width: 14.5ch; }
.hero-sub { font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.5; max-width: 34em; }
.hero-cta { flex-wrap: nowrap; gap: 12px; }
.hero-cta .btn { padding: 15px 22px; font-size: 15px; }
.hero-cta .btn-primary { background: #1dd969; color: #062819; }
.hero-cta .btn-primary svg { color: #062819 !important; }

/* The supplied PNGs are never used as a CSS background: their natural device ratio is preserved. */
.phero-stage.device-phone { max-width: 366px; aspect-ratio: 633 / 1294; }
.device-phone .phero-phone { height: 100%; aspect-ratio: 633 / 1294; }
.device-phone .phero-frame { object-fit: contain; }

.phero-stage.device-tablet { max-width: 680px; aspect-ratio: 1006 / 683; }
.device-tablet .phero-phone { width: 100%; height: 100%; aspect-ratio: 1006 / 683; }
.device-tablet .phero-frame { width: 100%; height: 100%; object-fit: contain; }
.device-tablet .phero-illus { width: 130% !important; bottom: 0 !important; }
.device-tablet .phero-chips { top: 8%; left: 11%; right: 11%; }
.device-tablet .phero-brackets { left: 22%; right: 22%; top: 31%; height: 38%; }
.device-tablet .phero-dish { left: 14%; right: 14%; bottom: 9%; }

/* Individual slide art direction from the Canva boards. */
.slide-senior { width: 80%; max-width: 544px; margin-left: 0; }
.slide-senior .phero-illus { width: 190% !important; left: 51% !important; }
.slide-senior .phero-dish { left: auto; right: 8%; width: 39%; bottom: 10%; padding: 8px 12px; text-align: right; }
.slide-senior .phero-dish-row { justify-content: flex-end; }
.slide-senior .phero-dish-name { font-size: clamp(10px, 1vw, 13px); }
.slide-senior .phero-dish-pct { font-size: clamp(20px, 2.25vw, 29px); }

.slide-school .phero-illus { left: 43% !important; }
.slide-senior .phero-illus { bottom: -29% !important; transform:translateX(-50%) translateY(100px); }
.slide-hospital .phero-illus { width: 276% !important; opacity: 1; filter: none; }

/* Keep the hero art physically smaller and clearly separated from the copy. */
@media (min-width: 1021px) {
  .hero-visual { justify-content: flex-end; padding-right: 16px; }
  .phero-stage.device-phone { width: 80%; max-width: 293px; }
  .phero-stage.device-tablet { width: 100%; }
  .hero::before { content: ""; position: absolute; top: 76px; right: 0; width: 53%; height: 72%; pointer-events: none; background-image: linear-gradient(rgba(19,45,70,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(19,45,70,.075) 1px, transparent 1px); background-size: 78px 78px; -webkit-mask-image: radial-gradient(circle at 54% 48%, #000 12%, rgba(0,0,0,.48) 48%, transparent 76%); mask-image: radial-gradient(circle at 54% 48%, #000 12%, rgba(0,0,0,.48) 48%, transparent 76%); }
  .hero-grid, .hero-partners { position: relative; z-index: 1; }
}

/* Canva labels are simple coloured text with dashes, never rounded pills. */
.sec-head .kick, .prod-head .kick, .portal .kick, .roi .kick, .pricing .kick, .proof .kick {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important;
}
.kick.left::before { content: "–" !important; }
.kick.left::after { content: "" !important; }
.prod .kick { color: var(--blue); }
.sec-h2 { font-size: clamp(26px, 3vw, 38px); }

/* Restore the generous vertical rhythm of the boards. */
.sec { padding: clamp(78px, 10vw, 144px) 0; }
.stats-cards, .prod-grid, .onb-row, .zz, .roi-cards, .price-cards, .proof-card, .testi-card { margin-top: clamp(42px, 5vw, 66px); }
.sec-head { margin-bottom: 22px; }

/* Impact & ROI: the original navy calculator composition. */
.roi .sec-head { max-width: 690px; }
.roi-cards { gap: 24px; align-items: stretch; }
.roi-card { background: rgba(255,255,255,.86); padding: clamp(28px, 3.2vw, 42px); border-radius: 22px; }
.roi-card:nth-child(3) { background: linear-gradient(150deg, #173b5d, #00132d 75%); border-color: transparent; }
.roi-card:nth-child(3) h3, .roi-card:nth-child(3) .roi-d,
.roi-card:nth-child(3) .roi-checks li, .roi-card:nth-child(3) .roi-big-s { color: rgba(255,255,255,.82); }
.roi-card:nth-child(3) h3 { color: #fff; }
.roi-card:nth-child(3) .roi-n { background: none; -webkit-text-fill-color: #1dd969; color: #1dd969; }
.legacy-calc.card-navy { margin-top:clamp(62px,8vw,96px); padding:0; background:transparent; box-shadow:none; overflow:visible; }.legacy-calc.card-navy::before,.legacy-calc.card-navy::after { display:none; }
.legacy-calc-head { max-width:670px; }.legacy-calc-head h3 { color:var(--ink); font-size:clamp(22px,2.4vw,30px); }.legacy-calc-head h3 span { color:#1dd969; }.legacy-calc-head p { margin-top:10px; color:var(--muted); }
.legacy-calc-body { display:grid; grid-template-columns:150px 1fr 205px; gap:24px; align-items:end; margin-top:26px; }.legacy-calc-waste { min-height:120px; padding:22px 20px; background:#001f3d; border-radius:18px; display:flex; flex-direction:column; justify-content:center; gap:12px; }.legacy-calc-waste span { color:#fff; font-size:13px; font-weight:700; }.legacy-calc-waste b { color:#1c8ef4; font:800 34px/1 var(--display); }
.legacy-calc-inputs { display:grid; gap:18px; }.legacy-calc-top { display:flex; align-items:center; gap:16px; }.legacy-calc-segs { display:flex; gap:16px; }.legacy-calc-segs button { border:0; background:transparent; color:var(--muted); padding:4px 0 4px 22px; font:500 12px var(--body); cursor:pointer; position:relative; }.legacy-calc-segs button::before { content:""; position:absolute; left:0; top:50%; translate:0 -50%; width:12px; height:12px; border:1.5px solid var(--ink-soft); border-radius:50%; }.legacy-calc-segs button.on::after { content:""; position:absolute; left:3px; top:50%; translate:0 -50%; width:7px; height:7px; border-radius:50%; background:var(--ink); }.legacy-calc-currency { display:flex; overflow:hidden; border-radius:999px; box-shadow:var(--shadow-sm); }.legacy-calc-currency b,.legacy-calc-currency i { padding:5px 10px; font:700 12px var(--body); font-style:normal; }.legacy-calc-currency b { background:#fff; color:var(--ink); }.legacy-calc-currency i { background:#1c8ef4; color:#fff; }
.legacy-calc-row { display:grid; grid-template-columns:1fr auto; gap:7px 20px; color:var(--muted); font-size:13px; font-weight:700; }.legacy-calc-row b { color:#1c8ef4; }.legacy-calc-row input { grid-column:1/-1; accent-color:#1dd969; width:100%; }.legacy-calc-meals { display:none; }
.legacy-calc-out { display:grid; gap:14px; }.legacy-calc-out > div { padding:12px 16px; background:#fff; border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; gap:5px; }.legacy-calc-out span { color:var(--ink); font-size:11px; font-weight:700; }.legacy-calc-out b { color:#1c8ef4; font:800 31px/1 var(--display); }.legacy-calc-out .save { background:#1dd969; border-color:#1dd969; }.legacy-calc-out .save span { color:#062819; }.legacy-calc-out .save b { color:#fff; }.legacy-calc-out .save .btn { display:none; }

/* Exact editorial structure from skeal-accueil-v2-canva.html. */
.legacy-testi { position: relative; padding: clamp(30px, 4.5vw, 56px); }
.legacy-testi-mark { position: absolute; top: 6px; left: 26px; font: 800 130px/1 var(--display); color: rgba(255,255,255,.1); }
.legacy-testi h2 { color: #fff; font-size: clamp(23px, 2.6vw, 30px); }
.legacy-testi blockquote { margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.legacy-testi blockquote p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.82); }
.legacy-testi footer { margin-top: 24px; font-size: 15px; color: rgba(255,255,255,.7); }
.legacy-testi footer b { color: #fff; }.legacy-testi footer span { color: #4ade80; font-weight: 700; }
.legacy-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
.legacy-blog-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 24px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.legacy-blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.legacy-blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius: var(--r-sm); }
.legacy-blog-card > span { align-self:flex-start; color:var(--green-ink); background:var(--green-wash); border-radius:999px; padding:5px 12px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.legacy-blog-card h3 { font-size:18px; line-height:1.3; }.legacy-blog-card p { color:var(--muted); font-size:14px; flex:1; }.legacy-blog-card > b { color:var(--blue-ink); font-size:14.5px; }
.legacy-blog-cta { display:flex; justify-content:center; margin-top:34px; }
.legacy-blog .sec-head h2 span { color:var(--blue); }
.legacy-faq .sec-head { text-align:center; margin:0 auto; }.legacy-faq .sec-head h2 { font-size:clamp(28px,3.6vw,42px); }.legacy-faq-list { margin-top:38px; display:flex; flex-direction:column; gap:12px; }
.legacy-faq-item { background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
.legacy-faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; font-weight:700; font-size:16.5px; color:var(--ink); }.legacy-faq-item summary::-webkit-details-marker { display:none; }
.legacy-faq-item summary i { flex:none; width:28px; height:28px; border-radius:50%; background:var(--azur-light); position:relative; }.legacy-faq-item summary i::before,.legacy-faq-item summary i::after { content:""; position:absolute; top:50%;left:50%;translate:-50% -50%; background:var(--ink); border-radius:2px; }.legacy-faq-item summary i::before{width:12px;height:2.4px}.legacy-faq-item summary i::after{width:2.4px;height:12px}.legacy-faq-item[open] summary i{background:var(--green-wash)}.legacy-faq-item[open] summary i::after{opacity:0}.legacy-faq-item p { padding:0 24px 22px; font-size:15.5px; color:var(--muted); max-width:62em; }

/* Footer widened and held in the centre rather than stretched edge to edge. */
.footer .wrap-wide { width: min(80vw, 1280px); max-width: 1280px; padding-left: 0; padding-right: 0; }

@media (max-width: 1020px) {
  .hdr-logo-img { width: 164px; }
  .hero-visual { margin-top: 18px; }
  .legacy-blog-grid { grid-template-columns: 1fr; }
  .legacy-calc-body { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { padding-top: 88px; }
  .hero-h1 { font-size: clamp(32px, 8.5vw, 42px); max-width: 14ch; }
  .hero-sub { font-size: 16px; line-height: 1.5; }
  .hero-cta { gap: 8px; margin-top: 24px; }
  .hero-cta .btn { min-width: 0; padding: 13px 14px; font-size: 13px; gap: 7px; }
  .hero-cta .btn svg { width: 15px; height: 15px; }
  .hero-dots { margin-top: 28px; }
  .phero-stage.device-phone { max-width: min(75vw, 310px); }
  .phero-stage.device-tablet { max-width: 100%; }
  .slide-senior { width: 100%; margin-left: 0; }
  .slide-senior .phero-dish { right: 7%; width: 43%; }
  .hdr-logo-img { width: 188px !important; }
  .legacy-blog-grid, .legacy-calc-body { grid-template-columns: 1fr; }
  .legacy-calc-segs { grid-template-columns: 1fr; border-radius: 18px; }
  .footer .wrap-wide { width: auto; padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 365px) {
  .hero-cta { flex-wrap: wrap; }
}

/* Layered V4 hero: scene → grid → device/filter → UI. */
.phero-grid-screen { position:absolute; inset:6.5%; z-index:2; pointer-events:none; opacity:.56; background-image:linear-gradient(rgba(28,142,244,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(28,142,244,.22) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 8%,rgba(0,0,0,.72) 48%,transparent 78%); mask-image:radial-gradient(circle at 50% 48%,#000 8%,rgba(0,0,0,.72) 48%,transparent 78%); }
.device-tablet .phero-grid-screen { inset:9%; background-size:62px 62px; }
.hero-h1 .hl { position:relative; display:inline-block; z-index:0; }
.hero-h1 .hl::after { content:""; position:absolute; left:-3%; width:108%; height:19px; bottom:-9px; z-index:-1; background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 160 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 15 C27 4 55 20 82 11 S131 2 157 8' fill='none' stroke='%231dd969' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Match the sparse, light ROI board and its compact calculator. */
.roi-cards { max-width:800px; margin-left:auto; margin-right:auto; gap:18px; align-items:stretch; }
.roi-card { background:rgba(255,255,255,.74); padding:26px 22px; border:1px solid #cfe1ef; border-radius:18px; box-shadow:none; min-height:286px; }
.roi-card h3 { color:#8c9baa; font-size:15px; margin-top:20px; }.roi-card .roi-d,.roi-card .roi-list li,.roi-card .roi-checks li { color:#97a5b2; font-size:13px; }.roi-card .roi-big-n { font-size:20px; }
.roi-card:nth-child(1) .roi-n { background:linear-gradient(90deg,#7784f2,#1dd969);-webkit-background-clip:text;background-clip:text; }.roi-card:nth-child(2) .roi-n { background:none;-webkit-text-fill-color:#1c8ef4;color:#1c8ef4; }.roi-card:nth-child(3) { background:rgba(255,255,255,.74); border-color:#a9d1ef; }.roi-card:nth-child(3) .roi-n { background:none;-webkit-text-fill-color:#1dd969;color:#1dd969; }.roi-card:nth-child(3) h3,.roi-card:nth-child(3) .roi-d,.roi-card:nth-child(3) .roi-checks li,.roi-card:nth-child(3) .roi-big-s { color:#8c9baa; }
.legacy-calc.card-navy { width:min(760px,100%); margin:clamp(62px,8vw,96px) auto 0; }.legacy-calc-body { grid-template-columns:150px 250px 190px; gap:20px; }

@media (min-width:1021px) {
  .hero-visual { justify-content:flex-end; padding-right:16px; }
  .phero-stage.device-phone { width:80%; max-width:293px; }
  .slide-senior { width:80%; max-width:544px; }
  .slide-senior .phero-illus { width:190% !important; bottom:-29% !important; transform:translateX(-50%) translateY(100px); }
  .hero::before { content:""; position:absolute; top:76px; right:0; width:53%; height:72%; pointer-events:none; background-image:linear-gradient(rgba(19,45,70,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(19,45,70,.075) 1px,transparent 1px); background-size:78px 78px; -webkit-mask-image:radial-gradient(circle at 54% 48%,#000 12%,rgba(0,0,0,.48) 48%,transparent 76%); mask-image:radial-gradient(circle at 54% 48%,#000 12%,rgba(0,0,0,.48) 48%,transparent 76%); }
}

@media (max-width:1020px) {
  .legacy-calc-body { grid-template-columns:1fr; }
}

/* Final visual refinements from the supplied captures. */
.hero-h1 .hl::after { left:1%; width:94%; height:17px; bottom:-7px; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14 C38 8 65 8 90 11 C114 14 135 10 155 8' fill='none' stroke='%231dd969' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kick { gap:8px !important; }.kick::before,.kick::after { content:"–" !important; font-size:1.12em; line-height:.6; }.kick.left::before { display:inline !important; }.kick.left::after { content:none !important; display:none !important; }
.prod-watermark { opacity:.25 !important; }
.hero-partner { height:64px; opacity:.8; }
.phero-grid-screen { z-index:4; opacity:.92; background-image:linear-gradient(rgba(28,142,244,.47) 1px,transparent 1px),linear-gradient(90deg,rgba(28,142,244,.47) 1px,transparent 1px); }
@media (min-width:1021px) { .slide-senior { transform:translateX(40px); } }

/* ROI takes the visual hierarchy of the onboarding rail: two readable ghosts, one featured card. */
.roi-card:nth-child(1),.roi-card:nth-child(2) { background:rgba(255,255,255,.34); border-color:rgba(207,225,239,.55); opacity:.58; }.roi-card:nth-child(1) .roi-n,.roi-card:nth-child(2) .roi-n { opacity:.8; }.roi-card:nth-child(3) { opacity:1; background:#fff; border-color:#a9d1ef; box-shadow:var(--shadow); transform:translateY(-14px); }.roi-card:nth-child(3) .roi-n { font-size:48px; }.roi-foot { margin-top:44px; max-width:48ch; font-size:18px; line-height:1.45; color:var(--ink-soft); }

.legacy-calc-waste { gap:8px; }.legacy-calc-waste input { width:100%; accent-color:#1dd969; }.legacy-calc-currency { border:0; box-shadow:var(--shadow-sm); }.legacy-calc-currency button { border:0; background:#fff; color:var(--ink); padding:5px 10px; font:700 12px var(--body); cursor:pointer; }.legacy-calc-currency button.on { background:#1c8ef4; color:#fff; }.legacy-calc-out b { white-space:nowrap; }
.legacy-blog-kicker { display:inline-flex; align-items:center; padding:8px 15px; border-radius:999px; background:#1dd969; color:#fff; font:700 13px var(--body); letter-spacing:.08em; text-transform:uppercase; }.legacy-blog-kicker::before,.legacy-blog-kicker::after { content:"–"; margin:0 7px; }.legacy-blog-cta { margin-top:64px; }.legacy-blog-cta .btn { background:#1c8ef4; border-color:#1c8ef4; color:#fff; }.legacy-blog-cta .btn:hover { background:#1573cf; }
.legacy-faq .sec-head h2 { color:#1dd969; }
.finalcta-multi { background:linear-gradient(90deg,#1c8ef4 0%,#1dd969 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* Reset every earlier grid attempt: the supplied grid asset is the sole layer. */
.phero-grid,.phero-grid-screen,.hero::before { display:none !important; }
.phero-grid-asset { position:absolute; inset:8%; z-index:2; width:84%; height:84%; object-fit:cover; opacity:.84; pointer-events:none; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 12%,rgba(0,0,0,.78) 55%,transparent 82%); mask-image:radial-gradient(circle at 50% 50%,#000 12%,rgba(0,0,0,.78) 55%,transparent 82%); }
.device-tablet .phero-grid-asset { inset:10%; width:80%; height:80%; }

/* User-supplied marker treatment: reserved exclusively for the hero title. */
.hero-h1 .hl::after { left:-3%; right:-3%; width:auto; bottom:7%; height:.28em; background:#20d66b; border-radius:999px; transform:rotate(-1.5deg); opacity:1; }

/* Section kickers: actual dashes, one on the left layout and one per side when centered. */
.kick::before,.kick::after { content:"–" !important; display:inline-block !important; font-size:16px !important; line-height:1 !important; font-weight:400 !important; transform:translateY(-1px); }.kick.left::after { content:"" !important; display:none !important; }

@media (min-width:1021px) { .slide-senior { transform:translateX(90px); } }

/* ROI: translucent surfaces only — never translucent copy; the third remains flat and featured. */
.roi-card:nth-child(1),.roi-card:nth-child(2) { opacity:1; background:rgba(255,255,255,.50); }.roi-card:nth-child(1) *, .roi-card:nth-child(2) *, .roi-card:nth-child(3) * { opacity:1 !important; }.roi-card:nth-child(3) { box-shadow:none; }
.roi-card .roi-checks li { align-items:flex-start; }.roi-card .roi-checks li br { display:block; }
.roi-foot { color:#7d8e9d; }

/* Wider, non-overlapping calculator. */
.legacy-calc.card-navy { width:min(920px,100%); }.legacy-calc-body { grid-template-columns:160px minmax(330px,1fr) 230px; gap:28px; align-items:end; }.legacy-calc-out { min-width:230px; }.legacy-calc-waste input { display:block; margin-top:4px; }

/* Pricing cards share one footprint; the free trial echoes the green footer surface. */
.price-cards { grid-template-columns:repeat(4,minmax(0,1fr)); }.price-card.free { background:linear-gradient(135deg,#d9ffea 0%,#bbf8d4 100%); }.pricing .sec-sub { white-space:pre-line; }

/* Actual dash strokes: never a typographic dot. */
.kick::before,.kick::after { content:"" !important; width:10px !important; height:2px !important; min-width:10px !important; flex:none !important; display:inline-block !important; background:currentColor !important; border-radius:0 !important; transform:none !important; }
.kick.left::after { display:none !important; width:0 !important; min-width:0 !important; }

/* Grid field spans the illustration, while its z-order stays scene < grid < device. */
.phero-grid-asset { inset:auto !important; left:-54% !important; top:-52% !important; width:208% !important; height:208% !important; max-width:none !important; object-fit:contain !important; z-index:2 !important; opacity:.9 !important; }
.device-tablet .phero-grid-asset { left:-52% !important; top:-52% !important; width:204% !important; height:204% !important; }

.compliance + .prod-cta-wrap { margin-top:78px; }
.roi-card:nth-child(3) { transform:none !important; }
.price-card.free { background:linear-gradient(120deg,#8be3a6,#c7f0d4) !important; }

/* Hero grid: aligned on the visual's right edge and extended beneath the copy/header. */
.phero-grid-asset { left:auto !important; right:-100% !important; top:-38% !important; width:175% !important; height:175% !important; opacity:.84 !important; }
/* The grid's right edge follows the actual illustration edge, not the device wrapper. */
.slide-hospital .phero-grid-asset { right:-88% !important; }
.slide-school .phero-grid-asset { right:-100% !important; }
.slide-senior .phero-grid-asset { right:-46% !important; }

/* A lighter hand-drawn marker stroke — not a thick straight bar. */
.hero-h1 .hl::after { left:-3%; right:-3%; width:auto; height:18px; bottom:-4px; background:transparent center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 160 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 14 C30 7 54 8 80 10 C108 13 132 12 156 7' fill='none' stroke='%2320d66b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); border-radius:0; transform:rotate(-1deg); }

/* Eyebrows stay clean: no decorative dashes before or around the label. */
.kick::before,.kick::after,.sol-kicker::before,.sol-kicker::after,.legacy-blog-kicker::before,.legacy-blog-kicker::after { content:none !important; display:none !important; width:0 !important; min-width:0 !important; height:0 !important; margin:0 !important; }
.kick,.sol-kicker,.legacy-blog-kicker { gap:0 !important; }
.kick.left::before,.kick.left::after { content:none !important; display:none !important; width:0 !important; min-width:0 !important; height:0 !important; background:none !important; }

/* Independent hero layers: photo → grid → device and UI. */
.phero-phone.phero-scene { z-index:1; }
.phero-device { position:absolute; left:52%; top:50%; transform:translate(-50%,-50%); height:99%; aspect-ratio:633 / 1306; z-index:10; }
.device-phone .phero-device { height:100%; aspect-ratio:633 / 1294; }
.device-tablet .phero-device { width:100%; height:100%; aspect-ratio:1006 / 683; }
.phero-grid-global { position:absolute; top:-90px; right:0; z-index:2; width:675px; height:540px; max-width:none; object-fit:fill; opacity:.38; pointer-events:none; -webkit-mask-image:radial-gradient(circle at 52% 50%,#000 15%,rgba(0,0,0,.72) 60%,transparent 94%); mask-image:radial-gradient(circle at 52% 50%,#000 15%,rgba(0,0,0,.72) 60%,transparent 94%); }
.phero-grid-asset { display:none !important; }

/* Fixed coordinate system: the grid never follows the device dimensions. */
@media (min-width:1021px) {
  .hero-visual { min-height:620px; align-items:center; }
  .hero-grid-global { top:20px; right:0; width:675px; height:540px; z-index:2; opacity:.48; mix-blend-mode:multiply; }
}

/* Emergency rollback of the experimental external grid.  The device, its photo
   and its capture overlays must share the same stage coordinates. */
.phero-grid-global,
.phero-device { display:none !important; }
.phero-grid-asset { display:none !important; }
@media (min-width:1021px) {
  .hero-visual { min-height:0 !important; }
}

/* Stable hero grid: a generated paint layer, never a layout element.
   It is anchored to the device coordinate system but deliberately overflows
   to the left, so the grid fades behind the copy without moving the device. */
@media (min-width:1021px) {
  .phero-phone::before {
    content:"";
    position:absolute;
    top:-230px;
    right:-230px;
    width:960px;
    height:900px;
    z-index:2;
    pointer-events:none;
    opacity:.50;
    background-image:
      linear-gradient(rgba(19,45,70,.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19,45,70,.18) 1px, transparent 1px);
    background-size:90px 90px;
    -webkit-mask-image:radial-gradient(ellipse 72% 70% at 61% 49%, #000 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.48) 62%, rgba(0,0,0,.13) 78%, transparent 94%);
    mask-image:radial-gradient(ellipse 72% 70% at 61% 49%, #000 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.48) 62%, rgba(0,0,0,.13) 78%, transparent 94%);
  }
  .slide-senior .phero-phone::before { top:-260px; right:-170px; }
}

/* A quiet continuation of the hero grid in the empty transition from
   onboarding to portal. It is absolute, so it cannot alter section spacing. */
@media (min-width:1021px) {
  .onb { position:relative; overflow:visible; isolation:isolate; }
  .onb > .wrap-wide { position:relative; z-index:1; }
  .onb-transition-grid {
    position:absolute;
    right:3vw;
    bottom:-290px;
    width:590px;
    height:520px;
    z-index:0;
    pointer-events:none;
    opacity:.42;
    background-image:
      linear-gradient(rgba(19,45,70,.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19,45,70,.18) 1px, transparent 1px);
    background-size:90px 90px;
    -webkit-mask-image:radial-gradient(ellipse 73% 72% at 61% 48%, #000 0%, rgba(0,0,0,.84) 40%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.10) 80%, transparent 96%);
    mask-image:radial-gradient(ellipse 73% 72% at 61% 48%, #000 0%, rgba(0,0,0,.84) 40%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.10) 80%, transparent 96%);
  }
  .portal { position:relative; z-index:1; }
}

/* Reusable grid accents between the later editorial sections. */
@media (min-width:1021px) {
  .portal, .pricing, .legacy-testimonial { position:relative; overflow:visible; isolation:isolate; }
  .portal > .wrap-wide, .pricing > .wrap-wide, .legacy-testimonial > .wrap { position:relative; z-index:1; }
  .portal-transition-grid, .pricing-transition-grid, .testi-transition-grid {
    position:absolute;
    bottom:-290px;
    width:590px;
    height:520px;
    z-index:0;
    pointer-events:none;
    opacity:.42;
    background-image:
      linear-gradient(rgba(19,45,70,.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19,45,70,.18) 1px, transparent 1px);
    background-size:90px 90px;
    -webkit-mask-image:radial-gradient(ellipse 73% 72% at 61% 48%, #000 0%, rgba(0,0,0,.84) 40%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.10) 80%, transparent 96%);
    mask-image:radial-gradient(ellipse 73% 72% at 61% 48%, #000 0%, rgba(0,0,0,.84) 40%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.10) 80%, transparent 96%);
  }
  .portal-transition-grid { left:3vw; }
  .pricing-transition-grid { right:3vw; }
  .testi-transition-grid { left:50%; bottom:-280px; width:640px; transform:translateX(-50%); }
}

/* The FAQ gets a larger, centred grid as a calm finish beneath its answers. */
@media (min-width:1021px) {
  .faq-grid-field {
    width:min(820px, 84vw);
    height:390px;
    margin:54px auto -8px;
    pointer-events:none;
    opacity:.44;
    background-image:
      linear-gradient(rgba(19,45,70,.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19,45,70,.18) 1px, transparent 1px);
    background-size:90px 90px;
    -webkit-mask-image:radial-gradient(ellipse 75% 76% at 50% 48%, #000 0%, rgba(0,0,0,.84) 40%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.10) 82%, transparent 98%);
    mask-image:radial-gradient(ellipse 75% 76% at 50% 48%, #000 0%, rgba(0,0,0,.84) 40%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.10) 82%, transparent 98%);
  }

  /* Mountain line-art creates a visual breath between ROI and pricing. */
  .roi-mountain-sketch {
    display:block;
    width:min(980px, 78vw);
    height:auto;
    margin:44px auto -130px;
    opacity:.35;
    pointer-events:none;
    filter:brightness(0) saturate(100%) invert(15%) sepia(16%) saturate(2420%) hue-rotate(167deg) brightness(88%) contrast(95%);
  }
}

/* The proof section keeps its navy atmosphere while revealing the supplied
   mountain image as a clear, photographic background layer. */
.proof-card {
  background-image:
    linear-gradient(110deg, rgba(5,24,50,.14) 0%, rgba(10,40,70,.08) 55%, rgba(8,37,54,.06) 100%),
    url("../assets/mountain-background.jpg") !important;
  background-position:center, center !important;
  background-size:cover, cover !important;
  background-repeat:no-repeat !important;
}

/* Final layer order for the page decorations — never affect the hero. */
@media (min-width:1021px) {
  .onb-transition-grid { opacity:.58; }
  .portal-transition-grid, .pricing-transition-grid, .testi-transition-grid { opacity:.50; }

  /* FAQ grid is a large background field, behind the question tiles. */
  .legacy-faq { position:relative; overflow:visible; isolation:isolate; }
  .legacy-faq > .wrap { position:relative; }
  .legacy-faq .sec-head, .legacy-faq-list { position:relative; z-index:1; }
  .faq-grid-field {
    position:absolute;
    top:96px;
    left:50%;
    width:min(1120px, 94vw);
    height:720px;
    margin:0;
    z-index:0;
    opacity:.52;
    transform:translateX(-50%);
  }

  /* Line-art lives in the ROI/Pricing overlap, not in document flow. */
  .roi { position:relative; overflow:visible; isolation:isolate; }
  .roi > .wrap-wide { position:relative; z-index:1; }
  .roi-mountain-sketch {
    position:absolute;
    left:50%;
    bottom:-360px;
    z-index:0;
    width:min(980px, 78vw);
    height:auto;
    margin:0;
    opacity:.30;
    transform:translateX(-50%);
  }
  .pricing { z-index:1; }
}

/* The default navy card adds a second opaque veil. Remove it here so the
   supplied mountain texture remains visibly present behind the proof content. */
.proof-card::before { display:none; }
.proof-card::after {
  background:linear-gradient(110deg, rgba(4,22,48,.08), rgba(8,34,60,.05) 55%, rgba(7,42,58,.04)) !important;
}

/* Product portal card: the same mountain atmosphere, kept legible for the
   white product copy and dashboard preview. */
.prod-card.navy {
  background-image:
    linear-gradient(145deg, rgba(6,27,52,.48), rgba(7,36,59,.30)),
    url("../assets/mountain-background.jpg") !important;
  background-position:center, center !important;
  background-size:cover, cover !important;
  background-repeat:no-repeat !important;
}
.prod-card.navy::before { display:none; }
.prod-card.navy::after { background:linear-gradient(145deg, rgba(5,24,50,.18), rgba(8,42,58,.12)) !important; }

/* Official logo lockups and verified partner marks. */
.footer-logo-img { display:block; width:min(210px,100%); height:auto; }
.proof-band .proof-face { width:130px; height:150px; display:block; border-radius:12px; object-fit:cover; object-position:center; }
.proof-partner-logos { filter:none !important; opacity:1 !important; }
.proof-partner-link { width:180px; height:76px; display:flex; align-items:center; justify-content:center; }
.proof-partner-link img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .2s ease; }
.proof-partner-link:hover img { transform:translateY(-3px); }
@media (max-width:980px) { .proof-band .proof-face { margin:0 auto; } }

/* Partner marks use precisely the same restrained monochrome treatment as the
   CHPG, CNRS and Belage marks in the hero. */
.proof-partner-logos { filter:grayscale(1) !important; opacity:.8 !important; }

/* Hero only — a real hand-drawn marker stroke, rather than a rounded bar.
   The two slightly offset paths give the green line its felt-tip texture. */
.hero-h1 .hl {
  position:relative;
  display:inline-block;
  z-index:0;
  isolation:isolate;
}
.hero-h1 .hl::after {
  content:"";
  position:absolute;
  left:2%;
  bottom:-7px;
  width:96%;
  height:14px;
  z-index:-1;
  border:0;
  border-radius:0;
  opacity:1;
  transform:rotate(-1.2deg);
  background:transparent center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C13 4 20 6 30 7 C43 9 52 4 63 6 C75 8 87 4 98 5' fill='none' stroke='%2320d66b' stroke-width='5.4' stroke-linecap='round'/%3E%3Cpath d='M3 8.4 C14 5.2 21 7.2 30 7.8 C44 9.1 53 4.8 64 6.7 C76 8.6 88 4.8 97 5.8' fill='none' stroke='%231dd969' stroke-width='2.1' stroke-linecap='round' opacity='.82'/%3E%3C/svg%3E");
}

/* The two Monaco partner marks have a naturally wider/shallower proportion.
   Their larger containers give them the same visual weight as AVi'Sé. */
.proof-partner-link:nth-child(1),
.proof-partner-link:nth-child(2) { width:224px; height:90px; }

/* Every navy working surface carries the same dark mountain texture.  The
   photographic layer is intentionally visible, while the navy overlay keeps
   every white label readable. */
.card-navy::before {
  background-image:url("../assets/mountain-background.jpg") !important;
  background-position:center !important;
  background-size:cover !important;
  opacity:.62 !important;
  mix-blend-mode:normal !important;
}
.card-navy::after { background:linear-gradient(145deg,rgba(3,33,61,.54),rgba(3,18,42,.66)) !important; }
.legacy-calc-waste {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(145deg,rgba(0,31,61,.62),rgba(1,20,43,.7)),url("../assets/mountain-background.jpg") center/cover !important;
}

/* Mobile: the calculator is a small workflow, not three compressed columns.
   Each control and result gets its own readable line, so no value can escape
   beyond the viewport. */
@media (max-width:600px) {
  .legacy-calc.card-navy {
    width:calc(100% - 4px) !important;
    margin-top:48px;
  }
  .legacy-calc-body {
    grid-template-columns:1fr !important;
    gap:18px;
    align-items:stretch;
  }
  .legacy-calc-waste { min-height:0; padding:18px; }
  .legacy-calc-top {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:start;
    gap:12px;
  }
  .legacy-calc-segs { display:grid; grid-template-columns:1fr; gap:8px; }
  .legacy-calc-segs button { min-height:34px; padding-left:20px; text-align:left; }
  .legacy-calc-inputs { gap:16px; }
  .legacy-calc-row { grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; }
  .legacy-calc-row span,.legacy-calc-row b { font-size:13px; }
  .legacy-calc-out { grid-template-columns:1fr; gap:12px; min-width:0; }
  .legacy-calc-out > div { min-width:0; padding:16px 18px; }
  .legacy-calc-out b { font-size:clamp(27px,8vw,34px); overflow-wrap:anywhere; white-space:normal; }
}

/* Calculator extension: a compact explanation of the full cost of waste. */
.calc-note-mark { font-size:.62em; line-height:0; vertical-align:super; margin-left:2px; }
.calc-waste-note { display:block; margin-top:8px; color:rgba(255,255,255,.76); font-size:10px; line-height:1.35; }
.waste-cost-insight { display:block !important; visibility:visible !important; opacity:1 !important; position:relative; z-index:5; width:min(920px,100%); max-width:none; margin:30px auto 0 !important; padding-top:30px !important; }
.waste-cost-main { display:grid; grid-template-columns:160px minmax(0,1fr) 220px; gap:26px; align-items:stretch; }
.waste-cost-multiple { display:flex; flex-direction:column; justify-content:space-between; min-height:168px; padding:17px 15px; border:1.5px dashed #14395d; border-radius:18px; background:transparent; color:var(--ink); box-sizing:border-box; }
.waste-cost-multiple span { max-width:11ch; font-size:12px; font-weight:800; line-height:1.25; }
.waste-cost-multiple strong { font-size:47px; line-height:.9; letter-spacing:-.06em; color:var(--blue); }
.waste-cost-multiple small { max-width:12ch; font-size:10px; line-height:1.35; color:var(--ink-soft); }
.waste-cost-story { min-width:0; padding:2px 0; color:var(--ink); }
.waste-cost-story h3 { margin:0 0 9px; font-size:clamp(17px,1.75vw,21px); line-height:1.15; letter-spacing:-.035em; white-space:nowrap; }
.waste-cost-story h3 span { color:var(--green); }
.waste-cost-story p { margin:0 0 11px; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.waste-cost-story p strong { color:var(--ink); }
.waste-cost-bar { display:flex; width:100%; height:12px; overflow:hidden; border-radius:999px; }
.waste-cost-bar .ingredients { flex:43; background:var(--green); }
.waste-cost-bar .hidden { flex:57; background:var(--blue); }
.waste-cost-labels { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; font-weight:800; }
.waste-cost-labels span:first-child { color:var(--green); }
.waste-cost-labels span:last-child { color:var(--blue); }
.waste-cost-estimate { margin-top:10px !important; font-size:11px !important; line-height:1.35 !important; color:var(--ink-soft) !important; }
.waste-cost-estimate strong { color:var(--ink); }
.waste-cost-actions { display:block; }
.waste-cost-energy { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); }
.waste-cost-energy > strong { margin-bottom:4px; font-size:11px; }
.waste-cost-energy span { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.waste-cost-energy b { color:var(--blue); font-size:21px; line-height:.6; }
.waste-cost-source { display:block; margin-top:14px; color:var(--faint); font-size:10px; line-height:1.4; font-style:italic; }
.legacy-calc-body { align-items:center; }

/* Portal prototype: a single operational workspace with the existing portal
   content arranged as navigable views. Compliance below deliberately remains
   outside this component. */
.portal-tabs { display:grid; grid-template-columns:minmax(0,.88fr) minmax(460px,1.22fr); gap:42px; margin-top:44px; padding:30px 0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.portal-tabs-copy { padding:0; }
.portal-tabs-nav { display:flex; flex-direction:column; margin-top:14px; }
.portal-tab-item { border-bottom:1px solid var(--line-soft); }
.portal-tab-item:first-child { border-top:1px solid var(--line-soft); }
.portal-tabs-nav button { display:flex; align-items:center; gap:12px; width:100%; padding:14px 0; border:0; background:transparent; color:var(--ink); text-align:left; font:700 13px/1.35 var(--display); cursor:pointer; }
.portal-tabs-nav button span { flex:0 0 auto; color:var(--faint); font-size:11px; letter-spacing:.08em; }
.portal-tabs-nav button b { margin-left:auto; color:var(--ink-soft); font-size:18px; font-weight:500; transform:translateY(-2px); }
.portal-tab-item.is-active button { color:var(--blue); }
.portal-tab-item.is-active button span,.portal-tab-item.is-active button b { color:var(--blue); }
.portal-tab-detail { padding:0 4px 17px 28px; animation:portal-tabs-in .22s ease both; }
.portal-tab-detail p { margin:0 0 11px; color:var(--muted); font-size:13px; line-height:1.5; }
.portal-tab-detail .zz-chips { justify-content:flex-start; }
.portal-tabs-copy .zz-chips { justify-content:flex-start; }
.portal-tabs-media { display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-width:0; margin:0; padding:0; }
.portal-tabs-media figcaption { align-self:flex-end; width:100%; margin:0 0 14px; color:var(--blue); text-align:right; }
.portal-tabs-media img { display:block; width:100%; height:auto; border-radius:13px; box-shadow:0 16px 32px rgba(0,19,45,.14); animation:portal-tabs-in .28s ease both; }
@keyframes portal-tabs-in { from { opacity:.35; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:900px) {
  .portal-tabs { grid-template-columns:1fr; }
  .portal-tabs-media { padding:0; }
}
@media (max-width:600px) {
  .portal-tabs { gap:26px; margin-top:30px; padding:30px 0; }
  .portal-tabs-copy { padding:0; }
  .portal-tabs-nav button { font-size:12px; }
  .portal-tab-detail { padding-left:24px; }
  .portal-tab-detail p { font-size:12px; }
  .portal-tabs-media { padding:12px 18px 20px; }
}
@media (max-width:900px) {
  .waste-cost-main { grid-template-columns:138px minmax(0,1fr); gap:20px; }
  .waste-cost-actions { grid-column:1 / -1; }
  .waste-cost-energy { min-height:0; }
}
@media (max-width:600px) {
  .waste-cost-insight { margin-top:30px !important; padding-top:30px !important; }
  .waste-cost-main { grid-template-columns:108px minmax(0,1fr); gap:14px; }
  .waste-cost-multiple { min-height:154px; padding:14px 11px; border-radius:14px; }
  .waste-cost-multiple strong { font-size:40px; }
  .waste-cost-multiple span { font-size:10px; }
  .waste-cost-multiple small { font-size:9px; }
  .waste-cost-story h3 { margin-bottom:7px; font-size:16px; white-space:normal; }
  .waste-cost-story p { margin-bottom:8px; font-size:11px; line-height:1.38; }
  .waste-cost-energy { gap:5px; padding:11px; border-radius:13px; }
  .waste-cost-energy > strong, .waste-cost-energy span { font-size:9px; }
  .waste-cost-energy b { font-size:15px; }
  .waste-cost-estimate { margin-top:8px !important; font-size:9px !important; }
  .waste-cost-source { margin-top:10px; font-size:8px; }
}

/* Mobile pricing becomes a deliberate, swipeable plan rail.  A plan is shown
   at a useful reading width instead of squeezing four desktop columns into
   one screen; the recommended offer appears first. */
@media (max-width:600px) {
  .pricing .wrap-wide { overflow:hidden; }
  .pricing-toggles { gap:12px; margin:26px 0 28px; }
  .pricing-toggles .seg-toggle { max-width:100%; }
  .pricing-toggles .seg-toggle button { padding-inline:13px; font-size:13px; }
  .price-cards {
    display:flex !important;
    grid-template-columns:none !important;
    width:calc(100% + 32px);
    margin-left:-16px;
    padding:20px 16px 26px;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .price-cards::-webkit-scrollbar { display:none; }
  .price-card {
    flex:0 0 min(84vw,340px);
    min-height:0;
    padding:28px 24px;
    scroll-snap-align:center;
  }
  .price-card.hot { order:-1; transform:none; }
  .price-card:hover { transform:none; }
  .price-name { font-size:26px; }
  .price-amt { margin-top:16px; }
  .price-big { font-size:42px; }
  .price-bullets { margin:18px 0 22px; gap:11px; }
  .pricing-or { margin-top:28px; }
}
.onb-active-num {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(145deg,rgba(0,30,59,.58),rgba(0,19,42,.7)),url("../assets/mountain-background.jpg") center/cover !important;
}

/* Problem cards: translucent material at rest; the selected sector becomes a
   clear white working surface and exposes its action on hover/focus. */
.stats .stat-c {
  display:flex;
  min-height:255px;
  flex-direction:column;
  background:rgba(255,255,255,.33) !important;
  border-color:rgba(205,222,232,.82) !important;
  box-shadow:0 14px 28px rgba(17,45,69,.07);
  transition:background .24s ease, box-shadow .24s ease, transform .24s ease;
}
.stat-discover {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:center;
  min-width:118px;
  margin-top:auto;
  padding:10px 17px;
  border-radius:999px;
  color:#fff;
  background:var(--blue);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.stats .stat-c:hover,
.stats .stat-c:focus-within {
  background:#fff !important;
  box-shadow:0 18px 32px rgba(17,45,69,.15);
  transform:translateY(-4px);
}
.stats .stat-c:hover .stat-discover,
.stats .stat-c:focus-within .stat-discover { opacity:1; pointer-events:auto; transform:translateY(0); }
.stat-discover:hover { background:var(--blue-ink); }

/* Give the waste metric the same mountain evidence treatment as the other
   strategic navy surfaces, then use the full width of the card for its two
   numbers. */
.stats .waste-c {
  background-image:
    linear-gradient(145deg, rgba(6,27,52,.46), rgba(7,36,59,.24)),
    url("../assets/mountain-background.jpg") !important;
  background-position:center, center !important;
  background-size:cover, cover !important;
  background-repeat:no-repeat !important;
}
.stats .waste-c::before { display:none; }
.stats .waste-c::after { background:linear-gradient(145deg, rgba(5,24,50,.14), rgba(8,42,58,.08)) !important; }
.stats .waste-row { justify-content:space-between; gap:28px; }
.stats .waste-gauge { width:138px; height:80px; }
.stats .waste-gauge .gtxt { font-size:23px; }
.stats .waste-big { font-size:58px; }
.stats .waste-big-sub { max-width:120px; line-height:1.12; }

/* Photo → IA → balance: one calm, transparent layer between the portal
   background and its editorial cards. It cannot take part in layout flow. */
@media (min-width:981px) {
  .portal { position:relative; isolation:isolate; overflow:hidden; }
  .portal > .wrap-wide { position:relative; z-index:1; }
  .portal-watermark {
    position:absolute;
    z-index:0;
    /* Anchor the capture → IA → balance motif at the hand-off from the
       onboarding section, above the portal heading rather than behind tabs. */
    top:-310px;
    left:max(-36px, calc(50% - 700px));
    width:clamp(330px, 32vw, 490px);
    height:auto;
    opacity:.18;
    transform:none;
    pointer-events:none;
    user-select:none;
  }
}
@media (max-width:980px) {
  .stats .stat-c { min-height:auto; background:#fff !important; }
  .stat-discover { opacity:1; pointer-events:auto; transform:none; }
  .portal-watermark { display:none; }
  .proof-partner-link:nth-child(1), .proof-partner-link:nth-child(2) { width:205px; height:82px; }
}

/* Problem cards retain the page's airy material instead of reading as white
   blocks. On small screens they form a deliberate swipe rail, initially
   centered on the senior-living context with the two adjacent contexts peeking
   in from either side. */
.sec.stats { background:var(--page); }
.stats .stat-c { background:rgba(255,255,255,.18) !important; border-color:rgba(205,222,232,.62) !important; }
@media (max-width:600px) {
  .stats .wrap-wide { overflow:hidden; }
  .stats-cards {
    display:flex !important;
    grid-template-columns:none !important;
    width:calc(100% + 32px);
    margin-left:-16px;
    padding:10px 16px 24px;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .stats-cards::-webkit-scrollbar { display:none; }
  .stats .stat-c {
    flex:0 0 min(70vw,300px);
    min-height:255px;
    scroll-snap-align:center;
    background:rgba(255,255,255,.18) !important;
    box-shadow:0 12px 26px rgba(17,45,69,.06);
  }
  .stats .stat-c:hover,
  .stats .stat-c:focus-within { background:rgba(255,255,255,.30) !important; transform:none; }

  .stats .waste-c { padding:28px 18px; }
  .stats .waste-row { justify-content:center; gap:14px; flex-wrap:nowrap; }
  .stats .waste-gauge { width:120px; height:72px; }
  .stats .waste-gauge .gtxt { font-size:21px; }
  .stats .waste-big { font-size:46px; white-space:nowrap; }
  .stats .waste-big-sub { max-width:110px; font-size:14px; }

  .prod-watermark {
    top:24px;
    right:20px;
    width:160px;
    opacity:.16 !important;
  }
  .prod { padding-top:230px !important; }
}

/* Product workflow: two editorial rows. The information card and the media
   stack alternate their position so the eye reads capture, then analysis. */
.prod-reflow { display:grid; gap:clamp(58px,7vw,108px); margin-top:clamp(44px,5vw,72px); }
.prod-flow { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.82fr); align-items:center; gap:clamp(34px,6vw,92px); }
.prod-flow--portal { grid-template-columns:minmax(330px,.82fr) minmax(0,1fr); }
.prod-flow .prod-card { min-height:0; padding:clamp(28px,3vw,48px); }
.prod-flow .prod-card h3 { font-size:clamp(27px,2.35vw,38px); line-height:1.12; }
.prod-flow .prod-card.white { border-color:rgba(28,142,244,.24); box-shadow:0 18px 38px rgba(17,45,69,.07); }
.prod-flow .prod-ph { margin-top:24px; color:var(--blue); font-size:15px; font-weight:800; }
.prod-flow .prod-p { margin-top:7px; max-width:58ch; color:var(--ink-soft); font-size:15px; line-height:1.48; }
.prod-app-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:30px; }
.prod-app-footer .prod-video { display:inline-flex; align-items:center; gap:10px; color:var(--green-ink); font-size:14px; font-weight:800; }
.prod-app-footer .prod-video-btn { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--green); box-shadow:0 8px 18px rgba(29,217,105,.26); }
.prod-app-footer .prod-chips { margin-top:0; justify-content:flex-end; }
.prod-flow--portal .prod-card { min-height:440px; justify-content:center; }
.prod-flow--portal .prod-card .prod-label { color:rgba(255,255,255,.54); }
.prod-flow--portal .prod-bullets { margin:24px 0 0; }
.prod-flow--portal .prod-concl { margin-top:22px; }
.prod-action { margin:28px 0 0; color:#1dd969; font-size:15px; font-weight:800; line-height:1.4; }

/* The three photo contexts move through a restrained vertical stack. Empty
   windows behind the current scene make the interaction discoverable without
   introducing additional card chrome. */
.prod-flow-media { min-width:0; }
.prod-media-stack { position:relative; display:grid; place-items:center; width:min(100%,440px); min-height:470px; margin:0 auto; isolation:isolate; }
.prod-media-ghost { position:absolute; width:74%; height:76%; border:1.5px solid rgba(28,142,244,.23); border-radius:26px; background:rgba(255,255,255,.20); }
.prod-media-ghost--back { transform:translate(31px,-28px); }
.prod-media-ghost--mid { transform:translate(-20px,-8px); }
.prod-media-window { position:relative; z-index:2; width:78%; aspect-ratio: .8; overflow:hidden; border-radius:24px; background:rgba(228,238,244,.55); box-shadow:0 22px 40px rgba(17,45,69,.16); }
.prod-media-window img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:translateY(-24px) scale(.98); transition:opacity .62s ease, transform .62s cubic-bezier(.22,.8,.2,1); }
.prod-media-window img.is-active { opacity:1; transform:translateY(0) scale(1); }
.prod-media-dots { position:absolute; z-index:3; bottom:4px; display:flex; gap:8px; }
.prod-media-dots button { width:7px; height:7px; margin:0; padding:0; border:0; border-radius:50%; background:rgba(19,45,70,.25); cursor:pointer; }
.prod-media-dots button.on { width:26px; border-radius:999px; background:var(--blue); }
.prod-media-stack--static .prod-media-window { width:94%; aspect-ratio:1.62; border-radius:18px; }
.prod-media-stack--static .prod-media-ghost { width:86%; height:58%; border-color:rgba(28,142,244,.20); }
.prod-media-stack--static .prod-media-ghost--back { transform:translate(20px,-28px); }
.prod-media-stack--static .prod-media-ghost--mid { transform:translate(-13px,-10px); }

/* Small, direct links make the public evidence behind the headline figures
   available without changing the reading rhythm of the cards. */
.stat-sources { margin:22px 0 0; color:rgba(19,45,70,.52); font-size:11px; line-height:1.45; }
.stat-sources span { font-weight:700; }
.stat-sources a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.stat-sources a:hover { color:var(--blue); }
.stat-sources--dark { color:rgba(255,255,255,.58); }
.stat-sources--dark a:hover { color:#fff; }

@media (max-width:980px) {
  .prod-flow, .prod-flow--portal { grid-template-columns:1fr; gap:34px; }
  .prod-flow--portal .prod-flow-media { order:2; }
  .prod-flow--portal .prod-card { order:1; }
}
@media (max-width:600px) {
  .prod { padding-bottom:88px !important; }
  .prod-reflow { gap:62px; margin-top:38px; }
  .prod-flow { gap:26px; }
  .prod-flow .prod-card { padding:28px 24px; }
  .prod-flow .prod-card h3 { font-size:27px; }
  .prod-flow .prod-p { font-size:14px; }
  .prod-app-footer { align-items:flex-start; flex-direction:column; margin-top:26px; }
  .prod-app-footer .prod-chips { justify-content:flex-start; }
  .prod-flow--portal .prod-card { min-height:0; }
  .prod-media-stack { min-height:390px; }
  .prod-media-window { width:75%; border-radius:22px; }
  .prod-media-stack--static { min-height:280px; }
  .prod-media-stack--static .prod-media-window { width:92%; }
  .stat-sources { margin-top:18px; font-size:10px; }
}

/* Video: every video CTA opens the same focused YouTube player.  The navy
   footer uses the green action treatment, while the product section retains
   Skeal blue so each remains anchored to its local visual context. */
.skeal-video-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(0,19,45,.78); backdrop-filter:blur(8px); animation:skeal-video-in .22s ease both; }
.skeal-video-modal__panel { position:relative; width:min(960px,100%); aspect-ratio:16/9; overflow:visible; border-radius:22px; box-shadow:0 28px 90px rgba(0,0,0,.42); }
.skeal-video-modal__panel iframe { display:block; width:100%; height:100%; border:0; border-radius:22px; background:#00132d; }
.skeal-video-modal__close { position:absolute; z-index:1; top:-14px; right:-14px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:2px solid #fff; border-radius:50%; background:#00132d; color:#fff; font-size:29px; line-height:1; cursor:pointer; }
.footer-video-btn { align-self:flex-start; margin-top:24px; min-width:210px; justify-content:center; }

/* The cards carry the detailed explanation.  The final line is a compact
   operational reassurance, with the equipment promise in blue and its
   practical conclusion in navy. */
.prod-no-hardware { margin:22px 0 0; font-size:16px; line-height:1.45; }
.prod-no-hardware strong { color:var(--blue); }
.prod-no-hardware span { color:var(--ink); font-weight:800; }
.prod-app-title-accent { color:#1c8ef4; }
.prod-flow .prod-ph { color:var(--ink-soft); }
.prod-portal-title-accent { color:var(--green); }
.prod-action { color:#fff; }
.prod-action span { color:var(--green); }
.prod-flow--portal .prod-card h3 { max-width:17ch; }
.prod-flow--portal .prod-card h3:not(.unused) { color:#fff; }
.prod-cta-wrap { margin-top:30px; }
.prod-cta-wrap .btn { min-width:220px; justify-content:center; }

/* The static dashboard is intentionally cropped: a stronger view of the
   product, rather than a tiny full-screen screenshot. */
.prod-media-stack--static { width:min(108%,500px); margin-left:2%; overflow:hidden; }
.prod-media-stack--static .prod-media-window { width:98%; }
.prod-media-stack--static .prod-media-window img.is-active { transform:scale(1.30); transform-origin:center; }
.onb-notes { margin-top:18px; padding-top:12px; border-top:1px solid var(--line-soft); color:var(--faint); font-size:11px; line-height:1.42; }
.onb-notes p + p { margin-top:5px; }
.legacy-calc-method { display:block; margin-top:8px; color:var(--faint); font-size:11px; line-height:1.4; }
.roi-big-n sup { font-size:.48em; line-height:0; vertical-align:super; margin-left:2px; }
.roi-foot { max-width:62ch; font-size:13px; }
.footer-video-btn,[data-sector-video-trigger] { display:none !important; }

/* Pilot evidence is displayed in full rather than cropping the supplied
   references. Belage keeps its own natural width within the shared frame. */
.proof-shot { height:220px; object-fit:contain; background:rgba(255,255,255,.06); }
.proof-pilot--belage { width:100%; justify-self:stretch; }

@media (max-width:600px) {
  .footer-news-form { width:100%; max-width:100%; box-sizing:border-box; }
  .footer-news-form input { width:0; padding-left:12px; padding-right:8px; }
  .footer-news-form .btn-navy { flex:0 0 auto; padding:11px 13px; font-size:12px; }
  .proof-pilot--belage { width:100%; }
}

@keyframes skeal-video-in { from { opacity:0; } to { opacity:1; } }
@media (max-width:600px) {
  .prod-watermark { top:30px; right:8px; width:235px; opacity:.19 !important; }
  .prod { padding-top:250px !important; }
  .prod-media-stack { min-height:440px; }
  .prod-media-window { width:90%; }
  .prod-flow--app .prod-media-window { width:90%; }
  .prod-flow--portal .prod-media-stack { min-height:320px; }
  .prod-media-stack--static { width:100%; margin-left:0; }
  .prod-media-stack--static .prod-media-window { width:100%; }
  .prod-media-stack--static .prod-media-window img.is-active { transform:scale(1.28); }
  .prod-flow--portal .prod-card h3 { max-width:21ch; font-size:25px; }
  .prod-no-hardware { font-size:15px; }
  .prod-cta-wrap { margin-top:30px; }
  .footer-video-btn { width:100%; }
  .skeal-video-modal { padding:18px; }
  .skeal-video-modal__panel { width:100%; }
  .skeal-video-modal__close { top:-12px; right:-6px; }
}

/* Mobile footer is one centred column, never a desktop grid cropped by the
   viewport.  The two material panels share the same safe-side gutters. */
@media (max-width:600px) {
  .footer { padding:0 0 24px; overflow:hidden; }
  .footer .wrap-wide { width:100% !important; max-width:none; margin:0; padding:0 16px !important; box-sizing:border-box; }
  .footer-grid { display:grid; grid-template-columns:minmax(0,1fr) !important; gap:16px; width:100%; }
  .footer-brand,.footer-links { width:100%; min-width:0; box-sizing:border-box; border-radius:22px; }
  .footer-brand { padding:30px 26px; }
  .footer-links { padding:30px 26px; }
  .footer-logo-link { display:block; width:min(190px,100%); }
  .footer-social { margin-top:18px; }
  .finalcta-btns .btn { max-width:100%; white-space:normal; text-align:center; }
}

/* Portal storytelling — the existing section title and HDS block stay in
   their original parent; only the portal views use the scrolling treatment. */
.skp {
  --skp-ink: var(--ink, #132d46);
  --skp-soft: var(--ink-soft, #59718a);
  --skp-line: rgba(19, 45, 70, .18);
  --skp-green: var(--green, #22c55e);
  --skp-blue: var(--blue, #1c8ef4);
  margin-top: clamp(34px, 4vw, 56px);
  color: var(--skp-ink);
}

.skp-story {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(430px, 1.18fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
  height: clamp(460px, 64vh, 640px);
}

.skp-steps {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  /* Let the page resume scrolling once the last portal view is reached. */
  overscroll-behavior: auto;
  /* The first and last view must be able to reach the same top alignment as
     the fixed image. The bottom-only buffer prevents the last view from
     getting stranded at the bottom of the viewport. */
  padding-block: 0 clamp(267px, 37.12vh, 371px);
  box-sizing: border-box;
  scroll-padding-block: 0;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.skp-steps::-webkit-scrollbar { display: none; }
.skp-step {
  min-height: 42%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 32px 24px;
  border-left: 2px solid var(--skp-line);
  scroll-snap-align: start;
  opacity: .52;
  transition: border-color .35s ease, opacity .35s ease;
}
.skp-step.on { border-left-color: var(--skp-blue); opacity: 1; }
.skp-step-count {
  display: block;
  margin-bottom: 12px;
  color: var(--skp-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.skp-step h3,
.skp-mtext h3 {
  max-width: 24ch;
  margin: 0;
  color: var(--skp-soft);
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.1;
  cursor: pointer;
  transition: color .35s ease;
}
.skp-step h3:focus-visible { outline: 3px solid rgba(28, 142, 244, .35); outline-offset: 6px; }
.skp-step.on h3 { color: var(--skp-blue); }
.skp-step-copy { max-width: 49ch; margin-top: 16px; }
.skp-step-copy p,
.skp-mtext p {
  margin: 0 0 12px;
  color: var(--skp-soft);
  font-size: 14px;
  line-height: 1.58;
  opacity: .72;
  transition: opacity .35s ease;
}
.skp-step.on .skp-step-copy p { opacity: 1; }
.skp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.skp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(28, 142, 244, .25);
  border-radius: 999px;
  color: var(--skp-blue);
  font-size: 11px;
  font-weight: 700;
}
.skp-step--nutrition .skp-chip,
.skp-mtext--nutrition .skp-chip {
  border-color: rgba(19,45,70,.30);
  background: rgba(19,45,70,.04);
  color: var(--skp-ink);
}

.skp-sticky {
  position: sticky;
  top: 14vh;
  min-width: 0;
  padding-top: 0;
}
.skp-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(28, 142, 244, .32);
  border-radius: 22px;
  background: #061a32;
  box-shadow: 0 24px 70px rgba(19, 45, 70, .16);
}
.skp-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: #092442;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.skp-bar i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
}
.skp-bar i:first-child { background: #ff6c5f; }
.skp-bar i:nth-child(2) { background: #f9c74f; }
.skp-bar i:nth-child(3) { background: #46d369; }
.skp-bar span { overflow: hidden; margin-left: 7px; text-overflow: ellipsis; white-space: nowrap; }
.skp-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #fff;
}
.skp-stack .skp-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  object-fit: contain;
  opacity: 0;
  transform: translateY(5%) scale(.985);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.75,.25,1);
}
.skp-stack .skp-screen img.on { opacity: 1; transform: none; }
.skp-stack .skp-screen img.past { transform: translateY(-5%) scale(.985); }
.skp-stack[data-slide-direction="down"] .skp-screen img.on { animation: skp-slide-down .55s cubic-bezier(.2,.75,.25,1) both; }
.skp-stack[data-slide-direction="up"] .skp-screen img.on { animation: skp-slide-up .55s cubic-bezier(.2,.75,.25,1) both; }
.skp-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(6,26,50,.82);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.skp-zoom:hover { background: var(--skp-green); color: #062819; }
.skp-meta { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.skp-count { flex: 0 0 auto; color: var(--skp-soft); font-size: 12px; font-weight: 700; }
.skp-count b { color: var(--skp-green); }
.skp-progress { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(19,45,70,.14); }
.skp-progress i { display: block; height: 100%; border-radius: inherit; background: var(--skp-green); transition: width .45s ease; }
.skp-mobile { display: none; }
.skp-lightbox { width: min(1200px, 94vw); max-width: none; padding: 18px; border: 0; border-radius: 20px; background: #061a32; box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.skp-lightbox::backdrop { background: rgba(0,19,45,.82); backdrop-filter: blur(7px); }
.skp-lightbox img { display: block; width: 100%; max-height: 84vh; object-fit: contain; border-radius: 10px; background: #fff; }
.skp-lightbox button { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%; background: #061a32; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

@keyframes skp-slide-down {
  from { opacity: 0; transform: translateY(5%) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes skp-slide-up {
  from { opacity: 0; transform: translateY(-5%) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .skp-story { grid-template-columns: minmax(230px, .78fr) minmax(360px, 1.22fr); gap: 28px; }
  .skp-step { padding-left: 18px; }
  .skp-step h3 { font-size: 22px; }
  .skp-step-copy p { font-size: 13px; }
  .skp-sticky { padding-top: 0; }
}

@media (max-width: 767px) {
  .skp { margin-top: 28px; }
  .skp-story { display: none; }
  .skp-mobile { display: block; }
  .skp-mobile .skp-frame { border-radius: 17px; }
  .skp-mobile .skp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .skp-mobile .skp-track::-webkit-scrollbar { display: none; }
  .skp-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
  .skp-slide .skp-screen { aspect-ratio: 1.16 / 1; }
  .skp-slide .skp-screen img { display: block; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; object-fit: contain; }
  .skp-mobile .skp-bar { min-height: 34px; padding: 0 12px; font-size: 10px; }
  .skp-mobile .skp-zoom { right: 10px; bottom: 10px; padding: 7px 9px; }
  .skp-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(6,26,50,.78); color: #fff; font-size: 19px; cursor: pointer; }
  .skp-arrow:disabled { opacity: .25; cursor: default; }
  .skp-arrow-prev { left: 10px; }
  .skp-arrow-next { right: 10px; }
  .skp-dots { display: flex; justify-content: center; gap: 7px; margin-top: 15px; }
  .skp-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(19,45,70,.23); cursor: pointer; }
  .skp-dots button.on { width: 22px; border-radius: 99px; background: var(--skp-green); }
  .skp-mobile > .skp-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-top: 17px; scrollbar-width: none; }
  .skp-mobile > .skp-chips::-webkit-scrollbar { display: none; }
  .skp-mobile > .skp-chips button { flex: 0 0 auto; min-width: 42px; padding: 8px 11px; border: 1px solid rgba(19,45,70,.2); border-radius: 999px; background: transparent; color: var(--skp-soft); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
  .skp-mobile > .skp-chips button.on { border-color: var(--skp-blue); background: var(--skp-blue); color: #fff; }
  .skp-mtext { margin-top: 22px; }
  .skp-mtext h3 { max-width: none; color: var(--skp-blue); font-size: 24px; cursor: default; }
  .skp-mtext p { opacity: 1; font-size: 14px; }
  .skp-mtext-chips { margin-top: 12px; }
  .skp-lightbox { width: 94vw; padding: 8px; border-radius: 14px; }
  .skp-lightbox img { max-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
  .skp-stack .skp-screen img,
  .skp-progress i { transition: none; }
  .skp-stack[data-slide-direction="down"] .skp-screen img.on,
  .skp-stack[data-slide-direction="up"] .skp-screen img.on { animation: none; }
  .skp-mobile .skp-track { scroll-behavior: auto; }
}