:root {
  --story-onyx: #030507;
  --story-glass: rgba(10, 15, 18, .88);
  --story-platinum: #edf2f4;
  --story-muted: #98a5ab;
  --story-aqua: #69f6df;
  --story-cyan: #25cce8;
  --story-gold: #d8bd70;
  --story-line: rgba(221, 232, 235, .17);
}

.research-intelligence,
.guardian-vault,
.smile-proof-film,
.circles-story {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 9%, rgba(238, 243, 245, .1), transparent 34%),
    linear-gradient(145deg, rgba(15, 21, 25, .94), rgba(2, 4, 6, .96));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .1);
  filter: none;
}

:where(.research-intelligence, .guardian-vault, .smile-proof-film, .circles-story) span {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  display: inline;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  animation: none;
}

.scene-protocols {
  width: min(46vw, 680px);
  opacity: 1;
}

.scene-protocols-field {
  inset: 3%;
  overflow: hidden;
  border-color: rgba(229, 237, 239, .18);
  border-radius: 34px;
  background:
    linear-gradient(rgba(105, 246, 223, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 246, 223, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(105, 246, 223, .1), transparent 31%),
    linear-gradient(145deg, rgba(13, 19, 23, .96), rgba(2, 4, 6, .98));
  background-size: 44px 44px, 44px 44px, auto, auto;
  box-shadow: 0 34px 88px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .08);
}

.scene-protocols-field::before {
  inset: 25%;
  border-color: rgba(229, 237, 239, .13);
  background: radial-gradient(circle, rgba(105, 246, 223, .08), transparent 62%), rgba(2, 4, 6, .72);
  box-shadow: 0 0 0 38px rgba(229, 237, 239, .025), 0 0 0 76px rgba(229, 237, 239, .018);
}

.scene-system-label {
  position: absolute;
  top: 5.5%;
  left: 50%;
  z-index: 4;
  display: grid;
  gap: 2px;
  color: var(--story-platinum);
  text-align: center;
  transform: translateX(-50%);
}

.scene-system-label span,
.scene-system-label small {
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
  font-size: clamp(.52rem, .7vw, .66rem);
  font-weight: 800;
  letter-spacing: .12em;
}

.scene-system-label small { color: var(--story-aqua); font-size: clamp(.42rem, .55vw, .52rem); }

.scene-spokes {
  position: absolute;
  inset: 13%;
  z-index: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(105, 246, 223, .3) 0 .4deg, transparent .4deg 60deg);
  -webkit-mask: radial-gradient(circle, transparent 0 19%, #000 19.5% 78%, transparent 78.5%);
  mask: radial-gradient(circle, transparent 0 19%, #000 19.5% 78%, transparent 78.5%);
}

.scene-sovereign-core {
  width: 27%;
  overflow: visible;
  border-color: rgba(238, 243, 245, .3);
  background: radial-gradient(circle at 35% 25%, rgba(239, 244, 246, .2), transparent 35%), #05080a;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .58), 0 0 48px rgba(105, 246, 223, .08), inset 0 1px rgba(255, 255, 255, .1);
}

.scene-sovereign-core::before { display: none; }

.scene-sovereign-core img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: contrast(1.07) drop-shadow(0 12px 24px rgba(0, 0, 0, .62));
}

.scene-sovereign-core small {
  position: absolute;
  bottom: -25px;
  left: 50%;
  border: 1px solid rgba(105, 246, 223, .3);
  border-radius: 999px;
  padding: 4px 9px;
  background: #05090b;
  color: var(--story-aqua);
  font-family: var(--font-mono, monospace);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .12em;
  transform: translateX(-50%);
}

.scene-medicine-list li {
  inset: auto;
  width: clamp(150px, 31%, 196px);
  min-height: 66px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-color: rgba(229, 237, 239, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(17, 23, 27, .94), rgba(3, 6, 8, .96));
  color: #e7edef;
  opacity: .96;
}

