:root{--teal:#0abab5;--p:0;color:#111;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Noto Sans',Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff}a{color:inherit;text-decoration:none}header{height:68px;position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1120px)/2));background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid #00000008}.brand{font-size:23px;font-weight:760;letter-spacing:-1.2px}.brand span{font-weight:400;color:#747474}.register{background:var(--teal);border-radius:30px;min-height:40px;padding:10px 19px;color:#fff;font-size:14px;font-weight:700;display:flex;gap:15px;align-items:center}.register:hover{background:#079e9a}main{height:170svh;min-height:1140px}.hero{position:sticky;top:68px;min-height:calc(100svh - 68px);max-width:1140px;margin:auto;overflow:hidden;padding:30px 16px 0}.intro{text-align:center;position:relative;z-index:4}.eyebrow{font-size:12px;letter-spacing:.16em;margin:0 0 17px;color:#555;font-weight:500}h1{font-size:clamp(27px,7.25vw,40px);letter-spacing:-.065em;line-height:1.45;margin:0;font-weight:800}.sub{font-size:14px;letter-spacing:.02em;margin:15px 0 0;color:#444}.sub span{margin:0 6px;color:var(--teal)}.scene{position:relative;width:100%;max-width:440px;aspect-ratio:400/490;margin:0 auto;perspective:850px;perspective-origin:50% 42%;isolation:isolate}figure{margin:0;position:absolute}figure img{display:block;width:100%;height:100%;object-fit:cover}.screen{position:absolute;left:7%;top:34%;width:43%;border-radius:26px;overflow:hidden;transform:translate3d(0,calc(var(--p)*22px),-65px) rotateX(13deg) rotateY(22deg) rotateZ(-13deg);box-shadow:8px 11px 0 -3px #282a2d,9px 12px 0 -3px #a9adb0,22px 34px 30px -16px #0005,0 0 0 4px #202123,0 0 0 5px #c9cccf;background:#fff;z-index:1}.screen img{width:100%;display:block;height:auto}.source{width:26%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid #ffffffba;box-shadow:1px 2px 0 #bfc5c5,5px 9px 12px -8px #0004,12px 29px 30px -14px #0005;z-index:3;will-change:transform}.salon{left:7%;top:10%;transform:translate3d(calc(var(--p)*-6px),calc(var(--p)*-30px),calc(12px + var(--p)*35px)) rotateX(-10deg) rotateY(22deg) rotateZ(-10deg)}.style{left:38%;top:14%;transform:translate3d(calc(var(--p)*5px),calc(var(--p)*-37px),calc(30px + var(--p)*45px)) rotateX(9deg) rotateY(-20deg) rotateZ(9deg)}figcaption{position:absolute;bottom:7px;left:5px;right:5px;font-size:clamp(10px,2.5vw,12px);font-weight:600;border-radius:7px;padding:7px 3px;background:#ffffffee;text-align:center;white-space:nowrap}.plus{position:absolute;left:30%;top:18%;font-size:28px;font-weight:400;z-index:4}.result{left:55%;top:40%;width:39%;aspect-ratio:3/4;border-radius:15px;overflow:hidden;border:1px solid #ffffffc9;box-shadow:2px 3px 0 #cbd0d1,8px 14px 17px -12px #0005,18px 39px 42px -19px #0006;z-index:5;transform:translate3d(calc(var(--p)*-15px),calc(var(--p)*-26px),calc(55px + var(--p)*65px)) rotateX(calc(-6deg + var(--p)*6deg)) rotateY(calc(-16deg + var(--p)*12deg)) rotateZ(calc(5deg - var(--p)*5deg));will-change:transform}.result figcaption{left:auto;right:8px;padding:8px 10px;font-size:10px}.result i{display:inline-block;width:6px;height:6px;background:var(--teal);border-radius:50%;margin-right:5px}.flow{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}.flow>path{stroke:var(--teal);stroke-width:1.4;fill:none;marker-end:url(#arrow);stroke-dasharray:240;stroke-dashoffset:calc(65 - var(--p)*65);opacity:calc(.45 + var(--p)*.55)}.bottom{position:relative;z-index:6;max-width:360px;margin:0 auto;text-align:center}.main-cta{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#111315;border-radius:40px;padding:18px 25px;color:white;font-size:15px;font-weight:600;box-shadow:0 12px 28px -20px #0abab5}.main-cta:hover{background:#2b2b2b}.scroll{display:block;margin:13px auto 8px;border:0;background:transparent;cursor:pointer;padding:12px 20px}.scroll span{display:block;width:11px;height:11px;border-right:1.5px solid #777;border-bottom:1.5px solid #777;transform:rotate(45deg)}a:focus-visible,button:focus-visible{outline:3px solid #078a86;outline-offset:5px}@media(min-width:760px){header{height:80px}.brand{font-size:30px}.register{padding:12px 26px}.hero{top:80px;min-height:calc(100svh - 80px);display:grid;grid-template-columns:1fr 1fr;align-content:center;align-items:center;padding:50px 30px;overflow:visible}.intro{text-align:left;grid-column:1;grid-row:1;padding-top:45px}.eyebrow{font-size:14px}h1{font-size:clamp(30px,3.3vw,44px);line-height:1.55}.sub{font-size:17px;margin-top:25px}.scene{grid-column:2;grid-row:1/3;width:100%;max-width:510px;aspect-ratio:400/490}.bottom{grid-column:1;grid-row:2;margin:0;width:320px;align-self:start}.main-cta{font-size:16px}.screen{border-radius:32px}.result figcaption{font-size:12px}main{min-height:1200px}.plus{font-size:36px}}@media(max-width:370px){header{padding:0 14px}.brand{font-size:21px}.register{padding:10px 14px}.hero{padding-top:23px}h1{font-size:26px}.eyebrow{font-size:11px}.main-cta{font-size:14px}.scene{margin-top:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.screen,.source,.result{will-change:auto}:root{--p:0!important}}

/* Quiet photographic captions, with a shared optical treatment. */
.source figcaption,.result figcaption{left:8px;right:auto;bottom:8px;max-width:calc(100% - 16px);padding:6px 8px;border-radius:5px;border:1px solid #ffffff38;background:rgba(18,23,25,.66);color:#fff;font-size:12px;font-weight:500;letter-spacing:.035em;line-height:1.3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 2px 7px #0000000d;text-align:left}
.result figcaption{padding:7px 9px;font-size:12px;border-color:#ffffff4d}.result i{width:4px;height:4px;margin-right:6px;vertical-align:middle;background:#5ad8d2}.plus{color:#535e60;font-weight:300;font-size:25px;left:31%;top:22%}.flow>path{stroke-width:1;opacity:calc(.3 + var(--p)*.5)}
@media(min-width:760px){.source figcaption,.result figcaption{font-size:13px;padding:8px 10px}.plus{font-size:30px}}
/* Airy teal depth and content-sized translucent photo labels. */
body{background:radial-gradient(ellipse at 85% 43%,rgba(10,186,181,.085),transparent 49%),radial-gradient(ellipse at 8% 77%,rgba(10,186,181,.045),transparent 43%),linear-gradient(155deg,#fff 12%,#fcfefe 55%,#f5fbfa 100%);background-attachment:fixed}
.scene::before{content:"";position:absolute;z-index:0;inset:18% -10% -3%;pointer-events:none;background:radial-gradient(ellipse at 66% 60%,rgba(10,186,181,.10),transparent 56%),radial-gradient(ellipse at 28% 84%,rgba(26,83,85,.055),transparent 44%);filter:blur(18px);transform:translateY(calc(var(--p)*-12px))}
.source figcaption,.result figcaption{left:50%;right:auto;bottom:8px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 8px);box-sizing:border-box;padding:6px 5px;font-size:12px;letter-spacing:0;line-height:1.45;white-space:normal;overflow-wrap:anywhere;text-align:center;background:rgba(18,23,25,.40);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-shadow:0 1px 3px rgba(0,0,0,.48)}
.result figcaption{padding:7px 8px;white-space:nowrap}
.plus{transform:translate3d(calc(var(--p)*2px),calc(var(--p)*-34px),calc(25px + var(--p)*40px)) rotateX(7deg) rotateY(-12deg) rotateZ(calc(-6deg + var(--p)*10deg));will-change:transform;color:#455a5b;text-shadow:1px 2px 0 rgba(255,255,255,.9),3px 10px 10px rgba(18,54,54,.2);animation:plus-float 5s ease-in-out infinite}
@keyframes plus-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(min-width:760px){.source figcaption,.result figcaption{font-size:13px;padding:7px 8px}}
@media(prefers-reduced-motion:reduce){.plus{animation:none;will-change:auto}}

/* Float the directional cue from the reference's left edge toward the result. */
.plus{left:33%}
.flow{transform:translate3d(calc(var(--p)*2px),calc(var(--p)*-28px),35px);will-change:transform;animation:arrow-float 5s ease-in-out infinite}
.flow>path.generation-arrow{stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4;stroke-dasharray:none;stroke-dashoffset:0;opacity:.85;filter:drop-shadow(0 5px 4px rgba(10,110,107,.13))}
@keyframes arrow-float{0%,100%{translate:0 0}50%{translate:2px -5px}}
@media(prefers-reduced-motion:reduce){.flow{animation:none;will-change:auto}}

/* === Added: entrance choreography === */

/* Entrance: on load, elements appear one by one with a slight rise, so the composite feels "assembled". */
@media(prefers-reduced-motion:no-preference){
  .intro .eyebrow,.intro h1,.intro .sub,.screen,.salon,.style,.plus,.flow,.result,.bottom{opacity:0}
  .intro .eyebrow,.intro h1,.intro .sub,.screen,.salon,.style,.result,.bottom{translate:0 18px;transition:opacity .55s ease,translate .65s cubic-bezier(.22,.61,.36,1)}
  .plus,.flow{transition:opacity .5s ease}
  body.loaded .intro .eyebrow,body.loaded .intro h1,body.loaded .intro .sub,body.loaded .screen,body.loaded .salon,body.loaded .style,body.loaded .plus,body.loaded .flow,body.loaded .result,body.loaded .bottom{opacity:1;translate:0 0}
  .intro .eyebrow{transition-delay:.02s}
  .intro h1{transition-delay:.08s}
  .intro .sub{transition-delay:.12s}
  .screen{transition-delay:.18s}
  .salon{transition-delay:.28s}
  .style{transition-delay:.38s}
  .plus{transition-delay:.45s}
  .flow{transition-delay:.52s}
  .result{transition-delay:.65s}
  .bottom{transition-delay:.78s}
}

/* === Added: feature sections === */

/* ===== LP sections below the FV ===== */
.wrap{max-width:600px;margin:0 auto;padding:0 22px}
.sec{padding:60px 0}
.rule{height:1px;background:#0f3b3a14;max-width:600px;margin:0 auto}
.ey{font-size:12px;letter-spacing:.15em;font-weight:700;color:var(--teal);margin:0 0 13px;text-transform:uppercase}
.ey .n{font-variant-numeric:tabular-nums}
.sec h2{font-size:clamp(23px,6vw,31px);letter-spacing:-.045em;line-height:1.5;font-weight:800;margin:0;color:#141a1a;text-wrap:balance}
.lead{font-size:15px;line-height:1.95;color:#4a5a59;margin:14px 0 0;max-width:38ch}
.thesis{text-align:center}
.thesis h2{font-size:clamp(26px,7.4vw,37px)}
.thesis .lead{max-width:32ch;margin-left:auto;margin-right:auto}
.feat{display:flex;flex-direction:column;gap:26px}
.frame{border-radius:20px;background:#fff;border:1px solid #0f3b3a12;box-shadow:0 30px 52px -34px rgba(9,60,58,.55),0 8px 20px -16px rgba(0,0,0,.32);padding:20px 18px}
.cap{font-size:12px;color:#6b7a79;text-align:center;margin:14px 0 0;line-height:1.5}
.gen{display:flex;align-items:center;justify-content:center;gap:14px}
.gen img{display:block;border-radius:12px;box-shadow:0 10px 20px -12px #0007}
.gen .s1{width:126px}
.gen .s2{width:100px}
.gen .go{color:var(--teal);flex:0 0 auto}
.mock{max-width:300px;margin:0 auto;border-radius:13px;overflow:hidden;background:#fff;border:1px solid #0f3b3a12;box-shadow:0 12px 26px -16px #0008}
.mock .hd{height:30px;background:#f1f4f4;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #00000008}
.mock .hd i{width:7px;height:7px;border-radius:50%;background:#cdd7d6}
.mock .ph{aspect-ratio:16/10;overflow:hidden}
.mock .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.mock .bd{padding:13px 15px 16px}
.mock .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--teal);border:1px solid #0abab555;border-radius:20px;padding:2px 9px}
.mock .mname{font-size:13px;font-weight:800;color:#141a1a;margin:9px 0 11px}
.mock .ln{height:9px;border-radius:5px;background:#e7edec;margin:8px 0}
.mock .ln.w70{width:70%}.mock .ln.w45{width:45%}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.mini{background:#fff;border:1px solid #0f3b3a10;border-radius:14px;padding:16px 15px;box-shadow:0 12px 26px -22px rgba(9,60,58,.7)}
.mini svg{width:22px;height:22px;color:var(--teal);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mini h3{font-size:14px;font-weight:700;margin:11px 0 5px;color:#141a1a}
.mini p{font-size:12px;line-height:1.65;color:#6b7a79;margin:0}
.trust{background:linear-gradient(150deg,#eaf6f5,#f5fbfa);border:1px solid #0abab524;border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:16px}
.trust .t{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:700;color:#182625}
.trust .t svg{width:21px;height:21px;flex:0 0 auto;color:var(--teal);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.trust .t small{display:block;font-size:12px;font-weight:500;color:#5a6a69;margin-top:3px;line-height:1.5}
.final{text-align:center;padding:66px 0 34px}
.final h2{font-size:clamp(23px,6.2vw,31px);letter-spacing:-.04em;line-height:1.55;font-weight:800;color:#141a1a;text-wrap:balance;margin:0 auto;max-width:20ch}
.final .main-cta{max-width:340px;margin:24px auto 0}
.final .note{font-size:12px;color:#6b7a79;margin:15px 0 0}
.foot{border-top:1px solid #0f3b3a14;padding:26px 22px 46px;text-align:center;color:#93a1a0;font-size:12px;line-height:1.9}
.foot .lk{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:11px}
.foot a{color:#4a5a59;font-weight:600}
.foot a:hover{color:var(--teal)}
@media(min-width:760px){
 .wrap{max-width:760px}
 .sec{padding:82px 0}
 .feat{flex-direction:row;align-items:center;gap:44px}
 .feat .copy{flex:1}
 .feat .fw{flex:1;min-width:0}
 .feat.rev{flex-direction:row-reverse}
 .grid{grid-template-columns:repeat(3,1fr)}
 .gen .s1{width:150px}.gen .s2{width:118px}
}

/* Mobile-first editorial cards for actual operation videos. */
.sec{padding:18px 0}.sec .wrap{max-width:1040px;padding:0 18px}.rule{margin:30px auto;max-width:180px;background:#1112}
.thesis{padding-top:36px!important;padding-bottom:38px!important}.thesis .ey{color:#52605f}.thesis .lead{font-size:16px;max-width:36ch}.sec h2{letter-spacing:-.045em}
.demo-card{border-radius:30px;overflow:hidden;padding:38px 24px 21px;display:grid;grid-template-columns:1fr;box-shadow:0 18px 60px -38px #152f3340;border:1px solid #141a1a0b}
.light-card{background:#fff}.dark-card{background:#111516;color:#fff;border-color:#fff1}.demo-copy{text-align:center}.demo-copy .ey{font-size:14px;letter-spacing:.1em;font-weight:600;color:#087d79}.demo-copy h2{font-size:clamp(28px,6.8vw,40px);line-height:1.5}.demo-copy .lead{font-size:16px;line-height:1.85;max-width:none;margin:15px auto 27px;color:#687170}
.dark-card .ey{color:#65dbd4}.dark-card h2{color:#fff}.dark-card .lead{color:#c0c8c7}.demo-media{position:relative;width:min(100%,280px);margin:0 auto;line-height:0;border-radius:21px;overflow:hidden;box-shadow:0 22px 36px -22px #0006;border:1px solid #1112;background:#f5f6f6}.dark-card .demo-media{box-shadow:0 22px 42px -20px #000b;border-color:#fff3}
.operation-video{width:100%;height:auto;aspect-ratio:590/1280;display:block;object-fit:contain;background:#f5f6f6}.video-note{text-align:center;font-size:12px;line-height:1.7;color:#677473;margin:18px 0 0}.dark-card .video-note{color:#a8b6b4}
.sec:has(.grid) .wrap{background:#f1f5f4;border-radius:30px;width:calc(100% - 36px);padding:34px 22px}.grid{gap:13px}.mini{box-shadow:none;border-color:#11100008;border-radius:16px;padding:20px 16px}.mini h3{font-size:15px}.mini p{font-size:14px;line-height:1.8;color:#576460}.mini svg{color:#151c1b}.trust{background:#fff;border-radius:26px;border-color:#152f3312;padding:28px 24px}.trust .t{font-size:16px}.trust .t small{font-size:14px}.final{padding:28px 0 45px}.final .wrap{background:#111516;color:#fff;width:calc(100% - 36px);border-radius:30px;padding:40px 24px}.final h2{color:#fff;max-width:22ch}.final .main-cta{background:#0abab5;color:#071f1e;box-shadow:none}.final .note{color:#bdc8c6;line-height:1.7}.foot{background:#fff;color:#6d7775}.lead{font-size:16px}
@media(min-width:760px){.sec{padding:22px 0}.demo-card{grid-template-columns:1fr 330px;column-gap:45px;align-items:center;padding:55px 65px 32px;border-radius:38px}.demo-copy{text-align:left}.demo-copy h2{font-size:40px}.demo-copy .lead{margin-bottom:0}.demo-media{grid-column:2;grid-row:1/3;width:280px}.video-note{text-align:left;align-self:start;margin-top:22px}.demo-copy{align-self:end}.dark-card{grid-template-columns:330px 1fr}.dark-card .demo-media{grid-column:1}.dark-card .demo-copy,.dark-card .video-note{grid-column:2}.sec:has(.grid) .wrap{padding:45px}.trust{flex-direction:row;justify-content:space-around}.final .wrap{padding:55px}}
@media(max-width:360px){.demo-card{padding:30px 16px 18px}.demo-copy h2{font-size:26px}.demo-copy .lead{font-size:15px}.mini{padding:17px 12px}.mini h3{font-size:14px}}
/* Keep content available when scripting is unavailable. */
@media(prefers-reduced-motion:no-preference){body:not(.js-enabled) .intro .eyebrow,body:not(.js-enabled) .intro h1,body:not(.js-enabled) .intro .sub,body:not(.js-enabled) .screen,body:not(.js-enabled) .salon,body:not(.js-enabled) .style,body:not(.js-enabled) .plus,body:not(.js-enabled) .flow,body:not(.js-enabled) .result,body:not(.js-enabled) .bottom{opacity:1;translate:0 0}}
/* White video cards with a photographic device frame. */
.demo-card,.layout-card{position:relative;background:radial-gradient(ellipse at 90% 65%,rgba(10,186,181,.07),transparent 56%),#fff;color:#141a1a;border:1px solid #1626250c;padding-top:42px;padding-bottom:24px}
.demo-card .demo-copy .feature-title{font-size:clamp(36px,9vw,52px);font-weight:800;line-height:1.28;letter-spacing:-.05em;color:#111516;margin:0 0 22px;display:inline-flex;align-items:center;gap:12px}
.title-accent{height:24px;width:5px;border-radius:4px;background:var(--teal);flex:none;box-shadow:0 0 16px #0abab526}
.feature-tagline{font-size:22px;font-weight:650;line-height:1.5;letter-spacing:-.035em;margin:0;color:#263431}
.demo-card .lead{font-size:15px;line-height:1.9;color:#73817e;margin-top:14px;margin-bottom:30px}
.demo-media,.layout-card .demo-media{position:relative;aspect-ratio:854/1842;width:min(100%,278px);overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;line-height:0;transform:perspective(1200px) rotateY(-9deg) rotateZ(2deg);filter:drop-shadow(12px 23px 17px rgba(8,25,25,.2));animation:device-float 7s ease-in-out infinite;animation-play-state:paused;isolation:isolate}
.layout-card .demo-media{transform:perspective(1200px) rotateY(9deg) rotateZ(-2deg);animation-delay:-3s}
.demo-card.is-visible .demo-media{animation-play-state:running}
.device-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.device-screen{position:absolute;left:5.85%;right:5.85%;top:2.65%;bottom:2.85%;border-radius:10% / 4.6%;overflow:hidden;z-index:1;background:#fff}
.operation-video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:#fff;display:block}
.video-toggle{position:absolute;bottom:5%;right:10%;z-index:3;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff55;background:rgba(15,25,24,.62);backdrop-filter:blur(10px);border-radius:50%;color:#fff;font-size:13px;cursor:pointer;line-height:1;box-shadow:0 4px 10px #0002;transition:background .2s}
.video-toggle:hover{background:#087e78}.video-toggle:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.demo-card .video-note{color:#788780;font-size:12px;line-height:1.8;margin-top:22px}.layout-card{background:radial-gradient(ellipse at 15% 62%,rgba(10,186,181,.09),transparent 56%),#fff}
.reveal-ready{opacity:0;translate:0 35px;transition:opacity .9s ease,translate 1.2s cubic-bezier(.2,.65,.25,1)}.reveal-ready.is-visible{opacity:1;translate:0 0}
.mini:nth-child(2n){transition-delay:.08s}.mini:nth-child(3n){transition-delay:.14s}
@keyframes device-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(min-width:760px){.demo-card{padding:58px 65px 38px}.demo-card .demo-copy .feature-title{font-size:48px;white-space:nowrap}.feature-tagline{font-size:27px}.demo-card .lead{font-size:16px;margin-bottom:0}.demo-media{width:280px}.layout-card{grid-template-columns:330px 1fr}.layout-card .demo-media{grid-column:1;grid-row:1/3}.layout-card .demo-copy,.layout-card .video-note{grid-column:2}.layout-card .demo-copy{grid-row:1}.layout-card .video-note{grid-row:2}.title-accent{height:30px}}
@media(max-width:360px){.demo-card .demo-copy .feature-title{font-size:33px}.feature-tagline{font-size:21px}.demo-media{width:245px}}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;translate:none;transition:none}.demo-media,.layout-card .demo-media{animation:none}}

/* Official supplied logo, preserved in its original aspect ratio. */
header .brand{display:flex;align-items:center;flex:0 1 auto;min-width:0;line-height:0;letter-spacing:normal;width:190px;max-width:calc(100% - 134px)}
header .brand img{display:block;width:100%;height:auto;object-fit:contain}
header .register{flex-shrink:0}
@media(min-width:760px){header .brand{width:250px;max-width:calc(100% - 160px)}}
@media(max-width:360px){header .brand{width:165px;max-width:calc(100% - 118px)}}
/* Compact operation cards without cropping or stretching their screens. */
.demo-card,.layout-card{padding-top:30px;padding-bottom:18px}
.demo-card .demo-copy .feature-title{margin-bottom:15px}
.demo-card .lead{margin-top:10px;margin-bottom:20px}
.demo-media,.layout-card .demo-media{width:min(100%,210px)}
.demo-card .video-note{margin-top:16px}
@media(min-width:760px){.demo-card{padding:40px 55px 28px;grid-template-columns:1fr 260px;column-gap:35px}.layout-card{grid-template-columns:260px 1fr}.demo-media,.layout-card .demo-media{width:235px}.demo-card .lead{margin-bottom:0}}
@media(max-width:360px){.demo-media,.layout-card .demo-media{width:200px}}

/* Respect mobile sensor housing and leave breathing room below browser UI. */
:root{--header-offset:env(safe-area-inset-top, 0px);--header-height:68px}
header{top:var(--header-offset)}
.hero{top:calc(var(--header-offset) + var(--header-height));min-height:calc(100svh - var(--header-offset) - var(--header-height))}
html{scroll-padding-top:calc(var(--header-offset) + var(--header-height) + 16px)}
@media(min-width:760px){:root{--header-offset:env(safe-area-inset-top, 0px);--header-height:80px}}
/* Fill the toolbar clearance and tighten the first-view heading spacing. */
header::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--header-offset);background:#fff;pointer-events:none}
@media(max-width:759px){
 .hero{padding-top:8px}
 .intro .eyebrow{margin-bottom:10px}
 .intro .sub{margin-top:10px}
}

/* Focus the hierarchy: black titles, concise copy, restrained brand accents. */
.sec h2,.mini h3{color:#111315}
.thesis h2{font-weight:800;line-height:1.35}
.thesis .lead{color:#505255;line-height:1.75;margin-top:16px}
.demo-card,.layout-card{background:#fff;border-color:rgba(17,19,21,.12);box-shadow:0 18px 40px -30px rgba(17,19,21,.24);padding-top:34px}
.demo-card .demo-copy .feature-title{color:#101112;font-weight:800;letter-spacing:-.055em;margin-bottom:0;gap:10px}
.title-accent{height:22px;width:4px;border-radius:2px;box-shadow:none}
.demo-card .demo-copy .lead{font-size:16px;font-weight:400;line-height:1.8;color:#505255;margin:16px auto 28px}
.demo-card .video-note{color:#626467}
.sec:has(.grid) .wrap{background:#f0f1f2;border:1px solid #1113150a}
.ey{color:#505255;letter-spacing:.08em}
.mini{border-color:#11131512;background:#fff}
.mini h3{font-weight:750;line-height:1.5}
.mini p{color:#55585c;line-height:1.7}
.trust{border-color:#11131520;background:#fff}
.trust .t{color:#151719}
.trust .t svg{color:#202326}
.trust .t small{color:#5b5e62}
.final .wrap{background:#111315}
.final h2{color:#fff;line-height:1.5}
.final .note{color:#c5c7c9}
.final .final-logo{display:block;width:clamp(190px,52vw,280px);max-width:100%;height:auto;margin:0 auto 28px;filter:grayscale(1) invert(1);mix-blend-mode:screen}
/* Brand refinement: white feature cards, deep teal details, black closing CTA. */
:root{--teal-deep:#073b3a;--teal-light:#69ded7}
.demo-card,.layout-card{border-radius:24px;border-color:#073b3a26;border-top:2px solid var(--teal);box-shadow:0 12px 28px -24px #073b3a40}
.title-accent{background:var(--teal);border-radius:1px}
.sec:has(.grid) .wrap{background:var(--teal-deep);border:1px solid #0abab533;border-radius:24px;padding-top:40px;padding-bottom:40px}
.sec:has(.grid) .ey{color:var(--teal-light)}
.sec:has(.grid) h2{color:#fff}
.sec:has(.grid) .grid{gap:0 24px;margin-top:30px}
.sec:has(.grid) .mini{background:transparent;border:0;border-top:1px solid #ffffff26;border-radius:0;box-shadow:none;padding:24px 0}
.sec:has(.grid) .mini svg{color:var(--teal-light)}
.sec:has(.grid) .mini h3{color:#fff}
.sec:has(.grid) .mini p{color:#c2d9d6}
.trust{border-radius:24px;border-color:#073b3a26;box-shadow:none}
.trust .t svg{color:#087e79}
.final .wrap{border-radius:24px;border:1px solid #0abab538;background:#111315;isolation:isolate}
.final .main-cta{background:var(--teal);color:#071f1e;border:1px solid transparent;transition:background .2s ease,border-color .2s ease}
.final .main-cta:hover{background:#38cdc5;border-color:#69ded7}
@media(min-width:760px){.sec:has(.grid) .wrap{padding-top:48px;padding-bottom:40px}.sec:has(.grid) .grid{column-gap:36px}}
@media(min-width:760px){
 .demo-card{padding-top:42px}
 .demo-card .demo-copy .lead{margin:18px 0 0}
 .title-accent{height:28px}
}

/* Numbered feature headings and a dark layout showcase. */
.demo-card .demo-copy .feature-title{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%;gap:10px;padding:12px 16px;background:#111315;color:#fff;font-size:clamp(1.25rem,4.7vw,1.75rem);line-height:1.4;letter-spacing:-.035em;white-space:normal;border-left:3px solid var(--teal);border-radius:4px;text-wrap:wrap}
.feature-number{color:var(--teal-light);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.feature-icon{width:24px;height:24px;flex-shrink:0;fill:none;stroke:var(--teal-light);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo-card.layout-card{background:#111315;color:#fff;border:1px solid #ffffff3d;border-top:2px solid var(--teal);box-shadow:inset 0 1px 0 #ffffff33,inset 0 0 28px #ffffff08,0 12px 28px -24px #0008}
.layout-card .demo-copy .feature-title{background:#080a0b}
.layout-card .demo-copy .lead{color:#d1d5d6}
.layout-card .video-note{color:#b6bfc1}
.mini-number{display:block;color:var(--teal-light);font-size:.875rem;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-bottom:6px}
/* Optional supplied feature images: no empty placeholders before delivery. */
.mini .feature-image{display:block;width:100%;max-width:220px;max-height:180px;object-fit:contain;margin:18px auto 0;border-radius:8px}

/* White cards with square title bands aligned to their respective sides. */
.demo-card.layout-card{background:#fff;color:#111315;border:1px solid #073b3a26;border-top:2px solid var(--teal);box-shadow:0 12px 28px -24px #073b3a40}
.demo-card .demo-copy .feature-title{border-radius:0}
.light-card .demo-copy{text-align:left}
.layout-card .demo-copy{text-align:right}
.layout-card .demo-copy .feature-title{background:#111315;border-left:0;border-right:3px solid var(--teal)}
.layout-card .demo-copy .lead{color:#505255}
.layout-card .video-note{color:#626467}
/* Header logo at 80% of its previous size on each breakpoint. */
header .brand{width:152px}
@media(min-width:760px){header .brand{width:200px}}
@media(max-width:360px){header .brand{width:132px}}
/* Extend only the heading background into the card gutter; keep text in place. */
.demo-card .demo-copy .feature-title{position:relative;isolation:isolate}
.demo-card .demo-copy .feature-title::before{content:"";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;z-index:-1}
.light-card .demo-copy .feature-title::before{right:100%;margin-right:3px;background:linear-gradient(to right,rgba(17,19,21,0),#111315)}
.layout-card .demo-copy .feature-title::before{left:100%;margin-left:3px;background:linear-gradient(to right,#111315,rgba(17,19,21,0))}
@media(min-width:760px){.demo-card .demo-copy .feature-title::before{width:55px}}
@media(max-width:360px){.demo-card .demo-copy .feature-title::before{width:16px}}
.thesis .thesis-prelude{margin:0 auto 24px;color:#111315;font-size:clamp(26px,7.4vw,37px);font-weight:700;line-height:1.7;letter-spacing:-.025em;text-wrap:balance}
.thesis h2{color:#087e79;font-size:clamp(1.125rem,4.5vw,1.625rem)}
.mobile-prelude-break{display:none}
.supporting-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.sec:has(.grid) .supporting-features{margin-top:28px;margin-bottom:32px}
.sec:has(.grid) .supporting-grid{max-width:none}
.support-card{min-width:0;background:#fff;border:1px solid #073b3a26;border-top:2px solid var(--teal);border-radius:20px;padding:24px 20px;box-shadow:0 12px 28px -24px #073b3a40}
.support-card h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.125rem,4.5vw,1.5rem);text-align:left;letter-spacing:-.035em}
.support-number{color:#087e79;font-size:.875rem;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.support-card>p{color:#505255;font-size:1rem;line-height:1.8;margin:14px 0 20px}
.supporting-features .support-card{background:var(--teal-deep);border-color:#0abab533;box-shadow:none}
.supporting-features .support-card h2{color:#fff}
.supporting-features .support-number{color:var(--teal-light)}
.supporting-features .support-card>p,.supporting-features .support-images figcaption{color:#c2d9d6}
.support-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.support-images figure{position:static;min-width:0;margin:0}
.support-images img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #11131514}
.support-images figcaption{position:static;background:none;white-space:normal;color:#626467;font-size:.8125rem;line-height:1.5;padding:8px 0 0;text-align:center}
.color-images{max-width:290px;margin-inline:auto}
.edit-images{max-width:360px;margin-inline:auto}
@media(min-width:760px){.sec .supporting-grid{max-width:856px;grid-template-columns:repeat(2,minmax(0,1fr))}.support-card{padding:24px}.edit-images{margin-top:36px}.sec:has(.grid) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:759px){.mobile-prelude-break{display:block}}
/* Keep desktop copy and phone as a compact, balanced pair. */
@media(min-width:760px){
 .demo-card{max-width:820px;margin-inline:auto;grid-template-columns:minmax(0,1fr) 235px;column-gap:28px}
 .demo-card.layout-card{grid-template-columns:235px minmax(0,1fr)}
 .demo-card .demo-media{margin-inline:0;justify-self:center}
 .demo-card .demo-copy{min-width:0}
 .layout-card .video-note{text-align:right}
}