/* TEMORA hero — ported from TEMORA-Hero dossier (hero.css), 2 Oct 2026.
   Demo scaffolding (universal box-sizing, body, anchors, demo header) removed;
   the site's own navigation, font and focus styles apply. */
:root{--tm-ink:#1c2229;--tm-blue:#1f4f86;--tm-muted:#596573;--tm-line:#d9e3ed}
.tm-hero,.tm-ecosystem{color:var(--tm-ink)}
.tm-hero{max-width:1600px;min-height:660px;position:relative;margin:0 auto;display:flex;align-items:center;isolation:isolate;padding:50px max(5.4%,calc((100% - 1285px)/2)) 75px;overflow:clip}.tm-hero:before{content:"";position:absolute;inset:-80px 0 0;background:radial-gradient(ellipse at 77% 44%,#e8f3fe 0%,#f5faff 37%,#fff 71%);z-index:-2}.tm-copy{width:51%;z-index:2;position:relative;padding-bottom:30px;pointer-events:none}.tm-copy a{pointer-events:auto}.tm-copy h1{font-size:clamp(42px,4.55vw,70px);font-weight:500;line-height:1.045;letter-spacing:-3.8px;margin:0 0 30px;max-width:780px}.tm-lede{font-size:21px;line-height:1.5;color:var(--tm-muted);max-width:485px;margin:0 0 29px}.tm-promise{margin-bottom:35px}.tm-promise p{font-size:22px;line-height:1.3;font-weight:600;color:#155693;margin:0 0 7px}.tm-promise span{font-size:16px;line-height:1.5;color:#535f6d}.tm-actions{display:flex;align-items:center;gap:29px}.tm-button{padding:19px 25px;background:linear-gradient(135deg,#235a94,#1f4f86);color:#fff;border:1px solid #184777;border-radius:9px;text-decoration:none;display:inline-flex;gap:25px;align-items:center;font-size:17px;box-shadow:0 6px 14px #1f4f8610;transition:transform .2s,box-shadow .2s}.tm-button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #1f4f8622}.tm-text-link{text-decoration:none;font-size:16px;border-bottom:1px solid #6284aa;padding:12px 0 7px}.tm-scene{position:absolute;width:60%;right:0%;top:70px;aspect-ratio:1585/992;margin:0;z-index:1}.tm-photo{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 9%,#000 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 95%,transparent)}.tm-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.tm-beam,.tm-beam-halo,.tm-route{fill:none;stroke:#79bdf7;stroke-width:1.8;stroke-linecap:round}.tm-beam-halo{stroke:#fff;stroke-width:7;opacity:.9;filter:url(#tm-glow)}.tm-route{opacity:.25}.tm-packet{fill:white;stroke:#9dd5ff;stroke-width:1}.tm-packet-glow{fill:#94d7ff;filter:url(#tm-glow);opacity:.7}.tm-packet,.tm-packet-glow{opacity:0}.tm-led{position:absolute;left:50.02%;top:68.7%;width:5px;height:5px;border-radius:50%;background:#6dcaff;box-shadow:0 0 9px 3px #8cd4ff88;transition:box-shadow .35s}.tm-scene[data-phase="hub"] .tm-led{box-shadow:0 0 18px 8px #89cfffcc}.tm-platform{position:absolute;left:75%;top:27%;width:24%;padding:21px 15px 13px;background:linear-gradient(120deg,#fffffff2,#edf5ffed);border:1px solid #b6cbe3;border-radius:13px;box-shadow:4px 12px 19px #4c719c18,2px 2px 0 #d4e2f1;transform:perspective(850px) rotateY(-12deg) rotateZ(4deg);transform-origin:left center}.tm-platform-heading{font-size:17px;font-weight:600;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.tm-status-dot{width:5px;height:5px;background:#4d91cd;border-radius:50%}.tm-reading{display:grid;grid-template-columns:1fr auto;gap:5px 7px;position:relative;background:#ffffffa6;border:1px solid #e5edf7;border-radius:7px;padding:12px 29px 12px 11px;margin:8px 0;transition:background .45s,border-color .45s,box-shadow .45s}.tm-reading-type{font-size:11px;grid-column:1/-1;color:#495766}.tm-reading-value{font-size:18px;font-weight:600;white-space:nowrap;letter-spacing:-.5px}.tm-reading-value small{font-size:10px;font-weight:400;color:#6c7c8b;letter-spacing:0}.tm-check{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:19px;height:19px;background:#dcecff;color:#397abf;border-radius:50%;font-size:12px}.tm-reading.is-received{background:#edf6ff;border-color:#97c7f2;box-shadow:0 0 15px #8bc6fb2b}.tm-platform-footer{font-size:9px;color:#65798e;margin-top:12px;display:flex;gap:8px;justify-content:space-between}.tm-received{color:#326da9}.tm-captions{position:absolute;inset:86% 0 auto;display:grid;grid-template-columns:40% 25% 35%;color:#778595;font-size:12px;text-align:center;padding-left:6%}.tm-captions span:before{content:"";display:block;height:27px;width:1px;background:#bcccdc;margin:0 auto 10px}.tm-motion{position:absolute;right:1%;bottom:1%;width:32px;height:32px;border:1px solid #d6e4f0;background:#ffffffe0;border-radius:50%;color:#527495;cursor:pointer;opacity:.5}.tm-motion:hover,.tm-motion:focus-visible{opacity:1}.tm-ecosystem{max-width:1285px;margin:0 auto;padding:28px 0;border-top:1px solid #d9dfe6;display:flex;align-items:center;gap:45px}.tm-ecosystem>p{flex:0 0 330px;font-size:17px;line-height:1.4;margin:0}.tm-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);flex:1}.tm-marquee-track{display:flex;width:max-content;align-items:center;animation:tm-marquee 35s linear infinite}.tm-marquee-track span{flex:0 0 175px;text-align:center;font-size:27px;color:#155693;font-weight:700;letter-spacing:-1px}.tm-marquee-track span:nth-child(5n + 2){color:#25292e;font-size:24px;letter-spacing:2px;font-weight:500}.tm-marquee-track span:nth-child(5n + 3){font-weight:400}.tm-marquee-track span:nth-child(5n + 5){font-size:22px}.tm-paused .tm-marquee-track{animation-play-state:paused}@keyframes tm-marquee{to{transform:translateX(-50%)}}
@media(min-width:1600px){.tm-scene{top:60px}.tm-copy h1{font-size:70px}.tm-hero{min-height:745px}}
@media(max-width:1150px) and (min-width:761px){.tm-copy h1{letter-spacing:-2.8px}.tm-hero{min-height:610px;padding-top:40px}.tm-lede{font-size:18px;max-width:380px}.tm-scene{top:145px}.tm-promise span{max-width:300px;display:block}.tm-platform{padding:15px 10px}.tm-platform-heading{font-size:14px}.tm-reading-value{font-size:16px}.tm-platform-footer{font-size:8px}.tm-ecosystem{margin:0 5.4%;gap:20px}.tm-ecosystem>p{flex-basis:270px;font-size:15px}}
@media(max-width:760px){.tm-hero{display:block;padding:33px 23px 22px;min-height:0;overflow:hidden}.tm-copy{width:100%;padding:0;pointer-events:auto}.tm-copy h1{font-size:clamp(39px,9.6vw,60px);letter-spacing:-2px;line-height:1.055;margin-bottom:23px;max-width:530px}.tm-desktop-break{display:none}.tm-lede{font-size:17px;line-height:1.45;max-width:450px;margin-bottom:21px}.tm-promise{margin-bottom:24px}.tm-promise p{font-size:20px}.tm-promise span{font-size:13px;display:block;max-width:335px}.tm-actions{gap:23px}.tm-button{font-size:14px;padding:16px 19px;gap:15px}.tm-text-link{font-size:14px}.tm-scene{position:relative;top:auto;right:auto;width:calc(100% + 46px);margin:15px -23px 14px;aspect-ratio:1585/992}.tm-platform{left:68%;top:24%;width:31%;padding:12px 8px 9px;border-radius:9px}.tm-platform-heading{font-size:11px;margin-bottom:7px}.tm-reading{padding:7px 17px 7px 6px;gap:3px;margin:5px 0;border-radius:5px}.tm-reading-type{font-size:8px;letter-spacing:-.15px}.tm-reading-value{font-size:13px;letter-spacing:-.35px}.tm-reading-value small{font-size:6px}.tm-check{right:4px;width:12px;height:12px;font-size:8px}.tm-platform-footer{font-size:6px;display:block;margin-top:6px}.tm-platform-footer .tm-received{display:none}.tm-photo{object-fit:fill}.tm-led{left:50%;top:68.7%;width:3px;height:3px}.tm-captions{font-size:9px;inset:87% 0 auto;grid-template-columns:39% 26% 35%}.tm-captions span:before{height:14px;margin-bottom:5px}.tm-motion{width:26px;height:26px;bottom:0;right:3%}.tm-ecosystem{margin:0 23px;padding:22px 0 28px;display:block}.tm-ecosystem>p{font-size:13px;text-align:center;margin-bottom:23px}.tm-ecosystem>p br{display:none}.tm-marquee-track span{flex-basis:140px;font-size:22px}.tm-marquee-track span:nth-child(5n + 2){font-size:19px}.tm-marquee-track span:nth-child(5n + 5){font-size:18px}}
@media(prefers-reduced-motion:reduce){.tm-marquee-track{animation:none}.tm-button,.tm-reading,.tm-led{transition:none}.tm-motion{display:none}}

/* ---- project adaptations ---- */
/* site font (Instrument Sans) is slightly wider than the demo's Arial: tighten to match reference metrics */
.tm-copy h1{font-family:var(--font);font-stretch:96%}
/* official TEMORA hub render composited over the scene's generated hub (same scale, perspective and contact point) */
.tm-hub-official{position:absolute;left:41.45%;top:53.23%;width:17.65%;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(30,45,70,.08))}
.tm-led{left:50.03%;top:64.5%}
@media(max-width:760px){.tm-led{left:50.03%;top:64.5%}}
/* real wordmark assets instead of the demo's text names */
.tm-marquee-track{margin:0;padding:0;list-style:none}
.tm-marquee-track li{flex:0 0 auto;display:flex;align-items:center;padding:0 38px}
.tm-marquee-track img{height:30px;width:auto}
.tm-marquee-track .lg-mask{display:block;height:30px;width:var(--w);background:var(--c);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.tm-ecosystem{flex-wrap:wrap}
.tm-eco-note{flex:1 0 100%;margin:0;font-size:12.5px;color:#6b7684}
.tm-eco-note a{color:var(--tm-blue)}
@media(max-width:760px){.tm-marquee-track li{padding:0 24px}.tm-marquee-track img,.tm-marquee-track .lg-mask{height:22px}.tm-marquee-track .lg-mask{width:calc(var(--w)*.72)}.tm-eco-note{margin-top:16px;text-align:center}}
/* the home page's section after the hero keeps its own spacing */
.tm-ecosystem + .sect{padding-top:clamp(64px,7vw,104px)}
/* calibration against APPROVED-REFERENCE: hub overlay on the measured generated hub (x 618–878, y 650–805 of 1585×992) */
.tm-hub-official{left:38.36%;top:58.06%;width:17.65%}
.tm-led,.tm-scene .tm-led{left:46.94%;top:69.35%}
/* the reference shows the platform card whole: keep the scene clear of the viewport edge */
@media(min-width:761px){.tm-scene{right:2.5%;width:58%}}
/* brand strip: wordmarks on one row, reference note on its own line */
.tm-ecosystem{display:grid;grid-template-columns:330px minmax(0,1fr);align-items:center;column-gap:45px;row-gap:14px}
.tm-ecosystem>p:first-child{flex:none}
.tm-marquee{min-width:0}
.tm-eco-note{grid-column:1/-1}
@media(max-width:1150px) and (min-width:761px){.tm-ecosystem{grid-template-columns:270px minmax(0,1fr);column-gap:20px}}
@media(max-width:760px){.tm-ecosystem{display:block}}
/* final hub composite: official render bottom-aligned on the generated hub's footprint (x 668–928, y 600–757),
   the generated hub's floor reflection softened with the sampled floor tone (#DBEBFD),
   and a faint reflection of the official hub so it sits on the same glossy surface */
.tm-hub-official{left:41.45%;top:53.23%;width:17.65%}
.tm-hub-reflect{position:absolute;left:41.45%;top:76.4%;width:17.65%;height:auto;transform:scaleY(-1);opacity:.16;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 34%);mask-image:linear-gradient(to top,#000 0%,transparent 34%)}
.tm-floor-patch{position:absolute;left:41.3%;top:75.8%;width:18.4%;height:10.5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#DBEBFD 62%,rgba(219,235,253,0) 100%);filter:blur(2px)}
.tm-led,.tm-scene .tm-led{left:50.03%;top:64.5%}
/* measured offset: generated hub base sits 3.9 % lower than estimated */
.tm-hub-official{top:57.1%;width:18%;left:41.3%}
.tm-hub-reflect{top:80.6%;width:18%;left:41.3%}
.tm-floor-patch{top:80%;left:41%;width:19%;height:11%}
.tm-led,.tm-scene .tm-led{left:50.05%;top:68.6%}
.tm-hub-official,.tm-hub-reflect{width:18.5%;left:41.15%}
.tm-led,.tm-scene .tm-led{left:49.7%;top:67.1%}
/* tablet (761–1150): side by side is too tight with the site font, so copy and scene stack (dossier §7) */
@media(max-width:960px) and (min-width:761px){
  .tm-hero{display:block;padding:40px max(5.4%,32px) 30px;min-height:0}
  .tm-copy{width:100%;padding-bottom:0}
  .tm-copy h1{max-width:760px}
  .tm-lede{max-width:520px}
  .tm-scene{position:relative;top:auto;right:auto;width:100%;margin:26px 0 0}
  .tm-platform{padding:18px 13px 12px}
  .tm-reading-value{font-size:17px}
}
/* phone: card clear of the edge, no caption collision, motion control out of the card's way */
@media(max-width:760px){
  .tm-platform{left:65.5%;top:22%;width:31.5%;padding:10px 7px 8px}
  .tm-platform-heading{font-size:10.5px;margin-bottom:5px}
  .tm-reading{padding:6px 15px 6px 6px;margin:4px 0}
  .tm-reading-type{font-size:7.5px}
  .tm-reading-value{font-size:12px}
  .tm-platform-footer{font-size:6px;margin-top:4px}
  .tm-captions{inset:89% 0 auto}
  .tm-motion{top:2%;bottom:auto;right:3%}
}
@media(max-width:1150px) and (min-width:961px){
  .tm-scene{top:150px;width:60%;right:1.5%}
  .tm-platform{top:20%;padding:12px 9px 9px}
  .tm-platform-heading{font-size:13px;margin-bottom:8px}
  .tm-reading{padding:7px 22px 7px 8px;margin:5px 0}
  .tm-reading-type{font-size:9.5px}
  .tm-reading-value{font-size:14.5px}
  .tm-platform-footer{font-size:7.5px;margin-top:6px}
  .tm-captions{inset:90% 0 auto}
}
@media(max-width:400px){.tm-platform{top:19%}.tm-reading{padding:5px 14px 5px 5px;margin:3px 0}.tm-captions{inset:91% 0 auto}.tm-captions span:before{height:10px;margin-bottom:3px}}
html:not(.js) .tm-marquee-track{animation:none;flex-wrap:wrap;width:auto}
@media(min-width:1151px){.tm-scene{top:-34px;width:62%;right:1%}.tm-hero{min-height:640px}}
/* finitions: layer order (photo → flows → official hub → indicator → card); packets fade out before the hub silhouette */
.tm-photo{position:relative;z-index:0}
.tm-flow{z-index:1}
.tm-floor-patch,.tm-hub-reflect{z-index:2}
.tm-hub-official{z-index:3}
.tm-led{z-index:4}
.tm-platform,.tm-captions,.tm-motion{z-index:5}
.tm-led{width:4px;height:4px;box-shadow:0 0 6px 2px #8cd4ff66}
.tm-scene[data-phase="hub"] .tm-led{box-shadow:0 0 10px 4px #89cfffaa}

/* ================= Comparison (editorial, from COMPARATIF-REFERENCE) ================= */
.cx{padding:clamp(72px,8vw,112px) 0 clamp(40px,5vw,64px);color:#1C2229}
.cx-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:center;margin-bottom:clamp(40px,4.5vw,60px)}
.cx-head h2{font-size:clamp(32px,3.6vw,52px);font-weight:500;line-height:1.06;letter-spacing:-0.035em;max-width:14.5em}
.cx-head p{font-size:clamp(18px,1.55vw,22px);line-height:1.45;color:#596573}
.cx-cols{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:0;
  grid-template-rows:auto auto auto 1fr auto}
.cx-col{display:grid;grid-template-rows:subgrid;grid-row:1/6;padding:0 clamp(24px,3.6vw,56px)}
.cx-app{padding-left:0;border-right:1px solid #DDE8F3}
.cx-tm{padding-right:0;position:relative}
.cx-tm::before{content:"";position:absolute;z-index:-1;left:6%;right:-4%;top:28%;bottom:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(214,232,250,.9),rgba(214,232,250,0));pointer-events:none}
.cx h3{font-size:clamp(24px,2.1vw,30px);font-weight:500;letter-spacing:-0.025em;line-height:1.15}
.cx-sub{margin-top:4px;font-size:16px;color:#596573}
.cx-cond{margin-top:24px;display:flex;align-items:center;gap:16px;font-size:clamp(17px,1.35vw,19px);font-weight:500;color:#1C2229}
.cx-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#EEF4FB}
.cx-ic svg{width:24px;height:24px;fill:none;stroke:#1F4F86;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cx-stage{margin-top:28px;min-height:400px;display:flex;align-items:center}
/* left: a generic third-party phone, HTML screen */
.cx-stage-app{gap:clamp(24px,3vw,48px)}
.cx-phone{flex:none;width:200px;aspect-ratio:9/18.6;border-radius:34px;padding:7px;
  background:linear-gradient(145deg,#3a3f46,#15181c 40%,#2a2e34);box-shadow:inset 0 0 0 1.5px #555b63,0 2px 4px rgba(28,34,41,.18),0 30px 40px -26px rgba(28,34,41,.45)}
.cx-screen{position:relative;height:100%;border-radius:28px;background:#fff;overflow:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.cx-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;color:#1C2229;padding:2px 6px 0}
.cx-status i{width:58px;height:17px;border-radius:10px;background:#111;position:absolute;left:50%;top:9px;transform:translateX(-50%)}
.cx-app-name{margin-top:10px;font-size:14px;font-weight:600;color:#1C2229}
.cx-app-card{display:grid;padding:14px 12px;border-radius:12px;background:#F2F6FB}
.cx-app-card span{font-size:11.5px;color:#596573}
.cx-app-card b{font-size:30px;font-weight:500;letter-spacing:-0.02em;line-height:1.1;margin-top:6px;color:#1C2229}
.cx-app-card em{font-style:normal;font-size:12.5px;color:#596573}
.cx-app-sync{display:flex;gap:9px;align-items:center;padding:12px 10px;border-radius:12px;background:#EAF2FC;font-size:10px;color:#596573}
.cx-app-sync b{display:block;font-size:11px;font-weight:600;color:#1C2229}
.cx-app-sync i{flex:none;width:20px;height:20px;border-radius:50%;background:#1F4F86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.cx-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:30px}
.cx-steps::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:#C9DAEC}
.cx-steps li{position:relative;padding-left:32px;font-size:17px;line-height:1.3;color:#3B444E}
.cx-steps li:first-child{color:#1C2229;font-weight:500}
.cx-steps li::before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:50%;background:#C9DCF1;box-shadow:0 0 0 3px #fff;transition:background-color .35s,box-shadow .35s}
.cx-steps li.on::before{background:#3C7FC4;box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(60,127,196,.18)}
/* right: one action, the official hub */
.cx-stage-tm{position:relative;flex-direction:column;align-items:stretch}
.cx-action{position:relative;z-index:2;padding-left:clamp(80px,9vw,140px)}
.cx-action b{display:block;font-size:clamp(24px,2.2vw,30px);font-weight:500;letter-spacing:-0.02em;color:#1C2229}
.cx-action span{display:block;margin-top:6px;font-size:17px;color:#3B444E}
.cx-hubwrap{position:relative;flex:1;min-height:260px;margin-top:8px}
.cx-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.cx-route{fill:none;stroke:#8EC0EE;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cx-dot{fill:#fff;stroke:#6FAEEA;stroke-width:1.5;filter:drop-shadow(0 0 5px rgba(80,150,230,.9));opacity:0}
.cx-hub{position:absolute;z-index:1;left:44%;top:40%;width:clamp(170px,16vw,230px);transform:translate(-30%,-30%);filter:drop-shadow(0 2px 2px rgba(28,34,41,.08)) drop-shadow(0 16px 16px rgba(28,34,41,.12))}
.cx-hub-shadow{position:absolute;z-index:1;left:44%;top:40%;width:clamp(150px,14vw,200px);height:22px;transform:translate(-24%,calc(clamp(90px,8vw,120px)));border-radius:50%;background:radial-gradient(closest-side,rgba(28,34,41,.22),rgba(28,34,41,0));filter:blur(4px)}
.cx-led{position:absolute;z-index:2;width:4px;height:4px;border-radius:50%;background:#6dcaff;left:calc(44% + clamp(170px,16vw,230px)*0.187);top:calc(40% + clamp(170px,16vw,230px)*0.085);box-shadow:0 0 6px 2px #8cd4ff66;transition:box-shadow .4s}
.cx-cols[data-phase="hub"] .cx-led{box-shadow:0 0 12px 5px #89cfffaa}
/* shared result rows, aligned */
.cx-result{display:flex;align-items:center;gap:18px;margin-top:22px;padding:22px 24px;border-radius:14px;background:#F6F9FC;font-size:clamp(17px,1.35vw,20px);color:#1C2229;transition:background-color .5s,box-shadow .5s}
.cx-tm .cx-result{background:#EEF5FD}
.cx-result i{flex:none;width:30px;height:30px;border-radius:50%;padding-right:18px;box-sizing:content-box;border-right:1px solid #D6E2EF;
  background:#1F4F86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 7px center/16px no-repeat;background-clip:content-box}
.cx-result b{font-weight:600}
.cx-cols.received .cx-result{box-shadow:0 0 0 1.5px rgba(60,127,196,.35),0 8px 24px -12px rgba(60,127,196,.45)}
.cx-end{margin-top:clamp(36px,4vw,52px);text-align:center}
.cx-end p{font-size:clamp(20px,1.9vw,27px);font-weight:500;letter-spacing:-0.015em;color:#1C2229}
.cx-end small{display:block;margin-top:10px;font-size:14px;color:#6B7684}
.cx-end small a{color:#1F4F86}
.cx-motion{position:absolute;right:0;top:0}
@media(prefers-reduced-motion:reduce){.cx-motion{display:none}}
html:not(.js) .cx-motion{display:none}
/* tablet */
@media(max-width:1100px){.cx-phone{width:160px;border-radius:28px}.cx-screen{border-radius:22px}.cx-app-card b{font-size:24px}.cx-steps{gap:22px}.cx-steps li{font-size:15.5px}.cx-stage{min-height:340px}}
@media(max-width:900px){.cx-head{grid-template-columns:1fr}.cx-phone{display:none}.cx-stage{min-height:0}}
/* mobile: conditions side by side, compact comparison, nothing hidden */
@media(max-width:760px){
  .cx-col{padding:0 12px}.cx-app{padding-left:0}.cx-tm{padding-right:0}
  .cx h3{font-size:19px}.cx-sub{font-size:13.5px}
  .cx-cond{flex-direction:column;align-items:flex-start;gap:10px;font-size:15px;margin-top:16px;min-height:96px}
  .cx-ic{width:40px;height:40px}.cx-ic svg{width:20px;height:20px}
  .cx-stage{margin-top:18px}
  .cx-steps{gap:14px}.cx-steps li{font-size:14px;padding-left:22px}.cx-steps li::before{width:10px;height:10px;top:4px}.cx-steps::before{left:4.5px}
  .cx-action{padding-left:0}.cx-action b{font-size:17px}.cx-action span{font-size:14px}
  .cx-hubwrap{min-height:150px}.cx-hub{width:110px;left:30%;top:36%}.cx-hub-shadow{width:96px;left:30%;transform:translate(-24%,58px)}
  .cx-led{left:calc(30% + 110px*0.187 - 110px*0.3 + 110px*0.3);top:calc(36% + 110px*0.085)}
  .cx-result{flex-direction:column;align-items:flex-start;gap:8px;padding:14px;font-size:14.5px}.cx-result i{border-right:0;padding-right:0;width:26px;height:26px;background-position:center;background-size:14px}
  .cx-result b{display:block}
  .cx-end p{font-size:19px}
  .cx-motion{top:auto;bottom:-44px}
}
/* comparison fixes: hub in its own box (natural ratio), LED relative to the render, result icon + divider */
.cx-hubwrap{display:grid;place-items:center}
.cx-hubbox{position:relative;z-index:1;width:clamp(170px,15vw,220px)}
.cx-hubbox .cx-hub{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;display:block}
.cx-hubbox .cx-hub-shadow{position:absolute;left:8%;right:8%;bottom:2%;top:auto;width:auto;height:16%;transform:none}
.cx-hubbox .cx-led{left:48.65%;top:47.05%;transform:translate(-50%,-50%)}
.cx-result i{width:30px;height:30px;padding:0;border-right:0;background:#1F4F86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;position:relative;margin-right:18px}
.cx-result i::after{content:"";position:absolute;right:-19px;top:-4px;bottom:-4px;border-right:1px solid #D6E2EF}
@media(max-width:760px){.cx-hubbox{width:112px}.cx-result i{width:26px;height:26px;background-size:14px;margin-right:0}.cx-result i::after{display:none}}
.cx-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 0 6px;border-top:1px solid #EEF2F6;font-size:9.5px;color:#8A95A3}
.cx-tabs .on{color:#1F4F86;font-weight:600}
/* Comparison, phones: shorter labels and a step count, both columns kept side by side. */
.cx-s,.cx-count{display:none}
@media(max-width:760px){
  .cx-cond .cx-l,.cx-result .cx-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cx-cond .cx-s{display:inline}
  .cx-result .cx-s{display:block;font-size:12.5px;color:#4E5A66;margin-bottom:2px}
  .cx-cond{flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px;min-height:0;font-size:13.5px;font-weight:600}
  .cx-cond .cx-ic{flex:none;width:30px;height:30px}
  .cx-count{display:block;margin:6px 0 10px;font-size:13px;font-weight:600;color:#1F4F86;padding:5px 10px;border-radius:999px;background:#EEF5FD;width:max-content}
  .cx-app .cx-count{color:#4E5A66;background:#F2F5F8}
}
/* Hero spacing (6 Oct 2026): same title, size and line breaks; text and scene kept apart.
   Padding follows the 1600px hero, not the window (very wide screens), and on wide layouts the scene
   sits 70px lower so the monitor faces the short last line instead of "patients". */
@media(min-width:761px){.tm-hero{padding-left:max(5.4%,calc((min(100%,1600px) - 1285px)/2));padding-right:max(5.4%,calc((min(100%,1600px) - 1285px)/2))}}
@media(min-width:1151px){.tm-scene{transform:translateY(70px)}}
/* Motion controls: 44px touch target, same visible size. */
.tm-motion::after{content:"";position:absolute;inset:-10px;border-radius:50%}
@media(min-width:1151px) and (max-width:1350px){.tm-lede{max-width:390px}}
/* 1151–1439px: the "Your platform" card sits a little higher so it clears its caption and tick line. */
@media(min-width:1151px) and (max-width:1279px){.tm-platform{top:10.5%}}
@media(min-width:1280px) and (max-width:1439px){.tm-platform{top:17%}}
/* The scene now starts inside the hero: its top edge fades into the hero background (no straight line). */
@media(min-width:1151px){.tm-photo{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 16%);mask-image:linear-gradient(to right,transparent,#000 9%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 16%);-webkit-mask-composite:source-in;mask-composite:intersect}}
/* Background stays behind the hero at every width (6 Oct 2026): the scene's top edge always fades into the hero
   background, and when copy and scene are stacked (≤960px) the scene rises under the copy (its sky only, devices stay clear). */
@media(max-width:1150px){.tm-photo{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 9%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 30%);-webkit-mask-composite:source-in;mask-composite:intersect}}
@media(max-width:960px) and (min-width:761px){.tm-scene{margin-top:-9%}}


/* Mobile hero readability (mandate 7 Oct 2026, from the 4 Oct proposal): same elements and direction;
   the destination card sits under the scene at a readable size, actions share one width. */
@media(max-width:760px){
  .tm-hero .tm-actions{flex-direction:column;align-items:stretch;gap:6px}
  .tm-hero .tm-button{justify-content:center;font-size:16px;padding:17px 22px}
  .tm-hero .tm-text-link{align-self:center;font-size:15px;padding:12px 0 8px;min-height:44px;display:inline-flex;align-items:center}
  .tm-hero .tm-scene{margin-bottom:172px}
  .tm-hero .tm-platform{left:23px;right:23px;top:calc(100% + 6px);width:auto;transform:none;padding:14px 14px 12px;border-radius:12px}
  .tm-hero .tm-platform-heading{font-size:14px;margin-bottom:10px}
  .tm-hero .tm-platform .tm-reading{display:inline-grid;width:calc(50% - 5px);vertical-align:top;margin:0;padding:10px 26px 10px 10px;gap:3px;border-radius:8px}
  .tm-hero .tm-platform .tm-reading+.tm-reading{margin-left:6px}
  .tm-hero .tm-reading-type{font-size:13px;letter-spacing:0}
  .tm-hero .tm-reading-value{font-size:19px;letter-spacing:-.4px}
  .tm-hero .tm-reading-value small{font-size:13px}
  .tm-hero .tm-check{right:8px;width:16px;height:16px;font-size:10px}
  .tm-hero .tm-platform-footer{font-size:12px;display:flex;margin-top:10px}
  .tm-hero .tm-platform-footer .tm-received{display:inline}
  .tm-hero .tm-captions{font-size:11.5px;grid-template-columns:39% 26% 35%}
  .tm-hero .tm-captions span:last-child{visibility:hidden}
  .tm-hero .tm-motion{top:2%}
}
@media(max-width:760px){.tm-hero .tm-captions{inset:83.5% 0 auto}.tm-hero .tm-platform{top:calc(100% + 10px)}}