@font-face{font-family:Inter;src:url('/ferrario/assets/inter-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/ferrario/assets/inter-semibold.ttf') format('truetype');font-weight:500 800;font-display:swap}
:root{font-family:Inter,Arial,sans-serif;color:#071d40;background:#fff;font-synthesis:none;--travel:480svh;--chrome:1;--welcome:0;--content:0;--content-shift:0px;--post-nav:0;--blue:#1385f5;--navy:#020a18}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#80bfff #061022}
body{margin:0;overflow-x:hidden;background:#fff}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #4ca6ff;outline-offset:5px}
.skip-link{position:fixed;z-index:1000;top:12px;left:12px;transform:translateY(-180%);padding:14px 19px;border-radius:999px;background:#fff;color:#071d40;text-decoration:none;box-shadow:0 10px 35px #071d4030}
.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.journey{height:calc(100svh + var(--travel));position:relative}
.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:#fff;isolation:isolate}
.cinema{position:absolute;z-index:0;inset:0;overflow:hidden;background:#081321}
.cinema canvas,.cinema>img,.cinema>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cinema canvas{display:block}
.cinema>video{z-index:1;opacity:var(--idle,0);transition:opacity .34s ease}
.cinema>img{z-index:2;transition:opacity .34s ease}
.cinema-shade{position:absolute;z-index:3;inset:0;background:linear-gradient(180deg,rgba(2,9,20,.28),transparent 25%,transparent 68%,rgba(2,9,20,.58));opacity:var(--chrome);pointer-events:none}
.intro-chrome{position:absolute;z-index:2;inset:0;opacity:var(--chrome);color:#fff;pointer-events:none}
.intro-chrome a{pointer-events:auto}
.hero-brand{position:absolute;left:clamp(28px,4.7vw,76px);top:clamp(26px,4.8vh,54px);width:clamp(190px,16vw,260px);pointer-events:none}
.hero-brand img{display:block;width:100%;height:auto}
.hero-brand .hero-wordmark{filter:brightness(0) invert(1)}
.hero-brand .hero-brand-mark{position:absolute;left:0;top:0;width:31.214%;height:100%;object-fit:fill;filter:none}
.hero-headline{position:absolute;top:clamp(150px,20vh,230px);left:50%;transform:translateX(-50%);width:max-content;margin:0;color:#fff;font-size:clamp(40px,min(8.1vw,15.5svh),170px);font-weight:650;line-height:1;letter-spacing:-.058em;text-shadow:0 8px 30px #00152d4d}
.hero-headline del{display:inline-block;margin:0 .02em 0 .08em;font-family:Georgia,serif;font-size:.73em;font-style:italic;font-weight:400;letter-spacing:-.08em;text-decoration-thickness:3px;text-decoration-color:#59b8ff;text-underline-offset:0}
.glass-nav{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.15vw,18px)}
.glass-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:58px;min-width:170px;padding:13px 30px;border:1px solid rgba(255,255,255,.46);border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(217,232,255,.1));box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 10px 32px rgba(2,17,45,.18);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);color:#fff;text-decoration:none;font-size:clamp(18px,1.48vw,25px);font-weight:500;letter-spacing:-.025em;line-height:1;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.glass-pill::before{content:"";position:absolute;inset:1px;border-radius:inherit;border-top:1px solid rgba(255,255,255,.35);pointer-events:none}
.glass-pill:hover{transform:translateY(-2px);background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(225,235,255,.16));border-color:rgba(255,255,255,.75)}
.glass-pill:active{transform:translateY(0)}
.hero-nav{position:absolute;top:clamp(28px,5.4vh,58px);left:50%;transform:translateX(-50%);width:max-content}
.hero-nav .glass-pill:first-child,.post-nav .glass-pill:first-child{min-width:210px}
.laptop-hit{position:absolute;z-index:2;border:1px solid transparent;border-radius:5px;background:transparent;color:#fff;opacity:var(--chrome);padding:0}
.laptop-hit>span{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);opacity:1;white-space:nowrap;padding:12px 20px;border:1px solid #ffffff70;border-radius:999px;background:#0a1c34c9;box-shadow:inset 0 1px 1px #ffffff35,0 8px 24px #00162c52;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:clamp(15px,1.55vw,30px);padding:.8em 1.35em;font-weight:500}
.laptop-hit:hover>span{background:#102b4de8}
.laptop-hit:focus-visible{border-color:#fff}
.white-bridge{position:absolute;z-index:3;inset:0;background:#fff;opacity:0;pointer-events:none}
.welcome{position:absolute;z-index:4;inset:0;display:grid;place-items:center;visibility:hidden;opacity:var(--welcome);background:#fff}
.welcome::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 0% 70%,#e6f3ff 0,transparent 44%),radial-gradient(ellipse at 100% 82%,#edf7ff 0,transparent 47%);opacity:var(--content);pointer-events:none}
.welcome.is-visible{visibility:visible}
.welcome-content{position:relative;width:min(720px,calc(100% - 56px));text-align:center;opacity:var(--content);transform:translateY(var(--content-shift))}
.welcome-logo{display:block;width:92%;height:auto;margin:0 auto;object-fit:contain}
.welcome h2{margin:27px 0 0;color:#071d40;font-size:clamp(38px,4.35vw,66px);font-weight:400;letter-spacing:-.05em;line-height:1.05}
.welcome h2:focus,.content-section h2:focus{outline:none}
.welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:45px}
.action{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:92px;padding:20px 24px;border-radius:999px;font-size:clamp(23px,2.25vw,34px);font-weight:500;letter-spacing:-.045em;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.action span{margin-left:30px;font-size:1.05em}
.action:hover{transform:translateY(-2px)}
.action-primary{border:1px solid #7bc6ff;background:linear-gradient(145deg,#388eff 0%,#1476ef 48%,#53b7ff 100%);color:#fff;box-shadow:inset 0 1px 1px #ffffffba,0 12px 34px #248cf33b}
.action-secondary{border:1px solid #8dcaff;background:linear-gradient(145deg,#fff,rgba(235,247,255,.82));color:#071d40;box-shadow:inset 0 1px 1px #fff,0 12px 30px #388eff15}
.post-nav{position:absolute;z-index:2;top:clamp(34px,7.2vh,76px);left:50%;transform:translateX(-50%);width:max-content;opacity:var(--post-nav)}
.post-nav .glass-pill{color:#082968;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(226,241,255,.62));border-color:rgba(81,171,255,.52);box-shadow:inset 0 1px 1px #fff,0 12px 36px rgba(38,124,221,.10)}
.back-library{position:absolute;z-index:3;left:36px;bottom:max(28px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:9px;padding:10px 0;border:0;background:transparent;color:#52647c;font-size:13px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.site-entered:not(.site-scrolled) .back-library{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.timeline{position:absolute;z-index:5;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12);opacity:var(--chrome)}
#timeline-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#80bfff}
.screen-plane .action{transition:none;cursor:default}

.site-brand{position:fixed;z-index:50;top:max(18px,env(safe-area-inset-top));left:22px;display:grid;place-items:center;width:58px;height:58px;padding:11px;border:1px solid rgba(147,203,255,.42);border-radius:18px;background:rgba(255,255,255,.84);box-shadow:inset 0 1px 1px #fff,0 14px 38px #001a3b20;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.site-brand img{display:block;width:100%;height:100%;object-fit:contain}
.site-entered .site-brand{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.site-entered .journey{height:100svh}
.site-entered .stage{position:relative}
.site-entered .timeline{display:none}

.content-section{position:relative;isolation:isolate;scroll-margin-top:0;padding:clamp(88px,6.4vw,108px) clamp(22px,4.8vw,76px);overflow:hidden}
.section-shell{width:min(1460px,100%);margin:0 auto}
.section-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(50px,6vw,110px)}
.section-kicker{margin:0 0 16px;color:#4da8ff;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.section-copy h2{margin:0;font-size:clamp(52px,6vw,88px);font-weight:650;line-height:.95;letter-spacing:-.065em}
.section-copy h2 span{color:#2b8cff}
.dark-section{min-height:100svh;background:radial-gradient(circle at 78% 34%,#0a2c5c 0,transparent 34%),radial-gradient(circle at 38% 100%,#07214a 0,transparent 32%),linear-gradient(140deg,#010714,#031229 58%,#020817);color:#fff}
.dark-section::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.28;background-image:linear-gradient(rgba(87,160,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(87,160,255,.08) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to right,transparent 25%,#000)}
.section-cta{display:inline-flex;align-items:center;gap:24px;margin-top:32px;padding:16px 23px;border-radius:999px;text-decoration:none;font-weight:600;transition:transform .2s ease,box-shadow .2s ease}
.section-cta:hover{transform:translateY(-2px)}
.dark-cta{border:1px solid #4f9fff;background:linear-gradient(145deg,rgba(24,80,164,.5),rgba(5,26,60,.72));box-shadow:inset 0 1px 1px #b4dcff55,0 10px 34px #006dff30;color:#fff}
.light-cta{border:1px solid #69bbff;background:linear-gradient(145deg,#177cf1,#43b6ff);box-shadow:inset 0 1px 1px #ffffff8f,0 12px 35px #168bf240;color:#fff}

.how-layout{grid-template-columns:minmax(480px,.9fr) minmax(520px,1.1fr)}
.how-copy{position:relative;z-index:5}
.how-steps{display:grid;gap:25px;margin:42px 0 0;padding:0;list-style:none}
.how-steps li{display:grid;grid-template-columns:55px 1fr;gap:18px;align-items:start}
.step-number{display:grid;place-items:center;width:48px;height:48px;border:1px solid #3b92f5;border-radius:50%;background:radial-gradient(circle at 38% 30%,#124d98,#04132d 70%);box-shadow:inset 0 0 18px #1986ff35,0 0 24px #147df328;color:#fff;font-size:19px}
.how-steps h3{margin:1px 0 7px;font-size:clamp(18px,1.35vw,22px);font-weight:600;letter-spacing:-.025em}
.how-steps p{margin:0;color:#b8c8dc;font-size:clamp(14px,1vw,16px);line-height:1.55}
.how-visual{position:relative;min-height:700px;filter:drop-shadow(0 30px 80px #006dff22)}
.data-network{position:absolute;z-index:1;inset:0;width:100%;height:100%}
.incoming-lines path,.outgoing-lines path{stroke:#2a8eff;stroke-width:3;stroke-dasharray:9 12;filter:url(#blue-glow)}
.incoming-lines path{animation:flowIn 5s linear infinite}
.incoming-lines path:nth-child(2),.incoming-lines path:nth-child(5){animation-delay:-1.1s}.incoming-lines path:nth-child(3),.incoming-lines path:nth-child(6){animation-delay:-2.2s}
.outgoing-lines path{opacity:0;animation:flowOut 5s linear infinite}
.outgoing-lines path:nth-child(2){animation-delay:-.7s}.outgoing-lines path:nth-child(3){animation-delay:-1.4s}
.student-silhouette{animation:studentGlow 5s ease-in-out infinite}
.data-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid #207ee2;border-radius:10px;background:linear-gradient(145deg,rgba(14,55,115,.88),rgba(4,23,53,.82));box-shadow:inset 0 1px 1px #92c8ff4d,0 0 26px #087cff2b;color:#d7ebff;font-size:12px;white-space:nowrap;animation:chipCycle 5s ease-in-out infinite}
.data-chip span{color:#5eafff;font-size:17px}
.chip-tuition{left:10%;top:17%}.chip-rent{left:0;top:31%;animation-delay:-.3s}.chip-scholarship{left:4%;top:53%;animation-delay:-.7s}
.chip-groceries{right:12%;top:12%;animation-delay:-.4s}.chip-job{right:1%;top:27%;animation-delay:-.9s}.chip-bank{right:-2%;top:48%;animation-delay:-1.3s}
.dashboard-card{position:absolute;z-index:4;right:-7%;top:18%;width:54%;padding:18px;border:1px solid #2c8eff;border-radius:22px;background:linear-gradient(145deg,rgba(4,28,67,.96),rgba(1,12,31,.98));box-shadow:inset 0 1px 1px #9cd0ff5c,0 0 40px #087cff52,0 28px 80px #000b;opacity:0;transform:perspective(900px) rotateY(-10deg) translateX(38px) scale(.94);transform-origin:left center;animation:dashboardCycle 5s ease-in-out infinite}
.how-visual:not(.motion-active) .incoming-lines path,.how-visual:not(.motion-active) .outgoing-lines path,.how-visual:not(.motion-active) .student-silhouette,.how-visual:not(.motion-active) .data-chip,.how-visual:not(.motion-active) .dashboard-card{animation-play-state:paused}
.dashboard-head{display:flex;align-items:center;gap:9px;padding-bottom:14px;color:#fff}.dashboard-head img{width:21px;height:21px}.dashboard-head span{margin-left:auto;color:#5caeff}
.dashboard-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:9px}
.dash-panel{min-height:100px;padding:13px;border:1px solid #154f96;border-radius:11px;background:linear-gradient(150deg,#092754,#041633);color:#ddebff}
.dash-panel small{display:block;color:#98bce5;font-size:10px}.safe strong{display:block;margin-top:8px;font-size:30px}.safe span{font-size:9px;color:#8eb2d9}
.forecast svg{width:100%;height:55px;margin-top:10px}.forecast path{fill:none;stroke:#51a8ff;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 6px #208bff)}
.timeline-panel{grid-column:1/-1;min-height:80px}.timeline-panel div{position:relative;display:flex;justify-content:space-between;margin-top:26px}.timeline-panel div::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:#1e6fc5}.timeline-panel i{position:relative;width:12px;height:12px;border:2px solid #54aeff;border-radius:50%;background:#06224b}
.assistant{grid-column:1/-1;min-height:70px}.assistant p{margin:8px 0 0;color:#bcd3ed;font-size:11px;line-height:1.4}
@keyframes flowIn{0%{opacity:0;stroke-dashoffset:120}8%,32%{opacity:1}42%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes flowOut{0%,34%{opacity:0;stroke-dashoffset:130}44%,72%{opacity:1}86%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes chipCycle{0%,38%,100%{opacity:.55;transform:scale(.98)}10%,30%{opacity:1;transform:scale(1)}}
@keyframes studentGlow{0%,100%{opacity:.78}28%,76%{opacity:1}}
@keyframes dashboardCycle{0%,39%{opacity:0;transform:perspective(900px) rotateY(-10deg) translateX(38px) scale(.94)}52%,86%{opacity:1;transform:perspective(900px) rotateY(-4deg) translateX(0) scale(1)}100%{opacity:0;transform:perspective(900px) rotateY(-2deg) translateX(8px) scale(.985)}}

.privacy-section{min-height:100svh;background:radial-gradient(circle at 6% 5%,#e6f3ff,transparent 34%),radial-gradient(circle at 95% 86%,#ddecff,transparent 30%),#fff}
.privacy-layout{grid-template-columns:minmax(440px,.92fr) minmax(520px,1.08fr)}
.privacy-copy h2{color:#071d40;font-size:clamp(42px,4.6vw,68px);line-height:1}
.privacy-copy h2 span{display:block;color:#167eef}
.privacy-prose{margin-top:36px}
.privacy-prose h3{margin:22px 0 5px;color:#071d40;font-size:clamp(17px,1.3vw,21px);letter-spacing:-.02em}
.privacy-prose p{margin:0;color:#53667d;font-size:clamp(14px,1.05vw,17px);line-height:1.55}
.privacy-prose ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none;color:#3d526c;font-size:clamp(14px,1.05vw,17px)}
.privacy-prose li{position:relative;padding-left:21px}.privacy-prose li::before{content:"";position:absolute;left:0;top:.56em;width:7px;height:7px;border-radius:50%;background:#1b91ff;box-shadow:0 0 9px #2d9fff}
.privacy-visual{position:relative;min-height:660px;perspective:1000px}
.glass-frame{position:absolute;left:12%;top:17%;width:73%;aspect-ratio:1.18/1;transform-style:preserve-3d}
.glass-back{position:absolute;inset:0;border:3px solid rgba(60,154,244,.7);border-radius:22px;background:linear-gradient(145deg,rgba(213,238,255,.28),rgba(130,199,255,.09));box-shadow:inset 0 0 42px #76bdff2e,0 24px 70px #1878c924,0 0 0 8px #8bc9ff16}
.glass-door{position:absolute;inset:0;border:3px solid rgba(84,171,255,.8);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(119,198,255,.12));box-shadow:inset 0 0 30px #ffffff7d,0 15px 45px #126fbe24;transform-origin:left center;transform:rotateY(-36deg);animation:doorOpen 4.5s ease-in-out infinite}
.hinge{position:absolute;left:-8px;width:15px;height:54px;border:2px solid #5ba8ec;border-radius:7px;background:linear-gradient(90deg,#dff4ff,#75bfff,#eaf8ff);box-shadow:0 0 14px #329cff80}.hinge-one{top:15%}.hinge-two{bottom:15%}
.info-symbol{position:absolute;z-index:2;top:33%;width:27%;aspect-ratio:1;border:2px solid rgba(83,171,255,.65);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(137,207,255,.25));box-shadow:inset 0 1px 2px #fff,0 14px 34px #1d8fec32,0 0 24px #2a97ff24;color:#2091ff;display:grid;place-items:center}
.info-symbol svg{width:66%;height:66%}.manual-symbol{left:7%;animation:manualOut 4.5s ease-in-out infinite}.bank-symbol{left:36.5%}.document-symbol{right:7%}
.privacy-visual:not(.motion-active) .glass-door,.privacy-visual:not(.motion-active) .manual-symbol{animation-play-state:paused}
@keyframes doorOpen{0%,10%,100%{transform:rotateY(-18deg)}28%,82%{transform:rotateY(-48deg)}}
@keyframes manualOut{0%,18%,100%{transform:translateX(0)}42%,70%{transform:translateX(-102%) rotate(-3deg)}84%{transform:translateX(0)}}

.about-layout{grid-template-columns:minmax(520px,1fr) minmax(420px,.82fr)}
.about-prose{margin-top:36px}
.about-prose p{margin:0 0 20px;color:#bdcbdd;font-size:clamp(15px,1.17vw,18px);line-height:1.62}
.portrait-frame{position:relative;margin:0;min-height:680px;border:1px solid #268dff;border-radius:28px;background:linear-gradient(145deg,#0b3269,#031229);box-shadow:inset 0 1px 1px #8bceff68,0 0 42px #087cff55,0 30px 90px #0008;overflow:hidden;transform:perspective(1000px) rotateY(-2deg)}
.portrait-frame::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 55%,#041329d1),radial-gradient(circle at 50% 35%,transparent 40%,#04132970);pointer-events:none}
.portrait-frame::after{content:"";position:absolute;z-index:3;inset:12px;border:1px solid #3aa0ff;border-radius:21px;box-shadow:inset 0 0 30px #158cff35;pointer-events:none}
.portrait-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 27%;filter:saturate(.9) contrast(1.02)}

.placeholder-page{min-height:100svh;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 20% 10%,#dceeff,transparent 34%),#f8fbff}
.placeholder-card{width:min(680px,100%);padding:clamp(32px,7vw,72px);border:1px solid #d7e6f4;border-radius:32px;background:rgba(255,255,255,.88);box-shadow:0 30px 100px #123d6b17}
.placeholder-card>img{display:block;width:min(360px,82%);height:auto;margin:0 0 55px}
.placeholder-card h1{margin:0;color:#071d40;font-size:clamp(34px,6vw,60px);line-height:1.03;letter-spacing:-.055em}
.placeholder-card>p:not(.section-kicker){margin:26px 0;color:#53667d;font-size:18px;line-height:1.6}
.placeholder-card code{font-size:.9em}.placeholder-back{display:inline-flex;margin-top:16px;padding:17px 24px;border-radius:999px;background:#147ef3;color:#fff;text-decoration:none;font-weight:600}

dialog{border:1px solid #dce6f2;border-radius:20px;padding:42px;width:min(440px,calc(100% - 40px));color:#071d40;box-shadow:0 30px 100px #0b1f3b30}
dialog::backdrop{background:#0b1f3b50;backdrop-filter:blur(8px)}
dialog img{max-width:65%;height:auto}
dialog h2{font-size:30px;letter-spacing:-.04em;margin:34px 0 14px}
dialog p{font-size:16px;line-height:1.65;color:#52647c;margin:0 0 28px}
dialog .action{font-size:17px;min-height:54px;border-radius:10px;padding:12px}
.dialog-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;background:transparent;color:#52647c;font-size:28px}
.noscript-notice{position:fixed;z-index:10;bottom:20px;width:100%;text-align:center}

@media(max-width:1120px){
  .section-split,.how-layout,.privacy-layout,.about-layout{grid-template-columns:1fr}
  .section-copy{max-width:820px}
  .how-visual,.privacy-visual{width:min(820px,100%);margin:0 auto}
  .privacy-visual{order:2}.privacy-copy{order:1}
  .portrait-frame{width:min(720px,100%);min-height:760px}
}
@media(max-width:700px){
  :root{--travel:350svh}
  .cinema{background:#081321}
  .cinema>img,.cinema>video{object-fit:contain}
  .cinema-shade{background:linear-gradient(180deg,rgba(2,9,20,.12),transparent 48%,#081321 68%)}
  .hero-brand{left:18px;top:max(16px,env(safe-area-inset-top));width:145px}
  .hero-nav,.post-nav{width:calc(100% - 24px)}
  .hero-nav{top:max(76px,calc(env(safe-area-inset-top) + 66px))}
  .post-nav{top:max(20px,env(safe-area-inset-top))}
  .glass-nav{gap:6px}
  .glass-pill,.hero-nav .glass-pill:first-child,.post-nav .glass-pill:first-child{min-width:0;min-height:44px;flex:1;padding:10px 7px;font-size:14px}
  .hero-headline{top:24%;font-size:clamp(31px,9vw,44px)}
  .laptop-hit>span{padding:10px 14px;font-size:13px}
  .welcome-content{width:calc(100% - 34px);padding-top:46px}
  .welcome-logo{width:100%}
  .welcome h2{font-size:clamp(31px,9.2vw,42px);margin-top:20px}
  .welcome-actions{gap:10px;margin-top:31px}
  .action{min-height:64px;padding:14px 10px;font-size:21px}.action span{margin-left:12px}
  .site-brand{top:max(12px,env(safe-area-inset-top));left:12px;width:48px;height:48px;padding:9px;border-radius:15px}
  .content-section{padding:82px 18px}
  .section-copy{padding-left:44px}
  .section-copy h2{font-size:clamp(48px,14vw,68px)}
  .how-steps{gap:28px}.how-steps li{grid-template-columns:44px 1fr;gap:13px}.step-number{width:40px;height:40px;font-size:16px}
  .how-steps p,.privacy-prose p,.privacy-prose ul,.about-prose p{font-size:15px}
  .how-visual{min-height:520px;margin-top:20px;transform:scale(1.08);transform-origin:center}
  .data-chip{padding:7px 8px;font-size:9px}.data-chip span{font-size:13px}
  .dashboard-card{top:24%;width:66%;padding:10px}.dashboard-head{font-size:11px}.dash-panel{min-height:70px;padding:8px}.safe strong{font-size:20px}
  .privacy-visual{min-height:470px;margin-top:20px}.glass-frame{left:14%;top:17%;width:78%}.info-symbol{border-radius:13px}
  .back-library{left:20px;bottom:18px}
  .portrait-frame{min-height:590px}
}
@media(max-height:620px) and (min-width:701px){
  .hero-brand{top:20px;width:190px}.hero-nav{top:22px}.glass-pill{min-height:48px;font-size:18px}
  .hero-headline{top:20%;font-size:46px}
  .post-nav{top:18px}.welcome-content{width:520px;padding-top:46px}.welcome-logo{width:78%}.welcome h2{font-size:38px;margin-top:14px}.welcome-actions{margin-top:23px}.action{min-height:58px;font-size:23px}
}
@media(min-width:701px) and (max-width:900px){
  .hero-brand{left:18px;top:18px;width:150px}
  .hero-nav{left:auto;right:14px;top:20px;width:calc(100% - 200px);transform:none}
  .hero-nav .glass-pill,.hero-nav .glass-pill:first-child{min-width:0;flex:1;padding:10px 8px;font-size:15px}
  .hero-headline{top:clamp(148px,26vh,210px);font-size:clamp(38px,8.1vw,72px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .dashboard-card{opacity:1;transform:perspective(900px) rotateY(-4deg)}
  .glass-door{transform:rotateY(-42deg)}
  .manual-symbol{transform:translateX(-78%)}
}
/* Local onboarding review entry, separate from account sign-up. */
.welcome-actions .preview-onboarding-link{grid-column:1/-1;min-height:54px;width:max-content;max-width:100%;justify-self:center;padding:10px 25px;border:1px solid #77b8f4;border-radius:999px;background:#eaf5ff;color:#174e87;font-size:clamp(16px,1.35vw,20px);letter-spacing:-.02em;text-decoration:none;box-shadow:0 6px 18px #124a8228}
.welcome-actions .preview-onboarding-link:hover{background:#d7ecff;transform:translateY(-2px)}
@media(max-width:700px){.welcome-actions .preview-onboarding-link{min-height:43px;padding:8px 18px;font-size:15px}}
/* Reveal the local preview entry after the landing cinema's existing screen handoff. */
.welcome-actions{position:relative}
.welcome-actions .preview-onboarding-link{position:absolute;top:calc(100% + 14px);left:50%;width:max-content;transform:translateX(-50%);opacity:0;pointer-events:none}
html.site-entered .welcome-actions .preview-onboarding-link{animation:previewLinkArrive .45s .75s ease-out both;pointer-events:auto}
@keyframes previewLinkArrive{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.welcome-actions .preview-onboarding-link:hover{transform:translate(-50%,-2px)}
/* Money integration: the demo page. */
.demo-open{gap:8px;border:0;font:inherit;font-weight:600;cursor:pointer}
.demo-open:disabled{opacity:.6;cursor:progress}
.demo-status{min-height:1.6em;color:#53667d}
.demo-return{display:inline-block;margin-top:8px;color:#147ef3}
.demo-notice{padding:14px 18px;border-radius:16px;background:#eef5ff;color:#0b2a52!important;font-size:16px!important}
.demo-notice.is-error{background:#fdecec;color:#8a1111!important}
/* Money integration: four navigation pills on a phone sit two by two, so no label wraps. */
@media(max-width:700px){.glass-nav{flex-wrap:wrap}.glass-pill,.hero-nav .glass-pill:first-child,.post-nav .glass-pill:first-child{flex:1 1 calc(50% - 6px);white-space:nowrap}.post-nav{top:calc(max(12px,env(safe-area-inset-top)) + 60px)}}
/* Money integration: scroll-linked reveal for the three sections (landing.js sets --r from 0 to 1). */
.reveal{translate:0 calc((1 - var(--r,1)) * 34px);will-change:opacity,translate}
.reveal:not(.data-chip,.dashboard-card){opacity:var(--r,1)}
/* These already animate opacity and transform, so they fade through filter and move through translate. */
.reveal:is(.data-chip,.dashboard-card){filter:opacity(var(--r,1))}
/* Money integration: near-clear glass, and a hover that lights only where the pointer is (landing.js sets --mx/--my). */
.glass-pill,.glass-pill:hover{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%);text-shadow:0 1px 10px rgba(0,20,50,.5)}
.glass-pill:hover{border-color:rgba(255,255,255,.36)}
.glass-pill::before{border-top-color:rgba(255,255,255,.14)}
.post-nav .glass-pill,.post-nav .glass-pill:hover{background:rgba(255,255,255,.22);border-color:rgba(81,171,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);text-shadow:none}
.post-nav .glass-pill:hover{border-color:rgba(81,171,255,.5)}
.action,.section-cta{position:relative;overflow:hidden}
:is(.glass-pill,.action,.section-cta,.laptop-hit>span)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 70%);opacity:0;transition:opacity .25s ease}
:is(.post-nav .glass-pill,.action-secondary)::after{background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(20,126,243,.16),transparent 70%)}
:is(.glass-pill,.action,.section-cta):hover::after,.laptop-hit:hover>span::after{opacity:1}
/* Money integration: the progress bar — a plain 2px line, no track, no glow (landing.js fills it). */
.timeline,.site-entered .timeline{position:fixed;z-index:60;display:block;opacity:1;height:2px;background:transparent}
#timeline-fill{background:#2b8cff}
/* Money integration: Giorgio's portrait as a record sleeve — a blurred copy of the photo glows behind
   it, and the frame leans toward the pointer (landing.js sets --pull-x/--pull-y/--tilt-x/--tilt-y). */
.portrait-stage{position:relative;isolation:isolate}
.portrait-halo{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 27%;border-radius:40px;filter:blur(56px) saturate(2.2) brightness(1.35);opacity:.8;transform:translate3d(calc(var(--pull-x,0px) * .4),calc(var(--pull-y,0px) * .4),0) scale(1.08);transition:transform .6s ease-in-out;pointer-events:none}
.portrait-frame{transform:perspective(1000px) translate3d(var(--pull-x,0px),var(--pull-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(calc(-2deg + var(--tilt-y,0deg)));transition:transform .6s ease-in-out}
.portrait-stage.is-pulled .portrait-frame,.portrait-stage.is-pulled .portrait-halo{transition-duration:.3s;transition-timing-function:ease-out}
/* Money integration: where a dark section meets a light one, the light passes through Ferrario
   blue into the dark edge — a horizon glow instead of a hard cut. Always on the dark side, where the padding absorbs it; a zero-height element
   between the two sections, painted above both. */
.section-divider{position:relative;z-index:5;height:0;--fade:clamp(72px,10vw,140px)}
.section-divider::before{content:"";position:absolute;left:0;right:0;height:var(--fade);pointer-events:none}
.section-divider.fade-down::before{top:0;background:linear-gradient(180deg,#f8fbff,rgba(214,232,255,.9) 18%,rgba(120,182,255,.5) 42%,rgba(43,140,255,.2) 68%,rgba(2,10,24,0))}
.section-divider.fade-up::before{bottom:0;background:linear-gradient(0deg,#f8fbff,rgba(214,232,255,.9) 18%,rgba(120,182,255,.5) 42%,rgba(43,140,255,.2) 68%,rgba(2,10,24,0))}
/* Money integration: the previous landing page's footer (footer-02), as it was — only the palette is
   Ferrario's: light sheet, rule, navy and blue for its greens. The board plays behind it at 18% (tetris.js). */
.site-footer{position:relative;isolation:isolate;overflow:hidden;width:100%;border-top:1px solid #b8d4f0;background:#f8fbff;color:#071d40}
.footer-board{position:absolute;z-index:-1;inset:0;width:100%;height:100%;opacity:.18;pointer-events:none}
.footer-shell{display:flex;flex-direction:column;gap:24px;max-width:1920px;margin:0 auto;padding:40px 32px}
.footer-name{font-size:22px;font-weight:650;letter-spacing:-.03em;color:#147ef3}
.footer-blurb{max-width:36ch;margin:4px 0 0;font-size:13px;line-height:1.625;color:#53667d}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;font-size:13px;color:#53667d}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:4px}
.footer-links a:hover{color:#071d40}
.footer-links a:focus-visible{outline:2px solid #147ef3;outline-offset:3px;border-radius:4px}
@media(min-width:744px){.footer-shell{padding-inline:52px}}
@media(min-width:1440px){.footer-shell{flex-direction:row;align-items:baseline;justify-content:space-between;padding-inline:74.5px}}