/* evviro website v3 drafts: shared styles. Dark only, tint A. Glass only on navigation. */
@font-face { font-family: Geist; font-weight: 200; font-display: swap; src: url(/assets/fonts/Geist_200ExtraLight.ttf) format("truetype"); }
@font-face { font-family: Geist; font-weight: 300; font-display: swap; src: url(/assets/fonts/Geist_300Light.ttf) format("truetype"); }
@font-face { font-family: Geist; font-weight: 400; font-display: swap; src: url(/assets/fonts/Geist_400Regular.ttf) format("truetype"); }
@font-face { font-family: Geist; font-weight: 500; font-display: swap; src: url(/assets/fonts/Geist_500Medium.ttf) format("truetype"); }
@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 {
  --bg: #060d0b;
  --top: #0f1a17;
  --bottom: #040806;
  --chrome: #0a1210;
  --card: #0e1614;
  --raised: #17201d;
  --track: #28302e;
  --text: #f4f4f5;
  --text2: #a2aca9;
  --muted: #98a09e;
  --line: rgba(255, 255, 255, 0.1);
  --line2: rgba(255, 255, 255, 0.18);
  --teal: rgba(62, 152, 134, 0.18);
  --glass: rgba(15, 28, 25, 0.74);
  --good: #9cc685;
  --attn: #e6c27e;
  --d-sleep: #e4e9e7;
  --d-recovery: #b9ddd4;
  --d-strain: #659086;
  --d-water: #8cb9ae;
  --d-weight: #a2aaa7;
  --d-mood: #dad4cb;
  --d-lab: #c2c9c7;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Geist, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Geist, system-ui, sans-serif;
  --serif: "Playfair Display", "New York", Georgia, serif;
  --wrap: 1240px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--teal), rgba(62, 152, 134, 0) 60%) no-repeat,
    linear-gradient(180deg, var(--top) 0, var(--bg) 900px, var(--bg) calc(100% - 900px), var(--bottom) 100%);
}
img { display: block; max-width: 100%; }
a { color: var(--text); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 48px; }
.sec { padding: 128px 0; position: relative; }
.sec-tight { padding: 88px 0; }

