:root{
  --bg:#050505;
  --fg:#f2f1ec;
  --muted:#8d8c87;
  --line:#272725;
  --panel:#0d0d0c;
  --cyan:#31a5b8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.shell{width:min(1500px,calc(100% - 48px));margin:0 auto}
header{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line)
}
.brand,nav,.mono,.eyebrow,.stat-label,.section-num,.caption,.role-grid dt,.next-label{
  font-family:"IBM Plex Mono",monospace;
}
.brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
nav{display:flex;gap:24px}
nav a{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
nav a:hover{color:var(--fg)}

.project-hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:72px;
  padding:52px 0 34px;align-items:end
}
.eyebrow{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px
}
.project-hero h1{
  margin:0;font-size:clamp(66px,9.2vw,136px);line-height:.82;
  letter-spacing:-.06em;font-weight:300
}
.project-hero h1 span{display:block;font-weight:500}
.hero-copy{
  padding-bottom:8px;max-width:520px;justify-self:end
}
.hero-copy h2{
  font-size:clamp(28px,3.3vw,48px);line-height:1;letter-spacing:-.035em;
  font-weight:300;margin:0 0 20px
}
.hero-copy p{
  color:#c9c8c2;font-size:18px;line-height:1.38;margin:0 0 26px
}
.role-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 28px;border-top:1px solid var(--line);padding-top:16px
}
.role-grid div{min-width:0}
.role-grid dt{
  margin:0 0 5px;font-size:8px;letter-spacing:.11em;color:var(--muted);text-transform:uppercase
}
.role-grid dd{margin:0;font-size:12px;line-height:1.35}