.scene-medicine-list li::before { display: none; }
.scene-medicine-list li > b { color: var(--medicine-accent); font: 900 .54rem/1 var(--font-mono, monospace); letter-spacing: .08em; }
.scene-medicine-list li > span { display: grid; gap: 5px; color: #e7edef; font-size: clamp(.46rem, .62vw, .58rem); }
.scene-medicine-list li > span small { color: #7f8d94; font: 700 clamp(.38rem, .5vw, .46rem)/1.2 var(--font-mono, monospace); letter-spacing: .05em; text-transform: uppercase; }
.scene-medicine-list li:nth-child(1) { top: 17%; left: 5%; }
.scene-medicine-list li:nth-child(2) { top: 17%; right: 5%; }
.scene-medicine-list li:nth-child(3) { top: 44%; right: 3%; bottom: auto; }
.scene-medicine-list li:nth-child(4) { right: 5%; bottom: 12%; left: auto; }
.scene-medicine-list li:nth-child(5) { bottom: 12%; left: 5%; }
.scene-medicine-list li:nth-child(6) { top: 44%; left: 3%; }

.scene-pathway-caption { position: absolute; right: 24%; bottom: 4%; left: 24%; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; color: #8e9ba1; font: 800 .4rem/1 var(--font-mono, monospace); letter-spacing: .08em; }
.scene-pathway-caption i { height: 1px; background: linear-gradient(90deg, rgba(105, 246, 223, .25), #69f6df); }
.scene-pathway-caption strong { color: #69f6df; font-size: inherit; }

.route-signature-research.research-intelligence {
  top: 50%;
  right: clamp(34px, 5vw, 96px);
  width: clamp(390px, 39vw, 640px);
  height: clamp(410px, 56vh, 580px);
  padding: 28px;
  transform: translateY(-46%);
}

.research-intelligence::before { display: none; }

.research-visual-head,
.smile-film-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--story-line);
  font-family: var(--font-mono, monospace);
}

.research-visual-head span,
.smile-film-head span { color: var(--story-platinum); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.research-visual-head small,
.smile-film-head small { color: var(--story-aqua); font-size: .48rem; font-weight: 800; letter-spacing: .1em; }

.research-source-stack,
.research-output-stack {
  position: absolute;
  top: 30%;
  display: grid;
  gap: 13px;
}

.research-source-stack { left: 6%; }
.research-output-stack { right: 6%; }

.research-source-stack span,
.research-output-stack span {
  min-width: 128px;
  border: 1px solid rgba(229, 237, 239, .16);
  border-radius: 10px;
  padding: 11px 12px;
  background: rgba(2, 5, 7, .72);
  color: #bac4c9;
  font-family: var(--font-mono, monospace);
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.route-signature-research.research-intelligence .research-source-stack > span,
.route-signature-research.research-intelligence .research-output-stack > span {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  animation: none;
}

.research-output-stack span { border-color: rgba(105, 246, 223, .24); color: #dce4e7; }

.research-synthesis {
  position: absolute;
  top: 53%;
  left: 50%;
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(105, 246, 223, .32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105, 246, 223, .1), #030608 65%);
  box-shadow: 0 0 60px rgba(105, 246, 223, .09), inset 0 0 28px rgba(105, 246, 223, .07);
  transform: translate(-50%, -50%);
}

.research-synthesis img { width: 90%; filter: contrast(1.08); }
.research-synthesis i { position: absolute; inset: -15px; border: 1px dashed rgba(105, 246, 223, .26); border-radius: 50%; }
.research-flow-line { position: absolute; top: 53%; right: 19%; left: 19%; z-index: -1; height: 1px; background: linear-gradient(90deg, var(--story-cyan), var(--story-aqua), var(--story-gold)); }

.route-signature-guardian.guardian-vault {
  top: 50%;
  left: clamp(24px, 4vw, 72px);
  width: clamp(360px, 34vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-46%);
}

.guardian-vault::before,
.guardian-vault::after { display: none; }

.guardian-rim {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(216, 189, 112, .3);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(216, 189, 112, .32) 0 .5deg, transparent .5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 73%, #000 73.5% 76%, transparent 76.5%);
  mask: radial-gradient(circle, transparent 0 73%, #000 73.5% 76%, transparent 76.5%);
}

.guardian-core {
  position: absolute;
  inset: 25%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(236, 241, 243, .28);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 20%, rgba(236, 241, 243, .14), transparent 36%), #05080a;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .1);
}

.guardian-core img { width: 68%; max-height: 68%; object-fit: contain; }
.guardian-core span,
.guardian-core small,
.guardian-domain { font-family: var(--font-mono, monospace); font-weight: 900; letter-spacing: .09em; }
.guardian-core span { color: var(--story-platinum); font-size: .64rem; }
.guardian-core small { color: var(--story-gold); font-size: .4rem; }

.route-signature-guardian.guardian-vault .guardian-core > span {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  background: none;
  opacity: 1;
  transform: none;
}

.guardian-domain {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(216, 189, 112, .25);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(4, 7, 9, .92);
  color: #d8dfe2;
  font-size: .48rem;
}

.route-signature-guardian.guardian-vault > .guardian-domain {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  background: rgba(4, 7, 9, .92);
  opacity: 1;
  transform: none;
}
.route-signature-guardian.guardian-vault > .domain-permissions { top: 14%; left: 50%; transform: translateX(-50%); }
.route-signature-guardian.guardian-vault > .domain-reserve { top: 49%; right: 4%; }
.route-signature-guardian.guardian-vault > .domain-continuity { bottom: 13%; left: 50%; transform: translateX(-50%); }
.route-signature-guardian.guardian-vault > .domain-review { top: 49%; left: 4%; }

.route-signature-smile.smile-proof-film {
  top: 50%;
  right: clamp(34px, 5vw, 96px);
  width: clamp(400px, 39vw, 640px);
  height: clamp(440px, 59vh, 600px);
  padding: 26px;
  transform: translateY(-46%);
}

.smile-proof-film::before { display: none; }
.smile-film-head small { max-width: 27ch; text-align: right; }
.smile-proof-stack { position: relative; height: calc(100% - 96px); margin-top: 18px; }

.smile-proof {
  position: absolute;
  right: 3%;
  left: 3%;
  height: 31%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 5px 16px;
  border: 1px solid rgba(105, 246, 223, .2);
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(110deg, rgba(13, 21, 23, .97), rgba(3, 6, 8, .98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06);
}

.proof-consent { top: 0; transform: translateX(-4%); }
.proof-record { top: 34%; z-index: 2; }
.proof-share { top: 68%; transform: translateX(4%); }
.smile-proof small,
.smile-proof strong,
.smile-proof em { font-family: var(--font-mono, monospace); font-style: normal; }
.smile-proof small { color: var(--story-aqua); font-size: .45rem; font-weight: 800; letter-spacing: .09em; }
.smile-proof strong { grid-column: 1; align-self: center; color: var(--story-platinum); font-size: clamp(.62rem, .8vw, .78rem); letter-spacing: .06em; }
.smile-proof em { grid-column: 1; color: #8d9ca2; font-size: .42rem; font-weight: 800; }
.smile-proof > i { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(105, 246, 223, .35); border-radius: 50%; }
.smile-proof > i::before { color: var(--story-aqua); content: "✓"; font: 900 1rem/1 var(--font-mono, monospace); }
.smile-proof b { display: none; }

.smile-ledger { position: absolute; right: 28px; bottom: 18px; left: 28px; display: flex; align-items: center; gap: 8px; }
.smile-ledger span { position: static; width: 7px; height: 7px; border-radius: 50%; background: var(--story-aqua); box-shadow: 0 0 12px rgba(105, 246, 223, .4); }
.route-signature-smile.smile-proof-film .smile-ledger > span { position: static; inset: auto; width: 7px; height: 7px; transform: none; }
.smile-ledger::before { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(105, 246, 223, .1), rgba(105, 246, 223, .6)); content: ""; }
.smile-ledger small { color: #7f8d93; font: 800 .4rem/1.2 var(--font-mono, monospace); letter-spacing: .07em; }

.elita-visual { min-height: 620px; }
.elita-core { width: 230px; height: 280px; border-radius: 46% 46% 42% 42% / 35% 35% 18% 18%; background: radial-gradient(circle at 32% 18%, rgba(239, 244, 246, .16), transparent 36%), linear-gradient(150deg, #11171b, #030507 70%); }
.elita-presence-trigger { appearance: none; margin: 0; padding: 0; font: inherit; cursor: pointer; transition: border-color .24s ease, box-shadow .24s ease, translate .24s ease; }
.elita-presence-trigger:hover { border-color: rgba(105, 246, 223, .44); box-shadow: 0 34px 76px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .15); translate: 0 -2px; }
.elita-presence-trigger:focus-visible { outline: 2px solid var(--story-aqua); outline-offset: 7px; }
.elita-presence-trigger[aria-expanded="true"] { border-color: rgba(105, 246, 223, .58); }
.elita-avatar { position: relative; width: 152px; height: 176px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(229, 237, 239, .2); border-radius: 48% 48% 42% 42% / 34% 34% 24% 24%; background: radial-gradient(circle, rgba(105, 246, 223, .12), transparent 68%); }
.elita-avatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 24%; filter: contrast(1.05) brightness(1.03); transform: scale(1.04); }
.elita-avatar i { position: absolute; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--story-aqua), transparent); box-shadow: 0 0 12px rgba(105, 246, 223, .7); }
.elita-core > span { font-size: 1rem; }
.elita-core > small { font-size: .43rem; }

.app-future { grid-template-columns: 1fr; align-items: stretch; }
.app-device-rotation { position: relative; min-height: 520px; grid-column: 2; grid-row: 1 / span 2; overflow: hidden; border: 1px solid var(--story-line); border-radius: 36px; background: radial-gradient(circle at 50% 48%, rgba(105, 246, 223, .11), transparent 38%), linear-gradient(145deg, rgba(14, 20, 24, .93), rgba(2, 4, 6, .98)); box-shadow: inset 0 1px rgba(255, 255, 255, .08); }
.device-orbit { position: absolute; inset: 16%; border: 1px solid rgba(105, 246, 223, .17); border-radius: 50%; }
.device-orbit::before { position: absolute; inset: 16%; border: 1px dashed rgba(229, 237, 239, .12); border-radius: 50%; content: ""; }
.context-device { position: absolute; display: grid; align-content: center; justify-items: center; gap: 8px; border: 1px solid rgba(229, 237, 239, .2); background: linear-gradient(145deg, rgba(19, 25, 29, .97), rgba(3, 6, 8, .98)); box-shadow: 0 24px 52px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .09); color: var(--story-platinum); font-family: var(--font-mono, monospace); text-align: center; }
.context-device small { color: var(--story-aqua); font-size: .44rem; font-weight: 900; letter-spacing: .1em; }
.context-device strong { font-size: .58rem; letter-spacing: .06em; }
.context-device span { color: #95a3a9; font-size: .42rem; }
.device-phone { top: 8%; left: 50%; z-index: 4; width: 154px; height: 300px; border-radius: 28px; transform: translateX(-50%); }
.device-phone::before { width: 104px; height: 104px; display: grid; place-items: center; border: 1px solid rgba(105, 246, 223, .35); border-radius: 50%; background: radial-gradient(circle, rgba(105, 246, 223, .16), transparent 68%); content: ""; }
.device-phone strong { position: absolute; top: 121px; font-size: 1.7rem; }
.device-watch { top: 28%; left: 9%; width: 116px; height: 126px; border-radius: 34px; }
.device-watch i { width: 58px; height: 58px; border: 2px solid var(--story-aqua); border-radius: 50%; box-shadow: 0 0 20px rgba(105, 246, 223, .2); }
.device-tablet { right: 7%; bottom: 8%; width: 240px; height: 152px; border-radius: 20px; }
.device-tablet div { display: flex; align-items: end; gap: 6px; height: 42px; }
.device-tablet i { width: 7px; border-radius: 4px 4px 0 0; background: linear-gradient(var(--story-aqua), var(--story-cyan)); }
.device-tablet i:nth-child(1) { height: 46%; }.device-tablet i:nth-child(2) { height: 78%; }.device-tablet i:nth-child(3) { height: 100%; }
.device-scan { bottom: 10%; left: 8%; width: 128px; height: 128px; border-radius: 50%; }
.device-scan i { width: 54px; height: 54px; border: 1px solid rgba(105, 246, 223, .5); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 7px, rgba(105, 246, 223, .2) 8px 9px); }
.app-future-list { grid-column: 1; }
.app-future > p { grid-column: 1; }

@media (min-width: 861px) {
  body[data-page="circles"] main > .page-hero { align-items: flex-start; justify-items: start; padding-right: clamp(440px, 43vw, 740px); padding-left: clamp(48px, 7vw, 132px); }
  body[data-page="circles"] main > .page-hero .hero-copy { width: min(100%, 700px); align-items: flex-start; text-align: left; }
  body[data-page="circles"] main > .page-hero .hero-copy h1,
  body[data-page="circles"] main > .page-hero .hero-copy p { text-align: left; }
  body[data-page="circles"] main > .page-hero .cta-row { justify-content: flex-start; }
}

.route-signature-circles.circles-story { top: 50%; right: clamp(34px, 5vw, 96px); width: clamp(410px, 40vw, 650px); height: clamp(390px, 48vh, 470px); padding: 26px; transform: translateY(-46%); }
.circle-topic { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; border-bottom: 1px solid var(--story-line); padding-bottom: 18px; font-family: var(--font-mono, monospace); }
.circle-topic small { grid-column: 1; color: var(--story-aqua); font-size: .48rem; font-weight: 900; letter-spacing: .1em; }
.circle-topic strong { grid-column: 1; color: var(--story-platinum); font-size: .88rem; letter-spacing: .1em; }
.circle-topic span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #9ba7ad; font-size: .45rem; font-weight: 800; }
.circle-thread { display: grid; gap: 12px; padding: 24px 0; }
.circle-thread article { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(229, 237, 239, .12); border-radius: 14px; padding: 13px; background: rgba(2, 5, 7, .62); }
.circle-thread i { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(105, 246, 223, .28); border-radius: 50%; color: var(--story-aqua); font: 900 .5rem/1 var(--font-mono, monospace); font-style: normal; }
.circle-thread p { color: #c8d0d4; font-size: clamp(.64rem, .8vw, .78rem); line-height: 1.35; }
.circle-thread b { color: #89979d; font: 900 .48rem/1 var(--font-mono, monospace); }
.circle-guardrail { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--story-line); padding-top: 17px; }
.circle-guardrail span { border: 1px solid rgba(105, 246, 223, .2); border-radius: 999px; padding: 7px 9px; color: var(--story-aqua); font: 900 .4rem/1 var(--font-mono, monospace); letter-spacing: .07em; }
.circle-loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; }
.circle-loop li { min-width: 0; display: grid; align-content: start; gap: 10px; border: 1px solid var(--story-line); border-radius: 18px; padding: 18px; background: linear-gradient(145deg, rgba(14, 20, 23, .82), rgba(3, 5, 7, .92)); }
.circle-loop span { color: var(--story-aqua); font: 900 .55rem/1 var(--font-mono, monospace); }
.circle-loop strong { color: var(--story-platinum); }
.circle-loop small { color: var(--story-muted); font-size: .76rem; line-height: 1.45; }

@media (prefers-reduced-motion: no-preference) {
  .scene-spokes,
  .guardian-rim,
  .device-orbit { animation: story-orbit 34s linear infinite; }
  .research-synthesis i { animation: story-orbit 22s linear infinite reverse; }
  .elita-avatar i { animation: elita-scan 4.8s ease-in-out infinite; }
  .elita-avatar img { animation: elita-presence 9s ease-in-out infinite; }
  .smile-proof { animation: proof-breathe 7s ease-in-out infinite; }
  .proof-record { animation-delay: -2.3s; }
  .proof-share { animation-delay: -4.6s; }
  .context-device { animation: device-float 7s ease-in-out infinite; }
  .device-watch { animation-delay: -1.8s; }
  .device-tablet { animation-delay: -3.5s; }
  .device-scan { animation-delay: -5.2s; }
}

@keyframes story-orbit { to { transform: rotate(360deg); } }
@keyframes elita-scan { 0%, 100% { top: 16%; opacity: .25; } 50% { top: 82%; opacity: 1; } }
@keyframes elita-presence { 0%, 100% { transform: scale(1.04) translateY(0); } 50% { transform: scale(1.07) translateY(-1px); } }
@keyframes proof-breathe { 0%, 100% { filter: brightness(.88); } 50% { filter: brightness(1.12); } }
@keyframes device-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

body.motion-paused .scene-spokes,
body.motion-paused .guardian-rim,
body.motion-paused .research-synthesis i,
body.motion-paused .elita-avatar i,
body.motion-paused .elita-avatar img,
body.motion-paused .smile-proof,
body.motion-paused .context-device,
body.motion-paused .device-orbit { animation-play-state: paused !important; }

@media (max-width: 1100px) and (min-width: 861px) {
  .route-signature-research.research-intelligence,
  .route-signature-smile.smile-proof-film,
  .route-signature-circles.circles-story { right: 24px; width: 39vw; }
  .route-signature-guardian.guardian-vault { left: 24px; width: 38vw; }
  .research-source-stack span,
  .research-output-stack span { min-width: 94px; padding: 9px; font-size: .4rem; }
}

@media (max-width: 860px) {
  body[data-page="research"] main > .page-hero,
  body[data-page="guardian"] main > .page-hero,
  body[data-page="smile"] main > .page-hero,
  body[data-page="circles"] main > .page-hero { display: grid; min-height: auto; align-content: start; padding: calc(var(--tr4-mobile-header, 76px) + 48px) 14px 56px; }

  body[data-page="research"] main > .page-hero .hero-copy,
  body[data-page="guardian"] main > .page-hero .hero-copy,
  body[data-page="smile"] main > .page-hero .hero-copy,
  body[data-page="circles"] main > .page-hero .hero-copy { grid-row: 1; width: min(100%, 680px); justify-self: center; }

  .route-signature-research.research-intelligence,
  .route-signature-guardian.guardian-vault,
  .route-signature-smile.smile-proof-film,
  .route-signature-circles.circles-story {
    position: relative !important;
    inset: auto !important;
    z-index: 2;
    grid-row: 2;
    display: block;
    width: min(100%, 620px);
    max-width: none;
    height: 470px;
    aspect-ratio: auto;
    justify-self: center;
    margin: 40px 0 0;
    transform: none;
  }

  .route-signature-guardian.guardian-vault { width: min(100%, 520px); height: auto; aspect-ratio: 1; }
  .scene-protocols { top: 3%; right: 0; width: min(92vw, 720px); opacity: .46; }
  .scene-system-label { display: none; }
  .scene-pathway-caption { display: none; }
  .app-future { grid-template-columns: 1fr; }
  .app-device-rotation { grid-column: 1; grid-row: auto; width: 100%; min-height: 500px; }
  .app-future-list,
  .app-future > p { grid-column: 1; }
  .circle-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body[data-page="research"] main > .page-hero,
  body[data-page="guardian"] main > .page-hero,
  body[data-page="smile"] main > .page-hero,
  body[data-page="circles"] main > .page-hero {
    padding-top: calc(var(--tr4-mobile-header, 76px) + 26px);
    padding-bottom: 34px;
  }
  body[data-page="research"] main > .page-hero {
    padding-bottom: 12px;
  }
  body[data-page="research"] main > .page-hero .hero-copy,
  body[data-page="guardian"] main > .page-hero .hero-copy,
  body[data-page="smile"] main > .page-hero .hero-copy,
  body[data-page="circles"] main > .page-hero .hero-copy { gap: 14px; }
  body[data-page="research"] main > .page-hero .hero-copy h1,
  body[data-page="guardian"] main > .page-hero .hero-copy h1,
  body[data-page="smile"] main > .page-hero .hero-copy h1,
  body[data-page="circles"] main > .page-hero .hero-copy h1 { max-width: 12ch; font-size: clamp(2.05rem, 10vw, 2.85rem); line-height: .95; }
  body[data-page="research"] main > .page-hero .hero-copy .hero-line,
  body[data-page="guardian"] main > .page-hero .hero-copy .hero-line,
  body[data-page="smile"] main > .page-hero .hero-copy .hero-line,
  body[data-page="circles"] main > .page-hero .hero-copy .hero-line { font-size: clamp(.9rem, 4.4vw, 1.08rem); line-height: 1.18; }
  body[data-page="research"] main > .page-hero .hero-copy .lead,
  body[data-page="guardian"] main > .page-hero .hero-copy .lead,
  body[data-page="smile"] main > .page-hero .hero-copy .lead,
  body[data-page="circles"] main > .page-hero .hero-copy .lead { font-size: clamp(.88rem, 4vw, 1rem); line-height: 1.42; }
  body[data-page="research"] main > .page-hero .cta-row,
  body[data-page="guardian"] main > .page-hero .cta-row,
  body[data-page="smile"] main > .page-hero .cta-row,
  body[data-page="circles"] main > .page-hero .cta-row { gap: 9px; }
  body[data-page="research"] main > .page-hero .tr4-button,
  body[data-page="guardian"] main > .page-hero .tr4-button,
  body[data-page="smile"] main > .page-hero .tr4-button,
  body[data-page="circles"] main > .page-hero .tr4-button { min-height: 48px; padding-block: 10px; }
  .scene-protocols { top: 3%; right: -34%; width: 136vw; opacity: .18; }
  .scene-protocols-field { border-color: transparent; border-radius: 50%; background-size: 54px 54px, 54px 54px, auto, auto; box-shadow: none; }
  .scene-medicine-list,
  .scene-pathway-caption { display: none; }
  .scene-medicine-list li { width: 30px; min-height: 30px; }
  .scene-sovereign-core { width: 26%; }
  .route-signature-research.research-intelligence,
  .route-signature-smile.smile-proof-film,
  .route-signature-circles.circles-story { height: 290px; padding: 15px; border-radius: 24px; }
  .route-signature-research.research-intelligence,
  .route-signature-smile.smile-proof-film { height: 210px; padding: 15px; }
  .route-signature-research.research-intelligence { margin-top: 12px; }
  .route-signature-guardian.guardian-vault { width: min(100%, 210px); height: 210px; }
  .research-source-stack span,
  .research-output-stack span { min-width: 92px; padding: 9px 7px; font-size: .37rem; }
  .research-synthesis { width: 96px; height: 96px; }
  .research-visual-head,
  .smile-film-head { padding-bottom: 10px; }
  .research-source-stack,
  .research-output-stack { top: 31%; gap: 7px; }
  .smile-proof { padding: 12px; }
  .smile-proof strong { font-size: .52rem; }
  .smile-proof > i { width: 32px; height: 32px; }
  .smile-ledger { right: 18px; left: 18px; }
  .smile-ledger small { max-width: 24ch; }
  .guardian-domain { padding: 7px 8px; font-size: .38rem; }
  .domain-reserve { right: 1%; }.domain-review { left: 1%; }
  .elita-visual { min-height: 430px; margin: -25px -45px; transform: scale(.82); }
  .app-device-rotation { min-height: 440px; border-radius: 26px; }
  .device-phone { width: 132px; height: 266px; }
  .device-phone::before { width: 88px; height: 88px; }
  .device-phone strong { top: 108px; }
  .device-watch { left: 4%; width: 96px; height: 108px; }
  .device-tablet { right: 4%; width: 184px; height: 128px; }
  .device-scan { bottom: 8%; left: 4%; width: 104px; height: 104px; }
  .circle-thread article { grid-template-columns: 32px minmax(0, 1fr); }
  .circle-thread { gap: 7px; padding: 12px 0; }
  .circle-thread article { padding: 8px; }
  .circle-thread p { font-size: .58rem; }
  .circle-topic { padding-bottom: 10px; }
  .circle-guardrail { gap: 5px; padding-top: 10px; }
  .circle-thread b { display: none; }
  .circle-loop { grid-template-columns: 1fr; }
}

@media (max-width: 560px) and (max-height: 740px) {
  body[data-page="research"] main > .page-hero .cta-row,
  body[data-page="guardian"] main > .page-hero .cta-row,
  body[data-page="smile"] main > .page-hero .cta-row,
  body[data-page="circles"] main > .page-hero .cta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2px;
  }
  body[data-page="research"] main > .page-hero .tr4-button,
  body[data-page="guardian"] main > .page-hero .tr4-button,
  body[data-page="smile"] main > .page-hero .tr4-button,
  body[data-page="circles"] main > .page-hero .tr4-button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 7px;
    font-size: clamp(.46rem, 2.35vw, .58rem);
  }
  .route-signature-research.research-intelligence,
  .route-signature-guardian.guardian-vault,
  .route-signature-smile.smile-proof-film,
  .route-signature-circles.circles-story {
    width: min(100%, 360px);
    height: 160px;
    aspect-ratio: auto;
    margin-top: 18px;
    padding: 12px;
  }
  .research-visual-head,
  .smile-film-head { display: none; }
  .research-source-stack,
  .research-output-stack { top: 16px; bottom: 16px; justify-content: center; gap: 4px; }
  .research-source-stack span,
  .research-output-stack span { min-width: 86px; padding: 5px; font-size: .32rem; }
  .research-synthesis { top: 50%; width: 64px; height: 64px; }
  .smile-proof-stack { height: 136px; margin: 0; }
  .smile-proof { height: 30%; padding: 6px 9px; border-radius: 10px; }
  .smile-proof small,
  .smile-proof em { display: none; }
  .smile-proof strong { align-self: center; font-size: .42rem; }
  .smile-proof > i { width: 24px; height: 24px; }
  .smile-ledger { display: none; }
  .guardian-core { inset: 18%; }
  .guardian-core img { width: 52%; }
  .guardian-domain { padding: 5px 7px; font-size: .31rem; }
  .route-signature-guardian.guardian-vault > .domain-permissions { top: 5%; }
  .route-signature-guardian.guardian-vault > .domain-continuity { bottom: 5%; }
  .route-signature-guardian.guardian-vault > .domain-review,
  .route-signature-guardian.guardian-vault > .domain-reserve { top: 46%; }
  .circle-topic { padding-bottom: 6px; }
  .circle-thread { gap: 4px; padding: 7px 0; }
  .circle-thread article { min-height: 34px; padding: 4px 7px; }
  .circle-thread article:nth-child(3) { display: none; }
  .circle-thread i { width: 24px; height: 24px; }
  .circle-thread p { font-size: .48rem; }
  .circle-guardrail { padding-top: 6px; }
  .circle-guardrail span { padding: 4px 6px; font-size: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-spokes,
  .guardian-rim,
  .research-synthesis i,
  .elita-avatar i,
  .elita-avatar img,
  .smile-proof,
  .context-device,
  .device-orbit { animation: none !important; }
}

@media (forced-colors: active) {
  .research-intelligence,
  .guardian-vault,
  .smile-proof-film,
  .circles-story,
  .app-device-rotation { border: 2px solid CanvasText; background: Canvas; }
}