:root {
  --ink: #11141c;
  --blue: #0f8f9b;
  --teal: #0b6972;
  --electric: #0fa3b1;
  --pink: #e0218a;
  --sky: #c6dde0;
  --coral: #e0218a;
  --lime: #f3edf0;
  --white: #f8f4ed;
  --soft: #e9e6e1;
  --line: rgba(17, 20, 28, .18);
  --pad: clamp(22px, 4vw, 64px);
}

@property --compliance {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Instrument Sans", Arial, sans-serif;
  font-variation-settings: "wdth" 92;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: white;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 96px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--ink);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  width: max-content;
}
.brand-mark {
  font-family: "Archivo Black", sans-serif;
  font-size: 25px;
  letter-spacing: -2.5px;
}
.brand-mark span { color: var(--electric); }
.brand-name {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.desktop-nav {
  display: flex;
  gap: 32px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}
.desktop-nav a,
.nav-cta { text-decoration: none; }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  justify-self: end;
  padding: 13px 17px;
  border: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--ink); color: white; }
.nav-cta span { color: var(--electric); margin-left: 18px; }

.hero {
  position: relative;
  min-height: 860px;
  display: grid;
  grid-template-columns: 56% 44%;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 49.92%, rgba(17,20,28,.08) 50%, transparent 50.08%),
    var(--white);
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 154px var(--pad) 96px;
  display: flex;
  flex-direction: column;
}
.kicker,
.section-tag,
.tiny {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero h1 {
  margin: auto 0 58px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(68px, 8.2vw, 135px);
  line-height: .79;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.hero h1 span {
  display: inline-block;
  color: var(--electric);
  transform: translateX(3.4vw);
  white-space: nowrap;
}
.hero-bottom {
  display: grid;
  grid-template-columns: minmax(220px, 440px) auto;
  gap: 30px;
  align-items: end;
  max-width: 730px;
}
.hero-bottom p,
.section-intro > p:last-child {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.4;
  letter-spacing: -.02em;
}
.text-link {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 38px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}
.text-link span { color: var(--electric); }
.hero-visual {
  position: relative;
  min-height: 100%;
  background: var(--sky);
  overflow: hidden;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 59% center;
  filter: contrast(1.04) saturate(.9);
}
.image-wash {
  position: absolute;
  inset: 0;
  background: var(--electric);
  mix-blend-mode: screen;
  opacity: .1;
}
.visual-label {
  position: absolute;
  top: 128px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2vw, 34px);
  text-transform: uppercase;
}
.visual-label span {
  width: max-content;
  padding: 4px 13px;
  background: var(--white);
}
.visual-label span:nth-child(2) { color: white; background: var(--ink); transform: translateX(-24px); }
.visual-label span:nth-child(3) { color: white; background: var(--pink); transform: translateX(-7px); }
.hero-conversation {
  position: absolute;
  z-index: 3;
  top: 220px;
  left: calc(56% - 140px);
  width: min(350px, calc(100% - 36px));
  min-height: 285px;
  padding: 15px;
  color: var(--white);
  background: rgba(17,20,28,.94);
  border: 1px solid rgba(248,244,237,.44);
  box-shadow: 10px 10px 0 rgba(15,163,177,.82);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(.96);
  transform-origin: 42% 50%;
  transition:
    opacity .46s ease,
    transform .65s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .65s;
}
.hero-conversation.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.hero-conversation.leaving {
  opacity: 0;
  visibility: visible;
  transform: translateX(18px) scale(.97);
  transition:
    opacity .36s ease,
    transform .42s cubic-bezier(.7,0,.84,0);
}
.hero-chat-head,
.hero-chat-foot,
.hero-next {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font: 500 7px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-chat-head { padding-bottom: 12px; border-bottom: 1px solid rgba(248,244,237,.18); }
.hero-chat-head span { display: flex; align-items: center; gap: 7px; color: #aeb7bd; }
.hero-chat-head span b,
.hero-chat-head strong b { font: inherit; font-weight: 500; }
.hero-chat-head strong b { color: #7f8990; }
.hero-chat-head span i {
  width: 6px;
  height: 6px;
  background: var(--electric);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(15,163,177,.14);
}
.hero-chat-head strong { color: var(--electric); font-weight: 500; }
.hero-chat-stage { min-height: 210px; padding: 14px 0 12px; display: flex; flex-direction: column; }
.hero-message { max-width: 88%; margin-bottom: 9px; padding: 10px 12px; }
.hero-message > span { display: block; margin-bottom: 5px; font: 500 6px "IBM Plex Mono", monospace; text-transform: uppercase; }
.hero-message p { margin: 0; font-size: 12px; line-height: 1.32; }
.hero-message.member { padding-left: 42px; position: relative; color: var(--ink); background: var(--white); }
.hero-message.member::before {
  content: "YOU";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--ink);
  border-radius: 50%;
  font: 500 5px "IBM Plex Mono", monospace;
}
.hero-message.member > span { color: #69737a; }
.hero-rd-typing {
  width: max-content;
  margin: 0 0 9px auto;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
}
.hero-rd-typing > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: var(--white);
  border-radius: 50%;
  font: 500 6px "IBM Plex Mono", monospace;
  font-style: normal;
}
.hero-rd-typing > span { padding: 8px 10px; display: flex; gap: 4px; background: var(--teal); }
.hero-rd-typing b { width: 4px; height: 4px; background: #bde8eb; border-radius: 50%; animation: hero-typing-dot .6s ease infinite alternate; }
.hero-rd-typing b:nth-child(2) { animation-delay: .12s; }
.hero-rd-typing b:nth-child(3) { animation-delay: .24s; }
.hero-message.rd { margin-left: auto; padding-left: 42px; position: relative; background: var(--teal); }
.hero-message.rd::before {
  content: "RD";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: var(--white);
  border-radius: 50%;
  font: 500 6px "IBM Plex Mono", monospace;
}
.hero-message.rd > span { color: #bde8eb; }
.hero-next { margin-top: auto; padding-top: 10px; color: #879198; border-top: 1px solid rgba(248,244,237,.18); }
.hero-next strong { color: var(--white); font-weight: 500; text-align: right; }
.hero-chat-foot { padding-top: 10px; color: #7f8990; border-top: 1px solid rgba(248,244,237,.18); }
.hero-chat-foot > i { display: flex; gap: 4px; }
.hero-chat-foot b { width: 15px; height: 2px; display: block; background: #4d565d; }
.hero-chat-foot b.active { background: var(--pink); }
.hero-conversation.entering .hero-message.member { animation: hero-chat-in .48s cubic-bezier(.16,1,.3,1) both; }
.hero-conversation.entering .hero-rd-typing { animation: hero-typing-window .82s .38s ease both; }
.hero-conversation.entering .hero-message.rd { animation: hero-chat-in .48s 1.05s cubic-bezier(.16,1,.3,1) both; }
.hero-conversation.entering .hero-next { animation: hero-chat-in .48s 1.35s cubic-bezier(.16,1,.3,1) both; }
.hero-conversation.leaving .hero-chat-stage { animation: hero-chat-out .36s ease both; }
@keyframes hero-chat-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-chat-out {
  to { opacity: 0; filter: blur(4px); transform: translateX(-16px); }
}
@keyframes hero-typing-window {
  0%, 100% { opacity: 0; transform: translateY(5px); }
  15%, 78% { opacity: 1; transform: translateY(0); }
}
@keyframes hero-typing-dot {
  to { opacity: .35; transform: translateY(-2px); }
}
.rhythm-loop {
  position: absolute;
  width: 390px;
  height: 275px;
  right: 18px;
  bottom: 86px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  transform: rotate(-9deg);
}
.rhythm-loop::before,
.rhythm-loop::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--ink);
}
.rhythm-loop::before { top: 26px; left: 73px; }
.rhythm-loop::after { right: 39px; bottom: 52px; }
.rhythm-loop strong {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 165px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(247,248,248,.9);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(9deg);
}
.rhythm-loop strong b {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
}
.rhythm-loop strong small {
  display: block;
  margin-top: 4px;
  color: #5d646b;
  font-size: 7px;
  letter-spacing: .025em;
}
.rhythm-loop span {
  position: absolute;
  padding: 5px 7px;
  color: white;
  background: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  text-transform: uppercase;
  transform: rotate(9deg);
}
.loop-fuel { top: 20px; left: 52px; }
.loop-move { top: 50%; right: -18px; }
.loop-life { right: 30px; bottom: 41px; }
.loop-recover { left: -28px; bottom: 62px; }
.hero-rail {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 36px;
  display: flex;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  padding-left: var(--pad);
  color: white;
  background: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-rail span:nth-child(2n) { color: var(--electric); }

.credibility {
  min-height: 365px;
  padding: 70px var(--pad);
  display: grid;
  grid-template-columns: .55fr 1.05fr 1.3fr;
  gap: 50px;
  align-items: start;
  background: var(--ink);
  color: white;
}
.credibility > p:first-child {
  margin: 6px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}
.credential-main {
  margin: 0;
  font-size: clamp(26px, 3vw, 48px);
  line-height: .98;
  letter-spacing: -.045em;
}
.credential-main strong { color: #72d2d9; font-weight: 600; }
.credibility ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.35);
}
.credibility li {
  padding: 20px 8px;
  border-bottom: 1px solid rgba(255,255,255,.35);
  font-size: 13px;
}
.credibility li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.35); }
.credibility b {
  display: block;
  margin-bottom: 5px;
  font-family: "Archivo Black", sans-serif;
  font-size: 30px;
}

.rhythm-section {
  padding: 140px var(--pad);
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 7vw;
  background: var(--soft);
}
.section-intro h2,
.method h2,
.experts h2,
.apply h2 {
  margin: 25px 0 35px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(54px, 7vw, 112px);
  line-height: .85;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.section-intro h2 em {
  color: var(--electric);
  font-style: normal;
}
.section-intro > p:last-child { max-width: 450px; }
.rhythm {
  align-self: center;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--sky);
}
.rhythm-header,
.rhythm-key {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}
.rhythm-header { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.days {
  height: 360px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  align-items: stretch;
}
.day {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.day:last-child { border-right: 0; }
.day > span {
  position: absolute;
  top: 12px;
  left: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
}
.day .block {
  height: var(--h);
  margin: 0 5px 8px;
  background: #c7ced4;
  transition: height .7s cubic-bezier(.16,1,.3,1);
}
.rhythm:not(.in-view) .day .block { height: 0; }
.rhythm.in-view .day:nth-child(1) .block { transition-delay: .04s; }
.rhythm.in-view .day:nth-child(2) .block { transition-delay: .10s; }
.rhythm.in-view .day:nth-child(3) .block { transition-delay: .16s; }
.rhythm.in-view .day:nth-child(4) .block { transition-delay: .22s; }
.rhythm.in-view .day:nth-child(5) .block { transition-delay: .28s; }
.rhythm.in-view .day:nth-child(6) .block { transition-delay: .38s; }
.rhythm.in-view .day:nth-child(7) .block { transition-delay: .46s; }
.day .move { background: var(--electric); }
.day .life { background: #7f8a94; }
.day .recover { background: #dde2e5; }
.day small {
  min-height: 50px;
  padding: 6px;
  font-size: 10px;
  line-height: 1.1;
}
.rhythm-key {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  justify-content: flex-start;
  flex-wrap: wrap;
}
.rhythm-key span { display: flex; gap: 5px; align-items: center; }
.rhythm-key i { width: 8px; height: 8px; background: #c7ced4; }
.rhythm-key i.move { background: var(--electric); }
.rhythm-key i.life { background: #7f8a94; }
.rhythm-key i.recover { background: #dde2e5; }
.trend-signal {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.trend-copy {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
}
.trend-copy strong {
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -.035em;
}
.trend-copy span,
.trend-axis {
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.trend-signal svg {
  display: block;
  width: 100%;
  margin-top: 14px;
  overflow: visible;
}
.trend-grid line { stroke: rgba(17,20,28,.11); stroke-width: 1; }
.scale-area {
  fill: rgba(15, 163, 177, .12);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.rhythm.in-view .scale-area {
  animation: fill-series 1.25s .48s cubic-bezier(.16,1,.3,1) forwards;
}
.scale-noise,
.scale-trend {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.scale-noise { stroke: #7f8a94; stroke-width: 2; }
.scale-trend { stroke: var(--pink); stroke-width: 5; }
.rhythm.in-view .scale-noise { animation: draw-line 1.25s .5s ease forwards; }
.rhythm.in-view .scale-trend { animation: draw-line 1.1s 1.05s ease forwards; }
.scale-points circle {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 2;
  opacity: 0;
}
.rhythm.in-view .scale-points circle { animation: point-in .28s 1.65s ease forwards; }
.trend-axis { display: flex; justify-content: space-between; margin-top: -3px; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fill-series { to { opacity: 1; transform: scaleX(1); } }
@keyframes point-in { to { opacity: 1; } }

.method {
  padding: 140px var(--pad);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 8vw;
  background: var(--ink);
  color: white;
}
.method-lead {
  align-self: start;
  position: sticky;
  top: 80px;
}
.method h2 { color: var(--white); }
.phases { border-top: 1px solid rgba(255,255,255,.32); }
.phase { border-bottom: 1px solid rgba(255,255,255,.32); }
.phase button {
  width: 100%;
  padding: 25px 0;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  color: white;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.phase-num { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: #95a0aa; }
.phase-title { font-size: clamp(28px, 3vw, 48px); font-weight: 600; letter-spacing: -.04em; }
.phase-icon { font-size: 24px; color: #72d2d9; }
.phase-body {
  display: none;
  max-width: 530px;
  padding: 0 0 30px 50px;
}
.phase.active .phase-body { display: block; }
.phase-body p { margin: 0 0 22px; font-size: 17px; line-height: 1.5; color: #cbd1d8; }
.phase-body > span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: #72d2d9;
  text-transform: uppercase;
}

.app-experience {
  padding: 125px var(--pad) 140px;
  overflow: hidden;
  color: var(--ink);
  background: #d8e1e1;
}
.app-experience-copy {
  margin-bottom: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .6fr);
  align-items: end;
  gap: 7vw;
}
.app-experience-copy .section-tag { grid-column: 1 / -1; }
.app-experience-copy h2 {
  max-width: 1000px;
  margin: 22px 0 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(54px, 7.2vw, 112px);
  line-height: .84;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.app-experience-copy > p:last-child {
  max-width: 420px;
  margin: 0 0 4px;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.5;
}
.week-film {
  margin-bottom: 84px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 20px 20px 0 var(--electric);
}
.week-film-bar {
  min-height: 74px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.week-film-bar > div { display: flex; align-items: center; gap: 18px; }
.week-film-bar span,
.week-film-bar strong,
.week-film-bar button {
  font: 500 8px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.week-film-bar > div span { color: var(--electric); }
.week-film-bar button {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  background: transparent;
  border: 1px solid #59636a;
  cursor: pointer;
}
.week-film-bar button:hover { border-color: var(--electric); }
.week-film-bar button i { color: var(--electric); font-style: normal; }
.week-film-screen { min-height: 560px; display: grid; grid-template-columns: 235px 1fr; }
.week-film-days {
  padding: 16px;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  border-right: 1px solid rgba(255,255,255,.16);
  background: #171b23;
}
.week-film-days button {
  min-height: 72px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: #89939b;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  text-align: left;
}
.week-film-days button:last-child { border-bottom: 0; }
.week-film-days button b { color: inherit; font: 500 8px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.week-film-days button span { font-size: 11px; }
.week-film-days button:hover { color: var(--white); }
.week-film-days button.active {
  padding-left: 18px;
  color: var(--white);
  background: var(--teal);
  box-shadow: inset 4px 0 0 var(--pink);
}
.week-film-stage {
  position: relative;
  min-width: 0;
  padding: clamp(42px, 6vw, 84px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(15,163,177,.13), transparent 38%),
    radial-gradient(circle at 86% 80%, rgba(224,33,138,.15), transparent 28%),
    var(--ink);
}
.week-film-stage::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -180px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(255,255,255,.025), 0 0 0 120px rgba(255,255,255,.018);
  pointer-events: none;
}
.film-scene-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  transform-origin: 18% 50%;
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.film-fast-forward {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.film-fast-forward i {
  color: var(--electric);
  font: 400 clamp(76px, 11vw, 170px)/1 "IBM Plex Mono", monospace;
  font-style: normal;
  text-shadow: 16px 0 0 rgba(224,33,138,.22);
}
.film-kinetics {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.film-kinetics i,
.film-kinetics b { position: absolute; display: block; }
.kinetic-line {
  top: 22%;
  right: 6%;
  width: 31%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43,209,222,.72));
  transform-origin: right center;
}
.kinetic-orbit {
  right: 8%;
  bottom: 8%;
  width: clamp(155px, 24vw, 360px);
  aspect-ratio: 1;
  border: 1px solid rgba(43,209,222,.36);
  border-radius: 50%;
  box-shadow: inset 0 0 0 42px rgba(255,255,255,.018);
}
.kinetic-dot {
  top: 21.4%;
  right: 5.4%;
  width: 7px;
  height: 7px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(224,33,138,.11);
}
.kinetic-arrow {
  right: 9%;
  bottom: 14%;
  color: rgba(43,209,222,.8);
  font: 400 clamp(38px, 5vw, 76px)/1 "IBM Plex Mono", monospace;
}
.week-film-stage.scene-out .film-scene-content {
  animation: film-scene-out .44s cubic-bezier(.76,0,.24,1) both;
}
.week-film-stage.fast-forwarding .film-fast-forward {
  animation: film-fast-forward .56s cubic-bezier(.76,0,.24,1) both;
}
.week-film-stage.scene-in .film-scene-content {
  animation: film-scene-in .72s cubic-bezier(.16,1,.3,1) both;
}
.week-film-stage.scene-live .film-eyebrow {
  animation: film-copy-wipe .48s steps(12, end) .03s both;
}
.week-film-stage.scene-live h3 {
  animation: film-copy-wipe .8s steps(16, end) .14s both;
}
.week-film-stage.scene-live .film-body {
  animation: film-body-rise .56s cubic-bezier(.16,1,.3,1) .7s both;
}
.week-film-stage.scene-live .film-signals span {
  animation: film-chip-build .42s cubic-bezier(.16,1,.3,1) both;
}
.week-film-stage.scene-live .film-signals span:nth-child(1) { animation-delay: .94s; }
.week-film-stage.scene-live .film-signals span:nth-child(2) { animation-delay: 1.06s; }
.week-film-stage.scene-live .film-signals span:nth-child(3) { animation-delay: 1.18s; }
.week-film-stage.scene-live .kinetic-line { animation: kinetic-line-build .7s cubic-bezier(.16,1,.3,1) .34s both; }
.week-film-stage.scene-live .kinetic-orbit { animation: kinetic-orbit-build 1s cubic-bezier(.16,1,.3,1) .56s both; }
.week-film-stage.scene-live .kinetic-dot { animation: kinetic-dot-pulse 2.2s ease .9s both infinite; }
.week-film-stage.scene-live .kinetic-arrow { animation: kinetic-arrow-arrive .7s cubic-bezier(.16,1,.3,1) 1.05s both; }
.week-film-stage[data-scene="1"] .kinetic-orbit,
.week-film-stage[data-scene="4"] .kinetic-orbit { border-radius: 0; }
.week-film-stage[data-scene="2"] .kinetic-line,
.week-film-stage[data-scene="5"] .kinetic-line { top: 34%; }
.week-film-stage[data-scene="3"] .kinetic-orbit,
.week-film-stage[data-scene="6"] .kinetic-orbit { border-color: rgba(224,33,138,.42); }
.film-semantics {
  position: absolute;
  z-index: 1;
  top: 7%;
  right: 3%;
  bottom: 7%;
  width: min(37%, 440px);
  pointer-events: auto;
}
.semantic-replay-control { cursor: pointer; }
.semantic-replay-control:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}
.scene-live .semantic-replay-control.replay-semantic {
  animation: semantic-tap-replay .62s cubic-bezier(.16,1,.3,1) both;
  animation-delay: 0s;
}
.semantic-scene {
  position: absolute;
  inset: 0;
  display: none;
  padding: 19px;
  color: rgba(248,244,237,.9);
  border: 1px solid rgba(248,244,237,.14);
  background: rgba(17,20,28,.42);
  backdrop-filter: blur(4px);
}
.semantic-scene small {
  display: block;
  color: #8b969d;
  font: 500 7px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.week-film-stage[data-scene="0"] .semantic-intake,
.week-film-stage[data-scene="1"] .semantic-kitchen,
.week-film-stage[data-scene="2"] .semantic-monday,
.week-film-stage[data-scene="3"] .semantic-tuesday,
.week-film-stage[data-scene="4"] .semantic-wednesday,
.week-film-stage[data-scene="5"] .semantic-thursday,
.week-film-stage[data-scene="6"] .semantic-weekend,
.week-film-stage[data-scene="7"] .semantic-future { display: block; }
.week-film-stage[data-scene="4"] .semantic-wednesday { display: flex; flex-direction: column; }

.semantic-family-table {
  width: 148px;
  height: 126px;
  margin: 42px auto 28px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(248,244,237,.72);
  border-radius: 44%;
  transform: scale(.72);
  opacity: 0;
}
.semantic-family-table::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(43,209,222,.44);
  border-radius: inherit;
}
.semantic-family-table > b {
  color: var(--white);
  font: 500 10px/1.25 "IBM Plex Mono", monospace;
  text-align: center;
}
.semantic-family-table .chair {
  position: absolute;
  width: 27px;
  height: 13px;
  display: block;
  border: 1px solid rgba(248,244,237,.58);
  border-radius: 10px 10px 3px 3px;
  opacity: 0;
}
.chair-top { top: -21px; left: 60px; transform: rotate(180deg); }
.chair-right { right: -28px; top: 56px; transform: rotate(-90deg); }
.chair-bottom { bottom: -21px; left: 60px; }
.chair-left { left: -28px; top: 56px; transform: rotate(90deg); }
.family-note {
  position: absolute;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--white);
  font: 500 6px "IBM Plex Mono", monospace;
  white-space: nowrap;
  opacity: 0;
}
.note-who { top: -28px; right: -96px; }
.note-what { left: -108px; bottom: 7px; background: #c8dfe1; }
.note-time { right: -104px; bottom: -19px; background: var(--electric); }
.semantic-intake > strong {
  display: block;
  color: var(--white);
  font: 500 9px "IBM Plex Mono", monospace;
  text-align: center;
  opacity: 0;
}
.scene-live .semantic-family-table { animation: semantic-pop .62s cubic-bezier(.16,1,.3,1) both; }
.scene-live .semantic-family-table .chair { animation: semantic-seat .38s ease both; }
.scene-live .semantic-family-table .chair:nth-of-type(1) { animation-delay: .32s; }
.scene-live .semantic-family-table .chair:nth-of-type(2) { animation-delay: .42s; }
.scene-live .semantic-family-table .chair:nth-of-type(3) { animation-delay: .52s; }
.scene-live .semantic-family-table .chair:nth-of-type(4) { animation-delay: .62s; }
.scene-live .family-note { animation: semantic-card-in .38s ease both; }
.scene-live .note-who { animation-delay: .82s; }
.scene-live .note-what { animation-delay: .98s; }
.scene-live .note-time { animation-delay: 1.14s; }
.scene-live .semantic-intake > strong { animation: semantic-pop .45s 1.38s ease both; }

.semantic-foods { margin-top: 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 54%; }
.semantic-foods i { padding: 12px 7px; color: var(--ink); background: var(--white); font: 500 7px "IBM Plex Mono", monospace; font-style: normal; text-transform: uppercase; opacity: 0; }
.semantic-foods i:nth-child(2),
.semantic-foods i:nth-child(4) { background: #c8dfe1; }
.semantic-build-arrow { position: absolute; top: 48%; left: 57%; color: var(--pink); font: 500 30px "IBM Plex Mono", monospace; }
.semantic-plate {
  position: absolute;
  right: 18px;
  bottom: 28px;
  width: 114px;
  height: 114px;
  display: grid;
  place-items: center;
  color: var(--white);
  border: 1px solid var(--electric);
  border-radius: 50%;
  font: 500 10px/1.2 "IBM Plex Mono", monospace;
  text-align: center;
  transform: scale(.5);
  opacity: 0;
}
.scene-live .semantic-foods i { animation: semantic-card-in .38s ease both; }
.scene-live .semantic-foods i:nth-child(2) { animation-delay: .12s; }
.scene-live .semantic-foods i:nth-child(3) { animation-delay: .24s; }
.scene-live .semantic-foods i:nth-child(4) { animation-delay: .36s; }
.scene-live .semantic-build-arrow { animation: semantic-arrow .55s .68s ease both; }
.scene-live .semantic-plate { animation: semantic-pop .55s .9s cubic-bezier(.16,1,.3,1) both; }

.semantic-chat { width: 82%; padding: 12px; font-size: 10px; line-height: 1.35; opacity: 0; }
.semantic-chat.member { margin-top: 27px; color: var(--ink); background: var(--white); }
.semantic-chat.rd { margin: 8px 0 0 auto; color: var(--white); background: var(--teal); }
.semantic-chat.followup { width: 78%; margin: 8px 0 0; background: #d9e3e4; }
.semantic-chat.resolution { width: 90%; margin-top: 8px; background: #096f79; }
.semantic-typing { width: max-content; margin: 8px 12px 8px auto; padding: 8px 10px; display: flex; gap: 4px; background: rgba(15,163,177,.3); opacity: 0; }
.semantic-typing i { width: 4px; height: 4px; background: var(--electric); border-radius: 50%; }
.scene-live .semantic-chat.member { animation: semantic-rise .45s .12s ease both; }
.scene-live .semantic-typing { animation: hero-typing-window .8s .6s ease both; }
.scene-live .semantic-chat.rd { animation: semantic-rise .45s 1.25s ease both; }
.scene-live .semantic-chat.followup { animation-delay: 1.72s; }
.scene-live .semantic-chat.resolution { animation-delay: 2.18s; }

.semantic-hours { margin-top: 52px; display: flex; align-items: center; color: #aeb7bd; font: 500 7px "IBM Plex Mono", monospace; }
.semantic-hours i { font-style: normal; opacity: 0; }
.semantic-hours b { height: 1px; background: #566169; flex: 1; transform: scaleX(0); transform-origin: left center; }
.semantic-tuesday > strong { margin: 49px auto 0; width: max-content; display: flex; align-items: center; gap: 9px; font: 500 10px "IBM Plex Mono", monospace; }
.semantic-tuesday > strong i { width: 8px; height: 8px; display: block; background: var(--electric); border-radius: 50%; box-shadow: 0 0 0 8px rgba(15,163,177,.12); }
.scene-live .semantic-hours i { animation: semantic-pop .35s ease both; }
.scene-live .semantic-hours i:nth-of-type(2) { animation-delay: .25s; }
.scene-live .semantic-hours i:nth-of-type(3) { animation-delay: .5s; }
.scene-live .semantic-hours i:nth-of-type(4) { animation-delay: .75s; }
.scene-live .semantic-hours b { animation: semantic-flex-line .5s .16s ease both; }
.scene-live .semantic-tuesday > strong { animation: semantic-pop .5s 1.15s ease both; }

.semantic-inputs { margin-top: 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.semantic-inputs i { padding: 18px 8px; color: #cbd2d6; border: 1px solid #58636a; font: 500 7px "IBM Plex Mono", monospace; font-style: normal; text-align: center; opacity: 0; }
.semantic-inputs i:nth-child(1) { --x: -18px; --y: -12px; }
.semantic-inputs i:nth-child(2) { --x: 18px; --y: -12px; }
.semantic-inputs i:nth-child(3) { --x: -18px; --y: 12px; }
.semantic-inputs i:nth-child(4) { --x: 18px; --y: 12px; }
.semantic-converge { margin: 8px auto 2px; display: block; color: var(--pink); font-size: 26px; text-align: center; }
.semantic-wednesday > strong { display: block; color: var(--white); font: 500 12px "IBM Plex Mono", monospace; text-align: center; opacity: 0; }
.scene-live .semantic-inputs i { animation: semantic-converge .55s ease both; }
.scene-live .semantic-inputs i:nth-child(2) { animation-delay: .12s; }
.scene-live .semantic-inputs i:nth-child(3) { animation-delay: .24s; }
.scene-live .semantic-inputs i:nth-child(4) { animation-delay: .36s; }
.scene-live .semantic-converge { animation: semantic-arrow-down .52s .72s cubic-bezier(.16,1,.3,1) both; }
.scene-live .semantic-wednesday > strong { animation: semantic-pop .42s 1.08s ease both; }
.semantic-context-map {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  align-items: center;
  gap: 7px;
  opacity: 0;
}
.semantic-context-map span {
  min-height: 41px;
  padding: 8px 5px;
  display: grid;
  place-items: center;
  color: #cbd2d6;
  border: 1px solid #58636a;
  font: 500 6px/1.25 "IBM Plex Mono", monospace;
  text-align: center;
  opacity: 0;
}
.semantic-context-map span:last-child { color: var(--white); background: var(--teal); border-color: var(--teal); }
.semantic-context-map b {
  color: var(--pink);
  font: 500 13px "IBM Plex Mono", monospace;
  opacity: 0;
}
.scene-live .semantic-context-map { opacity: 1; }
.scene-live .semantic-context-map span { animation: semantic-card-in .38s ease both; }
.scene-live .semantic-context-map span:nth-of-type(1) { animation-delay: 1.36s; }
.scene-live .semantic-context-map span:nth-of-type(2) { animation-delay: 1.68s; }
.scene-live .semantic-context-map span:nth-of-type(3) { animation-delay: 2s; }
.scene-live .semantic-context-map b { animation: semantic-arrow-right .32s ease both; }
.scene-live .semantic-context-map b:nth-of-type(1) { animation-delay: 1.56s; }
.scene-live .semantic-context-map b:nth-of-type(2) { animation-delay: 1.88s; }
.semantic-context-result {
  margin-top: auto;
  padding: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  color: var(--ink);
  background: var(--white);
  opacity: 0;
}
.semantic-context-result b { font: 500 12px "IBM Plex Mono", monospace; }
.semantic-context-result span { color: var(--teal); font: 500 7px "IBM Plex Mono", monospace; }
.scene-live .semantic-context-result { animation: semantic-rise .5s 1.82s ease both; }

.semantic-review-line { margin: 54px 0 45px; display: flex; align-items: center; }
.semantic-review-line i { width: 11px; height: 11px; display: block; background: var(--white); border-radius: 50%; opacity: 0; }
.semantic-review-line i:last-child { background: var(--pink); }
.semantic-review-line b { height: 1px; flex: 1; background: #617078; transform: scaleX(0); transform-origin: left center; }
.semantic-adjust { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; font: 500 8px "IBM Plex Mono", monospace; }
.semantic-adjust span { padding: 13px; color: #9da7ad; border: 1px solid #59636a; }
.semantic-adjust b { color: var(--pink); font-size: 22px; }
.semantic-adjust strong { padding: 13px; color: var(--white); background: var(--teal); font-weight: 500; opacity: 0; }
.scene-live .semantic-review-line i { animation: semantic-pop .32s ease both; }
.scene-live .semantic-review-line i:nth-of-type(2) { animation-delay: .48s; }
.scene-live .semantic-review-line i:nth-of-type(3) { animation-delay: .96s; }
.scene-live .semantic-review-line b { animation: semantic-flex-line .55s .2s ease both; }
.scene-live .semantic-adjust > b { animation: semantic-arrow-right .42s 1.04s ease both; }
.scene-live .semantic-adjust strong { animation: semantic-card-in .5s 1.25s ease both; }

.semantic-week-bars { height: 150px; margin-top: 22px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; align-items: end; }
.semantic-week-bars i { height: 0; display: block; background: #707a81; }
.semantic-week-bars i:nth-last-child(-n+2) { background: var(--electric); }
.semantic-week-labels { margin-top: 7px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; color: #89949a; font: 500 7px "IBM Plex Mono", monospace; text-align: center; }
.semantic-week-labels b { color: var(--electric); font-weight: 500; }
.semantic-weekend > strong { margin-top: 18px; display: block; color: var(--white); font: 500 10px "IBM Plex Mono", monospace; text-align: right; }
.scene-live .semantic-week-bars i { animation: semantic-weekday .72s ease both; }
.scene-live .semantic-week-bars i:nth-child(2) { animation-delay: .08s; }
.scene-live .semantic-week-bars i:nth-child(3) { animation-delay: .16s; }
.scene-live .semantic-week-bars i:nth-child(4) { animation-delay: .24s; }
.scene-live .semantic-week-bars i:nth-child(5) { animation-delay: .32s; }
.scene-live .semantic-week-bars i:nth-child(6) { animation-name: semantic-weekend; animation-delay: .55s; }
.scene-live .semantic-week-bars i:nth-child(7) { animation-name: semantic-weekend; animation-delay: .66s; }

.semantic-radar { width: 176px; height: 176px; margin: 26px auto 0; position: relative; border: 1px solid #68737a; border-radius: 50%; transform: scale(.6); opacity: 0; }
.semantic-radar i { position: absolute; inset: 27px; border: 1px solid #414b52; border-radius: 50%; }
.semantic-radar i:nth-child(2) { inset: 57px; background: rgba(15,163,177,.16); }
.semantic-radar b { position: absolute; left: 50%; top: 50%; width: 38%; height: 1px; background: var(--pink); transform-origin: left; transform: rotate(-32deg); }
.semantic-radar strong { position: absolute; right: -7px; top: 35px; color: var(--pink); font: 500 30px "IBM Plex Mono", monospace; }
.semantic-goals { margin-top: 16px; display: flex; justify-content: center; gap: 8px; color: #9ba5ab; font: 500 7px "IBM Plex Mono", monospace; }
.semantic-goals span { padding: 7px; border: 1px solid #58636a; opacity: 0; }
.scene-live .semantic-radar { animation: semantic-pop .8s cubic-bezier(.16,1,.3,1) both; }
.scene-live .semantic-radar b { animation: semantic-radar-turn 1.4s .6s cubic-bezier(.16,1,.3,1) both; }
.scene-live .semantic-goals span { animation: semantic-rise .4s 1.05s ease both; }
.scene-live .semantic-goals span:nth-child(2) { animation-delay: 1.18s; }
.scene-live .semantic-goals span:nth-child(3) { animation-delay: 1.31s; color: var(--white); border-color: var(--electric); }

@keyframes semantic-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes semantic-pop { from { opacity: 0; transform: scale(.62); } to { opacity: 1; transform: scale(1); } }
@keyframes semantic-route { to { width: 72%; } }
@keyframes semantic-card-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes semantic-arrow { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes semantic-flex-line { to { transform: scaleX(1); } }
@keyframes semantic-converge { from { opacity: 0; transform: translate(var(--x, 0), var(--y, 12px)); } to { opacity: 1; transform: translate(0); } }
@keyframes semantic-seat { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes semantic-arrow-down {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes semantic-arrow-right {
  from { opacity: 0; transform: translateX(-13px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes semantic-tap-replay {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  25% { opacity: .12; transform: translateY(12px) scale(.68); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes semantic-weekday { to { height: 54%; } }
@keyframes semantic-weekend { to { height: 86%; } }
@keyframes semantic-radar-turn { from { transform: rotate(-155deg); } to { transform: rotate(-32deg); } }
.film-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.12);
}
.film-progress i { width: 0; height: 100%; display: block; background: var(--pink); }
.film-progress i.run { animation: week-film-progress 6.2s linear forwards; }
.film-number {
  position: absolute;
  top: 25px;
  right: 28px;
  color: #667078;
  font: 500 8px "IBM Plex Mono", monospace;
}
.film-eyebrow {
  margin: 0 0 34px;
  color: var(--electric);
  font: 500 9px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.week-film-stage h3 {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(52px, 6.8vw, 108px);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.film-body {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 35px 0;
  color: #cbd1d8;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.5;
}
.film-signals { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; }
.film-signals span {
  padding: 8px 10px;
  color: var(--white);
  border: 1px solid #59636a;
  font: 500 7px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.film-caption {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #778189;
  border-top: 1px solid rgba(255,255,255,.14);
  font: 500 7px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.film-caption strong { color: var(--white); font-weight: 500; }
.app-system-bridge {
  margin: 0 0 38px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: end;
}
.app-system-bridge span {
  max-width: 580px;
  font-size: clamp(27px, 4vw, 57px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.05em;
}
.app-system-bridge strong {
  color: #4d5960;
  font: 500 8px "IBM Plex Mono", monospace;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .06em;
}
@keyframes week-film-progress { to { width: 100%; } }
@keyframes film-scene-out {
  to { opacity: 0; filter: blur(8px); transform: translateX(-118%) scale(.88); }
}
@keyframes film-fast-forward {
  0% { opacity: 0; transform: translateX(85%); }
  22%, 72% { opacity: .9; }
  100% { opacity: 0; transform: translateX(-85%); }
}
@keyframes film-scene-in {
  from { opacity: 0; filter: blur(7px); transform: translateX(28%) scale(1.1); }
  to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
}
@keyframes film-copy-wipe {
  from { clip-path: inset(0 100% 0 0); transform: translateX(10px); }
  to { clip-path: inset(0 0 0 0); transform: translateX(0); }
}
@keyframes film-body-rise {
  from { opacity: 0; transform: translateY(17px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes film-chip-build {
  from { opacity: 0; transform: translateY(10px) scaleX(.6); }
  to { opacity: 1; transform: translateY(0) scaleX(1); }
}
@keyframes kinetic-line-build {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes kinetic-orbit-build {
  from { opacity: 0; transform: rotate(-35deg) scale(.42); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes kinetic-dot-pulse {
  0%, 100% { opacity: .5; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1.25); }
}
@keyframes kinetic-arrow-arrive {
  from { opacity: 0; transform: translateX(-35px); }
  to { opacity: 1; transform: translateX(0); }
}
.nbs-app {
  position: relative;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ink);
  box-shadow: 24px 24px 0 var(--pink);
  transform: rotate(-.45deg);
}
.nbs-app-bar {
  min-height: 72px;
  padding: 15px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--white);
  background: var(--ink);
}
.app-mini-brand { display: flex; align-items: center; gap: 16px; }
.app-mini-brand > span { font: 400 21px "Archivo Black", sans-serif; letter-spacing: -2px; }
.app-mini-brand > span span { color: var(--electric); }
.app-mini-brand small,
.app-week {
  font: 500 8px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.app-week { display: flex; align-items: center; gap: 8px; }
.app-week i { width: 7px; height: 7px; border-radius: 50%; background: var(--electric); box-shadow: 0 0 0 5px rgba(15,163,177,.14); }
.app-week b { color: var(--electric); }
.app-member-dot {
  width: 36px;
  height: 36px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border: 1px solid #59636a;
  border-radius: 50%;
  font: 500 7px "IBM Plex Mono", monospace;
}
.app-grid { min-height: 610px; display: grid; grid-template-columns: 300px 1fr; }
.app-activity { padding: 28px 20px; border-right: 1px solid var(--line); background: #ece9e4; }
.app-panel-label,
.chart-title,
.app-insights-head,
.chart-legend,
.app-chart-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.app-panel-label { margin-bottom: 21px; font: 500 9px "IBM Plex Mono", monospace; text-transform: uppercase; }
.app-panel-label small { color: var(--electric); }
.app-activity article {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 39px 1fr auto;
  gap: 11px;
  align-items: center;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(12px);
}
.nbs-app.in-view .app-activity article { animation: app-entry .55s ease forwards; }
.nbs-app.in-view .app-activity article:nth-of-type(2) { animation-delay: .12s; }
.nbs-app.in-view .app-activity article:nth-of-type(3) { animation-delay: .24s; }
.app-activity time { font: 500 8px "IBM Plex Mono", monospace; text-transform: uppercase; }
.app-activity article div { display: flex; flex-direction: column; gap: 3px; }
.app-activity article strong { font-size: 12px; }
.app-activity article span { color: #69737a; font-size: 10px; }
.app-activity article > b { color: var(--electric); }
.app-activity .rd-activity { color: var(--white); background: var(--ink); margin-inline: -10px; padding-inline: 10px; border: 0; }
.app-activity .rd-activity span { color: #aeb7bd; }
.app-message { margin-top: 28px; padding: 19px; color: var(--white); background: var(--teal); }
.nbs-app.in-view .app-message { animation: app-message-in .65s .72s cubic-bezier(.16,1,.3,1) both; }
.app-message > span,
.app-message small { font: 500 8px "IBM Plex Mono", monospace; text-transform: uppercase; }
.app-message p { margin: 24px 0; font-size: 18px; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
.app-message small { color: #bde8eb; }
.app-insights { min-width: 0; padding: 31px; }
.app-insights-head { margin-bottom: 30px; align-items: end; }
.app-insights-head > div:first-child { display: flex; flex-direction: column; gap: 5px; }
.app-insights-head span { font: 500 8px "IBM Plex Mono", monospace; text-transform: uppercase; }
.app-insights-head strong { font-size: clamp(24px, 3vw, 42px); letter-spacing: -.045em; }
.range-control { display: flex; border: 1px solid var(--line); }
.range-control > * { padding: 8px 10px; font: 500 8px "IBM Plex Mono", monospace; }
.range-control b { color: var(--white); background: var(--ink); }
.app-view-tabs {
  margin-bottom: 18px;
  display: flex;
  border-bottom: 1px solid var(--line);
}
.app-view-tabs button {
  padding: 11px 18px;
  color: #69737a;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font: 500 8px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.app-view-tabs button:hover { color: var(--ink); }
.app-view-tabs button.active { color: var(--ink); border-bottom-color: var(--pink); }
.app-view[hidden] { display: none; }
.app-chart-grid { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(380px, 1.22fr); gap: 18px; }
.app-chart-grid article { min-width: 0; padding: 22px; border: 1px solid var(--line); background: #f9f7f2; }
.chart-title { align-items: start; }
.chart-title > div { display: flex; flex-direction: column; gap: 4px; }
.chart-title strong { font-size: 13px; }
.chart-title span,
.chart-title small,
.chart-legend,
.app-chart-axis { color: #69737a; font: 500 7px "IBM Plex Mono", monospace; text-transform: uppercase; }
.macro-metric-tabs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}
.macro-metric-tabs button {
  min-width: 0;
  padding: 9px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #69737a;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  font: 500 6px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.macro-metric-tabs button:last-child { border-right: 0; }
.macro-metric-tabs button b { color: var(--ink); font: inherit; }
.macro-metric-tabs button.active { color: var(--white); background: var(--ink); }
.macro-metric-tabs button.active b { color: var(--electric); }
.macro-metric-tabs button:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.app-bars {
  height: 235px;
  margin-top: 12px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  align-items: end;
  border-bottom: 1px solid var(--line);
}
.app-bars > b {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}
.compliance-band {
  bottom: 66%;
  height: 15%;
  background: rgba(15,163,177,.1);
  border-top: 1px dashed rgba(15,163,177,.52);
  border-bottom: 1px dashed rgba(15,163,177,.52);
}
.macro-target-line {
  bottom: 73.5%;
  height: 1px;
  background: rgba(17,20,28,.36);
}
.app-bars > b span {
  position: absolute;
  right: 0;
  top: -12px;
  color: #69737a;
  font: 500 6px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.app-bars div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform .2s ease;
}
.app-bars div:hover { transform: translateY(-3px); }
.app-bars div:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}
.app-bars div > i { height: 0; display: block; background: var(--teal); }
.nbs-app.in-view .app-bars i { animation: app-bar-grow .85s cubic-bezier(.16,1,.3,1) forwards; }
.nbs-app.in-view .app-bars div:nth-child(2) i { animation-delay: .08s; }
.nbs-app.in-view .app-bars div:nth-child(3) i { animation-delay: .16s; }
.nbs-app.in-view .app-bars div:nth-child(4) i { animation-delay: .24s; }
.nbs-app.in-view .app-bars div:nth-child(5) i { animation-delay: .32s; }
.nbs-app.in-view .app-bars div:nth-child(6) i { animation-delay: .4s; }
.nbs-app.in-view .app-bars div:nth-child(7) i { animation-delay: .48s; }
.app-bars div.outside-range > i { background: var(--pink); }
.nbs-app.in-view .app-bars i.replay-bar {
  animation: app-bar-replay .72s cubic-bezier(.16,1,.3,1) both;
  animation-delay: 0s;
}
.app-bars span { font: 500 7px "IBM Plex Mono", monospace; }
.chart-legend { margin-top: 14px; justify-content: flex-start; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 7px; height: 7px; background: #c7ced4; }
.macro-legend { align-items: center; }
.macro-legend span:first-child i { background: var(--teal); }
.macro-legend span:nth-child(2) i { background: var(--pink); }
.macro-legend strong {
  margin-left: auto;
  color: var(--ink);
  font: 500 7px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.weight-card svg { width: 100%; margin-top: 29px; overflow: visible; cursor: pointer; }
.weight-card svg:focus-visible,
.waist-card svg:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 6px;
}
.app-chart-gridlines line { stroke: var(--line); stroke-width: 1; }
.app-weight-area { fill: rgba(15,163,177,.12); opacity: 0; transform: scaleX(0); transform-origin: left center; }
.app-weight-line { fill: none; stroke: var(--pink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 800; stroke-dashoffset: 800; }
.nbs-app.in-view .app-weight-area { animation: app-area-in 1.15s .45s ease forwards; }
.nbs-app.in-view .app-weight-line { animation: app-line-in 1.2s .6s ease forwards; }
.app-weight-points circle { fill: var(--white); stroke: var(--ink); stroke-width: 2; opacity: 0; }
.nbs-app.in-view .app-weight-points circle { animation: point-in .3s 1.55s ease forwards; }
.app-weight-points circle {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.app-weight-points circle:hover { stroke: var(--pink); stroke-width: 4; }
.nbs-app.in-view .app-weight-area.replay-area { animation: app-area-replay .9s ease both; }
.nbs-app.in-view .app-weight-line.replay-line { animation: app-line-replay 1.05s ease both; }
.nbs-app.in-view .app-weight-points circle.replay-point { animation: point-replay .52s cubic-bezier(.16,1,.3,1) both; }
.app-chart-axis { margin-top: -5px; }
.app-care-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: .78fr .78fr 1.44fr;
  gap: 18px;
}
.app-care-strip article { min-height: 205px; }
.care-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font: 500 7px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.care-card-head small { color: #69737a; font: inherit; }
.compliance-body { height: calc(100% - 24px); display: flex; align-items: center; gap: 18px; }
.compliance-visual { width: 112px; flex: 0 0 auto; }
.compliance-ring {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  position: relative;
  text-align: center;
  border-radius: 50%;
  --compliance: 86%;
  background: conic-gradient(var(--electric) 0 var(--compliance), #d9dedf var(--compliance) 100%);
}
.nbs-app.in-view .compliance-ring { animation: compliance-fill 1.15s .62s cubic-bezier(.16,1,.3,1) both; }
.compliance-ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  background: #f9f7f2;
  border-radius: inherit;
}
.compliance-ring > * { position: relative; z-index: 1; display: block; }
.compliance-ring strong { font-size: 24px; line-height: 1; }
.compliance-ring span { margin-top: 5px; color: #69737a; font: 500 6px "IBM Plex Mono", monospace; text-transform: uppercase; }
.compliance-days { margin-top: 9px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.compliance-days i {
  aspect-ratio: 1;
  display: block;
  opacity: 0;
  background: var(--electric);
  border-radius: 50%;
  transform: scale(.2);
  cursor: pointer;
}
.compliance-days i.open { background: transparent; border: 1px solid #b8c0c3; }
.nbs-app.in-view .compliance-days i { animation: compliance-day-in .28s cubic-bezier(.16,1,.3,1) both; }
.nbs-app.in-view .compliance-days i:nth-child(1) { animation-delay: .52s; }
.nbs-app.in-view .compliance-days i:nth-child(2) { animation-delay: .66s; }
.nbs-app.in-view .compliance-days i:nth-child(3) { animation-delay: .8s; }
.nbs-app.in-view .compliance-days i:nth-child(4) { animation-delay: .94s; }
.nbs-app.in-view .compliance-days i:nth-child(5) { animation-delay: 1.08s; }
.nbs-app.in-view .compliance-days i:nth-child(6) { animation-delay: 1.22s; }
.nbs-app.in-view .compliance-days i:nth-child(7) { animation-delay: 1.36s; }
.compliance-days i:hover { box-shadow: 0 0 0 4px rgba(15,163,177,.16); }
.compliance-days i:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.nbs-app.in-view .compliance-days i.replay-day { animation: compliance-day-replay .5s cubic-bezier(.16,1,.3,1) both; }
.compliance-body p { margin: 0; color: #566168; font-size: 11px; line-height: 1.45; }
.waist-value { margin-top: 18px; display: flex; align-items: baseline; gap: 7px; }
.waist-value strong { font-size: 33px; letter-spacing: -.055em; }
.waist-value span { color: #69737a; font: 500 7px "IBM Plex Mono", monospace; text-transform: uppercase; }
.waist-card svg { width: 100%; height: 62px; overflow: visible; cursor: pointer; }
.waist-card path {
  fill: none;
  stroke: var(--pink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.nbs-app.in-view .waist-card path { animation: app-line-in 1s 1.1s ease forwards; }
.nbs-app.in-view .waist-card path.replay-line { animation: app-waist-replay .9s ease both; }
.waist-card circle { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.waist-card circle {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.waist-card circle:hover { stroke: var(--pink); stroke-width: 4; }
.nbs-app.in-view .waist-card circle.replay-point { animation: point-replay .52s cubic-bezier(.16,1,.3,1) both; }
.waist-axis { margin-top: -5px; display: flex; justify-content: space-between; color: #69737a; font: 500 6px "IBM Plex Mono", monospace; text-transform: uppercase; }
.care-chat-card { display: flex; flex-direction: column; color: var(--white); background: var(--ink) !important; border-color: var(--ink) !important; }
.care-chat-card .care-card-head small { color: #9ba5ac; }
.care-chat { margin: auto 0; display: grid; grid-template-columns: 31px 1fr; gap: 12px; align-items: start; }
.nbs-app.in-view .care-chat { animation: app-message-in .65s 1.25s cubic-bezier(.16,1,.3,1) both; }
.care-chat i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--teal);
  border-radius: 50%;
  font: 500 7px "IBM Plex Mono", monospace;
  font-style: normal;
}
.care-chat p { margin: 0; color: #d6dbde; font-size: 12px; line-height: 1.45; }
.care-chat-card button {
  padding: 11px 0 0;
  display: flex;
  justify-content: space-between;
  color: var(--white);
  background: transparent;
  border: 0;
  border-top: 1px solid #444c52;
  cursor: pointer;
  font: 500 7px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.care-chat-card button span { color: var(--electric); }
.app-log-view {
  min-height: 385px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr);
  gap: 18px;
}
.app-log-card,
.app-log-context {
  padding: 23px;
  border: 1px solid var(--line);
  background: #f9f7f2;
}
.app-log-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font: 500 9px "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.app-log-head small { color: var(--electric); }
.meal-search {
  width: 100%;
  margin-top: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}
.meal-search span { grid-column: 1; font-size: 13px; font-weight: 700; }
.meal-search b { grid-column: 1; color: #69737a; font-size: 10px; font-weight: 400; }
.meal-search i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--electric); font-size: 25px; font-style: normal; }
.macro-inputs { margin: 18px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.macro-inputs label { padding: 13px; display: grid; gap: 7px; background: #ece9e4; }
.macro-inputs span { color: #69737a; font: 500 7px "IBM Plex Mono", monospace; text-transform: uppercase; }
.macro-inputs strong { font-size: 19px; }
.macro-inputs i { height: 3px; display: block; background: linear-gradient(90deg, var(--electric) var(--fill), #c7ced4 var(--fill)); }
.app-demo-action {
  width: 100%;
  padding: 15px 17px;
  display: flex;
  justify-content: space-between;
  color: var(--white);
  background: var(--ink);
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.app-demo-action.confirmed { background: var(--teal); }
.app-demo-status { margin: 11px 0 0; color: #69737a; font: 500 7px/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; }
.app-log-context { display: flex; flex-direction: column; color: var(--white); background: var(--teal); border-color: var(--teal); }
.app-log-context > span { font: 500 8px "IBM Plex Mono", monospace; text-transform: uppercase; }
.app-log-context h3 { margin: 38px 0 18px; font-size: clamp(26px, 3vw, 43px); line-height: .94; letter-spacing: -.055em; }
.app-log-context p { margin: 0; color: #c7e9eb; font-size: 12px; line-height: 1.5; }
.app-log-context > div { margin-top: auto; padding-top: 25px; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.28); }
.app-log-context > div strong { font-size: 38px; }
.app-log-context > div small { font: 500 7px "IBM Plex Mono", monospace; text-transform: uppercase; }
.app-message-view {
  min-height: 385px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 18px;
}
.message-thread,
.message-composer { padding: 22px; border: 1px solid var(--line); background: #f9f7f2; }
.message-date { margin-bottom: 18px; color: #69737a; font: 500 7px "IBM Plex Mono", monospace; text-align: center; text-transform: uppercase; }
.message-bubble { max-width: 82%; margin-bottom: 12px; padding: 13px 15px; position: relative; }
.message-bubble p { margin: 0; font-size: 12px; line-height: 1.42; }
.message-bubble time { display: block; margin-top: 7px; color: #69737a; font: 500 6px "IBM Plex Mono", monospace; text-align: right; }
.message-bubble.rd { padding-left: 42px; background: #e1e5e5; }
.message-bubble.rd > span { position: absolute; left: 12px; top: 12px; width: 21px; height: 21px; display: grid; place-items: center; color: var(--white); background: var(--teal); border-radius: 50%; font: 500 6px "IBM Plex Mono", monospace; }
.message-bubble.member { margin-left: auto; color: var(--white); background: var(--ink); }
.message-bubble.member time { color: #aab5be; }
.app-message-view:not([hidden]) .message-bubble { animation: message-bubble-in .5s cubic-bezier(.16,1,.3,1) both; }
.app-message-view:not([hidden]) .message-bubble:nth-child(3) { animation-delay: .16s; }
.app-message-view:not([hidden]) .message-bubble:nth-child(4) { animation-delay: .32s; }
.message-composer { display: flex; flex-direction: column; justify-content: center; }
.message-composer label { margin-bottom: 10px; font: 500 8px "IBM Plex Mono", monospace; text-transform: uppercase; }
.message-composer > div { display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--ink); }
.message-composer input { min-width: 0; padding: 14px; background: transparent; border: 0; outline: 0; font-size: 12px; }
.message-composer button { padding: 12px 15px; color: var(--white); background: var(--ink); border: 0; cursor: pointer; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.message-composer button span { color: var(--electric); }
.app-concept-note { margin: 0; padding: 13px 20px; color: #7a848b; border-top: 1px solid var(--line); font: 500 7px "IBM Plex Mono", monospace; text-align: right; text-transform: uppercase; }
.eligibility-banner {
  margin-top: 82px;
  min-height: 240px;
  padding: clamp(26px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(440px, .95fr) minmax(330px, 1.05fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 46px);
  color: var(--white);
  background: var(--ink);
  box-shadow: 15px 15px 0 var(--electric);
}
.eligibility-banner > div { display: flex; flex-direction: column; }
.eligibility-banner > div > span {
  color: var(--electric);
  font: 500 8px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.eligibility-banner strong {
  margin-top: 12px;
  font: 400 clamp(54px, 6.6vw, 94px)/.78 "Archivo Black", sans-serif;
  letter-spacing: -.08em;
}
.eligibility-banner strong span { color: var(--pink); }
.eligibility-banner p {
  margin: 0;
  max-width: 590px;
  color: #cbd1d8;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.45;
}
.eligibility-banner a {
  min-width: 190px;
  padding: 17px 18px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  color: var(--ink);
  background: var(--white);
  font: 600 9px "IBM Plex Mono", monospace;
  text-decoration: none;
  text-transform: uppercase;
}
.eligibility-banner a span { color: var(--pink); }
.eligibility-banner a:hover { background: var(--electric); }
@keyframes app-entry { to { opacity: 1; transform: none; } }
@keyframes app-bar-grow { to { height: var(--bar); } }
@keyframes app-bar-replay {
  0% { height: var(--bar); filter: brightness(1); }
  22% { height: 0; filter: brightness(1.18); }
  100% { height: var(--bar); filter: brightness(1); }
}
@keyframes app-area-replay {
  0%, 18% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes app-line-replay {
  0%, 15% { stroke-dashoffset: 800; }
  100% { stroke-dashoffset: 0; }
}
@keyframes app-waist-replay {
  0%, 15% { stroke-dashoffset: 320; }
  100% { stroke-dashoffset: 0; }
}
@keyframes point-replay {
  0% { opacity: 1; transform: scale(1); }
  28% { opacity: .25; transform: scale(.2); }
  72% { opacity: 1; transform: scale(1.75); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes compliance-day-replay {
  0% { opacity: 1; transform: scale(1); }
  28% { opacity: .15; transform: scale(.15); }
  72% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes app-area-in { to { opacity: 1; transform: scaleX(1); } }
@keyframes app-line-in { to { stroke-dashoffset: 0; } }
@keyframes compliance-fill {
  from { --compliance: 0%; }
  to { --compliance: 86%; }
}
@keyframes compliance-day-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes app-message-in {
  from { opacity: 0; transform: translateY(15px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes message-bubble-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.proof {
  min-height: 820px;
  padding: 100px var(--pad);
  display: grid;
  grid-template-columns: 1fr minmax(420px, .88fr);
  align-items: center;
  gap: 7vw;
  background: var(--soft);
}
.proof-photo {
  position: relative;
  padding: 14px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 16px 16px 0 var(--pink);
  transform: rotate(-1deg);
}
.proof-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
}
.case-file-head,
.photo-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--white);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.case-file-head { padding: 2px 2px 12px; }
.case-file-head span:last-child { color: var(--electric); }
.photo-note { padding: 13px 2px 1px; }
.photo-note strong { font-weight: 500; }
.photo-note span { color: #9fa9b1; text-align: right; }
.proof blockquote {
  min-height: 600px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.quote-mark {
  font-family: Georgia, serif;
  font-size: 100px;
  line-height: .5;
}
.quote-mark { color: var(--pink); }
.proof blockquote p {
  margin: auto 0;
  font-size: clamp(38px, 5.5vw, 85px);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.055em;
}
.proof footer { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.proof footer span { font-family: "IBM Plex Mono", monospace; font-size: 9px; text-transform: uppercase; }

.proof-archive {
  overflow: hidden;
  padding: 105px 0 115px;
  color: var(--white);
  background: var(--ink);
}
.proof-archive-head {
  padding: 0 var(--pad) 55px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 24px;
}
.proof-archive-head .section-tag { grid-column: 1 / -1; }
.proof-archive-head h2 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(54px, 7vw, 108px);
  line-height: .84;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.proof-archive-head h2 span { color: var(--electric); }
.proof-archive-head > p:last-child {
  max-width: 390px;
  justify-self: end;
  color: #cbd1d8;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.5;
}
.proof-rail {
  width: 100%;
  overflow: hidden;
}
.proof-track {
  width: max-content;
  display: flex;
  gap: 18px;
  padding-left: 18px;
  animation: proof-drift 58s linear infinite;
}
.proof-track:hover { animation-play-state: paused; }
.proof-track figure {
  width: clamp(270px, 24vw, 390px);
  margin: 0;
  padding: 9px;
  flex: none;
  background: var(--white);
  border: 1px solid rgba(255,255,255,.12);
}
.proof-track figure:nth-child(4n+2) { transform: translateY(18px); }
.proof-track figure:nth-child(4n+4) { transform: translateY(-10px); }
.proof-track img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #d9d5cd;
  filter: saturate(.82) contrast(1.035);
}
.proof-track figcaption {
  padding: 12px 4px 3px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.proof-track figcaption span { color: var(--pink); }
.proof-track figcaption > div {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}
.proof-track figcaption strong { font-weight: 750; }
.proof-track figcaption em {
  color: rgba(17,20,28,.58);
  font-size: .9em;
  font-style: normal;
}
.proof-disclosure {
  margin: 44px var(--pad) 0;
  color: #7f8a94;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .07em;
}
@keyframes proof-drift {
  to { transform: translateX(calc(-50% - 9px)); }
}

.proof-cta {
  min-height: 430px;
  padding: 78px var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: end;
  gap: clamp(44px, 8vw, 130px);
  color: var(--ink);
  background: var(--sky);
  border-top: 1px solid rgba(17,20,28,.18);
}
.proof-cta h2 {
  max-width: 1040px;
  margin: 18px 0 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(42px, 5.4vw, 88px);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.proof-cta h2 span { color: var(--pink); }
.proof-cta-link {
  min-height: 116px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: var(--white);
  background: var(--ink);
  border-bottom: 8px solid var(--electric);
  font-weight: 820;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .25s ease, border-color .25s ease;
}
.proof-cta-link:hover { transform: translateY(-6px); border-color: var(--pink); }
.proof-cta-link span:last-child { color: var(--electric); font-size: 34px; line-height: 1; }

.chart-replay {
  margin: 8px 0 0 auto;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  color: #647078;
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  cursor: pointer;
}
.chart-replay:hover,
.chart-replay:focus-visible { color: var(--app-blue, var(--electric)); }

.member-voice {
  min-height: 680px;
  padding: 86px var(--pad);
  display: grid;
  grid-template-columns: minmax(350px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(52px, 6vw, 104px);
  color: var(--white);
  background: var(--ink);
}
.member-voice h2 {
  margin: 22px 0 30px;
  color: var(--white);
  font-size: clamp(76px, 7vw, 110px);
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.member-voice h2 span {
  display: block;
}
.member-voice h2 span:last-child {
  max-width: 500px;
  margin-top: 12px;
  color: var(--teal);
  font-size: .59em;
  line-height: .92;
  letter-spacing: -.045em;
}
.member-voice-copy > p:last-child {
  max-width: 440px;
  color: #cbd1d8;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.55;
}
.member-video {
  position: relative;
  padding: 11px;
  background: var(--cream);
  box-shadow: 18px 18px 0 var(--teal);
  transform: rotate(1.25deg);
}
.member-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #090b0c;
}
.member-video > span {
  display: block;
  padding: 12px 4px 3px;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.experts {
  padding: 112px var(--pad);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 7vw;
}
.experts h2 { color: var(--ink); }

@media (min-width: 901px) {
  .experts-heading {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    column-gap: 7vw;
    align-items: end;
  }

  .experts-heading .section-tag,
  .experts-heading h2 { grid-column: 1; }

  .experts-heading h2 { font-size: clamp(58px, 6vw, 96px); }

  .experts-heading .team-intro {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    margin: 0 0 35px;
  }
}
.expert-card {
  display: grid;
  grid-template-columns: .72fr 1fr;
  align-items: end;
  background: #d7dde1;
}
.expert-card img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.03) saturate(.88);
}
.expert-card > div { padding: 42px; }
.expert-card h3 { margin: 16px 0; font-size: 30px; line-height: 1.05; letter-spacing: -.04em; }
.expert-card p:not(.tiny) { margin: 0 0 36px; font-size: 15px; line-height: 1.55; }

.apply {
  min-height: 720px;
  padding: 100px var(--pad);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #dfe4e7;
  overflow: hidden;
}
.apply::after {
  content: "NBS";
  position: absolute;
  right: -4vw;
  bottom: -12vw;
  color: rgba(17,20,28,.08);
  font-family: "Archivo Black", sans-serif;
  font-size: 42vw;
  line-height: 1;
  letter-spacing: -.12em;
}
.apply h2 { position: relative; z-index: 1; max-width: 1100px; }
.apply h2 span { color: var(--electric); }
.apply-button {
  position: relative;
  z-index: 2;
  width: min(100%, 640px);
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  background: var(--ink);
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease;
}
.apply-button:hover { transform: translateX(8px); background: var(--electric); }
.apply-button span:last-child { color: #aab5be; }
.apply-note {
  position: relative;
  z-index: 1;
  margin: 15px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.site-footer {
  padding: 80px var(--pad) 25px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 50px;
  align-items: start;
  background: var(--ink);
  color: white;
}
.site-footer > p { margin: 0; font-size: 23px; line-height: 1.15; letter-spacing: -.03em; }
.footer-links { display: flex; gap: 24px; font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--electric); }
.footer-social { grid-column: 3 / 4; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 20px; font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; }
.footer-social a { color: #b9bec6; text-decoration: none; }
.footer-social a:hover { color: var(--electric); }
.footer-social span { color: var(--electric); }
.copyright { grid-column: 1 / -1; padding-top: 60px; color: #90949c; font-family: "IBM Plex Mono", monospace; font-size: 9px !important; }
.footer-legal { display:flex; gap:18px; grid-column:1 / -1; margin:0; color:#90949c; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.07em; text-transform:uppercase; }
.footer-legal a { color:inherit; text-decoration:none; }
.footer-legal a:hover { color:var(--electric); }
.reveal {
  opacity: .68;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .5s ease,
    transform .65s cubic-bezier(.16,1,.3,1);
}
.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.credibility .scroll-reveal:nth-child(2),
.proof .scroll-reveal:nth-child(2),
.experts .scroll-reveal:nth-child(2) { transition-delay: .11s; }
.credibility .scroll-reveal:nth-child(3) { transition-delay: .2s; }
.scene { isolation: isolate; }
.scene::selection { background: var(--electric); color: white; }
.rhythm.in-view .day .block { animation: bar-grow .9s cubic-bezier(.16,1,.3,1) both; }
.rhythm.in-view .day:nth-child(2) .block { animation-delay: .06s; }
.rhythm.in-view .day:nth-child(3) .block { animation-delay: .12s; }
.rhythm.in-view .day:nth-child(4) .block { animation-delay: .18s; }
.rhythm.in-view .day:nth-child(5) .block { animation-delay: .24s; }
.rhythm.in-view .day:nth-child(6) .block { animation-delay: .3s; }
.rhythm.in-view .day:nth-child(7) .block { animation-delay: .36s; }
@keyframes bar-grow {
  from { height: 0; }
  to { height: var(--h); }
}
.phases.in-view .phase {
  animation: phase-enter .65s cubic-bezier(.16,1,.3,1) both;
}
.phases.in-view .phase:nth-child(2) { animation-delay: .08s; }
.phases.in-view .phase:nth-child(3) { animation-delay: .16s; }
.phases.in-view .phase:nth-child(4) { animation-delay: .24s; }
@keyframes phase-enter {
  from { opacity: 0; transform: translateX(30px); }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .hero-conversation {
    top: 205px;
    left: calc(56% - 105px);
    width: 292px;
    min-height: 245px;
    padding: 11px;
    box-shadow: 7px 7px 0 rgba(15,163,177,.82);
  }
  .hero-chat-stage { min-height: 178px; padding-block: 10px 8px; }
  .hero-message { max-width: 92%; margin-bottom: 7px; padding: 8px 9px; }
  .hero-message.member { padding-left: 36px; }
  .hero-message.member::before { left: 8px; top: 8px; width: 20px; height: 20px; }
  .hero-message p { font-size: 10px; }
  .hero-message.rd { padding-left: 36px; }
  .hero-message.rd::before { left: 8px; top: 8px; width: 20px; height: 20px; }
  .hero-chat-foot { padding-top: 7px; }
  .hero-chat-foot > span { max-width: 190px; font-size: 6px; }
  .eligibility-banner {
    grid-template-columns: 1fr 1fr;
  }
  .eligibility-banner a {
    grid-column: 1 / -1;
    width: 100%;
  }
  .week-film-stage .film-scene-content { padding-right: 46%; }
  .week-film-stage h3 { font-size: clamp(46px, 6.4vw, 76px); }
  .week-film-stage h3,
  .week-film-stage .film-body,
  .week-film-stage .film-signals { width: calc(100% - 16px); }
  .week-film-stage .film-body { max-width: 500px; font-size: 16px; }
  .film-semantics { right: 2%; width: 36%; }
}

@media (min-width: 901px) {
  .film-scene-content { padding-right: 37%; }
  .film-body { max-width: 610px; }
  .semantic-scene { padding: 25px; }
  .semantic-family-table { width: 190px; height: 154px; margin-top: 54px; margin-bottom: 42px; }
  .chair-top,
  .chair-bottom { left: 81px; }
  .semantic-foods { margin-top: 42px; width: 59%; gap: 10px; }
  .semantic-foods i { padding: 18px 10px; font-size: 8px; }
  .semantic-plate { width: 140px; height: 140px; right: 22px; bottom: 44px; }
  .semantic-chat { width: 88%; padding: 17px; font-size: 12px; }
  .semantic-chat.member { margin-top: 28px; }
  .semantic-chat.followup { margin-top: 9px; }
  .semantic-typing { padding: 11px 13px; }
  .semantic-hours { margin-top: 88px; font-size: 8px; }
  .semantic-tuesday > strong { margin-top: 84px; font-size: 12px; }
  .semantic-inputs { margin-top: 30px; gap: 10px; }
  .semantic-inputs i { padding: 23px 10px; font-size: 8px; }
  .semantic-converge { margin-top: 10px; font-size: 28px; }
  .semantic-wednesday > strong { font-size: 15px; }
  .semantic-context-map { margin-top: 28px; }
  .semantic-context-map span { min-height: 55px; font-size: 7px; }
  .semantic-review-line { margin: 90px 0 70px; }
  .semantic-adjust { gap: 16px; font-size: 9px; }
  .semantic-week-bars { height: 210px; margin-top: 38px; }
  .semantic-weekend > strong { margin-top: 25px; font-size: 12px; }
  .semantic-radar { width: 220px; height: 220px; margin-top: 42px; }
  .semantic-goals { margin-top: 25px; font-size: 8px; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; height: 78px; color: white; }
  .desktop-nav { display: none; }
  .nav-cta { font-size: 10px; padding: 11px; border-color: white; }
  .nav-cta span { margin-left: 8px; }
  .hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--ink);
  }
  .hero-copy,
  .hero-visual { grid-area: 1 / 1; }
  .hero-copy {
    z-index: 2;
    min-height: 100svh;
    padding-top: 120px;
    padding-bottom: 76px;
    color: white;
    background:
      linear-gradient(90deg, rgba(17,20,28,.9) 0%, rgba(17,20,28,.67) 50%, rgba(17,20,28,.14) 100%),
      linear-gradient(0deg, rgba(17,20,28,.84) 0%, transparent 55%);
  }
  .hero h1 { margin: auto 0 40px; font-size: clamp(57px, 15vw, 100px); }
  .hero h1 span { color: #55c4cd; transform: translateX(0); white-space: normal; }
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-bottom p { max-width: 440px; }
  .hero-bottom .text-link { color: white; }
  .hero-visual { z-index: 0; min-height: 100svh; }
  .hero-visual img { object-position: 58% center; }
  .image-wash { opacity: .04; }
  .visual-label { top: 98px; font-size: clamp(15px, 3.5vw, 25px); }
  .hero-conversation { display: none; }
  .rhythm-loop { right: -35px; bottom: 105px; opacity: .72; }
  .hero-rail { z-index: 3; }
  .credibility,
  .rhythm-section,
  .method,
  .app-experience-copy,
  .experts { grid-template-columns: 1fr; }
  .credibility { gap: 30px; }
  .rhythm-section, .method, .experts { padding-top: 90px; padding-bottom: 90px; }
  .proof { grid-template-columns: 1fr; }
  .proof-archive-head { grid-template-columns: 1fr; }
  .proof-archive-head .section-tag { grid-column: auto; }
  .proof-archive-head > p:last-child { justify-self: start; }
  .proof-cta { grid-template-columns: 1fr; }
  .proof-cta-link { width: min(100%, 520px); }
  .proof-photo { width: min(720px, 92vw); justify-self: center; }
  .proof blockquote { min-height: 520px; }
  .member-voice { grid-template-columns: 1fr; }
  .member-video { width: min(860px, 88vw); justify-self: center; }
  .expert-card { grid-template-columns: 1fr 1fr; }
  .method-lead { position: relative; top: auto; }
  .app-experience { padding-top: 95px; padding-bottom: 110px; }
  .app-experience-copy .section-tag { grid-column: auto; }
  .week-film-screen { grid-template-columns: 190px 1fr; }
  .app-grid { grid-template-columns: 240px 1fr; }
  .app-chart-grid { grid-template-columns: 1fr; }
  .app-care-strip { grid-template-columns: 1fr; }
  .app-log-view,
  .app-message-view { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-links { justify-self: end; }
  .footer-social { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
}

@media (max-width: 600px) {
  .brand-name { display: none; }
  .hero-copy { min-height: 100svh; padding-top: 104px; }
  .hero-bottom p { font-size: 15px; line-height: 1.48; }
  .hero-visual { min-height: 100svh; }
  .visual-label { top: 154px; right: -2px; font-size: 14px; }
  .hero-conversation { display: none; }
  .rhythm-loop { display: none; }
  .credibility { grid-template-columns: 1fr; padding-top: 55px; padding-bottom: 55px; }
  .credibility ul { margin-top: 20px; }
  .days {
    width: 100%;
    height: 285px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }
  .day > span { left: 4px; font-size: 7px; }
  .day .block { margin-inline: 2px; }
  .day small { padding: 4px 2px; font-size: 7px; white-space: nowrap; }
  .rhythm { padding: 12px; overflow: hidden; box-shadow: 7px 7px 0 var(--sky); }
  .rhythm-header span:last-child { display: none; }
  .phase button { grid-template-columns: 40px 1fr auto; }
  .phase-body { padding-left: 40px; }
  .proof { padding-top: 70px; padding-bottom: 85px; }
  .app-experience { padding-inline: 14px; }
  .app-experience-copy { margin-bottom: 48px; padding-inline: 8px; }
  .week-film { margin-bottom: 72px; box-shadow: 9px 9px 0 var(--electric); }
  .week-film-bar > div { display: block; }
  .week-film-bar > div strong { display: block; margin-top: 5px; }
  .week-film-screen { min-height: 0; grid-template-columns: 1fr; }
  .week-film-days {
    padding: 8px;
    grid-template-columns: repeat(8, minmax(88px, 1fr));
    grid-template-rows: 1fr;
    overflow-x: auto;
    scrollbar-width: none;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
    scroll-snap-type: x proximity;
  }
  .week-film-days::-webkit-scrollbar { display: none; }
  .week-film-days button { min-height: 68px; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.1); scroll-snap-align: start; }
  .week-film-days button.active { padding-left: 12px; box-shadow: inset 0 -4px 0 var(--pink); }
  .week-film-stage { min-height: 0; padding: 55px 22px 32px; }
  .week-film-stage h3 { font-size: clamp(43px, 13vw, 62px); }
  .film-scene-content { order: 1; }
  .film-semantics {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: 430px;
    margin: 32px 0;
    opacity: 1;
  }
  .semantic-scene {
    padding: 20px;
    border-color: rgba(248,244,237,.16);
    background: rgba(17,20,28,.46);
    backdrop-filter: blur(4px);
  }
  .semantic-family-table { width: 170px; height: 145px; margin-top: 58px; }
  .chair-top,
  .chair-bottom { left: 70px; }
  .semantic-foods { margin-top: 48px; }
  .semantic-foods i { padding-block: 17px; }
  .semantic-plate { width: 125px; height: 125px; bottom: 62px; }
  .semantic-chat { padding: 13px; font-size: 10px; }
  .semantic-chat.member { margin-top: 20px; }
  .semantic-chat.followup { margin-top: 8px; }
  .semantic-hours { margin-top: 90px; }
  .semantic-tuesday > strong { margin-top: 90px; }
  .semantic-inputs { margin-top: 24px; }
  .semantic-inputs i { padding-block: 21px; }
  .semantic-context-map { margin-top: 18px; }
  .semantic-review-line { margin: 90px 0 75px; }
  .semantic-week-bars { height: 240px; margin-top: 32px; }
  .semantic-radar { width: 220px; height: 220px; margin-top: 42px; }
  .film-body { margin-block: 26px; }
  .film-caption { order: 3; display: block; }
  .film-caption strong { display: block; margin-top: 6px; }
  .app-system-bridge { display: block; padding-inline: 8px; }
  .app-system-bridge strong { display: block; margin-top: 18px; text-align: left; }
  .nbs-app { box-shadow: 10px 10px 0 var(--pink); transform: none; }
  .nbs-app-bar { grid-template-columns: 1fr auto; }
  .app-week { display: none; }
  .app-grid { grid-template-columns: 1fr; }
  .app-activity { border-right: 0; border-bottom: 1px solid var(--line); }
  .app-insights { padding: 20px 12px; }
  .app-insights-head { align-items: start; }
  .app-insights-head strong { font-size: 27px; }
  .app-chart-grid { grid-template-columns: 1fr; }
  .app-chart-grid article { padding: 16px; }
  .app-view-tabs button { flex: 1; padding-inline: 6px; }
  .app-log-view,
  .app-message-view { grid-template-columns: 1fr; }
  .macro-inputs { grid-template-columns: 1fr; }
  .app-log-context { min-height: 330px; }
  .message-bubble { max-width: 92%; }
  .message-composer > div { grid-template-columns: 1fr; }
  .app-bars { height: 230px; }
  .chart-title { display: block; }
  .chart-title small { display: block; margin-top: 6px; }
  .app-concept-note { text-align: left; }
  .eligibility-banner {
    margin: 60px 8px 0;
    min-height: 0;
    padding: 30px 24px;
    grid-template-columns: 1fr;
    gap: 28px;
    box-shadow: 9px 9px 0 var(--electric);
  }
  .eligibility-banner strong { font-size: clamp(66px, 21vw, 100px); }
  .eligibility-banner a { min-width: 0; width: 100%; }
  .proof-archive { padding-top: 80px; padding-bottom: 90px; }
  .proof-archive-head { padding-bottom: 42px; }
  .proof-track { gap: 12px; padding-left: 12px; animation-duration: 48s; }
  .proof-track figure { width: 78vw; }
  .proof-disclosure { margin-top: 36px; text-align: left; }
  .proof-cta { min-height: 0; padding: 72px 22px; gap: 36px; }
  .proof-cta h2 { font-size: clamp(39px, 11.8vw, 62px); }
  .proof-cta-link { min-height: 102px; }
  .proof-photo { width: 100%; box-shadow: 10px 10px 0 var(--pink); }
  .proof blockquote { min-height: 460px; }
  .photo-note { align-items: flex-start; flex-direction: column; }
  .photo-note span { text-align: left; }
  .member-voice { min-height: auto; padding-top: 80px; padding-bottom: 82px; gap: 52px; }
  .member-voice h2 {
    margin-bottom: 28px;
    font-size: clamp(54px, 15.5vw, 72px);
    line-height: .88;
  }
  .member-voice h2 span { display: inline; }
  .member-voice h2 span:last-child {
    max-width: none;
    margin-top: 0;
    color: var(--white);
    font-size: 1em;
    line-height: inherit;
    letter-spacing: inherit;
  }
  .member-voice h2 span:first-child { margin-right: .16em; }
  .member-video { width: 100%; box-shadow: 11px 11px 0 var(--teal); }
  .expert-card { grid-template-columns: 1fr; }
  .expert-card img { height: 470px; }
  .expert-card > div { padding: 28px; }
  .apply { min-height: 600px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { justify-self: start; }
  .footer-social { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .proof-track { transform: none; }
  .film-fast-forward,
  .film-kinetics { display: none; }
  .film-scene-content {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Additive conversion layer — preserves the original NBS visual system. */
.case-file-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: #fff;
}
.case-file-facts span { padding: 15px 17px; border-right: 1px solid var(--line); }
.case-file-facts span:last-child { border-right: 0; }
.case-file-facts small,
.case-file-facts strong { display: block; }
.case-file-facts small { margin-bottom: 4px; color: rgba(17,20,28,.58); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.case-file-facts strong { font-size: 12px; }
.case-file-story {
  margin: 0;
  padding: 17px 18px 16px;
  color: var(--ink);
  background: var(--electric);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 720;
  line-height: 1.35;
}
.case-file-story span {
  display: block;
  margin-top: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.team-intro { max-width: 610px; margin-top: 28px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.team-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 15px 15px 0 var(--sky);
}
.team-member {
  position: relative;
  min-width: 0;
  padding: 18px 18px 25px;
  border-right: 1px solid var(--line);
  background: #fff;
}
.team-member:last-child { border-right: 0; }
.team-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 24px;
  overflow: hidden;
  background: var(--ink);
}
.team-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.82) contrast(1.035);
  transform: scale(1.01);
  transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .5s ease;
}
.team-portrait::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 56%, rgba(17,20,28,.12) 72%, rgba(17,20,28,.86) 100%),
    linear-gradient(90deg, rgba(17,20,28,.2), transparent 30%);
  pointer-events: none;
}
.team-portrait::after {
  content: "REAL NBS TEAM";
  position: absolute;
  z-index: 2;
  right: 11px;
  bottom: 10px;
  color: rgba(255,255,255,.72);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .15em;
  writing-mode: vertical-rl;
}
.team-portrait--bradley img { object-position: 48% 42%; }
.team-portrait--jennifer img { object-position: 53% 34%; }
.team-portrait--afton img { object-position: 50% 34%; }
.team-portrait--dawn img { object-position: 50% 30%; }
.portrait-role {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 52px);
  color: var(--white);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.team-member:hover .team-portrait img {
  filter: saturate(1) contrast(1.025);
  transform: scale(1.035);
}
.team-member .tiny { margin: 0 0 8px; color: var(--teal); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.team-member h3 { margin: 0; font-family: "Archivo Black", sans-serif; font-size: clamp(20px, 1.8vw, 29px); line-height: .98; letter-spacing: -.04em; text-transform: uppercase; }
.team-member > strong { display: block; min-height: 32px; margin-top: 10px; color: var(--pink); font-size: 11px; line-height: 1.25; text-transform: uppercase; }
.team-member > .team-bio { margin: 20px 0 0; font-size: 13px; line-height: 1.45; }
.team-social { display:inline-flex; gap:5px; margin-top:18px; color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.team-social:hover { color:var(--teal); }
.team-social span { color:var(--teal); }

.concierge-offer {
  min-height: 900px;
  padding: 110px var(--pad);
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
  align-content: center;
  gap: clamp(48px, 6.5vw, 110px);
  color: var(--white);
  background: var(--ink);
}
.offer-lead h2 { margin: 20px 0 30px; font-family: "Archivo Black", sans-serif; font-size: clamp(56px, 6vw, 100px); line-height: .87; letter-spacing: -.065em; text-transform: uppercase; }
.offer-lead h2 span { color: var(--electric); }
.offer-lead > p:last-child { max-width: 560px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.42; }
.offer-ledger { border-top: 1px solid rgba(248,244,237,.26); }
.offer-ledger article { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid rgba(248,244,237,.26); }
.offer-ledger article > span { color: var(--pink); font-family: "Archivo Black", sans-serif; font-size: 17px; }
.offer-ledger strong { font-size: clamp(17px, 1.5vw, 23px); }
.offer-ledger p { max-width: 620px; margin: 7px 0 0; color: rgba(248,244,237,.68); line-height: 1.45; }
.offer-principle { grid-column: 1 / -1; margin: 16px 0 0; padding: 18px 0 0 72px; border-top: 5px solid var(--pink); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.quiz-bridge {
  min-height: 610px;
  padding: 96px var(--pad);
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  align-items: end;
  gap: 48px;
  background: var(--sky);
}
.quiz-bridge-copy h2 { max-width: 940px; margin: 18px 0 26px; font-family: "Archivo Black", sans-serif; font-size: clamp(52px, 6.7vw, 112px); line-height: .86; letter-spacing: -.065em; text-transform: uppercase; }
.quiz-bridge-copy > p:last-child { max-width: 730px; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.45; }
.quiz-button {
  width: 260px;
  height: 260px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background: var(--pink);
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  transform: rotate(-5deg);
  transition: transform .25s ease, background .25s ease;
}
.quiz-button:hover { background: var(--ink); transform: rotate(0deg) scale(1.035); }
.quiz-button span:first-child { max-width: 150px; font-size: 23px; line-height: 1; }
.quiz-button span:last-child { align-self: flex-end; font-size: 44px; }
.quiz-status { grid-column: 1 / -1; margin: 0; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

.faq {
  padding: 110px var(--pad);
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(55px, 8vw, 140px);
  background: var(--white);
}
.faq-heading h2 { margin: 20px 0 0; font-family: "Archivo Black", sans-serif; font-size: clamp(60px, 6vw, 104px); line-height: .87; letter-spacing: -.06em; text-transform: uppercase; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--ink); }
.faq-list summary { min-height: 86px; padding: 22px 4px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; font-size: clamp(17px, 1.6vw, 23px); font-weight: 780; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--pink); font-family: "Archivo Black", sans-serif; font-size: 26px; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 720px; margin: -2px 50px 28px 4px; font-size: 16px; line-height: 1.55; }

.next-strip {
  width: min(1040px, 100%);
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(248,244,237,.3);
  text-align: left;
}
.next-strip > span { min-height: 150px; padding: 22px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 15px; border-right: 1px solid rgba(248,244,237,.3); }
.next-strip > span:last-child { border-right: 0; }
.next-strip b { grid-row: 1 / 3; color: var(--pink); font-family: "Archivo Black", sans-serif; }
.next-strip strong { font-size: 17px; text-transform: uppercase; }
.next-strip small { margin-top: 16px; color: rgba(248,244,237,.68); font-size: 12px; line-height: 1.4; }
.apply .next-strip { border-color: rgba(17,20,28,.2); }
.apply .next-strip > span { border-color: rgba(17,20,28,.2); }
.apply .next-strip small { color: rgba(17,20,28,.66); }

.quiz-popover {
  position: fixed;
  z-index: 80;
  right: 24px;
  bottom: 24px;
  width: min(430px, calc(100vw - 32px));
  padding: 34px;
  border: 1px solid rgba(248,244,237,.25);
  color: var(--white);
  background: var(--ink);
  box-shadow: 12px 12px 0 var(--pink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px) rotate(1deg);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.quiz-popover.open { opacity: 1; visibility: visible; transform: translateY(0) rotate(0); }
.quiz-popover-close { position: absolute; top: 12px; right: 15px; border: 0; color: var(--white); background: transparent; font-size: 30px; cursor: pointer; }
.quiz-popover h2 { margin: 17px 24px 16px 0; font-family: "Archivo Black", sans-serif; font-size: 38px; line-height: .92; letter-spacing: -.05em; text-transform: uppercase; }
.quiz-popover > p:not(.section-tag) { color: rgba(248,244,237,.76); line-height: 1.45; }
.quiz-popover-action { width: 100%; margin-top: 12px; padding: 17px; display: flex; justify-content: space-between; border: 0; color: var(--white); background: var(--pink); font-weight: 850; cursor: pointer; }
.quiz-popover > small { display: block; margin-top: 13px; color: rgba(248,244,237,.55); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }

/* Keep the complete opening argument in-frame on desktop, including short
   laptop viewports. Mobile keeps its separate full-bleed composition below. */
@media (min-width: 901px) {
  .hero { min-height: 100svh; }
  .hero-visual { min-height: 0; }
  .hero-visual img {
    position: absolute;
    inset: 0;
  }
  .hero-copy {
    padding-top: clamp(118px, 15vh, 154px);
    padding-bottom: clamp(48px, 8vh, 84px);
  }
  .hero h1 {
    margin-bottom: clamp(30px, 5vh, 52px);
    font-size: clamp(68px, min(8.2vw, 13.2vh), 135px);
  }
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-member:nth-child(2) { border-right: 0; }
  .team-member:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .concierge-offer,
  .faq { grid-template-columns: 1fr; }
  .offer-principle { padding-left: 0; }
  .quiz-bridge { grid-template-columns: 1fr; }
  .quiz-button { width: 220px; height: 220px; }
}

@media (max-width: 600px) {
  .case-file-facts span { padding: 12px 9px; }
  .case-file-facts strong { font-size: 10px; }
  .team-grid { grid-template-columns: 1fr; margin-top: 34px; box-shadow: 9px 9px 0 var(--sky); }
  .team-member,
  .team-member:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .team-member:last-child { border-bottom: 0; }
  .team-portrait { aspect-ratio: 4 / 3; }
  .team-portrait--bradley img { object-position: 49% 38%; }
  .team-portrait--jennifer img,
  .team-portrait--afton img,
  .team-portrait--dawn img { object-position: 50% 27%; }
  .team-member > strong { min-height: 0; }
  .concierge-offer,
  .quiz-bridge,
  .faq { min-height: 0; padding: 80px 22px; }
  .concierge-offer,
  .quiz-bridge,
  .faq { gap: 38px; }
  .offer-ledger article { grid-template-columns: 38px 1fr; gap: 12px; }
  .offer-principle { font-size: 10px; line-height: 1.5; }
  .quiz-button { width: 190px; height: 190px; }
  .quiz-button span:first-child { font-size: 19px; }
  .faq-list summary { min-height: 74px; font-size: 16px; }
  .faq-list details p { margin-right: 18px; font-size: 14px; }
  .next-strip { grid-template-columns: 1fr; margin-top: 45px; }
  .next-strip > span { min-height: 110px; border-right: 0; border-bottom: 1px solid rgba(248,244,237,.3); }
  .next-strip > span:last-child { border-bottom: 0; }
  .quiz-popover { right: 16px; bottom: 16px; padding: 28px 24px; box-shadow: 8px 8px 0 var(--pink); }
  .quiz-popover h2 { font-size: 31px; }
}

/* Readability floor for the NBS 35–60 audience. Micro type remains editorial,
   but meaningful labels and controls must be comfortably legible. */
.kicker,
.section-tag,
.tiny { font-size: 12px; }
.text-link { font-size: 12px; }
.hero-rail { font-size: 11px; }
.case-file-head,
.photo-note,
.proof-track figcaption,
.proof-disclosure { font-size: 10px; }
.proof footer span,
.member-video > span,
.apply-note,
.footer-links,
.copyright { font-size: 10.5px !important; }
.case-file-facts small,
.team-member .tiny { font-size: 10px; }
.team-member > strong { font-size: 12px; }
.quiz-status,
.quiz-popover > small { font-size: 10.5px; line-height: 1.45; }

.week-film-bar span,
.week-film-bar strong,
.week-film-bar button,
.week-film-days button b,
.film-number,
.film-signals span,
.film-caption,
.app-system-bridge strong { font-size: 9px; }
.film-eyebrow { font-size: 11px; }

.nbs-app .app-mini-brand small,
.nbs-app .app-week,
.nbs-app .app-member-dot,
.nbs-app .app-panel-label,
.nbs-app .app-activity time,
.nbs-app .app-message > span,
.nbs-app .app-message small,
.nbs-app .app-insights-head span,
.nbs-app .range-control > *,
.nbs-app .app-view-tabs button,
.nbs-app .chart-title span,
.nbs-app .chart-title small,
.nbs-app .chart-legend,
.nbs-app .app-chart-axis,
.nbs-app .macro-metric-tabs button,
.nbs-app .app-bars > b span,
.nbs-app .app-bars span,
.nbs-app .macro-legend strong,
.nbs-app .care-card-head,
.nbs-app .compliance-ring span,
.nbs-app .waist-value span,
.nbs-app .waist-axis,
.nbs-app .care-chat i,
.nbs-app .care-chat-card button,
.nbs-app .app-log-head,
.nbs-app .macro-inputs span,
.nbs-app .app-demo-status,
.nbs-app .app-log-context > span,
.nbs-app .app-log-context > div small,
.nbs-app .message-date,
.nbs-app .message-bubble time,
.nbs-app .message-bubble.rd > span,
.nbs-app .message-composer label,
.nbs-app .app-concept-note { font-size: 9px; }

@media (max-width: 600px) {
  .nav-cta { font-size: 11px; }
  .day > span,
  .day small { font-size: 9px; }
  .week-film-bar span,
  .week-film-bar strong,
  .week-film-bar button,
  .week-film-days button b,
  .film-signals span,
  .film-caption { font-size: 10px; }
  .film-eyebrow { font-size: 12px; }
  .semantic-chat { font-size: 12px; }
  .semantic-foods i,
  .semantic-hours,
  .semantic-inputs i,
  .semantic-context-map span,
  .semantic-adjust,
  .semantic-week-labels,
  .semantic-goals { font-size: 9px; }
  .case-file-facts strong { font-size: 12px; }
  .case-file-story { font-size: 15px; }
  .offer-principle { font-size: 12px; }
  .nbs-app .app-activity article span,
  .nbs-app .meal-search b,
  .nbs-app .message-composer button { font-size: 11px; }
  .nbs-app .compliance-body p,
  .nbs-app .care-chat p,
  .nbs-app .app-log-context p,
  .nbs-app .message-bubble p,
  .nbs-app .message-composer input { font-size: 13px; }
}

/* NBS BY BSSF APP — fidelity pass */
.nbs-app {
  --app-blue: #1b9ed8;
  --app-blue-soft: #d9f2fb;
  --app-pink: #ff6b9b;
  --app-orange: #e9a400;
  --app-border: #d8dcdf;
  --app-muted: #73787c;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cbd0d3;
  border-radius: 18px;
  box-shadow: 18px 18px 0 rgba(15, 163, 177, .22);
  transform: none;
  font-variation-settings: "wdth" 100;
}
.nbs-app-bar {
  min-height: 70px;
  padding: 12px 22px;
  grid-template-columns: minmax(240px, 1fr) auto minmax(70px, 1fr);
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid var(--app-border);
}
.app-mini-brand { gap: 13px; }
.app-mini-brand > span { font-size: 22px; }
.app-mini-brand > span span { color: var(--app-blue); }
.app-mini-brand > div { display: grid; gap: 1px; }
.app-mini-brand strong { font-size: 12px; letter-spacing: -.01em; }
.app-mini-brand small { color: var(--app-muted); font-size: 9px; letter-spacing: .05em; }
.app-primary-nav { display: flex; align-self: stretch; align-items: center; gap: 30px; color: #7c8286; font-size: 11px; }
.app-primary-nav span:first-child { height: 100%; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 -3px 0 var(--app-blue); }
.app-member-dot { width: 38px; height: 38px; color: #fff; background: var(--app-blue); border: 0; font-size: 9px; }
.app-grid { min-height: 700px; grid-template-columns: 300px minmax(0, 1fr); background: #fff; }
.app-activity { padding: 20px 16px; background: #f7f8f8; border-color: var(--app-border); }
.app-compliance-panel,
.app-schedule-panel {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 13px;
}
.app-schedule-panel { margin-top: 14px; }
.app-side-card-head,
.app-side-date,
.app-side-tabs,
.app-compliance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-side-card-head strong { font-size: 14px; font-weight: 650; }
.app-side-card-head small { width: 15px; height: 15px; display: grid; place-items: center; color: #747b80; border: 1px solid #9ba1a5; border-radius: 50%; font-size: 9px; }
.app-side-date { margin: 14px 0 16px; font-size: 11px; }
.app-side-date b { color: var(--app-blue); font-size: 10px; font-weight: 500; }
.app-compliance-row { margin-top: 11px; }
.app-compliance-row > span { min-width: 82px; font-size: 11px; }
.app-compliance-row > div { display: grid; grid-template-columns: repeat(7, 14px); gap: 5px; }
.app-compliance-row i { width: 14px; height: 14px; display: block; background: #e1e3e4; border: 1px solid #d6d9db; border-radius: 50%; }
.app-compliance-row i.complete { position: relative; background: var(--app-blue); border-color: var(--app-blue); }
.app-compliance-row i.complete::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 8px/1 Arial, sans-serif; }
.nbs-app.in-view .app-compliance-row i.complete { animation: app-compliance-dot .35s cubic-bezier(.16,1,.3,1) both; }
.nbs-app.in-view .app-compliance-row:nth-child(4) i.complete { animation-delay: .2s; }
.nbs-app.in-view .app-compliance-row:nth-child(5) i.complete { animation-delay: .4s; }
.app-side-tabs { justify-content: flex-start; }
.app-side-tabs > * { padding: 6px 8px; color: var(--app-blue); border: 1px solid var(--app-blue); border-radius: 3px; font-size: 9px; font-weight: 500; }
.app-side-tabs b { color: #fff; background: var(--app-blue); }
.app-schedule-panel .app-side-date { margin-bottom: 7px; }
.app-activity .app-schedule-panel article {
  min-height: 69px;
  padding: 11px 0;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  gap: 10px;
  border-color: #e6e8e9;
  background: transparent;
}
.app-activity .app-schedule-panel article:first-of-type { border-top: 0; }
.app-activity .app-schedule-panel time {
  width: 38px;
  height: 42px;
  display: grid;
  place-content: center;
  gap: 1px;
  color: #565d61;
  background: #f2f3f3;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}
.app-activity .app-schedule-panel time b { font-size: 8px; font-weight: 500; }
.app-activity .app-schedule-panel article div { gap: 3px; }
.app-activity .app-schedule-panel article small { color: var(--app-blue); font-size: 9px; }
.app-activity .app-schedule-panel article strong { font-size: 11px; font-weight: 500; text-transform: capitalize; }
.app-activity .app-schedule-panel article > span { color: #8a8f93; font-size: 9px; }
.app-activity .app-schedule-panel .rd-activity { margin-inline: 0; padding-inline: 0; color: var(--ink); background: transparent; }
.app-message { margin-top: 14px; padding: 17px; color: var(--ink); background: var(--app-blue-soft); border: 1px solid #b8e5f6; border-radius: 13px; }
.app-message > span { color: #177da7; font-size: 9px; }
.app-message p { margin: 12px 0; font-size: 14px; line-height: 1.35; }
.app-message small { color: #177da7; font-size: 9px; }
.app-insights { padding: 26px; background: #fff; }
.app-insights-head { margin-bottom: 17px; align-items: center; }
.app-insights-head span { color: var(--app-muted); font-size: 9px; letter-spacing: .06em; }
.app-insights-head strong { font-size: clamp(26px, 3vw, 39px); font-weight: 500; letter-spacing: -.035em; }
.app-live-pill { padding: 8px 11px; display: flex !important; flex-direction: row !important; align-items: center; gap: 7px !important; color: #52707b; background: #f1fafc; border: 1px solid #c7eaf5; border-radius: 999px; font-size: 9px; text-transform: uppercase; }
.app-live-pill i { width: 7px; height: 7px; background: var(--app-blue); border-radius: 50%; box-shadow: 0 0 0 4px rgba(27,158,216,.13); }
.app-view-tabs { margin-bottom: 16px; }
.app-view-tabs button { padding: 10px 16px; font-size: 9px; text-transform: none; letter-spacing: 0; }
.app-view-tabs button.active { color: var(--app-blue); border-bottom-color: var(--app-blue); }
.app-chart-grid { grid-template-columns: minmax(330px, .92fr) minmax(390px, 1.08fr); gap: 15px; }
.app-chart-grid article,
.app-log-card,
.app-log-context,
.message-thread,
.message-composer {
  padding: 18px;
  background: #fff;
  border-color: var(--app-border);
  border-radius: 13px;
}
.chart-title strong { font-size: 14px; font-weight: 600; }
.chart-title span,
.chart-legend,
.app-chart-axis { color: #878d91; text-transform: none; }
.range-control { flex: 0 0 auto; border-color: #d3d7d9; border-radius: 4px; overflow: hidden; }
.range-control > * { padding: 6px 8px; color: #b1b5b7; font-size: 8px; font-weight: 400; border-left: 1px solid #e0e2e3; }
.range-control > *:first-child { border-left: 0; }
.range-control b { color: #fff; background: var(--app-blue); }
.macro-metric-tabs { border-color: #dfe2e3; border-radius: 5px; overflow: hidden; }
.macro-metric-tabs button { padding: 8px 5px; border-color: #dfe2e3; font-size: 7px; }
.macro-metric-tabs button.active { background: var(--app-blue); }
.macro-metric-tabs button.active b { color: #fff; }
.app-bars { height: 210px; background-image: repeating-linear-gradient(to bottom, transparent 0 51px, #edf0f1 51px 52px); }
.app-bars div > i { border-radius: 3px 3px 0 0; background: var(--app-orange); }
.app-bars div.outside-range > i { background: var(--app-pink); }
.compliance-band { background: rgba(27,158,216,.08); border-color: rgba(27,158,216,.4); }
.macro-target-line { background: var(--app-pink); }
.macro-legend span:first-child i { background: var(--app-blue); }
.macro-legend span:nth-child(2) i { background: var(--app-pink); }
.app-weight-area { fill: rgba(27,158,216,.15); }
.app-weight-line,
.waist-card path { stroke: var(--app-blue); }
.app-weight-points circle,
.waist-card circle { stroke: var(--app-blue); }
.app-care-strip { gap: 15px; }
.compliance-ring { background: conic-gradient(var(--app-blue) 0 var(--compliance), #e2e5e6 var(--compliance) 100%); }
.compliance-ring::after { background: #fff; }
.compliance-days i { background: var(--app-blue); }
.care-chat-card { color: var(--ink); background: #fff !important; border-color: var(--app-border) !important; }
.care-chat-card .care-card-head small { color: #878d91; }
.care-chat { margin-block: 16px; }
.care-chat i { color: #fff; background: var(--app-blue); }
.care-chat p { color: #474f54; }
.care-chat-card button { color: var(--app-blue); border-top-color: #e2e5e6; }
.care-chat-card button span { color: var(--app-blue); }
.app-log-context { color: var(--ink); background: var(--app-blue-soft); border-color: #b8e5f6; }
.app-log-context p { color: #48626c; }
.message-bubble.rd { background: #f0f2f3; border-radius: 4px 13px 13px 13px; }
.message-bubble.rd > span { background: var(--app-blue); }
.message-bubble.member { background: var(--app-blue); border-radius: 13px 4px 13px 13px; }
.app-concept-note { display: flex; justify-content: space-between; gap: 20px; color: #7f8589; background: #f7f8f8; text-transform: none; }
.app-concept-note span { color: var(--app-blue); font-weight: 600; }
@keyframes app-compliance-dot {
  from { opacity: .15; transform: scale(.25); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 980px) {
  .app-grid { grid-template-columns: 245px minmax(0, 1fr); }
  .app-compliance-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .app-compliance-row > div { width: 100%; grid-template-columns: repeat(7, 1fr); }
  .app-compliance-row i { width: 100%; }
  .app-activity .app-schedule-panel article { grid-template-columns: 38px minmax(0, 1fr); }
  .app-activity .app-schedule-panel article > span { grid-column: 2; }
  .app-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .nbs-app { border-radius: 13px; box-shadow: 9px 9px 0 rgba(15,163,177,.22); }
  .nbs-app-bar { min-height: 64px; padding: 10px 14px; grid-template-columns: 1fr auto; }
  .app-mini-brand > div { display: none; }
  .app-primary-nav { display: none; }
  .app-grid { min-height: 0; grid-template-columns: 1fr; }
  .app-activity { padding: 12px; }
  .app-compliance-panel { padding: 14px; }
  .app-compliance-row { flex-direction: row; align-items: center; }
  .app-compliance-row > div { width: auto; grid-template-columns: repeat(7, 1fr); }
  .app-compliance-row i { width: 14px; }
  .app-schedule-panel { display: none; }
  .app-message { margin-top: 10px; }
  .app-insights { padding: 18px 12px; }
  .app-insights-head { align-items: flex-start; gap: 12px; }
  .app-insights-head strong { font-size: 28px; }
  .app-live-pill { padding: 6px 8px; white-space: nowrap; }
  .app-view-tabs { overflow-x: auto; }
  .app-view-tabs button { min-width: 94px; }
  .app-chart-grid article { padding: 15px; }
  .chart-title { display: flex; }
  .chart-title > div:first-child { min-width: 0; }
  .chart-title .range-control { margin-top: 0; }
  .chart-title span { font-size: 8px; }
  .macro-metric-tabs button { display: grid; gap: 2px; }
  .app-bars { height: 205px; }
  .app-care-strip { grid-template-columns: 1fr; }
  .app-concept-note { display: block; line-height: 1.5; }
  .app-concept-note span { display: block; margin-bottom: 4px; }
}