:root{font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;color:#203544;background:#f5f3ea;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{height:100dvh;min-height:540px;display:flex;flex-direction:column}header{height:78px;flex-shrink:0;padding:0 4%;display:flex;align-items:center;justify-content:space-between}header a{color:inherit;text-decoration:none;font-size:11px;font-weight:750;letter-spacing:2px}header a span{font-size:8px;font-weight:400;margin-left:20px;color:#777887;letter-spacing:1.5px}.edition{font-size:9px;letter-spacing:1.8px;color:#7c7c87}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}header button{font-size:11px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #5399cb;outline-offset:5px}#stage{position:relative;flex:1;min-height:0;margin:0 24px;border-radius:12px;overflow:hidden;background:#deede4}#film{width:100%;height:100%;display:block}#intro{position:absolute;left:7%;top:20%}#intro p,#ending>p{font-size:9px;letter-spacing:2.5px;font-weight:700;color:#627380}h1{font-weight:550;font-size:clamp(34px,4.4vw,68px);line-height:1.1;letter-spacing:-2.7px;margin:20px 0 30px}h1 em{font-family:Georgia,serif;font-weight:400;color:#6096bc}#start{background:#233e52;color:#faf2e5;padding:17px 22px;border-radius:6px;font-size:12px}#start span{margin-left:25px;font-size:8px;letter-spacing:1px;opacity:.6}#mode{position:absolute;left:5%;top:5%;padding:10px 14px;border-radius:24px;background:#f9e3db;color:#ac463b;font-size:12px;font-weight:650;display:flex;gap:8px;align-items:center}#mode[hidden]{display:none}#mode i{width:7px;height:7px;border-radius:50%;background:currentColor}#mode.auto{background:#d0e9d9;color:#316e55}#ending{position:absolute;left:7%;top:19%}#ending h2{font-size:clamp(36px,4.8vw,68px);letter-spacing:-2.5px;line-height:1.1;font-weight:550;margin:17px 0 26px}#ending>div{display:flex;gap:10px;flex-wrap:wrap}#ending button{padding:14px 17px;border-radius:5px;font-size:11px;background:#e9f0f5}#ending #after{background:#2f6154;color:#f2f3e9}#ending small{display:block;margin-top:17px;font-size:10px;color:#72747c}footer{height:112px;flex-shrink:0;padding:17px 4% 20px}.chapters{display:flex;justify-content:space-between;margin:0 142px 21px 74px}.chapters button{font-size:9px;color:#898793}.chapters button span{margin-left:9px}.chapters button.active{color:#437293;font-weight:650}.transport{display:flex;gap:18px;align-items:center}.transport>span{font-size:10px;color:#7c7b88;font-variant-numeric:tabular-nums}.transport button{font-size:17px}.transport #sound{font-size:10px;min-width:66px}input{appearance:none;flex:1;min-width:20px;height:3px;background:linear-gradient(to right,#618dac var(--p,0%),#d8dee3 var(--p,0%));cursor:pointer}input::-webkit-slider-thumb{appearance:none;background:#507b99;width:9px;height:9px;border-radius:50%}dialog{width:min(560px,90vw);border:1px solid #ced8df;border-radius:12px;padding:35px;background:#f8f5ee;color:#283b49}dialog::backdrop{background:#21313d88}dialog h2{font-size:28px;line-height:1.25;font-weight:550}dialog p{font-size:13px;line-height:1.8;color:#6c6878}dialog .eyebrow{font-size:9px;letter-spacing:2px}#close{position:absolute;right:15px;top:10px;font-size:25px}dialog a{color:#507b99}@media(max-width:650px){header{height:65px;padding:0 23px}header a{font-size:9px}header a span,.edition{display:none}#stage{margin:0 10px;border-radius:8px}#intro{left:7%;top:9%}h1{font-size:37px;letter-spacing:-1.8px}#intro p{font-size:8px;letter-spacing:1.5px}#start{padding:14px 17px;font-size:11px}#mode{font-size:10px;top:5%;left:6%}footer{height:110px;padding:17px 20px}.chapters{margin:0 0 20px}.chapters button{font-size:8px;padding:0}.chapters button span{display:block;margin:5px 0 0;font-size:7px}.transport{gap:10px}.transport #sound{min-width:50px;font-size:9px}#ending{top:9%;left:7%;right:7%}#ending h2{font-size:37px}#ending button{font-size:10px;padding:12px}#ending>p{font-size:8px;letter-spacing:1.4px}}
[hidden]{display:none!important}
#subtitles{position:absolute;bottom:5%;left:50%;transform:translate(-50%,5px);max-width:min(720px,88%);width:max-content;padding:11px 19px;border-radius:9px;background:#f8f6eeeF;color:#88818f;font-size:clamp(13px,1.4vw,19px);line-height:1.55;text-align:center;box-shadow:0 3px 20px #213b4e09;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;z-index:3}#subtitles.visible{opacity:1;transform:translate(-50%,0)}#subtitles span{transition:color .12s}#subtitles .spoken{color:#283e4e}#subtitles .current{color:#538cb4}#captions{font-size:11px;border:1px solid #bbc9d3;border-radius:4px;padding:4px 5px}#captions[aria-pressed=false]{opacity:.45}#audio-status{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);padding:12px 18px;background:#f8e3da;font-size:12px;border-radius:6px;z-index:4}@media(max-width:650px){#subtitles{bottom:4%;font-size:13px;padding:9px 13px;max-width:91%}.transport{gap:8px}.transport #sound{min-width:46px}.transport #captions{font-size:9px}}@media(prefers-reduced-motion:reduce){#subtitles,#subtitles span{transition:none}}
#mode{z-index:2}#intro,#ending{z-index:2}

/* Trion: charcoal structure, blue connection, supplied three-hexagon mark. */
:root{--brand-ink:oklch(31% .032 222);--brand-blue:oklch(57% .12 231)}
header a,#intro,#ending{color:var(--brand-ink)}
#intro{top:13%;max-width:57%}#ending{top:12%}
.brand-lockup{display:flex;align-items:center;gap:15px;width:max-content;margin-bottom:26px}
.brand-mark{display:block;width:76px;height:77px;overflow:hidden;mix-blend-mode:multiply;flex-shrink:0}
.brand-mark img{display:block;width:120px;height:120px;max-width:none;transform:translate(-22px,-11px)}
.brand-name{font-size:42px;font-weight:650;letter-spacing:-2px;line-height:1;color:var(--brand-ink)}
.brand-name>span{display:block;font-size:8px;font-weight:650;letter-spacing:2.1px;margin-top:10px}
#intro>p,#ending>p{color:var(--brand-ink)}
#intro h1{font-size:clamp(34px,4.15vw,64px);letter-spacing:-2.5px;margin:18px 0 20px}
#intro h1 em{font-family:inherit;font-style:normal;font-weight:500;color:var(--brand-blue)}
#intro .intro-description{font-size:14px;line-height:1.7;letter-spacing:0;font-weight:400;color:var(--brand-ink);margin:0 0 25px}
#start,#ending #after{background:var(--brand-ink);color:#f3f5ee}#start:hover,#ending #after:hover{background:var(--brand-blue)}
#ending h2{color:var(--brand-ink)}#ending button{background:#dce8e9;color:var(--brand-ink)}
@media(max-width:650px){#intro{top:5%;max-width:90%}#ending{top:5%}.brand-lockup{gap:11px;margin-bottom:15px}.brand-mark{width:51px;height:52px}.brand-mark img{width:81px;height:81px;transform:translate(-15px,-7px)}.brand-name{font-size:31px;letter-spacing:-1.5px}.brand-name>span{font-size:6px;letter-spacing:1.5px;margin-top:7px}#intro h1{font-size:33px;letter-spacing:-1.5px;margin:12px 0 14px}#intro .intro-description{font-size:11px;line-height:1.6;margin-bottom:17px}#ending h2{margin:12px 0 18px}}

/* The identity leads both title cards. The mark is a transparent vector. */
#intro,#ending{top:9%}
.brand-lockup{gap:24px;margin-bottom:30px}
.brand-mark{width:clamp(135px,13vw,200px);height:auto;aspect-ratio:320/310;overflow:visible;mix-blend-mode:normal}
.brand-mark img{width:100%;height:100%;transform:none}
.brand-name{font-size:clamp(74px,7.4vw,112px);letter-spacing:-6px;font-weight:650}
.brand-name>span{font-size:11px;letter-spacing:3px;margin-top:17px}
#intro h1{font-size:clamp(32px,3.15vw,48px);letter-spacing:-1.8px}
#ending .brand-mark{width:clamp(150px,14.5vw,220px)}
#ending .brand-name{font-size:clamp(80px,8vw,120px)}
#ending h2{font-size:clamp(34px,3.7vw,54px);letter-spacing:-1.8px}
@media(max-width:650px){#intro,#ending{top:4%}.brand-lockup{gap:17px;margin-bottom:21px}.brand-mark,#ending .brand-mark{width:106px}.brand-name,#ending .brand-name{font-size:66px;letter-spacing:-3.5px}.brand-name>span{font-size:7px;letter-spacing:1.5px;margin-top:12px}#intro h1{font-size:28px;letter-spacing:-1.2px}#intro .intro-description{font-size:10px}#ending h2{font-size:32px}}
@media(max-height:740px) and (min-width:651px){#intro,#ending{top:5%}.brand-mark,#ending .brand-mark{width:130px}.brand-name,#ending .brand-name{font-size:78px}.brand-lockup{margin-bottom:18px}#intro h1{font-size:36px}#intro .intro-description{font-size:12px;margin-bottom:16px}#ending h2{font-size:38px}}

/* Lead with the use case, then close on the agency alone. */
#intro{top:7%}
#intro .brand-mark{width:75px}
#intro .brand-name{font-size:44px;letter-spacing:-2px}
#intro .brand-name>span{font-size:8px;letter-spacing:2px;margin-top:10px}
#intro .brand-lockup{gap:15px;margin-bottom:24px}
#intro h1{font-size:clamp(28px,2.6vw,40px);line-height:1.2}
.kyc-title{display:block;font-size:clamp(86px,9vw,140px);font-weight:700;letter-spacing:-7px;line-height:.95;margin:0 0 20px;color:var(--brand-ink)}
#ending{transition:left 1s ease,top 1s ease,transform 1s ease}
#stage.brand-finish #ending{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:max-content;max-width:90%;text-align:center}
#stage.brand-finish #ending .brand-lockup{justify-content:center;gap:40px;margin:0 auto}
#stage.brand-finish #ending .brand-mark{width:clamp(210px,27vw,420px)}
#stage.brand-finish #ending .brand-name{font-size:clamp(130px,17vw,265px);letter-spacing:-11px;text-align:left}
#stage.brand-finish #ending .brand-name>span{font-size:clamp(11px,1.4vw,21px);letter-spacing:5px;margin-top:25px}
#stage.brand-finish #ending>p,#stage.brand-finish #ending>h2,#stage.brand-finish #ending>div,#stage.brand-finish #ending>small{display:none!important}
@media(max-width:650px){#intro{top:4%}#intro .brand-mark{width:46px}#intro .brand-name{font-size:31px}#intro .brand-name>span{font-size:6px;letter-spacing:1.5px;margin-top:7px}#intro .brand-lockup{margin-bottom:15px;gap:11px}#intro h1{font-size:24px;margin:10px 0 12px}.kyc-title{font-size:76px;letter-spacing:-4px;margin-bottom:12px}#intro .intro-description{font-size:10px;margin-bottom:12px}#stage.brand-finish #ending .brand-lockup{flex-direction:column;gap:25px}#stage.brand-finish #ending .brand-mark{width:205px}#stage.brand-finish #ending .brand-name{font-size:100px;letter-spacing:-5px;text-align:center}#stage.brand-finish #ending .brand-name>span{font-size:10px;letter-spacing:3px;margin-top:16px}}
@media(max-height:740px) and (min-width:651px){#intro .brand-mark{width:52px}#intro .brand-name{font-size:34px}#intro .brand-lockup{margin-bottom:12px}.kyc-title{font-size:78px;margin-bottom:10px}#intro h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){#ending{transition:none}}

/* One camera-like brand reveal, driven by the narration timeline. */
#intro{top:17%}
#ending{transition:none!important;transform-origin:0 0}
#stage.brand-finish #ending{max-width:none}
#stage.brand-finish #ending .brand-lockup{gap:0;position:relative}
#stage.brand-finish #ending .brand-mark{position:relative;z-index:2;flex-shrink:0}
#stage.brand-finish #ending .brand-name{position:relative;z-index:1;margin-left:-18px;padding-left:35px;transform:translateX(calc((1 - var(--word-reveal,0)) * -110px));clip-path:inset(0 0 0 calc((1 - var(--word-reveal,0)) * 100%));opacity:var(--word-reveal,0)}
#stage.brand-finish #ending .brand-name::before{content:'';position:absolute;left:-23px;top:54%;width:58px;height:8px;background:#2c444d;transform:rotate(-30deg);transform-origin:left center}
#stage.brand-finish #ending .brand-name>span{opacity:var(--word-reveal,0)}
@media(max-width:650px){#intro{top:10%}#stage.brand-finish #ending .brand-lockup{flex-direction:column;gap:0}#stage.brand-finish #ending .brand-name{margin:-6px 0 0;padding:0;transform:translateY(calc((1 - var(--word-reveal,0)) * -70px));clip-path:inset(calc((1 - var(--word-reveal,0)) * 100%) 0 0)}#stage.brand-finish #ending .brand-name::before{display:none}}

/* Enlarged opening; the complete story holds before a separate two-second sign-off. */
#intro{top:11%}
#intro h1{font-size:clamp(36px,3.65vw,56px)}
#intro .kyc-title{font-size:clamp(120px,13vw,195px);margin-bottom:22px}
#intro .intro-description{font-size:clamp(14px,1.25vw,19px)}
#intro>p:not(.intro-description){font-size:11px}
#start{font-size:15px;padding:20px 27px}
#ending{left:7%;top:19%;transform:none}
#ending>.brand-lockup{display:none}
#ending h2{font-size:clamp(36px,4.8vw,68px)}
#brand-outro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:25px;pointer-events:none;color:var(--brand-ink);transform:scale(calc(.94 + var(--reveal,0)*.06));transform-origin:center}
.outro-mark{width:clamp(210px,27vw,420px);height:auto;flex-shrink:0}
.outro-name{font-size:clamp(130px,17vw,265px);font-weight:650;letter-spacing:-11px;line-height:1;opacity:var(--reveal,0);transform:translateX(calc((1 - var(--reveal,0))*-30px))}
.outro-name>span{display:block;font-size:clamp(11px,1.4vw,21px);letter-spacing:5px;margin-top:25px}
@media(max-width:650px){#intro{top:6%}#intro h1{font-size:26px}#intro .kyc-title{font-size:94px;margin-bottom:15px}#intro .intro-description{font-size:11px}#intro>p:not(.intro-description){font-size:8px}#start{font-size:12px;padding:15px 20px}#ending{top:9%}#ending h2{font-size:37px}#brand-outro{flex-direction:column;gap:25px}.outro-mark{width:205px}.outro-name{font-size:100px;letter-spacing:-5px;text-align:center}.outro-name>span{font-size:10px;letter-spacing:3px;margin-top:16px}}
@media(max-height:740px) and (min-width:651px){#intro{top:6%}#intro .kyc-title{font-size:100px}#intro h1{font-size:34px}#intro .intro-description{font-size:13px}}

/* Give the final benefit statement and live workflow more of the frame. */
#ending{left:5%;top:20%}
#ending h2{font-size:clamp(44px,5.7vw,86px);line-height:1.06;letter-spacing:-3px;margin:24px 0 32px}
#ending>p{font-size:11px;letter-spacing:2px}
#ending button{font-size:13px;padding:18px 20px}
#ending small{font-size:12px;margin-top:22px}
@media(max-width:650px){#ending{left:7%;top:7%}#ending h2{font-size:43px;letter-spacing:-2px;margin:18px 0 22px}#ending>p{font-size:8px;letter-spacing:1px}#ending button{font-size:10px;padding:13px 14px}#ending small{font-size:10px;margin-top:15px}}
@media(max-height:740px) and (min-width:651px){#ending h2{font-size:clamp(42px,5.2vw,75px)}}