/* The 3D tour, and a readable base for people with tremor, low vision or fatigue. */
:root{--ink:#143a3c;--muted:#465e5d;--line:#d9dcd3;--card:#fffdf9f5;--shadow:0 34px 80px -38px #183e4059,0 8px 24px -14px #183e401f}
html{scroll-padding-top:96px}
body{font-size:18px;line-height:1.6}
p{text-wrap:pretty}
.eyebrow{font-size:14px;letter-spacing:.08em;font-weight:600;line-height:1.5}
.small-label{font-size:14px;letter-spacing:.04em}
.button{font-size:16px;min-height:58px;border-radius:999px;padding:16px 26px;gap:20px;font-weight:600}
.button svg{width:21px;height:21px;flex:none}
.button-quiet{background:#fffdf9d9;color:var(--ink);border:1px solid #c4cfc7;backdrop-filter:blur(10px)}
.button-quiet:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

.site-header{position:sticky;top:0;height:84px;background:#f7f4efe0;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
body[data-page="home"] .site-header{position:fixed;left:0;right:0;background:#fbf7f0b8;border-color:#ffffff66}
.desktop-nav a{font-size:16px;min-height:44px;display:inline-flex;align-items:center}
.header-contact{font-size:16px;min-height:48px}
.language summary{font-size:15px}
.language-options a{font-size:16px;padding-block:10px}
.site-footer,.footer-links a,.footer-bottom{font-size:16px}
.footer-links a,.footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
.footer-bottom .motion-toggle{min-height:44px;font-size:16px}
.brand{min-height:44px;display:inline-flex;align-items:center}
.footer-disclaimer{font-size:16px;line-height:1.6}
.section-intro,.hero-intro,.large-copy{font-size:20px;line-height:1.6;color:var(--muted)}
.audience-card p,.step p,.principle-grid p,.paper p,.team-card p,.report-row p,.today-card li,.faq-item p,.legal-document p{font-size:18px;line-height:1.65}
.section-note,.report-note,.contact-note{font-size:16px;line-height:1.6}
.subhero .hero-intro{font-size:20px;line-height:1.55;color:#34514f;max-width:540px}
body[data-page]:not([data-page="home"]) main p:not(.eyebrow,.hero-intro,.large-copy,.section-intro){font-size:17px;line-height:1.6}
body main p.large-copy{font-size:20px!important}
.site-footer .footer-brand p{font-size:16px}
main .lab-content p.science-caveat{font-size:16px!important}
.patient-intro{padding-bottom:90px}
.faq-item summary{font-size:21px;line-height:1.35;padding-block:22px;min-height:64px}
.text-link{font-size:17px;font-weight:600;min-height:44px;align-items:center}

.journey{position:relative;isolation:isolate;background:#fbf7f0}
.journey-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:linear-gradient(#fcf8f1,#f4efe6)}
.journey-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.journey-ready .journey-stage canvas{opacity:1}
.journey-fallback .journey-stage canvas{display:none}
.journey-poster{position:absolute;width:44%;height:86%;right:7%;top:9%;object-fit:contain;pointer-events:none;transition:opacity .7s ease}
.journey-ready .journey-poster{opacity:0}
.journey-steps{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh;pointer-events:none}
.journey-step{min-height:150vh;min-height:150svh;display:flex;align-items:center;padding:110px 0 60px}
.journey-step a,.journey-step button,.journey-hero-copy h1,.journey-hero-copy p{pointer-events:auto}
.journey-step:focus{outline:0}
.journey-hero{min-height:100vh;min-height:100svh;position:relative;padding:120px 0 92px}
.journey-hero-copy{max-width:1360px}
.journey-hero .eyebrow{color:var(--teal);margin-bottom:22px}
.journey-hero h1{margin:0;max-width:760px;font-size:clamp(46px,min(5.75vw,10.5vh),90px);line-height:1.05;letter-spacing:-.045em;font-weight:500}
.journey-hero h1 em,.journey-card h2 em,.journey-next h2 em{color:var(--teal);font-weight:400;letter-spacing:-.02em}
.journey-hero .hero-intro{max-width:520px;margin:26px 0 0;font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:#34514f}
.journey-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.journey-status{display:flex;align-items:baseline;gap:12px;margin:26px 0 0;font-size:16px;line-height:1.5;color:#34514f;font-weight:500}
.journey-status .status-dot{width:9px;height:9px;flex:none;transform:translateY(-1px)}
.journey-scroll{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:15px;font-weight:500;color:#34514f}
.journey-scroll i{display:block;width:26px;height:40px;border:2px solid currentColor;border-radius:14px;position:relative}
.journey-scroll i:after{content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:currentColor;animation:journey-wheel 2s ease-in-out infinite}
@keyframes journey-wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(13px);opacity:0}}

.journey-card{pointer-events:auto;max-width:520px;padding:38px 40px 36px;background:var(--card);border:1px solid #fff;border-radius:30px;box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.journey-card-wide{max-width:600px}
.journey-step-5 .journey-card{margin-left:auto}
.journey-card .eyebrow{color:var(--teal);margin-bottom:14px}
.journey-card h2{margin:0 0 16px;font-size:clamp(38px,3.7vw,54px);line-height:1.08;letter-spacing:-.035em;font-weight:500}
.journey-card>p{margin:0;font-size:19px;line-height:1.6;color:var(--muted)}
.journey-hint{display:inline-flex;gap:9px;align-items:center;margin-top:20px!important;padding:9px 15px;border-radius:999px;background:#ffe9e2;color:#8a3a2e!important;font-size:16px!important;font-weight:600}
.journey-hint:before{content:'';width:9px;height:9px;border-radius:50%;background:#f0705f;animation:journey-ping 2s ease-out infinite}
@keyframes journey-ping{0%{box-shadow:0 0 0 0 #f0705f66}100%{box-shadow:0 0 0 11px #f0705f00}}
.touch-hint{display:none}
@media(pointer:coarse){.touch-hint{display:inline}.pointer-hint{display:none}}

.journey-card .pathway-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px;border:0;padding:0}
.journey-card .pathway-tabs button{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 16px;border:1.5px solid #c9d3cc;border-radius:999px;background:#fff;color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.journey-card .pathway-tabs button:after{display:none}
@media(min-width:1201px){.journey-card [data-tabs] button{padding-inline:13px}}
.journey-card .pathway-tabs button:hover{border-color:var(--ink)}
.journey-card .pathway-tabs i{width:12px;height:12px;border-radius:50%;background:#007d80}
.journey-card .pathway-tabs button:nth-child(2) i{background:#a35fc4}
.journey-card .pathway-tabs button:nth-child(3) i{background:#f0705f}
.journey-card .pathway-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.journey-card .pathway-panel{min-height:0;padding:0}
.journey-card .pathway-panel h3{margin:0 0 7px;font-size:23px;line-height:1.25;letter-spacing:-.015em;font-weight:600;max-width:none}
.journey-card .pathway-panel p{margin:0;font-size:18px;line-height:1.6;color:var(--muted);max-width:none}

.journey-gut-note{margin:14px 0 0!important;padding:13px 15px;border-radius:14px;background:#e6f3ef;color:#20504c!important;font-size:17px!important;line-height:1.5!important}
.journey-card .pathway-tabs b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e2f2ee;color:var(--teal);font-size:14px}
.journey-card .pathway-tabs button[aria-selected="true"] b{background:#fff}
.stage-list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stage-list li{display:flex;gap:16px;padding:24px;background:#fffdf9;border:1px solid var(--line);border-radius:22px}
.stage-list span{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;font-weight:600}
.stage-list h3{margin:0 0 6px;font-size:23px;line-height:1.25}
.stage-list p{margin:0}
@media(max-width:800px){.stage-list{grid-template-columns:1fr}}
.journey-conditions{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;padding:0}
.journey-conditions li{padding:9px 15px;border-radius:999px;background:#ffe9e2;color:#7c3226;font-size:17px;font-weight:600}
.journey-card .science-caveat{margin:0 0 12px;padding:14px 0 0;border-top:1px solid var(--line);font-size:16px!important;line-height:1.55;color:#465e5d!important}

.journey-timeline{list-style:none;margin:20px 0 16px;padding:0}
.journey-timeline li{position:relative;padding:0 0 18px 34px}
.journey-timeline li:last-child{padding-bottom:0}
.journey-timeline li:before{content:'';position:absolute;left:6px;top:6px;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #9db2aa;z-index:1}
.journey-timeline li:after{content:'';position:absolute;left:12px;top:12px;bottom:-6px;width:2px;background:#d4dbd3}
.journey-timeline li:last-child:after{display:none}
.journey-timeline li.done:before{background:var(--teal);border-color:var(--teal)}
.journey-timeline li.current:before{background:#f0705f;border-color:#f0705f;box-shadow:0 0 0 5px #f0705f26}
.journey-timeline span{display:block;font-size:14px;font-weight:600;letter-spacing:.05em;color:#5a706d}
.journey-timeline li.current span{color:#b4442f}
.journey-timeline h3{margin:0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.journey-timeline p{margin:4px 0 0;font-size:17px;line-height:1.55;color:var(--muted)}
.journey-card .journey-note{padding-top:14px;border-top:1px solid var(--line);font-size:17px;font-weight:600;color:var(--ink)}

.journey-step-6{min-height:100vh;min-height:100svh;padding-bottom:46px}
.journey-next{pointer-events:auto;max-width:900px;margin:0 auto;text-align:center}
.journey-next .eyebrow{color:var(--teal);margin-bottom:12px}
.journey-next h2{margin:0 0 30px;font-size:clamp(40px,4.6vw,66px);line-height:1.06;letter-spacing:-.035em;font-weight:500}
.journey-doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;perspective:1100px;text-align:left}
.journey-door{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px 30px;background:var(--card);border:2px solid #fff;border-radius:28px;box-shadow:var(--shadow);transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out,border-color .2s,box-shadow .25s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.journey-door:hover{border-color:var(--teal);box-shadow:0 38px 90px -36px #007d8066}
.journey-door .line-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#e2f2ee;color:var(--teal)}
.journey-door .line-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7}
.door-patient .line-icon{background:#ffe9e2;color:#d65c49}
.journey-door .small-label{font-weight:600;color:#465e5d}
.journey-door h3{margin:0;font-size:27px;line-height:1.18;letter-spacing:-.02em;font-weight:500}
.journey-door p{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
.door-link{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:8px;font-size:17px;font-weight:600;color:var(--teal)}
.door-link svg{width:20px;height:20px;flex:none;transition:transform .2s}
.journey-door:hover .door-link svg{transform:translateX(4px)}
.journey-curious{margin:24px auto 0;max-width:620px;font-size:17px;line-height:1.55;color:#34514f}
.journey-curious a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.journey-spot{position:absolute;left:0;top:0;z-index:4;opacity:0;visibility:hidden;min-height:48px;padding:10px 14px 10px 16px;font-size:16px;font-weight:600;color:var(--ink);background:#fffdf9f0;border:1px solid #fff;box-shadow:0 14px 34px -14px #183e4059;transition:opacity .3s,visibility .3s,background .2s;will-change:transform;cursor:pointer}
.hotspots-live .journey-spot{opacity:1;visibility:visible}
.hotspots-tight .journey-spot{display:none}
.journey-spot .label-dot{width:10px;height:10px;background:#f0705f}
.journey-spot .label-dot.coral{background:#00a396}
.journey-spot .label-plus{font-size:21px;color:var(--teal);margin-left:6px}
.journey-stage .scene-info{position:absolute;z-index:6;left:auto;right:6%;bottom:9%;width:330px;max-width:calc(100% - 32px);padding:18px 20px;background:#fffdf9fa;border:1px solid #fff;border-radius:18px;box-shadow:var(--shadow);font-size:17px;line-height:1.5;color:var(--ink)}
.journey-motion{position:absolute;z-index:6;right:24px;top:98px;width:auto;min-height:44px;margin:0;padding:8px 14px;gap:8px;border-radius:999px;background:#fffdf9d9;border:1px solid #fff;box-shadow:0 8px 20px -12px #183e4040;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;backdrop-filter:blur(10px)}
.journey-motion:hover{background:#fff}
.journey-dots{position:absolute;z-index:5;right:14px;top:50%;translate:0 -50%;display:flex;flex-direction:column}
.journey-dots a{position:relative;display:grid;place-items:center;width:40px;height:40px;pointer-events:auto}
.journey-dots a:before{content:'';width:10px;height:10px;border-radius:50%;background:#183e4038;transition:transform .25s,background .25s}
.journey-dots a:hover:before{background:#183e4080}
.journey-dots a[aria-current]:before{background:var(--teal);transform:scale(1.5)}
.journey-dots span{position:absolute;right:36px;top:50%;translate:0 -50%;white-space:nowrap;padding:5px 11px;border-radius:999px;background:#183e40;color:#fff;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s}
.journey-dots a:hover span,.journey-dots a:focus-visible span{opacity:1}

.subhero .neural-scene,.subhero .neural-scene[data-visual="pair"]{background:transparent;border:0;border-radius:0}
.subhero{padding:34px 0 46px}
.subhero h1{letter-spacing:-.04em}
.stage-pill{font-size:15px;padding:9px 15px}
.lab-visual{background:linear-gradient(160deg,#fbf3ec,#eef3ef)}
.pathway-tabs button{font-size:16px}
.pathway-panel p{font-size:18px;color:var(--muted)}
.science-caveat{font-size:15px;line-height:1.55}
.neural-scene .organ-label{font-size:16px;font-weight:600}
.neural-scene .connection-label{font-size:15px;color:#465e5d}
.neural-scene .scene-hint{font-size:14px;color:#465e5d}
.neural-scene .scene-info{font-size:17px;line-height:1.5}

@media(max-width:1200px){.journey-hero h1{font-size:clamp(46px,5.9vw,70px)}.journey-card{max-width:470px}.journey-card-wide{max-width:490px}}
@media(max-width:1100px){.site-header{height:76px}.journey-motion{top:88px}}
@media(max-width:820px){
  .journey-dots{display:none}
  .journey-step{min-height:125vh;min-height:125svh;align-items:flex-end;padding:46vh 0 22px;padding-top:46svh}
  .journey-hero{align-items:flex-start;min-height:100vh;min-height:100svh;padding:98px 0 236px}
  .journey-hero .eyebrow{margin-bottom:12px;padding-right:54px}
  .journey-hero h1{font-size:clamp(42px,11.4vw,64px);max-width:none}
  .journey-hero .hero-intro{font-size:18px;margin-top:16px}
  .journey-actions{margin-top:18px;gap:8px;align-items:center}
  .journey-actions .button{min-height:52px;padding:12px 22px}
  .journey-actions .button-quiet{min-height:44px;padding:8px 2px;background:none;border:0;backdrop-filter:none;text-decoration:underline;text-underline-offset:4px;gap:10px}
  .journey-status{font-size:15px;margin-top:12px}
  .journey-scroll{display:none}
  .journey-poster{width:92%;height:29%;right:4%;top:auto;bottom:10px}
  .journey-card,.journey-card-wide{max-width:none;padding:24px 22px 22px;border-radius:24px}
  .journey-step-5 .journey-card{margin-left:0}
  .journey-card h2{font-size:clamp(32px,8.8vw,44px);margin-bottom:10px}
  .journey-card>p{font-size:18px}
  .journey-card .pathway-tabs{margin:16px 0 14px}
  .journey-card .pathway-tabs button{padding:8px 13px;font-size:15px;min-height:46px}
  .journey-card .pathway-panel h3{font-size:21px}
  .journey-timeline{margin:12px 0}
  .journey-timeline li{padding-bottom:11px}
  .journey-step-6{align-items:flex-end;padding-top:150px;padding-bottom:26px}
  .journey-next{text-align:left}
  .journey-next h2{margin-bottom:18px;font-size:clamp(34px,9.6vw,50px)}
  .journey-doors{grid-template-columns:1fr;gap:12px}
  .journey-door{padding:18px 20px 16px;border-radius:22px}
  .journey-door .line-icon{display:none}
  .journey-door p{display:none}
  .journey-door h3{font-size:23px}
  .journey-curious{margin-top:16px}
  .journey-motion{right:12px;top:84px;padding:0;width:44px;justify-content:center}
  .journey-motion [data-motion-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .journey-spot{font-size:15px;min-height:44px;padding:8px 11px 8px 13px}
  .journey-stage .scene-info{left:16px;right:16px;bottom:16px;width:auto}
}
@media(max-height:780px) and (min-width:821px){.journey-scroll{display:none}.journey-hero{padding:104px 0 36px}}
@media(max-width:600px){.section-intro,.hero-intro,.subhero .hero-intro,body main p.large-copy{font-size:18px!important}.subhero h1{font-size:clamp(38px,10.5vw,52px)}.faq-item summary{font-size:19px}}
@media(prefers-reduced-motion:reduce){.journey-stage canvas,.journey-poster{transition:none}.journey-scroll i:after,.journey-hint:before{animation:none}.journey-door{transition:none}}
.motion-paused .journey-scroll i:after,.motion-paused .journey-hint:before{animation-play-state:paused}

/* Patient example report and reading guide */
.report-layout{display:grid;gap:28px;max-width:960px}
.example-notice{border:2px solid #e2654f;border-radius:18px;padding:20px 24px;background:#fff4f1}.example-notice strong{display:block;font-size:19px;margin-bottom:6px;color:#9c3b26}.example-notice p{margin:0}
.how-grid dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:14px 0 0}.how-grid dt{font-weight:600;font-size:18px;margin-bottom:6px;color:var(--ink)}.how-grid dd{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.report-doc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:0 20px 60px #163d360f}
.report-head{display:grid;gap:18px;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:30px}.report-label{font-size:14px;letter-spacing:.12em;font-weight:700;color:#9c3b26}
.report-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0}.report-meta dt{font-size:14px;color:var(--muted);margin-bottom:3px}.report-meta dd{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.report-counts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}.report-counts li{font-size:16px;padding:9px 14px;border-radius:999px;background:#eef3ec;color:var(--ink)}.report-counts strong{font-size:18px;margin-right:6px}
.report-section{margin-bottom:34px}.report-section h2{font-size:28px;line-height:1.2;margin:0 0 12px}.report-two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.result-list{display:grid;gap:18px;margin-top:18px}
.result-card{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:#fff}
.result-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px}.result-head h3{font-size:22px;line-height:1.3;margin:0;flex:1 1 220px}.result-kind{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-basis:100%}
.result-badge{display:inline-block;font-size:15px;font-weight:600;padding:6px 12px;border-radius:999px;background:#e3f1ec;color:#135f55}.result-badge.is-above,.result-badge.is-below{background:#fdeae5;color:#9c3b26}.result-badge.is-missing{background:#efefef;color:#555}
.result-uncertain{display:inline-block;font-size:14px;color:#7a5413;background:#fbf1dd;padding:5px 10px;border-radius:999px}
.result-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:10px}.result-numbers span{display:block;font-size:14px;color:var(--muted)}.result-numbers strong{font-size:20px;color:var(--ink)}
.range-chart{width:100%;height:22px;display:block;margin:4px 0 14px}
.result-notes{display:grid;grid-template-columns:1fr;gap:18px;border-top:1px solid var(--line);padding-top:16px}.result-notes h4{font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px;color:var(--teal)}.result-notes p{margin:0;font-size:16px;line-height:1.6}
.report-group{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:0 18px}.report-group>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;padding:12px 0}.report-group .count{font-size:14px;background:#eef3ec;border-radius:999px;padding:3px 10px}
.report-table{width:100%;border-collapse:collapse;margin:4px 0 16px;font-size:16px}.report-table th,.report-table td{text-align:left;padding:11px 10px;border-top:1px solid var(--line);vertical-align:top}.report-table thead th{font-size:14px;color:var(--muted);border-top:0}.report-table tbody th{font-weight:500;overflow-wrap:anywhere}
.check-list.plain li{font-size:16px;line-height:1.6}
.report-links{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center}
.key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:16px 0 40px}.key-grid article{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}.key-grid h3{font-size:20px;margin:0 0 8px}.key-grid p{margin:0;font-size:16px;line-height:1.6}
.glossary-group{margin-bottom:40px}.glossary-group h2{font-size:28px;margin:0 0 16px}
.glossary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.glossary-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.glossary-card h3{font-size:21px;margin:0 0 8px}.glossary-card p{margin:0 0 10px;font-size:16px;line-height:1.6}.glossary-example span{display:block;font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-bottom:2px}.glossary-example span{color:var(--teal)}
.glossary-note{font-size:15px;color:var(--muted);margin:0 0 26px}
.explore-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:22px}.explore-card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px}.explore-card h3{font-size:22px;margin:0 0 8px}.explore-card p{font-size:16px;line-height:1.6;margin:0 0 12px;color:var(--muted)}.explore-card:hover,.explore-card:focus-visible{border-color:var(--teal)}
@media(max-width:800px){.report-doc{padding:24px 18px}.how-grid dl,.report-two,.result-notes,.result-numbers{grid-template-columns:1fr}.report-table thead{display:none}.report-table tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}.report-table th,.report-table td{border:0;padding:2px 0}.report-table tbody th{grid-column:1/-1}}

/* Motion on the patient pages: the same reveal, keyframe and tilt mechanisms as the tour. */
.result-list,.key-grid,.glossary-grid,.explore-grid{perspective:1100px}
.result-card,.key-grid article,.glossary-card,.explore-card{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out,border-color .2s,box-shadow .25s,opacity .75s var(--reveal-delay,0ms)}
.result-card.will-reveal,.key-grid article.will-reveal,.glossary-card.will-reveal,.explore-card.will-reveal{transform:translateY(24px)}
.result-card.will-reveal.is-visible,.key-grid article.will-reveal.is-visible,.glossary-card.will-reveal.is-visible,.explore-card.will-reveal.is-visible{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.range-chart .range-band{transform-box:fill-box;transform-origin:center;transition:transform 1s cubic-bezier(.2,.8,.2,1) .25s}
.range-chart .range-dot{transform-box:view-box;transform:translateX(var(--to));transition:transform 1.4s cubic-bezier(.3,.9,.2,1) .45s}
.will-reveal .range-chart .range-band{transform:scaleX(.001)}.will-reveal .range-chart .range-dot{transform:translateX(var(--from))}
.will-reveal.is-visible .range-chart .range-band{transform:scaleX(1)}.will-reveal.is-visible .range-chart .range-dot{transform:translateX(var(--to))}
.glossary-card .glossary-example{transition:opacity .6s,transform .6s}
.glossary-card.will-reveal .glossary-example{opacity:0;transform:translateY(10px)}
.glossary-card.will-reveal.is-visible .glossary-example{opacity:1;transform:none;transition-delay:.35s}.glossary-card.will-reveal.is-visible 
.compare-demo{margin:22px 0 0;max-width:460px}.compare-demo svg{width:100%;height:28px;display:block}.compare-demo figcaption{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:4px;padding:0 2px}
.compare-label{transition:color .3s,font-weight .3s}.compare-label-0{animation:compare-below 9s linear infinite}.compare-label-1{animation:compare-within 9s linear infinite}.compare-label-2{animation:compare-above 9s linear infinite}
.compare-demo-dot{transform-box:view-box;animation:compare-dot 9s linear infinite}.compare-demo-dot circle{fill:#e2654f;animation:compare-colour 9s linear infinite}
@keyframes compare-dot{0%{transform:translateX(12px)}45%{transform:translateX(188px)}50%{transform:translateX(188px)}95%{transform:translateX(12px)}100%{transform:translateX(12px)}}
@keyframes compare-colour{0%,14%{fill:#e2654f}16%,29%{fill:#007d80}31%,64%{fill:#e2654f}66%,79%{fill:#007d80}81%,100%{fill:#e2654f}}
@keyframes compare-below{0%,14%{color:#9c3b26;font-weight:600}16%,79%{color:var(--muted);font-weight:400}81%,100%{color:#9c3b26;font-weight:600}}
@keyframes compare-within{0%,14%{color:var(--muted);font-weight:400}16%,29%{color:#135f55;font-weight:600}31%,64%{color:var(--muted);font-weight:400}66%,79%{color:#135f55;font-weight:600}81%,100%{color:var(--muted);font-weight:400}}
@keyframes compare-above{0%,29%{color:var(--muted);font-weight:400}31%,64%{color:#9c3b26;font-weight:600}66%,100%{color:var(--muted);font-weight:400}}
.key-grid article{display:flex;flex-direction:column}.key-art{width:100%;max-width:200px;height:auto;margin:0 0 16px;display:block;overflow:visible}
.key-art-share{max-width:120px}.key-art-share circle{fill:#d6dcd5}.key-art-share .share-hit{fill:#007d80;transform-box:fill-box;transform-origin:center;animation:share-pulse 3s ease-in-out infinite}.key-art-share .share-hit:last-of-type{animation-delay:1.5s}
@keyframes share-pulse{0%,100%{transform:scale(1);fill:#007d80}50%{transform:scale(1.9);fill:#00b3a4}}
.key-art-compare .compare-demo-dot circle{r:7}
.snapshot-wave{animation:snapshot-drift 6s linear infinite}@keyframes snapshot-drift{from{transform:translateX(0)}to{transform:translateX(-72px)}}
.snapshot-ring{transform-box:fill-box;transform-origin:center;animation:snapshot-ping 2.4s ease-out infinite}@keyframes snapshot-ping{0%{transform:scale(1);opacity:1}70%{transform:scale(1.6);opacity:.2}100%{transform:scale(1);opacity:1}}
.link-bars rect{transform-box:fill-box;transform-origin:bottom;animation:link-rise 5s ease-in-out infinite}.link-bars rect:last-child{animation-delay:.3s}@keyframes link-rise{0%,10%{transform:scaleY(.08)}35%,100%{transform:scaleY(1)}}
.link-arrow{stroke-dashoffset:0;animation:link-reach 5s ease-in-out infinite}@keyframes link-reach{0%,35%{opacity:0;transform:translateX(-14px)}55%{opacity:1;transform:translateX(0)}78%{opacity:.9;transform:translateX(0)}92%,100%{opacity:0;transform:translateX(-14px)}}
.link-person{animation:link-person 5s ease-in-out infinite}@keyframes link-person{0%,50%{opacity:.35}70%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){html:not(.motion-allowed) .will-reveal .range-chart .range-band,html:not(.motion-allowed) .will-reveal .range-chart .range-dot{transform:none}html:not(.motion-allowed) .will-reveal .range-chart .range-dot{transform:translateX(var(--to))}html:not(.motion-allowed) .glossary-card.will-reveal .glossary-example{opacity:1;transform:none}}

/* Brand: the transparent symbol beside the name as live text, in the logo's own teal and blue. */
.brand{gap:11px}
.brand-mark{width:40px;height:40px}
img.brand-mark{background:none;border-radius:0;aspect-ratio:1;object-fit:contain}
.wordmark,.brand .wordmark{font-size:29px;font-weight:700;letter-spacing:-.045em;line-height:1;color:#079489;display:inline-flex;align-items:baseline;transform:translateY(1px)}
.wordmark b{font-weight:700;color:#0a7fae}
.footer-brand .brand-mark{width:44px;height:44px}
.report-header .brand-mark{width:26px;height:26px}.report-header .wordmark{font-size:20px}
.brand-constellation .brand-mark{width:124px;height:124px}
.contact-brand .brand-mark{width:84px;height:84px}
@media(max-width:1200px){.wordmark,.brand .wordmark{font-size:27px}.brand-mark{width:36px;height:36px}}
@media(max-width:600px){.wordmark,.brand .wordmark{font-size:25px}.brand-mark{width:32px;height:32px}.brand{gap:9px}}
@media(max-width:360px){.wordmark,.brand .wordmark{font-size:23px}}

/* Storytelling text: headline words arrive one after another. Paused or reduced motion shows them at once. */
@keyframes word-in{from{opacity:0;transform:translateY(.55em) rotate(1.5deg)}to{opacity:1;transform:none}}
.words .w{display:inline-block;animation:word-in .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms + 120ms)}
.will-reveal .words .w,.words.will-reveal .w{animation-play-state:paused}
.is-visible .words .w,.words.is-visible .w{animation-play-state:running}
.chapter .words .w{animation:none}
.chapter.is-active .words .w{animation:word-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*50ms)}
.motion-paused .words .w,.motion-paused .chapter .words .w{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html:not(.motion-allowed) .words .w{animation-delay:0s}}

/* Storytelling sections: a 3D stage that stays in view while chapters scroll beside it and steer it. */
.narrative{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.narrative-stage{position:sticky;top:104px;height:min(calc(100vh - 128px),720px);display:flex;align-items:center}
.narrative-stage .neural-scene{width:100%;height:100%;border-radius:34px;background:radial-gradient(ellipse at 50% 42%,#edf1e8,#f7f4ef 72%);border:1px solid #e1e7db;box-shadow:0 30px 70px -40px #183e4040}
.narrative-stage .neural-static{padding:7%}
.story-dots{position:absolute;left:20px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;z-index:3}
.story-dots li{width:8px;height:8px;border-radius:50%;background:#183e4033;transition:transform .3s,background .3s}
.story-dots li.is-active{background:var(--teal);transform:scale(1.5)}
.narrative-chapters{display:flex;flex-direction:column;gap:14vh;padding:10vh 0 16vh}
.chapter{position:relative;padding:36px 40px 34px;background:var(--card);border:1px solid #fff;border-radius:30px;box-shadow:var(--shadow);transition:opacity .5s,transform .5s,border-color .4s}
.chapter .chapter-number{display:block;font-size:14px;letter-spacing:.08em;font-weight:600;color:var(--teal);margin-bottom:14px}
.chapter .small-label{display:block;font-size:15px;font-weight:600;color:#465e5d;margin-bottom:8px}
.chapter h3{font-size:clamp(28px,2.6vw,38px);line-height:1.12;letter-spacing:-.03em;margin:0 0 14px;font-weight:500;max-width:none}
.chapter p{margin:0;font-size:18px;line-height:1.6;color:var(--muted)}
.chapter.is-active{border-color:#bfe0d8}
.narrative-section .section-note{margin-top:0;padding-top:28px;border-top:1px solid var(--line)}
@media(min-width:821px){.narrative-chapters .chapter:not(.is-active){opacity:.5;transform:scale(.985)}}
@media(max-width:1200px){.narrative{gap:36px}.chapter{padding:30px 30px 28px}}
@media(max-width:820px){
  .narrative{display:block}
  .narrative-stage{position:sticky;top:76px;height:min(36vh,300px);z-index:2}
  .narrative-stage .neural-scene{border-radius:24px}
  .story-dots{left:auto;right:14px}
  .narrative-chapters{position:relative;z-index:1;gap:22px;padding:22px 0 26px}
  .chapter{padding:24px 22px 22px;border-radius:24px}
  .chapter h3{font-size:clamp(24px,6.4vw,30px)}
  .chapter p{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.chapter,.story-dots li{transition:none}}

/* The dark principles band: its note stays readable. */
.principle-section .section-note{color:#c7d6d0;border-color:#ffffff2e}

/* Line icons that draw themselves in when they come into view. */
.glyph{width:34px;height:34px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.glyph *{stroke-dasharray:1;stroke-dashoffset:1}
.reveal:not(.will-reveal) .glyph *,.is-visible .glyph *,.reveal:not(.will-reveal) .glyph *{animation:glyph-draw 1.3s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--g,0)*.14s + .25s)}
@keyframes glyph-draw{to{stroke-dashoffset:0}}
.motion-paused .glyph *{animation:none;stroke-dashoffset:0}
.principle-grid .glyph{width:34px;height:34px;color:var(--coral);margin-bottom:28px}

/* Roadmap: a wave drawn through the four milestones, a signal travelling along it, and a ring around where we are. */
.timeline{position:relative}
.timeline-path{position:absolute;left:0;right:0;top:0;width:100%;height:40px;overflow:visible;pointer-events:none}
.timeline-path path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.timeline-track{stroke:#c3cfc4}
.timeline-drawn{stroke:var(--teal);stroke-dasharray:1;stroke-dashoffset:1}
.timeline-pulse{stroke:#00c2b2;stroke-width:3.5;stroke-dasharray:.035 .965;stroke-dashoffset:1;opacity:0}
.timeline:not(.will-reveal) .timeline-drawn,.timeline.is-visible .timeline-drawn{animation:tl-draw 2.4s cubic-bezier(.4,0,.2,1) .2s forwards}
.timeline:not(.will-reveal) .timeline-pulse,.timeline.is-visible .timeline-pulse{animation:tl-pulse 5.5s linear 2.6s infinite}
@keyframes tl-draw{to{stroke-dashoffset:0}}
@keyframes tl-pulse{0%{stroke-dashoffset:1;opacity:0}4%{opacity:1}62%{stroke-dashoffset:.035;opacity:1}72%,100%{stroke-dashoffset:.035;opacity:0}}
.timeline .milestone-dot{transform:scale(0);transition:transform .55s cubic-bezier(.3,1.5,.4,1);transition-delay:calc(var(--i,0)*.55s + .45s)}
.timeline:not(.will-reveal) .milestone-dot,.timeline.is-visible .milestone-dot{transform:scale(1)}
.current .milestone-dot:after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--teal);animation:tl-ping 2.6s ease-out infinite 2.8s;opacity:0}
@keyframes tl-ping{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.motion-paused .timeline-drawn{stroke-dashoffset:0;animation:none}.motion-paused .timeline-pulse{display:none}.motion-paused .milestone-dot{transform:scale(1);transition:none}
@media(min-width:801px){.milestone-line:before{display:none}}
@media(max-width:800px){.timeline-path{display:none}.milestone-line:before{transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i,0)*.55s + .7s)}.timeline:not(.will-reveal) .milestone-line:before,.timeline.is-visible .milestone-line:before{transform:scaleX(1)}.motion-paused .milestone-line:before{transform:none;transition:none}}
@media(max-width:600px){.milestone-line:before{transform-origin:top;transform:scaleY(0)}.timeline:not(.will-reveal) .milestone-line:before,.timeline.is-visible .milestone-line:before{transform:scaleY(1)}}

/* The flow from a sample to a conversation: six nodes on one rail, signals travelling along it. */
.flow-section{background:#f3f2ec;border-block:1px solid #e3e5da}
.flow{position:relative;padding-top:6px}
.flow-rail{position:absolute;left:calc(100%/12);right:calc(100%/12);top:33px;height:2px;z-index:0}
.flow-track{position:absolute;inset:0;background:#cfd8cf;border-radius:2px}
.flow-drawn{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),#0a7fae);border-radius:2px;transform-origin:left;transform:scaleX(0)}
.flow:not(.will-reveal) .flow-drawn,.flow.is-visible .flow-drawn{animation:flow-draw 2.2s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes flow-draw{to{transform:scaleX(1)}}
.flow-particles i{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#00c2b2;box-shadow:0 0 0 4px #00c2b229;opacity:0}
.flow:not(.will-reveal) .flow-particles i,.flow.is-visible .flow-particles i{animation:flow-travel 7s linear infinite;animation-delay:calc(var(--p,0)*1.75s + 2.4s)}
@keyframes flow-travel{0%{left:0;opacity:0}4%{opacity:1}96%{opacity:1}100%{left:100%;opacity:0}}
@keyframes flow-travel-y{0%{top:0;opacity:0}4%{opacity:1}96%{opacity:1}100%{top:100%;opacity:0}}
.flow-nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative;z-index:1}
.flow-node{text-align:center;padding:0 4px}
.flow-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid #c3d2c9;margin:0 auto 20px;color:var(--teal);position:relative;transform:scale(.5);opacity:0;transition:transform .6s cubic-bezier(.3,1.5,.4,1),opacity .4s;transition-delay:calc(var(--i,0)*.32s + .4s)}
.flow:not(.will-reveal) .flow-icon,.flow.is-visible .flow-icon{transform:scale(1);opacity:1}
.flow-icon .glyph{width:28px;height:28px}
.flow-node-outer .flow-icon{border-style:dashed;color:#607372;background:#f3f2ec}
.flow-index{display:block;font-size:14px;letter-spacing:.08em;font-weight:600;color:var(--teal);margin-bottom:8px}
.flow-node h3{font-size:21px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2}
.flow-node p{font-size:16px;line-height:1.55}
.flow-section .section-note{margin-top:48px}
.motion-paused .flow-drawn{transform:none;animation:none}.motion-paused .flow-particles{display:none}.motion-paused .flow-icon{transform:none;opacity:1;transition:none}
@media(max-width:1000px){.flow-rail{display:none}.flow-nodes{grid-template-columns:repeat(3,1fr);gap:36px 18px}}
@media(max-width:600px){.flow{padding:0 0 0 0}.flow-rail{display:block;left:27px;right:auto;top:28px;bottom:28px;height:auto;width:2px}.flow-drawn{transform-origin:top;transform:scaleX(1) scaleY(0)}@keyframes flow-draw{to{transform:scaleX(1) scaleY(1)}}.flow-particles i{left:50%;top:0;margin:-4.5px 0 0 -4.5px}.flow:not(.will-reveal) .flow-particles i,.flow.is-visible .flow-particles i{animation-name:flow-travel-y}.flow-nodes{grid-template-columns:1fr;gap:30px}.flow-node{text-align:left;display:grid;grid-template-columns:56px 1fr;gap:4px 20px;align-items:start}.flow-icon{margin:0;grid-row:1/4}.flow-index{grid-column:2}.flow-node h3,.flow-node p{grid-column:2}.flow-node h3{margin-bottom:6px}.flow-section .section-note{margin-top:34px}}

/* Portal showcase: a device that stays in view while features are listed beside it; each feature has its own animated screen. */
.showcase-section{background:#e9eee4;border-block:1px solid #dbe2d6}
.showcase{display:grid;grid-template-columns:1.18fr .82fr;gap:60px;align-items:start}
.showcase-stage{position:sticky;top:104px;display:flex;flex-direction:column;align-items:center}
.device{position:relative;width:100%;border-radius:22px;background:#17393b;padding:12px 12px 14px;box-shadow:0 44px 90px -42px #0d2a2c99,0 12px 30px -18px #0d2a2c66}
.device-bar{display:flex;align-items:center;gap:7px;padding:2px 6px 12px}
.device-bar i{width:10px;height:10px;border-radius:50%;background:#ffffff2e}
.device-bar i:nth-child(1){background:#e2654f}.device-bar i:nth-child(2){background:#e8b84a}.device-bar i:nth-child(3){background:#5cc08a}
.device-address{margin-left:12px;flex:1;font-size:14px;color:#cfe3dc;background:#ffffff14;border-radius:8px;padding:5px 12px;letter-spacing:.01em}
.device-screens{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#f9f7f2;container-type:inline-size}
.screen{position:absolute;inset:0;margin:0;padding:0;opacity:0;visibility:hidden;transition:opacity .55s,visibility .55s;overflow:hidden;background:#f7f4ef}
.screen.is-active{opacity:1;visibility:visible}






/* feature list and controls */
.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feature{border-top:1px solid #c9d4cb}
.feature:last-child{border-bottom:1px solid #c9d4cb}
.feature>button{display:flex;align-items:center;gap:18px;width:100%;text-align:left;background:none;padding:18px 4px;font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.3;color:#52696a;transition:color .3s}
.feature>button:hover,.feature.is-active>button{color:var(--ink)}
.feature-index{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--teal);font-variant-numeric:tabular-nums;flex:none}
.feature-body{padding:0 4px 20px 46px}
.feature-body p{margin:0;font-size:17px;line-height:1.6}
.feature-progress{display:block;height:2px;background:#c9d4cb;margin-top:16px;border-radius:2px;overflow:hidden}
.feature-progress i{display:block;height:100%;background:var(--teal);transform-origin:left;transform:scaleX(0)}
[data-showcase].is-inview .feature.is-active .feature-progress i{animation:feature-progress 6.5s linear forwards}
[data-showcase].is-held .feature-progress i,.motion-paused .feature-progress i{animation-play-state:paused}
[data-showcase].is-manual .feature-progress,.motion-paused .feature-progress{display:none}
@keyframes feature-progress{to{transform:scaleX(1)}}
.showcase-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.showcase-arrow{width:46px;height:46px;border-radius:50%;border:1px solid #a7b9af;background:#fffdf9;display:grid;place-items:center;color:var(--ink);transition:border-color .2s,color .2s,transform .2s}
.showcase-arrow svg{width:20px;height:20px}.showcase-arrow[data-prev] svg{transform:scaleX(-1)}
.showcase-arrow:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-1px)}
.showcase-dots{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.showcase-dots li{width:8px;height:8px;border-radius:50%;background:#183e4033;transition:transform .3s,background .3s}
.showcase-dots li.is-active{background:var(--teal);transform:scale(1.5)}
.showcase-badge{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--muted)}
@media(max-width:1200px){.showcase{gap:36px}.feature>button{font-size:19px}}
@media(max-width:900px){.showcase{display:block}.showcase-stage{position:sticky;top:76px;z-index:2;background:#e9eee4;padding-bottom:8px}.device-screens{aspect-ratio:4/3}.feature-list{margin-top:14px}.feature>button{font-size:19px;padding:16px 2px}.feature-body{padding-left:40px}.showcase-badge{margin-top:10px}}
@media(max-width:600px){.device{padding:8px 8px 10px;border-radius:16px}.device-bar{padding:0 2px 8px}.device-screens{border-radius:10px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-allowed) html:not(.motion-allowed) .feature-progress{display:none}}
/* Showcase screens: fuller layouts. */




/* The portal photographs: each screen settles slowly while it is shown, then hands over with a crossfade. */
.screen{--zoom:1}.screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(calc(var(--zoom) * 1.035)) translateY(-.6%);transform-origin:50% 0}
.screen.is-active img{animation:screen-settle 7s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes screen-settle{from{transform:scale(calc(var(--zoom) * 1.035)) translateY(-.6%)}to{transform:scale(var(--zoom)) translateY(0)}}
.motion-paused .screen img,html:not(.motion-allowed) .screen img{animation:none;transform:scale(var(--zoom))}
@media(max-width:900px){.showcase-stage{position:static}.device{width:min(300px,76vw);margin:0 auto;border-radius:38px;padding:11px;background:#17393b;box-shadow:0 30px 70px -36px #0d2a2c99,inset 0 0 0 2px #2b5557}.device-bar{display:none}.device::before{content:'';position:absolute;top:11px;left:50%;width:96px;height:22px;margin-left:-48px;border-radius:0 0 14px 14px;background:#17393b;z-index:3}.device-screens{aspect-ratio:9/19.5;border-radius:28px}.screen img{object-position:top center;transform:scale(1.02) translateY(-.4%);transform-origin:50% 0}.screen.is-active img{animation:screen-settle-phone 7s cubic-bezier(.2,.6,.2,1) forwards}@keyframes screen-settle-phone{from{transform:scale(1.02) translateY(-.4%)}to{transform:scale(1) translateY(0)}}.motion-paused .screen img,html:not(.motion-allowed) .screen img{animation:none;transform:none}.showcase-badge{margin-top:14px}}

/* ---- 8 November 2026, night: the patient page shows rather than tells ---- */
/* An abstract report assembles itself beside "What we hope to make possible": bars settle against a reference band,
   a context line writes in, and a conversation mark floats beside it. Shapes only, so it shows no data and needs no translation. */
.promise-grid{align-items:center}
.promise-visual{position:relative;padding:12px 26px 26px 0}
.pv-card{position:relative;background:#fffdf9;border:1px solid #d9e0d4;border-radius:22px;padding:26px 26px 24px;box-shadow:0 34px 80px -44px #183e4059,0 10px 28px -18px #183e4022;transform:translateY(18px) rotate(-1.2deg);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .7s}
.reveal:not(.will-reveal) .pv-card,.is-visible .pv-card{transform:none;opacity:1}
.pv-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.pv-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#0a7fae);flex:none}
.pv-line{display:block;height:9px;border-radius:5px;background:#e3e8df;width:var(--w,60%);transform-origin:left;transform:scaleX(0)}
.reveal:not(.will-reveal) .pv-line,.is-visible .pv-line{animation:pv-write .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--d,0s))}
.pv-head .pv-line{height:11px}
.pv-chip{margin-left:auto;width:58px;height:20px;border-radius:999px;background:#e6f1ed;border:1px solid #c7ddd5;flex:none}
.pv-rows{display:grid;gap:14px}
.pv-row{display:grid;grid-template-columns:minmax(70px,.6fr) 1.4fr;gap:16px;align-items:center;opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.45s + var(--i,0)*.16s)}
.reveal:not(.will-reveal) .pv-row,.is-visible .pv-row{opacity:1;transform:none}
.pv-label{display:block;height:8px;border-radius:4px;background:#dfe5dc;width:var(--w,60%)}
.pv-track{position:relative;display:block;height:14px;border-radius:7px;background:#eef1ea;overflow:visible}
.pv-ref{position:absolute;top:2px;bottom:2px;left:var(--a);width:calc(var(--b) - var(--a));border-radius:5px;background:#d4e6df;border:1px dashed #9cc2b6}
.pv-bar{position:absolute;top:0;bottom:0;left:0;width:var(--v);border-radius:7px;background:linear-gradient(90deg,#0a7fae,var(--teal));transform-origin:left;transform:scaleX(0)}
.reveal:not(.will-reveal) .pv-bar,.is-visible .pv-bar{animation:pv-grow 1.4s cubic-bezier(.3,1.2,.3,1) forwards;animation-delay:calc(.7s + var(--i,0)*.18s)}
.pv-marker{position:absolute;top:50%;left:var(--v);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fffdf9;border:2px solid var(--teal);box-shadow:0 0 0 0 #007d8033;opacity:0}
.reveal:not(.will-reveal) .pv-marker,.is-visible .pv-marker{animation:pv-pop .5s cubic-bezier(.3,1.5,.4,1) forwards,pv-ring 3.2s ease-out infinite;animation-delay:calc(1.9s + var(--i,0)*.18s),calc(2.6s + var(--i,0)*.4s)}
.pv-row:nth-child(3) .pv-marker{border-color:var(--coral)}.pv-row:nth-child(3) .pv-bar{background:linear-gradient(90deg,#f0a89d,var(--coral))}
.pv-context{display:grid;gap:9px;margin-top:24px;padding-top:20px;border-top:1px solid #e6ebe3}
.pv-context .pv-line:nth-child(1){--d:1.9s}.pv-context .pv-line:nth-child(2){--d:2.15s}
.pv-tags{display:flex;gap:8px;margin-top:18px}
.pv-tag{display:block;height:24px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;transition-delay:2.5s}
.pv-tag.tone-ok{width:92px;background:#e3f1e8;border:1px solid #bfdcca}.pv-tag.tone-unsure{width:72px;background:#fbf3de;border:1px solid #ead9b0;transition-delay:2.65s}
.reveal:not(.will-reveal) .pv-tag,.is-visible .pv-tag{opacity:1;transform:none}
.pv-talk{position:absolute;right:0;bottom:4px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;box-shadow:0 18px 40px -16px #007d8080;opacity:0;transform:scale(.6)}
.pv-talk .glyph{width:30px;height:30px;color:#fff}
.pv-talk .glyph *{animation-delay:calc(var(--g,0)*.14s + 2.9s)!important}
.reveal:not(.will-reveal) .pv-talk,.is-visible .pv-talk{animation:pv-pop .6s cubic-bezier(.3,1.5,.4,1) 2.7s forwards,pv-float 5s ease-in-out 3.4s infinite}
@keyframes pv-write{to{transform:scaleX(1)}}
@keyframes pv-grow{to{transform:scaleX(1)}}
@keyframes pv-pop{to{opacity:1;transform:scale(1)}}
@keyframes pv-ring{0%{box-shadow:0 0 0 0 #007d8040}70%{box-shadow:0 0 0 12px #007d8000}100%{box-shadow:0 0 0 0 #007d8000}}
@keyframes pv-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1)}}

/* "What you can do today": three steps on a drawn line, each icon draws itself and gets its tick. */
.today-steps{margin-top:56px;background:#e9eee3;border:1px solid #d7e0d2;border-radius:22px;padding:34px 36px 30px}
.today-steps h3{display:flex;align-items:center;gap:14px;font-size:22px;margin:0 0 30px}
.today-steps h3 svg{width:30px;height:30px;stroke:var(--teal);stroke-width:1.2;stroke-linecap:round;flex:none}
.step-rail{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step-line,.step-drawn{position:absolute;left:calc(100%/6);right:calc(100%/6);top:29px;height:2px;border-radius:2px;background:#cbd6cb}
.step-drawn{background:linear-gradient(90deg,var(--teal),#0a7fae);transform-origin:left;transform:scaleX(0)}
.reveal:not(.will-reveal) .step-drawn,.is-visible .step-drawn{animation:flow-draw 1.8s cubic-bezier(.4,0,.2,1) .4s forwards}
.step-rail li{position:relative;z-index:1;text-align:center;padding:0 6px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.3s + var(--i,0)*.35s)}
.reveal:not(.will-reveal) .step-rail li,.is-visible .step-rail li{opacity:1;transform:none}
.step-mark{position:relative;display:grid;place-items:center;width:60px;height:60px;margin:0 auto 18px;border-radius:50%;background:#fffdf9;border:1.5px solid #c3d2c9;color:var(--teal)}
.step-mark .glyph{width:28px;height:28px}
.step-mark .glyph *{animation-delay:calc(var(--g,0)*.14s + .5s + var(--i,0)*.35s)!important}
.step-check{position:absolute;right:-6px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--teal);padding:5px;box-sizing:border-box;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;transform:scale(0)}
.step-check path{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.reveal:not(.will-reveal) .step-check,.is-visible .step-check{animation:pv-pop .45s cubic-bezier(.3,1.5,.4,1) forwards;animation-delay:calc(1.4s + var(--i,0)*.35s)}
.reveal:not(.will-reveal) .step-check path,.is-visible .step-check path{animation:glyph-draw .5s ease-out forwards;animation-delay:calc(1.7s + var(--i,0)*.35s)}
.step-rail p{margin:0;font-size:16px;line-height:1.55;color:#50685c}
.motion-paused .pv-card,.motion-paused .pv-row,.motion-paused .pv-tag,.motion-paused .step-rail li{opacity:1;transform:none;transition:none}
.motion-paused .pv-line,.motion-paused .pv-bar,.motion-paused .step-drawn{animation:none;transform:scaleX(1)}
.motion-paused .pv-marker,.motion-paused .pv-talk,.motion-paused .step-check{animation:none;opacity:1;transform:none}
.motion-paused .step-check path{animation:none;stroke-dashoffset:0}

/* "How this could help": the three aims sit on one rail; icons keep a small living motion so the band never reads as a wall of text. */
.principle-rail{position:relative;gap:48px}
.principle-track{position:absolute;left:calc(100%/6 - 24px);right:calc(100%/6 - 24px);top:30px;height:2px;z-index:0}
.principle-line{position:absolute;inset:0;background:#ffffff1f;border-radius:2px}
.principle-drawn{position:absolute;inset:0;background:linear-gradient(90deg,var(--coral),#ffd0c6);border-radius:2px;transform-origin:left;transform:scaleX(0)}
.reveal:not(.will-reveal) .principle-drawn,.is-visible .principle-drawn{animation:flow-draw 2s cubic-bezier(.4,0,.2,1) .3s forwards}
.principle-pulse i{position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px #ff9a8e33;opacity:0}
.reveal:not(.will-reveal) .principle-pulse i,.is-visible .principle-pulse i{animation:flow-travel 6.5s linear infinite;animation-delay:calc(var(--p,0)*3.25s + 2.3s)}
.principle-rail article{position:relative;z-index:1;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.2s + var(--i,0)*.3s)}
.principle-rail.reveal:not(.will-reveal) article,.principle-rail.is-visible article{opacity:1;transform:none}
.principle-index{position:absolute;right:0;top:-54px;font-family:var(--serif,Georgia),Georgia,serif;font-style:italic;font-size:44px;line-height:1;color:#ffffff14;pointer-events:none}
.principle-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#ffffff0d;border:1.5px solid #ffffff2b;margin-bottom:26px;color:var(--coral);transform:scale(.6);transition:transform .7s cubic-bezier(.3,1.5,.4,1);transition-delay:calc(.4s + var(--i,0)*.3s)}
.principle-rail.reveal:not(.will-reveal) .principle-icon,.principle-rail.is-visible .principle-icon{transform:scale(1)}
.principle-rail .glyph{margin:0;width:30px;height:30px}
.principle-rail .glyph *{animation-delay:calc(var(--g,0)*.14s + .7s + var(--i,0)*.3s)!important}
/* Living details: the eye looks around, the calendar gets written on, the trend line redraws. */
.is-visible .glyph-understand circle,.reveal:not(.will-reveal) .glyph-understand circle{animation:glyph-draw 1.3s cubic-bezier(.4,0,.2,1) forwards,eye-look 7s ease-in-out 3s infinite;transform-box:fill-box;transform-origin:center}
.is-visible .glyph-prepare path:last-child,.reveal:not(.will-reveal) .glyph-prepare path:last-child{animation:glyph-draw 1.3s cubic-bezier(.4,0,.2,1) forwards,glyph-rewrite 6s ease-in-out 3.5s infinite}
.is-visible .glyph-follow path:first-child,.reveal:not(.will-reveal) .glyph-follow path:first-child{animation:glyph-draw 1.3s cubic-bezier(.4,0,.2,1) forwards,glyph-rewrite 6s ease-in-out 4s infinite}
@keyframes eye-look{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,0)}45%{transform:translate(2px,-1px)}70%{transform:translate(0,1px)}}
@keyframes glyph-rewrite{0%,55%{stroke-dashoffset:0}70%{stroke-dashoffset:1}72%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.motion-paused .principle-rail article,.motion-paused .principle-icon{opacity:1;transform:none;transition:none}
.motion-paused .principle-drawn{animation:none;transform:scaleX(1)}
.motion-paused .principle-pulse i{animation:none}
@media(max-width:1000px){.principle-rail{gap:30px}.principle-track{left:calc(100%/6 - 18px);right:calc(100%/6 - 18px)}}
@media(max-width:800px){
  .promise-grid{grid-template-columns:1fr;gap:34px}
  .promise-visual{padding:0 22px 22px 0;max-width:460px}
  .today-steps{margin-top:40px;padding:26px 22px 22px}
  .today-steps h3{font-size:20px;margin-bottom:22px}
  .step-rail{grid-template-columns:1fr;gap:22px}
  .step-line,.step-drawn{left:29px;right:auto;top:30px;bottom:30px;height:auto;width:2px}
  .step-drawn{transform-origin:top;transform:scaleX(1) scaleY(0)}
  .reveal:not(.will-reveal) .step-drawn,.is-visible .step-drawn{animation-name:rail-draw-y}
  .step-rail li{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:center;text-align:left;padding:0}
  .step-mark{margin:0}
  .step-rail p{font-size:15px}
  .principle-rail{grid-template-columns:1fr;gap:26px;margin-top:34px}
  .principle-track{left:30px;right:auto;top:32px;bottom:32px;height:auto;width:2px}
  .principle-drawn{transform-origin:top;transform:scaleX(1) scaleY(0)}
  .reveal:not(.will-reveal) .principle-drawn,.is-visible .principle-drawn{animation-name:rail-draw-y}
  .principle-pulse i{left:50%;top:0;margin:-4px 0 0 -4px}
  .reveal:not(.will-reveal) .principle-pulse i,.is-visible .principle-pulse i{animation-name:flow-travel-y}
  .principle-rail article{display:grid;grid-template-columns:62px 1fr;gap:4px 18px;align-items:start}
  .principle-rail article .principle-icon{grid-row:1/3;margin:0}
  .principle-rail h3{margin:0 0 8px;align-self:end;padding-top:14px}
  .principle-rail p{grid-column:2}
  .principle-index{right:4px;top:4px;font-size:34px}
}
@keyframes rail-draw-y{to{transform:scaleX(1) scaleY(1)}}
@media(max-width:600px){
  .motion-paused .step-drawn,.motion-paused .principle-drawn{transform:none}
  .pv-card{padding:20px 18px 18px}.pv-rows{gap:11px}.pv-track{height:12px}.pv-talk{width:54px;height:54px}.pv-talk .glyph{width:26px;height:26px}
  /* The portal showcase at phone size: a smaller handset, tighter list, so the whole thing reads at arm's length. */
  .showcase-section .section-heading{margin-bottom:20px}
  .showcase-section .section-heading h2{font-size:clamp(30px,8.6vw,38px)}
  .showcase-section .section-intro{font-size:16px!important;line-height:1.55}
  .device{width:min(232px,60vw);padding:8px;border-radius:30px}
  .device::before{width:74px;height:17px;margin-left:-37px;top:8px;border-radius:0 0 11px 11px}
  .device-screens{border-radius:23px}
  .showcase-controls{margin-top:12px;gap:14px}
  .showcase-arrow{width:40px;height:40px}.showcase-arrow svg{width:18px;height:18px}
  .showcase-dots{gap:7px}.showcase-dots li{width:7px;height:7px}
  .showcase-badge{font-size:14px;margin-top:8px}
  .feature-list{margin-top:18px}
  .feature>button{font-size:17px;padding:12px 2px;gap:12px}
  .feature-index{font-size:14px}
  .feature-body{padding:0 2px 14px 32px}
  .feature-body p{font-size:15px;line-height:1.55}
  .feature-progress{margin-top:12px}
}

/* "How this could help": the rail joins the first icon to the last, passes behind solid discs, and the numerals sit clear of it. */
.principle-rail{--gap:48px;gap:var(--gap)}
.principle-track{left:31px;right:calc((100% - 2 * var(--gap)) / 3 - 31px)}
.principle-icon{background:#244e50;border-color:#ffffff33}
.principle-index{top:-30px;right:0;z-index:2;padding:0;background:none;font-size:38px}
.principle-rail article h3{margin-top:2px}
@media(max-width:1000px){.principle-rail{--gap:30px}}
@media(max-width:800px){.principle-rail{--gap:26px}.principle-track{left:30px;right:auto}.principle-index{top:4px;padding:0;background:none}}