/* evviro site v3c: the homepage C language on the content subpages (owner 2026-10-31).
   Loaded after site-v3.css. Full-bleed heroes, sticky media, soft cards, thin numbers,
   the over-time strip and the day moments. Content and forms are unchanged. */
@font-face { font-family: "Playfair Display"; font-weight: 400; font-display: swap; src: url(/assets/fonts/PlayfairDisplay_400Regular.ttf) format("truetype"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-display: swap; src: url(/assets/fonts/PlayfairDisplay_500Medium.ttf) format("truetype"); }
:root { --serif: "Playfair Display", "New York", Georgia, serif; --mint: #b9ddd4; --ease: cubic-bezier(.2,.7,.2,1); }

/* the page wrapper must not be a scroll container, so sticky media can stick */
body > div[style*="overflow: hidden"] { overflow: clip !important; }

/* Type: serif display headings like the homepage, the quiet second half in mint italic */
.d1, .d2 { font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -0.02em !important; }
.d1 { font-size: 84px; line-height: 1.02; }
.d2 { font-size: 56px; line-height: 1.07; }
.d1 span[style*="muted"], .d2 span[style*="muted"] { color: var(--mint) !important; font-style: italic; }
.card .step { font-family: var(--sf); font-size: 64px !important; line-height: 1 !important; font-weight: 200 !important; letter-spacing: -0.03em; color: var(--text) !important; background: none !important; border: 0 !important; width: auto !important; height: auto !important; }

/* Soft cards */
.card { background: linear-gradient(180deg, rgba(23, 32, 29, 0.92), rgba(14, 22, 20, 0.94)) !important; border: 1px solid rgba(214, 240, 232, 0.10) !important; border-radius: 28px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }

/* Full-bleed hero media */
.v3c-hero { position: relative !important; overflow: hidden; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; box-sizing: border-box; background-image: none !important; }
.v3c-hero > .wrap, .v3c-hero > div:not(.v3c-media):not(.v3c-shade) { position: relative; z-index: 2; }
.v3c-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v3c-media img, .v3c-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3c-media .still { display: none; }
.v3c-shade { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(6,13,11,.82) 0%, rgba(6,13,11,.45) 52%, rgba(6,13,11,.15) 100%),
  linear-gradient(180deg, rgba(6,13,11,.45) 0%, rgba(6,13,11,.1) 30%, rgba(6,13,11,.75) 82%, #060d0b 100%); }
.v3c-hero .hero-video, .v3c-hero .hero-shade { display: none !important; }

/* Sticky photo behind a section; the text scrolls over it */
.v3c-stick { position: relative; background: transparent !important; overflow: clip; }
.v3c-stickmedia { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; overflow: hidden; z-index: 0; pointer-events: none; }
.v3c-stickmedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3c-stickmedia::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, #060d0b 0%, rgba(6,13,11,.55) 18%, rgba(6,13,11,.62) 75%, #060d0b 100%),
  linear-gradient(90deg, rgba(6,13,11,.55), rgba(6,13,11,.25)); }
.v3c-stick > .wrap { position: relative; z-index: 1; }
.v3c-stick .lead, .v3c-stick .body { color: #c3cbc8; }
@supports (animation-timeline: view()) {
  .v3c-media img, .v3c-stickmedia img { animation: v3c-settle linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes v3c-settle { from { transform: scale(1.12) translateY(-2.5%); } to { transform: scale(1.02) translateY(2.5%); } }
/* a slow settle on the hero when the page opens */
.v3c-hero .v3c-media > img, .v3c-hero .v3c-media > video { animation: v3c-open 14s cubic-bezier(.2,.7,.2,1) both; }
@keyframes v3c-open { from { transform: scale(1.1); } to { transform: scale(1); } }
.v3c-hero .wrap > * { animation: v3c-rise 1.3s cubic-bezier(.2,.7,.2,1) both; }
.v3c-hero .wrap > *:nth-child(2) { animation-delay: .12s; } .v3c-hero .wrap > *:nth-child(3) { animation-delay: .24s; } .v3c-hero .wrap > *:nth-child(4) { animation-delay: .36s; }
@keyframes v3c-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Phones beside text stay in place while the text scrolls */
@media (min-width: 900px) {
  .split > div:has(> .phone) { position: sticky; top: 14vh; align-self: flex-start; }
}

/* Over-time strip */
.v3c-time-sec { padding: 120px 0; border-top: 1px solid rgba(214, 240, 232, 0.10); }
.v3c-time-head { max-width: 760px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.v3c-time { background: linear-gradient(180deg, #111b19, #0b1311); border: 1px solid rgba(214, 240, 232, 0.10); border-radius: 32px; padding: 34px 36px 28px; }
.v3c-weeks, .v3c-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; }
.v3c-weeks { margin-bottom: 10px; }
.v3c-weeks .wk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: #98a09e; }
.v3c-weeks .wk span { border-left: 1px solid rgba(214, 240, 232, 0.10); padding-left: 10px; }
.v3c-row { min-height: 64px; border-top: 1px solid rgba(214, 240, 232, 0.08); }
.v3c-row .lab { font-size: 14px; color: #c9d1ce; padding-right: 16px; }
.v3c-track { position: relative; height: 64px; }
.v3c-track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v3c-track .dose { fill: none; stroke: var(--mint); stroke-width: 1.6; }
.v3c-track .dot { fill: #dad4cb; }
.v3c-track .dot.low { fill: #e6c27e; }
.v3c-track .line { fill: none; stroke: #c2c9c7; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 0; }
.v3c-track .bar { fill: rgba(185, 221, 212, 0.28); }
.v3c-track .bar.off { fill: rgba(255, 255, 255, 0.05); }
.v3c-track .lab-pt { fill: #c2c9c7; }
.v3c-tag { position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-size: 12.5px; color: #f4f4f5; background: #17201d; border: 1px solid rgba(214, 240, 232, 0.18); border-radius: 999px; padding: 6px 12px; }
.v3c-bartag { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: #c9d1ce; padding-left: 12px; }
.v3c-time .example { font-size: 12px; color: #98a09e; margin: 18px 0 0; }
.v3c-time .el { opacity: 1; transition: opacity .9s var(--ease) calc(var(--i, 0) * 45ms); }
html.v3c-js .v3c-time:not(.in) .el { opacity: 0; }
html.v3c-js .v3c-time:not(.in) .line { stroke-dashoffset: 1400; }
.v3c-time .line { transition: stroke-dashoffset 2.4s var(--ease) .3s; }

/* Day moments (the homepage component) */
.v3c-day { position: relative; }
.v3c-day .day-intro { padding: 120px 0 30px; border-top: 1px solid rgba(214, 240, 232, 0.10); }
.v3c-day .eyebrow { display: flex; align-items: center; gap: 10px; }
.v3c-day .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: inline-block; }
.v3c-day .h2 { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1.07; letter-spacing: -0.02em; margin: 0; }
.v3c-day .h2 em { font-style: italic; color: var(--mint); }
.v3c-day .lead { margin-top: 18px; max-width: 560px; }
.v3c-day .moment { position: relative; overflow: hidden; padding: 130px 0 120px; }
.v3c-day .media-bg { position: absolute; inset: 0; overflow: hidden; }
.v3c-day .media-bg video, .v3c-day .media-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.v3c-day .media-bg .still { display: none; }
.v3c-day .shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, #060d0b 0%, rgba(6,13,11,.25) 16%, rgba(6,13,11,.35) 40%, rgba(6,13,11,.78) 72%, #060d0b 100%),
  linear-gradient(90deg, rgba(6,13,11,.65), rgba(6,13,11,.05) 65%); }
.v3c-day .over { position: relative; z-index: 2; }
.v3c-day .m-time { display: flex; align-items: baseline; gap: 16px; }
.v3c-day .m-time .num { font-family: var(--sf); font-size: 96px; font-weight: 200; letter-spacing: -0.03em; line-height: 1; }
.v3c-day .m-time .ampm { font-size: 17px; color: #f4f4f5; font-weight: 300; text-shadow: 0 1px 12px rgba(6,13,11,.7); }
.v3c-day .m-h { margin-top: 10px; max-width: 720px; }
.v3c-day .pair { margin-top: 48px; display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; max-width: 1020px; }
.v3c-day .side { background: #0e1614; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; padding: 26px 28px; min-height: 140px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.v3c-day .side .k { display: flex; align-items: center; gap: 8px; margin: 0; }
.v3c-day .side .k i { width: 7px; height: 7px; border-radius: 50%; background: #f4f4f5; display: inline-block; }
.v3c-day .side.care .k i { background: var(--mint); }
.v3c-day .side p.t { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.35; margin: 0; }
.v3c-day .gate { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
.v3c-day .gate::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(185,221,212,.2), rgba(185,221,212,.7), rgba(185,221,212,.2)); }
.v3c-day .chip { position: relative; z-index: 1; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; background: #0a1210; border: 1px solid rgba(255,255,255,.14); }
.v3c-day .ask { display: flex; gap: 8px; margin-top: 6px; }
.v3c-day .ask span { font-size: 13.5px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); }
.v3c-day .ask span.yes { background: #f4f4f5; color: #0a0a0b; border-color: #f4f4f5; font-weight: 500; }
.v3c-day .rv { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
html.v3c-js .v3c-day .rv:not(.in) { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .v3c-media video, .v3c-day .media-bg video { display: none; }
  .v3c-media .still, .v3c-day .media-bg .still { display: block; }
  .v3c-media img, .v3c-stickmedia img { animation: none !important; }
  html.v3c-js .v3c-time:not(.in) .el, html.v3c-js .v3c-day .rv:not(.in) { opacity: 1; transform: none; }
  html.v3c-js .v3c-time:not(.in) .line { stroke-dashoffset: 0; }
}

@media (max-width: 860px) {
  .d1 { font-size: 46px; }
  .d2 { font-size: 36px; }
  .card .step { font-size: 48px !important; }
  .v3c-hero { min-height: 86svh; }
  .v3c-stickmedia { height: 100svh; margin-bottom: -100svh; }
  .v3c-time-sec { padding: 80px 0; }
  .v3c-time { padding: 22px 16px 18px; border-radius: 24px; }
  .v3c-weeks, .v3c-row { grid-template-columns: 92px minmax(0, 1fr); }
  .v3c-row .lab { font-size: 12.5px; padding-right: 8px; }
  .v3c-weeks .wk { font-size: 10px; letter-spacing: .6px; }
  .v3c-weeks .wk span { padding-left: 4px; }
  .v3c-tag { font-size: 10.5px; padding: 4px 8px; }
  .v3c-bartag { font-size: 11px; }
  .v3c-day .h2 { font-size: 36px; }
  .v3c-day .moment { padding: 90px 0 80px; }
  .v3c-day .m-time .num { font-size: 68px; }
  .v3c-day .pair { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .v3c-day .gate { height: 64px; }
  .v3c-day .gate::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .v3c-day .side { padding: 20px; min-height: 0; border-radius: 22px; }
  .v3c-day .side p.t { font-size: 19px; }
}

/* over-time markers (HTML, so they stay round at any width) */
.v3c-track .mk { position: absolute; top: 50%; transform: translate(-50%, -50%); display: block; }
.v3c-track .mk.dose { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--mint); box-sizing: border-box; }
.v3c-track .mk.dot { width: 8px; height: 8px; border-radius: 50%; background: #dad4cb; transform: translate(-50%, -50%); }
.v3c-track .mk.dot.low { background: #e6c27e; }
.v3c-track .mk.lab { width: 12px; height: 12px; border-radius: 3px; background: #c2c9c7; }
@media (max-width: 860px) { .v3c-track .mk.dose { width: 10px; height: 10px; } .v3c-track .mk.dot { width: 6px; height: 6px; } }

/* The Understood movement: anchor line and ritual cards */
.v3c-understood { padding: 110px 0; border-top: 1px solid rgba(214, 240, 232, 0.10); }
.v3c-uhead { display: flex; align-items: center; gap: 28px; }
.v3c-umark { width: 88px; height: 88px; color: #f4f4f5; flex-shrink: 0; }
.v3c-uline { margin: 12px 0 0; font-family: var(--serif); font-size: 36px; line-height: 1.25; color: #f4f4f5; max-width: 860px; }
.v3c-uline em { font-style: italic; color: var(--mint); }
.v3c-ucards { display: grid; gap: 14px; margin-top: 44px; }
.v3c-u3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3c-u1 { grid-template-columns: minmax(0, 520px); }
.v3c-ucards .card { padding: 30px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) {
  .v3c-understood { padding: 72px 0; }
  .v3c-uhead { gap: 16px; align-items: flex-start; }
  .v3c-umark { width: 56px; height: 56px; }
  .v3c-uline { font-size: 26px; }
  .v3c-u3 { grid-template-columns: minmax(0, 1fr); }
}

/* biomarkers: inactive story steps stay readable (AA) */
div[data-step]:not(.on) { opacity: .82 !important; }
div[data-step] .num { color: #a2aca9 !important; }

/* Aiden mark draws itself when it comes into view */
.v3c-umark path:last-child { stroke-dasharray: 1400; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.2,.7,.2,1); }
html.v3c-js .v3c-understood:not(.in) .v3c-umark path:last-child { stroke-dashoffset: 1400; }

/* Day moments carousel: swipe, scroll or use the arrows; no autoplay */
.v3c-dayhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.v3c-ctrl { display: flex; gap: 10px; }
.v3c-ctrl button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(244,244,245,.3); background: rgba(6,13,11,.5); color: #f4f4f5; font-size: 20px; cursor: pointer; transition: border-color .3s, opacity .3s; }
.v3c-ctrl button:hover { border-color: rgba(244,244,245,.7); }
.v3c-ctrl button:disabled { opacity: .35; cursor: default; }
.v3c-car { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0 24px; outline-offset: -4px; }
.v3c-car::-webkit-scrollbar { display: none; }
.v3c-rail { display: flex; gap: 18px; padding: 0 max(48px, calc((100vw - 1144px) / 2)); width: max-content; }
.v3c-day .v3c-slide { position: relative; overflow: hidden; scroll-snap-align: center; width: min(1000px, 84vw); min-height: 600px; border-radius: 34px; padding: 72px 64px 56px; box-sizing: border-box; border: 1px solid rgba(214,240,232,.12); display: flex; flex-direction: column; justify-content: flex-end; }
.v3c-day .v3c-slide .shade { background: linear-gradient(180deg, rgba(6,13,11,.15) 0%, rgba(6,13,11,.35) 40%, rgba(6,13,11,.88) 100%); }
.v3c-day .v3c-slide .wrap { padding: 0; max-width: none; }
.v3c-day .v3c-slide .m-time .num { font-size: 84px; }
.v3c-day .v3c-slide .pair { margin-top: 32px; grid-template-columns: 1fr 120px 1fr; }
.v3c-day .day-intro { padding-bottom: 36px; }
@media (max-width: 860px) {
  .v3c-dayhead { flex-direction: column; align-items: flex-start; }
  .v3c-rail { padding: 0 20px; gap: 12px; }
  .v3c-day .v3c-slide { width: 86vw; min-height: 560px; padding: 40px 22px 24px; border-radius: 26px; }
  .v3c-day .v3c-slide .m-time .num { font-size: 60px; }
  .v3c-day .v3c-slide .pair { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .v3c-day .v3c-slide .gate { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3c-hero .v3c-media > img, .v3c-hero .v3c-media > video, .v3c-hero .wrap > * { animation: none !important; }
  html.v3c-js .v3c-understood:not(.in) .v3c-umark path:last-child { stroke-dashoffset: 0; }
  .v3c-ctrl { display: none; }
  .v3c-car { overflow: visible; }
  .v3c-rail { flex-direction: column; width: auto; padding: 0 20px; max-width: 1144px; margin: 0 auto; }
  .v3c-day .v3c-slide { width: auto; }
}

/* B2B pages: a quiet "Book a demo" that appears once the hero has passed */
.v3c-demo { position: fixed; right: 22px; bottom: 22px; z-index: 40; text-decoration: none; font-size: 15px; font-weight: 500; color: #0a0c0b !important; background: #f4f4f5; padding: 14px 22px; border-radius: 999px; box-shadow: 0 16px 40px rgba(0,0,0,.45); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s, transform .5s; }
.v3c-demo.show { opacity: 1; transform: none; pointer-events: auto; }
.v3c-demo:hover { background: #fff; }
@media (max-width: 860px) { .v3c-demo { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 14px; } }