/* Type */
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text2); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--d-recovery); }
.h1, .h2, .h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.5px; }
.h1 { font-size: 88px; line-height: 1.02; letter-spacing: -1.6px; }
.h2 { font-size: 58px; line-height: 1.06; letter-spacing: -1px; }
.h3 { font-size: 32px; line-height: 1.15; }
.h1 em, .h2 em { font-style: italic; color: var(--d-recovery); }
.lead { font-size: 20px; line-height: 1.55; color: var(--text2); margin: 24px 0 0; max-width: 640px; font-weight: 400; }
.body { font-size: 15px; line-height: 1.6; color: var(--text2); margin: 0; }
.t { font-size: 18px; line-height: 1.35; font-weight: 500; margin: 0; color: var(--text); }
.k { font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.num { font-family: var(--display); font-weight: 200; letter-spacing: -2px; line-height: 1; }
.mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.2px; }
.fine { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 16px; font-weight: 500; color: #0a0a0b; background: var(--text); padding: 16px 28px; border-radius: 999px; }
.btn2 { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 16px; color: var(--text); border: 1px solid var(--line2); padding: 15px 26px; border-radius: 999px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* Glass: navigation layer only */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); padding: 8px 14px; border-radius: 999px;
  background: rgba(6, 13, 11, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .chip { background: #111b19; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Nav */
.navbar { position: sticky; top: 0; z-index: 50; padding: 14px 20px; margin-bottom: -78px; }
.nav { max-width: 1200px; margin: 0 auto; border-radius: 999px; padding: 8px 8px 8px 22px; display: flex; align-items: center; gap: 8px; }
.nav-logo img { height: 22px; width: auto; }
.navlinks { display: flex; gap: 2px; margin-left: 28px; flex: 1; }
.navlinks a { text-decoration: none; color: var(--text2); font-size: 14px; padding: 10px 14px; border-radius: 999px; }
.navlinks a.on { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.nav-actions { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.nav-signin { text-decoration: none; font-size: 14px; padding: 12px 14px; }
.nav-cta { text-decoration: none; font-size: 14px; font-weight: 500; color: #0a0a0b; background: var(--text); padding: 12px 20px; border-radius: 999px; white-space: nowrap; }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--text); }

/* Surfaces (solid, never glass) */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.raised { background: var(--raised); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sep { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Device frames */
.phone { width: 320px; max-width: 100%; border-radius: 52px; background: #020403; border: 1px solid var(--line2); padding: 9px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 140px rgba(62, 152, 134, 0.14); }
.phone img { width: 100%; border-radius: 44px; }
.phone.sm { width: 250px; border-radius: 42px; padding: 7px; }
.phone.sm img { border-radius: 36px; }
.browser { border-radius: 18px; overflow: hidden; background: var(--chrome); border: 1px solid var(--line2); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); }
.browser-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--track); }
.browser-bar span { margin-left: 14px; font-size: 12px; color: var(--muted); }
.browser img { width: 100%; }
.example { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

/* Photos & video backgrounds */
.media-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.media-bg video, .media-bg img { width: 100%; height: 100%; object-fit: cover; }
.media-bg .still { display: none; }
.shade-b { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 13, 11, 0.55) 0%, rgba(6, 13, 11, 0.25) 35%, rgba(6, 13, 11, 0.85) 80%, var(--bg) 100%); }
.shade-l { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 13, 11, 0.86) 0%, rgba(6, 13, 11, 0.5) 50%, rgba(6, 13, 11, 0.1) 100%); }
.over { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .media-bg video { display: none; }
  .media-bg .still { display: block; }
}

/* Reveal motion: slow, calm */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 1.4s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1); }
html.js .rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .15s; } .rv.d2 { transition-delay: .3s; } .rv.d3 { transition-delay: .45s; }
html.still .rv { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* Diagram */
.diagram { width: 100%; height: auto; }
.diagram .node { fill: var(--card); stroke: rgba(255, 255, 255, 0.16); }
.diagram .layer { fill: #0b1513; stroke: rgba(185, 221, 212, 0.35); }
.diagram .lbl { fill: var(--text); font-family: var(--sans); font-size: 17px; font-weight: 500; }
.diagram .sub { fill: var(--text2); font-family: var(--sans); font-size: 13px; }
.diagram .tiny { fill: var(--muted); font-family: var(--sans); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.diagram .pill { fill: var(--raised); stroke: rgba(255, 255, 255, 0.1); }
.diagram .pilltxt { fill: var(--text); font-family: var(--sans); font-size: 13px; }
.diagram .wire { fill: none; stroke: rgba(185, 221, 212, 0.55); stroke-width: 1.5; }
.diagram .flow { fill: none; stroke: var(--d-recovery); stroke-width: 2; stroke-dasharray: 3 14; stroke-linecap: round; animation: flow 6s linear infinite; }
.diagram .flow.rev { animation-direction: reverse; }
.diagram .serif { font-family: var(--serif); fill: var(--text); }
@keyframes flow { to { stroke-dashoffset: -170; } }
@media (prefers-reduced-motion: reduce) { .diagram .flow { animation: none; } }
html.still .diagram .flow { animation: none; }
.diagram-m { display: none; }

/* Pricing */
.plan { display: flex; flex-direction: column; gap: 10px; }
.plan .price { font-family: var(--display); font-weight: 200; font-size: 72px; letter-spacing: -2.5px; line-height: 1; }
.plan .per { font-size: 16px; color: var(--text2); letter-spacing: 0; }
.badge { display: inline-block; font-size: 12px; color: var(--text); background: var(--raised); border: 1px solid var(--line2); padding: 5px 10px; border-radius: 999px; }
.feat h4 { font-size: 14px; font-weight: 500; margin: 0 0 10px; color: var(--text); }
.feat ul { margin: 0; padding: 0; list-style: none; }
.feat li { font-size: 14px; line-height: 1.5; color: var(--text2); padding: 7px 0 7px 22px; position: relative; border-top: 1px solid var(--line); }
.feat li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 1.5px; background: var(--d-recovery); }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 72px 0 48px; background: var(--bottom); }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot h5 { margin: 0 0 14px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.foot a { display: block; text-decoration: none; color: var(--text2); font-size: 14px; padding: 5px 0; }
.legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 900px; }

/* Mobile */
@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .sec { padding: 84px 0; }
  .sec-tight { padding: 64px 0; }
  .h1 { font-size: 48px; letter-spacing: -0.8px; }
  .h2 { font-size: 38px; letter-spacing: -0.5px; }
  .h3 { font-size: 26px; }
  .lead { font-size: 17px; }
  .navlinks, .nav-signin { display: none; }
  .nav-burger { display: flex; }
  .nav { padding-left: 16px; }
  .nav-cta { padding: 11px 16px; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 24px; border-radius: 22px; }
  .phone { width: 260px; margin: 0 auto; border-radius: 44px; }
  .phone img { border-radius: 37px; }
  .diagram-d { display: none; }
  .diagram-m { display: block; }
  .plan .price { font-size: 60px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot > :first-child { grid-column: 1 / -1; }
}

/* Layer tiles */
.tile { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; }
.tile .k { margin: 6px 0 0; }
.tile .vis { height: 178px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line); padding: 14px 16px; overflow: hidden; margin-bottom: 8px; }
.tg { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text); padding: 8px 0; border-bottom: 1px solid var(--line); }
.tg:last-child { border-bottom: 0; color: var(--text2); }
.sw { width: 38px; height: 22px; border-radius: 999px; background: var(--track); position: relative; flex-shrink: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #f4f4f5; opacity: .55; }
.sw.on { background: #3e7f72; }
.sw.on::after { left: 19px; opacity: 1; }
.log div { color: var(--text2); padding: 7px 0; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log div:last-child { border-bottom: 0; }
.log b { color: var(--text); font-weight: 500; margin-right: 6px; }
.note .who { display: flex; gap: 10px; align-items: center; }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--track); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text); flex-shrink: 0; }
.note b { display: block; font-size: 14px; font-weight: 500; }
.note small { display: block; font-size: 12px; color: var(--muted); }
.note p { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 14px 0 0; }
.vis.shot { padding: 0; }
.vis.shot img { width: 165%; max-width: none; height: auto; margin: -6px 0 0 -9%; }
.feats { margin-top: 44px; gap: 32px; }
@media (max-width: 860px) { .feats { gap: 26px; margin-top: 36px; } }

