/* The D5 hero geometry and button components stay scoped to this page variant. */
:root{--hero-bg-height:1066px;--device-scale:1}
.scene{max-width:none;padding-bottom:0;background-color:#f8fbff;background-image:
 linear-gradient(180deg,transparent 0,transparent calc(var(--hero-bg-height)*.74),#a8c8f5 var(--hero-bg-height),#e2ebf9 calc(var(--hero-bg-height) + 130px),#f3f6fa calc(var(--hero-bg-height) + 310px),#f8fbff calc(var(--hero-bg-height) + 480px)),
 radial-gradient(ellipse var(--field-rx,680px) var(--field-ry,510px) at var(--field-x,84%) var(--field-y,520px),rgba(33,70,255,.98),transparent 88%),
 radial-gradient(ellipse min(54vw,680px) calc(var(--hero-bg-height)*.34) at 20% var(--hero-bg-height),rgba(86,146,255,.94),transparent 86%),
 linear-gradient(180deg,#05070e 0%,#07102a calc(var(--hero-bg-height)*.51),#476cef calc(var(--hero-bg-height)*.78),#a8c8f5 var(--hero-bg-height),#e2ebf9 calc(var(--hero-bg-height) + 130px),#f3f6fa calc(var(--hero-bg-height) + 310px),#f8fbff calc(var(--hero-bg-height) + 480px))}
.scene::before{content:none}
.hero-stage{position:relative;display:flow-root;min-height:1066px;overflow:visible;background:none}
.brandbar{height:82px;margin-top:24px;position:relative;z-index:3}
.hero-layout{position:relative;display:block;height:0;margin-top:82px}
.hero-status{position:relative;margin:0;color:#c5c8d4;font:13px/1.6 Montserrat,sans-serif;letter-spacing:.08em}
.hero-copy{position:relative;z-index:3;max-width:1100px;margin-top:76px;padding:0;color:#fff}
.hero-copy h1{margin:0;font-size:clamp(66px,7.8vw,112px);font-weight:300;line-height:1.08;letter-spacing:-.073em;white-space:nowrap}
.hero-copy h1 span,.hero-copy h1 strong{display:block;font-weight:300}
.hero-copy h1 span{color:#a0a1aa}
.hero-copy h1 strong{font-size:inherit;line-height:inherit;color:#fff}
.hero-explain{max-width:510px;margin:32px 0 0;color:#c9cddd;font-size:19px;line-height:1.8}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:33px}
.hero-stage .button{display:inline-flex;align-items:center;justify-content:center;min-width:154px;min-height:53px;padding:11px 24px;border-radius:9px;font-size:16px;text-align:center;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.hero-stage .button:hover{transform:translateY(-2px)}
.hero-stage .button-blue{--ticket-cutout:#0b1434;gap:0;min-width:220px;min-height:54px;overflow:hidden;padding:0;border:1px solid #6486ff;border-radius:14px;background:linear-gradient(100deg,#88b7ff 0%,#567cff 48%,#2c50ee 77%);box-shadow:0 13px 30px rgba(29,58,192,.25);color:#fff}
.hero-stage .button-blue:hover{background:linear-gradient(100deg,#a0c7ff 0%,#668dff 48%,#3c5dff 77%)}
.hero-stage .button-blue .ticket-label{flex:1;padding:12px 24px;text-align:center}
.hero-stage .button-blue .ticket-arrow{position:relative;align-self:stretch;display:grid;place-items:center;min-width:65px;border-left:1px solid rgba(210,226,255,.18);background:#2446df;font-size:27px;font-weight:300;line-height:1}
.hero-stage .button-blue .ticket-arrow:before,.hero-stage .button-blue .ticket-arrow:after{content:"";position:absolute;left:-6px;width:12px;height:12px;border-radius:50%;background:var(--ticket-cutout)}
.hero-stage .button-blue .ticket-arrow:before{top:-6px}.hero-stage .button-blue .ticket-arrow:after{bottom:-6px}
.hero-stage .button-blue .ticket-arrow svg{width:23px;height:23px;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-stage .button-quiet{border:1px solid rgba(216,226,255,.42);background:rgba(7,13,29,.4);color:#f7f8fc}
.hero-stage .button-quiet:hover{background:rgba(56,77,137,.37);border-color:rgba(216,226,255,.56)}
.hero-stage .button-ticket{border:0;mask-image:radial-gradient(circle 5px at calc(100% - 65px) 0,transparent 4.9px,#000 5.1px),radial-gradient(circle 5px at calc(100% - 65px) 100%,transparent 4.9px,#000 5.1px);mask-composite:intersect}
.hero-stage .button-ticket .ticket-arrow{border-left:0}
.stage-diagram{position:absolute;right:-7%;top:143px;z-index:1;width:min(860px,64vw);height:auto;aspect-ratio:850/720;pointer-events:none}
.device-space{position:absolute}
.world{position:absolute;inset:0 auto auto 0;width:100%;height:1px;pointer-events:none;z-index:2;overflow:visible}
.sequence{max-width:1360px;padding-top:83px}
.flow-row{display:block;min-height:370px;padding-block:56px 48px}
.flow-copy{width:min(480px,36%)}
.flow-row--reverse .flow-copy{margin-left:auto}
.flow-number{position:absolute;left:49%;right:auto;top:calc(56px - .16em);margin:0;padding:0;justify-self:auto}
.flow-row--reverse .flow-number{left:auto;right:49%;padding:0}
.detail{max-width:480px}
.flow-row:last-child{min-height:0;padding-bottom:40px}
.control-note{color:#637793;font-size:12px;white-space:nowrap}
@media(max-width:1200px) and (min-width:851px){.hero-copy h1{font-size:clamp(64px,7.9vw,105px)}.stage-diagram{right:-14%;width:min(760px,67vw)}.hero-explain{max-width:450px}}
@media(max-width:850px) and (min-width:621px){.hero-stage{min-height:1006px}.stage-diagram{right:-14%;top:253px;width:min(700px,83vw)}.hero-copy h1{font-size:clamp(54px,8vw,76px)}.hero-explain{max-width:400px;font-size:17px}}
@media(max-width:800px) and (min-width:621px){.flow-row{min-height:370px;padding-block:50px 44px}.flow-copy{width:min(460px,39%)}.flow-number{top:calc(50px - .16em);left:49%}.flow-row--reverse .flow-number{right:49%;left:auto}}
@media(max-width:620px){
 .scene{padding-bottom:32px}.hero-stage{min-height:0;padding-bottom:64px}.brandbar{height:66px;margin-top:12px}.hero-layout{display:block;height:auto;margin-top:45px}.hero-status{font-size:13px;letter-spacing:.03em}.hero-copy{margin-top:54px}.hero-copy h1{font-size:clamp(43px,10vw,63px);line-height:1.19;letter-spacing:-.055em;white-space:normal}.hero-explain{max-width:400px;margin-top:23px;font-size:16px;line-height:1.8}.hero-actions{gap:9px;margin-top:26px}.hero-stage .button{min-width:133px;min-height:49px;padding:10px 14px;font-size:15px}.hero-stage .button-blue{min-width:188px;min-height:54px;padding:0}.hero-stage .button-blue .ticket-label{padding-inline:17px}.hero-stage .button-blue .ticket-arrow{min-width:53px}.hero-stage .button-blue .ticket-arrow:before,.hero-stage .button-blue .ticket-arrow:after{display:none}.hero-stage .button-ticket{mask-image:radial-gradient(circle 5px at calc(100% - 53px) 0,transparent 4.9px,#000 5.1px),radial-gradient(circle 5px at calc(100% - 53px) 100%,transparent 4.9px,#000 5.1px)}
 .stage-diagram,.device-space{position:relative;top:auto;right:auto;width:calc(100% + 40px);height:auto;margin:5px -20px -12px;aspect-ratio:850/720}
 .sequence{padding-top:56px}.flow-row,.flow-row--reverse{display:flex;min-height:0;padding:30px 0 45px 35px;gap:17px}.flow-copy,.flow-row--reverse .flow-copy{width:100%;margin:0}.flow-number,.flow-row--reverse .flow-number{position:static;inset:auto;margin:0;padding:0}.detail{max-width:none}.flow-row:last-child{padding-bottom:35px}.control-note{display:none}
}
@media(max-width:359px){.flow-row,.flow-row--reverse{padding-left:29px}}
@media(prefers-reduced-motion:reduce){.hero-stage .button{transition:none}.hero-stage .button:hover{transform:none}}

/* Latest visual tuning: larger type, rounded actions and balanced hero. */
.hero-copy h1 span{color:#fff}
.hero-copy h1 strong{width:fit-content;background:linear-gradient(115deg,#fff 20%,#e5efff 65%,#a9c9ff);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-stage .button{min-height:64px;min-width:172px;font-size:19px;border-radius:999px;padding:14px 28px}
.hero-stage .button-blue{min-width:244px;padding:0;border-radius:999px;mask-image:none}
.hero-stage .button-blue .ticket-label{padding:16px 26px}
.hero-stage .button-blue .ticket-arrow{min-width:64px;background:transparent}
.hero-stage .button-blue .ticket-arrow:before,.hero-stage .button-blue .ticket-arrow:after{display:none}
@media(min-width:851px){.hero-copy{margin-top:100px}.hero-copy h1{font-size:clamp(78px,8.6vw,128px)}}
@media(min-width:621px){.flow-number{font-size:clamp(200px,19vw,260px);line-height:1}.flow-row{min-height:440px}}
@media(max-width:620px){.hero-stage .button{min-height:56px;min-width:140px;font-size:17px;padding:12px 20px}.hero-stage .button-blue{min-width:206px;padding:0}.hero-stage .button-blue .ticket-label{padding:14px 20px}.hero-stage .button-blue .ticket-arrow{min-width:48px}.flow-number{font-size:140px}}
/* Ticket silhouette with stronger contrast behind the label. */
.hero-stage .button{font-weight:550;color:#fff}
.hero-stage .button-blue{border-radius:18px;background:linear-gradient(105deg,#315cdc,#264bd7 65%,#2446cc);box-shadow:inset 0 1px rgba(255,255,255,.2),0 12px 26px #09268a30}
.hero-stage .button-blue:hover{background:linear-gradient(105deg,#3d68e6,#3158e1 65%,#294bd4)}
.hero-stage .button-ticket{mask-image:radial-gradient(circle 5px at calc(100% - 64px) 0,transparent 4.9px,#000 5.1px),radial-gradient(circle 5px at calc(100% - 64px) 100%,transparent 4.9px,#000 5.1px);mask-composite:intersect}
.hero-stage .button-blue .ticket-arrow{background:rgba(14,38,145,.24);border-left:1px solid #ffffff20}
.hero-stage .button-quiet{border-radius:18px;background:#10204bd9;border-color:#a9c7ff80}
#device-decoration{transition:opacity .4s;opacity:.8}
#hero-device:has(#device-hit:hover) #device-decoration{opacity:1}
@media(max-width:620px){.hero-stage .button-ticket{mask-image:radial-gradient(circle 5px at calc(100% - 48px) 0,transparent 4.9px,#000 5.1px),radial-gradient(circle 5px at calc(100% - 48px) 100%,transparent 4.9px,#000 5.1px)}}
/* Frosted ticket trial and approved service section integration. */
.hero-stage .button-blue{background:linear-gradient(120deg,rgba(242,249,255,.9),rgba(202,222,255,.76));color:#132957;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffffdc,inset 0 -1px 0 #a8c7ff90,0 12px 30px #09245a26}
.hero-stage .button-blue:hover{background:linear-gradient(120deg,#f4faffeb,#dbeaffdc)}
.hero-stage .button-blue .ticket-arrow{background:#ffffff20;border-left:1px solid #476a9d33}
.hero-stage .button-blue .ticket-arrow svg{stroke:#18356b}
.integrated-services{position:relative;isolation:isolate;overflow-x:clip}
.integrated-services .sf-wrap{width:calc(100% - var(--gutter)*2);max-width:1360px}
.integrated-services .ad-stage{padding-top:100px}
.integrated-services #ad-replay{color:#c9ddff;background:transparent;border:1px solid #536b92;border-radius:6px;padding:4px 12px;font-size:13px;margin-top:-8px}
@media(max-width:800px){.integrated-services .ad-stage{padding-top:64px}}