.hero-image{
  width:100%;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.hero-image img{width:100%;height:auto;display:block}
.brand-availability{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:28px 0;border-bottom:1px solid var(--line)
}
.client-mark,.store-marks{display:flex;align-items:center;gap:22px}
.brand-availability span{
  font:11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)
}
.roche-mark{
  display:block;width:126px;height:64px;object-fit:contain;
  filter:brightness(0) saturate(100%) invert(68%) sepia(58%) saturate(662%) hue-rotate(147deg) brightness(89%) contrast(90%)
}
.store-marks{margin-left:auto}
.store-badges{display:flex;align-items:center;gap:10px}
.store-badges img{display:block;width:auto;height:42px}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line)
}
.stat{padding:28px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat strong{
  display:block;font-size:clamp(42px,5vw,74px);font-weight:300;letter-spacing:-.05em;line-height:.9
}
.stat-star{display:inline-block;font-size:.48em;vertical-align:.2em;margin-left:.08em}
.stat-label{margin-top:8px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.section{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:48px;padding:86px 0;border-bottom:1px solid var(--line)
}
.section-num{
  font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
  position:sticky;top:28px;align-self:start
}
.section-content{max-width:1180px}
.section h2{
  margin:0 0 28px;font-size:clamp(42px,5.6vw,82px);line-height:.9;
  font-weight:300;letter-spacing:-.05em
}
.lede{
  font-size:clamp(23px,2.7vw,36px);line-height:1.14;letter-spacing:-.025em;
  max-width:950px;margin:0 0 46px;color:#d9d8d2
}
.copy-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 60px;
  margin-bottom:42px
}
.challenge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 42px}
.copy-grid h3,.feature-copy h3{
  font-size:17px;font-weight:400;margin:0 0 8px
}
.copy-grid p,.feature-copy p{
  font-size:15px;color:var(--muted);margin:0
}
.copy-grid p{line-height:1.48}
.approach-cards{gap:0;border:1px solid var(--line)}
.approach-cards>div{padding:0 24px 28px;border-right:1px solid var(--line)}
.approach-cards>div:last-child{border-right:0}
.approach-card-image{aspect-ratio:3/2;margin:0 -24px 26px;overflow:hidden;border-bottom:1px solid var(--line);background:#101314}
.approach-card-image img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(.98)}
.approach-card-zoom{position:relative;width:100%;height:100%}
.approach-card-zoom img{-webkit-user-drag:none;pointer-events:none}
.approach-card-image-wide,.approach-card-image-wide .diagram-pan-frame{background:#fff}
.approach-card-image-wide .approach-card-zoom{box-sizing:border-box;padding:24px;background:#fff}
.approach-card-image-wide img{object-fit:contain;background:#fff}
@media(max-width:560px){.approach-card-image-wide .approach-card-zoom{padding:14px}}
@media(max-width:900px){.approach-cards{grid-template-columns:1fr 1fr}.approach-cards>div:nth-child(2){border-right:0}.approach-cards>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:560px){.approach-cards{grid-template-columns:1fr}.approach-cards>div{border-right:0;border-bottom:1px solid var(--line)}.approach-cards>div:last-child{border-bottom:0}}
.feature-copy p{line-height:1.8}

/* Short narrative reveals embedded in the existing case-study flow. */
.case-reveal{margin:56px 0 10px;padding:30px;border:1px solid #315f67;background:#091113;display:grid;grid-template-columns:220px minmax(0,1fr);gap:42px;align-items:start}
.case-reveal-label,.device-before-label{font:8px/1.5 "IBM Plex Mono",monospace;letter-spacing:.12em;color:#4abed5}
.case-reveal-label{display:block;margin:3px 0 0}
.case-reveal h3{max-width:760px;margin:0 0 18px;font-size:clamp(25px,2.8vw,38px);line-height:1.05;font-weight:300;letter-spacing:-.025em}
.case-reveal-body{display:block;max-width:700px}
.case-reveal p{margin:0 0 14px;font-size:15px;line-height:1.6;color:#aaa9a4}
.case-reveal strong{display:block;margin-top:18px;padding-top:18px;border-top:1px solid #315f67;font-size:18px;line-height:1.3;font-weight:400;color:#f2f1ec}
.device-before{margin:0 0 22px;border:1px solid var(--line);background:#090a0a}
.device-before-label{padding:15px 18px;border-bottom:1px solid var(--line);color:#e45b59}
.device-before ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.device-before li{position:relative;min-height:150px;padding:24px 20px;border-right:1px solid var(--line)}
.device-before li:last-child{border-right:0}
.device-before li:not(:last-child)::after{content:"→";position:absolute;right:-8px;top:50%;z-index:2;color:#e45b59;font:14px/1 "IBM Plex Mono",monospace;background:#090a0a}
.device-before li span{display:block;margin-bottom:25px;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#e45b59}
.device-before li b{display:block;margin-bottom:8px;font-size:17px;line-height:1.2;font-weight:400}
.device-before li small{display:block;font-size:12px;line-height:1.45;color:#8d8c87}
.device-outcome{display:grid;grid-template-columns:220px 1fr;gap:42px;margin-top:22px;padding:30px;border:1px solid #315f67;background:#091113}
.device-outcome>span{font:8px/1.5 "IBM Plex Mono",monospace;letter-spacing:.11em;color:#4abed5}
.device-outcome h4{margin:0 0 10px;font-size:clamp(25px,2.8vw,38px);line-height:1.05;font-weight:300;letter-spacing:-.025em}
.device-outcome p{max-width:760px;margin:0;color:#aaa9a4;font-size:15px;line-height:1.6}
@media(max-width:800px){.case-reveal,.device-outcome{grid-template-columns:1fr;gap:28px}.device-before ol{grid-template-columns:1fr 1fr}.device-before li:nth-child(2){border-right:0}.device-before li:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:520px){.case-reveal{margin-top:48px;padding:24px}.case-reveal-label{margin-bottom:0}.device-before ol{grid-template-columns:1fr}.device-before li{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.device-before li:last-child{border-bottom:0}.device-before li:not(:last-child)::after{content:"↓";right:18px;top:auto;bottom:-8px}.device-outcome{padding:24px}}

.media-frame{
  background:#111;border:1px solid var(--line);overflow:hidden
}
.media-frame.light{background:#eee}
.media-frame img{display:block;width:100%;height:auto}

.process-grid{
  display:grid;grid-template-columns:1fr;gap:20px;margin-top:44px
}
.process-grid img{width:100%;height:auto;object-fit:contain}
.process-grid img[data-inline-zoom]{image-rendering:auto;-webkit-font-smoothing:antialiased}
.process-grid .flow-zoom{height:auto;min-height:0;transition:height .55s cubic-bezier(.16,1,.3,1),background-color .25s ease}
.process-grid .flow-zoom.is-zoomed{height:min(82vh,920px);background:#f5f7f8}
.process-grid .flow-zoom img{backface-visibility:hidden;transform-style:preserve-3d}
.process-item{margin:0}
.process-item figcaption{display:grid;grid-template-columns:minmax(180px,.35fr) 1fr;gap:28px;padding:15px 0 30px}
.process-item figcaption strong{font-size:17px;font-weight:400}
.process-item figcaption span{font-size:14px;line-height:1.5;color:var(--muted)}
.zoomable-media{position:relative;cursor:zoom-in;overflow:hidden;touch-action:none;isolation:isolate}
.zoomable-media::after{content:"CLICK, THEN SCROLL TO ZOOM";position:absolute;right:14px;bottom:14px;z-index:4;padding:8px 10px;background:rgba(5,5,5,.88);color:#f2f1ec;border:1px solid #555;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;pointer-events:none;transition:opacity .2s ease}
.zoomable-media.is-zoomed{cursor:grab}.zoomable-media.is-dragging{cursor:grabbing}.zoomable-media.is-zoomed::after{opacity:0}
.zoomable-media img{transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-drag:none;backface-visibility:hidden}
.zoom-controls{position:absolute;top:14px;right:14px;z-index:5;display:flex;gap:5px;opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.zoomable-media:hover .zoom-controls,.zoomable-media:focus-within .zoom-controls,.zoomable-media.is-zoomed .zoom-controls{opacity:1;transform:none;pointer-events:auto}
.zoom-control{width:34px;height:34px;border:1px solid #555;background:rgba(5,5,5,.9);color:#f2f1ec;font:15px/1 "IBM Plex Mono",monospace;cursor:pointer}.zoom-control:hover,.zoom-control:focus-visible{background:#f2f1ec;color:#050505;outline:none}
.zoomable-media:focus-visible{outline:2px solid #f2f1ec;outline-offset:3px}
.feature-video{position:relative;background:#080b0d;min-height:0!important;aspect-ratio:16/10;display:grid;place-items:center}
.feature-video video{display:block;width:100%;height:100%;object-fit:contain;background:#080b0d}
.feature-media .phone-video{
  width:56.25%;
  max-width:430px;
  box-sizing:border-box;
  min-height:0!important;
  margin-inline:auto;
}
.feature-media .phone-video video{
  position:absolute;
  inset:0;
  display:block;
  width:calc(100% - 12px);
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:50% 50%;
  margin-inline:6px;
  background:#050505;
  transform:translateZ(0)
}
.feature-media .iphone-frame{
  position:relative;
  padding:10px;
  box-sizing:border-box;
  border:1px solid #555;
  border-radius:52px;
  background:#050505;
  overflow:visible;
  box-shadow:0 28px 70px rgba(0,0,0,.55),inset 0 0 0 2px #161616
}
.feature-media .iphone-screen{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:147/320;
  box-sizing:border-box;
  border-radius:41px;
  background:#050505;
  overflow:hidden;
  isolation:isolate;
  -webkit-mask:none;
  mask:none;
  -webkit-clip-path:inset(0 round 41px);
  clip-path:inset(0 round 41px);
  transform:translateZ(0)
}
.journal-video-feature .iphone-screen{aspect-ratio:221/480}
.feature-media .iphone-frame::before{
  content:"";
  position:absolute;
  left:-5px;top:20%;
  width:3px;height:48px;
  border-radius:2px 0 0 2px;
  background:#3d3d3d;
  box-shadow:0 64px 0 #3d3d3d;
  pointer-events:none
}
/* The phone chrome is already captured in the source video. */
.feature-media .iphone-screen::after{display:none}
.feature-video::after{content:"MOTION / PRODUCT";position:absolute;left:12px;bottom:12px;padding:7px 9px;background:rgba(5,5,5,.82);color:#f2f1ec;border:1px solid #444;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;pointer-events:none}

.onboarding-feature{grid-template-columns:1fr;padding-bottom:72px}
.onboarding-feature .feature-copy{max-width:650px}
.onboarding-journey{margin-top:36px;border:1px solid var(--line);background:#07090a;overflow:hidden}
.journey-head{
  min-height:64px;padding:0 20px;display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:20px;
  border-bottom:1px solid var(--line);font:11px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase
}
.journey-head>span:last-child{color:var(--muted)}
.journey-step{color:var(--muted)}.journey-step b{color:#4abed5;font-weight:500}
.journey-head strong{font-weight:500;color:#f2f1ec}
.journey-stage{height:610px;position:relative;overflow:hidden;perspective:1300px;background:radial-gradient(circle at 50% 46%,rgba(74,190,213,.13),transparent 31%),linear-gradient(#050607,#090b0c)}
.journey-stage::before,.journey-stage::after{content:"";position:absolute;z-index:20;top:0;bottom:0;width:16%;pointer-events:none}
.journey-stage::before{left:0;background:linear-gradient(90deg,#07090a,transparent)}
.journey-stage::after{right:0;background:linear-gradient(-90deg,#07090a,transparent)}
.journey-card{
  --offset:0;position:absolute;z-index:calc(10 - var(--distance));left:50%;top:50%;width:260px;aspect-ratio:375/812;
  transform:translate(-50%,-50%) translateX(calc(var(--offset) * 205px)) rotateY(calc(var(--offset) * -8deg)) scale(calc(1 - var(--distance) * .1));
  opacity:calc(1 - var(--distance) * .21);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .65s ease,filter .65s ease;
  filter:brightness(calc(1 - var(--distance) * .16));border:1px solid #4c5152;border-radius:28px;overflow:hidden;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.62)
}
.journey-card.is-active{border-color:#4abed5;box-shadow:0 0 0 1px #4abed5,0 34px 90px rgba(0,0,0,.72)}
.journey-card img{display:block;width:100%;height:100%;object-fit:cover}
.journey-card:first-child{background:#4cc1d9}
.journey-card:first-child img{object-fit:contain}
.journey-card:first-child::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;background:#4cc1d9;pointer-events:none}
.journey-progress{height:2px;background:#202425}.journey-progress i{display:block;height:100%;width:calc(100% / 9);background:#4abed5;transform:translateX(calc(var(--journey-index,0) * 100%));transition:transform .9s cubic-bezier(.16,1,.3,1)}
.journey-nav{min-height:52px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 12px}
.journey-dots{display:flex;justify-content:center;gap:8px}.journey-dots i{width:5px;height:5px;border-radius:50%;background:#3d4344;transition:background .3s,transform .3s}.journey-dots i.is-active{background:#4abed5;transform:scale(1.5)}
.journey-control{width:36px;height:36px;border:1px solid #3b4142;background:#0b0d0e;color:#f2f1ec;font:17px/1 "IBM Plex Mono",monospace;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.journey-control:last-child{justify-self:end}.journey-control:hover,.journey-control:focus-visible{border-color:#4abed5;color:#4abed5;background:#111719;outline:none}

.feature-visual{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.feature.in .feature-visual,.feature-visual.in{clip-path:inset(0)}
.feature-visual img{transform:scale(1.045);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.feature.in .feature-visual img,.feature-visual.in img{transform:scale(1)}

.feature{
  display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:start;
  padding:56px 0;border-top:1px solid var(--line)
}
.feature:first-of-type{border-top:0;padding-top:0}
.feature-copy .tag{
  font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;margin-bottom:14px
}
.feature-copy h3{
  font-size:clamp(30px,3.4vw,50px);line-height:1.08;letter-spacing:-.04em;font-weight:300
}
.feature-media{min-width:0}
.feature-media .media-frame{min-height:320px}
.feature-media img{width:100%;height:auto}

.device-logic{border:1px solid var(--line);background:#080a0b;overflow:hidden}
.logic-key{height:52px;padding:0 18px;display:flex;align-items:center;justify-content:flex-end;gap:22px;border-bottom:1px solid var(--line);font:9px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.logic-key span{display:flex;align-items:center;gap:7px}.logic-key i{width:7px;height:7px;border-radius:50%;display:block}.key-user{background:#f2f1ec}.key-system{background:#4abed5}.key-recovery{background:#e45b59}
.logic-canvas{position:relative;min-width:1180px;height:560px;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px}
.logic-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.logic-lines path{fill:none;stroke-width:1.5;marker-end:url(#logic-arrow)}.logic-lines .logic-main{stroke:#4abed5;stroke-dasharray:8 7;animation:logicFlow 1.2s linear infinite}.logic-lines .logic-branch{stroke:#777;stroke-dasharray:4 6}.logic-lines .logic-recovery-line{stroke:#e45b59;stroke-dasharray:5 7;animation:logicFlow 1.6s linear infinite reverse}.logic-lines circle{fill:#050505;stroke:#4abed5;stroke-width:2}
@keyframes logicFlow{to{stroke-dashoffset:-30}}
.logic-node{position:absolute;width:172px;min-height:112px;padding:15px 16px;border:1px solid #3b3f40;background:#0e1112;box-shadow:0 16px 34px rgba(0,0,0,.28)}
.logic-node h4{margin:12px 0 6px;font-size:16px;line-height:1.05;font-weight:400}.logic-node p{margin:0;font-size:10px;line-height:1.42;color:var(--muted)}.logic-no{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--muted)}
.user-state{border-color:#646868}.system-state{border-color:#317886}.recovery-state{border-color:#823d3d}.success-state{border-color:#39927e;background:#0d1715}
.node-select{left:42px;top:56px}.node-mobile{left:275px;top:56px}.node-guide{left:275px;top:245px}.node-search{left:510px;top:56px}.node-verify{left:745px;top:56px}.node-success{left:978px;top:56px}.node-fail{left:745px;top:255px}.node-recover{left:978px;top:374px}.node-retry{left:510px;top:374px}
.logic-pulse{position:absolute;right:14px;top:14px;width:9px;height:9px;border-radius:50%;background:#4abed5;box-shadow:0 0 0 0 rgba(74,190,213,.5);animation:logicPulse 1.5s ease-out infinite}@keyframes logicPulse{70%{box-shadow:0 0 0 12px rgba(74,190,213,0)}100%{box-shadow:0 0 0 0 rgba(74,190,213,0)}}
.logic-caption{min-height:70px;padding:16px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px}.logic-caption strong{font-size:14px;font-weight:400}.logic-caption span{font-size:11px;line-height:1.45;color:var(--muted);max-width:470px}
.device-feature{grid-template-columns:1fr}.device-feature .feature-copy{max-width:650px}.device-feature .feature-media{overflow-x:auto}

.split-media{
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.activity-card{
  min-height:390px;background:#fff;border:1px solid #d8dad9;display:flex;align-items:center;justify-content:center;padding:30px
}
.activity-art{position:relative;display:inline-block;max-width:100%;max-height:340px;line-height:0}
.activity-card img{display:block;max-width:100%;max-height:340px;object-fit:contain}
.activity-live{position:absolute;inset:0;pointer-events:none;font-family:Arial,sans-serif;color:#444;line-height:1}
.activity-ring{
  position:absolute;left:5.45%;top:4.35%;width:38.8%;height:auto;transform:rotate(-90deg)
}
.activity-ring circle{fill:none;stroke-width:5.2}
.activity-ring-track{stroke:#d4eef3}
.activity-ring-progress{
  stroke:#27a895;stroke-linecap:butt;stroke-dasharray:276.46;stroke-dashoffset:276.46;
  transition:stroke-dashoffset 1.9s cubic-bezier(.22,.72,.18,1)
}
.activity-live.is-active .activity-ring-progress{stroke-dashoffset:138.23}
.activity-today-count,.activity-goal-count{position:absolute;text-align:center;font-weight:500;background:#fff}
.activity-today-count{
  left:13.1%;top:18.55%;width:22.8%;padding:.2% 0;font-size:clamp(13px,3.2vw,25px);letter-spacing:.08em
}
.activity-goal-count{
  left:38.1%;top:56.7%;width:24%;padding:1.5% 0;background:#2b9fb3;
  font-size:clamp(14px,3.7vw,30px);letter-spacing:.08em
}
@media (prefers-reduced-motion:reduce){.activity-ring-progress{transition:none}}

.art-strip{
  margin-top:38px;display:grid;gap:14px
}
.art-strip img{width:100%;display:block;background:#fff}

.quote{
  padding:76px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:150px 1fr;gap:48px
}
.quote blockquote{
  margin:0;font-size:clamp(30px,4vw,56px);line-height:1.06;letter-spacing:-.035em;font-weight:300;
  max-width:1100px
}
.quote cite{
  display:block;margin-top:24px;font-family:"IBM Plex Mono",monospace;
  font-size:9px;line-height:1.6;letter-spacing:.06em;color:var(--muted);font-style:normal;text-transform:uppercase
}
.next{
  padding:68px 0 78px;display:flex;justify-content:space-between;align-items:end
}
.next-label{font-size:9px;letter-spacing:.11em;color:var(--muted);text-transform:uppercase}
.next h2{
  margin:8px 0 0;font-size:clamp(54px,8vw,110px);line-height:.86;font-weight:300;letter-spacing:-.055em
}
.next .arrow{font-size:52px;font-weight:300}
.caption{padding:10px 0 0;font-size:8px;line-height:1.4;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}

@media(max-width:900px){
  .shell{width:min(100% - 28px,1500px)}
  .project-hero{grid-template-columns:1fr;gap:36px;padding:50px 0 40px}
  .hero-copy{justify-self:start}
  .stats{grid-template-columns:1fr}
  .stat,.stat:nth-child(2),.stat:last-child{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .section{grid-template-columns:1fr;gap:20px;padding:58px 0}
  .section-num{position:static}
  .copy-grid,.process-grid,.feature,.split-media{grid-template-columns:1fr}
  .journey-head{grid-template-columns:auto 1fr}.journey-head>span:last-child{display:none}
  .journey-stage{height:520px}.journey-card{width:220px;transform:translate(-50%,-50%) translateX(calc(var(--offset) * 150px)) rotateY(calc(var(--offset) * -7deg)) scale(calc(1 - var(--distance) * .12))}
  .device-logic{overflow-x:auto}.logic-key{justify-content:flex-start}.logic-caption{min-width:1050px}
  .quote{grid-template-columns:1fr}
  nav{gap:14px}
  .brand-availability,.client-mark,.store-marks{align-items:flex-start}
  .brand-availability{flex-direction:column}
  .store-marks{margin-left:0;flex-direction:column}
  .process-item figcaption{grid-template-columns:1fr;gap:7px}
}

/* Motion system */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.media-reveal{position:relative;overflow:hidden}
.media-reveal::after{
  content:"";position:absolute;inset:0;background:#050505;z-index:5;
  transform-origin:right center;transition:transform 1s cubic-bezier(.77,0,.18,1);
  pointer-events:none
}
.media-reveal.in::after{transform:scaleX(0)}
.motion-img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1);will-change:transform}
@media (hover:hover) and (pointer:fine){
  .card:hover .motion-img,.media-reveal:hover .motion-img{transform:scale(1.025)}
}
.float-img{animation:softFloat 7s ease-in-out infinite alternate}
@keyframes softFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .media-reveal::after{display:none}
  .motion-img,.float-img{animation:none!important;transition:none!important;transform:none!important}
  .feature-visual{clip-path:none!important;transition:none!important}
  .logic-lines path,.logic-pulse{animation:none!important}
}


/* Image motion v2 — stronger, still restrained */
.image-build{
  position:relative;
  overflow:hidden;
  transform-origin:center;
}
.image-build img{
  transform:scale(1.08) translateY(18px);
  opacity:.001;
  transition:
    transform 1.25s cubic-bezier(.16,1,.3,1),
    opacity .7s ease;
  will-change:transform,opacity;
}
.image-build.in img{
  transform:scale(1) translateY(0);
  opacity:1;
}
.image-build::before{
  content:"";
  position:absolute;
  inset:0;
  background:#f2f1ec;
  z-index:4;
  transform:translateX(0);
  transition:transform 1.05s cubic-bezier(.77,0,.18,1);
  pointer-events:none;
}
.image-build.dark::before{background:#050505}
.image-build.in::before{transform:translateX(101%)}

.image-slice{
  clip-path:inset(12% 0 12% 0);
  transition:clip-path 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.image-slice.in{clip-path:inset(0 0 0 0)}

.stagger-grid > *{
  opacity:0;
  transform:translateY(26px) scale(.985);
  transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.stagger-grid.in > *{opacity:1;transform:none}
.stagger-grid.in > *:nth-child(1){transition-delay:.02s}
.stagger-grid.in > *:nth-child(2){transition-delay:.10s}
.stagger-grid.in > *:nth-child(3){transition-delay:.18s}
.stagger-grid.in > *:nth-child(4){transition-delay:.26s}

@media (hover:hover) and (pointer:fine){
  .visual:hover img.project-hero-img{
    transform:scale(1.06) rotate(.25deg);
  }
  .media-frame:hover img,
  .media:hover img,
  .hero-image:hover img,
  .hero-img:hover img{
    transform:scale(1.035);
  }
}

[data-drift]{
  transition:transform .12s linear;
  will-change:transform;
}

@media (prefers-reduced-motion:reduce){
  .image-build img,
  .image-slice,
  .stagger-grid > *,
  [data-drift]{
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
    transition:none!important;
  }
  .image-build::before{display:none!important}
}


/* Complete source-media archive */
.source-media{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  margin-top:42px;
}
.source-media figure{
  grid-column:span 6;
  margin:0;
  border:1px solid var(--line);
  background:#0d0d0c;
  overflow:hidden;
}
.source-media figure.wide{grid-column:span 12}
.source-media figure.tall{grid-column:span 4}
.source-media img{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
}
.source-media figcaption{
  padding:10px 12px;
  font-family:"IBM Plex Mono",monospace;
  font-size:8px;
  letter-spacing:.06em;
  color:var(--muted);
  text-transform:uppercase;
  border-top:1px solid var(--line);
}
.source-video-note{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  line-height:1.55;
  color:var(--muted);
}
@media(max-width:900px){
  .source-media{grid-template-columns:1fr}
  .source-media figure,.source-media figure.wide,.source-media figure.tall{grid-column:auto}
}


/* Integrated project-media layouts */
.full-bleed-media{margin:38px 0 0;border:1px solid var(--line);overflow:hidden;background:#111}
.full-bleed-media img{display:block;width:100%;height:auto}
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px}
.media-triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.media-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.media-six{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.media-stack{display:grid;gap:14px;margin-top:38px}
.media-pair img,.media-triptych img,.media-quad img,.media-six img,.media-stack img{
  display:block;width:100%;height:100%;object-fit:cover;background:#fff
}
.phone-grid img{object-fit:contain;background:#050505}
.media-card{border:1px solid var(--line);overflow:hidden;background:#111}
.media-card img{display:block;width:100%;height:auto}
.media-caption{
  padding:9px 11px;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase
}
@media(max-width:900px){
 .media-pair,.media-triptych,.media-quad,.media-six{grid-template-columns:1fr}
}


/* ===== Curated image hierarchy + randomized motion ===== */
.media-hero-xl{margin-top:0}
.media-hero-xl img{width:100%;display:block;transform-origin:50% 50%;will-change:transform}
@keyframes roche-hero-hover-drift{
  0%{transform:scale(1.035) translate3d(0,0,0) rotate(0deg)}
  35%{transform:scale(1.065) translate3d(-.8%,.45%,0) rotate(-.18deg)}
  70%{transform:scale(1.055) translate3d(.65%,-.35%,0) rotate(.14deg)}
  100%{transform:scale(1.035) translate3d(0,0,0) rotate(0deg)}
}
@media (hover:hover) and (pointer:fine){
  .media-hero-xl:hover img{animation:roche-hero-hover-drift 5.5s cubic-bezier(.45,.05,.25,1) infinite}
}
@media (prefers-reduced-motion:reduce){
  .media-hero-xl:hover img{animation:none;transform:none}
}
.media-feature-xl{grid-column:1/-1}
.media-feature-xl img{width:100%;display:block}
.media-small{max-width:720px}
.media-mini{max-width:460px}
.media-center{margin-left:auto;margin-right:auto}
.media-narrow{max-width:820px}
.media-portrait-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.media-portrait-grid img{width:100%;height:auto;display:block}
.media-landscape-pair{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.media-landscape-pair.equal{grid-template-columns:1fr 1fr}
.media-gallery-asym{display:grid;grid-template-columns:1.4fr .6fr;gap:14px}
.media-gallery-asym .stack{display:grid;gap:14px}
.media-gallery-asym img{display:block;width:100%;height:100%;object-fit:cover}
.media-caption-inline{
  margin-top:8px;
  font-family:"IBM Plex Mono",monospace;
  font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)
}

/* animation primitives */
.fx{
  opacity:0;
  will-change:transform,opacity,clip-path,filter;
  transition:
    opacity .75s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1),
    clip-path 1.05s cubic-bezier(.16,1,.3,1),
    filter .9s ease;
}
.fx.in{opacity:1;transform:none;clip-path:inset(0);filter:none}
.fx-rise{transform:translateY(34px) scale(.985)}
.fx-left{transform:translateX(-34px) scale(.99)}
.fx-right{transform:translateX(34px) scale(.99)}
.fx-zoom{transform:scale(1.08);filter:blur(4px)}
.fx-mask-x{clip-path:inset(0 100% 0 0)}
.fx-mask-y{clip-path:inset(100% 0 0 0)}
.fx-tilt-a{transform:translateY(22px) rotate(-1.4deg) scale(1.01)}
.fx-tilt-b{transform:translateY(22px) rotate(1.4deg) scale(1.01)}
.fx-scan{filter:contrast(.7) brightness(.85);transform:scale(1.03)}
.fx-scan::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);
  opacity:.7;pointer-events:none
}

/* reveal timing for grouped visuals */
.fx-group > *{transition-delay:var(--delay,0ms)}
.fx-group > *:nth-child(1){--delay:0ms}
.fx-group > *:nth-child(2){--delay:90ms}
.fx-group > *:nth-child(3){--delay:180ms}
.fx-group > *:nth-child(4){--delay:270ms}
.fx-group > *:nth-child(5){--delay:360ms}
.fx-group > *:nth-child(6){--delay:450ms}

/* image hover states */
@media (hover:hover) and (pointer:fine){
  .media-card:hover img,
  .media-frame:hover img,
  .work-card:hover img,
  .card:hover img{
    transform:scale(1.028);
  }
}

/* ===== Cursor system ===== */
@media (pointer:fine){
  body, a, button { cursor:none; }

  #sw-cursor{
    position:fixed;left:0;top:0;z-index:99999;
    width:12px;height:12px;
    transform:translate(-50%,-50%);
    pointer-events:none;
    mix-blend-mode:difference;
    transition:width .16s ease,height .16s ease,border-radius .16s ease,border-color .16s ease;
  }
  #sw-cursor .core{
    position:absolute;inset:3px;background:#fff;
  }
  #sw-cursor .ring{
    position:absolute;inset:0;border:1px solid rgba(255,255,255,.85);
  }
  #sw-cursor .bracket{
    position:absolute;width:7px;height:7px;border-color:#fff;border-style:solid;opacity:0;
    transition:opacity .12s ease
  }
  #sw-cursor .b1{left:-3px;top:-3px;border-width:1px 0 0 1px}
  #sw-cursor .b2{right:-3px;top:-3px;border-width:1px 1px 0 0}
  #sw-cursor .b3{left:-3px;bottom:-3px;border-width:0 0 1px 1px}
  #sw-cursor .b4{right:-3px;bottom:-3px;border-width:0 1px 1px 0}

  #sw-cursor.state-link{width:20px;height:20px;border-radius:50%}
  #sw-cursor.state-link .core{inset:8px}
  #sw-cursor.state-media{width:34px;height:34px}
  #sw-cursor.state-media .ring{opacity:0}
  #sw-cursor.state-media .bracket{opacity:1}
  #sw-cursor.state-project{width:40px;height:40px}
  #sw-cursor.state-project .ring{border-radius:50%}
  #sw-cursor.state-project .core{inset:17px}

  #sw-cursor-label{
    position:fixed;left:0;top:0;z-index:99999;pointer-events:none;
    transform:translate(18px,14px);
    font-family:"IBM Plex Mono",monospace;
    font-size:8px;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;mix-blend-mode:difference;opacity:0;
    transition:opacity .12s ease;white-space:nowrap
  }
  #sw-cursor-label.show{opacity:.55}

  .sw-trail{
    position:fixed;left:0;top:0;z-index:99998;
    width:4px;height:4px;background:#fff;border-radius:50%;
    pointer-events:none;mix-blend-mode:difference;
    transform:translate(-50%,-50%);
    opacity:.18
  }
}

@media(max-width:900px){
  .media-portrait-grid{grid-template-columns:repeat(2,1fr)}
  .media-landscape-pair,.media-gallery-asym{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .fx{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
  .sw-trail{display:none!important}
}

/* Activity story */
.activity-feature{display:block;padding:88px 0 96px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.activity-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:70px;align-items:end;margin-bottom:46px}
.activity-heading .feature-copy{max-width:none}
.activity-heading .feature-copy h3{max-width:720px;font-size:clamp(46px,6vw,88px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 0}
.activity-intro{max-width:560px;margin:0;color:#aaa9a3;font-size:17px;line-height:1.55}
.activity-story{position:relative;border:1px solid var(--line);background:#090a0a;overflow:hidden}
.activity-story::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(74,190,213,.045) 1px,transparent 1px),linear-gradient(rgba(74,190,213,.035) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
.activity-metric{position:relative;z-index:2;display:grid;grid-template-columns:210px minmax(220px,1fr);gap:28px;align-items:center;width:500px;min-height:246px;margin:46px 0 0 46px;padding:24px 30px;border:1px solid #26363a;background:rgba(8,14,15,.92)}
.activity-metric-ring{--activity-progress:0deg;display:grid;place-items:center;width:168px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#4abed5 0 var(--activity-progress),#17353b var(--activity-progress) 360deg);transition:background 1.8s ease}
.activity-metric-ring::before{content:"";grid-area:1/1;width:126px;aspect-ratio:1;border-radius:50%;background:#0a0d0e;border:1px solid #31555d}
.activity-metric-ring div{grid-area:1/1;position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.activity-metric-ring span,.activity-metric-copy span{font:9px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.12em;color:#858b89}
.activity-metric-ring strong{font-size:42px;font-weight:300;letter-spacing:-.04em;margin:7px 0 4px}
.activity-metric-ring small{font:8px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:#4abed5}
.activity-metric-copy{display:flex;flex-direction:column;align-items:flex-start}
.activity-metric-copy strong{font-size:27px;font-weight:300;margin:7px 0 18px}.activity-metric-copy strong b{font-weight:400}
.activity-metric-copy small{color:#858b89;font-size:12px;line-height:1.45}
.activity-screen-stage{position:relative;z-index:1;min-height:790px;margin-top:-205px;padding:52px 38px 42px 520px;display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:18px;align-items:end}
.activity-screen{position:relative;margin:0;background:#101313;border:1px solid #303433;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.activity-screen img{display:block;width:100%;height:auto}
.activity-screen figcaption{padding:13px 12px;font:9px/1.3 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#a7a7a1;border-top:1px solid #303433;background:#0b0c0c}
.activity-screen figcaption span{color:#4abed5;margin-right:8px}
.activity-screen-main{transform:translateY(-54px);border-color:#4abed5;box-shadow:0 28px 80px rgba(0,0,0,.55)}
.activity-screen-intro{transform:translateY(58px)}.activity-screen-permission{transform:translateY(12px)}.activity-screen-goal{transform:translateY(14px)}.activity-screen-recovery{transform:translateY(62px)}
.activity-feature.in .activity-screen{animation:activityScreenIn .9s cubic-bezier(.16,1,.3,1) both}.activity-feature.in .activity-screen:nth-child(2){animation-delay:.08s}.activity-feature.in .activity-screen:nth-child(3){animation-delay:.16s}.activity-feature.in .activity-screen:nth-child(4){animation-delay:.24s}.activity-feature.in .activity-screen:nth-child(5){animation-delay:.32s}
@keyframes activityScreenIn{from{opacity:0;transform:translateY(110px) scale(.96)}}
/* Retained for a possible future restore; switch display back to grid to show. */
.activity-principles{position:relative;z-index:2;display:none;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#0b0c0c}
.activity-principles>div{min-height:170px;padding:27px 30px;border-right:1px solid var(--line)}.activity-principles>div:last-child{border-right:0}
.activity-principles span{font:9px/1.3 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#4abed5}.activity-principles strong{display:block;font-size:19px;font-weight:400;margin:10px 0 8px}.activity-principles p{margin:0;color:#8d8c87;font-size:13px;line-height:1.5}

@media(max-width:1180px){
  .activity-screen-stage{padding-left:360px;grid-template-columns:repeat(5,minmax(145px,1fr));overflow-x:auto}.activity-metric{width:360px;grid-template-columns:130px 1fr;padding:20px}.activity-metric-ring{width:124px}.activity-metric-ring::before{width:92px}.activity-metric-ring strong{font-size:30px}
}
@media(max-width:760px){
  .activity-feature{padding:58px 0}.activity-heading{grid-template-columns:1fr;gap:22px}.activity-heading .feature-copy h3{font-size:50px}.activity-intro{font-size:15px}
  .activity-metric{width:calc(100% - 32px);margin:16px;grid-template-columns:120px 1fr;gap:18px}.activity-screen-stage{min-height:620px;margin-top:0;padding:30px 16px 55px;grid-template-columns:repeat(5,180px);overflow-x:auto;align-items:center;scroll-snap-type:x proximity}.activity-screen{scroll-snap-align:center}.activity-screen-main{transform:translateY(-20px)}.activity-screen-intro,.activity-screen-recovery{transform:translateY(20px)}
  .activity-principles{grid-template-columns:1fr}.activity-principles>div{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){.activity-feature.in .activity-screen{animation:none}.activity-metric-ring{transition:none}}

/* Phil companion system */
.companion-feature{display:block;padding:96px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.companion-heading{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:74px;align-items:end;margin-bottom:48px}
.companion-heading .feature-copy{max-width:none}.companion-heading h3{font-size:clamp(54px,7vw,104px);line-height:1;letter-spacing:-.055em;margin:15px 0 0}
.companion-intro>p{max-width:610px;margin:0;color:#aaa9a3;font-size:17px;line-height:1.55}
.companion-key{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:9px 14px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);align-items:baseline}.companion-key span{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.11em;text-transform:uppercase;color:#777}.companion-key b{font-size:14px;font-weight:400}
.companion-stage{display:grid;grid-template-columns:.76fr 1.24fr;gap:14px;background:#0a0a0a}
.companion-stage figure,.companion-moments figure{margin:0;position:relative;overflow:hidden;background:#fff;color:#171717}
.companion-stage img,.companion-moments img{display:block;width:100%;height:100%;object-fit:contain}
.companion-hero{min-height:720px}.companion-hero img{padding:28px}.companion-hero figcaption{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:15px 17px;background:rgba(5,5,5,.92);color:#f2f1ec}.companion-hero figcaption span{font:8px/1.2 "IBM Plex Mono",monospace;letter-spacing:.11em;text-transform:uppercase;color:#4abed5}.companion-hero figcaption strong{font-size:16px;font-weight:400;text-align:right}
.companion-scenes{display:grid;grid-template-columns:1fr 1fr;gap:14px}.companion-scene{min-height:353px}.companion-scene img{padding:14px;transition:transform .8s cubic-bezier(.16,1,.3,1)}.companion-scene figcaption{position:absolute;right:12px;bottom:12px;padding:7px 9px;background:#0a0a0a;color:#f2f1ec;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.11em;text-transform:uppercase}.companion-scene:nth-child(2),.companion-scene:nth-child(3){background:#f3f0e9}
@media(hover:hover){.companion-scene:hover img{transform:scale(1.035) rotate(-.5deg)}}
.companion-moments{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.companion-moments figure{display:grid;grid-template-columns:46% 54%;min-height:290px}.companion-moments img{padding:12px}.companion-moments figcaption{display:flex;flex-direction:column;justify-content:flex-end;padding:28px 25px;background:#0c0d0d;color:#f2f1ec}.companion-moments figcaption span{font-size:25px;font-weight:300}.companion-moments figcaption p{margin:10px 0 0;color:#8d8c87;font-size:12px;line-height:1.5}.companion-moments figure:nth-child(2) figcaption{background:#171310}.companion-moments figure:nth-child(3) figcaption{background:#0b191b}
.companion-principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border:1px solid var(--line);background:#090909}.companion-principles>div{min-height:150px;padding:25px 28px;border-right:1px solid var(--line)}.companion-principles>div:last-child{border-right:0}.companion-principles span{font:8px/1.3 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#4abed5}.companion-principles p{margin:15px 0 0;color:#999892;font-size:13px;line-height:1.5}
.companion-feature.in .companion-hero{animation:companionBuild .9s cubic-bezier(.16,1,.3,1) both}.companion-feature.in .companion-scene{animation:companionBuild .8s cubic-bezier(.16,1,.3,1) both}.companion-feature.in .companion-scene:nth-child(2){animation-delay:.08s}.companion-feature.in .companion-scene:nth-child(3){animation-delay:.16s}.companion-feature.in .companion-scene:nth-child(4){animation-delay:.24s}@keyframes companionBuild{from{opacity:0;clip-path:inset(18% 0 0);transform:translateY(28px)}}
@media(max-width:900px){.companion-heading,.companion-stage{grid-template-columns:1fr}.companion-heading{gap:24px}.companion-hero{min-height:520px}.companion-scenes{grid-template-columns:1fr 1fr}.companion-moments{grid-template-columns:1fr}.companion-principles{grid-template-columns:1fr}.companion-principles>div{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.companion-principles>div:last-child{border-bottom:0}}
@media(max-width:560px){.companion-feature{padding:58px 0}.companion-heading h3{font-size:58px}.companion-key{grid-template-columns:auto 1fr}.companion-scenes{grid-template-columns:1fr}.companion-scene{min-height:320px}.companion-moments figure{grid-template-columns:44% 56%}}
@media(prefers-reduced-motion:reduce){.companion-feature.in .companion-hero,.companion-feature.in .companion-scene{animation:none}}

/* Clear device onboarding sequence */
.device-flow{min-width:0;height:auto;min-height:0;padding:42px 34px;background-size:24px 24px;display:grid;grid-template-columns:.8fr 1.15fr .9fr .9fr .9fr;gap:34px;align-items:center;overflow:visible}
.device-flow>.logic-node,.device-branch .logic-node,.device-recovery .logic-node{position:relative;left:auto;top:auto;width:auto;min-height:134px;box-shadow:none}
.device-flow>.logic-node:not(:last-child)::after,.device-branch::after{content:"→";position:absolute;right:-28px;top:50%;transform:translateY(-50%);color:#4abed5;font:20px/1 "IBM Plex Mono",monospace}
.device-branch{position:relative;display:grid;gap:12px}.device-branch::before{content:"DEVICE-SPECIFIC STEP";position:absolute;left:0;top:-22px;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#777}.device-branch .logic-node{min-height:112px}.device-branch .logic-node h4{margin-top:9px}
.device-recovery{grid-column:1/-1;display:grid;grid-template-columns:170px repeat(3,1fr);gap:28px;align-items:center;margin-top:14px;padding:22px;border-top:1px solid #472828;background:rgba(110,35,35,.055)}
.device-recovery>span{font:9px/1.45 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#e45b59}.device-recovery .logic-node{min-height:110px}.device-recovery .logic-node:not(:last-child)::after{content:"→";position:absolute;right:-23px;top:50%;transform:translateY(-50%);color:#e45b59;font:18px/1 "IBM Plex Mono",monospace}.device-recovery .logic-node:last-child::after{content:"↖ RETURN TO 03";position:absolute;right:12px;bottom:10px;color:#e45b59;font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.08em}
.device-flow .logic-node h4{font-size:17px}.device-flow .logic-node p{font-size:11px}.device-feature .feature-media{overflow:visible}
.meter-choice-node{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:18px!important}.meter-choice-node>.logic-no{align-self:flex-start}.accu-mobile-visual{position:relative;width:76px;height:126px;margin:10px auto 15px;padding:28px 9px 16px;border:2px solid #9ca8aa;border-radius:24px;background:#e8edef;display:grid;grid-template-rows:34px 20px 20px 8px;gap:7px}.accu-mobile-visual>i{position:absolute;top:13px;left:50%;width:29px;height:5px;transform:translateX(-50%);border-radius:8px;background:#788486}.accu-mobile-visual>span{display:block;border:1px solid #a6b2b4;background:#f5f7f7}.accu-mobile-visual>span:first-of-type{background:linear-gradient(90deg,#c7dcdf 0 32%,#f5f7f7 32%)}.accu-mobile-visual>b{display:block;background:#788486}.meter-choice-node h4{margin-top:0!important}
.meter-choice-node{border-color:transparent}.accu-mobile-visual>b{display:none}

/* Structured activity sequence */
.activity-metric{width:calc(100% - 64px);min-height:210px;margin:32px;grid-template-columns:180px minmax(220px,420px);justify-content:start}
.activity-screen-stage{min-height:720px;margin:0;padding:32px;display:grid;grid-template-columns:minmax(150px,.72fr) minmax(220px,1fr) minmax(220px,1fr) minmax(150px,.72fr);grid-template-rows:1fr 1fr;gap:18px;align-items:stretch;overflow:visible}
.activity-screen{min-width:0;min-height:0;transform:none!important;display:grid;grid-template-rows:minmax(0,1fr) auto;box-shadow:none}
.activity-screen img{width:100%;height:100%;min-height:0;object-fit:contain;background:#f3f5f8}
.activity-screen-intro{grid-column:1;grid-row:1}.activity-screen-permission{grid-column:1;grid-row:2}.activity-screen-main{grid-column:2/4;grid-row:1/3;border-color:#4abed5;box-shadow:0 24px 70px rgba(0,0,0,.35)}.activity-screen-goal{grid-column:4;grid-row:1}.activity-screen-recovery{grid-column:4;grid-row:2}
.activity-screen-main img{object-fit:contain;padding:16px;background:#0d1112}.activity-screen figcaption{min-height:44px;display:flex;align-items:center}

@media(max-width:1100px){.device-flow{grid-template-columns:1fr 1fr;gap:18px}.device-flow>.logic-node:not(:last-child)::after,.device-branch::after{display:none}.device-recovery{grid-template-columns:1fr;gap:12px}.device-recovery .logic-node:not(:last-child)::after{content:"↓";right:12px;top:auto;bottom:-20px}.activity-screen-stage{grid-template-columns:1fr 1.35fr 1fr;grid-template-rows:repeat(2,320px)}.activity-screen-main{grid-column:2;grid-row:1/3}.activity-screen-intro{grid-column:1;grid-row:1}.activity-screen-permission{grid-column:1;grid-row:2}.activity-screen-goal{grid-column:3;grid-row:1}.activity-screen-recovery{grid-column:3;grid-row:2}}
@media(max-width:700px){.device-flow{grid-template-columns:1fr;padding:28px 18px}.device-recovery{grid-column:1}.activity-metric{width:calc(100% - 32px);margin:16px;grid-template-columns:110px 1fr;padding:18px}.activity-screen-stage{display:flex;min-height:0;overflow-x:auto;padding:22px 16px 34px;scroll-snap-type:x mandatory}.activity-screen{flex:0 0 76vw;min-height:560px;scroll-snap-align:center}.activity-screen-main{order:-1}.activity-screen-main img{padding:8px}}

/* Equal-phone activity narrative */
.activity-screen-stage{min-height:0!important;padding:42px 30px 54px!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:none!important;gap:24px!important;align-items:start!important;overflow:visible!important}
.activity-screen{grid-column:auto!important;grid-row:auto!important;position:relative;min-height:0!important;padding:9px 7px 8px;border:2px solid #494d4e!important;border-radius:32px;background:#090b0c!important;box-shadow:0 20px 45px rgba(0,0,0,.35)!important;display:grid!important;grid-template-rows:365px auto!important;overflow:visible}
.activity-screen::before{content:"";position:absolute;z-index:3;left:50%;top:12px;width:34%;height:13px;transform:translateX(-50%);border-radius:999px;background:#050505;pointer-events:none}
.activity-screen:not(:last-child)::after{content:"→";position:absolute;z-index:4;right:-20px;top:177px;color:#4abed5;background:#090a0a;font:16px/1 "IBM Plex Mono",monospace;padding:4px}
.activity-screen img,.activity-screen-main img{width:100%;height:100%;padding:0!important;border-radius:24px 24px 8px 8px;object-fit:contain!important;object-position:top center;background:#f3f5f8}
.activity-screen figcaption{min-height:132px!important;padding:15px 11px 12px!important;display:flex!important;flex-direction:column;align-items:flex-start!important;border:0;background:#090b0c!important;text-transform:none}
.activity-screen figcaption span{font:8px/1.2 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#4abed5;margin:0 0 9px}
.activity-screen figcaption strong{font-size:14px;font-weight:400;line-height:1.2;color:#f2f1ec}
.activity-screen figcaption small{margin-top:7px;font-size:10px;line-height:1.4;color:#7f8382}
.activity-screen-main{border-color:#4abed5!important}

/* Compact companion-art mosaic */
.companion-stage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:286px;gap:12px;background:#0a0a0a}
.companion-stage figure{min-height:0!important}
.companion-hero{grid-column:span 2}.companion-hero img{padding:18px 120px 18px 28px;object-position:left center}.companion-hero figcaption{left:auto;right:18px;top:18px;bottom:18px;width:220px;flex-direction:column;align-items:flex-start;justify-content:flex-end}.companion-hero figcaption strong{text-align:left}
.companion-scene{min-height:0}.companion-scene img{padding:10px}.companion-stage .scene-planning{background:#f4f7f8}.companion-stage .scene-shopping{background:#f2eee7}.companion-stage .scene-cooking{background:#efe9e0}.companion-stage .scene-health{background:#f7f7f4}
.companion-moments{grid-template-columns:1.15fr .85fr 1fr}.companion-moments figure{min-height:220px}.companion-moments img{padding:8px}

@media(max-width:1100px){.activity-screen-stage{grid-template-columns:repeat(5,210px)!important;overflow-x:auto!important;scroll-snap-type:x mandatory}.activity-screen{scroll-snap-align:center}.companion-stage{grid-template-columns:1fr 1fr}.companion-hero{grid-column:span 2}}
@media(max-width:700px){.activity-screen-stage{display:flex!important;padding:28px 16px 40px!important}.activity-screen{flex:0 0 230px;grid-template-rows:400px auto!important}.activity-screen:not(:last-child)::after{display:none}.companion-stage{grid-template-columns:1fr;grid-auto-rows:300px}.companion-hero{grid-column:auto}.companion-hero img{padding:18px}.companion-hero figcaption{left:14px;right:14px;top:auto;bottom:14px;width:auto}.companion-moments{grid-template-columns:1fr}}

/* Code-native approach diagrams */
.approach-diagram{margin:0 0 28px}.approach-panel{position:relative;border:1px solid var(--line);background:#080a0b;overflow:hidden}.approach-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}.approach-panel-head{position:relative;z-index:2;min-height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.approach-panel-head span{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.11em;text-transform:uppercase;color:#4abed5}.approach-panel-head b{font-size:14px;font-weight:400}.approach-diagram figcaption{display:grid;grid-template-columns:minmax(180px,.35fr) 1fr;gap:28px;padding:15px 0 34px}.approach-diagram figcaption strong{font-size:17px;font-weight:400}.approach-diagram figcaption span{font-size:14px;line-height:1.5;color:var(--muted)}

[data-diagram-zoom]{cursor:zoom-in;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-select:none}
.approach-card-zoom[data-diagram-zoom]{will-change:auto}
.diagram-pan-frame{position:relative;overflow:hidden;isolation:isolate;touch-action:pan-y;background:#080a0b}
.diagram-pan-frame::after{content:"CLICK TO ZOOM";position:absolute;right:14px;bottom:14px;z-index:30;padding:8px 10px;border:1px solid #465156;background:rgba(5,7,8,.9);color:#eef1ef;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;pointer-events:none;transition:opacity .2s ease}
.diagram-pan-frame.is-zoomed{cursor:grab;touch-action:none}
.diagram-pan-frame.is-dragging{cursor:grabbing}
.diagram-pan-frame.is-zoomed [data-diagram-zoom]{cursor:grab}
.diagram-pan-frame.is-dragging [data-diagram-zoom]{cursor:grabbing}
.diagram-pan-frame.is-zoomed::after{content:"CLICK AGAIN TO RESET";opacity:.72}
.diagram-pan-frame:focus-visible{outline:2px solid #4abed5;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){[data-diagram-zoom]{will-change:auto}}

.meal-flow{position:relative;z-index:1;height:430px;min-width:980px}.meal-flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.meal-flow-lines path{fill:none;stroke:#269fad;stroke-width:2;stroke-dasharray:10 8;animation:approachLine 1.25s linear infinite}.flow-node{position:absolute;width:145px;min-height:96px;padding:15px;border:1px solid #3d5b61;background:#101516;display:flex;flex-direction:column;justify-content:center}.flow-node small{font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}.flow-node strong{font-size:16px;font-weight:400;margin:9px 0 4px}.flow-node span{font-size:10px;color:#898d8b}.flow-home{left:3%;top:117px}.flow-recipe{left:22%;top:117px;border-color:#a9547d}.flow-plan{left:39%;top:117px;border-color:#7651a9}.flow-shop{left:56%;top:117px;border-color:#408e65}.flow-cook{left:73%;top:117px;border-color:#bd7239}.flow-check{left:73%;top:252px;border-color:#a54e4e}.flow-complete{left:51%;top:252px;border-color:#408e65}.flow-split{position:absolute;left:17%;top:120px;height:120px;display:flex;flex-direction:column;justify-content:space-between;font:7px/1 "IBM Plex Mono",monospace;color:#4abed5}.flow-split span{padding:5px;background:#080a0b}
.meal-ecosystem.in .flow-node{animation:approachNode .65s cubic-bezier(.16,1,.3,1) both}.meal-ecosystem.in .flow-node:nth-of-type(3){animation-delay:.08s}.meal-ecosystem.in .flow-node:nth-of-type(4){animation-delay:.16s}.meal-ecosystem.in .flow-node:nth-of-type(5){animation-delay:.24s}.meal-ecosystem.in .flow-node:nth-of-type(6){animation-delay:.32s}.meal-ecosystem.in .flow-node:nth-of-type(7){animation-delay:.4s}.meal-ecosystem.in .flow-node:nth-of-type(8){animation-delay:.48s}@keyframes approachNode{from{opacity:0;transform:translateY(18px) scale(.96)}}@keyframes approachLine{to{stroke-dashoffset:-36}}

.architecture-map{position:relative;z-index:1;min-height:520px;padding:40px;display:grid;grid-template-columns:190px 54px 1fr;gap:24px;align-items:center}.architecture-home{height:390px;padding:15px;border:1px solid #4abed5;border-radius:18px;background:#eef4f5;color:#17191a;display:grid;grid-template-rows:32px repeat(4,1fr) 66px;gap:8px;box-shadow:0 22px 55px rgba(0,0,0,.32)}.architecture-home>span{font:9px/32px "IBM Plex Mono",monospace;text-align:center}.architecture-home i{display:block;border:1px solid #c8d1d2;background:linear-gradient(90deg,#d8e1e2 0 38%,#f7f9f9 38%)}.architecture-home b{display:grid;place-items:center;background:#d9eef1;font-size:13px;font-weight:400}.architecture-arrow{font:28px/1 "IBM Plex Mono",monospace;color:#4abed5;text-align:center;animation:architectureNudge 1.5s ease-in-out infinite}@keyframes architectureNudge{50%{transform:translateX(8px)}}.architecture-zones{display:grid;grid-template-columns:1fr 1fr;gap:16px}.architecture-zones section{position:relative;min-height:185px;padding:18px;border:1px solid #303638;background:#0e1112}.architecture-zones small{font:8px/1 "IBM Plex Mono",monospace;color:#4abed5}.architecture-zones h4{font-size:19px;font-weight:300;margin:10px 0 15px}.architecture-zones section>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.architecture-zones span{padding:9px;border:1px solid #353b3c;background:#121718;font-size:10px;color:#aaa}.content-system.in .architecture-zones section{animation:zoneBuild .65s cubic-bezier(.16,1,.3,1) both}.content-system.in .architecture-zones section:nth-child(2){animation-delay:.1s}.content-system.in .architecture-zones section:nth-child(3){animation-delay:.2s}.content-system.in .architecture-zones section:nth-child(4){animation-delay:.3s}@keyframes zoneBuild{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(18px)}}

.relevance-model{position:relative;z-index:1;min-height:430px;padding:46px;display:grid;grid-template-columns:.9fr .7fr 1.1fr;gap:52px;align-items:center}.relevance-inputs{display:grid;gap:10px}.relevance-inputs button{appearance:none;border:1px solid #353b3c;background:#101314;color:#a4a4a0;min-height:56px;padding:0 16px;display:flex;align-items:center;gap:14px;text-align:left;font:13px/1 "IBM Plex Sans Condensed",sans-serif;cursor:pointer;transition:.2s ease}.relevance-inputs button span{font:8px/1 "IBM Plex Mono",monospace;color:#777}.relevance-inputs button:hover,.relevance-inputs button.is-active{border-color:#4abed5;background:#102126;color:#f2f1ec;transform:translateX(8px)}.relevance-engine{position:relative;min-height:190px;padding:26px;border:1px dashed #4abed5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.relevance-engine>span,.relevance-output>span{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.11em;color:#4abed5}.engine-pulse{width:74px;aspect-ratio:1;border-radius:50%;margin:22px;background:conic-gradient(#4abed5 0 32%,#20393e 32% 100%);animation:engineSpin 2.8s linear infinite}.engine-pulse::after{content:"";display:block;width:48px;aspect-ratio:1;margin:13px;border-radius:50%;background:#080a0b}.relevance-engine small{color:#7f8382;font-size:10px;line-height:1.4}@keyframes engineSpin{to{transform:rotate(360deg)}}.relevance-output>span{display:block;margin-bottom:14px}.relevance-output ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}.relevance-output li{min-height:64px;padding:10px 13px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;border:1px solid #353b3c;background:#101314;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .25s,background .25s}.relevance-output li b{font:16px/1 "IBM Plex Mono",monospace;color:#4abed5}.relevance-output li strong{font-size:14px;font-weight:400}.relevance-output li small{font-size:9px;color:#777}.relevance-output li:first-child{border-color:#4abed5;background:#102126}.relevance-output.is-updating li{transform:translateY(5px);border-color:#4abed5}

@media(max-width:900px){.approach-diagram figcaption{grid-template-columns:1fr;gap:7px}.approach-panel{overflow-x:auto}.architecture-map{grid-template-columns:160px 40px minmax(600px,1fr);min-width:900px}.relevance-model{grid-template-columns:1fr;gap:24px}.relevance-engine{min-height:140px}.meal-flow{transform-origin:left top;}.approach-panel-head{min-width:700px}}
@media(max-width:600px){.relevance-model{padding:24px}.architecture-map{padding:28px}.meal-flow{min-width:900px}.approach-panel-head b{display:none}}
@media(prefers-reduced-motion:reduce){.meal-flow-lines path,.architecture-arrow,.engine-pulse{animation:none}.meal-ecosystem.in .flow-node,.content-system.in .architecture-zones section{animation:none}}

/* Expanded approach systems */
.meal-flow-expanded{height:560px;min-width:1000px;background:linear-gradient(90deg,rgba(74,190,213,.025) 0 33.333%,transparent 33.333% 66.666%,rgba(74,190,213,.025) 66.666%)}
.meal-flow-expanded .meal-flow-lines{z-index:0}.meal-flow-expanded .meal-flow-lines path{stroke-width:1.5}.meal-flow-expanded .meal-flow-lines .flow-optional{stroke:#a9547d;stroke-dasharray:4 8}
.flow-lane-label{position:absolute;z-index:2;top:18px;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:#666}.lane-discover{left:3%}.lane-plan{left:38%}.lane-act{left:70%}
.flow-card{position:absolute;z-index:2;width:12.8%;min-height:80px;padding:12px;border:1px solid #365159;background:#101516;display:flex;flex-direction:column;justify-content:center;box-shadow:0 10px 25px rgba(0,0,0,.22)}
.flow-card small{font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}.flow-card strong{font-size:15px;font-weight:400;margin:8px 0 3px}.flow-card span{font-size:9px;color:#858986}.flow-decision{position:absolute;z-index:3;width:52px;display:grid;place-items:center;color:#d2a75e}.flow-decision b{width:38px;aspect-ratio:1;display:grid;place-items:center;border:1px solid #d2a75e;transform:rotate(45deg);font:14px/1 "IBM Plex Mono",monospace;background:#121313}.flow-decision b::first-letter{transform:rotate(-45deg)}.flow-decision span{margin-top:9px;font:7px/1.2 "IBM Plex Mono",monospace;text-align:center;color:#8c8b86}
.meal-flow-expanded .flow-home{left:8.4%;top:238px}.decision-entry{left:16.4%;top:251px}.flow-suggested{left:24.2%;top:102px;border-color:#a9547d}.flow-library{left:24.2%;top:374px;border-color:#a9547d}.meal-flow-expanded .flow-detail{left:39%;top:238px;border-color:#a9547d}.meal-flow-expanded .flow-plan{left:52.7%;top:238px;border-color:#7651a9}.meal-flow-expanded .flow-shop{left:66.5%;top:238px;border-color:#408e65}.decision-product{left:80%;top:251px}.meal-flow-expanded .flow-alert{left:86%;top:102px;border-color:#bd7239}.meal-flow-expanded .flow-cook{left:86%;top:374px;border-color:#bd7239}.meal-flow-expanded .flow-glucose{left:66.5%;top:414px;border-color:#a54e4e}.meal-flow-expanded .flow-complete{left:52.7%;top:414px;border-color:#408e65}.meal-flow-expanded .flow-scan{left:74%;top:475px;min-height:66px;border-color:#7651a9}
.meal-ecosystem.in .flow-card,.meal-ecosystem.in .flow-decision{animation:approachNode .65s cubic-bezier(.16,1,.3,1) both}.meal-ecosystem.in .flow-suggested,.meal-ecosystem.in .flow-library{animation-delay:.1s}.meal-ecosystem.in .flow-detail{animation-delay:.2s}.meal-ecosystem.in .flow-plan{animation-delay:.3s}.meal-ecosystem.in .flow-shop{animation-delay:.4s}.meal-ecosystem.in .flow-alert,.meal-ecosystem.in .flow-cook{animation-delay:.5s}.meal-ecosystem.in .flow-glucose{animation-delay:.6s}.meal-ecosystem.in .flow-complete{animation-delay:.7s}

.architecture-map-expanded{min-height:650px;grid-template-columns:200px 180px 1fr;grid-template-rows:1fr auto;gap:28px;padding:44px}.architecture-map-expanded .architecture-home{height:430px;grid-template-rows:34px repeat(4,1fr) 64px}.architecture-home i{position:relative}.architecture-home i::after{content:attr(data-card);position:absolute;left:47%;top:50%;transform:translateY(-50%);font-size:9px;color:#555}.architecture-router{height:280px;padding:24px 18px;border:1px dashed #4abed5;background:#0b1113;display:grid;grid-template-rows:auto repeat(4,1fr) auto;gap:10px;align-items:center;text-align:center}.architecture-router>span{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}.architecture-router i{position:relative;height:1px;background:linear-gradient(90deg,transparent,#4abed5,transparent);animation:routerPulse 2.4s ease-in-out infinite}.architecture-router i::after{content:"";position:absolute;top:-3px;left:0;width:7px;aspect-ratio:1;border-radius:50%;background:#4abed5;animation:routerDot 2.4s linear infinite}.architecture-router i:nth-of-type(2),.architecture-router i:nth-of-type(2)::after{animation-delay:.3s}.architecture-router i:nth-of-type(3),.architecture-router i:nth-of-type(3)::after{animation-delay:.6s}.architecture-router i:nth-of-type(4),.architecture-router i:nth-of-type(4)::after{animation-delay:.9s}.architecture-router b{font-size:10px;font-weight:400;color:#888}@keyframes routerDot{to{left:calc(100% - 7px)}}@keyframes routerPulse{50%{opacity:.45}}
.architecture-map-expanded .architecture-zones section{min-height:205px}.architecture-zones section em{display:block;margin-top:14px;padding-top:11px;border-top:1px solid #303638;font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#4abed5;font-style:normal}.architecture-feedback{grid-column:1/-1;min-height:58px;padding:0 18px;border:1px solid #303638;background:#0b0e0f;display:flex;align-items:center;gap:10px}.architecture-feedback span{margin-right:auto;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#777}.architecture-feedback b{padding:7px 10px;border:1px solid #344044;font-size:10px;font-weight:400}.architecture-feedback i{margin-left:12px;color:#4abed5;font-size:20px;font-style:normal;animation:engineSpin 3s linear infinite}

.relevance-model{min-height:520px;grid-template-columns:.95fr .9fr 1.2fr;gap:42px}.relevance-inputs button{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;gap:3px 10px;padding:12px 16px}.relevance-inputs button>span{grid-row:1/3}.relevance-inputs button>b{font-size:13px;font-weight:400}.relevance-inputs button>small{font-size:9px;color:#666}.engine-steps{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px}.engine-steps b{width:46px;height:42px;border:1px solid #31464b;display:flex;flex-direction:column;align-items:center;justify-content:center;font:10px/1 "IBM Plex Mono",monospace;color:#4abed5}.engine-steps b small{margin-top:5px;font-size:7px;color:#777}.engine-steps i{font-style:normal;color:#4abed5}.relevance-engine .engine-pulse{width:62px;margin:17px}.engine-meta{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:17px}.engine-meta span{padding:7px 4px;border:1px solid #293437;font:7px/1 "IBM Plex Mono",monospace;color:#777}.relevance-output li{grid-template-columns:28px 1fr auto;grid-template-rows:auto 4px}.relevance-output li>em{grid-column:2/-1;height:3px;background:#202627;overflow:hidden}.relevance-output li>em i{display:block;height:100%;background:#4abed5}.relevance-output li:nth-child(1)>em i{width:92%}.relevance-output li:nth-child(2)>em i{width:74%}.relevance-output li:nth-child(3)>em i{width:51%}.relevance-output li:nth-child(4)>em i{width:28%}.relevance-output.is-updating li>em i{animation:rankBar .5s ease both}@keyframes rankBar{from{width:0}}

@media(max-width:900px){.architecture-map-expanded{grid-template-columns:180px 160px minmax(620px,1fr);min-width:1040px}.relevance-model{min-width:760px}.meal-flow-expanded{min-width:1000px}}
@media(prefers-reduced-motion:reduce){.architecture-router i,.architecture-router i::after,.architecture-feedback i{animation:none}.meal-ecosystem.in .flow-card,.meal-ecosystem.in .flow-decision{animation:none}}

/* Clearer approach stories */
.journey-flow{position:relative;z-index:1;padding:40px 36px 34px}.journey-flow>.journey-phase{display:inline-flex;align-items:center;gap:9px;margin:0 24px 28px 0;color:#777;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}.journey-phase b{width:24px;height:24px;display:grid;place-items:center;border:1px solid #3c555a;border-radius:50%;color:#4abed5;font-weight:400}.journey-flow ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.journey-flow ol::before{content:"";position:absolute;left:6%;right:6%;top:38px;border-top:1px dashed #4abed5;z-index:0}.journey-flow li{position:relative;z-index:1;min-height:145px;padding:20px 14px;border:1px solid #334044;background:#101415;display:flex;flex-direction:column}.journey-flow li::before{content:"";width:9px;height:9px;margin:13px 0 18px;border:2px solid #4abed5;border-radius:50%;background:#101415}.journey-flow li small{font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;color:#4abed5}.journey-flow li strong{font-size:15px;line-height:1.35;font-weight:400;margin-bottom:8px}.journey-flow li span{font-size:10px;line-height:1.35;color:#858986}.journey-flow>p,.content-route>p{margin:28px 0 0;padding-top:18px;border-top:1px solid #293133;color:#8e918f;font-size:13px;line-height:1.5}.journey-flow>p b,.content-route>p b{color:#d5d4cf;font-weight:400}
.content-route{position:relative;z-index:1;min-height:470px;padding:42px;display:grid;grid-template-columns:.72fr .8fr 1.55fr;gap:24px;align-items:center}.route-source,.route-rule{min-height:215px;padding:24px;border:1px solid #35464a;background:#0e1314;display:flex;flex-direction:column;justify-content:center;text-align:center}.content-route small{font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}.route-source strong,.route-rule strong{margin:14px 0 8px;font-size:20px;font-weight:300}.route-source span,.route-rule span,.route-destinations span{font-size:11px;line-height:1.35;color:#858986}.route-source div{display:grid;gap:7px;margin-top:20px}.route-source i{display:block;height:17px;border:1px solid #304044;background:linear-gradient(90deg,#23383d 28%,#121819 28%)}.route-rule{border-style:dashed}.route-rule b{font:28px/1 "IBM Plex Mono",monospace;color:#4abed5;margin-top:20px}.route-destinations{display:grid;grid-template-columns:1fr 1fr;gap:12px}.route-destinations section{min-height:102px;padding:16px;border:1px solid #343c3e;background:#101314;display:grid;grid-template-columns:28px 1fr;align-content:center}.route-destinations section small{grid-row:1/3}.route-destinations section strong{font-size:17px;font-weight:400}.route-destinations section span{margin-top:6px}.content-route>p{grid-column:1/-1;margin-top:0}
.relevance-engine-circle{min-height:260px;border:0;padding:18px}.relevance-engine-circle .engine-pulse{width:126px;margin:20px;box-shadow:0 0 0 1px #334b50,0 0 40px rgba(74,190,213,.08)}.relevance-engine-circle .engine-pulse::after{width:88px;margin:19px}.relevance-engine-circle>strong{font-size:14px;font-weight:400;line-height:1.3;margin-bottom:10px}.relevance-engine-circle>small{font-size:10px;line-height:1.4}
@media(max-width:900px){.journey-flow{min-width:980px}.content-route{min-width:900px}.relevance-engine-circle{min-height:220px}}

/* Consistent activity devices: phone and explanation are separate elements. */
.activity-screen-stage{padding:46px 30px 52px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:22px!important;align-items:start!important}
.activity-screen{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;display:flex!important;flex-direction:column;overflow:visible!important}
.activity-screen::before,.activity-screen::after{display:none!important}
.activity-device{position:relative;width:100%;aspect-ratio:9/19.5;padding:8px;border:2px solid #494d4e;border-radius:30px;background:#090b0c;overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.32)}
.activity-device::before{content:"";position:absolute;z-index:3;left:50%;top:13px;width:34%;height:13px;transform:translateX(-50%);border-radius:999px;background:#050505;pointer-events:none}
.activity-device::after{content:"";position:absolute;z-index:3;left:50%;bottom:13px;width:34%;height:4px;transform:translateX(-50%);border-radius:999px;background:#111;pointer-events:none}
.activity-device img,.activity-screen-main .activity-device img{display:block;width:100%;height:100%;padding:0!important;border-radius:22px;object-fit:fill!important;object-position:top center;background:#f3f5f8}
.activity-screen-intro .activity-device img{object-fit:fill!important;background:#eef2f7}
.activity-screen-main .activity-device{border-color:#4abed5}
.activity-screen figcaption{min-height:0!important;padding:16px 4px 0!important;border:0!important;background:transparent!important;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif!important;text-transform:none!important}
.activity-screen figcaption span{font:8px/1.2 "IBM Plex Mono",monospace!important;letter-spacing:.09em;text-transform:uppercase;margin-bottom:9px}
.activity-screen figcaption strong{font:17px/1.15 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif!important;font-weight:400!important;letter-spacing:0!important}
.activity-screen figcaption small{font:11px/1.4 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif!important;letter-spacing:0!important;color:#858986}

/* Balanced companion gallery. */
.companion-stage{grid-template-columns:repeat(3,1fr)!important;grid-auto-rows:340px!important;gap:12px!important;background:#0a0a0a}
.companion-stage figure{grid-column:auto!important;min-height:0!important;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#f4f4f1!important}
.companion-stage figure img,.companion-hero img,.companion-scene img{width:100%;height:100%;padding:20px!important;object-fit:contain;object-position:center;background:transparent}
.companion-stage figure figcaption,.companion-hero figcaption{position:static!important;width:auto!important;min-height:46px;padding:12px 14px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;background:#121516!important;color:#f2f1ec}
.companion-stage figure figcaption{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase}
.companion-hero figcaption span{margin:0}.companion-hero figcaption strong{font:13px/1.2 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;text-align:right!important;text-transform:none;letter-spacing:0}
.companion-stage .scene-cooking,.companion-stage .scene-health{grid-column:span 1}.companion-stage .scene-cooking{grid-column:1/2}.companion-stage .scene-health{grid-column:2/3}.companion-stage::after{content:"Phil supports the task—never competes with it.";grid-column:3;display:grid;place-items:center;padding:30px;border:1px solid #283335;color:#8b8e8c;font:15px/1.45 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;text-align:center}
@media(max-width:1100px){.activity-screen-stage{grid-template-columns:repeat(5,220px)!important;overflow-x:auto!important}.companion-stage{grid-template-columns:1fr 1fr!important}.companion-stage::after{grid-column:auto}.companion-stage .scene-cooking,.companion-stage .scene-health{grid-column:auto}}
@media(max-width:700px){.activity-screen-stage{display:flex!important}.activity-screen{flex:0 0 230px!important}.companion-stage{grid-template-columns:1fr!important;grid-auto-rows:310px!important}}

/* Added system detail without obscuring the primary stories. */
.journey-flow li em{margin-top:auto;padding-top:13px;font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:#65787b;font-style:normal;text-transform:uppercase}
.journey-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.journey-detail-grid section{min-height:112px;padding:16px;border:1px solid #293638;background:#0c1011}
.journey-detail-grid small{font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;color:#4abed5}
.journey-detail-grid strong{display:block;margin:10px 0 6px;font-size:13px;font-weight:400}
.journey-detail-grid span{font-size:10px;line-height:1.4;color:#858986}
.journey-context{margin-top:12px;min-height:44px;padding:8px 12px;display:flex;align-items:center;gap:8px;border:1px dashed #30484d;background:#091012}
.journey-context span{margin-right:auto;font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#4abed5}
.journey-context b{padding:6px 8px;border:1px solid #2d393b;font:8px/1 "IBM Plex Mono",monospace;font-weight:400;color:#8d9392}
.route-source i{position:relative;height:29px!important}
.route-source i::after{content:attr(data-label);position:absolute;left:36%;top:50%;transform:translateY(-50%);font:8px/1 "IBM Plex Mono",monospace;color:#7d8584;font-style:normal;white-space:nowrap}
.route-rule ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.route-rule li{padding:6px;border:1px solid #29383b;font:7px/1.2 "IBM Plex Mono",monospace;color:#777}
.route-rule>b{margin-top:14px!important}
.route-destinations section{min-height:132px!important}
.route-destinations section small{grid-row:1/4!important}
.route-destinations section em{margin-top:12px;padding-top:9px;border-top:1px solid #2b3335;font:7px/1.3 "IBM Plex Mono",monospace;color:#4f979f;font-style:normal}
.route-loop{grid-column:1/-1;min-height:48px;padding:8px 14px;display:flex;align-items:center;justify-content:flex-end;gap:10px;border:1px dashed #30484d;background:#091012}
.route-loop span{margin-right:auto;font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#4abed5}
.route-loop b{font:9px/1 "IBM Plex Mono",monospace;font-weight:400;color:#969a98}
.route-loop i{color:#4abed5;font-style:normal}
@media(max-width:900px){.journey-detail-grid{grid-template-columns:repeat(3,280px)}.journey-context{min-width:880px}.route-loop{min-width:820px}}

/* Companion character system: compact strips tell the story at product scale. */
.companion-storyboard{display:grid;gap:14px;margin-top:30px}
.character-strip{margin:0;border:1px solid #2c3334;background:#0a0c0d;overflow:hidden}
.character-strip-head{min-height:58px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #2c3334}
.character-strip-head span{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}
.character-strip-head strong{max-width:620px;font-size:14px;font-weight:400;color:#aaa;text-align:right}
.character-strip img{display:block;width:100%;height:270px;padding:18px 28px;object-fit:contain;object-position:center;background:#fff}
.character-journey img{height:290px;padding:20px 28px;background:#fff}
.character-journey figcaption{min-height:40px;padding:0 6.5%;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;border-top:1px solid #252b2c;background:#0e1112}
.character-journey figcaption span{text-align:center;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#b7bfbd}
.character-system-row{display:grid;grid-template-columns:1fr;gap:14px}
.character-scale img,.character-language img{height:300px;padding:22px 30px;background:#fff}
.character-role-gallery{width:100%;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:#fff;border-top:1px solid #e2e4e4;overflow:hidden}
.character-role-gallery figure{width:100%;max-width:100%;margin:0;min-width:0;overflow:hidden;border-right:1px solid #e2e4e4;background:#fff;display:grid;grid-template-rows:240px 34px}.character-role-gallery figure:last-child{border-right:0}
.character-scale .character-role-gallery img{display:block!important;width:100%!important;min-width:0!important;height:240px!important;padding:10px!important;box-sizing:border-box;object-fit:contain;object-position:center;background:#fff;transform:none!important;max-width:100%!important}
.character-role-gallery figcaption{display:grid;place-items:center;margin:0;padding:0;border-top:1px solid #e2e4e4;background:#0e1112;color:#b7bfbd;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.08em}
.companion-role-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #2c3334;background:#0b0d0e}
.companion-role-grid section{min-height:164px;padding:20px;border-right:1px solid #2c3334}
.companion-role-grid section:last-child{border-right:0}
.companion-role-grid span{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;color:#4abed5}
.companion-role-grid strong{display:block;margin:15px 0 9px;font-size:17px;font-weight:400;line-height:1.25}
.companion-role-grid p{margin:0;font-size:12px;line-height:1.45;color:#858986}
@media(max-width:900px){.character-system-row{grid-template-columns:1fr}.companion-role-grid{grid-template-columns:1fr 1fr}.companion-role-grid section:nth-child(2){border-right:0}.companion-role-grid section:nth-child(-n+2){border-bottom:1px solid #2c3334}}
@media(max-width:600px){.character-strip-head{align-items:flex-start;flex-direction:column}.character-strip-head strong{text-align:left}.character-strip img,.character-journey img,.character-scale img,.character-language img{height:190px;padding:10px}.character-journey figcaption{display:none}.companion-role-grid{grid-template-columns:1fr}.companion-role-grid section{border-right:0;border-bottom:1px solid #2c3334!important}}
@media(max-width:900px){.character-role-gallery{grid-template-columns:repeat(7,150px);overflow-x:auto}.character-role-gallery figure{grid-template-rows:210px 34px}.character-role-gallery img{height:210px}}

/* Content architecture rebuilt as the original wireframe family. */
.wireframe-map{position:relative;z-index:1;padding:44px;background:#f2f2f0;color:#5c5d5c;display:grid;grid-template-columns:1fr 1fr;gap:42px 54px}
.wf-family{min-width:0}.wf-family h4{margin:0 0 22px;padding-bottom:10px;border-bottom:1px solid #c8cac9;font-size:16px;font-weight:500;text-align:center;color:#666}.wf-family h4 span{margin-right:8px;font:8px/1 "IBM Plex Mono",monospace;color:#999}
.wf-home-layout{min-height:250px;display:grid;grid-template-columns:120px 34px 1fr;gap:14px;align-items:center;justify-content:center}.wf-arrow{font:20px/1 "IBM Plex Mono",monospace;color:#9da09f}.wf-branches{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wf-branches div{min-height:78px;padding:12px;border:1px solid #aeb2b1;background:#fafafa;display:grid;place-items:center;font:9px/1.2 "IBM Plex Mono",monospace;text-align:center}
.wf-phone{width:100%;height:210px;padding:8px;border:1px solid #929695;background:#fff;display:flex;flex-direction:column;gap:7px}.wf-phone i{display:block;border:1px solid #bdc0bf;background:#f8f8f7}.wf-header{height:18px!important;background:#ddd!important}.wf-progress{height:28px;background:linear-gradient(90deg,#d3d6d5 48%,#f7f7f6 48%)!important}.wf-card{height:39px}.wf-grid{height:46px;background:linear-gradient(90deg,#eee 0 31%,#fff 31% 34%,#eee 34% 65%,#fff 65% 68%,#eee 68%)!important}.wf-hero{height:65px}.wf-lines{height:46px;background:repeating-linear-gradient(to bottom,#d8dbda 0 2px,transparent 2px 10px)!important;border:0!important}.wf-calendar{flex:1;background:linear-gradient(#eee 1px,transparent 1px),linear-gradient(90deg,#eee 1px,transparent 1px)!important;background-size:14px 14px!important}.wf-nav{height:11px!important;margin-top:auto;background:#333!important;border-color:#333!important}.wf-ring{width:45px;height:45px!important;margin:5px auto;border:8px solid #b8bcbb!important;border-radius:50%;background:#fff!important}
.wf-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.wf-card-grid article{min-height:78px;padding:10px;border:1px solid #aeb2b1;background:#fafafa;display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr 10px;gap:7px 10px}.wf-card-grid article i{grid-row:1/3;border:1px solid #b9bcbb;background:linear-gradient(135deg,transparent 49%,#bbb 50% 51%,transparent 52%)}.wf-card-grid article b{align-self:end;font-size:10px;font-weight:500}.wf-card-grid article em{display:block;background:#d4d7d6}.wf-card-grid .wf-ring{width:40px;height:40px!important;border-width:6px!important}
.wf-screen-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}.wf-health-family .wf-screen-row{grid-template-columns:repeat(4,1fr)}.wf-screen-row figure{margin:0}.wf-screen-row .wf-phone{height:215px}.wf-screen-row figcaption{padding-top:8px;font:8px/1 "IBM Plex Mono",monospace;text-align:center;color:#777}
@media(max-width:900px){.wireframe-map{min-width:980px}}

/* Screen-flow architecture — rebuilt from the original wireframe map. */
.wireframe-map-v2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px 46px;min-height:710px;padding:34px 38px 58px;background:#eff1f1;color:#535857;overflow:hidden}
.wf-connectors{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.wf-connectors path{fill:none;stroke:#97a1a0;stroke-width:1.2;stroke-dasharray:5 7;vector-effect:non-scaling-stroke;stroke-dashoffset:80}
.content-system.in .wf-connectors path{animation:wf-line-draw 2.2s cubic-bezier(.2,.7,.2,1) forwards}
.content-system.in .wf-connectors path:nth-child(2n){animation-delay:.18s}.content-system.in .wf-connectors path:nth-child(3n){animation-delay:.34s}
@keyframes wf-line-draw{to{stroke-dashoffset:0}}
.wf-flow-group{position:relative;z-index:1;min-width:0}
.wf-flow-group>header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;padding-bottom:9px;border-bottom:1px solid #c8cecd}
.wf-flow-group>header span{font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#788180}.wf-flow-group>header strong{font-size:15px;font-weight:500;color:#515655}
.wf-home-network{display:grid;grid-template-columns:112px 48px 1fr;align-items:center;min-height:230px}
.wf-route-label{font:7px/1.3 "IBM Plex Mono",monospace;text-align:center;color:#8a9291;writing-mode:vertical-rl;transform:rotate(180deg)}
.wf-destination-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.wf-screen{margin:0;opacity:.35;transform:translateY(10px)}
.content-system.in .wf-screen{animation:wf-screen-in .55s cubic-bezier(.16,1,.3,1) forwards}
.content-system.in .wf-screen:nth-child(2){animation-delay:.1s}.content-system.in .wf-screen:nth-child(3){animation-delay:.2s}.content-system.in .wf-screen:nth-child(4){animation-delay:.3s}.content-system.in .wf-screen:nth-child(5){animation-delay:.4s}
@keyframes wf-screen-in{to{opacity:1;transform:none}}
.wf-screen figcaption{margin:0 0 5px;font:7px/1 "IBM Plex Mono",monospace;color:#6f7776;text-align:left}
.wf-ui{height:198px;padding:7px;border:1px solid #929b9a;background:#fff;box-shadow:0 5px 0 rgba(65,72,71,.05);display:flex;flex-direction:column;gap:6px;overflow:hidden}
.wf-screen-home .wf-ui{height:220px}.wf-screen-slim .wf-ui{height:101px;padding:5px;gap:4px}
.wf-ui i{display:block;flex:0 0 auto;border:1px solid #c0c6c5;background:#f6f7f7}
.wf-ui .bar{height:14px;background:#d9dddc}.wf-ui .meter{height:27px;background:linear-gradient(90deg,#c6cdcc 32%,#f5f6f6 32%)}
.wf-ui .quick{height:24px;background:linear-gradient(90deg,#e1e4e3 31%,transparent 31% 34%,#e1e4e3 34% 65%,transparent 65% 68%,#e1e4e3 68%)}
.wf-ui .feature{height:42px;background:linear-gradient(135deg,transparent 49%,#ccd1d0 50% 51%,transparent 52%)}
.wf-ui .tiles{height:31px;background:repeating-linear-gradient(90deg,#e1e4e3 0 27%,transparent 27% 35%)}
.wf-ui .hero{height:58px;background:linear-gradient(135deg,transparent 49%,#cbd0cf 50% 51%,transparent 52%)}
.wf-ui .list{height:37px;border:0;background:repeating-linear-gradient(to bottom,#d0d5d4 0 2px,transparent 2px 9px)}
.wf-ui .calendar{height:53px;background:linear-gradient(#dfe2e1 1px,transparent 1px),linear-gradient(90deg,#dfe2e1 1px,transparent 1px);background-size:10px 10px}
.wf-ui .controls{height:24px;background:linear-gradient(90deg,#d7dbda 0 46%,transparent 46% 54%,#d7dbda 54%)}
.wf-ui .question{height:48px;background:radial-gradient(circle at 50% 45%,transparent 0 10px,#c9cfce 11px 12px,transparent 13px)}
.wf-ui .step{height:37px;background:linear-gradient(135deg,#e3e6e5 0 33%,transparent 33%)}
.wf-ui .nav{height:9px;margin-top:auto;background:#323736;border-color:#323736}
.wf-dynamic-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wf-dynamic-grid article{min-height:64px;padding:8px;border:1px solid #adb5b4;background:#fff;display:grid;grid-template-columns:42px 1fr;gap:9px;opacity:.35;transform:translateX(8px)}
.content-system.in .wf-dynamic-grid article{animation:wf-card-in .48s ease forwards}.content-system.in .wf-dynamic-grid article:nth-child(2){animation-delay:.08s}.content-system.in .wf-dynamic-grid article:nth-child(3){animation-delay:.16s}.content-system.in .wf-dynamic-grid article:nth-child(4){animation-delay:.24s}.content-system.in .wf-dynamic-grid article:nth-child(5){animation-delay:.32s}.content-system.in .wf-dynamic-grid article:nth-child(6){animation-delay:.4s}
@keyframes wf-card-in{to{opacity:1;transform:none}}
.wf-dynamic-grid article>i{display:block;border:1px solid #bcc3c2;font-style:normal;display:grid;place-items:center;color:#9ba3a2}.wf-dynamic-grid .image{background:linear-gradient(135deg,transparent 49%,#c2c8c7 50% 51%,transparent 52%)}.wf-dynamic-grid .dial{border:7px solid #bcc3c2;border-radius:50%;margin:4px}.wf-dynamic-grid .bars{background:repeating-linear-gradient(to bottom,#bfc6c5 0 3px,transparent 3px 9px);border:0}.wf-dynamic-grid article div{display:flex;flex-direction:column;gap:6px;justify-content:center}.wf-dynamic-grid b{font-size:9px;font-weight:500}.wf-dynamic-grid em{height:4px;background:#d3d7d6}.wf-dynamic-grid em:last-child{width:62%}
.wf-screen-sequence{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;align-items:end}.wf-health-flow .wf-screen-sequence{grid-template-columns:repeat(4,1fr)}
.wf-screen-sequence .wf-ui{height:184px}.wf-screen-sequence .wf-screen{position:relative}.wf-screen-sequence .wf-screen:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;z-index:2;font:11px/1 "IBM Plex Mono",monospace;color:#7c8786}
.wf-flow-note{position:absolute;z-index:2;left:38px;right:38px;bottom:15px;min-height:28px;padding:0 10px;border:1px dashed #aeb7b6;display:flex;align-items:center;justify-content:flex-end;gap:9px;font:7px/1 "IBM Plex Mono",monospace;color:#7b8483}
.wf-flow-note span{margin-right:auto;color:#508891}.wf-flow-note i{color:#3fa7bb;font-style:normal}
@media(max-width:900px){.wireframe-map-v2{min-width:1120px}}
@media(prefers-reduced-motion:reduce){.wf-connectors path,.wf-screen,.wf-dynamic-grid article{animation:none!important;opacity:1!important;transform:none!important}}

/* Home architecture — one entry, one decision, four destinations. */
.wireframe-map-v2.home-architecture{display:block;min-height:0;min-width:0;padding:34px 38px;background:#0b1012;color:#eef1ef;overflow:hidden}
.home-arch-stage{display:grid;grid-template-columns:160px 58px 220px 58px minmax(0,1fr);gap:16px;align-items:center}
.home-arch-node{min-width:0}
.home-arch-label,.home-arch-zones article>span{display:block;margin-bottom:13px;font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}
.home-arch-entry{text-align:center}
.home-arch-phone{width:92px;height:168px;margin:0 auto 16px;padding:13px 8px 9px;border:1px solid #758083;border-radius:18px;background:#e8edef;display:flex;flex-direction:column;gap:7px}
.home-arch-phone i{display:block;border:1px solid #aeb8ba;background:#f8faf9}
.home-arch-phone-top{width:34px;height:5px;margin:0 auto 3px;border:0!important;border-radius:5px;background:#697376!important}
.home-arch-phone-card{height:27px}.home-arch-phone-card.is-primary{height:43px;background:linear-gradient(90deg,#c7d7da 31%,#f8faf9 31%) }
.home-arch-phone-nav{height:8px;margin-top:auto;background:#697376!important;border-color:#697376!important}
.home-arch-node h4,.home-arch-zones h4{margin:0;font-size:18px;font-weight:400;line-height:1.1;color:#eef1ef}
.home-arch-node p,.home-arch-zones p{margin:7px 0 0;font-size:11px;line-height:1.4;color:#8d9694}
.home-arch-route{display:flex;flex-direction:column;align-items:center;gap:8px;color:#4abed5}
.home-arch-route span{font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:#6e7978;white-space:nowrap}
.home-arch-route i{position:relative;width:100%;font:18px/1 "IBM Plex Mono",monospace;font-style:normal;text-align:right}
.home-arch-route i::before{content:"";position:absolute;left:0;right:14px;top:50%;border-top:1px dashed #3d7e8b}
.home-arch-router{padding:20px;border:1px solid #354044;background:#111719}
.home-arch-router-core{padding:17px 12px;border:1px dashed #4abed5;text-align:center}
.home-arch-router-core small{display:block;margin-bottom:10px;font:7px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#758180}
.home-arch-router-core strong{display:block;font-size:17px;font-weight:400;line-height:1.25}
.home-arch-signals{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.home-arch-signals span{padding:6px 3px;border:1px solid #303b3e;font:6px/1.2 "IBM Plex Mono",monospace;text-align:center;color:#87908f}
.home-arch-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-arch-zones article{position:relative;min-height:128px;padding:16px;border:1px solid #354044;background:#111719;overflow:hidden}
.home-arch-zones article:nth-child(1){border-top-color:#ea6fac}.home-arch-zones article:nth-child(2){border-top-color:#8b71d6}.home-arch-zones article:nth-child(3){border-top-color:#54c88e}.home-arch-zones article:nth-child(4){border-top-color:#e89544}
.home-arch-zones article>span{margin-bottom:8px}
.home-arch-mini{position:absolute;right:12px;bottom:12px;width:54px;display:grid;gap:4px}
.home-arch-mini i{height:5px;background:#3a4445}.home-arch-mini i:nth-child(2){width:76%}.home-arch-mini i:nth-child(3){width:46%}
.home-arch-feedback{margin-top:24px;padding:12px 16px;border:1px dashed #334548;display:flex;align-items:center;justify-content:flex-end;gap:12px;font:8px/1 "IBM Plex Mono",monospace;color:#77817f}
.home-arch-feedback span{margin-right:auto;color:#4abed5}.home-arch-feedback i{font-style:normal;color:#4abed5}.home-arch-feedback b{font-weight:400}
.home-arch-summary{margin:22px 0 0;padding-top:18px;border-top:1px solid #283033;font-size:12px;line-height:1.55;color:#909896}
.home-arch-summary strong{color:#eef1ef;font-weight:400}
.content-system.in .home-arch-phone,.content-system.in .home-arch-router,.content-system.in .home-arch-zones article{animation:home-arch-in .55s cubic-bezier(.16,1,.3,1) both}
.content-system.in .home-arch-router{animation-delay:.15s}.content-system.in .home-arch-zones article:nth-child(1){animation-delay:.3s}.content-system.in .home-arch-zones article:nth-child(2){animation-delay:.38s}.content-system.in .home-arch-zones article:nth-child(3){animation-delay:.46s}.content-system.in .home-arch-zones article:nth-child(4){animation-delay:.54s}
@keyframes home-arch-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){.wireframe-map-v2.home-architecture{min-width:0;padding:24px}.home-arch-stage{grid-template-columns:1fr;gap:18px}.home-arch-entry{text-align:left}.home-arch-phone{margin-left:0}.home-arch-route{flex-direction:row}.home-arch-route i{width:36px;transform:rotate(90deg)}.home-arch-zones{grid-template-columns:1fr 1fr}.home-arch-feedback{flex-wrap:wrap;justify-content:flex-start}.home-arch-feedback span{width:100%;margin:0}}
@media(max-width:560px){.home-arch-zones{grid-template-columns:1fr}.home-arch-feedback b,.home-arch-feedback i{font-size:7px}}
@media(prefers-reduced-motion:reduce){.home-arch-phone,.home-arch-router,.home-arch-zones article{animation:none!important}}

/* Four-screen activity story after removing the introductory announcement. */
.activity-screen-stage{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1100px){.activity-screen-stage{grid-template-columns:repeat(4,220px)!important}}

/* Let the scale study breathe: larger artwork with deliberate horizontal viewing. */
.character-scale{overflow-x:auto;overscroll-behavior-inline:contain}
.character-scale img{width:1400px!important;max-width:none!important;height:360px!important;padding:24px 38px!important;object-fit:contain!important}
@media(max-width:700px){.character-scale img{width:1050px!important;height:280px!important;padding:16px 24px!important}}

/* Preserve source proportions inside consistent iPhone viewports. */
.activity-device{display:grid;place-items:center;background:#f3f5f8!important}
.activity-device img,.activity-screen-main .activity-device img,.activity-screen-intro .activity-device img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:top center!important;background:#f3f5f8!important}

/* Expression kit: enlarge the source art as focused studies instead of one tiny strip. */
.character-language{background:#0a0c0d!important}
.expression-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px;background:#0a0c0d}
.expression-detail{margin:0!important;min-width:0;border:1px solid #303738;background:#fff;overflow:hidden}
.expression-detail>div{position:relative;height:230px;overflow:hidden;background:#fff}
.expression-detail img{position:absolute!important;top:50%;left:0;width:600%!important;max-width:none!important;height:auto!important;padding:0!important;object-fit:initial!important;background:#fff!important;transform:translateY(-50%)}
.expression-detail-1 img{left:0}
.expression-detail-2 img{left:-100%}
.expression-detail-3 img{left:-200%}
.expression-detail-4 img{left:-300%}
.expression-detail-5 img{left:-500%}
.expression-detail:nth-child(4),.expression-detail:nth-child(5){grid-column:span 1}
.expression-detail footer{min-height:86px;padding:15px 16px;background:#111516;color:#f2f1ec;display:flex;flex-direction:column;justify-content:center}
.expression-detail footer span{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}
.expression-detail footer strong{margin-top:9px;font:16px/1.25 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;font-weight:400}
@media(max-width:900px){.expression-gallery{grid-template-columns:repeat(2,minmax(260px,1fr))}.expression-detail>div{height:250px}}
@media(max-width:600px){.expression-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.expression-detail{flex:0 0 82vw;scroll-snap-align:center}.expression-detail>div{height:230px}}

/* Research wall: an intentionally loose precursor to the structured system diagrams. */
.research-panel{background:#dad8d0;color:#171717}.research-panel::before{background:linear-gradient(rgba(20,20,20,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.055) 1px,transparent 1px);background-size:32px 32px}.research-panel .approach-panel-head{border-color:rgba(15,15,15,.2)}.research-panel .approach-panel-head span{color:#147f92}.research-wall{position:relative;min-height:650px;padding:76px 5% 72px;overflow:hidden;font-family:"IBM Plex Mono",monospace}.research-note{position:absolute;z-index:3;width:205px;padding:17px 18px;color:#26231e;background:#f1df8d;box-shadow:2px 4px 0 rgba(0,0,0,.14);transform:rotate(-2.2deg)}.research-note small,.research-themes small{display:block;margin-bottom:11px;font-size:8px;letter-spacing:.12em;color:#71631d}.research-note strong{display:block;font:17px/1.2 "IBM Plex Sans Condensed","Arial Narrow",sans-serif}.research-note span{display:block;margin-top:9px;font:11px/1.4 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;color:#5e5742}.research-note-a{top:38px;left:4%}.research-note-b{right:4%;top:78px;background:#c8e3df;transform:rotate(2deg)}.research-note-b small{color:#2b6d70}.sketch-phone{position:absolute;z-index:2;top:155px;width:190px;height:365px;padding:32px 18px 18px;border:3px solid #272727;border-radius:25px;background:#f7f4eb;box-shadow:4px 5px 0 rgba(0,0,0,.16);transform:rotate(-1.4deg);font-family:"Comic Sans MS","Bradley Hand",cursive}.sketch-phone::after{content:"";position:absolute;inset:7px;border:1px dashed rgba(35,35,35,.35);border-radius:18px;pointer-events:none}.sketch-phone-home{left:24%}.sketch-phone-plan{left:50%;transform:translateX(-50%) rotate(1.1deg)}.sketch-phone-guide{right:20%;transform:rotate(-.8deg)}.sketch-speaker{position:absolute;top:14px;left:50%;width:42px;height:4px;background:#222;border-radius:9px;transform:translateX(-50%)}.sketch-phone>b{display:block;margin:8px 0 17px;font-size:13px;letter-spacing:.08em}.sketch-line{display:block;width:65%;height:7px;margin:10px 0;border-radius:20px;background:#b8b7b0;transform:rotate(-1deg)}.sketch-line.wide{width:88%}.sketch-card{display:block;height:58px;margin:11px 0;border:2px solid #383838;border-radius:5px;background:repeating-linear-gradient(-8deg,transparent 0 9px,rgba(0,0,0,.05) 10px 11px)}.sketch-card.hero-card{height:92px;padding:15px;font-size:11px;color:#147f92}.sketch-card.short{height:43px}.sketch-calendar{display:block;height:125px;border:2px solid #333;background:linear-gradient(#333 0 2px,transparent 2px),linear-gradient(90deg,#333 0 2px,transparent 2px);background-size:32px 29px;transform:rotate(-.6deg)}.sketch-image{display:block;height:122px;border:2px solid #333;background:linear-gradient(145deg,transparent 48%,#444 49% 51%,transparent 52%)}.sketch-phone button{position:absolute;right:20px;bottom:43px;padding:7px 19px;border:2px solid #222;border-radius:20px;background:transparent;font:11px "Comic Sans MS",cursive}.sketch-phone em{position:absolute;left:18px;bottom:15px;font-size:10px;color:#147f92;transform:rotate(-2deg)}.research-arrow{position:absolute;z-index:4;font:44px/1 "Comic Sans MS",cursive;color:#147f92}.arrow-one{top:260px;left:43%}.arrow-two{top:330px;right:38%}.research-themes{position:absolute;left:4%;bottom:50px;width:205px;padding:16px;border:2px solid #373737;background:rgba(255,255,255,.5);transform:rotate(1deg)}.research-themes b{display:block;margin:8px 0;font:12px/1.25 "Comic Sans MS",cursive;font-weight:400}.research-caption{position:absolute;right:5%;bottom:28px;display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.12em;color:#2b626a}.research-caption i{display:block;width:34px;border-top:1px dashed currentColor}.research-sketches figcaption{padding-bottom:46px}
@media(max-width:900px){.research-wall{min-width:860px}.research-note-a{left:24px}.research-note-b{right:24px}.sketch-phone-home{left:210px}.sketch-phone-guide{right:180px}}

/* Meal-planning flow: a faithful, clarified rebuild of the working service map. */
.service-blueprint-panel{background:#080a0b;color:#f2f1ec}.research-service-flow{position:relative;z-index:1;height:610px;min-width:1040px;overflow:hidden;background-color:#080a0b;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px}
.research-flow-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.research-flow-lines path{fill:none;stroke:#3e8e99;stroke-width:1.5;vector-effect:non-scaling-stroke;marker-end:url(#research-flow-arrow)}.research-flow-lines marker path{fill:#4abed5;stroke:0}.research-flow-lines .is-support{stroke:#d2a75e;stroke-dasharray:4 6;marker-end:none}.research-flow-lines .is-optional{stroke:#aa6690;stroke-dasharray:5 6}.research-flow-lines .is-loop{stroke:#5d7478;stroke-dasharray:3 7}
.research-flow-lane{position:absolute;top:22px;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:#667174}.research-flow-lane::after{content:"";display:block;width:48px;margin-top:9px;border-top:1px solid #304044}.lane-discover{left:3%}.lane-plan{left:43%}.lane-act{left:69%}.lane-learn{left:88%}
.research-flow-node{box-sizing:border-box;position:absolute;width:12%;min-height:96px;padding:14px;border:1px solid #344448;background:#0f1415;display:flex;flex-direction:column;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.25)}.research-flow-node small{font:7px/1.15 "IBM Plex Mono",monospace;letter-spacing:.09em;color:#4abed5}.research-flow-node strong{margin:8px 0 5px;font-size:15px;font-weight:400}.research-flow-node span{font-size:9px;line-height:1.35;color:#858986}
.node-home{left:2%;top:206px;border-color:#4abed5}.node-suggested{left:26%;top:67px;border-color:#a9547d}.node-browse{left:26%;top:332px;border-color:#a9547d}.node-add{left:45%;top:206px;border-color:#7651a9}.node-planning{left:58.5%;top:206px;border-color:#7651a9}.node-list{left:72%;top:206px;border-color:#408e65}.node-standard{left:72%;top:67px;border-color:#728095}.node-substitute{left:72%;top:306px;border-color:#d2a75e}.node-alert{left:87%;top:206px;border-color:#bd7239}.node-cook{left:87%;top:408px;border-color:#bd7239}.node-glucose{left:64.5%;top:408px;border-color:#a54e4e}.node-complete{left:45%;top:408px;border-color:#408e65}.node-scan{left:78%;top:520px;min-height:64px;border-color:#7651a9}
.research-flow-choice{position:absolute;z-index:2;width:62px;text-align:center}.research-flow-choice b{width:42px;aspect-ratio:1;margin:auto;display:grid;place-items:center;border:1px solid #d2a75e;background:#151412;color:#d2a75e;transform:rotate(45deg)}.research-flow-choice svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg)}.research-flow-choice span{display:block;margin-top:12px;font:7px/1.2 "IBM Plex Mono",monospace;color:#84847f}.choice-entry{left:17.8%;top:222px}.choice-product{left:67%;top:222px}
.research-flow-key{position:absolute;left:3%;bottom:20px;display:flex;gap:20px;font:7px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#6f7778}.research-flow-key span{display:flex;align-items:center;gap:8px}.research-flow-key i{width:28px;border-top:1px solid #4abed5}.research-flow-key i.support{border-color:#d2a75e;border-top-style:dashed}.research-flow-key i.optional{border-color:#aa6690;border-top-style:dashed}.research-flow-key i.loop{border-color:#5d7478;border-top-style:dotted}
.research-service-compact{display:none}
@media(max-width:900px){
  .research-sketches .approach-panel-head{min-width:0}
  .diagram-pan-frame{height:auto!important;overflow:visible;touch-action:auto}
  .diagram-pan-frame::after{display:none}
  .diagram-pan-frame [data-diagram-zoom]{transform:none!important}
  .research-service-flow{height:auto;min-width:0;padding:22px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;overflow:visible;background-size:20px 20px}
  .research-flow-lines,.research-flow-lane,.research-flow-choice{display:none}
  .research-flow-node{position:relative;left:auto!important;top:auto!important;width:100%;min-height:0;padding:17px 18px;box-shadow:none}
  .research-flow-node:not(.node-scan)::after{content:"↓";position:absolute;right:17px;bottom:-16px;z-index:3;color:#4abed5;font:14px/1 "IBM Plex Mono",monospace}
  .research-flow-node strong{font-size:18px}.research-flow-node span{font-size:12px;line-height:1.45}
  .research-flow-key{position:relative;left:auto;bottom:auto;margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}
  .journey-flow{min-width:0;padding:24px 16px 22px}
  .journey-flow>.journey-phase{margin:0 12px 18px 0}
  .journey-flow ol{grid-template-columns:minmax(0,1fr);gap:10px;padding-left:16px}
  .journey-flow ol::before{left:22px;right:auto;top:28px;bottom:28px;border-top:0;border-left:1px dashed #4abed5}
  .journey-flow li{min-height:0;padding:17px 16px 17px 42px}
  .journey-flow li::before{position:absolute;left:13px;top:17px;margin:0}
  .journey-flow li small{font-size:8px}.journey-flow li strong{font-size:18px}.journey-flow li span{font-size:13px;line-height:1.45}.journey-flow li em{font-size:8px}
  .journey-detail-grid{grid-template-columns:minmax(0,1fr)}
  .journey-detail-grid section{min-height:0}.journey-detail-grid strong{font-size:16px}.journey-detail-grid span{font-size:13px;line-height:1.5}
  .journey-context{align-items:flex-start;flex-wrap:wrap;padding:12px}.journey-context span{flex:0 0 100%;margin:0 0 4px}.journey-context b{font-size:9px}
  .journey-flow>p{font-size:14px;line-height:1.55}
}
.relevance-system[hidden]{display:none!important}
/* Connected Type 2 diabetes monitoring story. */
.monitoring-path{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;align-items:stretch;margin:48px 0 22px;border:1px solid var(--line);background:#090c0d}.monitoring-path>div{min-height:142px;padding:20px;display:flex;flex-direction:column}.monitoring-path b,.monitoring-card figcaption b{font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#4abed5}.monitoring-path strong{margin:auto 0 8px;font-size:18px;font-weight:400}.monitoring-path span{font-size:11px;line-height:1.4;color:var(--muted)}.monitoring-path>i{display:grid;place-items:center;border-left:1px solid var(--line);border-right:1px solid var(--line);color:#4abed5;font:16px/1 "IBM Plex Mono",monospace;font-style:normal}
.monitoring-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.monitoring-card{min-width:0;margin:0;border:1px solid var(--line);background:#0a0d0e;overflow:hidden}.monitoring-screen{height:420px;padding:16px 16px 0;background:#eef1f7;overflow:hidden}.monitoring-screen img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center;box-shadow:0 12px 34px rgba(0,0,0,.14)}.report-card .monitoring-screen{background:#edf0f3}.report-card .monitoring-screen img{object-fit:contain;min-height:0}.monitoring-card figcaption{min-height:174px;padding:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.monitoring-card figcaption strong{font-size:18px;line-height:1.15;font-weight:400}.monitoring-card figcaption span{font-size:11px;line-height:1.45;color:var(--muted)}
.meter-connection{height:420px;padding:34px 18px;display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;background:radial-gradient(circle at 50% 42%,rgba(74,190,213,.13),transparent 36%),linear-gradient(145deg,#10191c,#07090a)}.glucose-meter{position:relative;aspect-ratio:.72;padding:17px 12px;border:2px solid #7a8588;border-radius:18px;background:#e8edee;color:#101314;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 16px 24px rgba(0,0,0,.3)}.glucose-meter small{position:absolute;top:15px;font:6px/1 "IBM Plex Mono",monospace;color:#526064}.glucose-meter strong{font:34px/1 "IBM Plex Mono",monospace}.glucose-meter span{font:7px/1 "IBM Plex Mono",monospace;color:#667174}.glucose-meter i{position:absolute;bottom:14px;width:24px;height:24px;border:1px solid #9aa4a6;border-radius:50%}.sync-signal{display:flex;flex-direction:column;align-items:center;gap:6px}.sync-signal i{display:block;border:1px solid #4abed5;border-left:0;border-bottom:0;border-radius:0 100% 0 0}.sync-signal i:nth-child(1){width:8px;height:8px}.sync-signal i:nth-child(2){width:16px;height:16px}.sync-signal i:nth-child(3){width:24px;height:24px}.sync-signal b{font:6px/1 "IBM Plex Mono",monospace;color:#4abed5}.meter-phone{aspect-ratio:.58;padding:22px 11px;border:2px solid #546064;border-radius:22px;background:#f4f8f9;color:#111819;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 16px 24px rgba(0,0,0,.3)}.meter-phone span{font:6px/1 "IBM Plex Mono",monospace;color:#3a9fb2}.meter-phone strong{margin:22px 0 2px;font:32px/1 "IBM Plex Mono",monospace}.meter-phone small{font-size:8px;color:#687174}.meter-phone em{margin-top:24px;padding:8px;border-radius:12px;background:#dff1f3;color:#258b9d;font:7px/1 "IBM Plex Mono",monospace;font-style:normal;text-align:center}
@media(max-width:1000px){.monitoring-gallery,.monitoring-path{grid-template-columns:1fr 1fr}.monitoring-path>i{display:none}.monitoring-path>div:nth-of-type(3),.monitoring-path>div:nth-of-type(4){border-top:1px solid var(--line)}}
@media(max-width:620px){.monitoring-path,.monitoring-gallery{grid-template-columns:1fr}.monitoring-path>i{display:none}.monitoring-path>div{min-height:116px;border-bottom:1px solid var(--line)}.monitoring-path>div:last-child{border-bottom:0}.monitoring-screen,.meter-connection{height:390px}.monitoring-card figcaption{min-height:0}}

/* Monitoring story follows connected-device onboarding and shares the activity phone system. */
.monitoring-section{margin:64px 0 0;padding:56px 0 12px;border-top:1px solid var(--line);display:grid;grid-template-columns:.75fr 1.25fr;column-gap:60px;align-items:start}.monitoring-section>.tag{grid-column:1;font:8px/1.5 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.monitoring-section>h3{grid-column:1;max-width:520px;margin:0;font-size:clamp(30px,3.4vw,50px);line-height:1.08;font-weight:300;letter-spacing:-.04em}.monitoring-intro{grid-column:2;grid-row:1/3;align-self:end;max-width:700px;margin:0;font-size:17px;line-height:1.58;color:#b4b4b0}.monitoring-path,.monitoring-phone-stage{grid-column:1/-1}.monitoring-phone-stage{padding:42px 30px 54px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start;background:#090a0a}.monitoring-phone-stage .activity-device img{object-fit:fill!important}.monitoring-phone-stage .activity-screen-main{order:0}
@media(max-width:1100px){.monitoring-phone-stage{grid-template-columns:repeat(4,220px);overflow-x:auto;scroll-snap-type:x mandatory}.monitoring-phone-stage .activity-screen{scroll-snap-align:center}}
@media(max-width:700px){.monitoring-section{margin-top:46px;padding-top:46px;grid-template-columns:1fr;gap:0}.monitoring-section>.tag,.monitoring-section>h3,.monitoring-intro{grid-column:1;grid-row:auto}.monitoring-section>h3{margin-bottom:20px}.monitoring-intro{font-size:17px}.monitoring-phone-stage{display:flex;padding:28px 16px 40px}.monitoring-phone-stage .activity-screen{flex:0 0 230px}}

/* Keep every workflow title on the same baseline regardless of copy length. */
.monitoring-path strong{margin:40px 0 8px}

/* Preserve the native proportions of every diabetes-care screen. */
.monitoring-phone-stage .activity-device img{
  object-fit:contain!important;
  object-position:top center!important;
}
.monitoring-phone-stage .activity-screen:nth-child(1) .activity-device::after,
.monitoring-phone-stage .activity-screen:nth-child(3) .activity-device::after,
.monitoring-phone-stage .activity-screen:nth-child(4) .activity-device::after{
  bottom:8px;width:46%;height:14px;border-radius:0;
}
.monitoring-phone-stage .activity-screen:nth-child(1) .activity-device::after{background:#f3f4fc}
.monitoring-phone-stage .activity-screen:nth-child(3) .activity-device::after,
.monitoring-phone-stage .activity-screen:nth-child(4) .activity-device::after{background:#329db4}
.monitoring-phone-stage .activity-device::after{display:none}

/* Supporting copy remains readable at the wide portfolio layout. */
.journey-flow li small{line-height:1.65}
.journey-flow li strong{line-height:1.7;margin-bottom:12px}
.journey-flow li span{line-height:1.8}
.journey-flow li em{line-height:1.65}

.monitoring-path b{font-size:10px}
.monitoring-path strong{font-size:20px}
.monitoring-path span{font-size:14px;line-height:1.45;color:#a6a8a5}
.activity-screen figcaption span{font-size:10px!important}
.activity-screen figcaption strong{font-size:18px!important;line-height:1.2!important}
.activity-screen figcaption small{font-size:14px!important;line-height:1.42!important;color:#a6a8a5!important}
.companion-role-grid p{font-size:15px;line-height:1.5;color:#a6a8a5}

/* Diagram, monitoring, and companion-system legibility. */
.approach-panel-head b{font-size:18px;line-height:1.25}
.monitoring-section>.tag{margin-bottom:14px}
.monitoring-section>h3{max-width:760px;margin:0;font-size:clamp(32px,3.4vw,50px);line-height:1.08;letter-spacing:-.04em}
.character-strip-head span{font-size:10px;line-height:1.25}
.character-strip-head strong{font-size:17px;line-height:1.35}
.companion-role-grid span{font-size:10px;line-height:1.3}
.companion-role-grid strong{font-size:20px;line-height:1.25}
.companion-role-grid p{font-size:15px;line-height:1.55}
.monitoring-phone-stage .activity-device video{display:block;width:100%;height:100%;object-fit:contain;object-position:top center;background:#f3f5f8;border-radius:22px}

/* Keep reader-facing metadata at one legible scale; diagram-internal labels stay compact. */
.case-reveal-label,
.device-before-label,
.device-outcome>span,
.feature-copy .tag,
.monitoring-section>.tag,
.approach-panel-head>span,
.activity-screen figcaption span,
.activity-principles span,
.character-strip-head span,
.companion-key span,
.companion-role-grid span,
.companion-principles span{
  font-size:11px!important;
  line-height:1.4!important;
}

/* Complete the supporting-copy legibility pass. */
.activity-metric-copy small{font-size:15px;line-height:1.45;color:#a6a8a5}
.activity-principles p{font-size:15px;line-height:1.5;color:#a6a8a5}
.companion-principles p{font-size:15px;line-height:1.5;color:#a6a8a5}

/* Match the portrait recordings' native ratio so the full UI remains visible. */
.feature-media .iphone-screen video{
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  object-fit:contain;
  transform:translateZ(0);
  transform-origin:center top;
}
.monitoring-phone-stage .activity-device video{
  object-fit:cover;
  transform:scale(1.025);
  transform-origin:center top;
}

/* Tablet + mobile: a dedicated four-phase journey, not a collapsed desktop map. */
@media(max-width:1180px){
  .research-sketches .approach-panel-head{min-width:0}
  .research-sketches .approach-panel{overflow:hidden}
  .research-service-flow{display:none!important}
  .research-service-compact{position:relative;z-index:1;display:grid;padding:28px;background:#080a0b;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:22px 22px}
  .research-service-compact>header{display:grid;grid-template-columns:.65fr 1.35fr;gap:24px;align-items:end;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid #293236}
  .research-service-compact>header span{color:#4abed5;font:9px/1.4 "IBM Plex Mono",monospace;letter-spacing:.11em}
  .research-service-compact>header strong{font-size:clamp(25px,3.4vw,40px);line-height:1;font-weight:300;text-align:right}
  .compact-flow-track{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .compact-phase{position:relative;min-width:0;min-height:390px;padding:22px;border:1px solid #303b3f;background:linear-gradient(145deg,rgba(17,24,26,.96),rgba(9,12,13,.98));display:flex;flex-direction:column;box-shadow:0 20px 42px rgba(0,0,0,.28)}
  .compact-phase::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--phase-color)}
  .phase-discover{--phase-color:#4abed5}.phase-plan{--phase-color:#8d69bd}.phase-shop{--phase-color:#54a879}.phase-learn{--phase-color:#c76868}
  .compact-phase-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--phase-color);font:10px/1 "IBM Plex Mono",monospace;letter-spacing:.1em}
  .compact-phase-head b{width:32px;height:32px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-weight:400}
  .compact-primary,.compact-step{padding:17px;border:1px solid #34454a;background:#101618;display:flex;flex-direction:column}
  .compact-primary{border-color:#4abed5}
  .compact-primary small,.compact-step small,.compact-branch small{color:#4abed5;font:8px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em}
  .compact-primary strong,.compact-step strong{margin:8px 0 6px;font-size:21px;line-height:1.05;font-weight:400}
  .compact-primary span,.compact-step span{color:#929795;font-size:13px;line-height:1.45}
  .compact-arrow{align-self:center;margin:9px 0;color:var(--phase-color);font:17px/1 "IBM Plex Mono",monospace;font-style:normal}
  .compact-branch{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
  .compact-branch article{min-width:0;padding:16px;border:1px solid #a9547d;background:#121116;display:flex;flex-direction:column;justify-content:flex-end}
  .compact-branch strong{margin-top:28px;font-size:17px;line-height:1.1;font-weight:400}
  .compact-branch em{align-self:center;color:#8c858a;font:8px/1 "IBM Plex Mono",monospace;font-style:normal}
  .phase-plan .compact-step{border-color:#7651a9}.phase-plan .compact-step small{color:#a986d1}
  .phase-plan .compact-step:last-child{margin-top:auto}
  .compact-rule{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:10px 0;padding:11px;border:1px dashed #b38f50;color:#c7a864;font:8px/1.3 "IBM Plex Mono",monospace;letter-spacing:.06em;text-align:center}
  .compact-rule b{color:#696a65;font-weight:400}
  .phase-shop .compact-step{border-color:#408e65}.phase-shop .compact-step small{color:#67bc89}
  .phase-shop .is-action{margin-top:auto;border-color:#bd7239}.phase-shop .is-action small{color:#db925b}
  .compact-tool{margin-top:10px;padding:10px;border:1px dashed #7651a9;color:#a986d1;font:8px/1.3 "IBM Plex Mono",monospace;letter-spacing:.07em;text-align:center}
  .phase-learn .is-optional{border-color:#a54e4e}.phase-learn .is-optional small{color:#cf7474}
  .phase-learn .is-complete{margin-top:auto;border-color:#408e65}.phase-learn .is-complete small{color:#67bc89}
  .compact-loop{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:12px;border-top:1px dotted #5d7478;color:#7b898b;font:8px/1 "IBM Plex Mono",monospace;letter-spacing:.09em}.compact-loop i{color:#4abed5;font-size:18px;font-style:normal}
  .compact-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}.compact-progress span{height:2px;background:#293236}.compact-progress span:nth-child(1){background:#4abed5}.compact-progress span:nth-child(2){background:#8d69bd}.compact-progress span:nth-child(3){background:#54a879}.compact-progress span:nth-child(4){background:#c76868}
  .research-service-flow{
    position:relative;
    height:auto;
    min-width:0;
    display:grid;
    overflow:visible;
  }
  .research-flow-lines,.research-flow-lane,.research-flow-choice{display:none}
  .research-flow-node{
    position:relative;
    left:auto!important;
    top:auto!important;
    width:100%;
    box-sizing:border-box;
    box-shadow:none;
  }
  .research-flow-key{position:relative;left:auto;bottom:auto}
  .research-service-flow{
    padding:26px 18px 30px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "home home"
      "suggested browse"
      "add add"
      "planning list"
      "standard substitute"
      "alert alert"
      "cook glucose"
      "complete scan"
      "key key";
    gap:18px 14px;
    background-size:22px 22px;
  }
  .research-service-flow::before{
    content:"01 DISCOVER   →   02 PLAN   →   03 SHOP + COOK   →   04 LEARN";
    grid-column:1/-1;
    margin:-4px 0 8px;
    padding:13px 14px;
    border:1px solid #26363a;
    background:#0b1011;
    color:#7d898b;
    font:9px/1.4 "IBM Plex Mono",monospace;
    letter-spacing:.1em;
    text-align:center;
  }
  .research-flow-node{
    min-height:118px;
    padding:18px;
    justify-content:flex-end;
    background:linear-gradient(145deg,#12191b,#0c1011);
    box-shadow:0 13px 26px rgba(0,0,0,.3);
  }
  .research-flow-node::before{
    content:"";
    position:absolute;
    left:-1px;right:-1px;top:-1px;
    height:3px;
    background:currentColor;
    opacity:.85;
  }
  .research-flow-node:not(.node-scan)::after{
    content:"↘";
    right:12px;
    bottom:-20px;
    font-size:16px;
  }
  .research-flow-node strong{font-size:20px;line-height:1.05}
  .research-flow-node span{font-size:12px;line-height:1.4}
  .node-home{grid-area:home;min-height:106px}
  .node-suggested{grid-area:suggested;color:#c46d98;transform:translateY(4px)}
  .node-browse{grid-area:browse;color:#c46d98;transform:translateY(14px)}
  .node-add{grid-area:add;color:#9671c5;margin:4px 10% 0;min-height:104px}
  .node-planning{grid-area:planning;color:#9671c5}
  .node-list{grid-area:list;color:#58a97d;transform:translateY(12px)}
  .node-standard{grid-area:standard;color:#91a2bb}
  .node-substitute{grid-area:substitute;color:#ddb86f;transform:translateY(12px)}
  .node-alert{grid-area:alert;color:#d88a4d;margin:4px 10% 0;min-height:104px}
  .node-cook{grid-area:cook;color:#d88a4d}
  .node-glucose{grid-area:glucose;color:#c96767;transform:translateY(12px)}
  .node-complete{grid-area:complete;color:#58a97d}
  .node-scan{grid-area:scan;color:#9671c5;transform:translateY(12px)}
  .research-flow-key{grid-area:key;margin:16px 0 0;padding-top:18px;border-top:1px solid #263033}

  .recipe-video-feature .phone-video,
  .journal-video-feature .phone-video{
    width:min(80vw,640px);
    max-width:none;
  }
}

@media(max-width:520px){
  .research-service-compact{display:block;padding:22px 0 22px 14px;overflow:hidden}
  .research-service-compact>header{grid-template-columns:1fr;margin-right:14px;padding-right:4px}.research-service-compact>header strong{text-align:left;font-size:30px}
  .compact-flow-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px 18px 0;scrollbar-width:none}.compact-flow-track::-webkit-scrollbar{display:none}
  .compact-phase{flex:0 0 82vw;min-height:430px;scroll-snap-align:center}
  .compact-progress{margin-right:14px}
}