/* Chat bubbles (solid, inside content cards) */
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; font-size: 14.5px; line-height: 1.5; padding: 12px 15px; border-radius: 18px; }
.msg.me { align-self: flex-end; background: var(--track); border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: var(--raised); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.msg-head svg { width: 26px; height: 12px; }
.ask { display: flex; gap: 8px; margin-top: 4px; }
.ask span { font-size: 13.5px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line2); }
.ask span.yes { background: var(--text); color: #0a0a0b; border-color: var(--text); font-weight: 500; }

html, body { overflow-x: hidden; }
.grid > * { min-width: 0; }

/* Live header (markup unchanged), new look */
      .navbar {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 14px 20px;
        margin-bottom: -76px;
      }
      .nav-shell {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
      }
      .nav {
        box-sizing: border-box;
        border-radius: 999px;
        padding: 8px 8px 8px 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(15, 26, 23, 0.62);
        -webkit-backdrop-filter: blur(24px) saturate(1.8);
        backdrop-filter: blur(24px) saturate(1.8);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top-color: rgba(255, 255, 255, 0.22);
        box-shadow:
          inset 0 1px 1px rgba(255, 255, 255, 0.06),
          0 8px 24px rgba(0, 0, 0, 0.45);
      }
      .nav-logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
      }
      .nav-logo img {
        height: 24px;
        width: auto;
        display: block;
      }
      .navlinks {
        display: flex;
        gap: 2px;
        margin-left: 24px;
        flex: 1;
      }
      .nav-trigger {
        background: transparent;
        color: #a2aca9;
        border: 0;
        font: inherit;
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 999px;
        cursor: pointer;
        text-decoration: none;
      }
      .nav-trigger:hover,
      .nav-trigger.is-active,
      .nav-trigger[aria-expanded="true"] {
        color: #f4f4f5;
        background: rgba(255, 255, 255, 0.1);
      }
      .caret {
        font-size: 10px;
        margin-left: 4px;
        color: #98a09e;
      }
      .nav-actions {
        display: flex;
        gap: 4px;
        align-items: center;
        margin-left: auto;
      }
      .nav-signin {
        text-decoration: none;
        font-size: 14px;
        color: #f4f4f5;
        padding: 12px 14px;
        border-radius: 999px;
      }
      .nav-cta {
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        color: #0a0c0b;
        background: #f4f4f5;
        padding: 12px 20px;
        border-radius: 999px;
      }
      .nav-cta:hover {
        color: #0a0c0b;
        background: #fff;
      }
      .nav-burger {
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 0;
        background: rgba(255, 255, 255, 0.08);
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
      }
      .nav-burger span {
        display: block;
        width: 16px;
        height: 1.5px;
        background: #f4f4f5;
      }
      .menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 72px;
        box-sizing: border-box;
        border-radius: 28px;
        padding: 28px;
        background: rgba(10, 18, 16, 0.95);
        -webkit-backdrop-filter: blur(24px) saturate(1.6);
        backdrop-filter: blur(24px) saturate(1.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        max-height: calc(100vh - 110px);
        overflow: auto;
      }
      .menu[hidden] {
        display: none;
      }
      .menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 8px;
      }
      .menu-business {
        grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
        gap: 24px;
      }
      .menu-col {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .menu-item {
        text-decoration: none;
        color: #f4f4f5;
        padding: 14px 16px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .menu-item:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #f4f4f5;
      }
      .menu-title {
        font-size: 16px;
        font-weight: 500;
      }
      .menu-sub {
        font-size: 13px;
        line-height: 19px;
        color: #a2aca9;
      }
      .menu-sub-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 16px;
        padding: 4px 16px 0;
      }
      .menu-sub-link {
        text-decoration: none;
        font-size: 14px;
        color: #a2aca9;
        padding: 8px 0;
      }
      .menu-sub-link:hover {
        color: #f4f4f5;
      }
      .m-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(214, 240, 232, 0.1);
      }
      .m-group:last-child {
        border-bottom: 0;
        margin-bottom: 0;
      }
      .m-head {
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #98a09e;
        padding: 4px 16px 6px;
      }
      .menu-mobile details.m-group {
        display: block;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid rgba(214, 240, 232, 0.1);
      }
      .menu-mobile details.m-group > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 17px;
        letter-spacing: 0;
        text-transform: none;
        color: #f4f4f5;
        padding: 16px;
      }
      .menu-mobile details.m-group > summary::-webkit-details-marker {
        display: none;
      }
      .menu-mobile details.m-group > summary::after {
        content: "+";
        font-size: 20px;
        color: #98a09e;
        line-height: 1;
      }
      .menu-mobile details.m-group > summary::after {
        transition: transform 0.2s;
      }
      .menu-mobile details.m-group[open] > summary::after {
        transform: rotate(45deg);
      }
      .menu-mobile details.m-group[open] {
        padding-bottom: 10px;
      }
      .menu-mobile .menu-sub {
        display: none;
      }
      .menu-mobile .menu-item {
        padding: 10px 16px;
      }
      .menu-mobile .menu-title {
        font-size: 15px;
        font-weight: 400;
        color: #c9d1ce;
      }
      .menu-mobile > .m-group:last-child {
        padding-top: 10px;
      }
      .menu-mobile > .m-group:last-child .menu-title {
        font-size: 17px;
        color: #f4f4f5;
      }
      .menu-mobile {
        padding: 12px 12px 16px;
      }
      @media (max-width: 1100px) {
        .navlinks {
          display: none;
        }
        .nav-burger {
          display: flex;
        }
        .nav-signin {
          display: none;
        }
      }
      @media (max-width: 480px) {
        .nav {
          padding-left: 16px;
        }
        .nav-cta {
          padding: 11px 14px;
        }
      }
      @media (prefers-reduced-transparency: reduce) {
        .nav,
        .menu {
          background: #111b19;
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
        }
      }

