/* The public home page. Mobile first, nothing loaded from anywhere else, and only transforms and opacity animate,
   so it stays smooth on a phone. SC State brand: garnet #872837, blue #002F70, Playfair Display and Poppins. */
:root{
  --garnet:#872837; --garnet-d:#6c1f2c; --garnet-soft:#f9eef0; --rose:#ffc9d3;
  --blue:#002f70; --blue-soft:#e9eff8; --ice:#bcd2ff; --night:#050a1c;
  --ink:#14161c; --ink2:#434955; --muted:#646b78; --line:#e5e7ec; --paper:#faf8f7;
  --disp:"Playfair Display",Georgia,serif; --body:"Poppins",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%}
body{margin:0; background:#fff; color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0; padding:0}
ul,ol{list-style:none}
a{color:var(--blue)}
svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
.hero :focus-visible,.trust :focus-visible,.heritage :focus-visible,.foot :focus-visible{outline-color:#fff}
.wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px; top:8px; z-index:60; background:#fff; color:var(--blue); padding:10px 14px; border-radius:8px; font-weight:600}
.skip:focus{left:12px}

/* the header: a white bar, so the circular logo always sits on a light background with room around it */
.top{position:fixed; z-index:40; top:10px; left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); max-width:1240px; margin:0 auto; background:#fff; border-radius:18px; box-shadow:0 14px 34px -18px rgba(5,10,28,.6),0 0 0 1px rgba(5,10,28,.06)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 9px 6px 10px}
.brand{display:flex; align-items:center; gap:10px; min-width:0; color:var(--ink); text-decoration:none}
.brand img.logo{width:52px; height:52px; flex:none; display:block}
.brand span{display:block; min-width:0}
.brand b{display:block; font-family:var(--disp); font-size:1.12rem; font-weight:700; line-height:1.15; white-space:nowrap}
.brand small{display:block; font-size:.69rem; line-height:1.25; color:var(--muted)}
.nav{display:none}
.nav a{color:var(--ink2); text-decoration:none; font-size:.88rem; font-weight:500; padding:6px 2px; transition:color .2s}
.nav a:hover{color:var(--garnet)}
.cta{flex:none; background:var(--garnet); color:#fff; font-size:.82rem; font-weight:600; text-decoration:none; padding:10px 14px; border-radius:12px; transition:background .2s}
.cta:hover{background:var(--garnet-d)}

/* the hero */
.hero{position:relative; isolation:isolate; overflow:hidden; color:#fff; background:var(--night)}
.sky{position:absolute; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(158deg,#2b0a15 0%,#150a26 44%,#03102e 100%)}
.sky i{position:absolute; display:block; border-radius:50%; will-change:transform}
.sky i:nth-child(1){width:96vmax; height:96vmax; left:-40vmax; top:-46vmax; background:radial-gradient(closest-side,rgba(166,42,70,.88),rgba(166,42,70,0)); animation:drift1 24s ease-in-out infinite alternate}
.sky i:nth-child(2){width:88vmax; height:88vmax; right:-34vmax; bottom:-46vmax; background:radial-gradient(closest-side,rgba(0,74,178,.82),rgba(0,74,178,0)); animation:drift2 28s ease-in-out infinite alternate}
.sky i:nth-child(3){width:50vmax; height:50vmax; left:42%; top:6%; background:radial-gradient(closest-side,rgba(255,170,190,.2),rgba(255,170,190,0)); animation:drift3 32s ease-in-out infinite alternate}
.sky::after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.5px); background-size:26px 26px; -webkit-mask-image:radial-gradient(70% 70% at 64% 38%,#000 0%,transparent 78%); mask-image:radial-gradient(70% 70% at 64% 38%,#000 0%,transparent 78%)}
@keyframes drift1{to{transform:translate3d(9vmax,6vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-8vmax,-7vmax,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(-12vmax,8vmax,0) scale(.92)}}

.hero-in{display:grid; gap:46px; padding-top:112px; padding-bottom:42px}
.eyebrow{display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 12px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); font-size:.76rem; font-weight:500; line-height:1.35; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.eyebrow i{flex:none; width:7px; height:7px; border-radius:50%; background:var(--rose); animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,201,211,.7)}70%,100%{box-shadow:0 0 0 9px rgba(255,201,211,0)}}
h1{margin:18px 0 18px; font-family:var(--disp); font-weight:700; font-size:clamp(3.1rem,13.4vw,6.4rem); line-height:1.02; letter-spacing:-.018em}
h1 em{font-style:italic; padding-right:.08em; color:transparent; background:linear-gradient(100deg,#fff 0%,var(--rose) 48%,var(--ice) 100%); -webkit-background-clip:text; background-clip:text}
.lead{max-width:29em; font-size:clamp(1.04rem,1.7vw,1.2rem); line-height:1.6; color:rgba(255,255,255,.86)}
.acts{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 22px; border-radius:14px; border:1.5px solid #fff; background:#fff; color:var(--garnet); font-size:.96rem; font-weight:600; text-decoration:none; transition:transform .25s var(--ease),box-shadow .25s}
.btn svg{width:18px; height:18px; stroke-width:2.2; transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(0,0,0,.6)}
.btn:hover svg{transform:translateX(3px)}
.btn.glass{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.34); color:#fff; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.ticks{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:24px; font-size:.82rem; color:rgba(255,255,255,.82)}
.ticks li{position:relative; padding-left:17px}
.ticks li::before{content:""; position:absolute; left:0; top:.5em; width:9px; height:5px; border-left:2px solid var(--rose); border-bottom:2px solid var(--rose); transform:rotate(-45deg)}

/* the first thing anyone sees rises into place */
.hero-text>*{animation:enter .95s var(--ease) both}
.hero-text>:nth-child(2){animation-delay:.08s}
.hero-text>:nth-child(3){animation-delay:.18s}
.hero-text>:nth-child(4){animation-delay:.28s}
.hero-text>:nth-child(5){animation-delay:.38s}
.stage{animation:enter 1.15s .22s var(--ease) both}
@keyframes enter{from{opacity:0; transform:translate3d(0,24px,0)}to{opacity:1; transform:none}}

/* the phones */
.stage{position:relative; justify-self:center; width:min(100%,326px); perspective:1600px; --rx:0deg; --ry:0deg}
.bob{animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.device{position:relative; padding:9px; border-radius:47px; background:linear-gradient(150deg,#3b3d48,#101116 38%,#24252e 70%,#0c0d12); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.13),0 0 0 1px rgba(0,0,0,.55),0 60px 100px -46px rgba(0,0,0,.9),0 30px 130px -34px rgba(196,62,94,.6)}
.device::before,.device::after{content:""; position:absolute; width:3px; border-radius:2px; background:#2d2e38}
.device::before{left:-3px; top:132px; height:56px}
.device::after{right:-3px; top:164px; height:80px}
.island{position:absolute; z-index:3; top:19px; left:50%; width:84px; height:24px; margin-left:-42px; border-radius:14px; background:#08090d}
.screen{position:relative; display:flex; flex-direction:column; height:590px; overflow:hidden; border-radius:38px; background:#fff; color:var(--ink)}
.sh{flex:none; display:flex; align-items:center; gap:10px; padding:52px 15px 12px; border-bottom:1px solid var(--line)}
.av{flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(140deg,var(--garnet),#54204a); color:#fff; font-size:.74rem; font-weight:700}
.sh-t{min-width:0; line-height:1.25}
.sh-t b{display:block; font-size:.92rem; font-weight:600}
.sh-t small{display:block; font-size:.69rem; font-weight:500; color:#1f7a45}
.log{flex:1; min-height:0; display:flex; flex-direction:column; gap:7px; padding:15px 13px; overflow:hidden; font-size:.86rem; line-height:1.44}
.b{max-width:88%; padding:10px 13px; border-radius:18px; animation:rise .34s var(--ease) both}
.b.me{align-self:flex-end; margin-bottom:5px; border-bottom-right-radius:6px; background:linear-gradient(135deg,var(--blue),#0a418f); color:#fff}
.b.bot{align-self:flex-start; border-bottom-left-radius:6px; background:#f2f3f6}
.src{align-self:flex-start; padding-left:5px; font-size:.72rem; color:var(--muted); animation:rise .34s var(--ease) both}
.src u{color:var(--blue); text-underline-offset:2px}
.vc{align-self:stretch; display:flex; align-items:center; gap:10px; margin-top:4px; padding:8px; border:1px solid var(--line); border-radius:14px; animation:rise .34s var(--ease) both}
.vc i{flex:none; position:relative; width:46px; height:54px; border-radius:10px; background:linear-gradient(160deg,var(--garnet),#4a2245 55%,var(--blue))}
.vc i::after{content:""; position:absolute; left:50%; top:50%; margin:-7px 0 0 -4px; border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent}
.vc b{display:block; font-size:.74rem; font-weight:600; line-height:1.3}
.vc span{display:block; margin-top:2px; font-size:.67rem; color:var(--muted)}
.dots{align-self:flex-start; display:flex; gap:4px; padding:13px 14px; border-radius:18px; border-bottom-left-radius:6px; background:#f2f3f6}
.dots i{width:6px; height:6px; border-radius:50%; background:#99a0ac; animation:blink 1.1s infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.tries-wrap{display:none; flex:none; padding:10px 12px 16px; border-top:1px solid var(--line)}
.tries-wrap.on{display:block}
.tries-wrap small{display:block; margin-bottom:7px; font-size:.68rem; font-weight:600; color:var(--muted)}
.tries{display:flex; flex-wrap:wrap; gap:6px}
.try{padding:6px 12px; border:1px solid #d7dae1; border-radius:999px; background:#fff; color:var(--ink2); font-size:.74rem; font-weight:500; line-height:1.3; cursor:pointer; transition:background .2s,border-color .2s,color .2s}
.try:hover{border-color:var(--garnet); color:var(--garnet)}
.try[aria-pressed=true]{background:var(--garnet); border-color:var(--garnet); color:#fff}
.cap{margin-top:16px; text-align:center; font-size:.76rem; color:rgba(255,255,255,.84)}
.cap.dark{color:var(--muted)}
.float{display:none; position:absolute; z-index:4; width:max-content; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26); box-shadow:0 22px 44px -22px rgba(0,0,0,.7); font-size:.7rem; line-height:1.35; color:rgba(255,255,255,.84); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%)}
.float svg{flex:none; width:24px; height:24px; color:var(--rose)}
.float b{display:block; font-size:.78rem; font-weight:600; color:#fff}
.f-prog i{display:block; width:128px; height:5px; margin-top:7px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden}
.f-prog u{display:block; width:22%; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--rose),var(--ice))}

/* the questions that drift past: a tidy wrapped list until home.js sets them moving */
.band{display:grid; gap:9px; padding:6px 20px 44px}
.row{display:flex; flex-wrap:wrap; justify-content:center; gap:9px}
.row li{white-space:nowrap; padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-size:.82rem; color:rgba(255,255,255,.9)}
.band.go{padding:6px 0 46px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.band.go .row{flex-wrap:nowrap; justify-content:flex-start; gap:0; width:max-content; animation:slide 70s linear infinite}
.band.go .row.rev{animation-direction:reverse; animation-duration:84s}
.band.go .row li{margin-right:9px}
.band.go:hover .row{animation-play-state:paused}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}

/* at a glance */
.numbers{padding:58px 0}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:30px 20px}
.stats b{display:block; font-family:var(--disp); font-size:clamp(3rem,7.4vw,4.8rem); font-weight:700; line-height:1; letter-spacing:-.01em; color:transparent; background:linear-gradient(115deg,var(--garnet) 10%,#54204a 55%,var(--blue) 100%); -webkit-background-clip:text; background-clip:text}
.stats span{display:block; max-width:15em; margin-top:9px; font-size:.88rem; line-height:1.42; color:var(--ink2)}

/* sections */
.sec{padding:76px 0}
.head{max-width:46rem; margin-bottom:34px}
.k{margin-bottom:12px; font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--garnet)}
h2{font-family:var(--disp); font-weight:700; font-size:clamp(2.15rem,6.3vw,3.75rem); line-height:1.08; letter-spacing:-.012em; text-wrap:balance}
.sub{margin-top:15px; font-size:clamp(1rem,1.5vw,1.14rem); color:var(--ink2)}
h3{font-size:1.06rem; font-weight:600; line-height:1.32}

/* how it works */
.how{overflow:hidden; background:var(--paper)}
.story{display:grid; gap:30px}
.tabs{display:grid; gap:6px}
.st{position:relative; display:grid; grid-template-columns:36px 1fr; gap:13px; width:100%; padding:15px 16px; overflow:hidden; border:0; border-radius:18px; background:transparent; color:inherit; text-align:left; cursor:pointer; transition:background .3s,box-shadow .3s}
.st:hover{background:rgba(255,255,255,.7)}
.st.on{background:#fff; box-shadow:0 22px 44px -30px rgba(5,10,28,.45),0 0 0 1px rgba(5,10,28,.05)}
.n{width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#efe9e8; color:var(--ink2); font-family:var(--disp); font-size:1.02rem; font-weight:700; transition:background .3s,color .3s}
.st.on .n{background:var(--garnet); color:#fff}
.st-t{display:block; min-width:0}
.st-t b{display:block; font-size:1.02rem; font-weight:600; line-height:1.35; padding-top:6px}
.st-t span{display:block; margin-top:3px; font-size:.92rem; line-height:1.5; color:var(--ink2)}
.live .st-t span{max-height:0; margin-top:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease),opacity .35s,margin-top .45s var(--ease)}
.live .st.on .st-t span{max-height:6.4em; margin-top:3px; opacity:1}
.bar{position:absolute; left:0; right:0; bottom:0; height:3px; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--garnet),var(--blue))}
.live .st.on .bar{animation:fill 8s linear forwards paused}
.live.run .st.on .bar{animation-play-state:running}
@keyframes fill{to{transform:scaleX(1)}}
.story-phone{position:relative; isolation:isolate; justify-self:center; width:min(100%,312px)}
.story-phone::before{content:""; position:absolute; z-index:-1; left:50%; top:46%; width:620px; height:620px; margin:-310px 0 0 -310px; border-radius:50%; background:radial-gradient(closest-side,rgba(0,74,178,.12),rgba(135,40,55,.1) 55%,rgba(135,40,55,0))}
.device.flat{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.13),0 0 0 1px rgba(0,0,0,.5),0 54px 80px -48px rgba(5,10,28,.75),0 26px 100px -40px rgba(135,40,55,.4)}
.device.flat .screen{height:560px}
.sc{position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; opacity:0; visibility:hidden; transition:opacity .5s,visibility .5s}
.sc.on{opacity:1; visibility:visible}
.sc.on .a1{animation:rise .55s .15s var(--ease) both}
.sc.on .a2{animation:rise .55s .5s var(--ease) both}
.sc.on .a3{animation:rise .55s .85s var(--ease) both}
.m-top{display:grid; justify-items:center; gap:4px; padding:50px 12px 12px; border-bottom:1px solid var(--line); background:#f7f7f9}
.m-top b{font-size:.76rem; font-weight:600}
.m-av{width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#c3c7cf; color:#fff; font-size:.82rem; font-weight:600}
.m-body{flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 13px}
.m-body time{align-self:center; font-size:.68rem; color:var(--muted)}
.m-b{max-width:90%; padding:10px 13px; border-radius:18px; border-bottom-left-radius:6px; background:#e9e9ee; font-size:.86rem; line-height:1.44}
.m-b u{color:var(--blue)}
.m-link{display:flex; align-items:center; gap:10px; width:86%; padding:9px; border-radius:16px; background:#f2f3f6; font-size:.7rem; line-height:1.35; color:var(--muted)}
.m-link b{display:block; font-size:.8rem; color:var(--ink)}
.m-thumb{flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(140deg,var(--garnet),var(--blue)); color:#fff; font-size:.72rem; font-weight:700}
.sc-page{background:#f4f4f6}
.p-head{padding:52px 18px 18px; color:#fff; background:linear-gradient(150deg,var(--garnet),#4a2245 62%,var(--blue))}
.p-chip{display:inline-block; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.18); font-size:.66rem; font-weight:600}
.p-head h3{margin-top:8px; font-family:var(--disp); font-size:1.62rem; font-weight:700; line-height:1.15}
.p-head p{margin-top:4px; font-size:.8rem; line-height:1.42; opacity:.92}
.p-card{margin:-8px 12px 0; padding:14px; border-radius:18px; background:#fff; box-shadow:0 16px 30px -24px rgba(5,10,28,.6)}
.p-card small{display:block; font-size:.68rem; font-weight:600; color:var(--garnet)}
.p-card b{display:block; font-family:var(--disp); font-size:1.14rem; font-weight:700}
.p-bar{height:6px; margin:8px 0 6px; border-radius:3px; background:#eceef2; overflow:hidden}
.p-bar i{display:block; width:22%; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--garnet),var(--blue))}
.p-card li{position:relative; padding:8px 0 8px 27px; border-top:1px solid #f0f1f4; font-size:.8rem; line-height:1.35}
.p-card li:first-child{border-top:0}
.p-card li::before{content:""; position:absolute; left:0; top:8px; width:18px; height:18px; border:1.5px solid #cdd1d9; border-radius:50%}
.p-card li.done{color:var(--muted)}
.p-card li.done::before{border-color:#1f7a45; background:#1f7a45}
.p-card li.done::after{content:""; position:absolute; left:5px; top:13px; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg)}
.sc-video{justify-content:center; gap:14px; padding:0 13px; background:#0c0e16; color:#fff}
.v-poster{position:relative; aspect-ratio:4/5; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:14px; overflow:hidden; border-radius:20px; background:radial-gradient(90% 70% at 72% 18%,rgba(255,180,195,.34),transparent 62%),linear-gradient(155deg,var(--garnet),#46214b 58%,var(--blue))}
.v-play{position:absolute; left:50%; top:44%; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%; background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.v-play::after{content:""; position:absolute; left:26px; top:20px; border-left:19px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent}
.v-cap{padding:6px 10px; border-radius:8px; background:rgba(0,0,0,.62); font-size:.76rem; line-height:1.38; text-align:center}
.v-meta b{display:block; font-size:.84rem; font-weight:600; line-height:1.35}
.v-meta span{display:block; margin-top:2px; font-size:.7rem; color:rgba(255,255,255,.72)}

/* the platform: four tiles, each with a small picture of the real thing */
.bento{display:grid; gap:14px}
.tile{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-width:0; padding:26px 24px; overflow:hidden; border-radius:28px; transition:transform .35s var(--ease),box-shadow .35s}
.tile:hover{transform:translateY(-3px); box-shadow:0 34px 60px -44px rgba(5,10,28,.6)}
.tile h3{font-family:var(--disp); font-size:clamp(1.42rem,2.5vw,1.8rem); font-weight:700; line-height:1.18; letter-spacing:-.006em}
.tile-t p{max-width:30em; margin-top:7px; font-size:.95rem; line-height:1.55}
.vis{display:flex; align-items:center; gap:18px; min-width:0}
.vis-chat{display:flex; flex:1; flex-direction:column; gap:7px; min-width:0; font-size:.85rem; line-height:1.44}
.tile .b{animation:none; box-shadow:0 12px 24px -20px rgba(5,10,28,.5)}
.tile .b.bot{background:#fff}
.t-stand{background:linear-gradient(150deg,var(--blue-soft),#f4f6fb)}
.t-stand .tile-t p{color:var(--ink2)}
.ring{position:relative; flex:none; width:clamp(84px,24vw,104px); height:clamp(84px,24vw,104px); display:grid; place-items:center}
.ring svg{position:absolute; inset:0; transform:rotate(-90deg); stroke-width:10}
.ring circle{stroke:#d6dfee}
.ring circle.on{stroke:var(--garnet); stroke-dasharray:314; stroke-dashoffset:244; transition:stroke-dashoffset 1.4s var(--ease) .25s}
.rv.pre .ring circle.on{stroke-dashoffset:314}
.ring span{font-size:.78rem; color:var(--ink2)}
.ring b{font-family:var(--disp); font-size:1.7rem; font-weight:700; color:var(--ink)}
.t-person{color:#fff; background:linear-gradient(150deg,var(--garnet),#4a1d3e)}
.t-person .tile-t p{color:rgba(255,255,255,.88)}
.who{display:grid; grid-template-columns:48px 1fr; align-items:center; gap:10px 12px; width:100%; padding:14px; border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 22px 36px -26px rgba(0,0,0,.7)}
.who-av{width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--garnet-soft); color:var(--garnet)}
.who-av svg{width:26px; height:26px}
.who-t b{display:block; font-size:.86rem; font-weight:600; line-height:1.3}
.who-t i{display:block; width:62%; height:7px; margin-top:7px; border-radius:4px; background:#e9ebef}
.who-btns{grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.who-btns em{padding:8px; border-radius:11px; background:var(--garnet); color:#fff; font-size:.78rem; font-style:normal; font-weight:600; text-align:center}
.who-btns em+em{background:var(--blue)}
.t-money{color:#fff; background:linear-gradient(155deg,#0b1633,var(--night))}
.t-money .tile-t p{color:rgba(255,255,255,.8)}
.t-money .vis{flex-direction:column; align-items:stretch; gap:12px}
.fee{display:flex; align-items:center; gap:14px}
.fee b{font-family:var(--disp); font-size:2.4rem; font-weight:700; line-height:1}
.fee span{font-size:.78rem; line-height:1.4; color:rgba(255,255,255,.76)}
.t-money .vc{margin:0; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.07); animation:none}
.t-money .vc b{font-size:.84rem}
.t-money .vc span{font-size:.72rem; color:rgba(255,255,255,.72)}
.t-lang{background:linear-gradient(150deg,var(--garnet-soft),#fbf5f3)}
.t-lang .tile-t p{color:var(--ink2)}

/* the journey */
.path-sec{background:var(--paper)}
.says{display:inline-block; margin-top:11px; padding:6px 13px; border-radius:15px 15px 15px 5px; background:#fff; color:var(--blue); font-size:.8rem; font-weight:500; line-height:1.35; box-shadow:0 12px 22px -18px rgba(5,10,28,.6),0 0 0 1px rgba(5,10,28,.05)}
.path{position:relative; display:grid; gap:30px}
.path::before{content:""; position:absolute; left:27px; top:28px; bottom:96px; width:2px; background:linear-gradient(var(--garnet),var(--blue)); transform-origin:top; transition:transform 1.5s var(--ease) .15s}
.path.pre::before{transform:scaleY(0)}
.node{position:relative; display:grid; grid-template-columns:56px 1fr; gap:17px}
.dot{width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--garnet); box-shadow:0 0 0 2px var(--garnet),0 0 0 8px var(--paper)}
.dot svg{width:27px; height:27px}
.node p{margin-top:3px; font-size:.95rem; color:var(--ink2)}
.node h3{font-family:var(--disp); font-size:1.42rem; font-weight:700; padding-top:2px}

/* each student's steps */
.fit{background:linear-gradient(180deg,#fff 0%,var(--blue-soft) 100%)}
.fit-in{display:grid; gap:34px}
.types{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.ty{padding:9px 15px; border:1.5px solid #d3d7df; border-radius:999px; background:#fff; color:var(--ink2); font-size:.86rem; font-weight:500; cursor:pointer; transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.ty:hover{border-color:var(--garnet); color:var(--garnet); transform:translateY(-1px)}
.ty[aria-pressed=true]{background:var(--garnet); border-color:var(--garnet); color:#fff}
.sheet{padding:24px 22px 20px; border-radius:26px; background:#fff; box-shadow:0 44px 80px -50px rgba(0,47,112,.55),0 0 0 1px rgba(5,10,28,.05)}
.sheet-k{margin-bottom:8px; font-family:var(--disp); font-size:1.42rem; font-weight:700; line-height:1.22}
.list li{position:relative; padding:11px 0 11px 31px; border-top:1px solid #eef0f3; animation:rise .42s var(--ease) both; animation-delay:calc(var(--i,0) * 38ms)}
.list li:first-child{border-top:0}
.list li::before{content:""; position:absolute; left:0; top:13px; width:19px; height:19px; border:1.5px solid #cdd1d9; border-radius:50%}
.list li.hl::before{border-color:var(--garnet); background:var(--garnet-soft)}
.list b{display:block; font-size:.93rem; font-weight:600; line-height:1.35}
.list span{display:block; font-size:.84rem; line-height:1.42; color:var(--muted)}
.legend{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:.76rem; color:var(--muted)}
.legend i{width:11px; height:11px; border:1.5px solid var(--garnet); border-radius:50%; background:var(--garnet-soft)}

/* trust */
.trust{position:relative; isolation:isolate; overflow:hidden; background:var(--night); color:#fff}
.trust::before{content:""; position:absolute; z-index:-1; width:90vmax; height:90vmax; right:-40vmax; top:-52vmax; border-radius:50%; background:radial-gradient(closest-side,rgba(135,40,55,.75),rgba(135,40,55,0))}
.trust::after{content:""; position:absolute; z-index:-1; width:80vmax; height:80vmax; left:-40vmax; bottom:-50vmax; border-radius:50%; background:radial-gradient(closest-side,rgba(0,74,178,.55),rgba(0,74,178,0))}
.trust .k,.heritage .k{color:var(--rose)}
.flow{display:grid; gap:8px}
.flow li{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); font-size:.96rem; font-weight:500; line-height:1.35}
.flow span{flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(140deg,var(--garnet),#2a4f96); font-family:var(--disp); font-size:.94rem; font-weight:700}
.flow-note{margin:12px 2px 34px; font-size:.92rem; color:rgba(255,255,255,.8)}
.pts{display:grid; gap:12px}
.pts li{padding:22px 20px; border-radius:22px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); transition:background .3s,border-color .3s,transform .3s var(--ease)}
.pts li:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26); transform:translateY(-3px)}
.pts svg{display:block; width:30px; height:30px; margin-bottom:12px; color:var(--rose)}
.pts p{margin-top:5px; font-size:.93rem; line-height:1.55; color:rgba(255,255,255,.8)}

/* the team */
.two{display:grid; gap:4px}
.rows{display:grid; gap:12px}
.rows li{display:grid; grid-template-columns:50px 1fr; gap:15px; padding:18px; border:1px solid var(--line); border-radius:20px; background:#fff; transition:box-shadow .3s,transform .3s var(--ease)}
.rows li:hover{box-shadow:0 26px 50px -36px rgba(5,10,28,.45); transform:translateY(-2px)}
.ico{width:50px; height:50px; display:grid; place-items:center; border-radius:15px; background:var(--garnet-soft); color:var(--garnet)}
.ico svg{width:26px; height:26px}
.rows p{margin-top:3px; font-size:.94rem; color:var(--ink2)}

/* heritage */
.heritage{position:relative; isolation:isolate; overflow:hidden; padding:80px 0 76px; color:#fff; background:linear-gradient(135deg,var(--garnet-d) 0%,var(--garnet) 46%,#551a33 100%)}
.ghost{position:absolute; z-index:-1; right:-1.5%; bottom:-.16em; font-family:var(--disp); font-size:clamp(9rem,33vw,27rem); font-weight:700; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.1); -webkit-user-select:none; user-select:none}
.heritage .sub{color:rgba(255,255,255,.92)}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; padding-top:28px; border-top:1px solid rgba(255,255,255,.26)}
.facts b{display:block; font-family:var(--disp); font-size:clamp(2.3rem,5.4vw,3.5rem); font-weight:700; line-height:1.05}
.facts span{display:block; margin-top:4px; font-size:.86rem; color:rgba(255,255,255,.88)}
.more{display:inline-flex; align-items:center; gap:8px; margin-top:32px; color:#fff; font-weight:600; text-underline-offset:4px}
.more svg{width:18px; height:18px; stroke-width:2.2; transition:transform .25s var(--ease)}
.more:hover svg{transform:translateX(3px)}

/* students */
.help{display:grid; gap:14px; padding:30px 24px; border-radius:28px; background:var(--paper); box-shadow:0 0 0 1px rgba(5,10,28,.05)}
.help-t{display:grid; gap:10px; color:var(--ink2)}
.help a{font-weight:600}

/* footer */
.foot{padding:40px 0 calc(26px + env(safe-area-inset-bottom)); background:var(--night); color:rgba(255,255,255,.78); font-size:.84rem}
.foot-a{display:grid; gap:18px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14)}
.foot-a b{display:block; font-family:var(--disp); font-size:1.42rem; font-weight:700; color:#fff}
.foot-a nav{display:flex; flex-wrap:wrap; gap:2px 22px}
.foot-a nav a{padding:6px 0}
.foot a{color:#fff; text-underline-offset:3px}
.foot-b{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; padding-top:16px; font-size:.76rem}

/* things rising in as they come on screen (home.js only hides what's below the fold) */
.rv{transition:opacity .85s var(--ease),transform .85s var(--ease); transition-delay:var(--d,0ms)}
.rv.pre{opacity:0; transform:translate3d(0,26px,0)}
.pts li.rv:hover{transition-delay:0ms}

@media(max-width:480px){.btn{flex:1 1 100%; justify-content:center}}
@media(max-width:359px){.cta{display:none}}
/* On a phone the sky holds still: it's barely visible there, and phones judge a page by how smoothly it scrolls. */
@media(max-width:639px){.sky i{animation:none; will-change:auto}}
@media(min-width:640px){
  .wrap{padding:0 28px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stats li+li{padding-left:22px; border-left:1px solid var(--line)}
  .pts{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:repeat(3,1fr)}
  .flow{gap:26px}
  .flow li{position:relative}
  .flow li+li::before{content:""; position:absolute; left:-21px; top:50%; width:10px; height:10px; margin-top:-5px; border-top:2px solid rgba(255,255,255,.5); border-right:2px solid rgba(255,255,255,.5); transform:rotate(45deg)}
  .facts{grid-template-columns:repeat(4,1fr)}
  .help{grid-template-columns:.8fr 1.2fr; gap:36px; padding:42px}
  .foot-a{grid-template-columns:1fr auto; align-items:center}
  .bento{grid-template-columns:repeat(12,1fr)}
  .t-stand,.t-lang{grid-column:span 7}
  .t-person,.t-money{grid-column:span 5}
  .tile{padding:32px 30px}
}
@media(min-width:880px){
  body{font-size:17px}
  .top-in{padding:7px 12px 7px 13px}
  .nav{display:flex; gap:26px}
  .path{grid-template-columns:repeat(4,1fr); gap:26px}
  .path::before{left:0; right:12%; top:27px; bottom:auto; width:auto; height:2px; background:linear-gradient(90deg,var(--garnet),var(--blue)); transform-origin:left}
  .path.pre::before{transform:scaleX(0)}
  .node{grid-template-columns:1fr; gap:15px}
  .story{grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  .st{padding:18px 20px; gap:15px}
  .st-t b{font-size:1.14rem; padding-top:5px}
  .st-t span{font-size:.98rem}
  .fit-in{grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .two{grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center}
  .two .head{margin-bottom:0}
  .pts{grid-template-columns:repeat(3,1fr)}
  .sec{padding:120px 0}
  .numbers{padding:88px 0}
  .heritage{padding:120px 0 110px}
}
@media(min-width:1000px){
  .hero-in{grid-template-columns:1.12fr .88fr; align-items:center; gap:40px; min-height:calc(100vh - 118px); min-height:calc(100svh - 118px); padding-top:124px; padding-bottom:28px}
  h1{font-size:clamp(4.4rem,7.1vw,6.4rem)}
  .stage{width:326px}
  .device.hero-phone{transform:rotateY(calc(-11deg + var(--ry))) rotateX(calc(3deg + var(--rx))) rotateZ(.6deg); transition:transform .3s ease-out}
}
@media(min-width:1000px) and (max-height:800px){
  .hero-phone .screen{height:510px}
}
@media(min-width:1140px){
  .float{display:flex}
  .f1{right:calc(100% - 22px); top:54px}
  .f2{left:calc(100% - 26px); top:226px}
  .f3{right:calc(100% - 16px); bottom:150px}
  .f1{animation:bob 6s ease-in-out infinite}
  .f2{animation:bob 8s ease-in-out -2s infinite}
  .f3{animation:bob 7s ease-in-out -4s infinite}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}
@media print{
  .rv.pre{opacity:1; transform:none}
  .top{position:static; box-shadow:none}
}