.nav-trigger, .nav-signin, .nav-cta { font-family: var(--sans); }
/* Homepage (draft C, approved 2026-10-31) */
/* Direction C: A as the frame, the day in the middle, nothing technical */
.hero { position: relative; min-height: 920px; display: flex; align-items: flex-end; padding: 200px 0 104px; overflow: hidden; }
.hero .media-bg img, .hero .media-bg video { object-position: center 62%; }
.hero .shade-b { background: linear-gradient(180deg, rgba(6,13,11,.5) 0%, rgba(6,13,11,.15) 34%, rgba(6,13,11,.8) 76%, var(--bg) 100%); }
.hero .shade-l { background: linear-gradient(90deg, rgba(6,13,11,.78) 0%, rgba(6,13,11,.3) 55%, rgba(6,13,11,0) 100%); }
.hero .h1 { max-width: 960px; }
.rail { margin-top: 64px; display: flex; align-items: center; flex-wrap: wrap; }
.rail .chip { padding: 11px 18px; font-size: 14px; }
.rail .chip.layer { border-color: rgba(185,221,212,.5); }
.rail .wire { width: 48px; height: 1px; background: linear-gradient(90deg, rgba(185,221,212,.15), rgba(185,221,212,.7), rgba(185,221,212,.15)); }
.short { max-width: 560px; }
.aiden { position: relative; overflow: hidden; padding: 160px 0; }
.aiden .shade-l { background: linear-gradient(90deg, rgba(6,13,11,.88) 0%, rgba(6,13,11,.5) 50%, rgba(6,13,11,.2) 100%), linear-gradient(180deg, var(--bg) 0%, rgba(6,13,11,0) 18%, rgba(6,13,11,0) 82%, var(--bg) 100%); }
.day-intro { padding: 150px 0 40px; }
.moment { position: relative; overflow: hidden; padding: 150px 0 140px; }
.moment .shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--bg) 0%, rgba(6,13,11,.25) 16%, rgba(6,13,11,.35) 40%, rgba(6,13,11,.78) 72%, var(--bg) 100%),
  linear-gradient(90deg, rgba(6,13,11,.65), rgba(6,13,11,.05) 65%); }
.moment .media-bg img, .moment .media-bg video { object-position: center 30%; }
.m-time { display: flex; align-items: baseline; gap: 16px; }
.m-time .num { font-size: 104px; }
.m-time .ampm { font-size: 17px; color: var(--text); text-shadow: 0 1px 12px rgba(6,13,11,.7); font-family: var(--display); font-weight: 300; }
.m-h { margin-top: 10px; max-width: 720px; }
.pair { margin-top: 56px; display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; max-width: 1020px; }
.pair .side { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 28px 30px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.pair .side .k { display: flex; align-items: center; gap: 8px; margin: 0; }
.pair .side .k i { width: 7px; height: 7px; border-radius: 50%; background: var(--text); display: inline-block; }
.pair .side.care .k i { background: var(--d-recovery); }
.pair .side p.t { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.35; }
.pair .gate { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
.pair .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)); }
.pair .gate .chip { position: relative; z-index: 1; font-size: 12.5px; padding: 8px 14px; background: var(--chrome); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ask { margin-top: 6px; }
.layer-sec { padding: 150px 0 120px; }
.points { margin-top: 64px; }
.points .t { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.25; }
.points .body { margin-top: 12px; max-width: 320px; }
.points > div { padding-top: 26px; border-top: 1px solid var(--line); }
.diag-wrap { margin-top: 88px; padding: 56px 48px; border-radius: 32px; border: 1px solid var(--line); background: radial-gradient(80% 70% at 50% 45%, rgba(62,152,134,.10), rgba(62,152,134,0) 70%), #08110f; }
.prac-points { margin-top: 56px; }
.prac-points .t { margin-top: 0; }
.prac-points .body { margin-top: 8px; }
.calm-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.calm-row p { font-size: 16px; color: var(--text); padding-top: 18px; border-top: 1px solid var(--line); }
.final { position: relative; overflow: hidden; padding: 190px 0 170px; text-align: center; }
.final .shade-b { background: linear-gradient(180deg, var(--bg) 0%, rgba(6,13,11,.45) 30%, rgba(6,13,11,.6) 70%, var(--bottom) 100%); }
.final .ctas { justify-content: center; }
@media (max-width: 860px) {
  .hero { min-height: 760px; padding: 150px 0 60px; }
  .hero .media-bg img { object-position: 60% 60%; }
  /* Phone: the woman by the lake stays in the picture, above the text (owner, 2026-11-01). */
  .hero .media-bg video, .hero .media-bg .still { object-position: 80% 30%; }
  .hero:has(video) { padding-top: max(150px, 44svh); }
  .hero:has(video) .shade-l { background: linear-gradient(90deg, rgba(6, 13, 11, 0.6) 0%, rgba(6, 13, 11, 0.25) 60%, rgba(6, 13, 11, 0) 100%); }
  .hero:has(video) .shade-b { background: linear-gradient(180deg, rgba(6, 13, 11, 0.45) 0%, rgba(6, 13, 11, 0) 22%, rgba(6, 13, 11, 0.15) 38%, rgba(6, 13, 11, 0.88) 58%, var(--bg) 100%); }
  .rail { margin-top: 40px; flex-direction: column; align-items: flex-start; }
  .rail .wire { width: 1px; height: 14px; margin-left: 26px; background: rgba(185,221,212,.5); }
  .aiden { padding: 100px 0; }
  .day-intro { padding: 100px 0 10px; }
  .moment { padding: 96px 0 84px; }
  .m-time .num { font-size: 72px; }
  .pair { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .pair .gate { height: 70px; }
  .pair .gate::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgba(185,221,212,.2), rgba(185,221,212,.7), rgba(185,221,212,.2)); }
  .pair .side { padding: 22px; min-height: 0; border-radius: 22px; }
  .pair .side p.t { font-size: 19px; }
  .layer-sec { padding: 96px 0 72px; }
  .points { margin-top: 40px; gap: 28px; }
  .diag-wrap { margin-top: 56px; padding: 24px 12px; border-radius: 24px; }
  .calm-row { grid-template-columns: 1fr; gap: 0; }
  .calm-row p { padding: 16px 0; }
  .final { padding: 120px 0; }
}

/* Homepage v3: the live story sections in C's look */
.hero-second { font-family: var(--serif); font-size: 34px; line-height: 1.2; color: var(--text); margin: 18px 0 22px; max-width: 760px; }
.hero-second em { font-style: italic; color: var(--d-recovery); }
.hero .lead { margin-top: 22px; }
.gap-sec { padding-top: 150px; }
.photo { position: relative; height: 560px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.three { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.card .k { margin: 0; }
.card .t { margin: 8px 0 8px; font-size: 22px; }
.card.hi { background: #121c19; border-color: rgba(185, 221, 212, 0.3); }
.three-row { margin-top: 48px; }
.three-row .card { min-height: 230px; }
.aiden-note { margin-top: 32px; max-width: 440px; padding: 16px 20px; border-radius: 20px; background: rgba(10, 18, 16, 0.92); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.aiden-note .s { font-size: 12px; color: #c9d1ce; }
.aiden-note .m { font-size: 16px; line-height: 1.45; }
.people-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 40px; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pcard { position: relative; display: block; height: 480px; border-radius: 26px; overflow: hidden; text-decoration: none; background: var(--card); border: 1px solid var(--line); }
.pcard .media-bg video, .pcard .media-bg img { transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .media-bg video, .pcard:hover .media-bg img { transform: scale(1.04); }
.pcard .media-bg .still { display: block; position: absolute; inset: 0; z-index: -1; }
.pcard .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(6,13,11,0), rgba(6,13,11,.88)); }
.pcard .note { position: absolute; left: 14px; right: 14px; bottom: 14px; border-radius: 18px; padding: 13px 15px; background: rgba(10, 18, 16, 0.92); border: 1px solid var(--line); }
.pcard .note .s { display: block; font-size: 12px; color: #c9d1ce; }
.pcard .note .m { display: block; font-size: 16px; line-height: 1.4; margin-top: 3px; color: var(--text); }
.org { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; padding: 48px; text-decoration: none; }
.org:hover { border-color: var(--line2); }
.feats { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.foot5 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; }
.foot p a { color: var(--text); display: inline; padding: 0; }
.langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.langs span { font-size: 13px; color: var(--text); border: 1px solid var(--line2); border-radius: 999px; padding: 7px 12px; }
.legal-row { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.legal-row span:first-child { max-width: 820px; }
.phone img, .browser img { height: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-transparency: reduce) { .glass { background: #111b19; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* The Understood movement */
.understood { border-top: 1px solid var(--line); }
.u-head { display: flex; align-items: center; gap: 36px; }
.u-mark { width: 200px; height: 80px; color: var(--text); flex-shrink: 0; stroke-dasharray: 1400; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.2,.7,.2,1), opacity 1.4s !important; }
html.js .u-mark.rv:not(.in) { stroke-dashoffset: 1400; }
.understood .h2 { font-size: 88px; }
.u-lines { margin-top: 48px; display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.u-lines p { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1.3; color: var(--text); }
.u-lines em { font-style: italic; color: var(--d-recovery); }
.u-lines .u-against { color: var(--text2); font-size: 24px; margin-top: 8px; }
.u-rituals { margin-top: 56px; }
.u-rituals .card { min-height: 200px; }
.u-layer { margin: 40px 0 0; max-width: 820px; font-size: 18px; line-height: 1.6; color: var(--text2); }
.u-id { margin: 28px 0 0; font-family: var(--serif); font-size: 26px; }
.u-id em { font-style: italic; color: var(--d-recovery); }
@media (max-width: 860px) { .u-head { gap: 16px; flex-direction: column; align-items: flex-start; } .u-mark { width: 100px; height: 40px; } .understood .h2 { font-size: 52px; } .u-lines p { font-size: 24px; } .u-lines .u-against { font-size: 19px; } .u-rituals .card { min-height: 0; } }
@media (max-width: 1100px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .hero-second { font-size: 24px; }
  .gap-sec { padding-top: 96px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .photo { height: 320px; }
  .three-row .card { min-height: 0; }
  .people { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .people::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 72%; height: 400px; scroll-snap-align: start; }
  .org { padding: 30px 24px; }
}
@media (max-width: 520px) { .foot5 { grid-template-columns: 1fr; } }